1import{_ as S}from"./Du4GNGbk.js";import{d as b,r as x,c as r,h as d,p as f,o as a,B as C,w as n,f as h,G as y,R as v,g as c,H as k,I as w,i as p,cg as I,q as D,F as W,t as _,a2 as B,_ as $,V as G,cr as O,k as U}from"./BEQ0kH-F.js";import{_ as F}from"./CT61vIs6.js";import{V as R,a as g}from"./BZJ59zc1.js";import{V as j}from"./U3ONaRer.js";import{_ as L}from"./Dqg7UYLW.js";import{V as E,a as P}from"./yHQc7nSo.js";import"./ZF2EbBT3.js";import"./PpXQE8uQ.js";import"./BnVXV-z7.js";import"./DV6MnPd4.js";import"./HTzCUu5j.js";import"./Cj5Fy4aS.js";const N=b({__name:"DemoCustomInputCustomRadios",setup(i){const l=[{title:"Basic",subtitle:"Free",desc:"Get 1 project with 1 team member.",value:"basic"},{title:"Premium",subtitle:"$45.80",value:"premium",desc:"Get 5 projects with 5 team members."}],e=x("basic");return(m,s)=>{const t=S;return a(),r(t,{"selected-radio":d(e),"onUpdate:selectedRadio":s[0]||(s[0]=u=>f(e)?e.value=u:null),"radio-content":l,"grid-column":{sm:"6",cols:"12"}},null,8,["selected-radio"])}}}),T=Object.assign(N,{__name:"DemoCustomInputCustomRadios"}),J={class:"flex-grow-1"},A={class:"d-flex align-center mb-2"},H={class:"cr-title text-base"},K={key:0,class:"text-disabled text-body-2"},Y={class:"text-sm mb-0"},q=b({__name:"CustomCheckboxes",props:{selectedCheckbox:{},checkboxContent:{},gridColumn:{}},emits:["update:selectedCheckbox"],setup(i,{emit:l}){const e=i,m=l,s=t=>{typeof t!="boolean"&&t!==null&&m("update:selectedCheckbox",t)};return(t,u)=>e.checkboxContent&&e.selectedCheckbox?(a(),r(R,{key:0,class:"custom-input-wrapper"},{default:n(()=>[(a(!0),h(W,null,y(e.checkboxContent,o=>(a(),r(g,v({key:o.title},{ref_for:!0},i.gridColumn),{default:n(()=>[c(k,{class:w(["custom-input custom-checkbox rounded cursor-pointer",e.selectedCheckbox.includes(o.value)?"active":""])},{default:n(()=>[p("div",null,[c(j,{id:("useId"in t?t.useId:d(D))(),"model-value":e.selectedCheckbox,value:o.value,"onUpdate:modelValue":s},null,8,["id","model-value","value"])]),I(t.$slots,"default",{item:o},()=>[p("div",J,[p("div",A,[p("h6",H,_(o.title),1),c(B),o.subtitle?(a(),h("span",K,_(o.subtitle),1)):C("",!0)]),p("p",Y,_(o.desc),1)])],!0)]),_:2},1032,["class"])]),_:2},1040))),128))]),_:3})):C("",!0)}}),X=Object.assign($(q,[["__scopeId","data-v-744f8f84"]]),{__name:"CustomCheckboxes"}),Z=b({__name:"DemoCustomInputCustomCheckboxes",setup(i){const l=[{title:"Discount",subtitle:"20%",desc:"Wow! Get 20% off on your next purchase!",value:"discount"},{title:"Updates",subtitle:"Free",desc:"Get Updates regarding related products.",value:"updates"}],e=x(["discount"]);return(m,s)=>{const t=X;return a(),r(t,{"selected-checkbox":d(e),"onUpdate:selectedCheckbox":s[0]||(s[0]=u=>f(e)?e.value=u:null),"checkbox-content":l,"grid-column":{sm:"6",cols:"12"}},null,8,["selected-checkbox"])}}}),M=Object.assign(Z,{__name:"DemoCustomInputCustomCheckboxes"}),Q=b({__name:"DemoCustomInputCustomRadiosWithIcon",setup(i){const l=[{title:"Starter",desc:"For freelancers who work with multiple clients",value:"starter",icon:{icon:"tabler-rocket",size:"28"}},{title:"Personal",desc:"Join our talented community of talented digital agencies",value:"personal",icon:{icon:"tabler-star",size:"28"}},{title:"Enterprise",desc:"Team plan for free upto 15 seats",value:"enterprise",icon:{icon:"tabler-crown",size:"28"}}],e=x("starter");return(m,s)=>{const t=L;return a(),r(t,{"selected-radio":d(e),"onUpdate:selectedRadio":s[0]||(s[0]=u=>f(e)?e.value=u:null),"radio-content":l,"grid-column":{sm:"4",cols:"12"}},null,8,["selected-radio"])}}}),ee=Object.assign(Q,{__name:"DemoCustomInputCustomRadiosWithIcon"}),te={class:"d-flex flex-column align-center text-center gap-2"},oe={class:"cr-title text-base"},se={class:"text-sm clamp-text mb-0"},ce=b({__name:"CustomCheckboxesWithIcon",props:{selectedCheckbox:{},checkboxContent:{},gridColumn:{}},emits:["update:selectedCheckbox"],setup(i,{emit:l}){const e=i,m=l,s=t=>{typeof t!="boolean"&&t!==null&&m("update:selectedCheckbox",t)};return(t,u)=>e.checkboxContent&&e.selectedCheckbox?(a(),r(R,{key:0,class:"custom-input-wrapper"},{default:n(()=>[(a(!0),h(W,null,y(e.checkboxContent,o=>(a(),r(g,v({key:o.title},{ref_for:!0},i.gridColumn),{default:n(()=>[c(k,{class:w(["custom-input custom-checkbox-icon rounded cursor-pointer",e.selectedCheckbox.includes(o.value)?"active":""])},{default:n(()=>[I(t.$slots,"default",{item:o},()=>[p("div",te,[c(G,v({ref_for:!0},o.icon,{class:"text-high-emphasis"}),null,16),p("h6",oe,_(o.title),1),p("p",se,_(o.desc),1)])],!0),p("div",null,[c(j,{id:("useId"in t?t.useId:d(D))(),"model-value":e.selectedCheckbox,value:o.value,"onUpdate:modelValue":s},null,8,["id","model-value","value"])])]),_:2},1032,["class"])]),_:2},1040))),128))]),_:3})):C("",!0)}}),ne=Object.assign($(ce,[["__scopeId","data-v-a09b9500"]]),{__name:"CustomCheckboxesWithIcon"}),ae=b({__name:"DemoCustomInputCustomCheckboxesWithIcon",setup(i){const l=[{title:"Backup",desc:"Backup every file from your project.",value:"backup",icon:{icon:"tabler-server-2",size:"28"}},{title:"Encrypt",desc:"Translate your data to encrypted text.",value:"encrypt",icon:{icon:"tabler-ban",size:"28"}},{title:"Site Lock",desc:"Security tool to protect your website.",value:"site-lock",icon:{icon:"tabler-lock",size:"28"}}
1],e=x(["backup"]);return(m,s)=>{const t=ne;return a(),r(t,{"selected-checkbox":d(e),"onUpdate:selectedCheckbox":s[0]||(s[0]=u=>f(e)?e.value=u:null),"checkbox-content":l,"grid-column":{sm:"4",cols:"12"}},null,8,["selected-checkbox"])}}}),le=Object.assign(ae,{__name:"DemoCustomInputCustomCheckboxesWithIcon"}),ie=["src"],re=b({__name:"CustomRadiosWithImage",props:{selectedRadio:{},radioContent:{},gridColumn:{}},emits:["update:selectedRadio"],setup(i,{emit:l}){const e=i,m=l,s=t=>{t!==null&&m("update:selectedRadio",t)};return(t,u)=>e.radioContent?(a(),r(E,{key:0,"model-value":e.selectedRadio,class:"custom-input-wrapper","onUpdate:modelValue":s},{default:n(()=>[c(R,null,{default:n(()=>[(a(!0),h(W,null,y(e.radioContent,o=>(a(),r(g,v({key:o.bgImage},{ref_for:!0},i.gridColumn),{default:n(()=>[c(k,{class:w(["custom-input custom-radio rounded cursor-pointer w-100",e.selectedRadio===o.value?"active":""])},{default:n(()=>[I(t.$slots,"content",{item:o},()=>[typeof o.bgImage=="object"?(a(),r(O(o.bgImage),{key:0,class:"custom-radio-image"})):(a(),h("img",{key:1,src:o.bgImage,alt:"bg-img",class:"custom-radio-image"},null,8,ie))],!0),c(P,{id:`custom-radio-with-img-${o.value}`,name:`custom-radio-with-img-${o.value}`,value:o.value},null,8,["id","name","value"])]),_:2},1032,["class"]),o.label||t.$slots.label?(a(),r(k,{key:0,for:`custom-radio-with-img-${o.value}`,class:"cursor-pointer"},{default:n(()=>[I(t.$slots,"label",{label:o.label},()=>[U(_(o.label),1)],!0)]),_:2},1032,["for"])):C("",!0)]),_:2},1040))),128))]),_:3})]),_:3},8,["model-value"])):C("",!0)}}),ue=Object.assign($(re,[["__scopeId","data-v-fa4a898a"]]),{__name:"CustomRadiosWithImage"}),me=""+new URL("custom-radio-img-1.YrBKH0Sm.png",import.meta.url).href,de=""+new URL("custom-radio-img-2.Ph1YXgv1.png",import.meta.url).href,pe=""+new URL("custom-radio-img-3.Bg8gANbN.png",import.meta.url).href,be=b({__name:"DemoCustomInputCustomRadiosWithImage",setup(i){const l=[{bgImage:me,value:"basic"},{bgImage:de,value:"premium"},{bgImage:pe,value:"enterprise"}],e=x("basic");return(m,s)=>{const t=ue;return a(),r(t,{"selected-radio":d(e),"onUpdate:selectedRadio":s[0]||(s[0]=u=>f(e)?e.value=u:null),"radio-content":l,"grid-column":{sm:"4",cols:"12"}},null,8,["selected-radio"])}}}),ge=Object.assign(be,{__name:"DemoCustomInputCustomRadiosWithImage"}),_e=["src"],Ce=b({__name:"CustomCheckboxesWithImage",props:{selectedCheckbox:{},checkboxContent:{},gridColumn:{}},emits:["update:selectedCheckbox"],setup(i,{emit:l}){const e=i,m=l,s=t=>{typeof t!="boolean"&&t!==null&&m("update:selectedCheckbox",t)};return(t,u)=>e.checkboxContent&&e.selectedCheckbox?(a(),r(R,{key:0,class:"custom-input-wrapper"},{default:n(()=>[(a(!0),h(W,null,y(e.checkboxContent,o=>(a(),r(g,v({key:o.value},{ref_for:!0},i.gridColumn),{default:n(()=>[c(k,{class:w(["custom-input custom-checkbox rounded cursor-pointer w-100",e.selectedCheckbox.includes(o.value)?"active":""])},{default:n(()=>[p("div",null,[c(j,{id:`custom-checkbox-with-img-${o.value}`,"model-value":e.selectedCheckbox,value:o.value,"onUpdate:modelValue":s},null,8,["id","model-value","value"])]),p("img",{src:o.bgImage,alt:"bg-img",class:"custom-checkbox-image"},null,8,_e)]),_:2},1032,["class"]),o.label||t.$slots.label?(a(),r(k,{key:0,for:`custom-checkbox-with-img-${o.value}`,class:"cursor-pointer"},{default:n(()=>[I(t.$slots,"label",{label:o.label},()=>[U(_(o.label),1)],!0)]),_:2},1032,["for"])):C("",!0)]),_:2},1040))),128))]),_:3})):C("",!0)}}),he=Object.assign($(Ce,[["__scopeId","data-v-a3d083ed"]]),{__name:"CustomCheckboxesWithImage"}),ke=""+new URL("custom-checkbox-img-1.CN62rwL8.png",import.meta.url).href,xe=""+new URL("custom-checkbox-img-2.CESZ7JlS.png",import.meta.url).href,fe=""+new URL("custom-checkbox-img-3.CFGEoD3K.png",import.meta.url).href,ve=b({__name:"DemoCustomInputCustomCheckboxesWithImage",setup(i){const l=[{bgImage:ke,value:"basic"},{bgImage:xe,value:"premium"},{bgImage:fe,value:"enterprise"}],e=x(["basic"]);return(m,s)=>{const t=he;return a(),r(t,{"selected-checkbox":d(e),"onUpdate:selectedCheckbox":s[0]||(s[0]=u=>f(e)?e.value=u:null),"checkbox-content":l,"grid-column":{sm:"4",cols:"12"}},null,8,["selected-checkbox"])}}}),Ie=Object.assign(ve,{__name:"DemoCustomInputCustomCheckboxesWithImage"}),Re={ts:`<script setup lang="ts"> 2import type { CustomInputContent } from '@core/types' 3 4const checkboxContent: CustomInputContent[] = [ 5 { 6 title: 'Discount', 7 subtitle: '20%', 8 desc: 'Wow! Get 20% off on your next purchase!', 9 value: 'discount', 10 }, 11 { 12 title: 'Updates', 13 subtitle: 'Free', 14 desc: 'Get Updates regarding related products.', 15 value: 'updates', 16 }, 17] 18 19const selectedCheckbox = ref(['discount']) 20<\/script> 21 22<template> 23 <CustomCheckboxes 24 v-model:selected-checkbox="selectedCheckbox" 25 :checkbox-content="checkboxContent" 26 :grid-column="{ sm: '6', cols: '12' }" 27 /> 28</template> 29`,js:`<script setup> 30const checkboxContent = [ 31 { 32 title: 'Discount', 33 subtitle: '20%', 34 desc: 'Wow! Get 20% off on your next purchase!', 35 value: 'discount', 36 }, 37 { 38 title: 'Updates', 39 subtitle: 'Free', 40 desc: 'Get Updates regarding related products.', 41 value: 'updates', 42 }, 43] 44 45const selectedCheckbox = ref(['discount']) 46<\/script> 47 48<template> 49 <CustomCheckboxes 50 v-model:selected-checkbox="selectedCheckbox" 51 :checkbox-content="checkboxContent" 52 :grid-column="{ sm: '6', cols: '12' }" 53 /> 54</template> 55`},ye={ts:`<script setup lang="ts"> 56import type { CustomInputContent } from '@core/types' 57 58const checkboxContent: CustomInputContent[] = [ 59 { 60 title: 'Backup', 61 desc: 'Backup every file from your project.', 62 value: 'backup', 63 icon: { icon: 'tabler-server-2', size: '28' }, 64 }, 65 { 66 title: 'Encrypt', 67 desc: 'Translate your data to encrypted text.', 68 value: 'encrypt', 69 icon: { icon: 'tabler-ban', size: '28' }, 70 }, 71 { 72 title: 'Site Lock', 73 desc: 'Security tool to protect your website.', 74 value: 'site-lock', 75 icon: { icon: 'tabler-lock', size: '28' }, 76 }, 77] 78 79const selectedCheckbox = ref(['backup']) 80<\/script> 81 82<template> 83 <CustomCheckboxesWithIcon 84 v-model:selected-checkbox="selectedCheckbox" 85 :checkbox-content="checkboxContent" 86 :grid-column="{ sm: '4', cols: '12' }" 87 /> 88</template> 89`,js:`<script setup> 90const checkboxContent = [ 91 { 92 title: 'Backup', 93 desc: 'Backup every file from your project.', 94 value: 'backup', 95 icon: { 96 icon: 'tabler-server-2', 97 size: '28', 98 }, 99 }, 100 { 101 title: 'Encrypt', 102 desc: 'Translate your data to encrypted text.', 103 value: 'encrypt', 104 icon: { 105 icon: 'tabler-ban', 106 size: '28', 107 }, 108 }, 109 { 110 title: 'Site Lock', 111 desc: 'Security tool to protect your website.', 112 value: 'site-lock', 113 icon: { 114 icon: 'tabler-lock', 115 size: '28', 116 }, 117 }, 118] 119 120const selectedCheckbox = ref(['backup']) 121<\/script> 122 123<template> 124 <CustomCheckboxesWithIcon 125 v-model:selected-checkbox="selectedCheckbox" 126 :checkbox-content="checkboxContent" 127 :grid-column="{ sm: '4', cols: '12' }" 128 /> 129</template> 130`},we={ts:`<script setup lang="ts">
131import bg1 from '@images/pages/custom-checkbox-img-1.png' 132import bg2 from '@images/pages/custom-checkbox-img-2.png' 133import bg3 from '@images/pages/custom-checkbox-img-3.png' 134 135const checkboxContent: { bgImage: string; value: string }[] = [ 136 { 137 bgImage: bg1, 138 value: 'basic', 139 }, 140 { 141 bgImage: bg2, 142 value: 'premium', 143 }, 144 { 145 bgImage: bg3, 146 value: 'enterprise', 147 }, 148] 149 150const selectedCheckbox = ref(['basic']) 151<\/script> 152 153<template> 154 <CustomCheckboxesWithImage 155 v-model:selected-checkbox="selectedCheckbox" 156 :checkbox-content="checkboxContent" 157 :grid-column="{ sm: '4', cols: '12' }" 158 /> 159</template> 160`,js:`<script setup> 161import bg1 from '@images/pages/custom-checkbox-img-1.png' 162import bg2 from '@images/pages/custom-checkbox-img-2.png' 163import bg3 from '@images/pages/custom-checkbox-img-3.png' 164 165const checkboxContent = [ 166 { 167 bgImage: bg1, 168 value: 'basic', 169 }, 170 { 171 bgImage: bg2, 172 value: 'premium', 173 }, 174 { 175 bgImage: bg3, 176 value: 'enterprise', 177 }, 178] 179 180const selectedCheckbox = ref(['basic']) 181<\/script> 182 183<template> 184 <CustomCheckboxesWithImage 185 v-model:selected-checkbox="selectedCheckbox" 186 :checkbox-content="checkboxContent" 187 :grid-column="{ sm: '4', cols: '12' }" 188 /> 189</template> 190`},We={ts:`<script setup lang="ts"> 191import type { CustomInputContent } from '@core/types' 192 193const radioContent: CustomInputContent[] = [ 194 { 195 title: 'Basic', 196 subtitle: 'Free', 197 desc: 'Get 1 project with 1 team member.', 198 value: 'basic', 199 }, 200 { 201 title: 'Premium', 202 subtitle: '$45.80', 203 value: 'premium', 204 desc: 'Get 5 projects with 5 team members.', 205 }, 206] 207 208const selectedRadio = ref('basic') 209<\/script> 210 211<template> 212 <CustomRadios 213 v-model:selected-radio="selectedRadio" 214 :radio-content="radioContent" 215 :grid-column="{ sm: '6', cols: '12' }" 216 /> 217</template> 218`,js:`<script setup> 219const radioContent = [ 220 { 221 title: 'Basic', 222 subtitle: 'Free', 223 desc: 'Get 1 project with 1 team member.', 224 value: 'basic', 225 }, 226 { 227 title: 'Premium', 228 subtitle: '$45.80', 229 value: 'premium', 230 desc: 'Get 5 projects with 5 team members.', 231 }, 232] 233 234const selectedRadio = ref('basic') 235<\/script> 236 237<template> 238 <CustomRadios 239 v-model:selected-radio="selectedRadio" 240 :radio-content="radioContent" 241 :grid-column="{ sm: '6', cols: '12' }" 242 /> 243</template> 244`},$e={ts:`<script setup lang="ts"> 245import type { CustomInputContent } from '@core/types' 246 247const radioContent: CustomInputContent[] = [ 248 { 249 title: 'Starter', 250 desc: 'For freelancers who work with multiple clients', 251 value: 'starter', 252 icon: { icon: 'tabler-rocket', size: '28' }, 253 }, 254 { 255 title: 'Personal', 256 desc: 'Join our talented community of talented digital agencies', 257 value: 'personal', 258 icon: { icon: 'tabler-star', size: '28' }, 259 }, 260 { 261 title: 'Enterprise', 262 desc: 'Team plan for free upto 15 seats', 263 value: 'enterprise', 264 icon: { icon: 'tabler-crown', size: '28' }, 265 }, 266] 267 268const selectedRadio = ref('starter') 269<\/script> 270 271<template> 272 <CustomRadiosWithIcon 273 v-model:selected-radio="selectedRadio" 274 :radio-content="radioContent" 275 :grid-column="{ sm: '4', cols: '12' }" 276 /> 277</template> 278`,js:`<script setup> 279const radioContent = [ 280 { 281 title: 'Starter', 282 desc: 'For freelancers who work with multiple clients', 283 value: 'starter', 284 icon: { 285 icon: 'tabler-rocket', 286 size: '28', 287 }, 288 }, 289 { 290 title: 'Personal', 291 desc: 'Join our talented community of talented digital agencies', 292 value: 'personal', 293 icon: { 294 icon: 'tabler-star', 295 size: '28', 296 }, 297 }, 298 { 299 title: 'Enterprise', 300 desc: 'Team plan for free upto 15 seats', 301 value: 'enterprise', 302 icon: { 303 icon: 'tabler-crown', 304 size: '28', 305 }, 306 }, 307] 308 309const selectedRadio = ref('starter') 310<\/script> 311 312<template> 313 <CustomRadiosWithIcon 314 v-model:selected-radio="selectedRadio" 315 :radio-content="radioContent" 316 :grid-column="{ sm: '4', cols: '12' }" 317 /> 318</template> 319`},je={ts:`<script setup lang="ts"> 320import bg1 from '@images/pages/custom-radio-img-1.png' 321import bg2 from '@images/pages/custom-radio-img-2.png' 322import bg3 from '@images/pages/custom-radio-img-3.png' 323 324const radioContent: { bgImage: string; value: string }[] = [ 325 { 326 bgImage: bg1, 327 value: 'basic', 328 }, 329 { 330 bgImage: bg2, 331 value: 'premium', 332 }, 333 { 334 bgImage: bg3, 335 value: 'enterprise', 336 }, 337] 338 339const selectedRadio = ref('basic') 340<\/script> 341 342<template> 343 <CustomRadiosWithImage 344 v-model:selected-radio="selectedRadio" 345 :radio-content="radioContent" 346 :grid-column="{ sm: '4', cols: '12' }" 347 /> 348</template> 349`,js:`<script setup> 350import bg1 from '@images/pages/custom-radio-img-1.png' 351import bg2 from '@images/pages/custom-radio-img-2.png' 352import bg3 from '@images/pages/custom-radio-img-3.png' 353 354const radioContent = [ 355 { 356 bgImage: bg1, 357 value: 'basic', 358 }, 359 { 360 bgImage: bg2, 361 value: 'premium', 362 }, 363 { 364 bgImage: bg3, 365 value: 'enterprise', 366 }, 367] 368 369const selectedRadio = ref('basic') 370<\/script> 371 372<template> 373 <CustomRadiosWithImage 374 v-model:selected-radio="selectedRadio" 375 :radio-content="radioContent" 376 :grid-column="{ sm: '4', cols: '12' }" 377 /> 378</template> 379`},Te=b({__name:"custom-input",setup(i){return(l,e)=>{const m=T,s=F,t=M,u=ee,o=le,V=ge,z=Ie;return a(),r(R,null,{default:n(()=>[c(g,{cols:"12",md:"6"},{default:n(()=>[c(s,{title:"Custom Radios",code:d(We)},{default:n(()=>[c(m)]),_:1},8,["code"])]),_:1}),c(g,{cols:"12",md:"6"},{default:n(()=>[c(s,{title:"Custom Checkboxes",code:d(Re)},{default:n(()=>[c(t)]),_:1},8,["code"])]),_:1}),c(g,{cols:"12",md:"6"},{default:n(()=>[c(s,{title:"Custom Radios With Icon",code:d($e)},{default:n(()=>[c(u)]),_:1},8,["code"])]),_:1}),c(g,{cols:"12",md:"6"},{default:n(()=>[c(s,{title:"Custom Checkboxes With Icon",code:d(ye)},{default:n(()=>[c(o)]),_:1},8,["code"])]),_:1}),c(g,{cols:"12",md:"6"},{default:n(()=>[c(s,{title:"Custom Radios With Image",code:d(je)},{default:n(()=>[c(V)]),_:1},8,["code"])]),_:1}),c(g,{cols:"12",md:"6"},{default:n(()=>[c(s,{title:"Custom Checkboxes With Image",code:d(we)},{default:n(()=>[c(z)]),_:1},8,["code"])]),_:1})]),_:1})}}});
379export{Te as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.