https://unitedcode.ai/assets/switch-7966d9d5.js

1import{V as r}from"./VSwitch-95c69e30.js";import{k as m,o as h,c as v,p as t,q as n,W as p,b as f,w as d,L as c,ce as O,m as o,U as y,F as b,a as L,al as S,ak as $}from"./index-f06b639b.js";import{_ as D}from"./AppCardCode-cbd33485.js";import"./vue.runtime.esm-bundler-ceaddd3f.js";const U={class:"demo-space-x"},C={__name:"DemoSwitchStates",setup(w){const e=m("on"),a=m("on"),i=m("on");return(l,s)=>(h(),v("div",U,[t(r,{modelValue:n(e),"onUpdate:modelValue":s[0]||(s[0]=u=>p(e)?e.value=u:null),value:"on",label:"On"},null,8,["modelValue"]),t(r,{label:"Off"}),t(r,{modelValue:n(a),"onUpdate:modelValue":s[1]||(s[1]=u=>p(a)?a.value=u:null),value:"on",disabled:"",label:"On disabled"},null,8,["modelValue"]),t(r,{disabled:"",label:"Off disabled"}),t(r,{modelValue:n(i),"onUpdate:modelValue":s[2]||(s[2]=u=>p(i)?i.value=u:null),loading:"warning",value:"on",label:"On loading"},null,8,["modelValue"]),t(r,{loading:"warning",label:"Off loading"})]))}},T={class:"demo-space-x"},J={__name:"DemoSwitchTrueAndFalseValue",setup(w){const e=m(1),a=m("Show");return(i,l)=>(h(),v("div",T,[t(r,{modelValue:n(e),"onUpdate:modelValue":l[0]||(l[0]=s=>p(e)?e.value=s:null),label:n(e).toString(),"true-value":1,"false-value":0},null,8,["modelValue","label"]),t(r,{modelValue:n(a),"onUpdate:modelValue":l[1]||(l[1]=s=>p(a)?a.value=s:null),label:n(a).toString(),"true-value":"Show","false-value":"Hide"},null,8,["modelValue","label"])]))}},A={__name:"DemoSwitchLabelSlot",setup(w){const e=m(!1);return(a,i)=>(h(),f(r,{modelValue:n(e),"onUpdate:modelValue":i[0]||(i[0]=l=>p(e)?e.value=l:null)},{label:d(()=>[c(" Turn on the progress: "),t(O,{indeterminate:n(e),class:"ms-2"},null,8,["indeterminate"])]),_:1},8,["modelValue"]))}},F={class:"demo-space-x"},M={class:"mt-2 mb-0"},I={__name:"DemoSwitchModelAsArray",setup(w){const e=m(["John"]);return(a,i)=>(h(),v(b,null,[o("div",F,[t(r,{modelValue:n(e),"onUpdate:modelValue":i[0]||(i[0]=l=>p(e)?e.value=l:null),label:"John",value:"John"},null,8,["modelValue"]),t(r,{modelValue:n(e),"onUpdate:modelValue":i[1]||(i[1]=l=>p(e)?e.value=l:null),label:"Jacob",value:"Jacob"},null,8,["modelValue"])]),o("p",M,y(n(e)),1)],64))}},P={class:"demo-space-x"},k={__name:"DemoSwitchColors",setup(w){const e=m(["Primary","Secondary","Success","Info","Warning","Error"]),a=m(["Primary","Secondary","Success","Info","Warning","Error"]);return(i,l)=>(h(),v("div",P,[(h(!0),v(b,null,L(n(a),s=>(h(),f(r,{key:s,modelValue:n(e),"onUpdate:modelValue":l[0]||(l[0]=u=>p(e)?e.value=u:null),label:s,value:s,color:s.toLowerCase()},null,8,["modelValue","label","value","color"]))),128))]))}},j={class:"demo-space-x"},z={__name:"DemoSwitchInset",setup(w){const e=m(!0),a=m(!1);return(i,l)=>(h(),v("div",j,[t(r,{modelValue:n(e),"onUpdate:modelValue":l[0]||(l[0]=s=>p(e)?e.value=s:null),inset:!1,label:`Switch 1: ${n(e).toString()}`},null,8,["modelValue","label"]),t(r,{modelValue:n(a),"onUpdate:modelValue":l[1]||(l[1]=s=>p(a)?a.value=s:null),inset:!1,label:`Switch 2: ${n(a).toString()}`},null,8,["modelValue","label"])]))}},B={class:"demo-space-x"},E={__name:"DemoSwitchBasic",setup(w){const e=m(!0),a=m(!1),i=l=>{const s=l.toString();return s.charAt(0).toUpperCase()+s.slice(1)};return(l,s)=>(h(),v("div",B,[t(r,{modelValue:n(e),"onUpdate:modelValue":s[0]||(s[0]=u=>p(e)?e.value=u:null),label:i(n(e))},null,8,["modelValue","label"]),t(r,{modelValue:n(a),"onUpdate:modelValue":s[1]||(s[1]=u=>p(a)?a.value=u:null),label:i(n(a))},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      :inset="false"
108      :label="\`Switch 1: \${insetSwitch1.toString()}\`"
109    />
110    <VSwitch
111      v-model="insetSwitch2"
112      :inset="false"
113      :label="\`Switch 2: \${insetSwitch2.toString()}\`"
114    />
115  </div>
116</template>
117`,js:`<script setup>
118const insetSwitch1 = ref(true)
119const insetSwitch2 = ref(false)
120<\/script>
121
122<template>
123  <div class="demo-space-x">
124    <VSwitch
125      v-model="insetSwitch1"
126      :inset="false"
127      :label="\`Switch 1: \${insetSwitch1.toString()}\`"
128    />
129    <VSwitch
130      v-model="insetSwitch2"
131      :inset="false"
132      :label="\`Switch 2: \${insetSwitch2.toString()}\`"
133    />
134  </div>
135</template>
136`},R={ts:`<script lang="ts" setup>
137const switchMe = ref(false)
138<\/script>
139
140<template>
141  <VSwitch v-model="switchMe">
142    <template #label>
143      Turn on the progress: <VProgressCircular
144        :indeterminate="switchMe"
145        class="ms-2"
146      />
147    </template>
148  </VSwitch>
149</template>
150`,js:`<script setup>
151const switchMe = ref(false)
152<\/script>
153
154<template>
155  <VSwitch v-model="switchMe">
156    <template #label>
157      Turn on the progress: <VProgressCircular
158        :indeterminate="switchMe"
159        class="ms-2"
160      />
161    </template>
162  </VSwitch>
163</template>
164`},q={ts:`<script lang="ts" setup>
165const people = ref(['John'])
166<\/script>
167
168<template>
169  <div class="demo-space-x">
170    <VSwitch
171      v-model="people"
172      label="John"
173      value="John"
174    />
175
176    <VSwitch
177      v-model="people"
178      label="Jacob"
179      value="Jacob"
180    />
181  </div>
182
183  <p class="mt-2 mb-0">
184    {{ people }}
185  </p>
186</template>
187`,js:`<script setup>
188const people = ref(['John'])
189<\/script>
190
191<template>
192  <div class="demo-space-x">
193    <VSwitch
194      v-model="people"
195      label="John"
196      value="John"
197    />
198
199    <VSwitch
200      v-model="people"
201      label="Jacob"
202      value="Jacob"
203    />
204  </div>
205
206  <p class="mt-2 mb-0">
207    {{ people }}
208  </p>
209</template>
210`},G={ts:`<script setup lang="ts">
211const switchOn = ref('on')
212const switchOnDisabled = ref('on')
213const switchOnLoading = ref('on')
214<\/script>
215
216<template>
217  <div class="demo-space-x">
218    <VSwitch
219      v-model="switchOn"
220      value="on"
221      label="On"
222    />
223
224    <VSwitch label="Off" />
225
226    <VSwitch
227      v-model="switchOnDisabled"
228      value="on"
229      disabled
230      label="On disabled"
231    />
232
233    <VSwitch
234      disabled
235      label="Off disabled"
236    />
237
238    <VSwitch
239      v-model="switchOnLoading"
240      loading="warning"
241      value="on"
242      label="On loading"
243    />
244
245    <VSwitch
246      loading="warning"
247      label="Off loading"
248    />
249  </div>
250</template>
251`,js:`<script setup>
252const switchOn = ref('on')
253const switchOnDisabled = ref('on')
254const switchOnLoading = ref('on')
255<\/script>
256
257<template>
258  <div class="demo-space-x">
259    <VSwitch
260      v-model="switchOn"
261      value="on"
262      label="On"
263    />
264
265    <VSwitch label="Off" />
266
267    <VSwitch
268      v-model="switchOnDisabled"
269      value="on"
270      disabled
271      label="On disabled"
272    />
273
274    <VSwitch
275      disabled
276      label="Off disabled"
277    />
278
279    <VSwitch
280      v-model="switchOnLoading"
281      loading="warning"
282      value="on"
283      label="On loading"
284    />
285
286    <VSwitch
287      loading="warning"
288      label="Off loading"
289    />
290  </div>
291</template>
292`},K={ts:`<script lang="ts" setup>
293const switch1 = ref(1)
294const switch2 = ref('Show')
295<\/script>
296
297<template>
298  <div class="demo-space-x">
299    <VSwitch
300      v-model="switch1"
301      :label="switch1.toString()"
302      :true-value="1"
303      :false-value="0"
304    />
305
306    <VSwitch
307      v-model="switch2"
308      :label="switch2.toString()"
309      true-value="Show"
310      false-value="Hide"
311    />
312  </div>
313</template>
314`,js:`<script setup>
315const switch1 = ref(1)
316const switch2 = ref('Show')
317<\/script>
318
319<template>
320  <div class="demo-space-x">
321    <VSwitch
322      v-model="switch1"
323      :label="switch1.toString()"
324      :true-value="1"
325      :false-value="0"
326    />
327
328    <VSwitch
329      v-model="switch2"
330      :label="switch2.toString()"
331      true-value="Show"
332      false-value="Hide"
333    />
334  </div>
335</template>
336`}

336,Q=o("p",null,[c("A "),o("code",null,"v-switch"),c(" in its simplest form provides a toggle between 2 values.")],-1),X=o("p",null,[c("To change the default "),o("code",null,"inset"),c(" switch, simply modify the inset prop to a "),o("code",null,"false"),c(" value.")],-1),Y=o("p",null,[c("Switches can be colored by using any of the builtin colors and contextual names using the "),o("code",null,"color"),c(" prop.")],-1),Z=o("p",null,[c("Multiple "),o("code",null,"v-switch"),c("'s can share the same "),o("code",null,"v-model"),c(" by using an array.")],-1),ee=o("p",null,[c("Switch labels can be defined in "),o("code",null,"label"),c(" slot - that will allow to use HTML content.")],-1),te=o("p",null,[c(" Use "),o("code",null,"false-value"),c(" and "),o("code",null,"true-value"),c(" prop to sets value for truthy and falsy state ")],-1),le=o("p",null,[o("code",null,"v-switch"),c(" can have different states such as "),o("code",null,"default"),c(", "),o("code",null,"disabled"),c(", and "),o("code",null,"loading"),c(".")],-1),ce={__name:"switch",setup(w){return(e,a)=>{const i=E,l=D,s=z,u=k,_=I,g=A,V=J,x=C;return h(),f($,null,{default:d(()=>[t(S,{cols:"12",md:"6"},{default:d(()=>[t(l,{title:"Basic",code:W},{default:d(()=>[Q,t(i)]),_:1},8,["code"])]),_:1}),t(S,{cols:"12",md:"6"},{default:d(()=>[t(l,{title:"Inset",code:N},{default:d(()=>[X,t(s)]),_:1},8,["code"])]),_:1}),t(S,{cols:"12",md:"6"},{default:d(()=>[t(l,{title:"Colors",code:H},{default:d(()=>[Y,t(u)]),_:1},8,["code"])]),_:1}),t(S,{cols:"12",md:"6"},{default:d(()=>[t(l,{title:"Model as array",code:q},{default:d(()=>[Z,t(_)]),_:1},8,["code"])]),_:1}),t(S,{cols:"12",md:"6"},{default:d(()=>[t(l,{title:"Label slot",code:R},{default:d(()=>[ee,t(g)]),_:1},8,["code"])]),_:1}),t(S,{cols:"12",md:"6"},{default:d(()=>[t(l,{title:"True and False Value",code:K},{default:d(()=>[te,t(V)]),_:1},8,["code"])]),_:1}),t(S,{cols:"12",md:"6"},{default:d(()=>[t(l,{title:"States",code:G},{default:d(()=>[le,t(x)]),_:1},8,["code"])]),_:1})]),_:1})}}};export{ce as default};