https://www.snippfy.ai/assets/switch-Q_1xh-B-.js

1import{V as d}from"./VSwitch-CrrazRrJ.js";import{r as m,o as w,c as v,b as l,m as a,aM as p,f as b,e as r,t as c,bf as O,d as i,v as L,F as f,h as y}from"./index-BJiotQ1y.js";import{_ as $}from"./AppCardCode-CcXt1CXD.js";import{V as D}from"./VRow-BaWP5n9q.js";import{V as S}from"./VCol-Bwtue8I5.js";import"./VInput-CGjPsSv0.js";import"./form-8aC4oU02.js";import"./VImg-CEdg-vTA.js";import"./VSelectionControl-B-eLykK3.js";import"./vue3-perfect-scrollbar-C2zm10Dz.js";import"./VCard-ImMJge73.js";import"./VAvatar-Bj_eSgFO.js";import"./VCardText-Ds77CzhY.js";import"./VDivider-niEB_qmK.js";/* empty css              */const U={class:"demo-space-x"},C={__name:"DemoSwitchStates",setup(h){const t=m("on"),e=m("on"),n=m(!0);return(s,o)=>(w(),v("div",U,[l(d,{modelValue:a(t),"onUpdate:modelValue":o[0]||(o[0]=u=>p(t)?t.value=u:null),value:"on",label:"On"},null,8,["modelValue"]),l(d,{label:"Off"}),l(d,{modelValue:a(e),"onUpdate:modelValue":o[1]||(o[1]=u=>p(e)?e.value=u:null),value:"on",disabled:"",label:"On disabled"},null,8,["modelValue"]),l(d,{disabled:"",label:"Off disabled"}),l(d,{modelValue:a(n),"onUpdate:modelValue":o[2]||(o[2]=u=>p(n)?n.value=u:null),loading:"warning",label:`${a(n)?"On":"Off"} loading`},null,8,["modelValue","label"])]))}},T={class:"demo-space-x"},J={__name:"DemoSwitchTrueAndFalseValue",setup(h){const t=m(1),e=m("Show");return(n,s)=>(w(),v("div",T,[l(d,{modelValue:a(t),"onUpdate:modelValue":s[0]||(s[0]=o=>p(t)?t.value=o:null),label:a(t).toString(),"true-value":1,"false-value":0},null,8,["modelValue","label"]),l(d,{modelValue:a(e),"onUpdate:modelValue":s[1]||(s[1]=o=>p(e)?e.value=o:null),label:a(e).toString(),"true-value":"Show","false-value":"Hide"},null,8,["modelValue","label"])]))}},A={__name:"DemoSwitchLabelSlot",setup(h){const t=m(!1);return(e,n)=>(w(),b(d,{modelValue:a(t),"onUpdate:modelValue":n[0]||(n[0]=s=>p(t)?t.value=s:null)},{label:r(()=>[n[1]||(n[1]=c(" Turn on the progress: ")),l(O,{indeterminate:a(t),class:"ms-2"},null,8,["indeterminate"])]),_:1},8,["modelValue"]))}},F={class:"demo-space-x"},M={class:"mt-2 mb-0"},I={__name:"DemoSwitchModelAsArray",setup(h){const t=m(["John"]);return(e,n)=>(w(),v(f,null,[i("div",F,[l(d,{modelValue:a(t),"onUpdate:modelValue":n[0]||(n[0]=s=>p(t)?t.value=s:null),label:"John",value:"John"},null,8,["modelValue"]),l(d,{modelValue:a(t),"onUpdate:modelValue":n[1]||(n[1]=s=>p(t)?t.value=s:null),label:"Jacob",value:"Jacob"},null,8,["modelValue"])]),i("p",M,L(a(t)),1)],64))}},P={class:"demo-space-x"},j={__name:"DemoSwitchColors",setup(h){const t=m(["Primary","Secondary","Success","Info","Warning","Error"]),e=m(["Primary","Secondary","Success","Info","Warning","Error"]);return(n,s)=>(w(),v("div",P,[(w(!0),v(f,null,y(a(e),o=>(w(),b(d,{key:o,modelValue:a(t),"onUpdate:modelValue":s[0]||(s[0]=u=>p(t)?t.value=u:null),label:o,value:o,color:o.toLowerCase()},null,8,["modelValue","label","value","color"]))),128))]))}},z={class:"demo-space-x"},B={__name:"DemoSwitchInset",setup(h){const t=m(!0),e=m(!1);return(n,s)=>(w(),v("div",z,[l(d,{modelValue:a(t),"onUpdate:modelValue":s[0]||(s[0]=o=>p(t)?t.value=o:null),label:`Switch 1: ${a(t).toString()}`},null,8,["modelValue","label"]),l(d,{modelValue:a(e),"onUpdate:modelValue":s[1]||(s[1]=o=>p(e)?e.value=o:null),label:`Switch 2: ${a(e).toString()}`},null,8,["modelValue","label"])]))}},E={class:"demo-space-x"},k={__name:"DemoSwitchBasic",setup(h){const t=m(!0),e=m(!1),n=s=>{const o=s.toString();return o.charAt(0).toUpperCase()+o.slice(1)};return(s,o)=>(w(),v("div",E,[l(d,{modelValue:a(t),"onUpdate:modelValue":o[0]||(o[0]=u=>p(t)?t.value=u:null),label:n(a(t))},null,8,["modelValue","label"]),l(d,{modelValue:a(e),"onUpdate:modelValue":o[1]||(o[1]=u=>p(e)?e.value=u:null),label:n(a(e))},null,8,["modelValue","label"])]))}},W={ts:`<script lang="ts" setup>
2const toggleSwitch = ref(true)
3const toggleFalseSwitch = ref(false)
4
5const capitalizedLabel = (label: boolean) => {
6  const convertLabelText = label.toString()
7
8  return convertLabelText.charAt(0).toUpperCase() + convertLabelText.slice(1)
9}
10<\/script>
11
12<template>
13  <div class="demo-space-x">
14    <VSwitch
15      v-model="toggleSwitch"
16      :label="capitalizedLabel(toggleSwitch)"
17    />
18
19    <VSwitch
20      v-model="toggleFalseSwitch"
21      :label="capitalizedLabel(toggleFalseSwitch)"
22    />
23  </div>
24</template>
25`,js:`<script setup>
26const toggleSwitch = ref(true)
27const toggleFalseSwitch = ref(false)
28
29const capitalizedLabel = label => {
30  const convertLabelText = label.toString()
31  
32  return convertLabelText.charAt(0).toUpperCase() + convertLabelText.slice(1)
33}
34<\/script>
35
36<template>
37  <div class="demo-space-x">
38    <VSwitch
39      v-model="toggleSwitch"
40      :label="capitalizedLabel(toggleSwitch)"
41    />
42
43    <VSwitch
44      v-model="toggleFalseSwitch"
45      :label="capitalizedLabel(toggleFalseSwitch)"
46    />
47  </div>
48</template>
49`},H={ts:`<script lang="ts" setup>
50const selectedSwitch = ref(['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Error'])
51const switches = ref(['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Error'])
52<\/script>
53
54<template>
55  <div class="demo-space-x">
56    <VSwitch
57      v-for="item in switches"
58      :key="item"
59      v-model="selectedSwitch"
60      :label="item"
61      :value="item"
62      :color="item.toLowerCase()"
63    />
64  </div>
65</template>
66`,js:`<script setup>
67const selectedSwitch = ref([
68  'Primary',
69  'Secondary',
70  'Success',
71  'Info',
72  'Warning',
73  'Error',
74])
75
76const switches = ref([
77  'Primary',
78  'Secondary',
79  'Success',
80  'Info',
81  'Warning',
82  'Error',
83])
84<\/script>
85
86<template>
87  <div class="demo-space-x">
88    <VSwitch
89      v-for="item in switches"
90      :key="item"
91      v-model="selectedSwitch"
92      :label="item"
93      :value="item"
94      :color="item.toLowerCase()"
95    />
96  </div>
97</template>
98`},N={ts:`<script lang="ts" setup>
99const insetSwitch1 = ref(true)
100const insetSwitch2 = ref(false)
101<\/script>
102
103<template>
104  <div class="demo-space-x">
105    <VSwitch
106      v-model="insetSwitch1"
107      :label="\`Switch 1: \${insetSwitch1.toString()}\`"
108    />
109    <VSwitch
110      v-model="insetSwitch2"
111      :label="\`Switch 2: \${insetSwitch2.toString()}\`"
112    />
113  </div>
114</template>
115`,js:`<script setup>
116const insetSwitch1 = ref(true)
117const insetSwitch2 = ref(false)
118<\/script>
119
120<template>
121  <div class="demo-space-x">
122    <VSwitch
123      v-model="insetSwitch1"
124      :label="\`Switch 1: \${insetSwitch1.toString()}\`"
125    />
126    <VSwitch
127      v-model="insetSwitch2"
128      :label="\`Switch 2: \${insetSwitch2.toString()}\`"
129    />
130  </div>
131</template>
132`},R={ts:`<script lang="ts" setup>
133const switchMe = ref(false)
134<\/script>
135
136<template>
137  <VSwitch v-model="switchMe">
138    <template #label>
139      Turn on the progress: <VProgressCircular
140        :indeterminate="switchMe"
141        class="ms-2"
142      />
143    </template>
144  </VSwitch>
145</template>
146`,js:`<script setup>
147const switchMe = ref(false)
148<\/script>
149
150<template>
151  <VSwitch v-model="switchMe">
152    <template #label>
153      Turn on the progress: <VProgressCircular
154        :indeterminate="switchMe"
155        class="ms-2"
156      />
157    </template>
158  </VSwitch>
159</template>
160`},q={ts:`<script lang="ts" setup>
161const people = ref(['John'])
162<\/script>
163
164<template>
165  <div class="demo-space-x">
166    <VSwitch
167      v-model="people"
168      label="John"
169      value="John"
170    />
171
172    <VSwitch
173      v-model="people"
174      label="Jacob"
175      value="Jacob"
176    />
177  </div>
178
179  <p class="mt-2 mb-0">
180    {{ people }}
181  </p>
182</template>
183`,js:`<script setup>
184const people = ref(['John'])
185<\/script>
186
187<template>
188  <div class="demo-space-x">
189    <VSwitch
190      v-model="people"
191      label="John"
192      value="John"
193    />
194
195    <VSwitch
196      v-model="people"
197      label="Jacob"
198      value="Jacob"
199    />
200  </div>
201
202  <p class="mt-2 mb-0">
203    {{ people }}
204  </p>
205</template>
206`},G={ts:`<script setup lang="ts">
207const switchOn = ref('on')
208const switchOnDisabled = ref('on')
209const switchOnLoading = ref(true)
210<\/script>
211
212<template>
213  <div class="demo-space-x">
214    <VSwitch
215      v-model="switchOn"
216      value="on"
217      label="On"
218    />
219
220    <VSwitch label="Off" />
221
222    <VSwitch
223      v-model="switchOnDisabled"
224      value="on"
225      disabled
226      label="On disabled"
227    />
228
229    <VSwitch
230      disabled
231      label="Off disabled"
232    />
233
234    <VSwitch
235      v-model="switchOnLoading"
236      loading="warning"
237      :label="\`\${switchOnLoading ? 'On' : 'Off'} loading\`"
238    />
239  </div>
240</template>
241`,js:`<script setup>
242const switchOn = ref('on')
243const switchOnDisabled = ref('on')
244const switchOnLoading = ref(true)
245<\/script>
246
247<template>
248  <div class="demo-space-x">
249    <VSwitch
250      v-model="switchOn"
251      value="on"
252      label="On"
253    />
254
255    <VSwitch label="Off" />
256
257    <VSwitch
258      v-model="switchOnDisabled"
259      value="on"
260      disabled
261      label="On disabled"
262    />
263
264    <VSwitch
265      disabled
266      label="Off disabled"
267    />
268
269    <VSwitch
270      v-model="switchOnLoading"
271      loading="warning"
272      :label="\`\${switchOnLoading ? 'On' : 'Off'} loading\`"
273    />
274  </div>
275</template>
276`},K={ts:`<script lang="ts" setup>
277const switch1 = ref(1)
278const switch2 = ref('Show')
279<\/script>
280
281<template>
282  <div class="demo-space-x">
283    <VSwitch
284      v-model="switch1"
285      :label="switch1.toString()"
286      :true-value="1"
287      :false-value="0"
288    />
289
290    <VSwitch
291      v-model="switch2"
292      :label="switch2.toString()"
293      true-value="Show"
294      false-value="Hide"
295    />
296  </div>
297</template>
298`,js:`<script setup>
299const switch1 = ref(1)
300const switch2 = ref('Show')
301<\/script>
302
303<template>
304  <div class="demo-space-x">
305    <VSwitch
306      v-model="switch1"
307      :label="switch1.toString()"
308      :true-value="1"
309      :false-value="0"
310    />
311
312    <VSwitch
313      v-model="switch2"
314      :label="switch2.toString()"
315      true-value="Show"
316      false-value="Hide"
317    />
318  </div>
319</template>
320`},ue={__name:"switch",setup(h){return(t,e)=>{const n=k,s=$,o=B,u=j,g=I,V=A,_=J,x=C;return w(),b(D,null,{default:r(()=>[l(S,{cols:"12",md:"6"},{default:r(()=>[l(s,{title:"Basic",code:W},{default:r(()=>[e[0]||(e[0]=i("p",null,[c("A "),i("code",null,"v-switch"),c(" in its simplest form provides a toggle between 2 values.")],-1)),l(n)]),_:1},8,["code"])]),_:1}),l(S,{cols:"12",md:"6"},{default:r(()=>[l(s,{title:"Inset",code:N},{default:r(()=>[e[1]||(e[1]=i("p",null,[c("To change the default "),i("code",null,"inset"),c(" switch, simply modify the inset prop to a "),i("code",null,"false"),c(" value.")],-1)),l(o)]),_:1},8,["code"])]),_:1}),l(S,{cols:"12",md:"6"},{default:r(()=>[l(s,{title:"Colors",code:H},{default:r(()=>[e[2]||(e[2]=i("p",null,[c("Switches can be colored by using any of the builtin colors and contextual names using the "),i("code",null,"color"),c(" prop.")],-1)),l(u)]),_:1},8,["code"])]),_:1}),l(S,{cols:"12",md:"6"},{default:r(()=>[l(s,{title:"Model as array",code:q},{default:r(()=>[e[3]||(e[3]=i("p",null,[c("Multiple "),i("code",null,"v-switch"),c("'s can share the same "),i("code",null,"v-model"),c(" by using an array.")],-1)),l(g)]),_:1},8,["code"])]),_:1}),l(S,{cols:"12",md:"6"},{default:r(()=>[l(s,{title:"Label slot",code:R},{default:r(()=>[e[4]||(e[4]=i("p",null,[c("Switch labels can be defined in "),i("code",null,"label"),c(" slot - that will allow to use HTML content.")],-1)),l(V)]),_:1},8,["code"])]),_:1}),l(S,{cols:"12",md:"6"},{default:r(()=>[l(s,{title:"True and False Value",code:K},{default:r(()=>[e[5]||(e[5]=i("p",null,[c(" Use "),i("code",null,"false-value"),c(" and "),i("code",null,"true-value"),c(" prop to sets value for truthy and falsy state ")],-1)),l(_)]),_:1},8,["code"])]),_:1}),l(S,{cols:"12",md:"6"},{default:r(()=>[l(s,{title:"States",code:G},{default:r(()=>[e[6]||(e[6]=i("p",null,[i("code",null,"v-switch"),c(" can have different states such as "),i("code",null,"default"),c(", "),i("code",null,"disabled"),c(", and "),i("code",null,"loading"),c(".")],-1)),l(x)]),_:1},8,["code"])]),_:1})]),_:1})}}};export{ue as default};