@vuetify/nightly 3.0.0-beta.6 → 3.0.0-beta.9

package/lib/components/VImg/VImg.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VImg.mjs","names":["VResponsive","intersect","makeTransitionProps","MaybeTransition","computed","h","nextTick","onBeforeMount","ref","vShow","watch","withDirectives","convertToUnit","defineComponent","SUPPORTS_INTERSECTION","useRender","VImg","name","directives","props","aspectRatio","String","Number","alt","cover","Boolean","eager","gradient","lazySrc","options","type","Object","default","root","undefined","rootMargin","threshold","sizes","src","srcset","width","emits","setup","emit","slots","currentSrc","image","state","naturalWidth","naturalHeight","normalisedSrc","aspect","value","init","isIntersecting","lazyImg","Image","pollForSize","complete","onError","onLoad","getSrc","img","timeout","poll","imgHeight","imgWidth","setTimeout","endsWith","startsWith","containClasses","__image","class","sources","transition","__preloadImage","__placeholder","placeholder","error","__error","__gradient","backgroundImage","isBooted","stop","val","requestAnimationFrame","additional","handler"],"sources":["../../../src/components/VImg/VImg.tsx"],"sourcesContent":["import './VImg.sass'\n\n// Components\nimport { VResponsive } from '@/components/VResponsive'\n\n// Directives\nimport intersect from '@/directives/intersect'\n\n// Composables\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\n\n// Utilities\nimport {\n  computed,\n  h,\n  nextTick,\n  onBeforeMount,\n  ref,\n  vShow,\n  watch,\n  withDirectives,\n} from 'vue'\nimport {\n  convertToUnit,\n  defineComponent,\n  SUPPORTS_INTERSECTION,\n  useRender,\n} from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\n// not intended for public use, this is passed in by vuetify-loader\nexport interface srcObject {\n  src?: string\n  srcset?: string\n  lazySrc?: string\n  aspect: number\n}\n\nexport const VImg = defineComponent({\n  name: 'VImg',\n\n  directives: { intersect },\n\n  props: {\n    aspectRatio: [String, Number],\n    alt: String,\n    cover: Boolean,\n    eager: Boolean,\n    gradient: String,\n    lazySrc: String,\n    options: {\n      type: Object as PropType<IntersectionObserverInit>,\n      // For more information on types, navigate to:\n      // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\n      default: () => ({\n        root: undefined,\n        rootMargin: undefined,\n        threshold: undefined,\n      }),\n    },\n    sizes: String,\n    src: {\n      type: [String, Object] as PropType<string | srcObject>,\n      default: '',\n    },\n    srcset: String,\n    width: [String, Number],\n\n    ...makeTransitionProps(),\n  },\n\n  emits: ['loadstart', 'load', 'error'],\n\n  setup (props, { emit, slots }) {\n    const currentSrc = ref('') // Set from srcset\n    const image = ref<HTMLImageElement>()\n    const state = ref<'idle' | 'loading' | 'loaded' | 'error'>(props.eager ? 'loading' : 'idle')\n    const naturalWidth = ref<number>()\n    const naturalHeight = ref<number>()\n\n    const normalisedSrc = computed<srcObject>(() => {\n      return props.src && typeof props.src === 'object'\n        ? {\n          src: props.src.src,\n          srcset: props.srcset || props.src.srcset,\n          lazySrc: props.lazySrc || props.src.lazySrc,\n          aspect: Number(props.aspectRatio || props.src.aspect),\n        } : {\n          src: props.src,\n          srcset: props.srcset,\n          lazySrc: props.lazySrc,\n          aspect: Number(props.aspectRatio || 0),\n        }\n    })\n    const aspectRatio = computed(() => {\n      return normalisedSrc.value.aspect || naturalWidth.value! / naturalHeight.value! || 0\n    })\n\n    watch(() => props.src, () => {\n      init(state.value !== 'idle')\n    })\n    // TODO: getSrc when window width changes\n\n    onBeforeMount(() => init())\n\n    function init (isIntersecting?: boolean) {\n      if (props.eager && isIntersecting) return\n      if (\n        SUPPORTS_INTERSECTION &&\n        !isIntersecting &&\n        !props.eager\n      ) return\n\n      state.value = 'loading'\n\n      if (normalisedSrc.value.lazySrc) {\n        const lazyImg = new Image()\n        lazyImg.src = normalisedSrc.value.lazySrc\n        pollForSize(lazyImg, null)\n      }\n\n      if (!normalisedSrc.value.src) return\n\n      nextTick(() => {\n        emit('loadstart', image.value?.currentSrc || normalisedSrc.value.src)\n\n        if (image.value?.complete) {\n          if (!image.value.naturalWidth) {\n            onError()\n          }\n\n          if (state.value === 'error') return\n\n          if (!aspectRatio.value) pollForSize(image.value, null)\n          onLoad()\n        } else {\n          if (!aspectRatio.value) pollForSize(image.value!)\n          getSrc()\n        }\n      })\n    }\n\n    function onLoad () {\n      getSrc()\n      state.value = 'loaded'\n      emit('load', image.value?.currentSrc || normalisedSrc.value.src)\n    }\n\n    function onError () {\n      state.value = 'error'\n      emit('error', image.value?.currentSrc || normalisedSrc.value.src)\n    }\n\n    function getSrc () {\n      const img = image.value\n      if (img) currentSrc.value = img.currentSrc || img.src\n    }\n\n    function pollForSize (img: HTMLImageElement, timeout: number | null = 100) {\n      const poll = () => {\n        const { naturalHeight: imgHeight, naturalWidth: imgWidth } = img\n\n        if (imgHeight || imgWidth) {\n          naturalWidth.value = imgWidth\n          naturalHeight.value = imgHeight\n        } else if (!img.complete && state.value === 'loading' && timeout != null) {\n          setTimeout(poll, timeout)\n        } else if (img.currentSrc.endsWith('.svg') || img.currentSrc.startsWith('data:image/svg+xml')) {\n          naturalWidth.value = 1\n          naturalHeight.value = 1\n        }\n      }\n\n      poll()\n    }\n\n    const containClasses = computed(() => ({\n      'v-img__img--cover': props.cover,\n      'v-img__img--contain': !props.cover,\n    }))\n\n    const __image = computed(() => {\n      if (!normalisedSrc.value.src || state.value === 'idle') return\n\n      const img = h('img', {\n        class: ['v-img__img', containClasses.value],\n        src: normalisedSrc.value.src,\n        srcset: normalisedSrc.value.srcset,\n        sizes: props.sizes,\n        ref: image,\n        onLoad,\n        onError,\n      })\n\n      const sources = slots.sources?.()\n\n      return (\n        <MaybeTransition transition={ props.transition } appear>\n          {\n            withDirectives(\n              sources\n                ? <picture class=\"v-img__picture\">{ sources }{ img }</picture>\n                : img,\n              [[vShow, state.value === 'loaded']]\n            )\n          }\n        </MaybeTransition>\n      )\n    })\n\n    const __preloadImage = computed(() => (\n      <MaybeTransition transition={ props.transition }>\n        { normalisedSrc.value.lazySrc && state.value !== 'loaded' && (\n          <img\n            class={['v-img__img', 'v-img__img--preload', containClasses.value]}\n            src={ normalisedSrc.value.lazySrc }\n            alt=\"\"\n          />\n        )}\n      </MaybeTransition>\n    ))\n\n    const __placeholder = computed(() => {\n      if (!slots.placeholder) return\n\n      return (\n        <MaybeTransition transition={ props.transition } appear>\n          { (state.value === 'loading' || (state.value === 'error' && !slots.error)) &&\n          <div class=\"v-img__placeholder\">{ slots.placeholder() }</div>\n          }\n        </MaybeTransition>\n      )\n    })\n\n    const __error = computed(() => {\n      if (!slots.error) return\n\n      return (\n        <MaybeTransition transition={ props.transition } appear>\n          { state.value === 'error' &&\n            <div class=\"v-img__error\">{ slots.error() }</div>\n          }\n        </MaybeTransition>\n      )\n    })\n\n    const __gradient = computed(() => {\n      if (!props.gradient) return\n\n      return <div class=\"v-img__gradient\" style={{ backgroundImage: `linear-gradient(${props.gradient})` }} />\n    })\n\n    const isBooted = ref(false)\n    {\n      const stop = watch(aspectRatio, val => {\n        if (val) {\n          // Doesn't work with nextTick, idk why\n          requestAnimationFrame(() => {\n            requestAnimationFrame(() => {\n              isBooted.value = true\n            })\n          })\n          stop()\n        }\n      })\n    }\n\n    useRender(() => (\n      <VResponsive\n        class={[\n          'v-img',\n          { 'v-img--booting': !isBooted.value },\n        ]}\n        style={{ width: convertToUnit(props.width === 'auto' ? naturalWidth.value : props.width) }}\n        aspectRatio={ aspectRatio.value }\n        aria-label={ props.alt }\n        role={ props.alt ? 'img' : undefined }\n        v-intersect={[{\n          handler: init,\n          options: props.options,\n        }, null, ['once']]}\n        v-slots={{\n          additional: () => [__image.value, __preloadImage.value, __gradient.value, __placeholder.value, __error.value],\n          default: slots.default,\n        }}\n      />\n    ))\n\n    return {\n      currentSrc,\n      image,\n      state,\n      naturalWidth,\n      naturalHeight,\n    }\n  },\n})\n\nexport type VImg = InstanceType<typeof VImg>\n"],"mappings":";AAAA,oB,CAEA;;SACSA,W,oCAET;;OACOC,S,8CAEP;;SACSC,mB,EAAqBC,e,4CAE9B;;AACA,SACEC,QADF,EAEEC,CAFF,EAGEC,QAHF,EAIEC,aAJF,EAKEC,GALF,EAMEC,KANF,EAOEC,KAPF,EAQEC,cARF,QASO,KATP;SAWEC,a,EACAC,e,EACAC,qB,EACAC,S,gCAGF;;AAWA,OAAO,MAAMC,IAAI,GAAGH,eAAe,CAAC;EAClCI,IAAI,EAAE,MAD4B;EAGlCC,UAAU,EAAE;IAAEjB;EAAF,CAHsB;EAKlCkB,KAAK,EAAE;IACLC,WAAW,EAAE,CAACC,MAAD,EAASC,MAAT,CADR;IAELC,GAAG,EAAEF,MAFA;IAGLG,KAAK,EAAEC,OAHF;IAILC,KAAK,EAAED,OAJF;IAKLE,QAAQ,EAAEN,MALL;IAMLO,OAAO,EAAEP,MANJ;IAOLQ,OAAO,EAAE;MACPC,IAAI,EAAEC,MADC;MAEP;MACA;MACAC,OAAO,EAAE,OAAO;QACdC,IAAI,EAAEC,SADQ;QAEdC,UAAU,EAAED,SAFE;QAGdE,SAAS,EAAEF;MAHG,CAAP;IAJF,CAPJ;IAiBLG,KAAK,EAAEhB,MAjBF;IAkBLiB,GAAG,EAAE;MACHR,IAAI,EAAE,CAACT,MAAD,EAASU,MAAT,CADH;MAEHC,OAAO,EAAE;IAFN,CAlBA;IAsBLO,MAAM,EAAElB,MAtBH;IAuBLmB,KAAK,EAAE,CAACnB,MAAD,EAASC,MAAT,CAvBF;IAyBL,GAAGpB,mBAAmB;EAzBjB,CAL2B;EAiClCuC,KAAK,EAAE,CAAC,WAAD,EAAc,MAAd,EAAsB,OAAtB,CAjC2B;;EAmClCC,KAAK,CAAEvB,KAAF,QAA0B;IAAA,IAAjB;MAAEwB,IAAF;MAAQC;IAAR,CAAiB;IAC7B,MAAMC,UAAU,GAAGrC,GAAG,CAAC,EAAD,CAAtB,CAD6B,CACF;;IAC3B,MAAMsC,KAAK,GAAGtC,GAAG,EAAjB;IACA,MAAMuC,KAAK,GAAGvC,GAAG,CAA0CW,KAAK,CAACO,KAAN,GAAc,SAAd,GAA0B,MAApE,CAAjB;IACA,MAAMsB,YAAY,GAAGxC,GAAG,EAAxB;IACA,MAAMyC,aAAa,GAAGzC,GAAG,EAAzB;IAEA,MAAM0C,aAAa,GAAG9C,QAAQ,CAAY,MAAM;MAC9C,OAAOe,KAAK,CAACmB,GAAN,IAAa,OAAOnB,KAAK,CAACmB,GAAb,KAAqB,QAAlC,GACH;QACAA,GAAG,EAAEnB,KAAK,CAACmB,GAAN,CAAUA,GADf;QAEAC,MAAM,EAAEpB,KAAK,CAACoB,MAAN,IAAgBpB,KAAK,CAACmB,GAAN,CAAUC,MAFlC;QAGAX,OAAO,EAAET,KAAK,CAACS,OAAN,IAAiBT,KAAK,CAACmB,GAAN,CAAUV,OAHpC;QAIAuB,MAAM,EAAE7B,MAAM,CAACH,KAAK,CAACC,WAAN,IAAqBD,KAAK,CAACmB,GAAN,CAAUa,MAAhC;MAJd,CADG,GAMD;QACFb,GAAG,EAAEnB,KAAK,CAACmB,GADT;QAEFC,MAAM,EAAEpB,KAAK,CAACoB,MAFZ;QAGFX,OAAO,EAAET,KAAK,CAACS,OAHb;QAIFuB,MAAM,EAAE7B,MAAM,CAACH,KAAK,CAACC,WAAN,IAAqB,CAAtB;MAJZ,CANN;IAYD,CAb6B,CAA9B;IAcA,MAAMA,WAAW,GAAGhB,QAAQ,CAAC,MAAM;MACjC,OAAO8C,aAAa,CAACE,KAAd,CAAoBD,MAApB,IAA8BH,YAAY,CAACI,KAAb,GAAsBH,aAAa,CAACG,KAAlE,IAA4E,CAAnF;IACD,CAF2B,CAA5B;IAIA1C,KAAK,CAAC,MAAMS,KAAK,CAACmB,GAAb,EAAkB,MAAM;MAC3Be,IAAI,CAACN,KAAK,CAACK,KAAN,KAAgB,MAAjB,CAAJ;IACD,CAFI,CAAL,CAzB6B,CA4B7B;;IAEA7C,aAAa,CAAC,MAAM8C,IAAI,EAAX,CAAb;;IAEA,SAASA,IAAT,CAAeC,cAAf,EAAyC;MACvC,IAAInC,KAAK,CAACO,KAAN,IAAe4B,cAAnB,EAAmC;MACnC,IACExC,qBAAqB,IACrB,CAACwC,cADD,IAEA,CAACnC,KAAK,CAACO,KAHT,EAIE;MAEFqB,KAAK,CAACK,KAAN,GAAc,SAAd;;MAEA,IAAIF,aAAa,CAACE,KAAd,CAAoBxB,OAAxB,EAAiC;QAC/B,MAAM2B,OAAO,GAAG,IAAIC,KAAJ,EAAhB;QACAD,OAAO,CAACjB,GAAR,GAAcY,aAAa,CAACE,KAAd,CAAoBxB,OAAlC;QACA6B,WAAW,CAACF,OAAD,EAAU,IAAV,CAAX;MACD;;MAED,IAAI,CAACL,aAAa,CAACE,KAAd,CAAoBd,GAAzB,EAA8B;MAE9BhC,QAAQ,CAAC,MAAM;QAAA;;QACbqC,IAAI,CAAC,WAAD,EAAc,iBAAAG,KAAK,CAACM,KAAN,kCAAaP,UAAb,KAA2BK,aAAa,CAACE,KAAd,CAAoBd,GAA7D,CAAJ;;QAEA,qBAAIQ,KAAK,CAACM,KAAV,aAAI,cAAaM,QAAjB,EAA2B;UACzB,IAAI,CAACZ,KAAK,CAACM,KAAN,CAAYJ,YAAjB,EAA+B;YAC7BW,OAAO;UACR;;UAED,IAAIZ,KAAK,CAACK,KAAN,KAAgB,OAApB,EAA6B;UAE7B,IAAI,CAAChC,WAAW,CAACgC,KAAjB,EAAwBK,WAAW,CAACX,KAAK,CAACM,KAAP,EAAc,IAAd,CAAX;UACxBQ,MAAM;QACP,CATD,MASO;UACL,IAAI,CAACxC,WAAW,CAACgC,KAAjB,EAAwBK,WAAW,CAACX,KAAK,CAACM,KAAP,CAAX;UACxBS,MAAM;QACP;MACF,CAhBO,CAAR;IAiBD;;IAED,SAASD,MAAT,GAAmB;MAAA;;MACjBC,MAAM;MACNd,KAAK,CAACK,KAAN,GAAc,QAAd;MACAT,IAAI,CAAC,MAAD,EAAS,kBAAAG,KAAK,CAACM,KAAN,mCAAaP,UAAb,KAA2BK,aAAa,CAACE,KAAd,CAAoBd,GAAxD,CAAJ;IACD;;IAED,SAASqB,OAAT,GAAoB;MAAA;;MAClBZ,KAAK,CAACK,KAAN,GAAc,OAAd;MACAT,IAAI,CAAC,OAAD,EAAU,kBAAAG,KAAK,CAACM,KAAN,mCAAaP,UAAb,KAA2BK,aAAa,CAACE,KAAd,CAAoBd,GAAzD,CAAJ;IACD;;IAED,SAASuB,MAAT,GAAmB;MACjB,MAAMC,GAAG,GAAGhB,KAAK,CAACM,KAAlB;MACA,IAAIU,GAAJ,EAASjB,UAAU,CAACO,KAAX,GAAmBU,GAAG,CAACjB,UAAJ,IAAkBiB,GAAG,CAACxB,GAAzC;IACV;;IAED,SAASmB,WAAT,CAAsBK,GAAtB,EAA2E;MAAA,IAA9BC,OAA8B,uEAAL,GAAK;;MACzE,MAAMC,IAAI,GAAG,MAAM;QACjB,MAAM;UAAEf,aAAa,EAAEgB,SAAjB;UAA4BjB,YAAY,EAAEkB;QAA1C,IAAuDJ,GAA7D;;QAEA,IAAIG,SAAS,IAAIC,QAAjB,EAA2B;UACzBlB,YAAY,CAACI,KAAb,GAAqBc,QAArB;UACAjB,aAAa,CAACG,KAAd,GAAsBa,SAAtB;QACD,CAHD,MAGO,IAAI,CAACH,GAAG,CAACJ,QAAL,IAAiBX,KAAK,CAACK,KAAN,KAAgB,SAAjC,IAA8CW,OAAO,IAAI,IAA7D,EAAmE;UACxEI,UAAU,CAACH,IAAD,EAAOD,OAAP,CAAV;QACD,CAFM,MAEA,IAAID,GAAG,CAACjB,UAAJ,CAAeuB,QAAf,CAAwB,MAAxB,KAAmCN,GAAG,CAACjB,UAAJ,CAAewB,UAAf,CAA0B,oBAA1B,CAAvC,EAAwF;UAC7FrB,YAAY,CAACI,KAAb,GAAqB,CAArB;UACAH,aAAa,CAACG,KAAd,GAAsB,CAAtB;QACD;MACF,CAZD;;MAcAY,IAAI;IACL;;IAED,MAAMM,cAAc,GAAGlE,QAAQ,CAAC,OAAO;MACrC,qBAAqBe,KAAK,CAACK,KADU;MAErC,uBAAuB,CAACL,KAAK,CAACK;IAFO,CAAP,CAAD,CAA/B;;IAKA,MAAM+C,OAAO,GAAGnE,QAAQ,CAAC,MAAM;MAAA;;MAC7B,IAAI,CAAC8C,aAAa,CAACE,KAAd,CAAoBd,GAArB,IAA4BS,KAAK,CAACK,KAAN,KAAgB,MAAhD,EAAwD;MAExD,MAAMU,GAAG,GAAGzD,CAAC,CAAC,KAAD,EAAQ;QACnBmE,KAAK,EAAE,CAAC,YAAD,EAAeF,cAAc,CAAClB,KAA9B,CADY;QAEnBd,GAAG,EAAEY,aAAa,CAACE,KAAd,CAAoBd,GAFN;QAGnBC,MAAM,EAAEW,aAAa,CAACE,KAAd,CAAoBb,MAHT;QAInBF,KAAK,EAAElB,KAAK,CAACkB,KAJM;QAKnB7B,GAAG,EAAEsC,KALc;QAMnBc,MANmB;QAOnBD;MAPmB,CAAR,CAAb;MAUA,MAAMc,OAAO,qBAAG7B,KAAK,CAAC6B,OAAT,qBAAG,oBAAA7B,KAAK,CAArB;MAEA;QAAA,cACgCzB,KAAK,CAACuD,UADtC;QAAA;MAAA;QAAA,gBAGM/D,cAAc,CACZ8D,OAAO;UAAA,SACY;QADZ,IAC+BA,OAD/B,EAC0CX,GAD1C,KAEHA,GAHQ,EAIZ,CAAC,CAACrD,KAAD,EAAQsC,KAAK,CAACK,KAAN,KAAgB,QAAxB,CAAD,CAJY,CAHpB;MAAA;IAYD,CA3BuB,CAAxB;;IA6BA,MAAMuB,cAAc,GAAGvE,QAAQ,CAAC;MAAA,cACAe,KAAK,CAACuD;IADN;MAAA,gBAE1BxB,aAAa,CAACE,KAAd,CAAoBxB,OAApB,IAA+BmB,KAAK,CAACK,KAAN,KAAgB,QAA/C;QAAA,SAES,CAAC,YAAD,EAAe,qBAAf,EAAsCkB,cAAc,CAAClB,KAArD,CAFT;QAAA,OAGQF,aAAa,CAACE,KAAd,CAAoBxB,OAH5B;QAAA,OAIM;MAJN,QAF0B;IAAA,EAAD,CAA/B;;IAYA,MAAMgD,aAAa,GAAGxE,QAAQ,CAAC,MAAM;MACnC,IAAI,CAACwC,KAAK,CAACiC,WAAX,EAAwB;MAExB;QAAA,cACgC1D,KAAK,CAACuD,UADtC;QAAA;MAAA;QAAA,gBAEM,CAAC3B,KAAK,CAACK,KAAN,KAAgB,SAAhB,IAA8BL,KAAK,CAACK,KAAN,KAAgB,OAAhB,IAA2B,CAACR,KAAK,CAACkC,KAAjE;UAAA,SACS;QADT,IACgClC,KAAK,CAACiC,WAAN,EADhC,EAFN;MAAA;IAOD,CAV6B,CAA9B;;IAYA,MAAME,OAAO,GAAG3E,QAAQ,CAAC,MAAM;MAC7B,IAAI,CAACwC,KAAK,CAACkC,KAAX,EAAkB;MAElB;QAAA,cACgC3D,KAAK,CAACuD,UADtC;QAAA;MAAA;QAAA,gBAEM3B,KAAK,CAACK,KAAN,KAAgB,OAAhB;UAAA,SACW;QADX,IAC4BR,KAAK,CAACkC,KAAN,EAD5B,EAFN;MAAA;IAOD,CAVuB,CAAxB;;IAYA,MAAME,UAAU,GAAG5E,QAAQ,CAAC,MAAM;MAChC,IAAI,CAACe,KAAK,CAACQ,QAAX,EAAqB;MAErB;QAAA,SAAkB,iBAAlB;QAAA,SAA2C;UAAEsD,eAAe,EAAG,mBAAkB9D,KAAK,CAACQ,QAAS;QAArD;MAA3C;IACD,CAJ0B,CAA3B;;IAMA,MAAMuD,QAAQ,GAAG1E,GAAG,CAAC,KAAD,CAApB;IACA;MACE,MAAM2E,IAAI,GAAGzE,KAAK,CAACU,WAAD,EAAcgE,GAAG,IAAI;QACrC,IAAIA,GAAJ,EAAS;UACP;UACAC,qBAAqB,CAAC,MAAM;YAC1BA,qBAAqB,CAAC,MAAM;cAC1BH,QAAQ,CAAC9B,KAAT,GAAiB,IAAjB;YACD,CAFoB,CAArB;UAGD,CAJoB,CAArB;UAKA+B,IAAI;QACL;MACF,CAViB,CAAlB;IAWD;IAEDpE,SAAS,CAAC;MAAA,SAEC,CACL,OADK,EAEL;QAAE,kBAAkB,CAACmE,QAAQ,CAAC9B;MAA9B,CAFK,CAFD;MAAA,SAMC;QAAEZ,KAAK,EAAE5B,aAAa,CAACO,KAAK,CAACqB,KAAN,KAAgB,MAAhB,GAAyBQ,YAAY,CAACI,KAAtC,GAA8CjC,KAAK,CAACqB,KAArD;MAAtB,CAND;MAAA,eAOQpB,WAAW,CAACgC,KAPpB;MAAA,cAQOjC,KAAK,CAACI,GARb;MAAA,QASCJ,KAAK,CAACI,GAAN,GAAY,KAAZ,GAAoBW;IATrB,GAcG;MACPoD,UAAU,EAAE,MAAM,CAACf,OAAO,CAACnB,KAAT,EAAgBuB,cAAc,CAACvB,KAA/B,EAAsC4B,UAAU,CAAC5B,KAAjD,EAAwDwB,aAAa,CAACxB,KAAtE,EAA6E2B,OAAO,CAAC3B,KAArF,CADX;MAEPpB,OAAO,EAAEY,KAAK,CAACZ;IAFR,CAdH,qCAUQ;MACZuD,OAAO,EAAElC,IADG;MAEZxB,OAAO,EAAEV,KAAK,CAACU;IAFH,CAVR,EAaH,IAbG;MAAA;IAAA,IAAD,CAAT;IAqBA,OAAO;MACLgB,UADK;MAELC,KAFK;MAGLC,KAHK;MAILC,YAJK;MAKLC;IALK,CAAP;EAOD;;AAjQiC,CAAD,CAA5B"}
+{"version":3,"file":"VImg.mjs","names":["VResponsive","intersect","makeTransitionProps","MaybeTransition","computed","h","nextTick","onBeforeMount","ref","vShow","watch","withDirectives","convertToUnit","defineComponent","SUPPORTS_INTERSECTION","useRender","VImg","name","directives","props","aspectRatio","String","Number","alt","cover","Boolean","eager","gradient","lazySrc","options","type","Object","default","root","undefined","rootMargin","threshold","sizes","src","srcset","width","emits","setup","emit","slots","currentSrc","image","state","naturalWidth","naturalHeight","normalisedSrc","aspect","value","init","isIntersecting","lazyImg","Image","pollForSize","complete","onError","onLoad","getSrc","img","timeout","poll","imgHeight","imgWidth","setTimeout","endsWith","startsWith","containClasses","__image","class","sources","transition","__preloadImage","__placeholder","placeholder","error","__error","__gradient","backgroundImage","isBooted","stop","val","requestAnimationFrame","additional","handler"],"sources":["../../../src/components/VImg/VImg.tsx"],"sourcesContent":["import './VImg.sass'\n\n// Components\nimport { VResponsive } from '@/components/VResponsive'\n\n// Directives\nimport intersect from '@/directives/intersect'\n\n// Composables\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\n\n// Utilities\nimport {\n  computed,\n  h,\n  nextTick,\n  onBeforeMount,\n  ref,\n  vShow,\n  watch,\n  withDirectives,\n} from 'vue'\nimport {\n  convertToUnit,\n  defineComponent,\n  SUPPORTS_INTERSECTION,\n  useRender,\n} from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\n// not intended for public use, this is passed in by vuetify-loader\nexport interface srcObject {\n  src?: string\n  srcset?: string\n  lazySrc?: string\n  aspect: number\n}\n\nexport const VImg = defineComponent({\n  name: 'VImg',\n\n  directives: { intersect },\n\n  props: {\n    aspectRatio: [String, Number],\n    alt: String,\n    cover: Boolean,\n    eager: Boolean,\n    gradient: String,\n    lazySrc: String,\n    options: {\n      type: Object as PropType<IntersectionObserverInit>,\n      // For more information on types, navigate to:\n      // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\n      default: () => ({\n        root: undefined,\n        rootMargin: undefined,\n        threshold: undefined,\n      }),\n    },\n    sizes: String,\n    src: {\n      type: [String, Object] as PropType<string | srcObject>,\n      default: '',\n    },\n    srcset: String,\n    width: [String, Number],\n\n    ...makeTransitionProps(),\n  },\n\n  emits: ['loadstart', 'load', 'error'],\n\n  setup (props, { emit, slots }) {\n    const currentSrc = ref('') // Set from srcset\n    const image = ref<HTMLImageElement>()\n    const state = ref<'idle' | 'loading' | 'loaded' | 'error'>(props.eager ? 'loading' : 'idle')\n    const naturalWidth = ref<number>()\n    const naturalHeight = ref<number>()\n\n    const normalisedSrc = computed<srcObject>(() => {\n      return props.src && typeof props.src === 'object'\n        ? {\n          src: props.src.src,\n          srcset: props.srcset || props.src.srcset,\n          lazySrc: props.lazySrc || props.src.lazySrc,\n          aspect: Number(props.aspectRatio || props.src.aspect),\n        } : {\n          src: props.src,\n          srcset: props.srcset,\n          lazySrc: props.lazySrc,\n          aspect: Number(props.aspectRatio || 0),\n        }\n    })\n    const aspectRatio = computed(() => {\n      return normalisedSrc.value.aspect || naturalWidth.value! / naturalHeight.value! || 0\n    })\n\n    watch(() => props.src, () => {\n      init(state.value !== 'idle')\n    })\n    // TODO: getSrc when window width changes\n\n    onBeforeMount(() => init())\n\n    function init (isIntersecting?: boolean) {\n      if (props.eager && isIntersecting) return\n      if (\n        SUPPORTS_INTERSECTION &&\n        !isIntersecting &&\n        !props.eager\n      ) return\n\n      state.value = 'loading'\n\n      if (normalisedSrc.value.lazySrc) {\n        const lazyImg = new Image()\n        lazyImg.src = normalisedSrc.value.lazySrc\n        pollForSize(lazyImg, null)\n      }\n\n      if (!normalisedSrc.value.src) return\n\n      nextTick(() => {\n        emit('loadstart', image.value?.currentSrc || normalisedSrc.value.src)\n\n        if (image.value?.complete) {\n          if (!image.value.naturalWidth) {\n            onError()\n          }\n\n          if (state.value === 'error') return\n\n          if (!aspectRatio.value) pollForSize(image.value, null)\n          onLoad()\n        } else {\n          if (!aspectRatio.value) pollForSize(image.value!)\n          getSrc()\n        }\n      })\n    }\n\n    function onLoad () {\n      getSrc()\n      state.value = 'loaded'\n      emit('load', image.value?.currentSrc || normalisedSrc.value.src)\n    }\n\n    function onError () {\n      state.value = 'error'\n      emit('error', image.value?.currentSrc || normalisedSrc.value.src)\n    }\n\n    function getSrc () {\n      const img = image.value\n      if (img) currentSrc.value = img.currentSrc || img.src\n    }\n\n    function pollForSize (img: HTMLImageElement, timeout: number | null = 100) {\n      const poll = () => {\n        const { naturalHeight: imgHeight, naturalWidth: imgWidth } = img\n\n        if (imgHeight || imgWidth) {\n          naturalWidth.value = imgWidth\n          naturalHeight.value = imgHeight\n        } else if (!img.complete && state.value === 'loading' && timeout != null) {\n          setTimeout(poll, timeout)\n        } else if (img.currentSrc.endsWith('.svg') || img.currentSrc.startsWith('data:image/svg+xml')) {\n          naturalWidth.value = 1\n          naturalHeight.value = 1\n        }\n      }\n\n      poll()\n    }\n\n    const containClasses = computed(() => ({\n      'v-img__img--cover': props.cover,\n      'v-img__img--contain': !props.cover,\n    }))\n\n    const __image = computed(() => {\n      if (!normalisedSrc.value.src || state.value === 'idle') return\n\n      const img = h('img', {\n        class: ['v-img__img', containClasses.value],\n        src: normalisedSrc.value.src,\n        srcset: normalisedSrc.value.srcset,\n        alt: '',\n        sizes: props.sizes,\n        ref: image,\n        onLoad,\n        onError,\n      })\n\n      const sources = slots.sources?.()\n\n      return (\n        <MaybeTransition transition={ props.transition } appear>\n          {\n            withDirectives(\n              sources\n                ? <picture class=\"v-img__picture\">{ sources }{ img }</picture>\n                : img,\n              [[vShow, state.value === 'loaded']]\n            )\n          }\n        </MaybeTransition>\n      )\n    })\n\n    const __preloadImage = computed(() => (\n      <MaybeTransition transition={ props.transition }>\n        { normalisedSrc.value.lazySrc && state.value !== 'loaded' && (\n          <img\n            class={['v-img__img', 'v-img__img--preload', containClasses.value]}\n            src={ normalisedSrc.value.lazySrc }\n            alt=\"\"\n          />\n        )}\n      </MaybeTransition>\n    ))\n\n    const __placeholder = computed(() => {\n      if (!slots.placeholder) return\n\n      return (\n        <MaybeTransition transition={ props.transition } appear>\n          { (state.value === 'loading' || (state.value === 'error' && !slots.error)) &&\n          <div class=\"v-img__placeholder\">{ slots.placeholder() }</div>\n          }\n        </MaybeTransition>\n      )\n    })\n\n    const __error = computed(() => {\n      if (!slots.error) return\n\n      return (\n        <MaybeTransition transition={ props.transition } appear>\n          { state.value === 'error' &&\n            <div class=\"v-img__error\">{ slots.error() }</div>\n          }\n        </MaybeTransition>\n      )\n    })\n\n    const __gradient = computed(() => {\n      if (!props.gradient) return\n\n      return <div class=\"v-img__gradient\" style={{ backgroundImage: `linear-gradient(${props.gradient})` }} />\n    })\n\n    const isBooted = ref(false)\n    {\n      const stop = watch(aspectRatio, val => {\n        if (val) {\n          // Doesn't work with nextTick, idk why\n          requestAnimationFrame(() => {\n            requestAnimationFrame(() => {\n              isBooted.value = true\n            })\n          })\n          stop()\n        }\n      })\n    }\n\n    useRender(() => (\n      <VResponsive\n        class={[\n          'v-img',\n          { 'v-img--booting': !isBooted.value },\n        ]}\n        style={{ width: convertToUnit(props.width === 'auto' ? naturalWidth.value : props.width) }}\n        aspectRatio={ aspectRatio.value }\n        aria-label={ props.alt }\n        role={ props.alt ? 'img' : undefined }\n        v-intersect={[{\n          handler: init,\n          options: props.options,\n        }, null, ['once']]}\n        v-slots={{\n          additional: () => [__image.value, __preloadImage.value, __gradient.value, __placeholder.value, __error.value],\n          default: slots.default,\n        }}\n      />\n    ))\n\n    return {\n      currentSrc,\n      image,\n      state,\n      naturalWidth,\n      naturalHeight,\n    }\n  },\n})\n\nexport type VImg = InstanceType<typeof VImg>\n"],"mappings":"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"}

