vuetify 3.8.1 → 3.8.3

package/lib/components/VTabs/VTabs.js

@@ -72,18 +72,18 @@ export const VTabs = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'bgColor'));
+    } = useBackgroundColor(() => props.bgColor);
     const {
       scopeId
     } = useScopeId();
     provideDefaults({
       VTab: {
-        color: toRef(props, 'color'),
-        direction: toRef(props, 'direction'),
-        stacked: toRef(props, 'stacked'),
-        fixed: toRef(props, 'fixedTabs'),
-        sliderColor: toRef(props, 'sliderColor'),
-        hideSlider: toRef(props, 'hideSlider')
+        color: toRef(() => props.color),
+        direction: toRef(() => props.direction),
+        stacked: toRef(() => props.stacked),
+        fixed: toRef(() => props.fixedTabs),
+        sliderColor: toRef(() => props.sliderColor),
+        hideSlider: toRef(() => props.hideSlider)
       }
     });
     useRender(() => {

package/lib/components/VTabs/VTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"VTabs.js","names":["VTab","VTabsWindow","VTabsWindowItem","makeVSlideGroupProps","VSlideGroup","useBackgroundColor","provideDefaults","makeDensityProps","useDensity","useProxiedModel","useScopeId","makeTagProps","computed","toRef","VTabsSymbol","convertToUnit","genericComponent","isObject","propsFactory","useRender","parseItems","items","map","item","text","value","makeVTabsProps","alignTabs","type","String","default","color","fixedTabs","Boolean","Array","stacked","bgColor","grow","height","Number","undefined","hideSlider","sliderColor","mandatory","selectedClass","VTabs","name","props","emits","v","setup","_ref","attrs","slots","model","densityClasses","backgroundColorClasses","backgroundColorStyles","scopeId","direction","fixed","slideGroupProps","filterProps","hasWindow","window","length","_createVNode","_Fragment","_mergeProps","$event","class","style","tab"],"sources":["../../../src/components/VTabs/VTabs.tsx"],"sourcesContent":["// Styles\nimport './VTabs.sass'\n\n// Components\nimport { VTab } from './VTab'\nimport { VTabsWindow } from './VTabsWindow'\nimport { VTabsWindowItem } from './VTabsWindowItem'\nimport { makeVSlideGroupProps, VSlideGroup } from '@/components/VSlideGroup/VSlideGroup'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useScopeId } from '@/composables/scopeId'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { VTabsSymbol } from './shared'\nimport { convertToUnit, genericComponent, isObject, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { GenericProps } from '@/util'\n\nexport type TabItem = string | number | Record<string, any>\n\nexport type VTabsSlot<T> = {\n  item: T\n}\n\nexport type VTabsSlots<T> = {\n  default: never\n  tab: VTabsSlot<T>\n  item: VTabsSlot<T>\n  window: never\n} & {\n  [key: `tab.${string}`]: VTabsSlot<T>\n  [key: `item.${string}`]: VTabsSlot<T>\n}\n\nfunction parseItems (items: readonly TabItem[] | undefined) {\n  if (!items) return []\n\n  return items.map(item => {\n    if (!isObject(item)) return { text: item, value: item }\n\n    return item\n  })\n}\n\nexport const makeVTabsProps = propsFactory({\n  alignTabs: {\n    type: String as PropType<'start' | 'title' | 'center' | 'end'>,\n    default: 'start',\n  },\n  color: String,\n  fixedTabs: Boolean,\n  items: {\n    type: Array as PropType<readonly TabItem[]>,\n    default: () => ([]),\n  },\n  stacked: Boolean,\n  bgColor: String,\n  grow: Boolean,\n  height: {\n    type: [Number, String],\n    default: undefined,\n  },\n  hideSlider: Boolean,\n  sliderColor: String,\n\n  ...makeVSlideGroupProps({\n    mandatory: 'force' as const,\n    selectedClass: 'v-tab-item--selected',\n  }),\n  ...makeDensityProps(),\n  ...makeTagProps(),\n}, 'VTabs')\n\nexport const VTabs = genericComponent<new <T = TabItem>(\n  props: {\n    items?: T[]\n  },\n  slots: VTabsSlots<T>\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VTabs',\n\n  props: makeVTabsProps(),\n\n  emits: {\n    'update:modelValue': (v: unknown) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const model = useProxiedModel(props, 'modelValue')\n    const items = computed(() => parseItems(props.items))\n    const { densityClasses } = useDensity(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor'))\n    const { scopeId } = useScopeId()\n\n    provideDefaults({\n      VTab: {\n        color: toRef(props, 'color'),\n        direction: toRef(props, 'direction'),\n        stacked: toRef(props, 'stacked'),\n        fixed: toRef(props, 'fixedTabs'),\n        sliderColor: toRef(props, 'sliderColor'),\n        hideSlider: toRef(props, 'hideSlider'),\n      },\n    })\n\n    useRender(() => {\n      const slideGroupProps = VSlideGroup.filterProps(props)\n      const hasWindow = !!(slots.window || props.items.length > 0)\n\n      return (\n        <>\n          <VSlideGroup\n            { ...slideGroupProps }\n            v-model={ model.value }\n            class={[\n              'v-tabs',\n              `v-tabs--${props.direction}`,\n              `v-tabs--align-tabs-${props.alignTabs}`,\n              {\n                'v-tabs--fixed-tabs': props.fixedTabs,\n                'v-tabs--grow': props.grow,\n                'v-tabs--stacked': props.stacked,\n              },\n              densityClasses.value,\n              backgroundColorClasses.value,\n              props.class,\n            ]}\n            style={[\n              { '--v-tabs-height': convertToUnit(props.height) },\n              backgroundColorStyles.value,\n              props.style,\n            ]}\n            role=\"tablist\"\n            symbol={ VTabsSymbol }\n            { ...scopeId }\n            { ...attrs }\n          >\n            { slots.default?.() ?? items.value.map(item => (\n              slots.tab?.({ item }) ?? (\n                <VTab\n                  { ...item }\n                  key={ item.text }\n                  value={ item.value }\n                  v-slots={{\n                    default: slots[`tab.${item.value}`] ? () => slots[`tab.${item.value}`]?.({ item }) : undefined,\n                  }}\n                />\n              )\n            ))}\n          </VSlideGroup>\n\n          { hasWindow && (\n            <VTabsWindow\n              v-model={ model.value }\n              key=\"tabs-window\"\n              { ...scopeId }\n            >\n              { items.value.map(item => slots.item?.({ item }) ?? (\n                <VTabsWindowItem\n                  value={ item.value }\n                  v-slots={{\n                    default: () => slots[`item.${item.value}`]?.({ item }),\n                  }}\n                />\n              ))}\n\n              { slots.window?.() }\n            </VTabsWindow>\n          )}\n        </>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VTabs = InstanceType<typeof VTabs>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VTabs.js","names":["VTab","VTabsWindow","VTabsWindowItem","makeVSlideGroupProps","VSlideGroup","useBackgroundColor","provideDefaults","makeDensityProps","useDensity","useProxiedModel","useScopeId","makeTagProps","computed","toRef","VTabsSymbol","convertToUnit","genericComponent","isObject","propsFactory","useRender","parseItems","items","map","item","text","value","makeVTabsProps","alignTabs","type","String","default","color","fixedTabs","Boolean","Array","stacked","bgColor","grow","height","Number","undefined","hideSlider","sliderColor","mandatory","selectedClass","VTabs","name","props","emits","v","setup","_ref","attrs","slots","model","densityClasses","backgroundColorClasses","backgroundColorStyles","scopeId","direction","fixed","slideGroupProps","filterProps","hasWindow","window","length","_createVNode","_Fragment","_mergeProps","$event","class","style","tab"],"sources":["../../../src/components/VTabs/VTabs.tsx"],"sourcesContent":["// Styles\nimport './VTabs.sass'\n\n// Components\nimport { VTab } from './VTab'\nimport { VTabsWindow } from './VTabsWindow'\nimport { VTabsWindowItem } from './VTabsWindowItem'\nimport { makeVSlideGroupProps, VSlideGroup } from '@/components/VSlideGroup/VSlideGroup'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useScopeId } from '@/composables/scopeId'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { VTabsSymbol } from './shared'\nimport { convertToUnit, genericComponent, isObject, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { GenericProps } from '@/util'\n\nexport type TabItem = string | number | Record<string, any>\n\nexport type VTabsSlot<T> = {\n  item: T\n}\n\nexport type VTabsSlots<T> = {\n  default: never\n  tab: VTabsSlot<T>\n  item: VTabsSlot<T>\n  window: never\n} & {\n  [key: `tab.${string}`]: VTabsSlot<T>\n  [key: `item.${string}`]: VTabsSlot<T>\n}\n\nfunction parseItems (items: readonly TabItem[] | undefined) {\n  if (!items) return []\n\n  return items.map(item => {\n    if (!isObject(item)) return { text: item, value: item }\n\n    return item\n  })\n}\n\nexport const makeVTabsProps = propsFactory({\n  alignTabs: {\n    type: String as PropType<'start' | 'title' | 'center' | 'end'>,\n    default: 'start',\n  },\n  color: String,\n  fixedTabs: Boolean,\n  items: {\n    type: Array as PropType<readonly TabItem[]>,\n    default: () => ([]),\n  },\n  stacked: Boolean,\n  bgColor: String,\n  grow: Boolean,\n  height: {\n    type: [Number, String],\n    default: undefined,\n  },\n  hideSlider: Boolean,\n  sliderColor: String,\n\n  ...makeVSlideGroupProps({\n    mandatory: 'force' as const,\n    selectedClass: 'v-tab-item--selected',\n  }),\n  ...makeDensityProps(),\n  ...makeTagProps(),\n}, 'VTabs')\n\nexport const VTabs = genericComponent<new <T = TabItem>(\n  props: {\n    items?: T[]\n  },\n  slots: VTabsSlots<T>\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VTabs',\n\n  props: makeVTabsProps(),\n\n  emits: {\n    'update:modelValue': (v: unknown) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const model = useProxiedModel(props, 'modelValue')\n    const items = computed(() => parseItems(props.items))\n    const { densityClasses } = useDensity(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => props.bgColor)\n    const { scopeId } = useScopeId()\n\n    provideDefaults({\n      VTab: {\n        color: toRef(() => props.color),\n        direction: toRef(() => props.direction),\n        stacked: toRef(() => props.stacked),\n        fixed: toRef(() => props.fixedTabs),\n        sliderColor: toRef(() => props.sliderColor),\n        hideSlider: toRef(() => props.hideSlider),\n      },\n    })\n\n    useRender(() => {\n      const slideGroupProps = VSlideGroup.filterProps(props)\n      const hasWindow = !!(slots.window || props.items.length > 0)\n\n      return (\n        <>\n          <VSlideGroup\n            { ...slideGroupProps }\n            v-model={ model.value }\n            class={[\n              'v-tabs',\n              `v-tabs--${props.direction}`,\n              `v-tabs--align-tabs-${props.alignTabs}`,\n              {\n                'v-tabs--fixed-tabs': props.fixedTabs,\n                'v-tabs--grow': props.grow,\n                'v-tabs--stacked': props.stacked,\n              },\n              densityClasses.value,\n              backgroundColorClasses.value,\n              props.class,\n            ]}\n            style={[\n              { '--v-tabs-height': convertToUnit(props.height) },\n              backgroundColorStyles.value,\n              props.style,\n            ]}\n            role=\"tablist\"\n            symbol={ VTabsSymbol }\n            { ...scopeId }\n            { ...attrs }\n          >\n            { slots.default?.() ?? items.value.map(item => (\n              slots.tab?.({ item }) ?? (\n                <VTab\n                  { ...item }\n                  key={ item.text }\n                  value={ item.value }\n                  v-slots={{\n                    default: slots[`tab.${item.value}`] ? () => slots[`tab.${item.value}`]?.({ item }) : undefined,\n                  }}\n                />\n              )\n            ))}\n          </VSlideGroup>\n\n          { hasWindow && (\n            <VTabsWindow\n              v-model={ model.value }\n              key=\"tabs-window\"\n              { ...scopeId }\n            >\n              { items.value.map(item => slots.item?.({ item }) ?? (\n                <VTabsWindowItem\n                  value={ item.value }\n                  v-slots={{\n                    default: () => slots[`item.${item.value}`]?.({ item }),\n                  }}\n                />\n              ))}\n\n              { slots.window?.() }\n            </VTabsWindow>\n          )}\n        </>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VTabs = InstanceType<typeof VTabs>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,IAAI;AAAA,SACJC,WAAW;AAAA,SACXC,eAAe;AAAA,SACfC,oBAAoB,EAAEC,WAAW,yCAE1C;AAAA,SACSC,kBAAkB;AAAA,SAClBC,eAAe;AAAA,SACfC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,eAAe;AAAA,SACfC,UAAU;AAAA,SACVC,YAAY,oCAErB;AACA,SAASC,QAAQ,EAAEC,KAAK,QAAQ,KAAK;AAAA,SAC5BC,WAAW;AAAA,SACXC,aAAa,EAAEC,gBAAgB,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,SAAS,+BAE3E;AAoBA,SAASC,UAAUA,CAAEC,KAAqC,EAAE;EAC1D,IAAI,CAACA,KAAK,EAAE,OAAO,EAAE;EAErB,OAAOA,KAAK,CAACC,GAAG,CAACC,IAAI,IAAI;IACvB,IAAI,CAACN,QAAQ,CAACM,IAAI,CAAC,EAAE,OAAO;MAAEC,IAAI,EAAED,IAAI;MAAEE,KAAK,EAAEF;IAAK,CAAC;IAEvD,OAAOA,IAAI;EACb,CAAC,CAAC;AACJ;AAEA,OAAO,MAAMG,cAAc,GAAGR,YAAY,CAAC;EACzCS,SAAS,EAAE;IACTC,IAAI,EAAEC,MAAwD;IAC9DC,OAAO,EAAE;EACX,CAAC;EACDC,KAAK,EAAEF,MAAM;EACbG,SAAS,EAAEC,OAAO;EAClBZ,KAAK,EAAE;IACLO,IAAI,EAAEM,KAAqC;IAC3CJ,OAAO,EAAEA,CAAA,KAAO;EAClB,CAAC;EACDK,OAAO,EAAEF,OAAO;EAChBG,OAAO,EAAEP,MAAM;EACfQ,IAAI,EAAEJ,OAAO;EACbK,MAAM,EAAE;IACNV,IAAI,EAAE,CAACW,MAAM,EAAEV,MAAM,CAAC;IACtBC,OAAO,EAAEU;EACX,CAAC;EACDC,UAAU,EAAER,OAAO;EACnBS,WAAW,EAAEb,MAAM;EAEnB,GAAG1B,oBAAoB,CAAC;IACtBwC,SAAS,EAAE,OAAgB;IAC3BC,aAAa,EAAE;EACjB,CAAC,CAAC;EACF,GAAGrC,gBAAgB,CAAC,CAAC;EACrB,GAAGI,YAAY,CAAC;AAClB,CAAC,EAAE,OAAO,CAAC;AAEX,OAAO,MAAMkC,KAAK,GAAG7B,gBAAgB,CAKU,CAAC,CAAC;EAC/C8B,IAAI,EAAE,OAAO;EAEbC,KAAK,EAAErB,cAAc,CAAC,CAAC;EAEvBsB,KAAK,EAAE;IACL,mBAAmB,EAAGC,CAAU,IAAK;EACvC,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAAI,IAAA,EAAoB;IAAA,IAAlB;MAAEC,KAAK;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC5B,MAAMG,KAAK,GAAG7C,eAAe,CAACsC,KAAK,EAAE,YAAY,CAAC;IAClD,MAAM1B,KAAK,GAAGT,QAAQ,CAAC,MAAMQ,UAAU,CAAC2B,KAAK,CAAC1B,KAAK,CAAC,CAAC;IACrD,MAAM;MAAEkC;IAAe,CAAC,GAAG/C,UAAU,CAACuC,KAAK,CAAC;IAC5C,MAAM;MAAES,sBAAsB;MAAEC;IAAsB,CAAC,GAAGpD,kBAAkB,CAAC,MAAM0C,KAAK,CAACX,OAAO,CAAC;IACjG,MAAM;MAAEsB;IAAQ,CAAC,GAAGhD,UAAU,CAAC,CAAC;IAEhCJ,eAAe,CAAC;MACdN,IAAI,EAAE;QACJ+B,KAAK,EAAElB,KAAK,CAAC,MAAMkC,KAAK,CAAChB,KAAK,CAAC;QAC/B4B,SAAS,EAAE9C,KAAK,CAAC,MAAMkC,KAAK,CAACY,SAAS,CAAC;QACvCxB,OAAO,EAAEtB,KAAK,CAAC,MAAMkC,KAAK,CAACZ,OAAO,CAAC;QACnCyB,KAAK,EAAE/C,KAAK,CAAC,MAAMkC,KAAK,CAACf,SAAS,CAAC;QACnCU,WAAW,EAAE7B,KAAK,CAAC,MAAMkC,KAAK,CAACL,WAAW,CAAC;QAC3CD,UAAU,EAAE5B,KAAK,CAAC,MAAMkC,KAAK,CAACN,UAAU;MAC1C;IACF,CAAC,CAAC;IAEFtB,SAAS,CAAC,MAAM;MACd,MAAM0C,eAAe,GAAGzD,WAAW,CAAC0D,WAAW,CAACf,KAAK,CAAC;MACtD,MAAMgB,SAAS,GAAG,CAAC,EAAEV,KAAK,CAACW,MAAM,IAAIjB,KAAK,CAAC1B,KAAK,CAAC4C,MAAM,GAAG,CAAC,CAAC;MAE5D,OAAAC,YAAA,CAAAC,SAAA,SAAAD,YAAA,CAAA9D,WAAA,EAAAgE,WAAA,CAGWP,eAAe;QAAA,cACVP,KAAK,CAAC7B,KAAK;QAAA,uBAAA4C,MAAA,IAAXf,KAAK,CAAC7B,KAAK,GAAA4C,MAAA;QAAA,SACd,CACL,QAAQ,EACR,WAAWtB,KAAK,CAACY,SAAS,EAAE,EAC5B,sBAAsBZ,KAAK,CAACpB,SAAS,EAAE,EACvC;UACE,oBAAoB,EAAEoB,KAAK,CAACf,SAAS;UACrC,cAAc,EAAEe,KAAK,CAACV,IAAI;UAC1B,iBAAiB,EAAEU,KAAK,CAACZ;QAC3B,CAAC,EACDoB,cAAc,CAAC9B,KAAK,EACpB+B,sBAAsB,CAAC/B,KAAK,EAC5BsB,KAAK,CAACuB,KAAK,CACZ;QAAA,SACM,CACL;UAAE,iBAAiB,EAAEvD,aAAa,CAACgC,KAAK,CAACT,MAAM;QAAE,CAAC,EAClDmB,qBAAqB,CAAChC,KAAK,EAC3BsB,KAAK,CAACwB,KAAK,CACZ;QAAA;QAAA,UAEQzD;MAAW,GACf4C,OAAO,EACPN,KAAK;QAAAtB,OAAA,EAAAA,CAAA,MAERuB,KAAK,CAACvB,OAAO,GAAG,CAAC,IAAIT,KAAK,CAACI,KAAK,CAACH,GAAG,CAACC,IAAI,IACzC8B,KAAK,CAACmB,GAAG,GAAG;UAAEjD;QAAK,CAAC,CAAC,IAAA2C,YAAA,CAAAlE,IAAA,EAAAoE,WAAA,CAEZ7C,IAAI;UAAA,OACHA,IAAI,CAACC,IAAI;UAAA,SACPD,IAAI,CAACE;QAAK,IACT;UACPK,OAAO,EAAEuB,KAAK,CAAC,OAAO9B,IAAI,CAACE,KAAK,EAAE,CAAC,GAAG,MAAM4B,KAAK,CAAC,OAAO9B,IAAI,CAACE,KAAK,EAAE,CAAC,GAAG;YAAEF;UAAK,CAAC,CAAC,GAAGiB;QACvF,CAAC,CAGN,CAAC;MAAA,IAGFuB,SAAS,IAAAG,YAAA,CAAAjE,WAAA,EAAAmE,WAAA;QAAA,cAEGd,KAAK,CAAC7B,KAAK;QAAA,uBAAA4C,MAAA,IAAXf,KAAK,CAAC7B,KAAK,GAAA4C,MAAA;QAAA;MAAA,GAEhBX,OAAO;QAAA5B,OAAA,EAAAA,CAAA,MAEVT,KAAK,CAACI,KAAK,CAACH,GAAG,CAACC,IAAI,IAAI8B,KAAK,CAAC9B,IAAI,GAAG;UAAEA;QAAK,CAAC,CAAC,IAAA2C,YAAA,CAAAhE,eAAA;UAAA,SAEpCqB,IAAI,CAACE;QAAK,GACT;UACPK,OAAO,EAAEA,CAAA,KAAMuB,KAAK,CAAC,QAAQ9B,IAAI,CAACE,KAAK,EAAE,CAAC,GAAG;YAAEF;UAAK,CAAC;QACvD,CAAC,CAEJ,CAAC,EAEA8B,KAAK,CAACW,MAAM,GAAG,CAAC;MAAA,EAErB;IAGP,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/components/VTimeline/VTimeline.js

@@ -67,17 +67,17 @@ export const VTimeline = genericComponent()({
     } = useRtl();
     provideDefaults({
       VTimelineDivider: {
-        lineColor: toRef(props, 'lineColor')
+        lineColor: toRef(() => props.lineColor)
       },
       VTimelineItem: {
-        density: toRef(props, 'density'),
-        dotColor: toRef(props, 'dotColor'),
-        fillDot: toRef(props, 'fillDot'),
-        hideOpposite: toRef(props, 'hideOpposite'),
-        iconColor: toRef(props, 'iconColor'),
-        lineColor: toRef(props, 'lineColor'),
-        lineInset: toRef(props, 'lineInset'),
-        size: toRef(props, 'size')
+        density: toRef(() => props.density),
+        dotColor: toRef(() => props.dotColor),
+        fillDot: toRef(() => props.fillDot),
+        hideOpposite: toRef(() => props.hideOpposite),
+        iconColor: toRef(() => props.iconColor),
+        lineColor: toRef(() => props.lineColor),
+        lineInset: toRef(() => props.lineInset),
+        size: toRef(() => props.size)
       }
     });
     const sideClasses = computed(() => {

package/lib/components/VTimeline/VTimeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"VTimeline.js","names":["makeComponentProps","provideDefaults","makeDensityProps","useDensity","useRtl","makeTagProps","makeThemeProps","provideTheme","computed","toRef","convertToUnit","genericComponent","pick","propsFactory","useRender","makeVTimelineItemProps","makeVTimelineProps","align","type","String","default","validator","v","includes","direction","justify","side","lineThickness","Number","lineColor","truncateLine","lineInset","VTimeline","name","props","setup","_ref","slots","themeClasses","densityClasses","rtlClasses","VTimelineDivider","VTimelineItem","density","dotColor","fillDot","hideOpposite","iconColor","size","sideClasses","truncateClasses","classes","_createVNode","tag","value","class","style"],"sources":["../../../src/components/VTimeline/VTimeline.tsx"],"sourcesContent":["// Styles\nimport './VTimeline.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { useRtl } from '@/composables/locale'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { convertToUnit, genericComponent, pick, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { Prop } from 'vue'\nimport { makeVTimelineItemProps } from './VTimelineItem'\n\nexport type TimelineDirection = 'vertical' | 'horizontal'\nexport type TimelineSide = 'start' | 'end' | undefined\nexport type TimelineAlign = 'center' | 'start'\nexport type TimelineTruncateLine = 'start' | 'end' | 'both' | undefined\n\nexport const makeVTimelineProps = propsFactory({\n  align: {\n    type: String,\n    default: 'center',\n    validator: (v: any) => ['center', 'start'].includes(v),\n  } as Prop<TimelineAlign>,\n  direction: {\n    type: String,\n    default: 'vertical',\n    validator: (v: any) => ['vertical', 'horizontal'].includes(v),\n  } as Prop<TimelineDirection>,\n  justify: {\n    type: String,\n    default: 'auto',\n    validator: (v: any) => ['auto', 'center'].includes(v),\n  },\n  side: {\n    type: String,\n    validator: (v: any) => v == null || ['start', 'end'].includes(v),\n  } as Prop<TimelineSide>,\n  lineThickness: {\n    type: [String, Number],\n    default: 2,\n  },\n  lineColor: String,\n  truncateLine: {\n    type: String,\n    validator: (v: any) => ['start', 'end', 'both'].includes(v),\n  } as Prop<TimelineTruncateLine>,\n\n  ...pick(makeVTimelineItemProps({\n    lineInset: 0,\n  }), ['dotColor', 'fillDot', 'hideOpposite', 'iconColor', 'lineInset', 'size']),\n  ...makeComponentProps(),\n  ...makeDensityProps(),\n  ...makeTagProps(),\n  ...makeThemeProps(),\n}, 'VTimeline')\n\nexport const VTimeline = genericComponent()({\n  name: 'VTimeline',\n\n  props: makeVTimelineProps(),\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n    const { rtlClasses } = useRtl()\n\n    provideDefaults({\n      VTimelineDivider: {\n        lineColor: toRef(props, 'lineColor'),\n      },\n      VTimelineItem: {\n        density: toRef(props, 'density'),\n        dotColor: toRef(props, 'dotColor'),\n        fillDot: toRef(props, 'fillDot'),\n        hideOpposite: toRef(props, 'hideOpposite'),\n        iconColor: toRef(props, 'iconColor'),\n        lineColor: toRef(props, 'lineColor'),\n        lineInset: toRef(props, 'lineInset'),\n        size: toRef(props, 'size'),\n      },\n    })\n\n    const sideClasses = computed(() => {\n      const side = props.side ? props.side : props.density !== 'default' ? 'end' : null\n\n      return side && `v-timeline--side-${side}`\n    })\n\n    const truncateClasses = computed(() => {\n      const classes = [\n        'v-timeline--truncate-line-start',\n        'v-timeline--truncate-line-end',\n      ]\n\n      switch (props.truncateLine) {\n        case 'both': return classes\n        case 'start': return classes[0]\n        case 'end': return classes[1]\n        default: return null\n      }\n    })\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-timeline',\n          `v-timeline--${props.direction}`,\n          `v-timeline--align-${props.align}`,\n          `v-timeline--justify-${props.justify}`,\n          truncateClasses.value,\n          {\n            'v-timeline--inset-line': !!props.lineInset,\n          },\n          themeClasses.value,\n          densityClasses.value,\n          sideClasses.value,\n          rtlClasses.value,\n          props.class,\n        ]}\n        style={[\n          {\n            '--v-timeline-line-thickness': convertToUnit(props.lineThickness),\n          },\n          props.style,\n        ]}\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VTimeline = InstanceType<typeof VTimeline>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VTimeline.js","names":["makeComponentProps","provideDefaults","makeDensityProps","useDensity","useRtl","makeTagProps","makeThemeProps","provideTheme","computed","toRef","convertToUnit","genericComponent","pick","propsFactory","useRender","makeVTimelineItemProps","makeVTimelineProps","align","type","String","default","validator","v","includes","direction","justify","side","lineThickness","Number","lineColor","truncateLine","lineInset","VTimeline","name","props","setup","_ref","slots","themeClasses","densityClasses","rtlClasses","VTimelineDivider","VTimelineItem","density","dotColor","fillDot","hideOpposite","iconColor","size","sideClasses","truncateClasses","classes","_createVNode","tag","value","class","style"],"sources":["../../../src/components/VTimeline/VTimeline.tsx"],"sourcesContent":["// Styles\nimport './VTimeline.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { useRtl } from '@/composables/locale'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { convertToUnit, genericComponent, pick, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { Prop } from 'vue'\nimport { makeVTimelineItemProps } from './VTimelineItem'\n\nexport type TimelineDirection = 'vertical' | 'horizontal'\nexport type TimelineSide = 'start' | 'end' | undefined\nexport type TimelineAlign = 'center' | 'start'\nexport type TimelineTruncateLine = 'start' | 'end' | 'both' | undefined\n\nexport const makeVTimelineProps = propsFactory({\n  align: {\n    type: String,\n    default: 'center',\n    validator: (v: any) => ['center', 'start'].includes(v),\n  } as Prop<TimelineAlign>,\n  direction: {\n    type: String,\n    default: 'vertical',\n    validator: (v: any) => ['vertical', 'horizontal'].includes(v),\n  } as Prop<TimelineDirection>,\n  justify: {\n    type: String,\n    default: 'auto',\n    validator: (v: any) => ['auto', 'center'].includes(v),\n  },\n  side: {\n    type: String,\n    validator: (v: any) => v == null || ['start', 'end'].includes(v),\n  } as Prop<TimelineSide>,\n  lineThickness: {\n    type: [String, Number],\n    default: 2,\n  },\n  lineColor: String,\n  truncateLine: {\n    type: String,\n    validator: (v: any) => ['start', 'end', 'both'].includes(v),\n  } as Prop<TimelineTruncateLine>,\n\n  ...pick(makeVTimelineItemProps({\n    lineInset: 0,\n  }), ['dotColor', 'fillDot', 'hideOpposite', 'iconColor', 'lineInset', 'size']),\n  ...makeComponentProps(),\n  ...makeDensityProps(),\n  ...makeTagProps(),\n  ...makeThemeProps(),\n}, 'VTimeline')\n\nexport const VTimeline = genericComponent()({\n  name: 'VTimeline',\n\n  props: makeVTimelineProps(),\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n    const { rtlClasses } = useRtl()\n\n    provideDefaults({\n      VTimelineDivider: {\n        lineColor: toRef(() => props.lineColor),\n      },\n      VTimelineItem: {\n        density: toRef(() => props.density),\n        dotColor: toRef(() => props.dotColor),\n        fillDot: toRef(() => props.fillDot),\n        hideOpposite: toRef(() => props.hideOpposite),\n        iconColor: toRef(() => props.iconColor),\n        lineColor: toRef(() => props.lineColor),\n        lineInset: toRef(() => props.lineInset),\n        size: toRef(() => props.size),\n      },\n    })\n\n    const sideClasses = computed(() => {\n      const side = props.side ? props.side : props.density !== 'default' ? 'end' : null\n\n      return side && `v-timeline--side-${side}`\n    })\n\n    const truncateClasses = computed(() => {\n      const classes = [\n        'v-timeline--truncate-line-start',\n        'v-timeline--truncate-line-end',\n      ]\n\n      switch (props.truncateLine) {\n        case 'both': return classes\n        case 'start': return classes[0]\n        case 'end': return classes[1]\n        default: return null\n      }\n    })\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-timeline',\n          `v-timeline--${props.direction}`,\n          `v-timeline--align-${props.align}`,\n          `v-timeline--justify-${props.justify}`,\n          truncateClasses.value,\n          {\n            'v-timeline--inset-line': !!props.lineInset,\n          },\n          themeClasses.value,\n          densityClasses.value,\n          sideClasses.value,\n          rtlClasses.value,\n          props.class,\n        ]}\n        style={[\n          {\n            '--v-timeline-line-thickness': convertToUnit(props.lineThickness),\n          },\n          props.style,\n        ]}\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VTimeline = InstanceType<typeof VTimeline>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VTimeline/VTimelineDivider.js

@@ -8,7 +8,6 @@ import { makeElevationProps, useElevation } from "../../composables/elevation.js
 import { IconValue } from "../../composables/icons.js";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
 import { makeSizeProps, useSize } from "../../composables/size.js"; // Utilities
-import { toRef } from 'vue';
 import { genericComponent, propsFactory, useRender } from "../../util/index.js";
 export const makeVTimelineDividerProps = propsFactory({
   dotColor: String,
@@ -36,7 +35,7 @@ export const VTimelineDivider = genericComponent()({
     const {
       backgroundColorStyles,
       backgroundColorClasses
-    } = useBackgroundColor(toRef(props, 'dotColor'));
+    } = useBackgroundColor(() => props.dotColor);
     const {
       roundedClasses
     } = useRounded(props, 'v-timeline-divider__dot');
@@ -46,7 +45,7 @@ export const VTimelineDivider = genericComponent()({
     const {
       backgroundColorClasses: lineColorClasses,
       backgroundColorStyles: lineColorStyles
-    } = useBackgroundColor(toRef(props, 'lineColor'));
+    } = useBackgroundColor(() => props.lineColor);
     useRender(() => _createVNode("div", {
       "class": ['v-timeline-divider', {
         'v-timeline-divider--fill-dot': props.fillDot

package/lib/components/VTimeline/VTimelineDivider.js.map

@@ -1 +1 @@
-{"version":3,"file":"VTimelineDivider.js","names":["VDefaultsProvider","VIcon","useBackgroundColor","makeComponentProps","makeElevationProps","useElevation","IconValue","makeRoundedProps","useRounded","makeSizeProps","useSize","toRef","genericComponent","propsFactory","useRender","makeVTimelineDividerProps","dotColor","String","fillDot","Boolean","hideDot","icon","iconColor","lineColor","VTimelineDivider","name","props","setup","_ref","slots","sizeClasses","sizeStyles","backgroundColorStyles","backgroundColorClasses","roundedClasses","elevationClasses","lineColorClasses","lineColorStyles","_createVNode","class","style","value","default","size","color"],"sources":["../../../src/components/VTimeline/VTimelineDivider.tsx"],"sourcesContent":["// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { IconValue } from '@/composables/icons'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeSizeProps, useSize } from '@/composables/size'\n\n// Utilities\nimport { toRef } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVTimelineDividerProps = propsFactory({\n  dotColor: String,\n  fillDot: Boolean,\n  hideDot: Boolean,\n  icon: IconValue,\n  iconColor: String,\n  lineColor: String,\n\n  ...makeComponentProps(),\n  ...makeRoundedProps(),\n  ...makeSizeProps(),\n  ...makeElevationProps(),\n}, 'VTimelineDivider')\n\nexport const VTimelineDivider = genericComponent()({\n  name: 'VTimelineDivider',\n\n  props: makeVTimelineDividerProps(),\n\n  setup (props, { slots }) {\n    const { sizeClasses, sizeStyles } = useSize(props, 'v-timeline-divider__dot')\n    const { backgroundColorStyles, backgroundColorClasses } = useBackgroundColor(toRef(props, 'dotColor'))\n    const { roundedClasses } = useRounded(props, 'v-timeline-divider__dot')\n    const { elevationClasses } = useElevation(props)\n    const {\n      backgroundColorClasses: lineColorClasses,\n      backgroundColorStyles: lineColorStyles,\n    } = useBackgroundColor(toRef(props, 'lineColor'))\n\n    useRender(() => (\n      <div\n        class={[\n          'v-timeline-divider',\n          {\n            'v-timeline-divider--fill-dot': props.fillDot,\n          },\n          props.class,\n        ]}\n        style={ props.style }\n      >\n        <div\n          class={[\n            'v-timeline-divider__before',\n            lineColorClasses.value,\n          ]}\n          style={ lineColorStyles.value }\n        />\n\n        { !props.hideDot && (\n          <div\n            key=\"dot\"\n            class={[\n              'v-timeline-divider__dot',\n              elevationClasses.value,\n              roundedClasses.value,\n              sizeClasses.value,\n            ]}\n            style={ sizeStyles.value }\n          >\n            <div\n              class={[\n                'v-timeline-divider__inner-dot',\n                backgroundColorClasses.value,\n                roundedClasses.value,\n              ]}\n              style={ backgroundColorStyles.value }\n            >\n              { !slots.default ? (\n                <VIcon\n                  key=\"icon\"\n                  color={ props.iconColor }\n                  icon={ props.icon }\n                  size={ props.size }\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"icon-defaults\"\n                  disabled={ !props.icon }\n                  defaults={{\n                    VIcon: {\n                      color: props.iconColor,\n                      icon: props.icon,\n                      size: props.size,\n                    },\n                  }}\n                  v-slots:default={ slots.default }\n                />\n              )}\n            </div>\n          </div>\n        )}\n\n        <div\n          class={[\n            'v-timeline-divider__after',\n            lineColorClasses.value,\n          ]}\n          style={ lineColorStyles.value }\n        />\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VTimelineDivider = InstanceType<typeof VTimelineDivider>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VTimelineDivider.js","names":["VDefaultsProvider","VIcon","useBackgroundColor","makeComponentProps","makeElevationProps","useElevation","IconValue","makeRoundedProps","useRounded","makeSizeProps","useSize","genericComponent","propsFactory","useRender","makeVTimelineDividerProps","dotColor","String","fillDot","Boolean","hideDot","icon","iconColor","lineColor","VTimelineDivider","name","props","setup","_ref","slots","sizeClasses","sizeStyles","backgroundColorStyles","backgroundColorClasses","roundedClasses","elevationClasses","lineColorClasses","lineColorStyles","_createVNode","class","style","value","default","size","color"],"sources":["../../../src/components/VTimeline/VTimelineDivider.tsx"],"sourcesContent":["// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { IconValue } from '@/composables/icons'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeSizeProps, useSize } from '@/composables/size'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVTimelineDividerProps = propsFactory({\n  dotColor: String,\n  fillDot: Boolean,\n  hideDot: Boolean,\n  icon: IconValue,\n  iconColor: String,\n  lineColor: String,\n\n  ...makeComponentProps(),\n  ...makeRoundedProps(),\n  ...makeSizeProps(),\n  ...makeElevationProps(),\n}, 'VTimelineDivider')\n\nexport const VTimelineDivider = genericComponent()({\n  name: 'VTimelineDivider',\n\n  props: makeVTimelineDividerProps(),\n\n  setup (props, { slots }) {\n    const { sizeClasses, sizeStyles } = useSize(props, 'v-timeline-divider__dot')\n    const { backgroundColorStyles, backgroundColorClasses } = useBackgroundColor(() => props.dotColor)\n    const { roundedClasses } = useRounded(props, 'v-timeline-divider__dot')\n    const { elevationClasses } = useElevation(props)\n    const {\n      backgroundColorClasses: lineColorClasses,\n      backgroundColorStyles: lineColorStyles,\n    } = useBackgroundColor(() => props.lineColor)\n\n    useRender(() => (\n      <div\n        class={[\n          'v-timeline-divider',\n          {\n            'v-timeline-divider--fill-dot': props.fillDot,\n          },\n          props.class,\n        ]}\n        style={ props.style }\n      >\n        <div\n          class={[\n            'v-timeline-divider__before',\n            lineColorClasses.value,\n          ]}\n          style={ lineColorStyles.value }\n        />\n\n        { !props.hideDot && (\n          <div\n            key=\"dot\"\n            class={[\n              'v-timeline-divider__dot',\n              elevationClasses.value,\n              roundedClasses.value,\n              sizeClasses.value,\n            ]}\n            style={ sizeStyles.value }\n          >\n            <div\n              class={[\n                'v-timeline-divider__inner-dot',\n                backgroundColorClasses.value,\n                roundedClasses.value,\n              ]}\n              style={ backgroundColorStyles.value }\n            >\n              { !slots.default ? (\n                <VIcon\n                  key=\"icon\"\n                  color={ props.iconColor }\n                  icon={ props.icon }\n                  size={ props.size }\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"icon-defaults\"\n                  disabled={ !props.icon }\n                  defaults={{\n                    VIcon: {\n                      color: props.iconColor,\n                      icon: props.icon,\n                      size: props.size,\n                    },\n                  }}\n                  v-slots:default={ slots.default }\n                />\n              )}\n            </div>\n          </div>\n        )}\n\n        <div\n          class={[\n            'v-timeline-divider__after',\n            lineColorClasses.value,\n          ]}\n          style={ lineColorStyles.value }\n        />\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VTimelineDivider = InstanceType<typeof VTimelineDivider>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VToolbar/VToolbar.js

@@ -16,7 +16,7 @@ import { useRtl } from "../../composables/locale.js";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
 import { makeTagProps } from "../../composables/tag.js";
 import { makeThemeProps, provideTheme } from "../../composables/theme.js"; // Utilities
-import { computed, shallowRef, toRef } from 'vue';
+import { computed, shallowRef } from 'vue';
 import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
 const allowedDensities = [null, 'prominent', 'default', 'comfortable', 'compact'];
 export const makeVToolbarProps = propsFactory({
@@ -60,7 +60,7 @@ export const VToolbar = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+    } = useBackgroundColor(() => props.color);
     const {
       borderClasses
     } = useBorder(props);

package/lib/components/VToolbar/VToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"VToolbar.js","names":["VToolbarTitle","VExpandTransition","VDefaultsProvider","VImg","makeBorderProps","useBorder","useBackgroundColor","makeComponentProps","provideDefaults","makeElevationProps","useElevation","useRtl","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","computed","shallowRef","toRef","convertToUnit","genericComponent","propsFactory","useRender","allowedDensities","makeVToolbarProps","absolute","Boolean","collapse","color","String","density","type","default","validator","v","includes","extended","extensionHeight","Number","flat","floating","height","image","title","tag","VToolbar","name","props","setup","_ref","slots","backgroundColorClasses","backgroundColorStyles","borderClasses","elevationClasses","roundedClasses","themeClasses","rtlClasses","isExtended","extension","contentHeight","parseInt","value","VBtn","variant","hasTitle","hasImage","_createVNode","class","style","cover","src","VTabs","prepend","text","append"],"sources":["../../../src/components/VToolbar/VToolbar.tsx"],"sourcesContent":["// Styles\nimport './VToolbar.sass'\n\n// Components\nimport { VToolbarTitle } from './VToolbarTitle'\nimport { VExpandTransition } from '@/components/transitions'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VImg } from '@/components/VImg'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { useRtl } from '@/composables/locale'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { computed, shallowRef, toRef } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nconst allowedDensities = [null, 'prominent', 'default', 'comfortable', 'compact'] as const\n\nexport type Density = null | 'prominent' | 'default' | 'comfortable' | 'compact'\n\nexport const makeVToolbarProps = propsFactory({\n  absolute: Boolean,\n  collapse: Boolean,\n  color: String,\n  density: {\n    type: String as PropType<Density>,\n    default: 'default',\n    validator: (v: any) => allowedDensities.includes(v),\n  },\n  extended: Boolean,\n  extensionHeight: {\n    type: [Number, String],\n    default: 48,\n  },\n  flat: Boolean,\n  floating: Boolean,\n  height: {\n    type: [Number, String],\n    default: 64,\n  },\n  image: String,\n  title: String,\n\n  ...makeBorderProps(),\n  ...makeComponentProps(),\n  ...makeElevationProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps({ tag: 'header' }),\n  ...makeThemeProps(),\n}, 'VToolbar')\n\nexport type VToolbarSlots = {\n  default: never\n  image: never\n  prepend: never\n  append: never\n  title: never\n  extension: never\n}\n\nexport const VToolbar = genericComponent<VToolbarSlots>()({\n  name: 'VToolbar',\n\n  props: makeVToolbarProps(),\n\n  setup (props, { slots }) {\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { borderClasses } = useBorder(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const { themeClasses } = provideTheme(props)\n    const { rtlClasses } = useRtl()\n\n    const isExtended = shallowRef(!!(props.extended || slots.extension?.()))\n    const contentHeight = computed(() => parseInt((\n      Number(props.height) +\n      (props.density === 'prominent' ? Number(props.height) : 0) -\n      (props.density === 'comfortable' ? 8 : 0) -\n      (props.density === 'compact' ? 16 : 0)\n    ), 10))\n    const extensionHeight = computed(() => isExtended.value\n      ? parseInt((\n        Number(props.extensionHeight) +\n        (props.density === 'prominent' ? Number(props.extensionHeight) : 0) -\n        (props.density === 'comfortable' ? 4 : 0) -\n        (props.density === 'compact' ? 8 : 0)\n      ), 10)\n      : 0\n    )\n\n    provideDefaults({\n      VBtn: {\n        variant: 'text',\n      },\n    })\n\n    useRender(() => {\n      const hasTitle = !!(props.title || slots.title)\n      const hasImage = !!(slots.image || props.image)\n\n      const extension = slots.extension?.()\n      isExtended.value = !!(props.extended || extension)\n\n      return (\n        <props.tag\n          class={[\n            'v-toolbar',\n            {\n              'v-toolbar--absolute': props.absolute,\n              'v-toolbar--collapse': props.collapse,\n              'v-toolbar--flat': props.flat,\n              'v-toolbar--floating': props.floating,\n              [`v-toolbar--density-${props.density}`]: true,\n            },\n            backgroundColorClasses.value,\n            borderClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n            themeClasses.value,\n            rtlClasses.value,\n            props.class,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n            props.style,\n          ]}\n        >\n          { hasImage && (\n            <div key=\"image\" class=\"v-toolbar__image\">\n              { !slots.image ? (\n                <VImg\n                  key=\"image-img\"\n                  cover\n                  src={ props.image }\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"image-defaults\"\n                  disabled={ !props.image }\n                  defaults={{\n                    VImg: {\n                      cover: true,\n                      src: props.image,\n                    },\n                  }}\n                  v-slots:default={ slots.image }\n                />\n              )}\n            </div>\n          )}\n\n          <VDefaultsProvider\n            defaults={{\n              VTabs: {\n                height: convertToUnit(contentHeight.value),\n              },\n            }}\n          >\n            <div\n              class=\"v-toolbar__content\"\n              style={{ height: convertToUnit(contentHeight.value) }}\n            >\n              { slots.prepend && (\n                <div class=\"v-toolbar__prepend\">\n                  { slots.prepend?.() }\n                </div>\n              )}\n\n              { hasTitle && (\n                <VToolbarTitle key=\"title\" text={ props.title }>\n                  {{ text: slots.title }}\n                </VToolbarTitle>\n              )}\n\n              { slots.default?.() }\n\n              { slots.append && (\n                <div class=\"v-toolbar__append\">\n                  { slots.append?.() }\n                </div>\n              )}\n            </div>\n          </VDefaultsProvider>\n\n          <VDefaultsProvider\n            defaults={{\n              VTabs: {\n                height: convertToUnit(extensionHeight.value),\n              },\n            }}\n          >\n            <VExpandTransition>\n              { isExtended.value && (\n                <div\n                  class=\"v-toolbar__extension\"\n                  style={{ height: convertToUnit(extensionHeight.value) }}\n                >\n                  { extension }\n                </div>\n              )}\n            </VExpandTransition>\n          </VDefaultsProvider>\n        </props.tag>\n      )\n    })\n\n    return {\n      contentHeight,\n      extensionHeight,\n    }\n  },\n})\n\nexport type VToolbar = InstanceType<typeof VToolbar>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VToolbar.js","names":["VToolbarTitle","VExpandTransition","VDefaultsProvider","VImg","makeBorderProps","useBorder","useBackgroundColor","makeComponentProps","provideDefaults","makeElevationProps","useElevation","useRtl","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","computed","shallowRef","convertToUnit","genericComponent","propsFactory","useRender","allowedDensities","makeVToolbarProps","absolute","Boolean","collapse","color","String","density","type","default","validator","v","includes","extended","extensionHeight","Number","flat","floating","height","image","title","tag","VToolbar","name","props","setup","_ref","slots","backgroundColorClasses","backgroundColorStyles","borderClasses","elevationClasses","roundedClasses","themeClasses","rtlClasses","isExtended","extension","contentHeight","parseInt","value","VBtn","variant","hasTitle","hasImage","_createVNode","class","style","cover","src","VTabs","prepend","text","append"],"sources":["../../../src/components/VToolbar/VToolbar.tsx"],"sourcesContent":["// Styles\nimport './VToolbar.sass'\n\n// Components\nimport { VToolbarTitle } from './VToolbarTitle'\nimport { VExpandTransition } from '@/components/transitions'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VImg } from '@/components/VImg'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { useRtl } from '@/composables/locale'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { computed, shallowRef } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nconst allowedDensities = [null, 'prominent', 'default', 'comfortable', 'compact'] as const\n\nexport type Density = null | 'prominent' | 'default' | 'comfortable' | 'compact'\n\nexport const makeVToolbarProps = propsFactory({\n  absolute: Boolean,\n  collapse: Boolean,\n  color: String,\n  density: {\n    type: String as PropType<Density>,\n    default: 'default',\n    validator: (v: any) => allowedDensities.includes(v),\n  },\n  extended: Boolean,\n  extensionHeight: {\n    type: [Number, String],\n    default: 48,\n  },\n  flat: Boolean,\n  floating: Boolean,\n  height: {\n    type: [Number, String],\n    default: 64,\n  },\n  image: String,\n  title: String,\n\n  ...makeBorderProps(),\n  ...makeComponentProps(),\n  ...makeElevationProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps({ tag: 'header' }),\n  ...makeThemeProps(),\n}, 'VToolbar')\n\nexport type VToolbarSlots = {\n  default: never\n  image: never\n  prepend: never\n  append: never\n  title: never\n  extension: never\n}\n\nexport const VToolbar = genericComponent<VToolbarSlots>()({\n  name: 'VToolbar',\n\n  props: makeVToolbarProps(),\n\n  setup (props, { slots }) {\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => props.color)\n    const { borderClasses } = useBorder(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const { themeClasses } = provideTheme(props)\n    const { rtlClasses } = useRtl()\n\n    const isExtended = shallowRef(!!(props.extended || slots.extension?.()))\n    const contentHeight = computed(() => parseInt((\n      Number(props.height) +\n      (props.density === 'prominent' ? Number(props.height) : 0) -\n      (props.density === 'comfortable' ? 8 : 0) -\n      (props.density === 'compact' ? 16 : 0)\n    ), 10))\n    const extensionHeight = computed(() => isExtended.value\n      ? parseInt((\n        Number(props.extensionHeight) +\n        (props.density === 'prominent' ? Number(props.extensionHeight) : 0) -\n        (props.density === 'comfortable' ? 4 : 0) -\n        (props.density === 'compact' ? 8 : 0)\n      ), 10)\n      : 0\n    )\n\n    provideDefaults({\n      VBtn: {\n        variant: 'text',\n      },\n    })\n\n    useRender(() => {\n      const hasTitle = !!(props.title || slots.title)\n      const hasImage = !!(slots.image || props.image)\n\n      const extension = slots.extension?.()\n      isExtended.value = !!(props.extended || extension)\n\n      return (\n        <props.tag\n          class={[\n            'v-toolbar',\n            {\n              'v-toolbar--absolute': props.absolute,\n              'v-toolbar--collapse': props.collapse,\n              'v-toolbar--flat': props.flat,\n              'v-toolbar--floating': props.floating,\n              [`v-toolbar--density-${props.density}`]: true,\n            },\n            backgroundColorClasses.value,\n            borderClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n            themeClasses.value,\n            rtlClasses.value,\n            props.class,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n            props.style,\n          ]}\n        >\n          { hasImage && (\n            <div key=\"image\" class=\"v-toolbar__image\">\n              { !slots.image ? (\n                <VImg\n                  key=\"image-img\"\n                  cover\n                  src={ props.image }\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"image-defaults\"\n                  disabled={ !props.image }\n                  defaults={{\n                    VImg: {\n                      cover: true,\n                      src: props.image,\n                    },\n                  }}\n                  v-slots:default={ slots.image }\n                />\n              )}\n            </div>\n          )}\n\n          <VDefaultsProvider\n            defaults={{\n              VTabs: {\n                height: convertToUnit(contentHeight.value),\n              },\n            }}\n          >\n            <div\n              class=\"v-toolbar__content\"\n              style={{ height: convertToUnit(contentHeight.value) }}\n            >\n              { slots.prepend && (\n                <div class=\"v-toolbar__prepend\">\n                  { slots.prepend?.() }\n                </div>\n              )}\n\n              { hasTitle && (\n                <VToolbarTitle key=\"title\" text={ props.title }>\n                  {{ text: slots.title }}\n                </VToolbarTitle>\n              )}\n\n              { slots.default?.() }\n\n              { slots.append && (\n                <div class=\"v-toolbar__append\">\n                  { slots.append?.() }\n                </div>\n              )}\n            </div>\n          </VDefaultsProvider>\n\n          <VDefaultsProvider\n            defaults={{\n              VTabs: {\n                height: convertToUnit(extensionHeight.value),\n              },\n            }}\n          >\n            <VExpandTransition>\n              { isExtended.value && (\n                <div\n                  class=\"v-toolbar__extension\"\n                  style={{ height: convertToUnit(extensionHeight.value) }}\n                >\n                  { extension }\n                </div>\n              )}\n            </VExpandTransition>\n          </VDefaultsProvider>\n        </props.tag>\n      )\n    })\n\n    return {\n      contentHeight,\n      extensionHeight,\n    }\n  },\n})\n\nexport type VToolbar = InstanceType<typeof VToolbar>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VToolbar/VToolbarItems.js

@@ -20,9 +20,9 @@ export const VToolbarItems = genericComponent()({
     } = _ref;
     provideDefaults({
       VBtn: {
-        color: toRef(props, 'color'),
+        color: toRef(() => props.color),
         height: 'inherit',
-        variant: toRef(props, 'variant')
+        variant: toRef(() => props.variant)
       }
     });
     useRender(() => _createVNode("div", {

package/lib/components/VToolbar/VToolbarItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"VToolbarItems.js","names":["makeComponentProps","provideDefaults","makeVariantProps","toRef","genericComponent","propsFactory","useRender","makeVToolbarItemsProps","variant","VToolbarItems","name","props","setup","_ref","slots","VBtn","color","height","_createVNode","class","style","default"],"sources":["../../../src/components/VToolbar/VToolbarItems.tsx"],"sourcesContent":["// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeVariantProps } from '@/composables/variant'\n\n// Utilities\nimport { toRef } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVToolbarItemsProps = propsFactory({\n  ...makeComponentProps(),\n  ...makeVariantProps({ variant: 'text' } as const),\n}, 'VToolbarItems')\n\nexport const VToolbarItems = genericComponent()({\n  name: 'VToolbarItems',\n\n  props: makeVToolbarItemsProps(),\n\n  setup (props, { slots }) {\n    provideDefaults({\n      VBtn: {\n        color: toRef(props, 'color'),\n        height: 'inherit',\n        variant: toRef(props, 'variant'),\n      },\n    })\n\n    useRender(() => (\n      <div\n        class={[\n          'v-toolbar-items',\n          props.class,\n        ]}\n        style={ props.style }\n      >\n        { slots.default?.() }\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VToolbarItems = InstanceType<typeof VToolbarItems>\n"],"mappings":";AAAA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,eAAe;AAAA,SACfC,gBAAgB,wCAEzB;AACA,SAASC,KAAK,QAAQ,KAAK;AAAA,SAClBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAElD,OAAO,MAAMC,sBAAsB,GAAGF,YAAY,CAAC;EACjD,GAAGL,kBAAkB,CAAC,CAAC;EACvB,GAAGE,gBAAgB,CAAC;IAAEM,OAAO,EAAE;EAAO,CAAU;AAClD,CAAC,EAAE,eAAe,CAAC;AAEnB,OAAO,MAAMC,aAAa,GAAGL,gBAAgB,CAAC,CAAC,CAAC;EAC9CM,IAAI,EAAE,eAAe;EAErBC,KAAK,EAAEJ,sBAAsB,CAAC,CAAC;EAE/BK,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrBZ,eAAe,CAAC;MACdc,IAAI,EAAE;QACJC,KAAK,EAAEb,KAAK,CAACQ,KAAK,EAAE,OAAO,CAAC;QAC5BM,MAAM,EAAE,SAAS;QACjBT,OAAO,EAAEL,KAAK,CAACQ,KAAK,EAAE,SAAS;MACjC;IACF,CAAC,CAAC;IAEFL,SAAS,CAAC,MAAAY,YAAA;MAAA,SAEC,CACL,iBAAiB,EACjBP,KAAK,CAACQ,KAAK,CACZ;MAAA,SACOR,KAAK,CAACS;IAAK,IAEjBN,KAAK,CAACO,OAAO,GAAG,CAAC,EAEtB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"VToolbarItems.js","names":["makeComponentProps","provideDefaults","makeVariantProps","toRef","genericComponent","propsFactory","useRender","makeVToolbarItemsProps","variant","VToolbarItems","name","props","setup","_ref","slots","VBtn","color","height","_createVNode","class","style","default"],"sources":["../../../src/components/VToolbar/VToolbarItems.tsx"],"sourcesContent":["// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeVariantProps } from '@/composables/variant'\n\n// Utilities\nimport { toRef } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVToolbarItemsProps = propsFactory({\n  ...makeComponentProps(),\n  ...makeVariantProps({ variant: 'text' } as const),\n}, 'VToolbarItems')\n\nexport const VToolbarItems = genericComponent()({\n  name: 'VToolbarItems',\n\n  props: makeVToolbarItemsProps(),\n\n  setup (props, { slots }) {\n    provideDefaults({\n      VBtn: {\n        color: toRef(() => props.color),\n        height: 'inherit',\n        variant: toRef(() => props.variant),\n      },\n    })\n\n    useRender(() => (\n      <div\n        class={[\n          'v-toolbar-items',\n          props.class,\n        ]}\n        style={ props.style }\n      >\n        { slots.default?.() }\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VToolbarItems = InstanceType<typeof VToolbarItems>\n"],"mappings":";AAAA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,eAAe;AAAA,SACfC,gBAAgB,wCAEzB;AACA,SAASC,KAAK,QAAQ,KAAK;AAAA,SAClBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAElD,OAAO,MAAMC,sBAAsB,GAAGF,YAAY,CAAC;EACjD,GAAGL,kBAAkB,CAAC,CAAC;EACvB,GAAGE,gBAAgB,CAAC;IAAEM,OAAO,EAAE;EAAO,CAAU;AAClD,CAAC,EAAE,eAAe,CAAC;AAEnB,OAAO,MAAMC,aAAa,GAAGL,gBAAgB,CAAC,CAAC,CAAC;EAC9CM,IAAI,EAAE,eAAe;EAErBC,KAAK,EAAEJ,sBAAsB,CAAC,CAAC;EAE/BK,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrBZ,eAAe,CAAC;MACdc,IAAI,EAAE;QACJC,KAAK,EAAEb,KAAK,CAAC,MAAMQ,KAAK,CAACK,KAAK,CAAC;QAC/BC,MAAM,EAAE,SAAS;QACjBT,OAAO,EAAEL,KAAK,CAAC,MAAMQ,KAAK,CAACH,OAAO;MACpC;IACF,CAAC,CAAC;IAEFF,SAAS,CAAC,MAAAY,YAAA;MAAA,SAEC,CACL,iBAAiB,EACjBP,KAAK,CAACQ,KAAK,CACZ;MAAA,SACOR,KAAK,CAACS;IAAK,IAEjBN,KAAK,CAACO,OAAO,GAAG,CAAC,EAEtB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/components/VTooltip/VTooltip.d.ts

@@ -660,7 +660,7 @@ export declare const VTooltip: {
             animateClick: () => void;
             contentEl: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
             globalTop: Readonly<import("vue").Ref<boolean, boolean>>;
-            localTop: import("vue").ComputedRef<boolean>;
+            localTop: Readonly<import("vue").Ref<boolean, boolean>>;
             updateLocation: import("vue").Ref<((e: Event) => void) | undefined, ((e: Event) => void) | undefined>;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             'click:outside': (e: MouseEvent) => true;
@@ -835,7 +835,7 @@ export declare const VTooltip: {
         animateClick: () => void;
         contentEl: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
         globalTop: Readonly<import("vue").Ref<boolean, boolean>>;
-        localTop: import("vue").ComputedRef<boolean>;
+        localTop: Readonly<import("vue").Ref<boolean, boolean>>;
         updateLocation: import("vue").Ref<((e: Event) => void) | undefined, ((e: Event) => void) | undefined>;
     }> & {} & import("vue").ComponentCustomProperties & {}, "offset" | "height" | "width" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "target" | "class" | "theme" | "onAfterEnter" | "onAfterLeave" | "onKeydown" | "$children" | "v-slots" | "v-slot:default" | keyof import("vue").VNodeProps | "onUpdate:modelValue" | "closeDelay" | "openDelay" | "activator" | "contentClass" | "contentProps" | "attach" | "onClick:outside" | ("absolute" | "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "persistent" | "modelValue" | "locationStrategy" | "scrollStrategy" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "scrim" | "_disableGlobalStack") | "v-slot:activator">, `$${any}`> & {
         _allExposed: {
@@ -845,7 +845,7 @@ export declare const VTooltip: {
             animateClick: () => void;
             contentEl: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
             globalTop: Readonly<import("vue").Ref<boolean, boolean>>;
-            localTop: import("vue").ComputedRef<boolean>;
+            localTop: Readonly<import("vue").Ref<boolean, boolean>>;
             updateLocation: import("vue").Ref<((e: Event) => void) | undefined, ((e: Event) => void) | undefined>;
         } | {};
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -1183,7 +1183,7 @@ export declare const VTooltip: {
             animateClick: () => void;
             contentEl: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
             globalTop: Readonly<import("vue").Ref<boolean, boolean>>;
-            localTop: import("vue").ComputedRef<boolean>;
+            localTop: Readonly<import("vue").Ref<boolean, boolean>>;
             updateLocation: import("vue").Ref<((e: Event) => void) | undefined, ((e: Event) => void) | undefined>;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             'click:outside': (e: MouseEvent) => true;
@@ -1358,7 +1358,7 @@ export declare const VTooltip: {
         animateClick: () => void;
         contentEl: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
         globalTop: Readonly<import("vue").Ref<boolean, boolean>>;
-        localTop: import("vue").ComputedRef<boolean>;
+        localTop: Readonly<import("vue").Ref<boolean, boolean>>;
         updateLocation: import("vue").Ref<((e: Event) => void) | undefined, ((e: Event) => void) | undefined>;
     }> & {} & import("vue").ComponentCustomProperties & {}, "offset" | "height" | "width" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "target" | "class" | "theme" | "onAfterEnter" | "onAfterLeave" | "onKeydown" | "$children" | "v-slots" | "v-slot:default" | keyof import("vue").VNodeProps | "onUpdate:modelValue" | "closeDelay" | "openDelay" | "activator" | "contentClass" | "contentProps" | "attach" | "onClick:outside" | ("absolute" | "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "persistent" | "modelValue" | "locationStrategy" | "scrollStrategy" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "scrim" | "_disableGlobalStack") | "v-slot:activator">, `$${any}`> & {
         _allExposed: {
@@ -1368,7 +1368,7 @@ export declare const VTooltip: {
             animateClick: () => void;
             contentEl: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
             globalTop: Readonly<import("vue").Ref<boolean, boolean>>;
-            localTop: import("vue").ComputedRef<boolean>;
+            localTop: Readonly<import("vue").Ref<boolean, boolean>>;
             updateLocation: import("vue").Ref<((e: Event) => void) | undefined, ((e: Event) => void) | undefined>;
         } | {};
     }, {}, {}, {}, {
@@ -1692,7 +1692,7 @@ export declare const VTooltip: {
         animateClick: () => void;
         contentEl: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
         globalTop: Readonly<import("vue").Ref<boolean, boolean>>;
-        localTop: import("vue").ComputedRef<boolean>;
+        localTop: Readonly<import("vue").Ref<boolean, boolean>>;
         updateLocation: import("vue").Ref<((e: Event) => void) | undefined, ((e: Event) => void) | undefined>;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         'click:outside': (e: MouseEvent) => true;
@@ -1867,7 +1867,7 @@ export declare const VTooltip: {
     animateClick: () => void;
     contentEl: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
     globalTop: Readonly<import("vue").Ref<boolean, boolean>>;
-    localTop: import("vue").ComputedRef<boolean>;
+    localTop: Readonly<import("vue").Ref<boolean, boolean>>;
     updateLocation: import("vue").Ref<((e: Event) => void) | undefined, ((e: Event) => void) | undefined>;
 }> & {} & import("vue").ComponentCustomProperties & {}, "offset" | "height" | "width" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "target" | "class" | "theme" | "onAfterEnter" | "onAfterLeave" | "onKeydown" | "$children" | "v-slots" | "v-slot:default" | keyof import("vue").VNodeProps | "onUpdate:modelValue" | "closeDelay" | "openDelay" | "activator" | "contentClass" | "contentProps" | "attach" | "onClick:outside" | ("absolute" | "location" | "origin" | "transition" | "zIndex" | "style" | "eager" | "disabled" | "persistent" | "modelValue" | "locationStrategy" | "scrollStrategy" | "activatorProps" | "openOnClick" | "openOnHover" | "openOnFocus" | "closeOnContentClick" | "closeOnBack" | "contained" | "noClickAnimation" | "scrim" | "_disableGlobalStack") | "v-slot:activator">, `$${any}`> & {
     _allExposed: {
@@ -1877,7 +1877,7 @@ export declare const VTooltip: {
         animateClick: () => void;
         contentEl: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
         globalTop: Readonly<import("vue").Ref<boolean, boolean>>;
-        localTop: import("vue").ComputedRef<boolean>;
+        localTop: Readonly<import("vue").Ref<boolean, boolean>>;
         updateLocation: import("vue").Ref<((e: Event) => void) | undefined, ((e: Event) => void) | undefined>;
     } | {};
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/lib/components/VTooltip/VTooltip.js

@@ -8,7 +8,7 @@ import { makeVOverlayProps } from "../VOverlay/VOverlay.js"; // Composables
 import { forwardRefs } from "../../composables/forwardRefs.js";
 import { useProxiedModel } from "../../composables/proxiedModel.js";
 import { useScopeId } from "../../composables/scopeId.js"; // Utilities
-import { computed, mergeProps, ref, useId } from 'vue';
+import { computed, mergeProps, ref, toRef, useId } from 'vue';
 import { genericComponent, omit, propsFactory, useRender } from "../../util/index.js"; // Types
 export const makeVTooltipProps = propsFactory({
   id: String,
@@ -44,7 +44,7 @@ export const VTooltip = genericComponent()({
       scopeId
     } = useScopeId();
     const uid = useId();
-    const id = computed(() => props.id || `v-tooltip-${uid}`);
+    const id = toRef(() => props.id || `v-tooltip-${uid}`);
     const overlay = ref();
     const location = computed(() => {
       return props.location.split(' ').length > 1 ? props.location : props.location + ' center';
@@ -52,7 +52,7 @@ export const VTooltip = genericComponent()({
     const origin = computed(() => {
       return props.origin === 'auto' || props.origin === 'overlap' || props.origin.split(' ').length > 1 || props.location.split(' ').length > 1 ? props.origin : props.origin + ' center';
     });
-    const transition = computed(() => {
+    const transition = toRef(() => {
       if (props.transition) return props.transition;
       return isActive.value ? 'scale-transition' : 'fade-transition';
     });

package/lib/components/VTooltip/VTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"VTooltip.js","names":["VOverlay","makeVOverlayProps","forwardRefs","useProxiedModel","useScopeId","computed","mergeProps","ref","useId","genericComponent","omit","propsFactory","useRender","makeVTooltipProps","id","String","interactive","Boolean","text","closeOnBack","location","locationStrategy","eager","minWidth","offset","openOnClick","openOnHover","origin","scrim","scrollStrategy","transition","VTooltip","name","props","emits","value","setup","_ref","slots","isActive","scopeId","uid","overlay","split","length","activatorProps","overlayProps","filterProps","_createVNode","_mergeProps","class","style","$event","activator","default","_len","arguments","args","Array","_key"],"sources":["../../../src/components/VTooltip/VTooltip.tsx"],"sourcesContent":["// Styles\nimport './VTooltip.sass'\n\n// Components\nimport { VOverlay } from '@/components/VOverlay'\nimport { makeVOverlayProps } from '@/components/VOverlay/VOverlay'\n\n// Composables\nimport { forwardRefs } from '@/composables/forwardRefs'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useScopeId } from '@/composables/scopeId'\n\n// Utilities\nimport { computed, mergeProps, ref, useId } from 'vue'\nimport { genericComponent, omit, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { StrategyProps } from '@/components/VOverlay/locationStrategies'\nimport type { OverlaySlots } from '@/components/VOverlay/VOverlay'\n\nexport const makeVTooltipProps = propsFactory({\n  id: String,\n  interactive: Boolean,\n  text: String,\n\n  ...omit(makeVOverlayProps({\n    closeOnBack: false,\n    location: 'end' as const,\n    locationStrategy: 'connected' as const,\n    eager: true,\n    minWidth: 0,\n    offset: 10,\n    openOnClick: false,\n    openOnHover: true,\n    origin: 'auto' as const,\n    scrim: false,\n    scrollStrategy: 'reposition' as const,\n    transition: false,\n  }), [\n    'absolute',\n    'persistent',\n  ]),\n}, 'VTooltip')\n\nexport const VTooltip = genericComponent<OverlaySlots>()({\n  name: 'VTooltip',\n\n  props: makeVTooltipProps(),\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const isActive = useProxiedModel(props, 'modelValue')\n    const { scopeId } = useScopeId()\n\n    const uid = useId()\n    const id = computed(() => props.id || `v-tooltip-${uid}`)\n\n    const overlay = ref<VOverlay>()\n\n    const location = computed(() => {\n      return props.location.split(' ').length > 1\n        ? props.location\n        : props.location + ' center' as StrategyProps['location']\n    })\n\n    const origin = computed(() => {\n      return (\n        props.origin === 'auto' ||\n        props.origin === 'overlap' ||\n        props.origin.split(' ').length > 1 ||\n        props.location.split(' ').length > 1\n      ) ? props.origin\n        : props.origin + ' center' as StrategyProps['origin']\n    })\n\n    const transition = computed(() => {\n      if (props.transition) return props.transition\n      return isActive.value ? 'scale-transition' : 'fade-transition'\n    })\n\n    const activatorProps = computed(() =>\n      mergeProps({\n        'aria-describedby': id.value,\n      }, props.activatorProps)\n    )\n\n    useRender(() => {\n      const overlayProps = VOverlay.filterProps(props)\n\n      return (\n        <VOverlay\n          ref={ overlay }\n          class={[\n            'v-tooltip',\n            { 'v-tooltip--interactive': props.interactive },\n            props.class,\n          ]}\n          style={ props.style }\n          id={ id.value }\n          { ...overlayProps }\n          v-model={ isActive.value }\n          transition={ transition.value }\n          absolute\n          location={ location.value }\n          origin={ origin.value }\n          persistent\n          role=\"tooltip\"\n          activatorProps={ activatorProps.value }\n          _disableGlobalStack\n          { ...scopeId }\n        >\n          {{\n            activator: slots.activator,\n            default: (...args) => slots.default?.(...args) ?? props.text,\n          }}\n        </VOverlay>\n      )\n    })\n\n    return forwardRefs({}, overlay)\n  },\n})\n\nexport type VTooltip = InstanceType<typeof VTooltip>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VTooltip.js","names":["VOverlay","makeVOverlayProps","forwardRefs","useProxiedModel","useScopeId","computed","mergeProps","ref","toRef","useId","genericComponent","omit","propsFactory","useRender","makeVTooltipProps","id","String","interactive","Boolean","text","closeOnBack","location","locationStrategy","eager","minWidth","offset","openOnClick","openOnHover","origin","scrim","scrollStrategy","transition","VTooltip","name","props","emits","value","setup","_ref","slots","isActive","scopeId","uid","overlay","split","length","activatorProps","overlayProps","filterProps","_createVNode","_mergeProps","class","style","$event","activator","default","_len","arguments","args","Array","_key"],"sources":["../../../src/components/VTooltip/VTooltip.tsx"],"sourcesContent":["// Styles\nimport './VTooltip.sass'\n\n// Components\nimport { VOverlay } from '@/components/VOverlay'\nimport { makeVOverlayProps } from '@/components/VOverlay/VOverlay'\n\n// Composables\nimport { forwardRefs } from '@/composables/forwardRefs'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useScopeId } from '@/composables/scopeId'\n\n// Utilities\nimport { computed, mergeProps, ref, toRef, useId } from 'vue'\nimport { genericComponent, omit, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { StrategyProps } from '@/components/VOverlay/locationStrategies'\nimport type { OverlaySlots } from '@/components/VOverlay/VOverlay'\n\nexport const makeVTooltipProps = propsFactory({\n  id: String,\n  interactive: Boolean,\n  text: String,\n\n  ...omit(makeVOverlayProps({\n    closeOnBack: false,\n    location: 'end' as const,\n    locationStrategy: 'connected' as const,\n    eager: true,\n    minWidth: 0,\n    offset: 10,\n    openOnClick: false,\n    openOnHover: true,\n    origin: 'auto' as const,\n    scrim: false,\n    scrollStrategy: 'reposition' as const,\n    transition: false,\n  }), [\n    'absolute',\n    'persistent',\n  ]),\n}, 'VTooltip')\n\nexport const VTooltip = genericComponent<OverlaySlots>()({\n  name: 'VTooltip',\n\n  props: makeVTooltipProps(),\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const isActive = useProxiedModel(props, 'modelValue')\n    const { scopeId } = useScopeId()\n\n    const uid = useId()\n    const id = toRef(() => props.id || `v-tooltip-${uid}`)\n\n    const overlay = ref<VOverlay>()\n\n    const location = computed(() => {\n      return props.location.split(' ').length > 1\n        ? props.location\n        : props.location + ' center' as StrategyProps['location']\n    })\n\n    const origin = computed(() => {\n      return (\n        props.origin === 'auto' ||\n        props.origin === 'overlap' ||\n        props.origin.split(' ').length > 1 ||\n        props.location.split(' ').length > 1\n      ) ? props.origin\n        : props.origin + ' center' as StrategyProps['origin']\n    })\n\n    const transition = toRef(() => {\n      if (props.transition) return props.transition\n      return isActive.value ? 'scale-transition' : 'fade-transition'\n    })\n\n    const activatorProps = computed(() =>\n      mergeProps({\n        'aria-describedby': id.value,\n      }, props.activatorProps)\n    )\n\n    useRender(() => {\n      const overlayProps = VOverlay.filterProps(props)\n\n      return (\n        <VOverlay\n          ref={ overlay }\n          class={[\n            'v-tooltip',\n            { 'v-tooltip--interactive': props.interactive },\n            props.class,\n          ]}\n          style={ props.style }\n          id={ id.value }\n          { ...overlayProps }\n          v-model={ isActive.value }\n          transition={ transition.value }\n          absolute\n          location={ location.value }\n          origin={ origin.value }\n          persistent\n          role=\"tooltip\"\n          activatorProps={ activatorProps.value }\n          _disableGlobalStack\n          { ...scopeId }\n        >\n          {{\n            activator: slots.activator,\n            default: (...args) => slots.default?.(...args) ?? props.text,\n          }}\n        </VOverlay>\n      )\n    })\n\n    return forwardRefs({}, overlay)\n  },\n})\n\nexport type VTooltip = InstanceType<typeof VTooltip>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VVirtualScroll/VVirtualScroll.js

@@ -42,7 +42,7 @@ export const VVirtualScroll = genericComponent()({
       paddingTop,
       paddingBottom,
       computedItems
-    } = useVirtual(props, toRef(props, 'items'));
+    } = useVirtual(props, toRef(() => props.items));
     useToggleScope(() => props.renderless, () => {
       function handleListeners() {
         let add = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

package/lib/components/VVirtualScroll/VVirtualScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"VVirtualScroll.js","names":["VVirtualScrollItem","makeComponentProps","makeDimensionProps","useDimension","useToggleScope","makeVirtualProps","useVirtual","onMounted","onScopeDispose","toRef","convertToUnit","genericComponent","getCurrentInstance","getScrollParent","propsFactory","useRender","makeVVirtualScrollProps","items","type","Array","default","renderless","Boolean","VVirtualScroll","name","props","setup","_ref","slots","vm","dimensionStyles","calculateVisibleItems","containerRef","markerRef","handleScroll","handleScrollend","handleItemResize","scrollToIndex","paddingTop","paddingBottom","computedItems","handleListeners","add","arguments","length","undefined","method","value","document","documentElement","passive","vnode","el","children","map","item","_createVNode","key","height","index","slotProps","raw","_Fragment","class","style"],"sources":["../../../src/components/VVirtualScroll/VVirtualScroll.tsx"],"sourcesContent":["// Styles\nimport './VVirtualScroll.sass'\n\n// Components\nimport { VVirtualScrollItem } from './VVirtualScrollItem'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { useToggleScope } from '@/composables/toggleScope'\nimport { makeVirtualProps, useVirtual } from '@/composables/virtual'\n\n// Utilities\nimport { onMounted, onScopeDispose, toRef } from 'vue'\nimport {\n  convertToUnit,\n  genericComponent,\n  getCurrentInstance,\n  getScrollParent,\n  propsFactory,\n  useRender,\n} from '@/util'\n\n// Types\nimport type { PropType, Ref } from 'vue'\nimport type { GenericProps } from '@/util'\n\nexport interface VVirtualScrollSlot<T> {\n  item: T\n  index: number\n}\n\nexport const makeVVirtualScrollProps = propsFactory({\n  items: {\n    type: Array as PropType<readonly unknown[]>,\n    default: () => ([]),\n  },\n  renderless: Boolean,\n\n  ...makeVirtualProps(),\n  ...makeComponentProps(),\n  ...makeDimensionProps(),\n}, 'VVirtualScroll')\n\nexport const VVirtualScroll = genericComponent<new <T, Renderless extends boolean = false>(\n  props: {\n    items?: readonly T[]\n    renderless?: Renderless\n  },\n  slots: {\n    default: VVirtualScrollSlot<T> & (Renderless extends true ? {\n      itemRef: Ref<HTMLElement | undefined>\n    } : {})\n  }\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VVirtualScroll',\n\n  props: makeVVirtualScrollProps(),\n\n  setup (props, { slots }) {\n    const vm = getCurrentInstance('VVirtualScroll')\n    const { dimensionStyles } = useDimension(props)\n    const {\n      calculateVisibleItems,\n      containerRef,\n      markerRef,\n      handleScroll,\n      handleScrollend,\n      handleItemResize,\n      scrollToIndex,\n      paddingTop,\n      paddingBottom,\n      computedItems,\n    } = useVirtual(props, toRef(props, 'items'))\n\n    useToggleScope(() => props.renderless, () => {\n      function handleListeners (add = false) {\n        const method = add ? 'addEventListener' : 'removeEventListener'\n\n        if (containerRef.value === document.documentElement) {\n          document[method]('scroll', handleScroll, { passive: true })\n          document[method]('scrollend', handleScrollend)\n        } else {\n          containerRef.value?.[method]('scroll', handleScroll, { passive: true })\n          containerRef.value?.[method]('scrollend', handleScrollend)\n        }\n      }\n\n      onMounted(() => {\n        containerRef.value = getScrollParent(vm.vnode.el as HTMLElement, true)\n        handleListeners(true)\n      })\n      onScopeDispose(handleListeners)\n    })\n\n    useRender(() => {\n      const children = computedItems.value.map(item => (\n        <VVirtualScrollItem\n          key={ item.key }\n          renderless={ props.renderless }\n          onUpdate:height={ height => handleItemResize(item.index, height) }\n        >\n          { slotProps => slots.default?.({ item: item.raw, index: item.index, ...slotProps }) }\n        </VVirtualScrollItem>\n      ))\n\n      return props.renderless ? (\n        <>\n          <div ref={ markerRef } class=\"v-virtual-scroll__spacer\" style={{ paddingTop: convertToUnit(paddingTop.value) }} />\n          { children }\n          <div class=\"v-virtual-scroll__spacer\" style={{ paddingBottom: convertToUnit(paddingBottom.value) }} />\n        </>\n      ) : (\n        <div\n          ref={ containerRef }\n          class={[\n            'v-virtual-scroll',\n            props.class,\n          ]}\n          onScrollPassive={ handleScroll }\n          onScrollend={ handleScrollend }\n          style={[\n            dimensionStyles.value,\n            props.style,\n          ]}\n        >\n          <div\n            ref={ markerRef }\n            class=\"v-virtual-scroll__container\"\n            style={{\n              paddingTop: convertToUnit(paddingTop.value),\n              paddingBottom: convertToUnit(paddingBottom.value),\n            }}\n          >\n            { children }\n          </div>\n        </div>\n      )\n    })\n\n    return {\n      calculateVisibleItems,\n      scrollToIndex,\n    }\n  },\n})\n\nexport type VVirtualScroll = InstanceType<typeof VVirtualScroll>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VVirtualScroll.js","names":["VVirtualScrollItem","makeComponentProps","makeDimensionProps","useDimension","useToggleScope","makeVirtualProps","useVirtual","onMounted","onScopeDispose","toRef","convertToUnit","genericComponent","getCurrentInstance","getScrollParent","propsFactory","useRender","makeVVirtualScrollProps","items","type","Array","default","renderless","Boolean","VVirtualScroll","name","props","setup","_ref","slots","vm","dimensionStyles","calculateVisibleItems","containerRef","markerRef","handleScroll","handleScrollend","handleItemResize","scrollToIndex","paddingTop","paddingBottom","computedItems","handleListeners","add","arguments","length","undefined","method","value","document","documentElement","passive","vnode","el","children","map","item","_createVNode","key","height","index","slotProps","raw","_Fragment","class","style"],"sources":["../../../src/components/VVirtualScroll/VVirtualScroll.tsx"],"sourcesContent":["// Styles\nimport './VVirtualScroll.sass'\n\n// Components\nimport { VVirtualScrollItem } from './VVirtualScrollItem'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { useToggleScope } from '@/composables/toggleScope'\nimport { makeVirtualProps, useVirtual } from '@/composables/virtual'\n\n// Utilities\nimport { onMounted, onScopeDispose, toRef } from 'vue'\nimport {\n  convertToUnit,\n  genericComponent,\n  getCurrentInstance,\n  getScrollParent,\n  propsFactory,\n  useRender,\n} from '@/util'\n\n// Types\nimport type { PropType, Ref } from 'vue'\nimport type { GenericProps } from '@/util'\n\nexport interface VVirtualScrollSlot<T> {\n  item: T\n  index: number\n}\n\nexport const makeVVirtualScrollProps = propsFactory({\n  items: {\n    type: Array as PropType<readonly unknown[]>,\n    default: () => ([]),\n  },\n  renderless: Boolean,\n\n  ...makeVirtualProps(),\n  ...makeComponentProps(),\n  ...makeDimensionProps(),\n}, 'VVirtualScroll')\n\nexport const VVirtualScroll = genericComponent<new <T, Renderless extends boolean = false>(\n  props: {\n    items?: readonly T[]\n    renderless?: Renderless\n  },\n  slots: {\n    default: VVirtualScrollSlot<T> & (Renderless extends true ? {\n      itemRef: Ref<HTMLElement | undefined>\n    } : {})\n  }\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VVirtualScroll',\n\n  props: makeVVirtualScrollProps(),\n\n  setup (props, { slots }) {\n    const vm = getCurrentInstance('VVirtualScroll')\n    const { dimensionStyles } = useDimension(props)\n    const {\n      calculateVisibleItems,\n      containerRef,\n      markerRef,\n      handleScroll,\n      handleScrollend,\n      handleItemResize,\n      scrollToIndex,\n      paddingTop,\n      paddingBottom,\n      computedItems,\n    } = useVirtual(props, toRef(() => props.items))\n\n    useToggleScope(() => props.renderless, () => {\n      function handleListeners (add = false) {\n        const method = add ? 'addEventListener' : 'removeEventListener'\n\n        if (containerRef.value === document.documentElement) {\n          document[method]('scroll', handleScroll, { passive: true })\n          document[method]('scrollend', handleScrollend)\n        } else {\n          containerRef.value?.[method]('scroll', handleScroll, { passive: true })\n          containerRef.value?.[method]('scrollend', handleScrollend)\n        }\n      }\n\n      onMounted(() => {\n        containerRef.value = getScrollParent(vm.vnode.el as HTMLElement, true)\n        handleListeners(true)\n      })\n      onScopeDispose(handleListeners)\n    })\n\n    useRender(() => {\n      const children = computedItems.value.map(item => (\n        <VVirtualScrollItem\n          key={ item.key }\n          renderless={ props.renderless }\n          onUpdate:height={ height => handleItemResize(item.index, height) }\n        >\n          { slotProps => slots.default?.({ item: item.raw, index: item.index, ...slotProps }) }\n        </VVirtualScrollItem>\n      ))\n\n      return props.renderless ? (\n        <>\n          <div ref={ markerRef } class=\"v-virtual-scroll__spacer\" style={{ paddingTop: convertToUnit(paddingTop.value) }} />\n          { children }\n          <div class=\"v-virtual-scroll__spacer\" style={{ paddingBottom: convertToUnit(paddingBottom.value) }} />\n        </>\n      ) : (\n        <div\n          ref={ containerRef }\n          class={[\n            'v-virtual-scroll',\n            props.class,\n          ]}\n          onScrollPassive={ handleScroll }\n          onScrollend={ handleScrollend }\n          style={[\n            dimensionStyles.value,\n            props.style,\n          ]}\n        >\n          <div\n            ref={ markerRef }\n            class=\"v-virtual-scroll__container\"\n            style={{\n              paddingTop: convertToUnit(paddingTop.value),\n              paddingBottom: convertToUnit(paddingBottom.value),\n            }}\n          >\n            { children }\n          </div>\n        </div>\n      )\n    })\n\n    return {\n      calculateVisibleItems,\n      scrollToIndex,\n    }\n  },\n})\n\nexport type VVirtualScroll = InstanceType<typeof VVirtualScroll>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VWindow/VWindow.js

@@ -10,7 +10,7 @@ import { useLocale, useRtl } from "../../composables/locale.js";
 import { makeTagProps } from "../../composables/tag.js";
 import { makeThemeProps, provideTheme } from "../../composables/theme.js"; // Directives
 import { Touch } from "../../directives/touch/index.js"; // Utilities
-import { computed, provide, ref, shallowRef, watch } from 'vue';
+import { computed, provide, ref, shallowRef, toRef, watch } from 'vue';
 import { genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
 export const VWindowSymbol = Symbol.for('vuetify:v-window');
 export const VWindowGroupSymbol = Symbol.for('vuetify:v-window-group');
@@ -109,8 +109,8 @@ export const VWindow = genericComponent()({
       transitionHeight,
       rootRef
     });
-    const canMoveBack = computed(() => props.continuous || activeIndex.value !== 0);
-    const canMoveForward = computed(() => props.continuous || activeIndex.value !== group.items.value.length - 1);
+    const canMoveBack = toRef(() => props.continuous || activeIndex.value !== 0);
+    const canMoveForward = toRef(() => props.continuous || activeIndex.value !== group.items.value.length - 1);
     function prev() {
       canMoveBack.value && group.prev();
     }