1import{aU as f,q as $,bE as k,u as p,aL as u,I as e,bJ as l,ce as x,v as S,bb as U,cY as D,c9 as d,ar as H,fS as V,fT as a,cd as A,b$ as g,dY as y,cA as R,e2 as B,H as i,fp as L,gn as m,cJ as P,eK as X,s as h}from"./index-DcDh_618.js";import{V as K}from"./VRating-gHB50ecI.js";const M={__name:"connected-playground",setup(o){const n=f("top"),r=f("center"),t=f("auto"),s=f(""),j=$(()=>`${n.value} ${r.value}`),_=$(()=>b.value?t.value:`${t.value} ${s.value}`),C=$(()=>`<v-tooltip location="${j.value}" origin="${_.value}" />`),b=$(()=>["auto","overlap"].includes(t.value));return k(n,w=>{["top","bottom"].includes(w)?r.value={top:"start",bottom:"end"}[r.value]||r.value:r.value={start:"top",end:"bottom"}[r.value]||r.value}),k(b,w=>{!w&&!s.value&&(s.value="center")}),(w,v)=>(u(),p("div",null,[e(A,null,{default:l(()=>[e(x,{class:"d-flex flex-column align-center",cols:"12"},{default:l(()=>[S("code",null,U(C.value),1),e(D,{location:j.value,origin:_.value,"no-click-animation":""},{activator:l(({props:c})=>[ 2e(d,H(c,{class:"my-12",text:"Hover Me"}),null,16)]),default:l(()=>[v[4]||(v[4]=S("div",null,"Overlay content",-1))]),_:1},8,["location","origin"])]),_:1}),e(x,null,{default:l(()=>[e(V,{modelValue:n.value,"onUpdate:modelValue":v[0]||(v[0]=c=>n.value=c),label:"Location side"},{default:l(()=>[e(a,{label:"top",value:"top"}),e(a,{label:"end",value:"end"}),e(a,{label:"bottom",value:"bottom"}),e(a,{label:"start",value:"start"})]),_:1},8,["modelValue"])]),_:1}),e(x,null,{default:l(()=>[e(V,{modelValue:r.value,"onUpdate:modelValue":v[1]||(v[1]=c=>r.value=c),label:"Location alignment"},{default:l(()=>[e(a,{disabled:n.value==="top"||n.value==="bottom",label:"top",value:"top"},null,8,["disabled"]),e(a,{disabled:!(n.value==="top"||n.value==="bottom"),label:"start",value:"start"},null,8,["disabled"]),e(a,{label:"center",value:"center"}),e(a,{disabled:!(n.value==="top"||n.value==="bottom"),label:"end",value:"end"},null,8,["disabled"]),e(a,{disabled:n.value==="top"||n.value==="bottom",label:"bottom",value:"\ 3bottom"},null,8,["disabled"])]),_:1},8,["modelValue"])]),_:1}),e(x,null,{default:l(()=>[e(V,{modelValue:t.value,"onUpdate:modelValue":v[2]||(v[2]=c=>t.value=c),label:"Origin side"},{default:l(()=>[e(a,{label:"auto",value:"auto"}),e(a,{label:"overlap",value:"overlap"}),e(a,{label:"top",value:"top"}),e(a,{label:"end",value:"end"}),e(a,{label:"bottom",value:"bottom"}),e(a,{label:"start",value:"start"})]),_:1},8,["modelValue"])]),_:1}),e(x,null,{default:l(()=>[e(V,{modelValue:s.value,"onUpdate:modelValue":v[3]||(v[3]=c=>s.value=c),label:"Origin alignment"},{default:l(()=>[e(a,{disabled:b.value||t.value==="top"||t.value==="bottom",label:"top",value:"top"},null,8,["disabled"]),e(a,{disabled:b.value||!(t.value==="top"||t.value==="bottom"),label:"start",value:"start"},null,8,["disabled"]),e(a,{disabled:b.value,label:"center",value:"center"},null,8,["disabled"]),e(a,{disabled:b.value||!(t.value==="top"||t.value==="bottom"),label:"end",value:"end"},null,8,["disabled"]),e(a,{disabled:b.value||t.value=== 4"top"||t.value==="bottom",label:"bottom",value:"bottom"},null,8,["disabled"])]),_:1},8,["modelValue"])]),_:1})]),_:1})]))}},N=`<template> 5 <div> 6 <v-row> 7 <v-col class="d-flex flex-column align-center" cols="12"> 8 <code>{{ code }}</code> 9 10 <v-tooltip 11 :location="location" 12 :origin="origin" 13 no-click-animation 14 > 15 <template v-slot:activator="{ props }"> 16 <v-btn v-bind="props" class="my-12" text="Hover Me"></v-btn> 17 </template> 18 19 <div>Overlay content</div> 20 </v-tooltip> 21 </v-col> 22 23 <v-col> 24 <v-radio-group v-model="locationSide" label="Location side"> 25 <v-radio label="top" value="top"></v-radio> 26 <v-radio label="end" value="end"></v-radio> 27 <v-radio label="bottom" value="bottom"></v-radio> 28 <v-radio label="start" value="start"></v-radio> 29 </v-radio-group> 30 </v-col> 31 32 <v-col> 33 <v-radio-group v-model="locationAlign" label="Location alignment"> 34 <v-radio :disabled="locationSide === 'top' || locationSide === 'bottom'" label="top" value="top"></v-radio> 35 <v-radio :disabled="!(locationSide === 'top' || locationSide === 'bottom')" label="start" value="start"></v-radio> 36 <v-radio label="center" value="center"></v-radio> 37 <v-radio :disabled="!(locationSide === 'top' || locationSide === 'bottom')" label="end" value="end"></v-radio> 38 <v-radio :disabled="locationSide === 'top' || locationSide === 'bottom'" label="bottom" value="bottom"></v-radio> 39 </v-radio-group> 40 </v-col> 41 42 <v-col> 43 <v-radio-group v-model="originSide" label="Origin side"> 44 <v-radio label="auto" value="auto"></v-radio> 45 <v-radio label="overlap" value="overlap"></v-radio> 46 <v-radio label="top" value="top"></v-radio> 47 <v-radio label="end" value="end"></v-radio> 48 <v-radio label="bottom" value="bottom"></v-radio> 49 <v-radio label="start" value="start"></v-radio> 50 </v-radio-group> 51 </v-col> 52 53 <v-col> 54 <v-radio-group v-model="originAlign" label="Origin alignment"> 55 <v-radio :disabled="originDisabled || originSide === 'top' || originSide === 'bottom'" label="top" value="top"></v-radio> 56 <v-radio :disabled="originDisabled || !(originSide === 'top' || originSide === 'bottom')" label="start" value="start"></v-radio> 57 <v-radio :disabled="originDisabled" label="center" value="center"></v-radio> 58 <v-radio :disabled="originDisabled || !(originSide === 'top' || originSide === 'bottom')" label="end" value="end"></v-radio> 59 <v-radio :disabled="originDisabled || originSide === 'top' || originSide === 'bottom'" label="bottom" value="bottom"></v-radio> 60 </v-radio-group> 61 </v-col> 62 </v-row> 63 </div> 64</template> 65 66<script setup> 67 import { computed, ref, watch } from 'vue' 68 69 const locationSide = ref('top') 70 const locationAlign = ref('center') 71 const originSide = ref('auto') 72 const originAlign = ref('') 73 74 const location = computed(() => { 75 return \`\${locationSide.value} \${locationAlign.value}\` 76 }) 77 const origin = computed(() => { 78 return originDisabled.value ? originSide.value : \`\${originSide.value} \${originAlign.value}\` 79 }) 80 const code = computed(() => { 81 return \`<v-tooltip location="\${location.value}" origin="\${origin.value}" />\` 82 }) 83 const originDisabled = computed(() => { 84 return ['auto', 'overlap'].includes(originSide.value) 85 }) 86 87 watch(locationSide, val => { 88 if (['top', 'bottom'].includes(val)) { 89 locationAlign.value = { 90 top: 'start', 91 bottom: 'end', 92 }[locationAlign.value] || locationAlign.value 93 } else { 94 locationAlign.value = { 95 start: 'top', 96 end: 'bottom', 97 }[locationAlign.value] || locationAlign.value 98 } 99 }) 100 watch(originDisabled, val => { 101 if (!val && !originAlign.value) { 102 originAlign.value = 'center' 103 } 104 }) 105<\/script> 106`,O=o=>o.exampleMeta=` 107 { 108 "figma": "https://www.figma.com/design/5f4g4pbbBsk9TTWX4Xvlx1/PRO-v3.0---Official-Vuetify-3-UI-Kit?node-id=1646-137446&t=tC3y53U3XKPv8ZyJ-4" 109 } 110`,T={};function E(o,n){return u(),p("div",null,[e(P,null,{default:l(({isHovering:r,props:t})=>[e(y,H({class:"mx-auto","max-width":"344"},t),{default:l(()=>[e(R,{src:"https://cdn.vuetifyjs.com/images/cards/forest-art.jpg"}),e(B,null,{default:l(()=>[...n[0]||(n[0]=[S("h2",{class:"text-title-large text-primary my-0"}," Magento Forests ",-1),i(" Travel to the best outdoor experience on planet Earth. A vacation you will never forget! ",-1)])]),_:1}),e(L,null,{default:l(()=>[e(K,{"model-value":4,class:"me-2",color:"orange",density:"compact",hover:""}),n[1]||(n[1]=S("span",{class:"text-primary text-title-small"},"64 Reviews",-1))]),_:1}),e(m,{"model-value":!!r,class:"align-center justify-center",scrim:"#036358",contained:""},{default:l(()=>[e(d,{variant:"flat"},{default:l(()=>[...n[2]||(n[2]=[i("See more info",-1)])]),_:1})]),_:1},8,["model-value"])]),_:2},1040)]),_:1})])}typeof O=="function"&&O(T);const I=g(T,[["render",E]]),J=`<template> 111 <div> 112 <v-hover v-slot="{ isHovering, props }"> 113 <v-card 114 class="mx-auto" 115 max-width="344" 116 v-bind="props" 117 > 118 <v-img src="https://cdn.vuetifyjs.com/images/cards/forest-art.jpg"></v-img> 119 120 <v-card-text> 121 <h2 class="text-title-large text-primary my-0"> 122 Magento Forests 123 </h2> 124 Travel to the best outdoor experience on planet Earth. A vacation you will never forget! 125 </v-card-text> 126 127 <v-card-title> 128 <v-rating 129 :model-value="4" 130 class="me-2" 131 color="orange" 132 density="compact" 133 hover 134 ></v-rating>
135 <span class="text-primary text-title-small">64 Reviews</span> 136 </v-card-title> 137 138 <v-overlay 139 :model-value="!!isHovering" 140 class="align-center justify-center" 141 scrim="#036358" 142 contained 143 > 144 <v-btn variant="flat">See more info</v-btn> 145 </v-overlay> 146 </v-card> 147 </v-hover> 148 </div> 149</template> 150 151<example-meta lang="json"> 152 { 153 "figma": "https://www.figma.com/design/5f4g4pbbBsk9TTWX4Xvlx1/PRO-v3.0---Official-Vuetify-3-UI-Kit?node-id=1646-137446&t=tC3y53U3XKPv8ZyJ-4" 154 } 155</example-meta> 156`,z={class:"text-center"},F={__name:"misc-loader",setup(o){const n=f(!1);return k(n,r=>{r&&setTimeout(()=>{n.value=!1},3e3)}),(r,t)=>(u(),p("div",z,[e(d,{"append-icon":"mdi-open-in-new",color:"deep-purple-accent-4",onClick:t[0]||(t[0]=s=>n.value=!n.value)},{default:l(()=>[...t[1]||(t[1]=[i(" Launch Application ",-1)])]),_:1}),e(m,{"model-value":n.value,class:"align-center justify-center"},{default:l(()=>[e(X,{color:"primary",size:"64",indeterminate:""})]),_:1},8,["model-value"])]))}},W=`<template> 157 <div class="text-center"> 158 <v-btn 159 append-icon="mdi-open-in-new" 160 color="deep-purple-accent-4" 161 @click="overlay = !overlay" 162 > 163 Launch Application 164 </v-btn> 165 166 <v-overlay 167 :model-value="overlay" 168 class="align-center justify-center" 169 > 170 <v-progress-circular 171 color="primary" 172 size="64" 173 indeterminate 174 ></v-progress-circular> 175 </v-overlay> 176 </div> 177</template> 178 179<script setup> 180 import { ref, watch } from 'vue' 181 182 const overlay = ref(false) 183 watch(overlay, val => { 184 val && setTimeout(() => { 185 overlay.value = false 186 }, 3000) 187 }) 188<\/script> 189 190<script> 191 export default { 192 data: () => ({ 193 overlay: false, 194 }), 195 196 watch: { 197 overlay (val) { 198 val && setTimeout(() => { 199 this.overlay = false 200 }, 3000) 201 }, 202 }, 203 } 204<\/script> 205`,Y={__name:"prop-contained",setup(o){const n=f(!1);return(r,t)=>(u(),h(A,{class:"ma-4 align-center justify-center"},{default:l(()=>[e(y,{height:"300",width:"250"},{default:l(()=>[e(A,{class:"justify-center"},{default:l(()=>[e(d,{class:"mt-12",color:"success",onClick:t[0]||(t[0]=s=>n.value=!n.value)},{default:l(()=>[...t[3]||(t[3]=[i(" Show Overlay ",-1)])]),_:1}),e(m,{modelValue:n.value,"onUpdate:modelValue":t[2]||(t[2]=s=>n.value=s),class:"align-center justify-center",contained:""},{default:l(()=>[e(d,{color:"success",onClick:t[1]||(t[1]=s=>n.value=!1)},{default:l(()=>[...t[4]||(t[4]=[i(" Hide Overlay ",-1)])]),_:1})]),_:1},8,["modelValue"])]),_:1})]),_:1})]),_:1}))}},Z=`<template> 206 <v-row class="ma-4 align-center justify-center"> 207 <v-card 208 height="300" 209 width="250" 210 > 211 <v-row class="justify-center"> 212 <v-btn 213 class="mt-12" 214 color="success" 215 @click="overlay = !overlay" 216 > 217 Show Overlay 218 </v-btn> 219 220 <v-overlay 221 v-model="overlay" 222 class="align-center justify-center" 223 contained 224 > 225 <v-btn 226 color="success" 227 @click="overlay = false" 228 > 229 Hide Overlay 230 </v-btn> 231 </v-overlay> 232 </v-row> 233 </v-card> 234 </v-row> 235</template> 236 237<script setup> 238 import { ref } from 'vue' 239 240 const overlay = ref(false) 241<\/script> 242 243<script> 244 export default { 245 data: () => ({ 246 overlay: false, 247 }), 248 } 249<\/script> 250`,q={},G={class:"d-flex justify-center"};function Q(o,n){return u(),p("div",G,[e(d,null,{default:l(()=>[n[1]||(n[1]=i(" block ",-1)),e(m,{activator:"parent","location-strategy":"connected","scroll-strategy":"block"},{default:l(()=>[e(y,{class:"pa-2"},{default:l(()=>[...n[0]||(n[0]=[i(" Hello! ",-1)])]),_:1})]),_:1})]),_:1})])}const ee=g(q,[["render",Q]]),ne=`<template> 251 <div class="d-flex justify-center"> 252 <v-btn> 253 block 254 255 <v-overlay 256 activator="parent" 257 location-strategy="connected" 258 scroll-strategy="block" 259 > 260 <v-card class="pa-2"> 261 Hello! 262 </v-card> 263 </v-overlay> 264 </v-btn> 265 </div> 266</template> 267`,le={},te={class:"d-flex justify-center"};function ae(o,n){return u(),p("div",te,[e(d,null,{default:l(()=>[n[1]||(n[1]=i(" Close ",-1)),e(m,{activator:"parent","location-strategy":"connected","scroll-strategy":"close"},{default:l(()=>[e(y,{class:"pa-2"},{default:l(()=>[...n[0]||(n[0]=[i(" Hello! ",-1)])]),_:1})]),_:1})]),_:1})])}const oe=g(le,[["render",ae]]),re=`<template> 268 <div class="d-flex justify-center"> 269 <v-btn> 270 Close 271 272 <v-overlay 273 activator="parent" 274 location-strategy="connected" 275 scroll-strategy="close" 276 > 277 <v-card class="pa-2"> 278 Hello! 279 </v-card> 280 </v-overlay> 281 </v-btn> 282 </div> 283</template> 284`,ie={},se={class:"d-flex justify-center"};function ve(o,n){return u(),p("div",se,[e(d,null,{default:l(()=>[n[1]||(n[1]=i(" None ",-1)),e(m,{activator:"parent","location-strategy":"connected","scroll-strategy":"none"},{default:l(()=>[e(y,{class:"pa-2"},{default:l(()=>[...n[0]||(n[0]=[i(" Hello! ",-1)])]),_:1})]),_:1})]),_:1})])}const de=g(ie,[["render",ve]]),ce=`<template> 285 <div class="d-flex justify-center"> 286 <v-btn> 287 None 288 289 <v-overlay 290 activator="parent" 291 location-strategy="connected" 292 scroll-strategy="none" 293 > 294 <v-card class="pa-2"> 295 Hello! 296 </v-card> 297 </v-overlay> 298 </v-btn> 299 </div> 300</template> 301`,ue={},pe={class:"d-flex justify-center"};function me(o,n){return u(),p("div",pe,[e(d,null,{default:l(()=>[n[1]||(n[1]=i(" Reposition ",-1)),e(m,{activator:"parent","location-strategy":"connected","scroll-strategy":"reposition"},{default:l(()=>[e(y,{class:"pa-2"},{default:l(()=>[...n[0]||(n[0]=[i(" Hello! ",-1)])]),_:1})]),_:1})]),_:1})])}const be=g(ue,[["render",me]]),fe=`<template> 302 <div class="d-flex justify-center"> 303 <v-btn> 304 Reposition 305 306 <v-overlay 307 activator="parent" 308 location-strategy="connected" 309 scroll-strategy="reposition" 310 > 311 <v-card class="pa-2"> 312 Hello! 313 </v-card> 314 </v-overlay> 315 </v-btn> 316 </div> 317</template> 318`,ge={data:()=>({overlay:!1}),watch:{overlay(o){o&&setTimeout(()=>{this.overlay=!1},2e3)}}},ye={class:"text-center"};function _e(o,n,r,t,s,j){return u(),p("div",ye,[e(d,{color:"error",onClick:n[0]||(n[0]=_=>o.overlay=!o.overlay)},{default:l(()=>[...n[2]||(n[2]=[i(" Show Overlay ",-1)])]),_:1}),e(m,{modelValue:o.overlay,"onUpdate:modelValue":n[1]||(n[1]=_=>o.overlay=_)},null,8,["modelValue"])])}const xe=g(ge,[["render",_e]]),we=`<template> 319 <div class="text-center"> 320 <v-btn 321 color="error"
322 @click="overlay = !overlay" 323 > 324 Show Overlay 325 </v-btn> 326 327 <v-overlay v-model="overlay"></v-overlay> 328 </div> 329</template> 330 331<script> 332 export default { 333 data: () => ({ 334 overlay: false, 335 }), 336 337 watch: { 338 overlay (val) { 339 val && setTimeout(() => { 340 this.overlay = false 341 }, 2000) 342 }, 343 }, 344 } 345<\/script> 346`,Se={"connected-playground":{component:M,source:N},"misc-advanced":{component:I,source:J},"misc-loader":{component:F,source:W},"prop-contained":{component:Y,source:Z},"scroll-block":{component:ee,source:ne},"scroll-close":{component:oe,source:re},"scroll-none":{component:de,source:ce},"scroll-reposition":{component:be,source:fe},usage:{component:xe,source:we}};export{Se as default}; 347//# sourceMappingURL=v-overlay-DAUu3ao2.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.