vendor: 1,894 bytes, line 1
1import{L as K,af as Z,ag as X,ah as _,bZ as h,aj as aa,au as ta,ak as ea,av as na,as as la,al as ia,c0 as oa,at as sa,r as V,O as E,aW as ra,dC as ca,cd as ba,cY as ua,ce as ma,w as j,G as ka,dD as Va,P as da,V as Sa,b as t,c4 as pa,be as fa,bQ as va,q,cf as Ba,aQ as ga,o as x,c as T,e,t as n,a3 as k,m as S,aM as p,aa as y,F as O,f as ya,d}from"./index-BJiotQ1y.js";import{m as xa,a as H}from"./VOverlay-Dzxa60iL.js";import{f as Ia}from"./forwardRefs-C-GTDzx5.js";import{u as Ta}from"./scopeId-CzFWNpQy.js";import{_ as wa}from"./AppCardCode-CcXt1CXD.js";import{V as Ca}from"./VRow-BaWP5n9q.js";import{V as I}from"./VCol-Bwtue8I5.js";import"./easing-CjukEv2V.js";import"./delay-BAExgEeO.js";import"./lazy-CecdQcFC.js";import"./VImg-CEdg-vTA.js";import"./vue3-perfect-scrollbar-C2zm10Dz.js";import"./VCard-ImMJge73.js";import"./VAvatar-Bj_eSgFO.js";import"./VCardText-Ds77CzhY.js";import"./VDivider-niEB_qmK.js";/* empty css */function Oa(b){const i=E(b());let o=-1;function a(){clearInterval(o)}function r(){a(),ga(()=>i.value=b())}function c(v){const s=v?getComputedStyle(v):{transitionDuration:.2},m=parseFloat(s.transitionDuration)*1e3||200;if(a(),i.value<=0)return;const g=performance.now();o=window.setInterval(()=>{const w=performance.now()-g+m;i.value=Math.max(b()-w,0),i.value<=0&&a()},m)}return Ba(a),{clear:a,time:i,start:c,reset:r}}const $a=K({multiLine:Boolean,text:String,timer:[Boolean,String],timeout:{type:[Number,String],default:5e3},vertical:Boolean,...Z({location:"bottom"}),...X(),..._(),...h(),...aa(),...ta(xa({transition:"v-snackbar-transition"}),["persistent","noClickAnimation","scrim","scrollStrategy"])},"VSnackbar"),f=ea()({name:"VSnackbar",props:$a(),emits:{"update:modelValue":b=>!0},setup(b,i){let{slots:o}=i;const a=na(b,"modelValue"),{positionClasses:r}=la(b),{scopeId:c}=Ta(),{themeClasses:v}=ia(b),{colorClasses:s,colorStyles:m,variantClasses:g}
1=oa(b),{roundedClasses:w}=sa(b),l=Oa(()=>Number(b.timeout)),u=V(),F=V(),$=E(!1),R=E(0),L=V(),N=ra(ca,void 0);ba(()=>!!N,()=>{const B=ua();ma(()=>{L.value=B.mainStyles.value})}),j(a,D),j(()=>b.timeout,D),ka(()=>{a.value&&D()});let P=-1;function D(){l.reset(),window.clearTimeout(P);const B=Number(b.timeout);if(!a.value||B===-1)return;const C=Va(F.value);l.start(C),P=window.setTimeout(()=>{a.value=!1},B)}function z(){l.reset(),window.clearTimeout(P)}function W(){$.value=!0,z()}function A(){$.value=!1,D()}function Y(B){R.value=B.touches[0].clientY}function J(B){Math.abs(R.value-B.changedTouches[0].clientY)>50&&(a.value=!1)}function G(){$.value&&A()}const Q=da(()=>b.location.split(" ").reduce((B,C)=>(B[`v-snackbar--${C}`]=!0,B),{}));return Sa(()=>{const B=H.filterProps(b),C=!!(o.default||o.text||b.text);return t(H,q({ref:u,class:["v-snackbar",{"v-snackbar--active":a.value,"v-snackbar--multi-line":b.multiLine&&!b.vertical,"v-snackbar--timer":!!b.timer,"v-snackbar--vertical":b.vertical},Q.value,r.value,b.class],style:[L.value,b.style]},B,{modelValue:a.value,"onUpdate:modelValue":U=>a.value=U,contentProps:q({class:["v-snackbar__wrapper",v.value,s.value,w.value,g.value],style:[m.value],onPointerenter:W,onPointerleave:A},B.contentProps),persistent:!0,noClickAnimation:!0,scrim:!1,scrollStrategy:"none",_disableGlobalStack:!0,onTouchstartPassive:Y,onTouchend:J,onAfterLeave:G},c),{default:()=>{var U,M;return[pa(!1,"v-snackbar"),b.timer&&!$.value&&t("div",{key:"timer",class:"v-snackbar__timer"},[t(fa,{ref:F,color:typeof b.timer=="string"?b.timer:"info",max:b.timeout,"model-value":l.time.value},null)]),C&&t("div",{key:"content",class:"v-snackbar__content",role:"status","aria-live":"polite"},[((U=o.text)==null?void 0:U.call(o))??b.text,(M=o.default)==null?void 0:M.call(o)]),o.actions&&t(va,{defaults:{VBtn:{variant:"text",ripple:!1,slim:!0}}},{default:()=>[t("div",{class:"v-snackbar__actions"},[o.actions({isActive:a})])]})]},activator:o.activator})}),Ia({},u)}}),Da={class:"demo-space-x"},Ua={__name:"DemoSnackbarTransition",setup(b){const i=V(!1),o=V(!1),a=V(!1);return(r,c)=>(x(),T("div",Da,[t(k,{onClick:c[0]||(c[0]=v=>i.value=!0)},{default:e(()=>c[6]||(c[6]=[n(" fade snackbar ")])),_:1}),t(f,{modelValue:S(i),"onUpdate:modelValue":c[1]||(c[1]=v=>p(i)?i.value=v:null),transition:"fade-transition",location:"top start"},{default:e(()=>c[7]||(c[7]=[n(" I'm a fade transition snackbar. ")])),_:1},8,["modelValue"]),t(k,{onClick:c[2]||(c[2]=v=>o.value=!0)},{default:e(()=>c[8]||(c[8]=[n(" Scale snackbar ")])),_:1}),t(f,{modelValue:S(o),"onUpdate:modelValue":c[3]||(c[3]=v=>p(o)?o.value=v:null),transition:"scale-transition",location:"bottom end"},{default:e(()=>c[9]||(c[9]=[n(" I'm a scale transition snackbar. ")])),_:1},8,["modelValue"]),t(k,{onClick:c[4]||(c[4]=v=>a.value=!0)},{default:e(()=>c[10]||(c[10]=[n(" scroll y reverse ")])),_:1}),t(f,{modelValue:S(a),"onUpdate:modelValue":c[5]||(c[5]=v=>p(a)?a.value=v:null),transition:"scroll-y-reverse-transition",location:"top end"},{default:e(()=>c[11]||(c[11]=[n(" I'm a scroll y reverse transition snackbar. ")])),_:1},8,["modelValue"])]))}},Pa={class:"demo-space-x"},Ea={__name:"DemoSnackbarVariants",setup(b){const i=V(!1),o=V(!1),a=V(!1),r=V(!1),c=V(!1);return(v,s)=>(x(),T("div",Pa,[t(k,{onClick:s[0]||(s[0]=m=>i.value=!0)},{default:e(()=>s[10]||(s[10]=[n(" Default ")])),_:1}),t(f,{modelValue:S(i),"onUpdate:modelValue":s[1]||(s[1]=m=>p(i)?i.value=m:null),location:"top start"},{default:e(()=>s[11]||(s[11]=[n(" Jelly chocolate bar candy canes apple pie. ")])),_:1},8,["modelValue"]),t(k,{onClick:s[2]||(s[2]=m=>o.value=!0)},{default:e(()=>s[12]||(s[12]=[n(" tonal ")])),_:1}),t(f,{modelValue:S(o),"onUpdate:modelValue":s[3]||(s[3]=m=>p(o)?o.value=m:null),location:"top end",variant:"tonal"},{default:e(()=>s[13]||(s[13]=[n(" Ice cream cake candy canes. ")])),_:1},8,["modelValue"]),t(k,{onClick:s[4]||(s[4]=m=>a.value=!0)},{default:e(()=>s[14]||(s[14]=[n(" Text ")])),_:1}),t(f,{modelValue:S(a),"onUpdate:modelValue":s[5]||(s[5]=m=>p(a)?a.value=m:null),location:"end center",variant:"text"},{default:e(()=>s[15]||(s[15]=[n(" Pie icing biscuit soufflé liquorice topping. ")])),_:1},8,["modelValue"]),t(k,{onClick:s[6]||(s[6]=m=>r.value=!0)},{default:e(()=>s[16]||(s[16]=[n(" Outlined ")])),_:1}),t(f,{modelValue:S(r),"onUpdate:modelValue":s[7]||(s[7]=m=>p(r)?r.value=m:null),location:"bottom end",variant:"outlined",color:"error"},{default:e(()=>s[17]||(s[17]=[n(" Oat cake caramels sesame snaps candy. ")])),_:1},8,["modelValue"]),t(k,{onClick:s[8]||(s[8]=m=>c.value=!0)},{default:e(()=>s[18]||(s[18]=[n(" Flat ")])),_:1}),t(f,{modelValue:S(c),"onUpdate:modelValue":s[9]||(s[9]=m=>p(c)?c.value=m:null),location:"bottom start",variant:"flat",color:"error"},{default:e(()=>s[19]||(s[19]=[n(" Oat cake caramels sesame snaps candy. ")])),_:1},8,["modelValue"])]))}},Fa={class:"demo-space-x"},Ra={__name:"DemoSnackbarPosition",setup(b){const i=V(!1),o=V(!1),a=V(!1),r=V(!1),c=V(!1),v=V(!1),s=V(!1),m=V(!1),g=V(!1);return(w,l)=>(x(),T("div",Fa,[t(k,{icon:"",variant:"text",onClick:l[0]||(l[0]=u=>o.value=!0)},{default:e(()=>[t(y,{icon:"tabler-arrow-up"})]),_:1}),t(f,{modelValue:S(o),"onUpdate:modelValue":l[1]||(l[1]=u=>p(o)?o.value=u:null),location:"top"},{default:e(()=>l[18]||(l[18]=[n(" I'm a top snackbar. ")])),_:1},8,["modelValue"]),t(k,{icon:"",variant:"text",onClick:l[2]||(l[2]=u=>a.value=!0)},{default:e(()=>[t(y,{icon:"tabler-arrow-up-right"})]),_:1}),t(f,{modelValue:S(a),"onUpdate:modelValue":l[3]||(l[3]=u=>p(a)?a.value=u:null),location:"top end"},{default:e(()=>l[19]||(l[19]=[n(" I'm a top right snackbar. ")])),_:1},8,["modelValue"]),t(k,{icon:"",variant:"text",onClick:l[4]||(l[4]=u=>s.value=!0)},{default:e(()=>[t(y,{icon:"tabler-arrow-right"})]),_:1}),t(f,{modelValue:S(s),"onUpdate:modelValue":l[5]||(l[5]=u=>p(s)?s.value=u:null),location:"end center"},{default:e(()=>l[20]||(l[20]=[n(" I'm a center end snackbar. ")])),_:1},8,["modelValue"]),t(k,{icon:"",variant:"text",onClick:l[6]||(l[6]=u=>r.value=!0)},{default:e(()=>[t(y,{icon:"tabler-arrow-down-right"})]),_:1}
1),t(f,{modelValue:S(r),"onUpdate:modelValue":l[7]||(l[7]=u=>p(r)?r.value=u:null),location:"bottom end"},{default:e(()=>l[21]||(l[21]=[n(" I'm a bottom end snackbar. ")])),_:1},8,["modelValue"]),t(k,{icon:"",variant:"text",onClick:l[8]||(l[8]=u=>c.value=!0)},{default:e(()=>[t(y,{icon:"tabler-arrow-down"})]),_:1}),t(f,{modelValue:S(c),"onUpdate:modelValue":l[9]||(l[9]=u=>p(c)?c.value=u:null)},{default:e(()=>l[22]||(l[22]=[n(" I'm a bottom snackbar. ")])),_:1},8,["modelValue"]),t(k,{icon:"",variant:"text",onClick:l[10]||(l[10]=u=>v.value=!0)},{default:e(()=>[t(y,{icon:"tabler-arrow-down-left"})]),_:1}),t(f,{modelValue:S(v),"onUpdate:modelValue":l[11]||(l[11]=u=>p(v)?v.value=u:null),location:"bottom start"},{default:e(()=>l[23]||(l[23]=[n(" I'm a bottom start snackbar. ")])),_:1},8,["modelValue"]),t(k,{icon:"",variant:"text",onClick:l[12]||(l[12]=u=>m.value=!0)},{default:e(()=>[t(y,{icon:"tabler-arrow-left"})]),_:1}),t(f,{modelValue:S(m),"onUpdate:modelValue":l[13]||(l[13]=u=>p(m)?m.value=u:null),location:"start center"},{default:e(()=>l[24]||(l[24]=[n(" I'm a center start snackbar. ")])),_:1},8,["modelValue"]),t(k,{icon:"",variant:"text",onClick:l[14]||(l[14]=u=>i.value=!0)},{default:e(()=>[t(y,{icon:"tabler-arrow-up-left"})]),_:1}),t(f,{modelValue:S(i),"onUpdate:modelValue":l[15]||(l[15]=u=>p(i)?i.value=u:null),location:"top start"},{default:e(()=>l[25]||(l[25]=[n(" I'm a top start snackbar. ")])),_:1},8,["modelValue"]),t(k,{icon:"",variant:"text",onClick:l[16]||(l[16]=u=>g.value=!0)},{default:e(()=>[t(y,{icon:"tabler-arrows-minimize"})]),_:1}),t(f,{modelValue:S(g),"onUpdate:modelValue":l[17]||(l[17]=u=>p(g)?g.value=u:null),location:"center"},{default:e(()=>l[26]||(l[26]=[n(" I'm a center snackbar. ")])),_:1},8,["modelValue"])]))}},La={__name:"DemoSnackbarVertical",setup(b){const i=V(!1);return(o,a)=>(x(),T(O,null,[t(k,{onClick:a[0]||(a[0]=r=>i.value=!0)},{default:e(()=>a[4]||(a[4]=[n(" Open Snackbar ")])),_:1}),t(f,{modelValue:S(i),"onUpdate:modelValue":a[3]||(a[3]=r=>p(i)?i.value=r:null),vertical:""},{actions:e(()=>[t(k,{color:"success",onClick:a[1]||(a[1]=r=>i.value=!1)},{default:e(()=>a[5]||(a[5]=[n(" Undo ")])),_:1}),t(k,{color:"error",onClick:a[2]||(a[2]=r=>i.value=!1)},{default:e(()=>
1a[6]||(a[6]=[n(" Close ")])),_:1})]),default:e(()=>[a[7]||(a[7]=n(" Sugar plum chocolate bar halvah sesame snaps apple pie donut croissant marshmallow. Sweet roll donut gummies sesame snaps icing bear claw tiramisu cotton candy. "))]),_:1},8,["modelValue"])],64))}},Aa={__name:"DemoSnackbarTimeout",setup(b){const i=V(!1);return(o,a)=>(x(),T(O,null,[t(k,{onClick:a[0]||(a[0]=r=>i.value=!0)},{default:e(()=>a[2]||(a[2]=[n(" Open Snackbar ")])),_:1}),t(f,{modelValue:S(i),"onUpdate:modelValue":a[1]||(a[1]=r=>p(i)?i.value=r:null),timeout:2e3},{default:e(()=>a[3]||(a[3]=[n(" My timeout is set to 2000. ")])),_:1},8,["modelValue"])],64))}},Ma={__name:"DemoSnackbarMultiLine",setup(b){const i=V(!1);return(o,a)=>(x(),T(O,null,[t(k,{onClick:a[0]||(a[0]=r=>i.value=!0)},{default:e(()=>a[3]||(a[3]=[n(" Open Snackbar ")])),_:1}),t(f,{modelValue:S(i),"onUpdate:modelValue":a[2]||(a[2]=r=>p(i)?i.value=r:null),"multi-line":""},{actions:e(()=>[t(k,{color:"error",onClick:a[1]||(a[1]=r=>i.value=!1)},{default:e(()=>a[4]||(a[4]=[n(" Close ")])),_:1})]),default:e(()=>[a[5]||(a[5]=n(" I am a multi-line snackbar. I can have more than one line. This is another line that is quite long. "))]),_:1},8,["modelValue"])],64))}},ja={__name:"DemoSnackbarWithAction",setup(b){const i=V(!1);return(o,a)=>(x(),T(O,null,[t(k,{onClick:a[0]||(a[0]=r=>i.value=!0)},{default:e(()=>a[3]||(a[3]=[n(" Open Snackbar ")])),_:1}),t(f,{modelValue:S(i),"onUpdate:modelValue":a[2]||(a[2]=r=>p(i)?i.value=r:null)},{actions:e(()=>[t(k,{color:"error",onClick:a[1]||(a[1]=r=>i.value=!1)},{default:e(()=>
1a[4]||(a[4]=[n(" Close ")])),_:1})]),default:e(()=>[a[5]||(a[5]=n(" Hello, I'm a snackbar with actions. "))]),_:1},8,["modelValue"])],64))}},qa={__name:"DemoSnackbarBasic",setup(b){const i=V(!1);return(o,a)=>(x(),T(O,null,[t(k,{onClick:a[0]||(a[0]=r=>i.value=!0)},{default:e(()=>a[2]||(a[2]=[n(" Open Snackbar ")])),_:1}),t(f,{modelValue:S(i),"onUpdate:modelValue":a[1]||(a[1]=r=>p(i)?i.value=r:null)},{default:e(()=>a[3]||(a[3]=[n(" Hello, I'm a snackbar ")])),_:1},8,["modelValue"])],64))}},Ha={ts:`<script lang="ts" setup> 2const isSnackbarVisible = ref(false) 3<\/script> 4 5<template> 6 <VBtn @click="isSnackbarVisible = true"> 7 Open Snackbar 8 </VBtn> 9 10 <!-- SnackBar --> 11 <VSnackbar v-model="isSnackbarVisible"> 12 Hello, I'm a snackbar 13 </VSnackbar> 14</template> 15`,js:`<script setup> 16const isSnackbarVisible = ref(false) 17<\/script> 18 19<template> 20 <VBtn @click="isSnackbarVisible = true"> 21 Open Snackbar 22 </VBtn> 23 24 <!-- SnackBar --> 25 <VSnackbar v-model="isSnackbarVisible"> 26 Hello, I'm a snackbar 27 </VSnackbar> 28</template> 29`},Na={ts:`<script lang="ts" setup> 30const isSnackbarVisible = ref(false) 31<\/script> 32 33<template> 34 <VBtn @click="isSnackbarVisible = true"> 35 Open Snackbar 36 </VBtn> 37 38 <!-- Snackbar --> 39 <VSnackbar 40 v-model="isSnackbarVisible" 41 multi-line 42 > 43 I am a multi-line snackbar. I can have more than one line. This is another line that is quite long. 44 45 <template #actions> 46 <VBtn 47 color="error" 48 @click="isSnackbarVisible = false" 49 > 50 Close 51 </VBtn> 52 </template> 53 </VSnackbar> 54</template> 55`,js:`<script setup> 56const isSnackbarVisible = ref(false) 57<\/script> 58 59<template> 60 <VBtn @click="isSnackbarVisible = true"> 61 Open Snackbar 62 </VBtn> 63 64 <!-- Snackbar --> 65 <VSnackbar 66 v-model="isSnackbarVisible" 67 multi-line 68 > 69 I am a multi-line snackbar. I can have more than one line. This is another line that is quite long. 70 71 <template #actions> 72 <VBtn 73 color="error" 74 @click="isSnackbarVisible = false" 75 > 76 Close 77 </VBtn> 78 </template> 79 </VSnackbar> 80</template> 81`},za={ts:`<script lang="ts" setup> 82const isSnackbarTopStartVisible = ref(false) 83const isSnackbarTopVisible = ref(false) 84const isSnackbarTopEndVisible = ref(false) 85const isSnackbarBottomEndVisible = ref(false) 86const isSnackbarBottomVisible = ref(false) 87const isSnackbarBottomStartVisible = ref(false) 88const isSnackbarEndVisible = ref(false) 89const isSnackbarStartVisible = ref(false) 90const isSnackbarCenteredVisible = ref(false) 91<\/script> 92 93<template> 94 <div class="demo-space-x"> 95 <!-- top --> 96 <VBtn 97 icon 98 variant="text" 99 @click="isSnackbarTopVisible = true" 100 > 101 <VIcon icon="tabler-arrow-up" /> 102 </VBtn> 103 104 <VSnackbar 105 v-model="isSnackbarTopVisible" 106 location="top" 107 > 108 I'm a top snackbar. 109 </VSnackbar> 110 111 <!-- top end --> 112 <VBtn 113 icon 114 variant="text" 115 @click="isSnackbarTopEndVisible = true" 116 > 117 <VIcon icon="tabler-arrow-up-right" /> 118 </VBtn> 119 120 <VSnackbar 121 v-model="isSnackbarTopEndVisible" 122 location="top end" 123 > 124 I'm a top right snackbar. 125 </VSnackbar> 126 127 <!-- center end --> 128 <VBtn 129 icon 130 variant="text" 131 @click="isSnackbarEndVisible = true" 132 > 133 <VIcon icon="tabler-arrow-right" /> 134 </VBtn> 135 136 <VSnackbar 137 v-model="isSnackbarEndVisible" 138 location="end center" 139 > 140 I'm a center end snackbar. 141 </VSnackbar> 142 143 <!-- bottom end --> 144 <VBtn 145 icon 146 variant="text" 147 @click="isSnackbarBottomEndVisible = true" 148 > 149 <VIcon icon="tabler-arrow-down-right" /> 150 </VBtn> 151 152 <VSnackbar 153 v-model="isSnackbarBottomEndVisible" 154 location="bottom end" 155 > 156 I'm a bottom end snackbar. 157 </VSnackbar> 158 159 <!-- bottom --> 160 <VBtn 161 icon 162 variant="text" 163 @click="isSnackbarBottomVisible = true" 164 > 165 <VIcon icon="tabler-arrow-down" /> 166 </VBtn> 167 168 <VSnackbar v-model="isSnackbarBottomVisible"> 169 I'm a bottom snackbar. 170 </VSnackbar> 171 172 <!-- bottom start --> 173 <VBtn 174 icon 175 variant="text" 176 @click="isSnackbarBottomStartVisible = true" 177 > 178 <VIcon icon="tabler-arrow-down-left" /> 179 </VBtn> 180 181 <VSnackbar 182 v-model="isSnackbarBottomStartVisible" 183 location="bottom start" 184 > 185 I'm a bottom start snackbar. 186 </VSnackbar> 187 188 <!-- center start --> 189 <VBtn 190 icon 191 variant="text" 192 @click="isSnackbarStartVisible = true" 193 > 194 <VIcon icon="tabler-arrow-left" /> 195 </VBtn> 196 197 <VSnackbar 198 v-model="isSnackbarStartVisible" 199 location="start center" 200 > 201 I'm a center start snackbar. 202 </VSnackbar> 203 204 <!-- top start --> 205 <VBtn 206 icon 207 variant="text" 208 @click="isSnackbarTopStartVisible = true" 209 > 210 <VIcon icon="tabler-arrow-up-left" /> 211 </VBtn> 212 213 <VSnackbar 214 v-model="isSnackbarTopStartVisible" 215 location="top start" 216 > 217 I'm a top start snackbar. 218 </VSnackbar> 219 220 <!-- center --> 221 <VBtn 222 icon 223 variant="text" 224 @click="isSnackbarCenteredVisible = true" 225 > 226 <VIcon icon="tabler-arrows-minimize" /> 227 </VBtn> 228 229 <VSnackbar 230 v-model="isSnackbarCenteredVisible" 231 location="center" 232 > 233 I'm a center snackbar. 234 </VSnackbar> 235 </div> 236</template> 237`,js:`<script setup> 238const isSnackbarTopStartVisible = ref(false) 239const isSnackbarTopVisible = ref(false) 240const isSnackbarTopEndVisible = ref(false) 241const isSnackbarBottomEndVisible = ref(false) 242const isSnackbarBottomVisible = ref(false) 243const isSnackbarBottomStartVisible = ref(false) 244const isSnackbarEndVisible = ref(false) 245const isSnackbarStartVisible = ref(false) 246const isSnackbarCenteredVisible = ref(false) 247<\/script> 248 249<template> 250 <div class="demo-space-x"> 251 <!-- top --> 252 <VBtn 253 icon 254 variant="text" 255 @click="isSnackbarTopVisible = true" 256 > 257 <VIcon icon="tabler-arrow-up" /> 258 </VBtn> 259 260 <VSnackbar 261 v-model="isSnackbarTopVisible" 262 location="top" 263 > 264 I'm a top snackbar. 265 </VSnackbar> 266 267 <!-- top end --> 268 <VBtn 269 icon 270 variant="text" 271 @click="isSnackbarTopEndVisible = true" 272 > 273 <VIcon icon="tabler-arrow-up-right" /> 274 </VBtn> 275 276 <VSnackbar 277 v-model="isSnackbarTopEndVisible" 278 location="top end" 279 > 280 I'm a top right snackbar. 281 </VSnackbar> 282 283 <!-- center end --> 284 <VBtn 285 icon 286 variant="text" 287 @click="isSnackbarEndVisible = true" 288 > 289 <VIcon icon="tabler-arrow-right" /> 290 </VBtn> 291 292 <VSnackbar 293 v-model="isSnackbarEndVisible" 294 location="end center" 295 > 296 I'm a center end snackbar. 297 </VSnackbar> 298 299 <!-- bottom end --> 300 <VBtn 301 icon 302 variant="text" 303 @click="isSnackbarBottomEndVisible = true" 304 > 305 <VIcon icon="tabler-arrow-down-right" /> 306 </VBtn> 307 308 <VSnackbar 309 v-model="isSnackbarBottomEndVisible" 310 location="bottom end" 311 > 312 I'm a bottom end snackbar. 313 </VSnackbar> 314 315 <!-- bottom --> 316 <VBtn 317 icon 318 variant="text" 319 @click="isSnackbarBottomVisible = true" 320 > 321 <VIcon icon="tabler-arrow-down" /> 322 </VBtn> 323 324 <VSnackbar v-model="isSnackbarBottomVisible"> 325 I'm a bottom snackbar. 326 </VSnackbar> 327 328 <!-- bottom start --> 329 <VBtn 330 icon 331 variant="text" 332 @click="isSnackbarBottomStartVisible = true" 333 > 334 <VIcon icon="tabler-arrow-down-left" /> 335 </VBtn> 336 337 <VSnackbar 338 v-model="isSnackbarBottomStartVisible" 339 location="bottom start" 340 > 341 I'm a bottom start snackbar. 342 </VSnackbar> 343 344 <!-- center start --> 345 <VBtn 346 icon 347 variant="text" 348 @click="isSnackbarStartVisible = true" 349 > 350 <VIcon icon="tabler-arrow-left" /> 351 </VBtn> 352 353 <VSnackbar 354 v-model="isSnackbarStartVisible" 355 location="start center" 356 > 357 I'm a center start snackbar. 358 </VSnackbar> 359 360 <!-- top start --> 361 <VBtn 362 icon 363 variant="text" 364 @click="isSnackbarTopStartVisible = true" 365 > 366 <VIcon icon="tabler-arrow-up-left" /> 367 </VBtn> 368 369 <VSnackbar 370 v-model="isSnackbarTopStartVisible" 371 location="top start" 372 > 373 I'm a top start snackbar. 374 </VSnackbar> 375 376 <!-- center --> 377 <VBtn 378 icon 379 variant="text" 380 @click="isSnackbarCenteredVisible = true" 381 > 382 <VIcon icon="tabler-arrows-minimize" /> 383 </VBtn> 384 385 <VSnackbar 386 v-model="isSnackbarCenteredVisible" 387 location="center" 388 > 389 I'm a center snackbar. 390 </VSnackbar> 391 </div> 392</template> 393`},Wa={ts:`<script lang="ts" setup> 394const isSnackbarVisible = ref(false) 395<\/script> 396 397<template> 398 <VBtn @click="isSnackbarVisible = true"> 399 Open Snackbar
400 </VBtn> 401 402 <!-- Snackbar --> 403 <VSnackbar 404 v-model="isSnackbarVisible" 405 :timeout="2000" 406 > 407 My timeout is set to 2000. 408 </VSnackbar> 409</template> 410`,js:`<script setup> 411const isSnackbarVisible = ref(false) 412<\/script> 413 414<template> 415 <VBtn @click="isSnackbarVisible = true"> 416 Open Snackbar 417 </VBtn> 418 419 <!-- Snackbar --> 420 <VSnackbar 421 v-model="isSnackbarVisible" 422 :timeout="2000" 423 > 424 My timeout is set to 2000. 425 </VSnackbar> 426</template> 427`},Ya={ts:`<script lang="ts" setup> 428const isSnackbarFadeVisible = ref(false) 429const isSnackbarScaleVisible = ref(false) 430const isSnackbarScrollReverseVisible = ref(false) 431<\/script> 432 433<template> 434 <div class="demo-space-x"> 435 <!-- fade --> 436 <VBtn @click="isSnackbarFadeVisible = true"> 437 fade snackbar 438 </VBtn> 439 440 <VSnackbar 441 v-model="isSnackbarFadeVisible" 442 transition="fade-transition" 443 location="top start" 444 > 445 I'm a fade transition snackbar. 446 </VSnackbar> 447 448 <!-- scale --> 449 <VBtn @click="isSnackbarScaleVisible = true"> 450 Scale snackbar 451 </VBtn> 452 453 <VSnackbar 454 v-model="isSnackbarScaleVisible" 455 transition="scale-transition" 456 location="bottom end" 457 > 458 I'm a scale transition snackbar. 459 </VSnackbar> 460 461 <!-- scroll y reverse --> 462 <VBtn @click="isSnackbarScrollReverseVisible = true"> 463 scroll y reverse 464 </VBtn> 465 466 <VSnackbar 467 v-model="isSnackbarScrollReverseVisible" 468 transition="scroll-y-reverse-transition" 469 location="top end" 470 > 471 I'm a scroll y reverse transition snackbar. 472 </VSnackbar> 473 </div> 474</template> 475`,js:`<script setup> 476const isSnackbarFadeVisible = ref(false) 477const isSnackbarScaleVisible = ref(false) 478const isSnackbarScrollReverseVisible = ref(false) 479<\/script> 480 481<template> 482 <div class="demo-space-x"> 483 <!-- fade --> 484 <VBtn @click="isSnackbarFadeVisible = true"> 485 fade snackbar 486 </VBtn> 487 488 <VSnackbar 489 v-model="isSnackbarFadeVisible" 490 transition="fade-transition" 491 location="top start" 492 > 493 I'm a fade transition snackbar. 494 </VSnackbar> 495 496 <!-- scale --> 497 <VBtn @click="isSnackbarScaleVisible = true"> 498 Scale snackbar 499 </VBtn> 500 501 <VSnackbar 502 v-model="isSnackbarScaleVisible" 503 transition="scale-transition" 504 location="bottom end" 505 > 506 I'm a scale transition snackbar. 507 </VSnackbar> 508 509 <!-- scroll y reverse --> 510 <VBtn @click="isSnackbarScrollReverseVisible = true"> 511 scroll y reverse 512 </VBtn> 513 514 <VSnackbar 515 v-model="isSnackbarScrollReverseVisible" 516 transition="scroll-y-reverse-transition" 517 location="top end" 518 > 519 I'm a scroll y reverse transition snackbar. 520 </VSnackbar> 521 </div> 522</template> 523`},Ja={ts:`<script lang="ts" setup> 524const isDefaultSnackbarVisible = ref(false) 525const isTonalSnackbarVisible = ref(false) 526const isTextSnackbarVisible = ref(false) 527const isOutlinedSnackbarVisible = ref(false) 528const isFlatSnackbarVisible = ref(false) 529<\/script> 530 531<template> 532 <div class="demo-space-x"> 533 <!-- Default toggle btn --> 534 <VBtn @click="isDefaultSnackbarVisible = true"> 535 Default 536 </VBtn> 537 538 <!-- Default snackbar --> 539 <VSnackbar 540 v-model="isDefaultSnackbarVisible" 541 location="top start" 542 > 543 Jelly chocolate bar candy canes apple pie. 544 </VSnackbar> 545 546 <!-- tonal toggle btn --> 547 <VBtn @click="isTonalSnackbarVisible = true"> 548 tonal 549 </VBtn> 550 551 <!-- tonal snackbar --> 552 <VSnackbar 553 v-model="isTonalSnackbarVisible" 554 location="top end" 555 variant="tonal" 556 > 557 Ice cream cake candy canes. 558 </VSnackbar> 559 560 <!-- Text toggle btn --> 561 <VBtn @click="isTextSnackbarVisible = true"> 562 Text 563 </VBtn> 564 565 <!-- Text snackbar --> 566 <VSnackbar 567 v-model="isTextSnackbarVisible" 568 location="end center" 569 variant="text" 570 > 571 Pie icing biscuit soufflé liquorice topping. 572 </VSnackbar> 573 574 <!-- Outline toggle btn --> 575 <VBtn @click="isOutlinedSnackbarVisible = true"> 576 Outlined 577 </VBtn> 578 579 <!-- Outline snackbar --> 580 <VSnackbar 581 v-model="isOutlinedSnackbarVisible" 582 location="bottom end" 583 variant="outlined" 584 color="error" 585 > 586 Oat cake caramels sesame snaps candy. 587 </VSnackbar> 588 589 <!-- flat toggle btn --> 590 <VBtn @click="isFlatSnackbarVisible = true"> 591 Flat 592 </VBtn> 593 594 <!-- flat snackbar --> 595 <VSnackbar 596 v-model="isFlatSnackbarVisible" 597 location="bottom start" 598 variant="flat" 599 color="error" 600 > 601 Oat cake caramels sesame snaps candy. 602 </VSnackbar> 603 </div> 604</template> 605`,js:`<script setup> 606const isDefaultSnackbarVisible = ref(false) 607const isTonalSnackbarVisible = ref(false) 608const isTextSnackbarVisible = ref(false) 609const isOutlinedSnackbarVisible = ref(false) 610const isFlatSnackbarVisible = ref(false) 611<\/script> 612 613<template> 614 <div class="demo-space-x"> 615 <!-- Default toggle btn --> 616 <VBtn @click="isDefaultSnackbarVisible = true"> 617 Default 618 </VBtn> 619 620 <!-- Default snackbar --> 621 <VSnackbar 622 v-model="isDefaultSnackbarVisible" 623 location="top start" 624 > 625 Jelly chocolate bar candy canes apple pie. 626 </VSnackbar> 627 628 <!-- tonal toggle btn --> 629 <VBtn @click="isTonalSnackbarVisible = true"> 630 tonal 631 </VBtn> 632 633 <!-- tonal snackbar --> 634 <VSnackbar 635 v-model="isTonalSnackbarVisible" 636 location="top end" 637 variant="tonal" 638 > 639 Ice cream cake candy canes. 640 </VSnackbar> 641 642 <!-- Text toggle btn --> 643 <VBtn @click="isTextSnackbarVisible = true"> 644 Text 645 </VBtn> 646 647 <!-- Text snackbar --> 648 <VSnackbar 649 v-model="isTextSnackbarVisible" 650 location="end center" 651 variant="text" 652 > 653 Pie icing biscuit soufflé liquorice topping. 654 </VSnackbar> 655 656 <!-- Outline toggle btn --> 657 <VBtn @click="isOutlinedSnackbarVisible = true"> 658 Outlined 659 </VBtn> 660 661 <!-- Outline snackbar --> 662 <VSnackbar 663 v-model="isOutlinedSnackbarVisible" 664 location="bottom end" 665 variant="outlined" 666 color="error" 667 > 668 Oat cake caramels sesame snaps candy. 669 </VSnackbar> 670 671 <!-- flat toggle btn --> 672 <VBtn @click="isFlatSnackbarVisible = true"> 673 Flat 674 </VBtn> 675 676 <!-- flat snackbar --> 677 <VSnackbar 678 v-model="isFlatSnackbarVisible" 679 location="bottom start" 680 variant="flat" 681 color="error" 682 > 683 Oat cake caramels sesame snaps candy. 684 </VSnackbar> 685 </div> 686</template> 687`}
687,Ga={ts:`<script lang="ts" setup> 688const isSnackbarVisible = ref(false) 689<\/script> 690 691<template> 692 <VBtn @click="isSnackbarVisible = true"> 693 Open Snackbar 694 </VBtn> 695 696 <VSnackbar 697 v-model="isSnackbarVisible" 698 vertical 699 > 700 Sugar plum chocolate bar halvah sesame snaps apple pie donut croissant marshmallow. Sweet roll donut gummies sesame snaps icing bear claw tiramisu cotton candy. 701 702 <template #actions> 703 <VBtn 704 color="success" 705 @click="isSnackbarVisible = false" 706 > 707 Undo 708 </VBtn> 709 710 <VBtn 711 color="error" 712 @click="isSnackbarVisible = false" 713 > 714 Close 715 </VBtn> 716 </template> 717 </VSnackbar> 718</template> 719`,js:`<script setup> 720const isSnackbarVisible = ref(false) 721<\/script> 722 723<template> 724 <VBtn @click="isSnackbarVisible = true"> 725 Open Snackbar 726 </VBtn> 727 728 <VSnackbar 729 v-model="isSnackbarVisible" 730 vertical 731 > 732 Sugar plum chocolate bar halvah sesame snaps apple pie donut croissant marshmallow. Sweet roll donut gummies sesame snaps icing bear claw tiramisu cotton candy. 733 734 <template #actions> 735 <VBtn 736 color="success" 737 @click="isSnackbarVisible = false" 738 > 739 Undo 740 </VBtn> 741 742 <VBtn 743 color="error" 744 @click="isSnackbarVisible = false" 745 > 746 Close 747 </VBtn> 748 </template> 749 </VSnackbar> 750</template> 751`},Qa={ts:`<script lang="ts" setup> 752const isSnackbarVisibility = ref(false) 753<\/script> 754 755<template> 756 <VBtn @click="isSnackbarVisibility = true"> 757 Open Snackbar 758 </VBtn> 759 760 <!-- Snackbar --> 761 <VSnackbar v-model="isSnackbarVisibility"> 762 Hello, I'm a snackbar with actions. 763 764 <template #actions> 765 <VBtn 766 color="error" 767 @click="isSnackbarVisibility = false" 768 > 769 Close 770 </VBtn> 771 </template> 772 </VSnackbar> 773</template> 774`,js:`<script setup> 775const isSnackbarVisibility = ref(false) 776<\/script> 777 778<template> 779 <VBtn @click="isSnackbarVisibility = true"> 780 Open Snackbar 781 </VBtn> 782 783 <!-- Snackbar --> 784 <VSnackbar v-model="isSnackbarVisibility"> 785 Hello, I'm a snackbar with actions. 786 787 <template #actions> 788 <VBtn 789 color="error" 790 @click="isSnackbarVisibility = false" 791 > 792 Close 793 </VBtn> 794 </template> 795 </VSnackbar> 796</template> 797`},mt={__name:"snackbar",setup(b){return(i,o)=>{const a=qa,r=wa,c=ja,v=Ma,s=Aa,m=La,g=Ra,w=Ea,l=Ua;return x(),ya(Ca,{class:"match-height"},{default:e(()=>[t(I,{cols:"12",md:"6"},{default:e(()=>[t(r,{title:"Basic",code:Ha},{default:e(()=>[o[0]||(o[0]=d("p",null,[n("The "),d("code",null,"v-snackbar"),n(" component is used to display a quick message to a user. Snackbars support positioning, removal delay, and callbacks.")],-1)),t(a)]),_:1},8,["code"])]),_:1}),t(I,{cols:"12",md:"6"},{default:e(()=>[t(r,{title:"With Action",code:Qa},{default:e(()=>[o[1]||(o[1]=d("p",null,[n("Use "),d("code",null,"actions"),n(" slot to add action button. A "),d("code",null,"v-snackbar"),n(" in its simplest form displays a temporary and closable notification to the user.")],-1)),t(c)]),_:1},8,["code"])]),_:1}),t(I,{cols:"12",md:"6"},{default:e(()=>[t(r,{title:"Multi Line",code:Na},{default:e(()=>[o[2]||(o[2]=d("p",null,[n("The "),d("code",null,"multi-line"),n(" property extends the height of the "),d("code",null,"v-snackbar"),n(" to give you a little more room for content.")],-1)),t(v)]),_:1},8,["code"])]),_:1}),t(I,{cols:"12",md:"6"},{default:e(()=>[t(r,{title:"Timeout",code:Wa},{default:e(()=>[o[3]||(o[3]=d("p",null,[n("The "),d("code",null,"timeout"),n(" property lets you customize the delay before the "),d("code",null,"v-snackbar"),n(" is hidden.")],-1)),t(s)]),_:1},8,["code"])]),_:1}),t(I,{cols:"12",md:"6"},{default:e(()=>[t(r,{title:"Vertical",code:Ga},{default:e(()=>[o[4]||(o[4]=d("p",null,[n("The "),d("code",null,"vertical"),n(" property allows you to stack the content of your "),d("code",null,"v-snackbar"),n(".")],-1)),t(m)]),_:1},8,["code"])]),_:1}),t(I,{cols:"12",md:"6"},{default:e(()=>[t(r,{title:"Position",code:za},{default:e(()=>[o[5]||(o[5]=d("p",null,[n("Use "),d("code",null,"location"),n(" prop to change the position of snackbar.")],-1)),t(g)]),_:1},8,["code"])]),_:1}),t(I,{cols:"12",md:"6"},{default:e(()=>[t(r,{title:"Variants",code:Ja},{default:e(()=>[o[6]||(o[6]=d("p",null,[n("Apply different styles to the snackbar using props such as "),d("code",null,"shaped"),n(", "),d("code",null,"rounded"),n(", "),d("code",null,"color"),n(", "),d("code",null,"text"),n(", "),d("code",null,"outlined"),n(", "),d("code",null,"tile"),n(" and more.")],-1)),t(w)]),_:1},8,["code"])]),_:1}),t(I,{cols:"12",md:"6"},{default:e(()=>[t(r,{title:"Transition",code:Ya},{default:e(()=>[o[7]||(o[7]=d("p",null,"Use transition prop to sets the component transition.",-1)),t(l)]),_:1},8,["code"])]),_:1})]),_:1})}}};export{mt 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.