1import{aU as d,s as $,aL as p,bJ as s,I as n,v as i,cd as E,ce as _,cA as y,c3 as L,fp as C,cn as V,f9 as B,dY as k,c9 as X,cj as h,H as U,dz as H,cp as w,dv as K,ar as D,cF as S,fq as I,b$ as P,u as v,F as N,aX as G,ff as J,bb as b,au as q,aS as W,q as O,eO as Z,av as M,a4 as Q,bk as c,eQ as j,fc as T,ak as Y}from"./index-By4rWtjC.js";import{V as r}from"./VRating-Ct7gZ2mW.js";import{_ as nn}from"./UsageExample-BKpBx50T.js";import{V as z}from"./VCheckbox-B9BY9ZYl.js";import"./VSlideGroupItem-lJj6-pIu.js";import"./upperFirst-CypMBB4D.js";const en={__name:"misc-advanced",setup(m){const e=d(),l=d(!1),t=d(!1),o=d(10);function g(){e.value.focus(),document.execCommand("selectAll",!1,null),l.value=document.execCommand("copy")}return(x,a)=>(p(),$(k,{class:"mx-auto overflow-hidden","max-width":"600"},{default:s(()=>[n(E,null,{default:s(()=>[n(_,{class:"d-flex",cols:"6"},{default:s(()=>[n(y,{src:"https://cdn.vuetifyjs.com/images/ratings/fortnite1.png"})]),_:1}),n(_,{cols:"6"},{default:s(()=>[n(L, 2{class:"pa-0 ps-2 my-n1"},{default:s(()=>[n(E,null,{default:s(()=>[n(_,{class:"d-flex",cols:"7"},{default:s(()=>[n(y,{src:"https://cdn.vuetifyjs.com/images/ratings/fortnite2.png"})]),_:1}),n(_,{class:"d-flex",cols:"5"},{default:s(()=>[n(y,{src:"https://cdn.vuetifyjs.com/images/ratings/fortnite3.png"})]),_:1}),n(_,{class:"d-flex",cols:"5"},{default:s(()=>[n(y,{src:"https://cdn.vuetifyjs.com/images/ratings/fortnite4.png"})]),_:1}),n(_,{class:"d-flex",cols:"7"},{default:s(()=>[n(y,{src:"https://cdn.vuetifyjs.com/images/ratings/fortnite5.png"})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),n(C,{class:"align-start"},{default:s(()=>[a[5]||(a[5]=i("div",null,[i("span",{class:"text-headline-small"},"FORTNITE"),i("div",{class:"text-grey font-weight-light"}," Video game ")],-1)),n(V),n(B,{modelValue:t.value,"onUpdate:modelValue":a[1]||(a[1]=f=>t.value=f),width:"400"},{activator:s(({props:f})=>[n(h,D(f,{icon:"mdi-share-variant"}),null,16)]),default:s(()=>[n(k,null,{default:s(()=>[n(C,{class:"d-flex"},{ 3default:s(()=>[a[4]||(a[4]=i("span",{class:"text-title-large font-weight-bold"},"Share",-1)),n(V),n(X,{class:"mx-0",icon:"",onClick:a[0]||(a[0]=f=>t.value=!1)},{default:s(()=>[n(h,null,{default:s(()=>[...a[3]||(a[3]=[U("mdi-close-circle-outline",-1)])]),_:1})]),_:1})]),_:1}),n(H,null,{default:s(()=>[n(w,{"prepend-icon":"mdi-facebook",title:"Facebook"}),n(w,{"prepend-icon":"mdi-twitter",title:"Twitter"}),n(w,{"prepend-icon":"mdi-email",title:"Email"})]),_:1}),n(K,{ref_key:"link",ref:e,label:l.value?"Link copied":"Click to copy link",class:"pa-4","model-value":"https://g.co/kgs/nkrK43",readonly:"",onClick:g},null,8,["label"])]),_:1})]),_:1},8,["modelValue"])]),_:1}),n(S),n(I,null,{default:s(()=>[a[6]||(a[6]=i("span",{class:"ps-2 text-grey-darken-2 font-weight-light text-body-small"},"16,544 reviews",-1)),n(V),n(r,{modelValue:o.value,"onUpdate:modelValue":a[2]||(a[2]=f=>o.value=f),length:"10",readonly:""},{item:s(f=>[n(h,{color:f.isFilled?"purple-darken-4":"",icon:`mdi-numeric-${f.index}-\ 4box`,size:"large"},null,8,["color","icon"])]),_:1},8,["modelValue"])]),_:1}),a[7]||(a[7]=i("div",{class:"pa-4 pt-0 text-body-small"},[i("em",null,"Portions of the materials used are trademarks and/or copyrighted works of Epic Games, Inc. All rights reserved by Epic. This material is not official and is not endorsed by Epic.")],-1))]),_:1}))}},tn=`<template> 5 <v-card 6 class="mx-auto overflow-hidden" 7 max-width="600" 8 > 9 <v-row> 10 <v-col 11 class="d-flex" 12 cols="6" 13 > 14 <v-img src="https://cdn.vuetifyjs.com/images/ratings/fortnite1.png"></v-img> 15 </v-col> 16 17 <v-col cols="6"> 18 <v-container class="pa-0 ps-2 my-n1"> 19 <v-row> 20 <v-col 21 class="d-flex" 22 cols="7" 23 > 24 <v-img src="https://cdn.vuetifyjs.com/images/ratings/fortnite2.png"></v-img> 25 </v-col> 26 27 <v-col 28 class="d-flex" 29 cols="5" 30 > 31 <v-img src="https://cdn.vuetifyjs.com/images/ratings/fortnite3.png"></v-img> 32 </v-col> 33 34 <v-col 35 class="d-flex" 36 cols="5" 37 > 38 <v-img src="https://cdn.vuetifyjs.com/images/ratings/fortnite4.png"></v-img> 39 </v-col> 40 41 <v-col 42 class="d-flex" 43 cols="7" 44 > 45 <v-img src="https://cdn.vuetifyjs.com/images/ratings/fortnite5.png"></v-img> 46 </v-col> 47 </v-row> 48 </v-container> 49 </v-col> 50 </v-row> 51 52 <v-card-title class="align-start"> 53 <div>
54 <span class="text-headline-small">FORTNITE</span> 55 <div class="text-grey font-weight-light"> 56 Video game 57 </div> 58 </div> 59 60 <v-spacer></v-spacer> 61 62 <v-dialog 63 v-model="dialog" 64 width="400" 65 > 66 <template v-slot:activator="{ props }"> 67 <v-icon v-bind="props" icon="mdi-share-variant"></v-icon> 68 </template> 69 70 <v-card> 71 <v-card-title class="d-flex"> 72 <span class="text-title-large font-weight-bold">Share</span> 73 <v-spacer></v-spacer> 74 75 <v-btn class="mx-0" icon @click="dialog = false"> 76 <v-icon>mdi-close-circle-outline</v-icon> 77 </v-btn> 78 </v-card-title> 79 80 <v-list> 81 <v-list-item prepend-icon="mdi-facebook" title="Facebook"></v-list-item> 82 <v-list-item prepend-icon="mdi-twitter" title="Twitter"></v-list-item> 83 <v-list-item prepend-icon="mdi-email" title="Email"></v-list-item> 84 </v-list> 85 86 <v-text-field 87 ref="link" 88 :label="copied ? 'Link copied' : 'Click to copy link'" 89 class="pa-4" 90 model-value="https://g.co/kgs/nkrK43" 91 readonly 92 @click="copy" 93 ></v-text-field> 94 </v-card> 95 </v-dialog> 96 </v-card-title> 97 98 <v-divider></v-divider> 99 100 <v-card-actions> 101 <span class="ps-2 text-grey-darken-2 font-weight-light text-body-small">16,544 reviews</span> 102 103 <v-spacer></v-spacer> 104 105 <v-rating 106 v-model="rating" 107 length="10" 108 readonly 109 > 110 <template v-slot:item="props"> 111 <v-icon 112 :color="props.isFilled ? 'purple-darken-4' : ''" 113 :icon="\`mdi-numeric-\${props.index}-box\`" 114 size="large" 115 ></v-icon> 116 </template> 117 </v-rating> 118 </v-card-actions> 119 <div class="pa-4 pt-0 text-body-small"> 120 <em>Portions of the materials used are trademarks and/or copyrighted works of Epic Games, Inc. All rights reserved by Epic. This material is not official and is not endorsed by Epic.</em> 121 </div> 122 </v-card> 123</template> 124 125<script setup> 126 import { ref } from 'vue' 127 128 const link = ref() 129 130 const copied = ref(false) 131 const dialog = ref(false) 132 const rating = ref(10) 133 134 function copy () { 135 link.value.focus() 136 document.execCommand('selectAll', false, null) 137 copied.value = document.execCommand('copy') 138 } 139<\/script> 140 141<script> 142 export default { 143 data: () => ({ 144 copied: false, 145 dialog: false, 146 rating: 10, 147 }), 148 149 methods: { 150 copy () { 151 this.$refs.link.focus() 152 153 document.execCommand('selectAll', false, null) 154 155 this.copied = document.execCommand('copy') 156 }, 157 }, 158 } 159<\/script> 160`,R=m=>m.exampleMeta=` 161 { 162 "figma": "https://www.figma.com/design/5f4g4pbbBsk9TTWX4Xvlx1/PRO-v3.0---Official-Vuetify-3-UI-Kit?node-id=2263-61824&t=tC3y53U3XKPv8ZyJ-4" 163 } 164`,A={},ln={class:"d-flex align-center flex-column my-auto"},an={class:"rating-values"},on={class:"d-flex justify-end"};function sn(m,e){return p(),$(k,{class:"d-flex flex-column mx-auto py-8",elevation:"3",height:"500",width:"360"},{default:s(()=>[e[2]||(e[2]=i("div",{class:"d-flex justify-center mt-auto text-headline-small"}," Rating overview ",-1)),i("div",ln,[e[0]||(e[0]=i("div",{class:"text-display-large mt-5"},[U(" 3.5 "),i("span",{class:"text-title-large ml-n3"},"/5")],-1)),n(r,{"model-value":3.5,color:"yellow-darken-3","half-increments":""}),e[1]||(e[1]=i("div",{class:"px-3"},"3,360 ratings",-1))]),n(H,{"bg-color":"transparent",class:"d-flex flex-column-reverse",density:"compact"},{default:s(()=>[(p(),v(N,null,G(5,(l,t)=>n(w,{key:t},{prepend:s(()=>[i("span",null,b(l),1),n(h,{class:"mx-3",icon:"mdi-star"})]),append:s(()=>[i("div",an,[i("span",on,b(l*224),1)])]),default:s(()=>[n(J,{"model-value":l*15,class:"mx-n5",color:"yellow-darken-3",height:"20",rounded:""},null,8,["model-valu\ 165e"])]),_:2},1024)),64))]),_:1})]),_:1})}typeof R=="function"&&R(A);const rn=P(A,[["render",sn]]),cn=`<template> 166 <v-card 167 class="d-flex flex-column mx-auto py-8" 168 elevation="3" 169 height="500" 170 width="360" 171 > 172 <div class="d-flex justify-center mt-auto text-headline-small "> 173 Rating overview 174 </div> 175 176 <div class="d-flex align-center flex-column my-auto">
177 <div class="text-display-large mt-5"> 178 3.5 179 <span class="text-title-large ml-n3">/5</span> 180 </div> 181 182 <v-rating 183 :model-value="3.5" 184 color="yellow-darken-3" 185 half-increments 186 ></v-rating> 187 <div class="px-3">3,360 ratings</div> 188 </div> 189 190 <v-list 191 bg-color="transparent" 192 class="d-flex flex-column-reverse" 193 density="compact" 194 > 195 <v-list-item v-for="(rating,i) in 5" :key="i"> 196 <v-progress-linear 197 :model-value="rating * 15" 198 class="mx-n5" 199 color="yellow-darken-3" 200 height="20" 201 rounded 202 ></v-progress-linear> 203 204 <template v-slot:prepend> 205 <span>{{ rating }}</span> 206 <v-icon class="mx-3" icon="mdi-star"></v-icon> 207 </template> 208 209 <template v-slot:append> 210 <div class="rating-values"> 211 <span class="d-flex justify-end"> {{ rating * 224 }} </span> 212 </div> 213 </template> 214 </v-list-item> 215 </v-list> 216 </v-card> 217</template> 218 219<style> 220.rating-values { 221 width: 25px; 222} 223</style> 224<example-meta lang="json"> 225 { 226 "figma": "https://www.figma.com/design/5f4g4pbbBsk9TTWX4Xvlx1/PRO-v3.0---Official-Vuetify-3-UI-Kit?node-id=2263-61824&t=tC3y53U3XKPv8ZyJ-4" 227 } 228</example-meta> 229`,dn={class:"d-flex justify-between"},mn={class:"text-grey-lighten-2 text-body-small me-2"},pn={__name:"misc-card",setup(m){const e=d(4.5);return(l,t)=>(p(),$(k,{class:"mx-auto",color:"purple",elevation:"3",width:"360"},{default:s(()=>[i("div",dn,[n(C,{class:"flex-grow-1 flex-column align-start"},{default:s(()=>[...t[1]||(t[1]=[i("div",{class:"text-headline-small"}," Halycon Days ",-1),i("div",{class:"text-title-large font-weight-thin"},"Ellie Goulding",-1),i("div",{class:"text-title-large font-weight-thin"},"(2013)",-1)])]),_:1}),n(y,{class:"flex-grow-0",height:"125px",src:"https://cdn.vuetifyjs.com/images/cards/halcyon.png",style:{"flex-basis":"125px"}})]),n(S),n(I,{class:"pa-4"},{default:s(()=>[t[2]||(t[2]=U(" Rate this album ",-1)),n(V),i("span",mn," ("+b(e.value)+") ",1),n(r,{modelValue:e.value,"onUpdate:modelValue":t[0]||(t[0]=o=>e.value=o),"active-color":"yellow-accent-4",color:"white",size:"18","half-increments":"",hover:""},null,8,["modelValue"])]),_:1})]),_:1}))}},un=`<templa\ 230te> 231 <v-card 232 class="mx-auto" 233 color="purple" 234 elevation="3" 235 width="360" 236 > 237 <div class="d-flex justify-between"> 238 <v-card-title class="flex-grow-1 flex-column align-start"> 239 <div class="text-headline-small"> 240 Halycon Days 241 </div> 242 <div class="text-title-large font-weight-thin">Ellie Goulding</div> 243 244 <div class="text-title-large font-weight-thin">(2013)</div> 245 </v-card-title> 246 247 <v-img 248 class="flex-grow-0" 249 height="125px" 250 src="https://cdn.vuetifyjs.com/images/cards/halcyon.png" 251 style="flex-basis: 125px" 252 ></v-img> 253 </div> 254 255 <v-divider></v-divider> 256 257 <v-card-actions class="pa-4"> 258 Rate this album 259 260 <v-spacer></v-spacer> 261 262 <span class="text-grey-lighten-2 text-body-small me-2"> 263 ({{ rating }}) 264 </span> 265 266 <v-rating 267 v-model="rating" 268 active-color="yellow-accent-4" 269 color="white" 270 size="18" 271 half-increments 272 hover 273 ></v-rating> 274 </v-card-actions> 275 </v-card> 276</template> 277 278<script setup> 279 import { ref } from 'vue' 280 281 const rating = ref(4.5) 282<\/script> 283 284<script> 285 export default { 286 data: () => ({ rating: 4.5 }), 287 } 288<\/script> 289`,vn={class:"text-center"},gn={__name:"prop-clearable",setup(m){const e=d(3);return(l,t)=>(p(),v("div",vn,[n(r,{modelValue:e.value,"onUpdate:modelValue":t[0]||(t[0]=o=>e.value=o),clearable:""},null,8,["modelValue"])]))}},fn=`<template> 290 <div class="text-center"> 291 <v-rating 292 v-model="rating" 293 clearable 294 ></v-rating> 295 </div> 296</template> 297 298<script setup> 299 import { ref } from 'vue' 300 301 const rating = ref(3) 302<\/script> 303 304<script> 305 export default { 306 data: () => ({ 307 rating: 3, 308 }), 309 } 310<\/script> 311`,xn={class:"text-center"},_n={__name:"prop-color",setup(m){const e=d(3);return(l,t)=>(p(),v("div",xn,[n(r,{modelValue:e.value,"onUpdate:modelValue":t[0]||(t[0]=o=>e.value=o),"active-color":"blue",color:"orange-lighten-1"},null,8,["modelValue"])]))}},yn=`<template> 312 <div class="text-center"> 313 <v-rating 314 v-model="rating" 315 active-color="blue" 316 color="orange-lighten-1" 317 ></v-rating> 318 </div> 319</template> 320 321<script setup> 322 import { ref } from 'vue' 323 324 const rating = ref(3) 325<\/script> 326 327<script> 328 export default { 329 data: () => ({ rating: 3 }), 330 } 331<\/script> 332`,bn={class:"d-flex flex-column align-center justify-center"},hn={__name:"prop-density",setup(m){const e=d(3);return(l,t)=>(p(),v("div",bn,[n(r,{modelValue:e.value,"onUpdate:modelValue":t[0]||(t[0]=o=>e.value=o),class:"ma-2",density:"default"},null,8,["modelValue"]),n(r,{modelValue:e.value,"onUpdate:modelValue":t[1]||(t[1]=o=>e.value=o),class:"ma-2",density:"comfortable"},null,8,["modelValue"]),n(r,{modelValue:e.value,"onUpdate:modelValue":t[2]||(t[2]=o=>e.value=o),class:"ma-2",density:"compact"},null,8,["modelValue"])]))}},Vn=`<template> 333 <div class="d-flex flex-column align-center justify-center"> 334 <v-rating 335 v-model="rating" 336 class="ma-2" 337 density="default" 338 ></v-rating> 339 340 <v-rating 341 v-model="rating" 342 class="ma-2" 343 density="comfortable" 344 ></v-rating> 345 346 <v-rating 347 v-model="rating" 348 class="ma-2" 349 density="compact" 350 ></v-rating> 351 </div> 352</template> 353 354<script setup> 355 import { ref } from 'vue' 356 357 const rating = ref(3) 358<\/script> 359 360<script> 361 export default { 362 data: () => ({ rating: 3 }), 363 } 364<\/script> 365`,wn={class:"text-center"},kn={__name:"prop-half-increments",setup(m){const e=d(3.5);return(l,t)=>(p(),v("div",wn,[n(r,{modelValue:e.value,"onUpdate:modelValue":t[0]||(t[0]=o=>e.value=o),"half-increments":"",hover:""},null,8,["modelValue"]),i("pre",null,b(e.value),1)]))}},$n=`<template> 366 <div class="text-center"> 367 <v-rating 368 v-model="rating" 369 half-increments 370 hover 371 ></v-rating> 372 <pre>{{ rating }}</pre> 373 </div> 374</template> 375 376<script setup> 377 import { ref } from 'vue' 378 379 const rating = ref(3.5) 380<\/script> 381 382<script> 383 export default { 384 data: () => ({ 385 rating: 3.5, 386 }), 387 } 388<\/script> 389`,Un={class:"text-center"},jn={__name:"prop-hover",setup(m){const e=d(3);return(l,t)=>(p(),v("div",Un,[n(r,{modelValue:e.value,"onUpdate:modelValue":t[0]||(t[0]=o=>e.value=o),hover:""},null,8,["modelValue"])]))}},zn=`<template> 390 <div class="text-center"> 391 <v-rating 392 v-model="rating" 393 hover 394 ></v-rating> 395 </div> 396</template> 397 398<script setup> 399 import { ref } from 'vue' 400 401 const rating = ref(3) 402<\/script> 403 404<script> 405 export default { 406 data: () => ({ 407 rating: 3, 408 }), 409 } 410<\/script> 411`,Cn={class:"text-center"},En={__name:"prop-icon-label",setup(m){const e=d(4);return(l,t)=>(p(),v("div",Cn,[n(r,{modelValue:e.value,"onUpdate:modelValue":t[0]||(t[0]=o=>e.value=o),"item-aria-label":"custom icon label text {0} of {1}"},null,8,["modelValue"])]))}},On=`<template> 412 <div class="text-center"> 413 <v-rating 414 v-model="rating" 415 item-aria-label="custom icon label text {0} of {1}" 416 ></v-rating> 417 </div> 418</template> 419 420<script setup> 421 import { ref } from 'vue' 422 423 const rating = ref(4) 424<\/script> 425 426<script> 427 export default { 428 data: () => ({ rating: 4 }), 429 } 430<\/script> 431`,Tn={class:"text-center"},Rn={__name:"prop-icons",setup(m){const e=d(3.5);return(l,t)=>(p(),v("div",Tn,[n(r,{modelValue:e.value,"onUpdate:modelValue":t[0]||(t[0]=o=>e.value=o),"empty-icon":"mdi-circle-outline","full-icon":"mdi-circle","half-increments":"",hover:""},null,8,["modelValue"])]))}},Fn=`<template> 432 <div class="text-center"> 433 <v-rating 434 v-model="rating" 435 empty-icon="mdi-circle-outline" 436 full-icon="mdi-circle" 437 half-increments 438 hover 439 ></v-rating> 440 </div> 441</template> 442 443<script setup> 444 import { ref } from 'vue' 445 446 const rating = ref(3.5) 447<\/script> 448 449<script> 450 export default { 451 data: () => ({ 452 rating: 3.5, 453 }), 454 } 455<\/script> 456`,Hn={class:"d-flex align-center justify-center flex-column"},Sn={__name:"prop-item-labels",setup(m){const e=d(4);return(l,t)=>(p(),v("div",Hn,[n(r,{modelValue:e.value,"onUpdate:modelValue":t[0]||(t[0]=o=>e.value=o),"item-labels":["sad","","","","happy"],class:"ma-2","item-label-position":"top"},null,8,["modelValue"]),n(r,{modelValue:e.value,"onUpdate:modelValue":t[1]||(t[1]=o=>e.value=o),"item-labels":["sad","","","","happy"],class:"ma-2","item-label-position":"bottom"},null,8,["modelValue"])]))}},In=`<template> 457 <div class="d-flex align-center justify-center flex-column"> 458 <v-rating 459 v-model="rating" 460 :item-labels="['sad', '', '', '', 'happy']" 461 class="ma-2" 462 item-label-position="top" 463 ></v-rating> 464 465 <v-rating 466 v-model="rating" 467 :item-labels="['sad', '', '', '', 'happy']" 468 class="ma-2" 469 item-label-position="bottom" 470 ></v-rating> 471 </div> 472</template> 473 474<script setup> 475 import { ref } from 'vue' 476 477 const rating = ref(4) 478<\/script> 479 480<script> 481 export default { 482 data: () => ({ rating: 4 }), 483 } 484<\/script> 485`,Pn={class:"text-center"},An={__name:"prop-length",setup(m){const e=d(2);return(l,t)=>(p(),v("div",Pn,[n(r,{modelValue:e.value,"onUpdate:modelValue":t[0]||(t[0]=o=>e.value=o),length:"10"},null,8,["modelValue"])]))}},Ln=`<template> 486 <div class="text-center"> 487 <v-rating 488 v-model="rating" 489 length="10" 490 ></v-rating> 491 </div> 492</template> 493 494<script setup> 495 import { ref } from 'vue' 496 497 const rating = ref(2) 498<\/script> 499 500<script> 501 export default { 502 data: () => ({ 503 rating: 2, 504 }), 505 } 506<\/script> 507`,Bn={class:"text-center"},Xn={__name:"prop-readonly",setup(m){const e=d(3);return(l,t)=>(p(),v("div",Bn,[n(r,{modelValue:e.value,"onUpdate:modelValue":t[0]||(t[0]=o=>e.value=o),readonly:""},null,8,["modelValue"])]))}},Kn=`<template> 508 <div class="text-center"> 509 <v-rating 510 v-model="rating" 511 readonly 512 ></v-rating> 513 </div> 514</template> 515 516<script setup> 517 import { ref } from 'vue' 518 519 const rating = ref(3) 520<\/script> 521 522<script> 523 export default { 524 data: () => ({ 525 rating: 3, 526 }), 527 } 528<\/script> 529`,Dn={},Nn={class:"d-flex flex-column align-center"};function Gn(m,e){return p(),v("div",Nn,[n(r,{"model-value":"3",size:"x-small"}),n(r,{"model-value":"3",size:"small"}),n(r,{"model-value":"3"}),n(r,{"model-value":"3",size:"large"}),n(r,{"model-value":"3",size:"x-large"}),n(r,{"model-value":"3",size:"72"})])}const Jn=P(Dn,[["render",Gn]]),qn=`<template> 530 <div class="d-flex flex-column align-center"> 531 <v-rating 532 model-value="3" 533 size="x-small" 534 ></v-rating> 535 536 <v-rating 537 model-value="3" 538 size="small" 539 ></v-rating> 540 541 <v-rating 542 model-value="3" 543 ></v-rating> 544 545 <v-rating 546 model-value="3" 547 size="large" 548 ></v-rating> 549 550 <v-rating 551 model-value="3" 552 size="x-large" 553 ></v-rating> 554 555 <v-rating 556 model-value="3" 557 size="72" 558 ></v-rating> 559 </div> 560</template> 561`,Wn={class:"text-center"},Zn={__name:"slot-item-label",setup(m){const e=d(4),l=d(["red","orange","grey","cyan","green"]),t=d(["bad","so so","ok","good","great"]);return(o,g)=>(p(),v("div",Wn,[n(r,{modelValue:e.value,"onUpdate:modelValue":g[0]||(g[0]=x=>e.value=x),"item-labels":t.value},{"item-label":s(x=>[i("span",{class:q([`text-${l.value[x.index]}`,"font-weight-black text-body-small"])},b(x.label),3)]),_:1},8,["modelValue","item-labels"])]))}},Mn=`<template> 562 <div class="text-center"> 563 <v-rating 564 v-model="rating" 565 :item-labels="labels" 566 > 567 <template v-slot:item-label="props">
568 <span 569 :class="\`text-\${colors[props.index]}\`" 570 class="font-weight-black text-body-small" 571 > 572 {{ props.label }} 573 </span> 574 </template> 575 </v-rating> 576 </div> 577</template> 578 579<script setup> 580 import { ref } from 'vue' 581 582 const rating = ref(4) 583 const colors = ref(['red', 'orange', 'grey', 'cyan', 'green']) 584 const labels = ref(['bad', 'so so', 'ok', 'good', 'great']) 585<\/script> 586 587<script> 588 export default { 589 data: () => ({ 590 rating: 4, 591 colors: ['red', 'orange', 'grey', 'cyan', 'green'], 592 labels: ['bad', 'so so', 'ok', 'good', 'great'], 593 }), 594 } 595<\/script> 596`,Qn={class:"text-center"},Yn={__name:"slot-item",setup(m){const e=["green","purple","orange","indigo","red"],l=d(4.5);return(t,o)=>(p(),v("div",Qn,[n(r,{modelValue:l.value,"onUpdate:modelValue":o[0]||(o[0]=g=>l.value=g)},{item:s(g=>[n(h,{color:g.isFilled?e[g.index]:"grey-lighten-1",size:"large"},{default:s(()=>[U(b(g.isFilled?"mdi-star-circle":"mdi-star-circle-outline"),1)]),_:2},1032,["color"])]),_:1},8,["modelValue"])]))}},ne=`<template> 597 <div class="text-center"> 598 <v-rating v-model="rating"> 599 <template v-slot:item="props"> 600 <v-icon 601 :color="props.isFilled ? colors[props.index] : 'grey-lighten-1'" 602 size="large" 603 > 604 {{ props.isFilled ? 'mdi-star-circle' : 'mdi-star-circle-outline' }} 605 </v-icon> 606 </template> 607 </v-rating> 608 </div> 609</template> 610 611<script setup> 612 import { ref } from 'vue' 613 614 const colors = ['green', 'purple', 'orange', 'indigo', 'red'] 615 616 const rating = ref(4.5) 617<\/script> 618 619<script> 620 export default { 621 data: () => ({ 622 colors: ['green', 'purple', 'orange', 'indigo', 'red'], 623 rating: 4.5, 624 }), 625 } 626<\/script> 627`,ee={class:"text-center"},F="v-rating",te={__name:"usage",setup(m){const e=d(),l=W({"half-increments":!1,hover:!0,readonly:!1,length:5,size:32,"model-value":3,color:null,"active-color":"primary"}),t=O(()=>Object.fromEntries(Object.entries({...l,...e.value==="Hearts"?{"empty-icon":"mdi-heart-outline","half-icon":"mdi-heart-half-full","full-icon":"mdi-heart"}:void 0}).filter(([x,a])=>a))),o=O(()=>`<${F}${Z(t.value)} />`),g=["primary","warning","green","red","blue","error","teal","red-lighten-3"];return(x,a)=>{const f=nn;return p(),$(f,{modelValue:c(e),"onUpdate:modelValue":a[8]||(a[8]=u=>Y(e)?e.value=u:null),code:c(o),name:F,options:["Hearts"]},{configuration:s(()=>[n(z,{modelValue:c(l)["half-increments"],"onUpdate:modelValue":a[0]||(a[0]=u=>c(l)["half-increments"]=u),label:"Half increments"},null,8,["modelValue"]),n(z,{modelValue:c(l).hover,"onUpdate:modelValue":a[1]||(a[1]=u=>c(l).hover=u),label:"Hover"},null,8,["modelValue"]),n(z,{modelValue:c(l).readonly,"onUpdate:modelValue":a[2]|| 628(a[2]=u=>c(l).readonly=u),label:"Readonly"},null,8,["modelValue"]),a[9]||(a[9]=i("br",null,null,-1)),n(j,{modelValue:c(l).length,"onUpdate:modelValue":a[3]||(a[3]=u=>c(l).length=u),max:8,min:1,label:"Length"},null,8,["modelValue"]),n(j,{modelValue:c(l).size,"onUpdate:modelValue":a[4]||(a[4]=u=>c(l).size=u),max:128,min:16,label:"Size"},null,8,["modelValue"]),n(j,{modelValue:c(l)["model-value"],"onUpdate:modelValue":a[5]||(a[5]=u=>c(l)["model-value"]=u),max:c(l).length,min:0,step:c(l)["half-increments"]?.5:1,label:"Value"},null,8,["modelValue","max","step"]),a[10]||(a[10]=i("br",null,null,-1)),n(T,{modelValue:c(l).color,"onUpdate:modelValue":a[6]||(a[6]=u=>c(l).color=u),items:g,label:"Color"},null,8,["modelValue"]),n(T,{modelValue:c(l)["active-color"],"onUpdate:modelValue":a[7]||(a[7]=u=>c(l)["active-color"]=u),items:g,label:"Active color"},null,8,["modelValue"])]),default:s(()=>[i("div",ee,[n(r,M(Q(c(t))),null,16)])]),_:1},8,["modelValue","code"])}}},le=`<template> 629 <ExamplesUsageExample 630 v-model="selectedOption" 631 :code="code" 632 :name="name" 633 :options="['Hearts']" 634 > 635 <div class="text-center"> 636 <v-rating v-bind="props"></v-rating> 637 </div> 638 639 <template v-slot:configuration> 640 <v-checkbox v-model="options['half-increments']" label="Half increments"></v-checkbox> 641 <v-checkbox v-model="options.hover" label="Hover"></v-checkbox> 642 <v-checkbox v-model="options.readonly" label="Readonly"></v-checkbox> 643 644 <br> 645 646 <v-slider v-model="options.length" :max="8" :min="1" label="Length"></v-slider> 647 <v-slider v-model="options.size" :max="128" :min="16" label="Size"></v-slider> 648 <v-slider v-model="options['model-value']" :max="options.length" :min="0" :step="options['half-increments'] ? 0.5 : 1" label="Value"></v-slider> 649 650 <br> 651 652 <v-select v-model="options.color" :items="colorOptions" label="Color"></v-select> 653 <v-select v-model="options['active-color']" :items="colorOptions" label="Active color"></v-select> 654 </template> 655 </ExamplesUsageExample> 656</template> 657 658<script setup> 659 const selectedOption = ref() 660 661 const options = reactive({ 662 'half-increments': false, 663 hover: true, 664 readonly: false, 665 666 length: 5, 667 size: 32, 668 'model-value': 3, 669 670 color: null, 671 'active-color': 'primary', 672 }) 673 674 const name = 'v-rating' 675 const props = computed(() => { 676 return Object.fromEntries( 677 Object.entries({ 678 ...options, 679 ...(selectedOption.value === 'Hearts' ? { 680 'empty-icon': 'mdi-heart-outline', 681 'half-icon': 'mdi-heart-half-full', 682 'full-icon': 'mdi-heart', 683 } : undefined), 684 }).filter(([key, value]) => value) 685 ) 686 }) 687 688 const code = computed(() => { 689 return \`<\${name}\${propsToString(props.value)} />\` 690 }) 691 692 const colorOptions = [ 693 'primary', 694 'warning', 695 'green', 696 'red', 697 'blue', 698 'error', 699 'teal', 700 'red-lighten-3', 701 ] 702<\/script> 703`,de={"misc-advanced":{component:en,source:tn},"misc-card-overview":{component:rn,source:cn},"misc-card":{component:pn,source:un},"prop-clearable":{component:gn,source:fn},"prop-color":{component:_n,source:yn},"prop-density":{component:hn,source:Vn},"prop-half-increments":{component:kn,source:$n},"prop-hover":{component:jn,source:zn},"prop-icon-label":{component:En,source:On},"prop-icons":{component:Rn,source:Fn},"prop-item-labels":{component:Sn,source:In},"prop-length":{component:An,source:Ln},"prop-readonly":{component:Xn,source:Kn},"prop-size":{component:Jn,source:qn},"slot-item-label":{component:Zn,source:Mn},"slot-item":{component:Yn,source:ne},usage:{component:te,source:le}};
703export{de as default}; 704//# sourceMappingURL=v-rating-B00K5QIY.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.