package/lib/components/VInput/VInput.css

@@ -3,6 +3,7 @@
   flex: 1 1 auto;
   font-size: 1rem;
   font-weight: 400;
+  line-height: 1.5;
 }
 .v-input--disabled {
   pointer-events: none;
@@ -54,7 +55,6 @@
   grid-area: messages;
   letter-spacing: 0.0333333333em;
   line-height: normal;
-  margin-bottom: 16px;
   min-height: 22px;
   padding-top: 6px;
   overflow: hidden;
@@ -108,5 +108,6 @@
 }
 
 .v-input__control {
+  display: flex;
   grid-area: control;
 }

package/lib/components/VInput/VInput.sass

@@ -6,6 +6,7 @@
   flex: 1 1 auto
   font-size: $input-font-size
   font-weight: $input-font-weight
+  line-height: 1.5
 
   &--disabled
     pointer-events: none
@@ -45,7 +46,6 @@
   grid-area: messages
   letter-spacing: $input-details-letter-spacing
   line-height: $input-details-line-height
-  margin-bottom: $input-details-margin-bottom
   min-height: $input-details-min-height
   padding-top: $input-details-padding-above
   overflow: hidden
@@ -83,4 +83,5 @@
   grid-area: append
 
 .v-input__control
+  display: flex
   grid-area: control

