1import{b$ as T,s as h,aL as v,bJ as t,I as e,H as r,cF as s,aU as C,q as O,u as V,e2 as te,fc as ne,dY as S,F as q,aX as A,t as M,v as i,dy as L,d0 as R,bb as $,fS as le,fT as D,aZ as B,c9 as b,bk as w,ar as z,eO as ae,ak as U,dv as W}from"./index-DcDh_618.js";import{V as x,a as p,b as c,c as ie,d as pe,e as re}from"./VStepper-xQrIFBO-.js";import{_ as se}from"./UsageExample-9JFD51b5.js";import{V as E}from"./VCheckbox-7yzHHbsu.js";import"./VSlideGroupItem-B1jLk4BV.js";import"./upperFirst-nFmnOqP0.js";const oe={};function de(u,l){return v(),h(c,{"alt-labels":""},{default:t(()=>[e(x,null,{default:t(()=>[e(p,{value:"1",complete:""},{title:t(()=>[...l[0]||(l[0]=[r(" Ad type ",-1)])]),_:1}),e(s),e(p,{value:"2",complete:""},{title:t(()=>[...l[1]||(l[1]=[r(" Ad style ",-1)])]),_:1}),e(s),e(p,{rules:[()=>!1],value:"3"},{title:t(()=>[...l[2]||(l[2]=[r(" Custom channels ",-1)])]),subtitle:t(()=>[...l[3]||(l[3]=[r(" Alert message ",-1)])]),_:1}),e(s),e(p,{value:"46"},{title:t(()=>[...l[4]||(l[4]=[ 2r(" Get code ",-1)])]),_:1})]),_:1})]),_:1})}const ve=T(oe,[["render",de]]),ue=`<template> 3 <v-stepper alt-labels> 4 <v-stepper-header> 5 <v-stepper-item 6 value="1" 7 complete 8 > 9 <template v-slot:title> 10 Ad type 11 </template> 12 </v-stepper-item> 13 14 <v-divider></v-divider> 15 16 <v-stepper-item 17 value="2" 18 complete 19 > 20 <template v-slot:title> 21 Ad style 22 </template> 23 </v-stepper-item> 24 25 <v-divider></v-divider> 26 27 <v-stepper-item 28 :rules="[() => false]" 29 value="3" 30 > 31 <template v-slot:title> 32 Custom channels 33 </template> 34 35 <template v-slot:subtitle> 36 Alert message 37 </template> 38 </v-stepper-item> 39 40 <v-divider></v-divider> 41 42 <v-stepper-item value="46"> 43 <template v-slot:title> 44 Get code 45 </template> 46 </v-stepper-item> 47 </v-stepper-header> 48 </v-stepper> 49</template> 50`,me={__name:"misc-dynamic",setup(u){const l=C(1),g=C(2),n=O(()=>l.value===1?"prev":l.value===g.value?"next":void 0);return(m,d)=>(v(),V("div",null,[e(S,{class:"mb-4"},{default:t(()=>[e(te,null,{default:t(()=>[e(ne,{modelValue:g.value,"onUpdate:modelValue":d[0]||(d[0]=o=>g.value=o),items:[2,3,4,5,6],label:"# of steps"},null,8,["modelValue"])]),_:1})]),_:1}),e(c,{modelValue:l.value,"onUpdate:modelValue":d[1]||(d[1]=o=>l.value=o)},{default:t(({prev:o,next:k})=>[e(x,null,{default:t(()=>[(v(!0),V(q,null,A(g.value,a=>(v(),V(q,{key:`${a}-step`},[e(p,{complete:l.value>a,step:"Step {{ n }}",value:a,editable:""},null,8,["complete","value"]),a!==g.value?(v(),h(s,{key:a})):M("",!0)],64))),128))]),_:1}),e(ie,null,{default:t(()=>[(v(!0),V(q,null,A(g.value,a=>(v(),h(pe,{key:`${a}-content`,value:a},{default:t(()=>[e(S,{color:"grey-lighten-1",height:"200"})]),_:1},8,["value"]))),128))]),_:1}),e(re,{disabled:n.value,"onClick:next":k,"onClick:prev":o},null,8,["disabled","onClick:next","onClick:prev"])]), 51_:1},8,["modelValue"])]))}},ce=`<template> 52 <div> 53 <v-card class="mb-4"> 54 <v-card-text> 55 <v-select 56 v-model="steps" 57 :items="[2, 3, 4, 5, 6]" 58 label="# of steps" 59 ></v-select> 60 </v-card-text> 61 </v-card> 62 63 <v-stepper v-model="e1"> 64 <template v-slot:default="{ prev, next }"> 65 <v-stepper-header> 66 <template v-for="n in steps" :key="\`\${n}-step\`"> 67 <v-stepper-item 68 :complete="e1 > n" 69 :step="\`Step {{ n }}\`" 70 :value="n" 71 editable 72 ></v-stepper-item> 73 74 <v-divider 75 v-if="n !== steps" 76 :key="n" 77 ></v-divider> 78 </template> 79 </v-stepper-header> 80 81 <v-stepper-window> 82 <v-stepper-window-item 83 v-for="n in steps" 84 :key="\`\${n}-content\`" 85 :value="n" 86 > 87 <v-card 88 color="grey-lighten-1" 89 height="200" 90 ></v-card> 91 </v-stepper-window-item> 92 </v-stepper-window> 93
94 <v-stepper-actions 95 :disabled="disabled" 96 @click:next="next" 97 @click:prev="prev" 98 ></v-stepper-actions> 99 </template> 100 </v-stepper> 101 </div> 102</template> 103 104<script setup> 105 import { computed, ref } from 'vue' 106 107 const e1 = ref(1) 108 const steps = ref(2) 109 110 const disabled = computed(() => { 111 return e1.value === 1 ? 'prev' : e1.value === steps.value ? 'next' : undefined 112 }) 113<\/script> 114 115<script> 116 export default { 117 data () { 118 return { 119 e1: 1, 120 steps: 2, 121 } 122 }, 123 124 computed: { 125 disabled () { 126 return this.e1 === 1 ? 'prev' : this.e1 === this.steps ? 'next' : undefined 127 }, 128 }, 129 } 130<\/script> 131`,I=u=>u.exampleMeta=` 132 { 133 "figma": "https://www.figma.com/design/5f4g4pbbBsk9TTWX4Xvlx1/PRO-v3.0---Official-Vuetify-3-UI-Kit?node-id=2747-64290&t=tC3y53U3XKPv8ZyJ-4" 134 } 135`,H={};function fe(u,l){return v(),h(c,null,{default:t(()=>[e(x,null,{default:t(()=>[e(p,{title:"Select campaign settings",value:"1",complete:"",editable:""}),e(s),e(p,{title:"Create an ad group",value:"2",complete:""}),e(s),e(p,{title:"Create an ad",value:"3",editable:""})]),_:1})]),_:1})}typeof I=="function"&&I(H);const be=T(H,[["render",fe]]),ge=`<template> 136 <v-stepper> 137 <v-stepper-header> 138 <v-stepper-item 139 title="Select campaign settings" 140 value="1" 141 complete 142 editable 143 ></v-stepper-item> 144 145 <v-divider></v-divider> 146 147 <v-stepper-item 148 title="Create an ad group" 149 value="2" 150 complete 151 ></v-stepper-item> 152 153 <v-divider></v-divider> 154 155 <v-stepper-item 156 title="Create an ad" 157 value="3" 158 editable 159 ></v-stepper-item> 160 </v-stepper-header> 161 </v-stepper> 162</template> 163 164<example-meta lang="json"> 165 { 166 "figma": "https://www.figma.com/design/5f4g4pbbBsk9TTWX4Xvlx1/PRO-v3.0---Official-Vuetify-3-UI-Kit?node-id=2747-64290&t=tC3y53U3XKPv8ZyJ-4" 167 } 168</example-meta> 169`,N=u=>u.exampleMeta=` 170 { 171 "figma": "https://www.figma.com/design/5f4g4pbbBsk9TTWX4Xvlx1/PRO-v3.0---Official-Vuetify-3-UI-Kit?node-id=2747-64572&t=tC3y53U3XKPv8ZyJ-4" 172 } 173`,j={};function xe(u,l){return v(),h(c,{"model-value":"3"},{default:t(()=>[e(x,null,{default:t(()=>[e(p,{title:"Job Search",value:"1",complete:""}),e(s),e(p,{rules:[()=>!1],subtitle:"Missing Details",title:"Submit Application",value:"2"}),e(s),e(p,{title:"Interview Process",value:"3"}),e(s),e(p,{title:"Hiring Decision",value:"4"})]),_:1})]),_:1})}typeof N=="function"&&N(j);const _e=T(j,[["render",xe]]),ye=`<template> 174 <v-stepper model-value="3"> 175 <v-stepper-header> 176 <v-stepper-item 177 title="Job Search" 178 value="1" 179 complete 180 ></v-stepper-item> 181 182 <v-divider></v-divider> 183 184 <v-stepper-item 185 :rules="[() => false]" 186 subtitle="Missing Details" 187 title="Submit Application" 188 value="2" 189 ></v-stepper-item> 190 191 <v-divider></v-divider> 192 193 <v-stepper-item 194 title="Interview Process" 195 value="3" 196 ></v-stepper-item> 197 198 <v-divider></v-divider> 199 200 <v-stepper-item 201 title="Hiring Decision" 202 value="4" 203 ></v-stepper-item> 204 </v-stepper-header> 205 </v-stepper> 206</template> 207 208<example-meta lang="json"> 209 { 210 "figma": "https://www.figma.com/design/5f4g4pbbBsk9TTWX4Xvlx1/PRO-v3.0---Official-Vuetify-3-UI-Kit?node-id=2747-64572&t=tC3y53U3XKPv8ZyJ-4" 211 } 212</example-meta> 213`,Ce=["textContent"],Se=["textContent"],he=["textContent"],Ve={class:"text-end"},ke=["textContent"],we=["textContent"],$e=["textContent"],qe=["textContent"],Te={class:"text-end"},Pe={__name:"misc-horizontal",setup(u){const l=C(0),g=C(1),n=O(()=>o.reduce((k,a)=>k+a.quantity*a.price,0)),m=O(()=>n.value+Number(l.value??0)),d=["Review Order","Select Shipping","Submit"],o=[{name:"Product 1",price:10,quantity:2},{name:"Product 2",price:15,quantity:10}];return(k,a)=>(v(),h(c,{modelValue:g.value,"onUpdate:modelValue":a[1]||(a[1]=f=>g.value=f),items:d,"show-actions":""},{"item.1":t(()=>[a[5]||(a[5]=i("h3",{class:"text-title-large my-0"},"Order",-1)),a[6]||(a[6]=i("br",null,null,-1)),e(L,{border:""},{default:t(()=>[e(R,null,{default:t(()=>[a[4]||(a[4]=i("thead",null,[i("tr",null,[i("th",null,"Description"),i("th",{class:"text-end"},"Quantity"),i("th",{class:"text-end"},"Price")])],-1)),i("tbody",null,[(v(),V(q,null,A(o,(f,P)=>i("tr",{key:P}
213,[i("td",{textContent:$(f.name)},null,8,Ce),i("td",{class:"\ 214text-end",textContent:$(f.quantity)},null,8,Se),i("td",{class:"text-end",textContent:$(f.quantity*f.price)},null,8,he)])),64)),i("tr",null,[a[2]||(a[2]=i("th",null,"Total",-1)),a[3]||(a[3]=i("th",null,null,-1)),i("th",Ve," $"+$(n.value),1)])])]),_:1})]),_:1})]),"item.2":t(()=>[a[7]||(a[7]=i("h3",{class:"text-title-large my-0"},"Shipping",-1)),a[8]||(a[8]=i("br",null,null,-1)),e(le,{modelValue:l.value,"onUpdate:modelValue":a[0]||(a[0]=f=>l.value=f),label:"Delivery Method"},{default:t(()=>[e(D,{label:"Standard Shipping",value:"5"}),e(D,{label:"Priority Shipping",value:"10"}),e(D,{label:"Express Shipping",value:"15"})]),_:1},8,["modelValue"])]),"item.3":t(()=>[a[14]||(a[14]=i("h3",{class:"text-title-large my-0"},"Confirm",-1)),a[15]||(a[15]=i("br",null,null,-1)),e(L,{border:""},{default:t(()=>[e(R,null,{default:t(()=>[a[13]||(a[13]=i("thead",null,[i("tr",null,[i("th",null,"Description"),i("th",{class:"text-end"},"Quantity"),i("th",{class:"text-end"},"Price")])],-1)),i("tbody",null,[(v(),V( 215q,null,A(o,(f,P)=>i("tr",{key:P},[i("td",{textContent:$(f.name)},null,8,ke),i("td",{class:"text-end",textContent:$(f.quantity)},null,8,we),i("td",{class:"text-end",textContent:$(f.quantity*f.price)},null,8,$e)])),64)),i("tr",null,[a[9]||(a[9]=i("td",null,"Shipping",-1)),a[10]||(a[10]=i("td",null,null,-1)),i("td",{class:"text-end",textContent:$(l.value)},null,8,qe)]),i("tr",null,[a[11]||(a[11]=i("th",null,"Total",-1)),a[12]||(a[12]=i("th",null,null,-1)),i("th",Te," $"+$(m.value),1)])])]),_:1})]),_:1})]),_:1},8,["modelValue"]))}},Ue=`<template> 216 <v-stepper 217 v-model="step" 218 :items="items" 219 show-actions 220 > 221 <template v-slot:item.1> 222 <h3 class="text-title-large my-0">Order</h3> 223 224 <br> 225 226 <v-sheet border> 227 <v-table> 228 <thead> 229 <tr> 230 <th>Description</th> 231 <th class="text-end">Quantity</th> 232 <th class="text-end">Price</th> 233 </tr> 234 </thead> 235 236 <tbody> 237 <tr v-for="(product, index) in products" :key="index"> 238 <td v-text="product.name"></td> 239 <td class="text-end" v-text="product.quantity"></td> 240 <td class="text-end" v-text="product.quantity * product.price"></td> 241 </tr> 242 243 <tr> 244 <th>Total</th> 245 <th></th> 246 <th class="text-end"> 247 \${{ subtotal }} 248 </th> 249 </tr> 250 </tbody> 251 </v-table> 252 </v-sheet> 253 </template> 254 255 <template v-slot:item.2> 256 <h3 class="text-title-large my-0">Shipping</h3> 257 258 <br> 259 260 <v-radio-group v-model="shipping" label="Delivery Method"> 261 <v-radio label="Standard Shipping" value="5"></v-radio> 262 <v-radio label="Priority Shipping" value="10"></v-radio> 263 <v-radio label="Express Shipping" value="15"></v-radio> 264 </v-radio-group> 265 </template> 266 267 <template v-slot:item.3> 268 <h3 class="text-title-large my-0">Confirm</h3> 269 270 <br> 271 272 <v-sheet border> 273 <v-table> 274 <thead> 275 <tr> 276 <th>Description</th> 277 <th class="text-end">Quantity</th> 278 <th class="text-end">Price</th> 279 </tr> 280 </thead> 281 282 <tbody> 283 <tr v-for="(product, index) in products" :key="index"> 284 <td v-text="product.name"></td> 285 <td class="text-end" v-text="product.quantity"></td> 286 <td class="text-end" v-text="product.quantity * product.price"></td> 287 </tr> 288 289 <tr> 290 <td>Shipping</td> 291 <td></td> 292 <td class="text-end" v-text="shipping"></td> 293 </tr> 294 295 <tr> 296 <th>Total</th> 297 <th></th> 298 <th class="text-end"> 299 \${{ total }} 300 </th> 301 </tr> 302 </tbody> 303 </v-table> 304 </v-sheet> 305 </template> 306 </v-stepper> 307</template> 308 309<script setup> 310 import { computed, ref } from 'vue' 311 312 const shipping = ref(0) 313 const step = ref(1) 314 const subtotal = computed(() => products.reduce((acc, product) => acc + product.quantity * product.price, 0)) 315 const total = computed(() => subtotal.value + Number(shipping.value ?? 0)) 316 317 const items = [ 318 'Review Order', 319 'Select Shipping', 320 'Submit', 321 ] 322 const products = [ 323 { 324 name: 'Product 1', 325 price: 10, 326 quantity: 2, 327 }, 328 { 329 name: 'Product 2', 330 price: 15, 331 quantity: 10, 332 }, 333 ] 334<\/script> 335 336<script> 337 export default { 338 data: () => ({ 339 shipping: 0, 340 step: 1, 341 items: [ 342 'Review Order', 343 'Select Shipping', 344 'Submit', 345 ], 346 products: [ 347 { 348 name: 'Product 1', 349 price: 10, 350 quantity: 2, 351 }, 352 { 353 name: 'Product 2', 354 price: 15, 355 quantity: 10, 356 }, 357 ], 358 }), 359 360 computed: { 361 subtotal () { 362 return this.products.reduce((acc, product) => acc + product.quantity * product.price, 0) 363 }, 364 total () { 365 return this.subtotal + Number(this.shipping ?? 0) 366 }, 367 }, 368 } 369<\/script> 370`,Oe={};function Ae(u,l){return v(),V(q,null,[e(c,null,{default:t(()=>[e(x,null,{default:t(()=>[e(p,{title:"Select campaign settings",value:"1"}),e(s),e(p,{title:"Create an ad group",value:"2"}),e(s),e(p,{title:"Create an ad",value:"3"})]),_:1})]),_:1}),l[0]||(l[0]=i("br",null,null,-1)),e(c,{"model-value":"2"},{default:t(()=>[e(x,null,{default:t(()=>[e(p,{title:"Select campaign settings",value:"1",complete:""}),e(s),e(p,{title:"Create an ad group",value:"2"}),e(s),e(p,{title:"Create an ad",value:"3"})]),_:1})]),_:1}),l[1]||(l[1]=i("br",null,null,-1)),e(c,{"model-value":"3"},{default:t(()=>[e(x,null,{default:t(()=>[e(p,{title:"Select campaign settings",value:"1",complete:""}),e(s),e(p,{title:"Create an ad group",value:"2",complete:""}),e(s),e(p,{title:"Create an ad",value:"3"})]),_:1})]),_:1})],64)}const Xe=T(Oe,[["render",Ae]]),Be=`<template>
371 <v-stepper> 372 <v-stepper-header> 373 <v-stepper-item 374 title="Select campaign settings" 375 value="1" 376 ></v-stepper-item> 377 378 <v-divider></v-divider> 379 380 <v-stepper-item 381 title="Create an ad group" 382 value="2" 383 ></v-stepper-item> 384 385 <v-divider></v-divider> 386 387 <v-stepper-item 388 title="Create an ad" 389 value="3" 390 ></v-stepper-item> 391 </v-stepper-header> 392 </v-stepper> 393 394 <br> 395 396 <v-stepper model-value="2"> 397 <v-stepper-header> 398 <v-stepper-item 399 title="Select campaign settings" 400 value="1" 401 complete 402 ></v-stepper-item> 403 404 <v-divider></v-divider> 405 406 <v-stepper-item 407 title="Create an ad group" 408 value="2" 409 ></v-stepper-item> 410 411 <v-divider></v-divider> 412 413 <v-stepper-item 414 title="Create an ad" 415 value="3" 416 ></v-stepper-item> 417 </v-stepper-header> 418 </v-stepper> 419 420 <br> 421 422 <v-stepper model-value="3"> 423 <v-stepper-header> 424 <v-stepper-item 425 title="Select campaign settings" 426 value="1" 427 complete 428 ></v-stepper-item> 429 430 <v-divider></v-divider> 431 432 <v-stepper-item 433 title="Create an ad group" 434 value="2" 435 complete 436 ></v-stepper-item> 437 438 <v-divider></v-divider> 439 440 <v-stepper-item 441 title="Create an ad" 442 value="3" 443 ></v-stepper-item> 444 </v-stepper-header> 445 </v-stepper> 446</template> 447`,J=u=>u.exampleMeta=` 448 { 449 "figma": "https://www.figma.com/design/5f4g4pbbBsk9TTWX4Xvlx1/PRO-v3.0---Official-Vuetify-3-UI-Kit?node-id=2747-63988&t=tC3y53U3XKPv8ZyJ-4" 450 } 451`,F={};function De(u,l){return v(),h(c,{"model-value":"2"},{default:t(()=>[e(x,null,{default:t(()=>[e(p,{title:"Select campaign settings",value:"1",complete:""}),e(s),e(p,{title:"Create an ad group",value:"2"}),e(s),e(p,{title:"Create an ad",value:"3"})]),_:1})]),_:1})}typeof J=="function"&&J(F);const Ee=T(F,[["render",De]]),Ke=`<template> 452 <v-stepper model-value="2"> 453 <v-stepper-header> 454 <v-stepper-item 455 title="Select campaign settings" 456 value="1" 457 complete 458 ></v-stepper-item> 459 460 <v-divider></v-divider> 461 462 <v-stepper-item 463 title="Create an ad group" 464 value="2" 465 ></v-stepper-item> 466 467 <v-divider></v-divider> 468 469 <v-stepper-item 470 title="Create an ad" 471 value="3" 472 ></v-stepper-item> 473 </v-stepper-header> 474 </v-stepper> 475</template> 476 477<example-meta lang="json"> 478 { 479 "figma": "https://www.figma.com/design/5f4g4pbbBsk9TTWX4Xvlx1/PRO-v3.0---Official-Vuetify-3-UI-Kit?node-id=2747-63988&t=tC3y53U3XKPv8ZyJ-4" 480 } 481</example-meta> 482`,Le={};function Re(u,l){return v(),V(q,null,[e(c,{"model-value":"1"},{default:t(()=>[e(x,null,{default:t(()=>[e(p,{title:"Select campaign settings",value:"1"}),e(s),e(p,{subtitle:"Optional",title:"Create an ad group",value:"2"}),e(s),e(p,{title:"Create an ad",value:"3"})]),_:1})]),_:1}),l[0]||(l[0]=i("br",null,null,-1)),e(c,{"model-value":"2"},{default:t(()=>[e(x,null,{default:t(()=>[e(p,{title:"Select campaign settings",value:"1",complete:""}),e(s),e(p,{subtitle:"Optional",title:"Create an ad group",value:"2"}),e(s),e(p,{title:"Create an ad",value:"3"})]),_:1})]),_:1})],64)}const We=T(Le,[["render",Re]]),Ie=`<template> 483 <v-stepper model-value="1"> 484 <v-stepper-header> 485 <v-stepper-item 486 title="Select campaign settings" 487 value="1" 488 ></v-stepper-item> 489 490 <v-divider></v-divider> 491 492 <v-stepper-item 493 subtitle="Optional" 494 title="Create an ad group" 495 value="2" 496 ></v-stepper-item> 497 498 <v-divider></v-divider> 499 500 <v-stepper-item 501 title="Create an ad" 502 value="3" 503 ></v-stepper-item> 504 </v-stepper-header> 505 </v-stepper> 506 507 <br> 508 509 <v-stepper model-value="2"> 510 <v-stepper-header> 511 <v-stepper-item 512 title="Select campaign settings" 513 value="1" 514 complete 515 ></v-stepper-item> 516 517 <v-divider></v-divider> 518 519 <v-stepper-item 520 subtitle="Optional" 521 title="Create an ad group" 522 value="2" 523 ></v-stepper-item> 524 525 <v-divider></v-divider> 526
527 <v-stepper-item 528 title="Create an ad" 529 value="3" 530 ></v-stepper-item> 531 </v-stepper-header> 532 </v-stepper> 533</template> 534`,Ne={__name:"misc-vertical-error",setup(u){const l=C(2);return(g,n)=>{const m=B("v-stepper-step"),d=B("v-stepper-content");return v(),h(c,{modelValue:l.value,"onUpdate:modelValue":n[4]||(n[4]=o=>l.value=o),vertical:""},{default:t(()=>[e(m,{step:"1",complete:""},{default:t(()=>[...n[5]||(n[5]=[r(" Name of step 1 ",-1)])]),_:1}),e(d,{step:"1"},{default:t(()=>[e(S,{class:"mb-12",color:"grey-lighten-1",height:"200px"}),e(b,{color:"primary",onClick:n[0]||(n[0]=o=>l.value=2)},{default:t(()=>[...n[6]||(n[6]=[r(" Continue ",-1)])]),_:1}),e(b,{variant:"text"},{default:t(()=>[...n[7]||(n[7]=[r(" Cancel ",-1)])]),_:1})]),_:1}),e(m,{step:"2",complete:""},{default:t(()=>[...n[8]||(n[8]=[r(" Name of step 2 ",-1)])]),_:1}),e(d,{step:"2"},{default:t(()=>[e(S,{class:"mb-12",color:"grey-lighten-1",height:"200px"}),e(b,{color:"primary",onClick:n[1]||(n[1]=o=>l.value=3)},{default:t(()=>
534[...n[9]||(n[9]=[r(" Continue ",-1)])]),_:1}),e(b,{variant:"text"},{default:t(()=>[...n[10]||(n[10]=[r(" Cancel ",-1)])]), 535_:1})]),_:1}),e(m,{rules:[()=>!1],step:"3"},{default:t(()=>[...n[11]||(n[11]=[r(" Ad templates ",-1),i("small",null,"Alert message",-1)])]),_:1}),e(d,{step:"3"},{default:t(()=>[e(S,{class:"mb-12",color:"grey-lighten-1",height:"200px"}),e(b,{color:"primary",onClick:n[2]||(n[2]=o=>l.value=4)},{default:t(()=>[...n[12]||(n[12]=[r(" Continue ",-1)])]),_:1}),e(b,{variant:"text"},{default:t(()=>[...n[13]||(n[13]=[r(" Cancel ",-1)])]),_:1})]),_:1}),e(m,{step:"4"},{default:t(()=>[...n[14]||(n[14]=[r(" View setup instructions ",-1)])]),_:1}),e(d,{step:"4"},{default:t(()=>[e(S,{class:"mb-12",color:"grey-lighten-1",height:"200px"}),e(b,{color:"primary",onClick:n[3]||(n[3]=o=>l.value=1)},{default:t(()=>[...n[15]||(n[15]=[r(" Continue ",-1)])]),_:1}),e(b,{variant:"text"},{default:t(()=>[...n[16]||(n[16]=[r(" Cancel ",-1)])]),_:1})]),_:1})]),_:1},8,["modelValue"])}}},Je=`<template> 536 <v-stepper 537 v-model="e13" 538 vertical 539 > 540 <v-stepper-step 541 step="1" 542 complete 543 > 544 Name of step 1 545 </v-stepper-step> 546 547 <v-stepper-content step="1"> 548 <v-card 549 class="mb-12" 550 color="grey-lighten-1" 551 height="200px" 552 ></v-card> 553 <v-btn 554 color="primary" 555 @click="e13 = 2" 556 > 557 Continue 558 </v-btn> 559 <v-btn variant="text"> 560 Cancel 561 </v-btn> 562 </v-stepper-content> 563 564 <v-stepper-step 565 step="2" 566 complete 567 > 568 Name of step 2 569 </v-stepper-step> 570 571 <v-stepper-content step="2"> 572 <v-card 573 class="mb-12" 574 color="grey-lighten-1" 575 height="200px" 576 ></v-card> 577 <v-btn 578 color="primary" 579 @click="e13 = 3" 580 > 581 Continue 582 </v-btn> 583 <v-btn variant="text"> 584 Cancel 585 </v-btn> 586 </v-stepper-content> 587 588 <v-stepper-step 589 :rules="[() => false]" 590 step="3" 591 > 592 Ad templates 593 <small>Alert message</small> 594 </v-stepper-step> 595 596 <v-stepper-content step="3"> 597 <v-card 598 class="mb-12" 599 color="grey-lighten-1" 600 height="200px" 601 ></v-card> 602 <v-btn 603 color="primary" 604 @click="e13 = 4" 605 > 606 Continue 607 </v-btn> 608 <v-btn variant="text"> 609 Cancel 610 </v-btn> 611 </v-stepper-content> 612 613 <v-stepper-step step="4"> 614 View setup instructions 615 </v-stepper-step> 616 617 <v-stepper-content step="4"> 618 <v-card 619 class="mb-12" 620 color="grey-lighten-1" 621 height="200px" 622 ></v-card> 623 <v-btn 624 color="primary" 625 @click="e13 = 1" 626 > 627 Continue 628 </v-btn> 629 <v-btn variant="text"> 630 Cancel 631 </v-btn> 632 </v-stepper-content> 633 </v-stepper> 634</template> 635 636<script setup> 637 import { ref } from 'vue' 638 639 const e13 = ref(2) 640<\/script> 641 642<script> 643 export default { 644 data () { 645 return { 646 e13: 2, 647 } 648 }, 649 } 650<\/script> 651`,Z=u=>u.exampleMeta=` 652 { 653 "figma": "https://www.figma.com/design/5f4g4pbbBsk9TTWX4Xvlx1/PRO-v3.0---Official-Vuetify-3-UI-Kit?node-id=2747-64411&t=tC3y53U3XKPv8ZyJ-4" 654 } 655`,Q={};function Ze(u,l){return v(),h(c,{"alt-labels":""},{default:t(()=>[e(x,null,{default:t(()=>[e(p,{title:"Ad unit details",value:"1"}),e(s),e(p,{title:"Ad sizes",value:"2"}),e(s),e(p,{title:"Ad templates",value:"3"})]),_:1})]),_:1})}typeof Z=="function"&&Z(Q);const Me=T(Q,[["render",Ze]]),ze=`<template> 656 <v-stepper alt-labels> 657 <v-stepper-header> 658 <v-stepper-item title="Ad unit details" value="1"></v-stepper-item> 659 660 <v-divider></v-divider> 661 662 <v-stepper-item title="Ad sizes" value="2"></v-stepper-item> 663 664 <v-divider></v-divider> 665 666 <v-stepper-item title="Ad templates" value="3"></v-stepper-item> 667 </v-stepper-header> 668 </v-stepper> 669</template> 670 671<example-meta lang="json"> 672 { 673 "figma": "https://www.figma.com/design/5f4g4pbbBsk9TTWX4Xvlx1/PRO-v3.0---Official-Vuetify-3-UI-Kit?node-id=2747-64411&t=tC3y53U3XKPv8ZyJ-4" 674 } 675</example-meta> 676`,He={__name:"prop-mobile",setup(u){const l=Array.from({length:10}).map((g,n)=>({title:`Step ${n+1}`,subtitle:`Step ${n+1} subtitle`,value:n+1}));return(g,n)=>(v(),h(c,{mobile:""},{default:t(()=>[e(x,null,{default:t(()=>[(v(!0),V(q,null,A(w(l),(m,d)=>(v(),V(q,{key:d},[d?(v(),h(s,{key:0})):M("",!0),e(p,z({ref_for:!0},m),null,16)],64))),128))]),_:1})]),_:1}))}},je=`<template>
677 <v-stepper mobile> 678 <v-stepper-header> 679 <template v-for="(item, i) in items" :key="i"> 680 <v-divider v-if="i"></v-divider> 681 682 <v-stepper-item v-bind="item"></v-stepper-item> 683 </template> 684 </v-stepper-header> 685 </v-stepper> 686</template> 687 688<script setup> 689 const items = Array.from({ length: 10 }).map((_, i) => ({ 690 title: \`Step \${i + 1}\`, 691 subtitle: \`Step \${i + 1} subtitle\`, 692 value: i + 1, 693 })) 694<\/script> 695 696<script> 697 export default { 698 data: () => ({ 699 items: Array.from({ length: 10 }).map((_, i) => ({ 700 title: \`Step \${i + 1}\`, 701 subtitle: \`Step \${i + 1} subtitle\`, 702 value: i + 1, 703 })), 704 }), 705 } 706<\/script> 707`,Fe={};function Qe(u,l){return v(),V("div",null,[e(c,{"non-linear":""},{default:t(()=>[e(x,null,{default:t(()=>[e(p,{value:"1",editable:""},{default:t(()=>[...l[0]||(l[0]=[r(" Select campaign settings ",-1)])]),_:1}),e(s),e(p,{value:"2",editable:""},{default:t(()=>[...l[1]||(l[1]=[r(" Create an ad group ",-1)])]),_:1}),e(s),e(p,{value:"3",editable:""},{default:t(()=>[...l[2]||(l[2]=[r(" Create an ad ",-1)])]),_:1})]),_:1})]),_:1}),e(c,{class:"mt-12","non-linear":""},{default:t(()=>[e(x,null,{default:t(()=>[e(p,{value:"1",complete:"",editable:""},{default:t(()=>[...l[3]||(l[3]=[r(" Select campaign settings ",-1)])]),_:1}),e(s),e(p,{value:"2",editable:""},{default:t(()=>[...l[4]||(l[4]=[r(" Create an ad group ",-1)])]),_:1}),e(s),e(p,{value:"3",complete:"",editable:""},{default:t(()=>[...l[5]||(l[5]=[r(" Create an ad ",-1)])]),_:1})]),_:1})]),_:1}),e(c,{class:"mt-12",value:"3","non-linear":""},{default:t(()=>[e(x,null,{default:t(()=>[e(p,{value:"1",complete:"",editable:""},{default:t(()=>[ 708...l[6]||(l[6]=[r(" Select campaign settings ",-1)])]),_:1}),e(s),e(p,{value:"2",complete:"",editable:""},{default:t(()=>[...l[7]||(l[7]=[r(" Create an ad group ",-1)])]),_:1}),e(s),e(p,{value:"3",complete:"",editable:""},{default:t(()=>[...l[8]||(l[8]=[r(" Create an ad ",-1)])]),_:1})]),_:1})]),_:1})])}const Ge=T(Fe,[["render",Qe]]),Ye=`<template> 709 <div> 710 <v-stepper non-linear> 711 <v-stepper-header> 712 <v-stepper-item 713 value="1" 714 editable 715 > 716 Select campaign settings 717 </v-stepper-item> 718 719 <v-divider></v-divider> 720 721 <v-stepper-item 722 value="2" 723 editable 724 > 725 Create an ad group 726 </v-stepper-item> 727 728 <v-divider></v-divider> 729 730 <v-stepper-item 731 value="3" 732 editable 733 > 734 Create an ad 735 </v-stepper-item> 736 </v-stepper-header> 737 </v-stepper> 738 739 <v-stepper 740 class="mt-12" 741 non-linear 742 > 743 <v-stepper-header> 744 <v-stepper-item 745 value="1" 746 complete 747 editable 748 > 749 Select campaign settings 750 </v-stepper-item> 751 752 <v-divider></v-divider> 753 754 <v-stepper-item 755 value="2" 756 editable 757 > 758 Create an ad group 759 </v-stepper-item> 760 761 <v-divider></v-divider> 762 763 <v-stepper-item 764 value="3" 765 complete 766 editable 767 > 768 Create an ad 769 </v-stepper-item> 770 </v-stepper-header> 771 </v-stepper> 772 773 <v-stepper 774 class="mt-12" 775 value="3" 776 non-linear 777 > 778 <v-stepper-header> 779 <v-stepper-item 780 value="1" 781 complete 782 editable 783 > 784 Select campaign settings 785 </v-stepper-item> 786 787 <v-divider></v-divider> 788 789 <v-stepper-item 790 value="2" 791 complete 792 editable 793 > 794 Create an ad group 795 </v-stepper-item> 796 797 <v-divider></v-divider> 798 799 <v-stepper-item 800 value="3" 801 complete 802 editable 803 > 804 Create an ad 805 </v-stepper-item> 806 </v-stepper-header> 807 </v-stepper> 808 </div> 809</template> 810`,et={__name:"prop-vertical",setup(u){const l=C(1);return(g,n)=>{const m=B("v-stepper-step"),d=B("v-stepper-content");return v(),h(c,{modelValue:l.value,"onUpdate:modelValue":n[4]||(n[4]=o=>l.value=o),vertical:""},{default:t(()=>[e(m,{complete:l.value>1,step:"1"},{default:t(()=>[...n[5]||(n[5]=[r(" Select an app ",-1),i("small",null,"Summarize if needed",-1)])]),_:1},8,["complete"]),e(d,{step:"1"},{default:t(()=>[e(S,{class:"mb-12",color:"grey-lighten-1",height:"200px"}),e(b,{color:"primary",onClick:n[0]||(n[0]=o=>l.value=2)},{default:t(()=>[...n[6]||(n[6]=[r(" Continue ",-1)])]),_:1}),e(b,{variant:"text"},{default:t(()=>[...n[7]||(n[7]=[r(" Cancel ",-1)])]),_:1})]),_:1}),e(m,{complete:l.value>2,step:"2"},{default:t(()=>
810[...n[8]||(n[8]=[r(" Configure analytics for this app ",-1)])]),_:1},8,["complete"]),e(d,{step:"2"},{default:t(()=>[e(S,{class:"mb-12",color:"grey-lighten-1",height:"200px"}),e(b,{color:"primary",onClick:n[1]||(n[1]=o=>l.value=3)},{default:t(()=>[...n[9]||(n[9]=[r(" Con\ 811tinue ",-1)])]),_:1}),e(b,{variant:"text"},{default:t(()=>[...n[10]||(n[10]=[r(" Cancel ",-1)])]),_:1})]),_:1}),e(m,{complete:l.value>3,step:"3"},{default:t(()=>[...n[11]||(n[11]=[r(" Select an ad format and name ad unit ",-1)])]),_:1},8,["complete"]),e(d,{step:"3"},{default:t(()=>[e(S,{class:"mb-12",color:"grey-lighten-1",height:"200px"}),e(b,{color:"primary",onClick:n[2]||(n[2]=o=>l.value=4)},{default:t(()=>[...n[12]||(n[12]=[r(" Continue ",-1)])]),_:1}),e(b,{variant:"text"},{default:t(()=>[...n[13]||(n[13]=[r(" Cancel ",-1)])]),_:1})]),_:1}),e(m,{step:"4"},{default:t(()=>[...n[14]||(n[14]=[r(" View setup instructions ",-1)])]),_:1}),e(d,{step:"4"},{default:t(()=>[e(S,{class:"mb-12",color:"grey-lighten-1",height:"200px"}),e(b,{color:"primary",onClick:n[3]||(n[3]=o=>l.value=1)},{default:t(()=>[...n[15]||(n[15]=[r(" Continue ",-1)])]),_:1}),e(b,{variant:"text"},{default:t(()=>[...n[16]||(n[16]=[r(" Cancel ",-1)])]),_:1})]),_:1})]),_:1},8,["modelValue"])}}},tt=`<template> 812 <v-stepper 813 v-model="e6" 814 vertical 815 > 816 <v-stepper-step 817 :complete="e6 > 1" 818 step="1" 819 > 820 Select an app 821 <small>Summarize if needed</small> 822 </v-stepper-step> 823 824 <v-stepper-content step="1"> 825 <v-card 826 class="mb-12" 827 color="grey-lighten-1" 828 height="200px" 829 ></v-card> 830 <v-btn 831 color="primary" 832 @click="e6 = 2" 833 > 834 Continue 835 </v-btn> 836 <v-btn variant="text"> 837 Cancel 838 </v-btn> 839 </v-stepper-content> 840 841 <v-stepper-step 842 :complete="e6 > 2" 843 step="2" 844 > 845 Configure analytics for this app 846 </v-stepper-step> 847 848 <v-stepper-content step="2"> 849 <v-card 850 class="mb-12" 851 color="grey-lighten-1" 852 height="200px" 853 ></v-card> 854 <v-btn 855 color="primary" 856 @click="e6 = 3" 857 > 858 Continue 859 </v-btn> 860 <v-btn variant="text"> 861 Cancel 862 </v-btn> 863 </v-stepper-content> 864 865 <v-stepper-step 866 :complete="e6 > 3" 867 step="3" 868 > 869 Select an ad format and name ad unit 870 </v-stepper-step> 871 872 <v-stepper-content step="3"> 873 <v-card 874 class="mb-12" 875 color="grey-lighten-1" 876 height="200px" 877 ></v-card> 878 <v-btn 879 color="primary" 880 @click="e6 = 4" 881 > 882 Continue 883 </v-btn> 884 <v-btn variant="text"> 885 Cancel 886 </v-btn> 887 </v-stepper-content> 888 889 <v-stepper-step step="4"> 890 View setup instructions 891 </v-stepper-step> 892 <v-stepper-content step="4"> 893 <v-card 894 class="mb-12" 895 color="grey-lighten-1" 896 height="200px" 897 ></v-card> 898 <v-btn 899 color="primary" 900 @click="e6 = 1" 901 > 902 Continue 903 </v-btn> 904 <v-btn variant="text"> 905 Cancel 906 </v-btn> 907 </v-stepper-content> 908 </v-stepper> 909</template> 910 911<script setup> 912 import { ref } from 'vue' 913 914 const e6 = ref(1) 915<\/script> 916 917<script> 918 export default { 919 data () { 920 return { 921 e6: 1, 922 } 923 }, 924 } 925<\/script> 926`,nt="v-stepper",lt={__name:"usage",setup(u){const l=C("default"),g=[],n=C(1),m=C(!1),d=C(!1),o=C(!1),k=C("$vuetify.stepper.prev"),a=C("$vuetify.stepper.next");function f(X){X.target.contentEditable=!0}function P(X){X.target.contentEditable=!1}const K=O(()=>({"alt-labels":m.value||void 0,editable:d.value||void 0,"hide-actions":o.value||void 0,"prev-text":k.value.startsWith("$vuetify")?void 0:k.value,"next-text":a.value.startsWith("$vuetify")?void 0:a.value,items:["Step 1","Step 2","Step 3"]})),G=O(()=>` 927 <template v-slot:item.1> 928 <v-card title="Step One" flat>...</v-card> 929 </template> 930 931 <template v-slot:item.2> 932 <v-card title="Step Two" flat>...</v-card> 933 </template> 934 935 <template v-slot:item.3> 936 <v-card title="Step Three" flat>...</v-card> 937 </template> 938`),Y=O(()=>`<v-stepper${ae(K.value)}>${G.value}</v-stepper>`);return(X,_)=>{const ee=se;return v(),h(ee,{modelValue:w(l),"onUpdate:modelValue":_[6]||(_[6]=y=>U(l)?l.value=y:null),code:w(Y),name:nt,options:g},{configuration:t(()=>[e(W,{modelValue:w(k),"onUpdate:modelValue":_[1]||(_[1]=y=>U(k)?k.value=y:null),label:"Previous text"},null,8,["modelValue"]),e(W,{modelValue:w(a),"onUpdate:modelValue":_[2]||(_[2]=y=>U(a)?a.value=y:null),label:"Next text"},null,8,["modelValue"]),e(E,{modelValue:w(o),"onUpdate:modelValue":_[3]||(_[3]=y=>U(o)?o.value=y:null),label:"Hide actions"},null,8,["modelValue"]),e(E,{modelValue:w(d),"onUpdate:modelValue":_[4]||(_[4]=y=>U(d)?d.value=y:null),label:"Editable"},null,8,["modelValue"]),e(E,{modelValue:w(m),"onUpdate:modelValue":_[5]||(_[5]=y=>U(m)?m.value=y:null),label:"Alt labels"},null,8,["modelValue"])]),default:t(()=>[e(c,z(w(K),{modelValue:w(n),"onUpdate:modelValue":_[0]||(_[0]=y=>U(n)?n.value=y:null)}),{"item.1":t(()=>[e(S,{title:"Step One",flat:""},{text:t( 939()=>[i("div",{onBlur:P,onDblclick:f}," Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem! ",32)]),_:1})]),"item.2":t(()=>[e(S,{title:"Step Two",flat:""},{text:t(()=>[i("div",{onBlur:P,onDblclick:f}," Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! ",32)]),_:1})]),"item.3":t(()=>[e(S,{title:"Step Three",flat:""},{text:t(()=>[i("div",{onBlur:P,onDblclick:f}," Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem! Lorem ipsum dolor sit amet consectetur adipisicing elit. ",32)]),_:1})]),_:1},16,["modelValue"])]),_:1},8,["modelValue","code"])}}},at=`<template> 940 <ExamplesUsageExample 941 v-model="model" 942 :code="code" 943 :name="name" 944 :options="options" 945 >
946 <v-stepper v-bind="props" v-model="step"> 947 <template v-slot:item.1> 948 <v-card title="Step One" flat> 949 <template v-slot:text> 950 <div @blur="onBlur" @dblclick="onDblClick"> 951 Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem! 952 </div> 953 </template> 954 </v-card> 955 </template> 956 957 <template v-slot:item.2> 958 <v-card title="Step Two" flat> 959 <template v-slot:text> 960 <div @blur="onBlur" @dblclick="onDblClick"> 961 Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! 962 </div> 963 </template> 964 </v-card> 965 </template> 966 967 <template v-slot:item.3> 968 <v-card title="Step Three" flat> 969 <template v-slot:text> 970 <div @blur="onBlur" @dblclick="onDblClick"> 971 Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem! 972 973 Lorem ipsum dolor sit amet consectetur adipisicing elit. 974 </div> 975 </template> 976 </v-card> 977 </template> 978 </v-stepper> 979 980 <template v-slot:configuration> 981 <v-text-field v-model="prev" label="Previous text"></v-text-field> 982 983 <v-text-field v-model="next" label="Next text"></v-text-field> 984 985 <v-checkbox v-model="hideActions" label="Hide actions"></v-checkbox> 986 987 <v-checkbox v-model="editable" label="Editable"></v-checkbox> 988 989 <v-checkbox v-model="altLabels" label="Alt labels"></v-checkbox> 990 </template> 991 </ExamplesUsageExample> 992</template> 993 994<script setup> 995 const name = 'v-stepper' 996 const model = ref('default') 997 const options = [] 998 const step = ref(1) 999 const altLabels = ref(false) 1000 const editable = ref(false) 1001 const hideActions = ref(false) 1002 const prev = ref('$vuetify.stepper.prev') 1003 const next = ref('$vuetify.stepper.next') 1004 1005 function onDblClick (e) { 1006 e.target.contentEditable = true 1007 } 1008 1009 function onBlur (e) { 1010 e.target.contentEditable = false 1011 } 1012 1013 const props = computed(() => { 1014 return { 1015 'alt-labels': altLabels.value || undefined, 1016 editable: editable.value || undefined, 1017 'hide-actions': hideActions.value || undefined, 1018 'prev-text': prev.value.startsWith('$vuetify') ? undefined : prev.value, 1019 'next-text': next.value.startsWith('$vuetify') ? undefined : next.value, 1020 items: [ 1021 'Step 1', 1022 'Step 2', 1023 'Step 3', 1024 ], 1025 } 1026 }) 1027 1028 const slots = computed(() => { 1029 return \` 1030 <template v-slot:item.1> 1031 <v-card title="Step One" flat>...</v-card> 1032 </template> 1033 1034 <template v-slot:item.2> 1035 <v-card title="Step Two" flat>...</v-card> 1036 </template> 1037 1038 <template v-slot:item.3> 1039 <v-card title="Step Three" flat>...</v-card> 1040 </template> 1041\` 1042 }) 1043 1044 const code = computed(() => { 1045 return \`<v-stepper\${propsToString(props.value)}>\${slots.value}</v-stepper>\` 1046 }) 1047<\/script> 1048`,vt={"misc-alternate-error":{component:ve,source:ue},"misc-dynamic":{component:me,source:ce},"misc-editable":{component:be,source:ge},"misc-error":{component:_e,source:ye},"misc-horizontal":{component:Pe,source:Ue},"misc-linear":{component:Xe,source:Be},"misc-non-editable":{component:Ee,source:Ke},"misc-optional":{component:We,source:Ie},"misc-vertical-error":{component:Ne,source:Je},"prop-alternate-label":{component:Me,source:ze},"prop-mobile":{component:He,source:je},"prop-non-linear":{component:Ge,source:Ye},"prop-vertical":{component:et,source:tt},usage:{component:lt,source:at}};export{vt as default}; 1049//# sourceMappingURL=v-stepper-DNUSsC5N.js.map
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.