package/lib/components/VInput/_variables.scss

@@ -13,7 +13,6 @@ $input-details-font-size: .75rem !default;
 $input-details-font-weight: 400 !default;
 $input-details-letter-spacing: .0333333333em !default;
 $input-details-line-height: normal !default;
-$input-details-margin-bottom: 16px !default;
 $input-details-min-height: 22px !default;
 $input-details-padding-above: 6px !default;
 $input-details-transition: 150ms settings.$standard-easing !default;

package/lib/components/VLayout/VLayout.css

@@ -1,9 +1,7 @@
 .v-layout {
   --v-scrollbar-offset: 0px;
-  position: relative;
   display: flex;
   flex: 1 1 auto;
-  overflow: hidden;
 }
 .v-layout--full-height {
   --v-scrollbar-offset: inherit;

package/lib/components/VLayout/VLayout.sass

@@ -1,9 +1,7 @@
 .v-layout
   --v-scrollbar-offset: 0px
-  position: relative
   display: flex
   flex: 1 1 auto
-  overflow: hidden
 
   &--full-height
     --v-scrollbar-offset: inherit

package/lib/components/VList/VList.css

@@ -22,6 +22,9 @@
   padding-inline-start: 8px;
   padding-inline-end: 8px;
 }
+.v-navigation-drawer--rail:not(.v-navigation-drawer--is-hovering) .v-list .v-avatar {
+  --v-avatar-height: 24px;
+}
 .v-list--rounded {
   border-radius: 4px;
 }
@@ -44,6 +47,7 @@
 .v-list-subheader {
   align-items: center;
   background: inherit;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   display: flex;
   font-size: 0.875rem;
   font-weight: 400;
@@ -53,7 +57,6 @@
   transition: 0.2s min-height cubic-bezier(0.4, 0, 0.2, 1);
 }
 .v-list-subheader__text {
-  opacity: var(--v-medium-emphasis-opacity);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/lib/components/VList/VList.sass

@@ -20,6 +20,10 @@
     padding-inline-start: $list-nav-padding
     padding-inline-end: $list-nav-padding
 
+  .v-navigation-drawer--rail:not(.v-navigation-drawer--is-hovering) &
+    .v-avatar
+      --v-avatar-height: 24px
+
   &--rounded
     @include tools.rounded($list-rounded-border-radius)
 
@@ -42,6 +46,7 @@
 
   align-items: center
   background: inherit
+  color: $list-subheader-color
   display: flex
   font-size: $list-subheader-font-size
   font-weight: $list-subheader-font-weight
@@ -51,7 +56,6 @@
   transition: $list-subheader-transition
 
   &__text
-    opacity: $list-subheader-text-opacity
     overflow: hidden
     text-overflow: ellipsis
     white-space: nowrap

package/lib/components/VList/VListChildren.mjs

@@ -29,8 +29,25 @@ export const VListChildren = genericComponent()({
           type,
           raw: item
         } = _ref2;
-        if (type === 'divider') return _createVNode(VDivider, itemProps, null);
-        if (type === 'subheader') return _createVNode(VListSubheader, itemProps, slots);
+
+        if (type === 'divider') {
+          var _slots$divider, _slots$divider2;
+
+          return (_slots$divider = (_slots$divider2 = slots.divider) == null ? void 0 : _slots$divider2.call(slots, {
+            props: itemProps
+          })) != null ? _slots$divider : _createVNode(VDivider, itemProps, null);
+        }
+
+        if (type === 'subheader') {
+          var _slots$subheader, _slots$subheader2;
+
+          return (_slots$subheader = (_slots$subheader2 = slots.subheader) == null ? void 0 : _slots$subheader2.call(slots, {
+            props: itemProps
+          })) != null ? _slots$subheader : _createVNode(VListSubheader, itemProps, {
+            default: slots.subheader
+          });
+        }
+
         const slotsWithItem = {
           subtitle: slots.subtitle ? slotProps => {
             var _slots$subtitle;

package/lib/components/VList/VListChildren.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VListChildren.mjs","names":["VDivider","filterListGroupProps","VListGroup","VListItem","VListSubheader","createList","genericComponent","VListChildren","name","props","items","Array","setup","slots","default","map","children","itemProps","type","raw","item","slotsWithItem","subtitle","slotProps","undefined","prepend","append","title","listGroupProps","_1","value","activator","activatorProps","header"],"sources":["../../../src/components/VList/VListChildren.tsx"],"sourcesContent":["// Components\nimport { VDivider } from '../VDivider'\nimport { filterListGroupProps, VListGroup } from './VListGroup'\nimport { VListItem } from './VListItem'\nimport { VListSubheader } from './VListSubheader'\n\n// Utilities\nimport { createList } from './list'\nimport { genericComponent } from '@/util'\n\n// Types\nimport type { InternalListItem } from './VList'\nimport type { ListGroupActivatorSlot } from './VListGroup'\nimport type { ListItemSubtitleSlot, ListItemTitleSlot } from './VListItem'\nimport type { MakeSlots } from '@/util'\nimport type { Prop } from 'vue'\n\nexport const VListChildren = genericComponent<new <T extends InternalListItem>() => {\n  $props: {\n    items?: T[]\n  }\n  $slots: MakeSlots<{\n    default: []\n    header: [ListGroupActivatorSlot]\n    item: [T]\n    title: [ListItemTitleSlot]\n    subtitle: [ListItemSubtitleSlot]\n  }>\n}>()({\n  name: 'VListChildren',\n\n  props: {\n    items: Array as Prop<InternalListItem[]>,\n  },\n\n  setup (props, { slots }) {\n    createList()\n\n    return () => slots.default?.() ?? props.items?.map(({ children, props: itemProps, type, raw: item }) => {\n      if (type === 'divider') return <VDivider {...itemProps} />\n\n      if (type === 'subheader') return <VListSubheader {...itemProps} v-slots={ slots } />\n\n      const slotsWithItem = {\n        subtitle: slots.subtitle ? (slotProps: any) => slots.subtitle?.({ ...slotProps, item }) : undefined,\n        prepend: slots.prepend ? (slotProps: any) => slots.prepend?.({ ...slotProps, item }) : undefined,\n        append: slots.append ? (slotProps: any) => slots.append?.({ ...slotProps, item }) : undefined,\n        default: slots.default ? (slotProps: any) => slots.default?.({ ...slotProps, item }) : undefined,\n        title: slots.title ? (slotProps: any) => slots.title?.({ ...slotProps, item }) : undefined,\n      }\n\n      const [listGroupProps, _1] = filterListGroupProps(itemProps as any)\n\n      return children ? (\n        <VListGroup\n          value={ itemProps?.value }\n          { ...listGroupProps }\n        >\n          {{\n            activator: ({ props: activatorProps }) => slots.header\n              ? slots.header({ ...itemProps, ...activatorProps })\n              : <VListItem { ...itemProps } { ...activatorProps } v-slots={ slotsWithItem } />,\n            default: () => (\n              <VListChildren items={ children } v-slots={ slots } />\n            ),\n          }}\n        </VListGroup>\n      ) : (\n        slots.item ? slots.item(itemProps) : (\n          <VListItem\n            { ...itemProps }\n            v-slots={ slotsWithItem }\n          />\n        )\n      )\n    })\n  },\n})\n"],"mappings":";AAAA;SACSA,Q;SACAC,oB,EAAsBC,U;SACtBC,S;SACAC,c,gCAET;;SACSC,U;SACAC,gB,gCAET;;AAOA,OAAO,MAAMC,aAAa,GAAGD,gBAAgB,GAWxC;EACHE,IAAI,EAAE,eADH;EAGHC,KAAK,EAAE;IACLC,KAAK,EAAEC;EADF,CAHJ;;EAOHC,KAAK,CAAEH,KAAF,QAAoB;IAAA,IAAX;MAAEI;IAAF,CAAW;IACvBR,UAAU;IAEV,OAAO;MAAA;;MAAA,4CAAMQ,KAAK,CAACC,OAAZ,qBAAM,qBAAAD,KAAK,CAAX,6CAA2BJ,KAAK,CAACC,KAAjC,qBAA2B,aAAaK,GAAb,CAAiB,SAAqD;QAAA,IAApD;UAAEC,QAAF;UAAYP,KAAK,EAAEQ,SAAnB;UAA8BC,IAA9B;UAAoCC,GAAG,EAAEC;QAAzC,CAAoD;QACtG,IAAIF,IAAI,KAAK,SAAb,EAAwB,8BAAqBD,SAArB;QAExB,IAAIC,IAAI,KAAK,WAAb,EAA0B,oCAA2BD,SAA3B,EAAgDJ,KAAhD;QAE1B,MAAMQ,aAAa,GAAG;UACpBC,QAAQ,EAAET,KAAK,CAACS,QAAN,GAAkBC,SAAD;YAAA;;YAAA,0BAAoBV,KAAK,CAACS,QAA1B,qBAAoB,qBAAAT,KAAK,EAAY,EAAE,GAAGU,SAAL;cAAgBH;YAAhB,CAAZ,CAAzB;UAAA,CAAjB,GAAgFI,SADtE;UAEpBC,OAAO,EAAEZ,KAAK,CAACY,OAAN,GAAiBF,SAAD;YAAA;;YAAA,yBAAoBV,KAAK,CAACY,OAA1B,qBAAoB,oBAAAZ,KAAK,EAAW,EAAE,GAAGU,SAAL;cAAgBH;YAAhB,CAAX,CAAzB;UAAA,CAAhB,GAA8EI,SAFnE;UAGpBE,MAAM,EAAEb,KAAK,CAACa,MAAN,GAAgBH,SAAD;YAAA;;YAAA,wBAAoBV,KAAK,CAACa,MAA1B,qBAAoB,mBAAAb,KAAK,EAAU,EAAE,GAAGU,SAAL;cAAgBH;YAAhB,CAAV,CAAzB;UAAA,CAAf,GAA4EI,SAHhE;UAIpBV,OAAO,EAAED,KAAK,CAACC,OAAN,GAAiBS,SAAD;YAAA;;YAAA,0BAAoBV,KAAK,CAACC,OAA1B,qBAAoB,qBAAAD,KAAK,EAAW,EAAE,GAAGU,SAAL;cAAgBH;YAAhB,CAAX,CAAzB;UAAA,CAAhB,GAA8EI,SAJnE;UAKpBG,KAAK,EAAEd,KAAK,CAACc,KAAN,GAAeJ,SAAD;YAAA;;YAAA,uBAAoBV,KAAK,CAACc,KAA1B,qBAAoB,kBAAAd,KAAK,EAAS,EAAE,GAAGU,SAAL;cAAgBH;YAAhB,CAAT,CAAzB;UAAA,CAAd,GAA0EI;QAL7D,CAAtB;QAQA,MAAM,CAACI,cAAD,EAAiBC,EAAjB,IAAuB5B,oBAAoB,CAACgB,SAAD,CAAjD;QAEA,OAAOD,QAAQ;UAAA,SAEHC,SAFG,oBAEHA,SAAS,CAAEa;QAFR,GAGNF,cAHM;UAMTG,SAAS,EAAE;YAAA,IAAC;cAAEtB,KAAK,EAAEuB;YAAT,CAAD;YAAA,OAA+BnB,KAAK,CAACoB,MAAN,GACtCpB,KAAK,CAACoB,MAAN,CAAa,EAAE,GAAGhB,SAAL;cAAgB,GAAGe;YAAnB,CAAb,CADsC,uCAEtBf,SAFsB,EAELe,cAFK,GAEsBX,aAFtB,CAA/B;UAAA,CANF;UASTP,OAAO,EAAE;YAAA,SACgBE;UADhB,GACqCH,KADrC;QATA,KAebA,KAAK,CAACO,IAAN,GAAaP,KAAK,CAACO,IAAN,CAAWH,SAAX,CAAb,2BAESA,SAFT,EAGcI,aAHd,CAfF;MAsBD,CArCiC,CAA3B;IAAA,CAAP;EAsCD;;AAhDE,CAXwC,CAAtC"}
+{"version":3,"file":"VListChildren.mjs","names":["VDivider","filterListGroupProps","VListGroup","VListItem","VListSubheader","createList","genericComponent","VListChildren","name","props","items","Array","setup","slots","default","map","children","itemProps","type","raw","item","divider","subheader","slotsWithItem","subtitle","slotProps","undefined","prepend","append","title","listGroupProps","_1","value","activator","activatorProps","header"],"sources":["../../../src/components/VList/VListChildren.tsx"],"sourcesContent":["// Components\nimport { VDivider } from '../VDivider'\nimport { filterListGroupProps, VListGroup } from './VListGroup'\nimport { VListItem } from './VListItem'\nimport { VListSubheader } from './VListSubheader'\n\n// Utilities\nimport { createList } from './list'\nimport { genericComponent } from '@/util'\n\n// Types\nimport type { InternalListItem } from './VList'\nimport type { ListGroupActivatorSlot } from './VListGroup'\nimport type { ListItemSubtitleSlot, ListItemTitleSlot } from './VListItem'\nimport type { MakeSlots } from '@/util'\nimport type { Prop } from 'vue'\n\nexport const VListChildren = genericComponent<new <T extends InternalListItem>() => {\n  $props: {\n    items?: T[]\n  }\n  $slots: MakeSlots<{\n    default: []\n    header: [ListGroupActivatorSlot]\n    item: [T]\n    title: [ListItemTitleSlot]\n    subtitle: [ListItemSubtitleSlot]\n  }>\n}>()({\n  name: 'VListChildren',\n\n  props: {\n    items: Array as Prop<InternalListItem[]>,\n  },\n\n  setup (props, { slots }) {\n    createList()\n\n    return () => slots.default?.() ?? props.items?.map(({ children, props: itemProps, type, raw: item }) => {\n      if (type === 'divider') {\n        return slots.divider?.({ props: itemProps }) ?? (\n          <VDivider { ...itemProps } />\n        )\n      }\n\n      if (type === 'subheader') {\n        return slots.subheader?.({ props: itemProps }) ?? (\n          <VListSubheader\n            { ...itemProps }\n            v-slots={{ default: slots.subheader }}\n          />\n        )\n      }\n\n      const slotsWithItem = {\n        subtitle: slots.subtitle ? (slotProps: any) => slots.subtitle?.({ ...slotProps, item }) : undefined,\n        prepend: slots.prepend ? (slotProps: any) => slots.prepend?.({ ...slotProps, item }) : undefined,\n        append: slots.append ? (slotProps: any) => slots.append?.({ ...slotProps, item }) : undefined,\n        default: slots.default ? (slotProps: any) => slots.default?.({ ...slotProps, item }) : undefined,\n        title: slots.title ? (slotProps: any) => slots.title?.({ ...slotProps, item }) : undefined,\n      }\n\n      const [listGroupProps, _1] = filterListGroupProps(itemProps as any)\n\n      return children ? (\n        <VListGroup\n          value={ itemProps?.value }\n          { ...listGroupProps }\n        >\n          {{\n            activator: ({ props: activatorProps }) => slots.header\n              ? slots.header({ ...itemProps, ...activatorProps })\n              : <VListItem { ...itemProps } { ...activatorProps } v-slots={ slotsWithItem } />,\n            default: () => (\n              <VListChildren items={ children } v-slots={ slots } />\n            ),\n          }}\n        </VListGroup>\n      ) : (\n        slots.item ? slots.item(itemProps) : (\n          <VListItem\n            { ...itemProps }\n            v-slots={ slotsWithItem }\n          />\n        )\n      )\n    })\n  },\n})\n"],"mappings":"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"}

package/lib/components/VList/VListItem.mjs

@@ -32,20 +32,26 @@ export const VListItem = genericComponent()({
     Ripple
   },
   props: {
-    active: Boolean,
-    activeColor: String,
+    active: {
+      type: Boolean,
+      default: undefined
+    },
     activeClass: String,
+    activeColor: String,
     appendAvatar: String,
     appendIcon: IconValue,
     disabled: Boolean,
     lines: String,
+    link: {
+      type: Boolean,
+      default: undefined
+    },
     nav: Boolean,
     prependAvatar: String,
     prependIcon: IconValue,
     subtitle: [String, Number, Boolean],
     title: [String, Number, Boolean],
     value: null,
-    link: Boolean,
     ...makeBorderProps(),
     ...makeDensityProps(),
     ...makeDimensionProps(),
@@ -82,8 +88,10 @@ export const VListItem = genericComponent()({
     const isActive = computed(() => {
       var _link$isExactActive;
 
-      return props.active || ((_link$isExactActive = link.isExactActive) == null ? void 0 : _link$isExactActive.value) || isSelected.value;
+      return props.active !== false && (props.active || ((_link$isExactActive = link.isExactActive) == null ? void 0 : _link$isExactActive.value) || isSelected.value);
     });
+    const isLink = computed(() => props.link !== false && link.isLink.value);
+    const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || props.value != null && !!list));
     const roundedProps = computed(() => props.rounded || props.nav);
     const variantProps = computed(() => {
       var _props$activeColor;
@@ -137,27 +145,26 @@ export const VListItem = genericComponent()({
     useRender(() => {
       var _slots$prepend, _slots$title, _slots$title2, _slots$subtitle, _slots$subtitle2, _slots$default, _slots$append;
 
-      const Tag = link.isLink.value ? 'a' : props.tag;
+      const Tag = isLink.value ? 'a' : props.tag;
       const hasColor = !list || isSelected.value || isActive.value;
       const hasTitle = slots.title || props.title;
       const hasSubtitle = slots.subtitle || props.subtitle;
       const hasAppend = !!(slots.append || props.appendAvatar || props.appendIcon);
       const hasPrepend = !!(slots.prepend || props.prependAvatar || props.prependIcon);
-      const isClickable = !props.disabled && (props.link || link.isClickable.value || props.value != null && !!list);
       list == null ? void 0 : list.updateHasPrepend(hasPrepend);
       return _withDirectives(_createVNode(Tag, {
         "class": ['v-list-item', {
           'v-list-item--active': isActive.value,
           'v-list-item--disabled': props.disabled,
-          'v-list-item--link': isClickable,
+          'v-list-item--link': isClickable.value,
           'v-list-item--nav': props.nav,
           'v-list-item--prepend': !hasPrepend && (list == null ? void 0 : list.hasPrepend.value),
           [`${props.activeClass}`]: isActive.value
         }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, variantClasses.value],
         "style": [hasColor ? colorStyles.value : undefined, dimensionStyles.value],
         "href": link.href.value,
-        "tabindex": isClickable ? 0 : undefined,
-        "onClick": isClickable && (e => {
+        "tabindex": isClickable.value ? 0 : undefined,
+        "onClick": isClickable.value && (e => {
           var _link$navigate;
 
           if (isGroupActivator) return;
@@ -165,7 +172,7 @@ export const VListItem = genericComponent()({
           props.value != null && select(!isSelected.value, e);
         })
       }, {
-        default: () => [genOverlays(isClickable || isActive.value, 'v-list-item'), hasPrepend && _createVNode(VDefaultsProvider, {
+        default: () => [genOverlays(isClickable.value || isActive.value, 'v-list-item'), hasPrepend && _createVNode(VDefaultsProvider, {
           "key": "prepend",
           "defaults": {
             VAvatar: {
@@ -226,7 +233,7 @@ export const VListItem = genericComponent()({
             "key": "append-avatar"
           }, null)])]
         })]
-      }), [[_resolveDirective("ripple"), isClickable]]);
+      }), [[_resolveDirective("ripple"), isClickable.value]]);
     });
     return {};
   }

package/lib/components/VList/VListItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VListItem.mjs","names":["VAvatar","VDefaultsProvider","VIcon","VListItemSubtitle","VListItemTitle","Ripple","genOverlays","makeVariantProps","useVariant","IconValue","makeBorderProps","useBorder","makeDensityProps","useDensity","makeDimensionProps","useDimension","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeRouterProps","useLink","makeTagProps","makeThemeProps","provideTheme","useList","useNestedItem","computed","watch","genericComponent","useRender","VListItem","name","directives","props","active","Boolean","activeColor","String","activeClass","appendAvatar","appendIcon","disabled","lines","nav","prependAvatar","prependIcon","subtitle","Number","title","value","link","variant","setup","attrs","slots","id","href","select","isSelected","isIndeterminate","isGroupActivator","root","parent","list","isActive","isExactActive","roundedProps","rounded","variantProps","color","val","open","immediate","themeClasses","borderClasses","colorClasses","colorStyles","variantClasses","densityClasses","dimensionStyles","elevationClasses","roundedClasses","lineClasses","undefined","slotProps","Tag","isLink","tag","hasColor","hasTitle","hasSubtitle","hasAppend","append","hasPrepend","prepend","isClickable","updateHasPrepend","e","navigate","density","image","icon","VListItemAction","start","default","end"],"sources":["../../../src/components/VList/VListItem.tsx"],"sourcesContent":["// Styles\nimport './VListItem.sass'\n\n// Components\nimport { VAvatar } from '@/components/VAvatar'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\nimport { VListItemSubtitle } from './VListItemSubtitle'\nimport { VListItemTitle } from './VListItemTitle'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Composables\nimport { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\nimport { IconValue } from '@/composables/icons'\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeRouterProps, useLink } from '@/composables/router'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useList } from './list'\nimport { useNestedItem } from '@/composables/nested/nested'\n\n// Utilities\nimport { computed, watch } from 'vue'\nimport { genericComponent, useRender } from '@/util'\n\n// Types\nimport type { MakeSlots } from '@/util'\nimport type { PropType } from 'vue'\n\ntype ListItemSlot = {\n  isActive: boolean\n  activate: (value: boolean) => void\n  isSelected: boolean\n  select: (value: boolean) => void\n}\n\nexport type ListItemTitleSlot = {\n  title?: string\n}\n\nexport type ListItemSubtitleSlot = {\n  subtitle?: string\n}\n\nexport const VListItem = genericComponent<new () => {\n  $slots: MakeSlots<{\n    prepend: [ListItemSlot]\n    append: [ListItemSlot]\n    default: [ListItemSlot]\n    title: [ListItemTitleSlot]\n    subtitle: [ListItemSubtitleSlot]\n  }>\n}>()({\n  name: 'VListItem',\n\n  directives: { Ripple },\n\n  props: {\n    active: Boolean,\n    activeColor: String,\n    activeClass: String,\n    appendAvatar: String,\n    appendIcon: IconValue,\n    disabled: Boolean,\n    lines: String as PropType<'one' | 'two' | 'three'>,\n    nav: Boolean,\n    prependAvatar: String,\n    prependIcon: IconValue,\n    subtitle: [String, Number, Boolean],\n    title: [String, Number, Boolean],\n    value: null,\n    link: Boolean,\n\n    ...makeBorderProps(),\n    ...makeDensityProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makeRoundedProps(),\n    ...makeRouterProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n    ...makeVariantProps({ variant: 'text' } as const),\n  },\n\n  setup (props, { attrs, slots }) {\n    const link = useLink(props, attrs)\n    const id = computed(() => props.value ?? link.href.value)\n    const { select, isSelected, isIndeterminate, isGroupActivator, root, parent } = useNestedItem(id, false)\n    const list = useList()\n    const isActive = computed(() => {\n      return props.active || link.isExactActive?.value || isSelected.value\n    })\n    const roundedProps = computed(() => props.rounded || props.nav)\n    const variantProps = computed(() => ({\n      color: isActive.value ? props.activeColor ?? props.color : props.color,\n      variant: props.variant,\n    }))\n\n    watch(() => link.isExactActive?.value, val => {\n      if (val && parent.value != null) {\n        root.open(parent.value, true)\n      }\n    }, { immediate: true })\n\n    const { themeClasses } = provideTheme(props)\n    const { borderClasses } = useBorder(props)\n    const { colorClasses, colorStyles, variantClasses } = useVariant(variantProps)\n    const { densityClasses } = useDensity(props)\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(roundedProps)\n    const lineClasses = computed(() => props.lines ? `v-list-item--${props.lines}-line` : undefined)\n\n    const slotProps = computed(() => ({\n      isActive: isActive.value,\n      select,\n      isSelected: isSelected.value,\n      isIndeterminate: isIndeterminate.value,\n    }))\n\n    useRender(() => {\n      const Tag = (link.isLink.value) ? 'a' : props.tag\n      const hasColor = !list || isSelected.value || isActive.value\n      const hasTitle = (slots.title || props.title)\n      const hasSubtitle = (slots.subtitle || props.subtitle)\n      const hasAppend = !!(slots.append || props.appendAvatar || props.appendIcon)\n      const hasPrepend = !!(slots.prepend || props.prependAvatar || props.prependIcon)\n      const isClickable = !props.disabled && (props.link || link.isClickable.value || (props.value != null && !!list))\n\n      list?.updateHasPrepend(hasPrepend)\n\n      return (\n        <Tag\n          class={[\n            'v-list-item',\n            {\n              'v-list-item--active': isActive.value,\n              'v-list-item--disabled': props.disabled,\n              'v-list-item--link': isClickable,\n              'v-list-item--nav': props.nav,\n              'v-list-item--prepend': !hasPrepend && list?.hasPrepend.value,\n              [`${props.activeClass}`]: isActive.value,\n            },\n            themeClasses.value,\n            borderClasses.value,\n            hasColor ? colorClasses.value : undefined,\n            densityClasses.value,\n            elevationClasses.value,\n            lineClasses.value,\n            roundedClasses.value,\n            variantClasses.value,\n          ]}\n          style={[\n            hasColor ? colorStyles.value : undefined,\n            dimensionStyles.value,\n          ]}\n          href={ link.href.value }\n          tabindex={ isClickable ? 0 : undefined }\n          onClick={ isClickable && ((e: MouseEvent) => {\n            if (isGroupActivator) return\n\n            link.navigate?.(e)\n            props.value != null && select(!isSelected.value, e)\n          })}\n          v-ripple={ isClickable }\n        >\n          { genOverlays(isClickable || isActive.value, 'v-list-item') }\n\n          { hasPrepend && (\n            <VDefaultsProvider\n              key=\"prepend\"\n              defaults={{\n                VAvatar: {\n                  density: props.density,\n                  image: props.prependAvatar,\n                },\n                VIcon: {\n                  density: props.density,\n                  icon: props.prependIcon,\n                },\n                VListItemAction: {\n                  start: true,\n                },\n              }}\n            >\n              <div class=\"v-list-item__prepend\">\n                { props.prependAvatar && (\n                  <VAvatar key=\"prepend-avatar\" />\n                ) }\n\n                { props.prependIcon && (\n                  <VIcon key=\"prepend-icon\" />\n                ) }\n\n                { slots.prepend?.(slotProps.value) }\n              </div>\n            </VDefaultsProvider>\n          ) }\n\n          <div class=\"v-list-item__content\">\n            { hasTitle && (\n              <VListItemTitle key=\"title\">\n                { slots.title?.({ title: props.title }) ?? props.title}\n              </VListItemTitle>\n            ) }\n\n            { hasSubtitle && (\n              <VListItemSubtitle key=\"subtitle\">\n                { slots.subtitle?.({ subtitle: props.subtitle }) ?? props.subtitle }\n              </VListItemSubtitle>\n            ) }\n\n            { slots.default?.(slotProps.value) }\n          </div>\n\n          { hasAppend && (\n            <VDefaultsProvider\n              key=\"append\"\n              defaults={{\n                VAvatar: {\n                  density: props.density,\n                  image: props.appendAvatar,\n                },\n                VIcon: {\n                  density: props.density,\n                  icon: props.appendIcon,\n                },\n                VListItemAction: {\n                  end: true,\n                },\n              }}\n            >\n              <div class=\"v-list-item__append\">\n                { slots.append?.(slotProps.value) }\n\n                { props.appendIcon && (\n                  <VIcon key=\"append-icon\" />\n                ) }\n\n                { props.appendAvatar && (\n                  <VAvatar key=\"append-avatar\" />\n                ) }\n              </div>\n            </VDefaultsProvider>\n          ) }\n        </Tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VListItem = InstanceType<typeof VListItem>\n"],"mappings":"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"}
+{"version":3,"file":"VListItem.mjs","names":["VAvatar","VDefaultsProvider","VIcon","VListItemSubtitle","VListItemTitle","Ripple","genOverlays","makeVariantProps","useVariant","IconValue","makeBorderProps","useBorder","makeDensityProps","useDensity","makeDimensionProps","useDimension","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeRouterProps","useLink","makeTagProps","makeThemeProps","provideTheme","useList","useNestedItem","computed","watch","genericComponent","useRender","VListItem","name","directives","props","active","type","Boolean","default","undefined","activeClass","String","activeColor","appendAvatar","appendIcon","disabled","lines","link","nav","prependAvatar","prependIcon","subtitle","Number","title","value","variant","setup","attrs","slots","id","href","select","isSelected","isIndeterminate","isGroupActivator","root","parent","list","isActive","isExactActive","isLink","isClickable","roundedProps","rounded","variantProps","color","val","open","immediate","themeClasses","borderClasses","colorClasses","colorStyles","variantClasses","densityClasses","dimensionStyles","elevationClasses","roundedClasses","lineClasses","slotProps","Tag","tag","hasColor","hasTitle","hasSubtitle","hasAppend","append","hasPrepend","prepend","updateHasPrepend","e","navigate","density","image","icon","VListItemAction","start","end"],"sources":["../../../src/components/VList/VListItem.tsx"],"sourcesContent":["// Styles\nimport './VListItem.sass'\n\n// Components\nimport { VAvatar } from '@/components/VAvatar'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\nimport { VListItemSubtitle } from './VListItemSubtitle'\nimport { VListItemTitle } from './VListItemTitle'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Composables\nimport { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\nimport { IconValue } from '@/composables/icons'\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeRouterProps, useLink } from '@/composables/router'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useList } from './list'\nimport { useNestedItem } from '@/composables/nested/nested'\n\n// Utilities\nimport { computed, watch } from 'vue'\nimport { genericComponent, useRender } from '@/util'\n\n// Types\nimport type { MakeSlots } from '@/util'\nimport type { PropType } from 'vue'\n\ntype ListItemSlot = {\n  isActive: boolean\n  activate: (value: boolean) => void\n  isSelected: boolean\n  select: (value: boolean) => void\n}\n\nexport type ListItemTitleSlot = {\n  title?: string\n}\n\nexport type ListItemSubtitleSlot = {\n  subtitle?: string\n}\n\nexport const VListItem = genericComponent<new () => {\n  $slots: MakeSlots<{\n    prepend: [ListItemSlot]\n    append: [ListItemSlot]\n    default: [ListItemSlot]\n    title: [ListItemTitleSlot]\n    subtitle: [ListItemSubtitleSlot]\n  }>\n}>()({\n  name: 'VListItem',\n\n  directives: { Ripple },\n\n  props: {\n    active: {\n      type: Boolean,\n      default: undefined,\n    },\n    activeClass: String,\n    activeColor: String,\n    appendAvatar: String,\n    appendIcon: IconValue,\n    disabled: Boolean,\n    lines: String as PropType<'one' | 'two' | 'three'>,\n    link: {\n      type: Boolean,\n      default: undefined,\n    },\n    nav: Boolean,\n    prependAvatar: String,\n    prependIcon: IconValue,\n    subtitle: [String, Number, Boolean],\n    title: [String, Number, Boolean],\n    value: null,\n\n    ...makeBorderProps(),\n    ...makeDensityProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makeRoundedProps(),\n    ...makeRouterProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n    ...makeVariantProps({ variant: 'text' } as const),\n  },\n\n  setup (props, { attrs, slots }) {\n    const link = useLink(props, attrs)\n    const id = computed(() => props.value ?? link.href.value)\n    const { select, isSelected, isIndeterminate, isGroupActivator, root, parent } = useNestedItem(id, false)\n    const list = useList()\n    const isActive = computed(() =>\n      props.active !== false &&\n      (props.active || link.isExactActive?.value || isSelected.value)\n    )\n    const isLink = computed(() => props.link !== false && link.isLink.value)\n    const isClickable = computed(() =>\n      !props.disabled &&\n      props.link !== false &&\n      (props.link || link.isClickable.value || (props.value != null && !!list))\n    )\n\n    const roundedProps = computed(() => props.rounded || props.nav)\n    const variantProps = computed(() => ({\n      color: isActive.value ? props.activeColor ?? props.color : props.color,\n      variant: props.variant,\n    }))\n\n    watch(() => link.isExactActive?.value, val => {\n      if (val && parent.value != null) {\n        root.open(parent.value, true)\n      }\n    }, { immediate: true })\n\n    const { themeClasses } = provideTheme(props)\n    const { borderClasses } = useBorder(props)\n    const { colorClasses, colorStyles, variantClasses } = useVariant(variantProps)\n    const { densityClasses } = useDensity(props)\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(roundedProps)\n    const lineClasses = computed(() => props.lines ? `v-list-item--${props.lines}-line` : undefined)\n\n    const slotProps = computed(() => ({\n      isActive: isActive.value,\n      select,\n      isSelected: isSelected.value,\n      isIndeterminate: isIndeterminate.value,\n    }))\n\n    useRender(() => {\n      const Tag = isLink.value ? 'a' : props.tag\n      const hasColor = !list || isSelected.value || isActive.value\n      const hasTitle = (slots.title || props.title)\n      const hasSubtitle = (slots.subtitle || props.subtitle)\n      const hasAppend = !!(slots.append || props.appendAvatar || props.appendIcon)\n      const hasPrepend = !!(slots.prepend || props.prependAvatar || props.prependIcon)\n\n      list?.updateHasPrepend(hasPrepend)\n\n      return (\n        <Tag\n          class={[\n            'v-list-item',\n            {\n              'v-list-item--active': isActive.value,\n              'v-list-item--disabled': props.disabled,\n              'v-list-item--link': isClickable.value,\n              'v-list-item--nav': props.nav,\n              'v-list-item--prepend': !hasPrepend && list?.hasPrepend.value,\n              [`${props.activeClass}`]: isActive.value,\n            },\n            themeClasses.value,\n            borderClasses.value,\n            hasColor ? colorClasses.value : undefined,\n            densityClasses.value,\n            elevationClasses.value,\n            lineClasses.value,\n            roundedClasses.value,\n            variantClasses.value,\n          ]}\n          style={[\n            hasColor ? colorStyles.value : undefined,\n            dimensionStyles.value,\n          ]}\n          href={ link.href.value }\n          tabindex={ isClickable.value ? 0 : undefined }\n          onClick={ isClickable.value && ((e: MouseEvent) => {\n            if (isGroupActivator) return\n\n            link.navigate?.(e)\n            props.value != null && select(!isSelected.value, e)\n          })}\n          v-ripple={ isClickable.value }\n        >\n          { genOverlays(isClickable.value || isActive.value, 'v-list-item') }\n\n          { hasPrepend && (\n            <VDefaultsProvider\n              key=\"prepend\"\n              defaults={{\n                VAvatar: {\n                  density: props.density,\n                  image: props.prependAvatar,\n                },\n                VIcon: {\n                  density: props.density,\n                  icon: props.prependIcon,\n                },\n                VListItemAction: {\n                  start: true,\n                },\n              }}\n            >\n              <div class=\"v-list-item__prepend\">\n                { props.prependAvatar && (\n                  <VAvatar key=\"prepend-avatar\" />\n                ) }\n\n                { props.prependIcon && (\n                  <VIcon key=\"prepend-icon\" />\n                ) }\n\n                { slots.prepend?.(slotProps.value) }\n              </div>\n            </VDefaultsProvider>\n          ) }\n\n          <div class=\"v-list-item__content\">\n            { hasTitle && (\n              <VListItemTitle key=\"title\">\n                { slots.title?.({ title: props.title }) ?? props.title}\n              </VListItemTitle>\n            ) }\n\n            { hasSubtitle && (\n              <VListItemSubtitle key=\"subtitle\">\n                { slots.subtitle?.({ subtitle: props.subtitle }) ?? props.subtitle }\n              </VListItemSubtitle>\n            ) }\n\n            { slots.default?.(slotProps.value) }\n          </div>\n\n          { hasAppend && (\n            <VDefaultsProvider\n              key=\"append\"\n              defaults={{\n                VAvatar: {\n                  density: props.density,\n                  image: props.appendAvatar,\n                },\n                VIcon: {\n                  density: props.density,\n                  icon: props.appendIcon,\n                },\n                VListItemAction: {\n                  end: true,\n                },\n              }}\n            >\n              <div class=\"v-list-item__append\">\n                { slots.append?.(slotProps.value) }\n\n                { props.appendIcon && (\n                  <VIcon key=\"append-icon\" />\n                ) }\n\n                { props.appendAvatar && (\n                  <VAvatar key=\"append-avatar\" />\n                ) }\n              </div>\n            </VDefaultsProvider>\n          ) }\n        </Tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VListItem = InstanceType<typeof VListItem>\n"],"mappings":"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"}

package/lib/components/VList/_variables.scss

@@ -20,6 +20,7 @@ $list-nav-padding: 8px !default;
 $list-nav-subheader-font-size: .75rem !default;
 
 // VListSubheader
+$list-subheader-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
 $list-subheader-font-size: .875rem !default;
 $list-subheader-font-weight: 400 !default;
 $list-subheader-inset-margin: 56px !default;

package/lib/components/VMain/VMain.css

@@ -1,14 +1,32 @@
 .v-main {
-  display: flex;
   flex: 1 0 auto;
   max-width: 100%;
   transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  padding-left: var(--v-layout-left);
+  padding-right: var(--v-layout-right);
+  padding-top: var(--v-layout-top);
+  padding-bottom: var(--v-layout-bottom);
 }
-.v-main__wrap {
-  flex: 1 1 auto;
+.v-main__scroller {
   max-width: 100%;
   position: relative;
 }
+.v-main--scrollable {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.v-main--scrollable > .v-main__scroller {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  --v-layout-left: 0px;
+  --v-layout-right: 0px;
+  --v-layout-top: 0px;
+  --v-layout-bottom: 0px;
+}
 @-moz-document url-prefix() {
   @media print {
     .v-main {

package/lib/components/VMain/VMain.mjs

@@ -9,9 +9,12 @@ import { useSsrBoot } from "../../composables/ssrBoot.mjs"; // Utilities
 import { defineComponent, useRender } from "../../util/index.mjs";
 export const VMain = defineComponent({
   name: 'VMain',
-  props: makeTagProps({
-    tag: 'main'
-  }),
+  props: {
+    scrollable: Boolean,
+    ...makeTagProps({
+      tag: 'main'
+    })
+  },
 
   setup(props, _ref) {
     let {
@@ -24,15 +27,17 @@ export const VMain = defineComponent({
       ssrBootStyles
     } = useSsrBoot();
     useRender(() => {
-      var _slots$default;
+      var _slots$default, _slots$default2;
 
       return _createVNode(props.tag, {
-        "class": "v-main",
+        "class": ['v-main', {
+          'v-main--scrollable': props.scrollable
+        }],
         "style": [mainStyles.value, ssrBootStyles.value]
       }, {
-        default: () => [_createVNode("div", {
-          "class": "v-main__wrap"
-        }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)])]
+        default: () => [props.scrollable ? _createVNode("div", {
+          "class": "v-main__scroller"
+        }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]) : (_slots$default2 = slots.default) == null ? void 0 : _slots$default2.call(slots)]
       });
     });
     return {};

package/lib/components/VMain/VMain.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VMain.mjs","names":["makeTagProps","useLayout","useSsrBoot","defineComponent","useRender","VMain","name","props","tag","setup","slots","mainStyles","ssrBootStyles","value","default"],"sources":["../../../src/components/VMain/VMain.tsx"],"sourcesContent":["// Styles\nimport './VMain.sass'\n\n// Composables\nimport { makeTagProps } from '@/composables/tag'\nimport { useLayout } from '@/composables/layout'\nimport { useSsrBoot } from '@/composables/ssrBoot'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\n\nexport const VMain = defineComponent({\n  name: 'VMain',\n\n  props: makeTagProps({ tag: 'main' }),\n\n  setup (props, { slots }) {\n    const { mainStyles } = useLayout()\n    const { ssrBootStyles } = useSsrBoot()\n\n    useRender(() => (\n      <props.tag\n        class=\"v-main\"\n        style={[\n          mainStyles.value,\n          ssrBootStyles.value,\n        ]}\n      >\n        <div class=\"v-main__wrap\">\n          { slots.default?.() }\n        </div>\n      </props.tag>\n    ))\n\n    return {}\n  },\n})\n"],"mappings":";AAAA;AACA,qB,CAEA;;SACSA,Y;SACAC,S;SACAC,U,yCAET;;SACSC,e,EAAiBC,S;AAE1B,OAAO,MAAMC,KAAK,GAAGF,eAAe,CAAC;EACnCG,IAAI,EAAE,OAD6B;EAGnCC,KAAK,EAAEP,YAAY,CAAC;IAAEQ,GAAG,EAAE;EAAP,CAAD,CAHgB;;EAKnCC,KAAK,CAAEF,KAAF,QAAoB;IAAA,IAAX;MAAEG;IAAF,CAAW;IACvB,MAAM;MAAEC;IAAF,IAAiBV,SAAS,EAAhC;IACA,MAAM;MAAEW;IAAF,IAAoBV,UAAU,EAApC;IAEAE,SAAS,CAAC;MAAA;;MAAA;QAAA,SAEA,QAFA;QAAA,SAGC,CACLO,UAAU,CAACE,KADN,EAELD,aAAa,CAACC,KAFT;MAHD;QAAA;UAAA,SAQK;QARL,sBASFH,KAAK,CAACI,OATJ,qBASF,oBAAAJ,KAAK,CATH;MAAA;IAAA,CAAD,CAAT;IAcA,OAAO,EAAP;EACD;;AAxBkC,CAAD,CAA7B"}
+{"version":3,"file":"VMain.mjs","names":["makeTagProps","useLayout","useSsrBoot","defineComponent","useRender","VMain","name","props","scrollable","Boolean","tag","setup","slots","mainStyles","ssrBootStyles","value","default"],"sources":["../../../src/components/VMain/VMain.tsx"],"sourcesContent":["// Styles\nimport './VMain.sass'\n\n// Composables\nimport { makeTagProps } from '@/composables/tag'\nimport { useLayout } from '@/composables/layout'\nimport { useSsrBoot } from '@/composables/ssrBoot'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\n\nexport const VMain = defineComponent({\n  name: 'VMain',\n\n  props: {\n    scrollable: Boolean,\n\n    ...makeTagProps({ tag: 'main' }),\n  },\n\n  setup (props, { slots }) {\n    const { mainStyles } = useLayout()\n    const { ssrBootStyles } = useSsrBoot()\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-main',\n          { 'v-main--scrollable': props.scrollable },\n        ]}\n        style={[\n          mainStyles.value,\n          ssrBootStyles.value,\n        ]}\n      >\n        { props.scrollable\n          ? (\n            <div class=\"v-main__scroller\">\n              { slots.default?.() }\n            </div>\n          )\n          : slots.default?.()\n        }\n      </props.tag>\n    ))\n\n    return {}\n  },\n})\n"],"mappings":";AAAA;AACA,qB,CAEA;;SACSA,Y;SACAC,S;SACAC,U,yCAET;;SACSC,e,EAAiBC,S;AAE1B,OAAO,MAAMC,KAAK,GAAGF,eAAe,CAAC;EACnCG,IAAI,EAAE,OAD6B;EAGnCC,KAAK,EAAE;IACLC,UAAU,EAAEC,OADP;IAGL,GAAGT,YAAY,CAAC;MAAEU,GAAG,EAAE;IAAP,CAAD;EAHV,CAH4B;;EASnCC,KAAK,CAAEJ,KAAF,QAAoB;IAAA,IAAX;MAAEK;IAAF,CAAW;IACvB,MAAM;MAAEC;IAAF,IAAiBZ,SAAS,EAAhC;IACA,MAAM;MAAEa;IAAF,IAAoBZ,UAAU,EAApC;IAEAE,SAAS,CAAC;MAAA;;MAAA;QAAA,SAEC,CACL,QADK,EAEL;UAAE,sBAAsBG,KAAK,CAACC;QAA9B,CAFK,CAFD;QAAA,SAMC,CACLK,UAAU,CAACE,KADN,EAELD,aAAa,CAACC,KAFT;MAND;QAAA,gBAWJR,KAAK,CAACC,UAAN;UAAA,SAEa;QAFb,sBAGMI,KAAK,CAACI,OAHZ,qBAGM,oBAAAJ,KAAK,CAHX,wBAMEA,KAAK,CAACI,OANR,qBAME,qBAAAJ,KAAK,CAjBH;MAAA;IAAA,CAAD,CAAT;IAsBA,OAAO,EAAP;EACD;;AApCkC,CAAD,CAA7B"}

package/lib/components/VMain/VMain.sass

@@ -1,3 +1,4 @@
+@use '../../styles/tools'
 @use './variables' as *
 
 @mixin firefox()
@@ -5,16 +6,30 @@
     @content
 
 .v-main
-  display: flex
   flex: 1 0 auto
   max-width: 100%
   transition: $main-transition
+  padding-left: var(--v-layout-left)
+  padding-right: var(--v-layout-right)
+  padding-top: var(--v-layout-top)
+  padding-bottom: var(--v-layout-bottom)
 
-  &__wrap
-    flex: 1 1 auto
+  &__scroller
     max-width: 100%
     position: relative
 
+  &--scrollable
+    display: flex
+    @include tools.absolute()
+
+    & > .v-main__scroller
+      flex: 1 1 auto
+      overflow-y: auto
+      --v-layout-left: 0px
+      --v-layout-right: 0px
+      --v-layout-top: 0px
+      --v-layout-bottom: 0px
+
   +firefox()
     @media print
       display: block

package/lib/components/VMenu/VMenu.mjs

@@ -6,7 +6,7 @@ import { VDialogTransition } from "../transitions/index.mjs";
 import { VOverlay } from "../VOverlay/index.mjs"; // Composables
 
 import { makeTransitionProps } from "../../composables/transition.mjs";
-import { useForwardRef } from "../../composables/forwardRef.mjs";
+import { forwardRefs } from "../../composables/forwardRefs.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs";
 import { useScopeId } from "../../composables/scopeId.mjs"; // Utilities
 
@@ -96,7 +96,7 @@ export const VMenu = genericComponent()({
       default: slots.default,
       activator: slots.activator
     }));
-    return useForwardRef({
+    return forwardRefs({
       id
     }, overlay);
   }