@vuetify/nightly 3.8.2-master.2025-04-17 → 3.8.2-master.2025-04-22

package/lib/components/VSnackbar/VSnackbar.d.ts

@@ -638,7 +638,7 @@ export declare const VSnackbar: {
             animateClick: () => void;
             contentEl: Ref<HTMLElement | undefined, HTMLElement | undefined>;
             globalTop: Readonly<Ref<boolean, boolean>>;
-            localTop: import("vue").ComputedRef<boolean>;
+            localTop: Readonly<Ref<boolean, boolean>>;
             updateLocation: Ref<((e: Event) => void) | undefined, ((e: Event) => void) | undefined>;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             'click:outside': (e: MouseEvent) => true;
@@ -813,7 +813,7 @@ export declare const VSnackbar: {
         animateClick: () => void;
         contentEl: Ref<HTMLElement | undefined, HTMLElement | undefined>;
         globalTop: Readonly<Ref<boolean, boolean>>;
-        localTop: import("vue").ComputedRef<boolean>;
+        localTop: Readonly<Ref<boolean, boolean>>;
         updateLocation: 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: {
@@ -823,7 +823,7 @@ export declare const VSnackbar: {
             animateClick: () => void;
             contentEl: Ref<HTMLElement | undefined, HTMLElement | undefined>;
             globalTop: Readonly<Ref<boolean, boolean>>;
-            localTop: import("vue").ComputedRef<boolean>;
+            localTop: Readonly<Ref<boolean, boolean>>;
             updateLocation: Ref<((e: Event) => void) | undefined, ((e: Event) => void) | undefined>;
         } | {};
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -1169,7 +1169,7 @@ export declare const VSnackbar: {
             animateClick: () => void;
             contentEl: Ref<HTMLElement | undefined, HTMLElement | undefined>;
             globalTop: Readonly<Ref<boolean, boolean>>;
-            localTop: import("vue").ComputedRef<boolean>;
+            localTop: Readonly<Ref<boolean, boolean>>;
             updateLocation: Ref<((e: Event) => void) | undefined, ((e: Event) => void) | undefined>;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             'click:outside': (e: MouseEvent) => true;
@@ -1344,7 +1344,7 @@ export declare const VSnackbar: {
         animateClick: () => void;
         contentEl: Ref<HTMLElement | undefined, HTMLElement | undefined>;
         globalTop: Readonly<Ref<boolean, boolean>>;
-        localTop: import("vue").ComputedRef<boolean>;
+        localTop: Readonly<Ref<boolean, boolean>>;
         updateLocation: 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: {
@@ -1354,7 +1354,7 @@ export declare const VSnackbar: {
             animateClick: () => void;
             contentEl: Ref<HTMLElement | undefined, HTMLElement | undefined>;
             globalTop: Readonly<Ref<boolean, boolean>>;
-            localTop: import("vue").ComputedRef<boolean>;
+            localTop: Readonly<Ref<boolean, boolean>>;
             updateLocation: Ref<((e: Event) => void) | undefined, ((e: Event) => void) | undefined>;
         } | {};
     }, {}, {}, {}, {
@@ -1685,7 +1685,7 @@ export declare const VSnackbar: {
         animateClick: () => void;
         contentEl: Ref<HTMLElement | undefined, HTMLElement | undefined>;
         globalTop: Readonly<Ref<boolean, boolean>>;
-        localTop: import("vue").ComputedRef<boolean>;
+        localTop: Readonly<Ref<boolean, boolean>>;
         updateLocation: Ref<((e: Event) => void) | undefined, ((e: Event) => void) | undefined>;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         'click:outside': (e: MouseEvent) => true;
@@ -1860,7 +1860,7 @@ export declare const VSnackbar: {
     animateClick: () => void;
     contentEl: Ref<HTMLElement | undefined, HTMLElement | undefined>;
     globalTop: Readonly<Ref<boolean, boolean>>;
-    localTop: import("vue").ComputedRef<boolean>;
+    localTop: Readonly<Ref<boolean, boolean>>;
     updateLocation: 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: {
@@ -1870,7 +1870,7 @@ export declare const VSnackbar: {
         animateClick: () => void;
         contentEl: Ref<HTMLElement | undefined, HTMLElement | undefined>;
         globalTop: Readonly<Ref<boolean, boolean>>;
-        localTop: import("vue").ComputedRef<boolean>;
+        localTop: Readonly<Ref<boolean, boolean>>;
         updateLocation: Ref<((e: Event) => void) | undefined, ((e: Event) => void) | undefined>;
     } | {};
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/lib/components/VSparkline/VSparkline.js

@@ -3,7 +3,7 @@ import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
 import { makeVBarlineProps, VBarline } from "./VBarline.js";
 import { makeVTrendlineProps, VTrendline } from "./VTrendline.js"; // Composables
 import { useTextColor } from "../../composables/color.js"; // Utilities
-import { computed, toRef } from 'vue';
+import { computed } from 'vue';
 import { genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
 // Types
 
@@ -25,7 +25,7 @@ export const VSparkline = genericComponent()({
     const {
       textColorClasses,
       textColorStyles
-    } = useTextColor(toRef(props, 'color'));
+    } = useTextColor(() => props.color);
     const hasLabels = computed(() => {
       return Boolean(props.showLabels || props.labels.length > 0 || !!slots?.label);
     });

package/lib/components/VSparkline/VSparkline.js.map

@@ -1 +1 @@
-{"version":3,"file":"VSparkline.js","names":["makeVBarlineProps","VBarline","makeVTrendlineProps","VTrendline","useTextColor","computed","toRef","genericComponent","propsFactory","useRender","makeVSparklineProps","type","String","default","VSparkline","name","props","setup","_ref","slots","textColorClasses","textColorStyles","hasLabels","Boolean","showLabels","labels","length","label","totalHeight","height","parseInt","value","labelSize","Tag","lineProps","filterProps","_createVNode","_mergeProps","width"],"sources":["../../../src/components/VSparkline/VSparkline.tsx"],"sourcesContent":["// Components\nimport { makeVBarlineProps, VBarline } from './VBarline'\nimport { makeVTrendlineProps, VTrendline } from './VTrendline'\n\n// Composables\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\n// Types\n\nexport const makeVSparklineProps = propsFactory({\n  type: {\n    type: String as PropType<'trend' | 'bar'>,\n    default: 'trend',\n  },\n\n  ...makeVBarlineProps(),\n  ...makeVTrendlineProps(),\n}, 'VSparkline')\n\nexport type VSparklineSlots = {\n  default: void\n  label: { index: number, value: string }\n}\n\nexport const VSparkline = genericComponent<VSparklineSlots>()({\n  name: 'VSparkline',\n\n  props: makeVSparklineProps(),\n\n  setup (props, { slots }) {\n    const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color'))\n    const hasLabels = computed(() => {\n      return Boolean(\n        props.showLabels ||\n        props.labels.length > 0 ||\n        !!slots?.label\n      )\n    })\n    const totalHeight = computed(() => {\n      let height = parseInt(props.height, 10)\n\n      if (hasLabels.value) height += parseInt(props.labelSize, 10) * 1.5\n\n      return height\n    })\n\n    useRender(() => {\n      const Tag = props.type === 'trend' ? VTrendline : VBarline\n      const lineProps = props.type === 'trend' ? VTrendline.filterProps(props) : VBarline.filterProps(props)\n\n      return (\n        <Tag\n          key={ props.type }\n          class={ textColorClasses.value }\n          style={ textColorStyles.value }\n          viewBox={ `0 0 ${props.width} ${parseInt(totalHeight.value, 10)}` }\n          { ...lineProps }\n          v-slots={ slots }\n        />\n      )\n    })\n  },\n})\n\nexport type VSparkline = InstanceType<typeof VSparkline>\n"],"mappings":";AAAA;AAAA,SACSA,iBAAiB,EAAEC,QAAQ;AAAA,SAC3BC,mBAAmB,EAAEC,UAAU,2BAExC;AAAA,SACSC,YAAY,sCAErB;AACA,SAASC,QAAQ,EAAEC,KAAK,QAAQ,KAAK;AAAA,SAC5BC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,+BAElD;AAGA;;AAEA,OAAO,MAAMC,mBAAmB,GAAGF,YAAY,CAAC;EAC9CG,IAAI,EAAE;IACJA,IAAI,EAAEC,MAAmC;IACzCC,OAAO,EAAE;EACX,CAAC;EAED,GAAGb,iBAAiB,CAAC,CAAC;EACtB,GAAGE,mBAAmB,CAAC;AACzB,CAAC,EAAE,YAAY,CAAC;AAOhB,OAAO,MAAMY,UAAU,GAAGP,gBAAgB,CAAkB,CAAC,CAAC;EAC5DQ,IAAI,EAAE,YAAY;EAElBC,KAAK,EAAEN,mBAAmB,CAAC,CAAC;EAE5BO,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE,gBAAgB;MAAEC;IAAgB,CAAC,GAAGjB,YAAY,CAACE,KAAK,CAACU,KAAK,EAAE,OAAO,CAAC,CAAC;IACjF,MAAMM,SAAS,GAAGjB,QAAQ,CAAC,MAAM;MAC/B,OAAOkB,OAAO,CACZP,KAAK,CAACQ,UAAU,IAChBR,KAAK,CAACS,MAAM,CAACC,MAAM,GAAG,CAAC,IACvB,CAAC,CAACP,KAAK,EAAEQ,KACX,CAAC;IACH,CAAC,CAAC;IACF,MAAMC,WAAW,GAAGvB,QAAQ,CAAC,MAAM;MACjC,IAAIwB,MAAM,GAAGC,QAAQ,CAACd,KAAK,CAACa,MAAM,EAAE,EAAE,CAAC;MAEvC,IAAIP,SAAS,CAACS,KAAK,EAAEF,MAAM,IAAIC,QAAQ,CAACd,KAAK,CAACgB,SAAS,EAAE,EAAE,CAAC,GAAG,GAAG;MAElE,OAAOH,MAAM;IACf,CAAC,CAAC;IAEFpB,SAAS,CAAC,MAAM;MACd,MAAMwB,GAAG,GAAGjB,KAAK,CAACL,IAAI,KAAK,OAAO,GAAGR,UAAU,GAAGF,QAAQ;MAC1D,MAAMiC,SAAS,GAAGlB,KAAK,CAACL,IAAI,KAAK,OAAO,GAAGR,UAAU,CAACgC,WAAW,CAACnB,KAAK,CAAC,GAAGf,QAAQ,CAACkC,WAAW,CAACnB,KAAK,CAAC;MAEtG,OAAAoB,YAAA,CAAAH,GAAA,EAAAI,WAAA;QAAA,OAEUrB,KAAK,CAACL,IAAI;QAAA,SACRS,gBAAgB,CAACW,KAAK;QAAA,SACtBV,eAAe,CAACU,KAAK;QAAA,WACnB,OAAOf,KAAK,CAACsB,KAAK,IAAIR,QAAQ,CAACF,WAAW,CAACG,KAAK,EAAE,EAAE,CAAC;MAAE,GAC5DG,SAAS,GACJf,KAAK;IAGrB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"VSparkline.js","names":["makeVBarlineProps","VBarline","makeVTrendlineProps","VTrendline","useTextColor","computed","genericComponent","propsFactory","useRender","makeVSparklineProps","type","String","default","VSparkline","name","props","setup","_ref","slots","textColorClasses","textColorStyles","color","hasLabels","Boolean","showLabels","labels","length","label","totalHeight","height","parseInt","value","labelSize","Tag","lineProps","filterProps","_createVNode","_mergeProps","width"],"sources":["../../../src/components/VSparkline/VSparkline.tsx"],"sourcesContent":["// Components\nimport { makeVBarlineProps, VBarline } from './VBarline'\nimport { makeVTrendlineProps, VTrendline } from './VTrendline'\n\n// Composables\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\n// Types\n\nexport const makeVSparklineProps = propsFactory({\n  type: {\n    type: String as PropType<'trend' | 'bar'>,\n    default: 'trend',\n  },\n\n  ...makeVBarlineProps(),\n  ...makeVTrendlineProps(),\n}, 'VSparkline')\n\nexport type VSparklineSlots = {\n  default: void\n  label: { index: number, value: string }\n}\n\nexport const VSparkline = genericComponent<VSparklineSlots>()({\n  name: 'VSparkline',\n\n  props: makeVSparklineProps(),\n\n  setup (props, { slots }) {\n    const { textColorClasses, textColorStyles } = useTextColor(() => props.color)\n    const hasLabels = computed(() => {\n      return Boolean(\n        props.showLabels ||\n        props.labels.length > 0 ||\n        !!slots?.label\n      )\n    })\n    const totalHeight = computed(() => {\n      let height = parseInt(props.height, 10)\n\n      if (hasLabels.value) height += parseInt(props.labelSize, 10) * 1.5\n\n      return height\n    })\n\n    useRender(() => {\n      const Tag = props.type === 'trend' ? VTrendline : VBarline\n      const lineProps = props.type === 'trend' ? VTrendline.filterProps(props) : VBarline.filterProps(props)\n\n      return (\n        <Tag\n          key={ props.type }\n          class={ textColorClasses.value }\n          style={ textColorStyles.value }\n          viewBox={ `0 0 ${props.width} ${parseInt(totalHeight.value, 10)}` }\n          { ...lineProps }\n          v-slots={ slots }\n        />\n      )\n    })\n  },\n})\n\nexport type VSparkline = InstanceType<typeof VSparkline>\n"],"mappings":";AAAA;AAAA,SACSA,iBAAiB,EAAEC,QAAQ;AAAA,SAC3BC,mBAAmB,EAAEC,UAAU,2BAExC;AAAA,SACSC,YAAY,sCAErB;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,+BAElD;AAGA;;AAEA,OAAO,MAAMC,mBAAmB,GAAGF,YAAY,CAAC;EAC9CG,IAAI,EAAE;IACJA,IAAI,EAAEC,MAAmC;IACzCC,OAAO,EAAE;EACX,CAAC;EAED,GAAGZ,iBAAiB,CAAC,CAAC;EACtB,GAAGE,mBAAmB,CAAC;AACzB,CAAC,EAAE,YAAY,CAAC;AAOhB,OAAO,MAAMW,UAAU,GAAGP,gBAAgB,CAAkB,CAAC,CAAC;EAC5DQ,IAAI,EAAE,YAAY;EAElBC,KAAK,EAAEN,mBAAmB,CAAC,CAAC;EAE5BO,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE,gBAAgB;MAAEC;IAAgB,CAAC,GAAGhB,YAAY,CAAC,MAAMW,KAAK,CAACM,KAAK,CAAC;IAC7E,MAAMC,SAAS,GAAGjB,QAAQ,CAAC,MAAM;MAC/B,OAAOkB,OAAO,CACZR,KAAK,CAACS,UAAU,IAChBT,KAAK,CAACU,MAAM,CAACC,MAAM,GAAG,CAAC,IACvB,CAAC,CAACR,KAAK,EAAES,KACX,CAAC;IACH,CAAC,CAAC;IACF,MAAMC,WAAW,GAAGvB,QAAQ,CAAC,MAAM;MACjC,IAAIwB,MAAM,GAAGC,QAAQ,CAACf,KAAK,CAACc,MAAM,EAAE,EAAE,CAAC;MAEvC,IAAIP,SAAS,CAACS,KAAK,EAAEF,MAAM,IAAIC,QAAQ,CAACf,KAAK,CAACiB,SAAS,EAAE,EAAE,CAAC,GAAG,GAAG;MAElE,OAAOH,MAAM;IACf,CAAC,CAAC;IAEFrB,SAAS,CAAC,MAAM;MACd,MAAMyB,GAAG,GAAGlB,KAAK,CAACL,IAAI,KAAK,OAAO,GAAGP,UAAU,GAAGF,QAAQ;MAC1D,MAAMiC,SAAS,GAAGnB,KAAK,CAACL,IAAI,KAAK,OAAO,GAAGP,UAAU,CAACgC,WAAW,CAACpB,KAAK,CAAC,GAAGd,QAAQ,CAACkC,WAAW,CAACpB,KAAK,CAAC;MAEtG,OAAAqB,YAAA,CAAAH,GAAA,EAAAI,WAAA;QAAA,OAEUtB,KAAK,CAACL,IAAI;QAAA,SACRS,gBAAgB,CAACY,KAAK;QAAA,SACtBX,eAAe,CAACW,KAAK;QAAA,WACnB,OAAOhB,KAAK,CAACuB,KAAK,IAAIR,QAAQ,CAACF,WAAW,CAACG,KAAK,EAAE,EAAE,CAAC;MAAE,GAC5DG,SAAS,GACJhB,KAAK;IAGrB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/components/VSwitch/VSwitch.js

@@ -12,7 +12,7 @@ import { makeVSelectionControlProps, VSelectionControl } from "../VSelectionCont
 import { useFocus } from "../../composables/focus.js";
 import { LoaderSlot, useLoader } from "../../composables/loader.js";
 import { useProxiedModel } from "../../composables/proxiedModel.js"; // Utilities
-import { computed, ref, useId } from 'vue';
+import { ref, toRef, useId } from 'vue';
 import { filterInputAttrs, genericComponent, IN_BROWSER, propsFactory, useRender } from "../../util/index.js"; // Types
 export const makeVSwitchProps = propsFactory({
   indeterminate: Boolean,
@@ -51,11 +51,11 @@ export const VSwitch = genericComponent()({
     } = useFocus(props);
     const control = ref();
     const isForcedColorsModeActive = IN_BROWSER && window.matchMedia('(forced-colors: active)').matches;
-    const loaderColor = computed(() => {
+    const loaderColor = toRef(() => {
       return typeof props.loading === 'string' && props.loading !== '' ? props.loading : props.color;
     });
     const uid = useId();
-    const id = computed(() => props.id || `switch-${uid}`);
+    const id = toRef(() => props.id || `switch-${uid}`);
     function onChange() {
       if (indeterminate.value) {
         indeterminate.value = false;

package/lib/components/VSwitch/VSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"VSwitch.js","names":["VScaleTransition","VDefaultsProvider","VIcon","makeVInputProps","VInput","VProgressCircular","makeVSelectionControlProps","VSelectionControl","useFocus","LoaderSlot","useLoader","useProxiedModel","computed","ref","useId","filterInputAttrs","genericComponent","IN_BROWSER","propsFactory","useRender","makeVSwitchProps","indeterminate","Boolean","inset","flat","loading","type","String","default","VSwitch","name","inheritAttrs","props","emits","focused","value","setup","_ref","attrs","slots","model","loaderClasses","isFocused","focus","blur","control","isForcedColorsModeActive","window","matchMedia","matches","loaderColor","color","uid","id","onChange","onTrackClick","e","stopPropagation","preventDefault","input","click","rootAttrs","controlAttrs","inputProps","filterProps","controlProps","_createVNode","_mergeProps","class","$event","style","_ref2","messagesId","isDisabled","isReadonly","isValid","slotProps","undefined","_ref3","backgroundColorClasses","backgroundColorStyles","_ref4","inputNode","icon","_Fragment","thumb","size","loader","isActive"],"sources":["../../../src/components/VSwitch/VSwitch.tsx"],"sourcesContent":["// Styles\nimport './VSwitch.sass'\n\n// Components\nimport { VScaleTransition } from '@/components/transitions'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\nimport { makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { VProgressCircular } from '@/components/VProgressCircular'\nimport { makeVSelectionControlProps, VSelectionControl } from '@/components/VSelectionControl/VSelectionControl'\n\n// Composables\nimport { useFocus } from '@/composables/focus'\nimport { LoaderSlot, useLoader } from '@/composables/loader'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref, useId } from 'vue'\nimport { filterInputAttrs, genericComponent, IN_BROWSER, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { ComputedRef, Ref } from 'vue'\nimport type { VInputSlots } from '@/components/VInput/VInput'\nimport type { VSelectionControlSlots } from '@/components/VSelectionControl/VSelectionControl'\nimport type { IconValue } from '@/composables/icons'\nimport type { LoaderSlotProps } from '@/composables/loader'\nimport type { GenericProps } from '@/util'\n\nexport type VSwitchSlot = {\n  model: Ref<boolean>\n  isValid: ComputedRef<boolean | null>\n}\n\nexport type VSwitchSlots =\n  & VInputSlots\n  & VSelectionControlSlots\n  & {\n    loader: LoaderSlotProps\n    thumb: { icon: IconValue | undefined } & VSwitchSlot\n    'track-false': VSwitchSlot\n    'track-true': VSwitchSlot\n  }\n\nexport const makeVSwitchProps = propsFactory({\n  indeterminate: Boolean,\n  inset: Boolean,\n  flat: Boolean,\n  loading: {\n    type: [Boolean, String],\n    default: false,\n  },\n\n  ...makeVInputProps(),\n  ...makeVSelectionControlProps(),\n}, 'VSwitch')\n\nexport const VSwitch = genericComponent<new <T>(\n  props: {\n    modelValue?: T | null\n    'onUpdate:modelValue'?: (value: T | null) => void\n  },\n  slots: VSwitchSlots,\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VSwitch',\n\n  inheritAttrs: false,\n\n  props: makeVSwitchProps(),\n\n  emits: {\n    'update:focused': (focused: boolean) => true,\n    'update:modelValue': (value: any) => true,\n    'update:indeterminate': (value: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const indeterminate = useProxiedModel(props, 'indeterminate')\n    const model = useProxiedModel(props, 'modelValue')\n    const { loaderClasses } = useLoader(props)\n    const { isFocused, focus, blur } = useFocus(props)\n    const control = ref<VSelectionControl>()\n    const isForcedColorsModeActive = IN_BROWSER && window.matchMedia('(forced-colors: active)').matches\n\n    const loaderColor = computed(() => {\n      return typeof props.loading === 'string' && props.loading !== ''\n        ? props.loading\n        : props.color\n    })\n\n    const uid = useId()\n    const id = computed(() => props.id || `switch-${uid}`)\n\n    function onChange () {\n      if (indeterminate.value) {\n        indeterminate.value = false\n      }\n    }\n    function onTrackClick (e: Event) {\n      e.stopPropagation()\n      e.preventDefault()\n      control.value?.input?.click()\n    }\n\n    useRender(() => {\n      const [rootAttrs, controlAttrs] = filterInputAttrs(attrs)\n      const inputProps = VInput.filterProps(props)\n      const controlProps = VSelectionControl.filterProps(props)\n\n      return (\n        <VInput\n          class={[\n            'v-switch',\n            { 'v-switch--flat': props.flat },\n            { 'v-switch--inset': props.inset },\n            { 'v-switch--indeterminate': indeterminate.value },\n            loaderClasses.value,\n            props.class,\n          ]}\n          { ...rootAttrs }\n          { ...inputProps }\n          v-model={ model.value }\n          id={ id.value }\n          focused={ isFocused.value }\n          style={ props.style }\n        >\n          {{\n            ...slots,\n            default: ({\n              id,\n              messagesId,\n              isDisabled,\n              isReadonly,\n              isValid,\n            }) => {\n              const slotProps = {\n                model,\n                isValid,\n              }\n\n              return (\n                <VSelectionControl\n                  ref={ control }\n                  { ...controlProps }\n                  v-model={ model.value }\n                  id={ id.value }\n                  aria-describedby={ messagesId.value }\n                  type=\"checkbox\"\n                  onUpdate:modelValue={ onChange }\n                  aria-checked={ indeterminate.value ? 'mixed' : undefined }\n                  disabled={ isDisabled.value }\n                  readonly={ isReadonly.value }\n                  onFocus={ focus }\n                  onBlur={ blur }\n                  { ...controlAttrs }\n                >\n                  {{\n                    ...slots,\n                    default: ({ backgroundColorClasses, backgroundColorStyles }) => (\n                      <div\n                        class={[\n                          'v-switch__track',\n                          !isForcedColorsModeActive ? backgroundColorClasses.value : undefined,\n                        ]}\n                        style={ backgroundColorStyles.value }\n                        onClick={ onTrackClick }\n                      >\n                        { slots['track-true'] && (\n                          <div key=\"prepend\" class=\"v-switch__track-true\">\n                            { slots['track-true'](slotProps) }\n                          </div>\n                        )}\n\n                        { slots['track-false'] && (\n                          <div key=\"append\" class=\"v-switch__track-false\">\n                            { slots['track-false'](slotProps) }\n                          </div>\n                        )}\n                      </div>\n                    ),\n                    input: ({ inputNode, icon, backgroundColorClasses, backgroundColorStyles }) => (\n                      <>\n                        { inputNode }\n                        <div\n                          class={[\n                            'v-switch__thumb',\n                            { 'v-switch__thumb--filled': icon || props.loading },\n                            props.inset || isForcedColorsModeActive ? undefined : backgroundColorClasses.value,\n                          ]}\n                          style={ props.inset ? undefined : backgroundColorStyles.value }\n                        >\n                          { slots.thumb ? (\n                            <VDefaultsProvider\n                              defaults={{\n                                VIcon: {\n                                  icon,\n                                  size: 'x-small',\n                                },\n                              }}\n                            >\n                              { slots.thumb({ ...slotProps, icon }) }\n                            </VDefaultsProvider>\n                          ) : (\n                            <VScaleTransition>\n                              { !props.loading ? (\n                                (icon && (\n                                  <VIcon\n                                    key={ String(icon) }\n                                    icon={ icon }\n                                    size=\"x-small\"\n                                  />\n                                ))) : (\n                                <LoaderSlot\n                                  name=\"v-switch\"\n                                  active\n                                  color={ isValid.value === false ? undefined : loaderColor.value }\n                                >\n                                  { slotProps => (\n                                    slots.loader\n                                      ? slots.loader(slotProps)\n                                      : (\n                                        <VProgressCircular\n                                          active={ slotProps.isActive }\n                                          color={ slotProps.color }\n                                          indeterminate\n                                          size=\"16\"\n                                          width=\"2\"\n                                        />\n                                      )\n                                  )}\n                                </LoaderSlot>\n                              )}\n                            </VScaleTransition>\n                          )}\n                        </div>\n                      </>\n                    ),\n                  }}\n                </VSelectionControl>\n              )\n            },\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSwitch = InstanceType<typeof VSwitch>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VSwitch.js","names":["VScaleTransition","VDefaultsProvider","VIcon","makeVInputProps","VInput","VProgressCircular","makeVSelectionControlProps","VSelectionControl","useFocus","LoaderSlot","useLoader","useProxiedModel","ref","toRef","useId","filterInputAttrs","genericComponent","IN_BROWSER","propsFactory","useRender","makeVSwitchProps","indeterminate","Boolean","inset","flat","loading","type","String","default","VSwitch","name","inheritAttrs","props","emits","focused","value","setup","_ref","attrs","slots","model","loaderClasses","isFocused","focus","blur","control","isForcedColorsModeActive","window","matchMedia","matches","loaderColor","color","uid","id","onChange","onTrackClick","e","stopPropagation","preventDefault","input","click","rootAttrs","controlAttrs","inputProps","filterProps","controlProps","_createVNode","_mergeProps","class","$event","style","_ref2","messagesId","isDisabled","isReadonly","isValid","slotProps","undefined","_ref3","backgroundColorClasses","backgroundColorStyles","_ref4","inputNode","icon","_Fragment","thumb","size","loader","isActive"],"sources":["../../../src/components/VSwitch/VSwitch.tsx"],"sourcesContent":["// Styles\nimport './VSwitch.sass'\n\n// Components\nimport { VScaleTransition } from '@/components/transitions'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\nimport { makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { VProgressCircular } from '@/components/VProgressCircular'\nimport { makeVSelectionControlProps, VSelectionControl } from '@/components/VSelectionControl/VSelectionControl'\n\n// Composables\nimport { useFocus } from '@/composables/focus'\nimport { LoaderSlot, useLoader } from '@/composables/loader'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { ref, toRef, useId } from 'vue'\nimport { filterInputAttrs, genericComponent, IN_BROWSER, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { ComputedRef, Ref } from 'vue'\nimport type { VInputSlots } from '@/components/VInput/VInput'\nimport type { VSelectionControlSlots } from '@/components/VSelectionControl/VSelectionControl'\nimport type { IconValue } from '@/composables/icons'\nimport type { LoaderSlotProps } from '@/composables/loader'\nimport type { GenericProps } from '@/util'\n\nexport type VSwitchSlot = {\n  model: Ref<boolean>\n  isValid: ComputedRef<boolean | null>\n}\n\nexport type VSwitchSlots =\n  & VInputSlots\n  & VSelectionControlSlots\n  & {\n    loader: LoaderSlotProps\n    thumb: { icon: IconValue | undefined } & VSwitchSlot\n    'track-false': VSwitchSlot\n    'track-true': VSwitchSlot\n  }\n\nexport const makeVSwitchProps = propsFactory({\n  indeterminate: Boolean,\n  inset: Boolean,\n  flat: Boolean,\n  loading: {\n    type: [Boolean, String],\n    default: false,\n  },\n\n  ...makeVInputProps(),\n  ...makeVSelectionControlProps(),\n}, 'VSwitch')\n\nexport const VSwitch = genericComponent<new <T>(\n  props: {\n    modelValue?: T | null\n    'onUpdate:modelValue'?: (value: T | null) => void\n  },\n  slots: VSwitchSlots,\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VSwitch',\n\n  inheritAttrs: false,\n\n  props: makeVSwitchProps(),\n\n  emits: {\n    'update:focused': (focused: boolean) => true,\n    'update:modelValue': (value: any) => true,\n    'update:indeterminate': (value: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const indeterminate = useProxiedModel(props, 'indeterminate')\n    const model = useProxiedModel(props, 'modelValue')\n    const { loaderClasses } = useLoader(props)\n    const { isFocused, focus, blur } = useFocus(props)\n    const control = ref<VSelectionControl>()\n    const isForcedColorsModeActive = IN_BROWSER && window.matchMedia('(forced-colors: active)').matches\n\n    const loaderColor = toRef(() => {\n      return typeof props.loading === 'string' && props.loading !== ''\n        ? props.loading\n        : props.color\n    })\n\n    const uid = useId()\n    const id = toRef(() => props.id || `switch-${uid}`)\n\n    function onChange () {\n      if (indeterminate.value) {\n        indeterminate.value = false\n      }\n    }\n    function onTrackClick (e: Event) {\n      e.stopPropagation()\n      e.preventDefault()\n      control.value?.input?.click()\n    }\n\n    useRender(() => {\n      const [rootAttrs, controlAttrs] = filterInputAttrs(attrs)\n      const inputProps = VInput.filterProps(props)\n      const controlProps = VSelectionControl.filterProps(props)\n\n      return (\n        <VInput\n          class={[\n            'v-switch',\n            { 'v-switch--flat': props.flat },\n            { 'v-switch--inset': props.inset },\n            { 'v-switch--indeterminate': indeterminate.value },\n            loaderClasses.value,\n            props.class,\n          ]}\n          { ...rootAttrs }\n          { ...inputProps }\n          v-model={ model.value }\n          id={ id.value }\n          focused={ isFocused.value }\n          style={ props.style }\n        >\n          {{\n            ...slots,\n            default: ({\n              id,\n              messagesId,\n              isDisabled,\n              isReadonly,\n              isValid,\n            }) => {\n              const slotProps = {\n                model,\n                isValid,\n              }\n\n              return (\n                <VSelectionControl\n                  ref={ control }\n                  { ...controlProps }\n                  v-model={ model.value }\n                  id={ id.value }\n                  aria-describedby={ messagesId.value }\n                  type=\"checkbox\"\n                  onUpdate:modelValue={ onChange }\n                  aria-checked={ indeterminate.value ? 'mixed' : undefined }\n                  disabled={ isDisabled.value }\n                  readonly={ isReadonly.value }\n                  onFocus={ focus }\n                  onBlur={ blur }\n                  { ...controlAttrs }\n                >\n                  {{\n                    ...slots,\n                    default: ({ backgroundColorClasses, backgroundColorStyles }) => (\n                      <div\n                        class={[\n                          'v-switch__track',\n                          !isForcedColorsModeActive ? backgroundColorClasses.value : undefined,\n                        ]}\n                        style={ backgroundColorStyles.value }\n                        onClick={ onTrackClick }\n                      >\n                        { slots['track-true'] && (\n                          <div key=\"prepend\" class=\"v-switch__track-true\">\n                            { slots['track-true'](slotProps) }\n                          </div>\n                        )}\n\n                        { slots['track-false'] && (\n                          <div key=\"append\" class=\"v-switch__track-false\">\n                            { slots['track-false'](slotProps) }\n                          </div>\n                        )}\n                      </div>\n                    ),\n                    input: ({ inputNode, icon, backgroundColorClasses, backgroundColorStyles }) => (\n                      <>\n                        { inputNode }\n                        <div\n                          class={[\n                            'v-switch__thumb',\n                            { 'v-switch__thumb--filled': icon || props.loading },\n                            props.inset || isForcedColorsModeActive ? undefined : backgroundColorClasses.value,\n                          ]}\n                          style={ props.inset ? undefined : backgroundColorStyles.value }\n                        >\n                          { slots.thumb ? (\n                            <VDefaultsProvider\n                              defaults={{\n                                VIcon: {\n                                  icon,\n                                  size: 'x-small',\n                                },\n                              }}\n                            >\n                              { slots.thumb({ ...slotProps, icon }) }\n                            </VDefaultsProvider>\n                          ) : (\n                            <VScaleTransition>\n                              { !props.loading ? (\n                                (icon && (\n                                  <VIcon\n                                    key={ String(icon) }\n                                    icon={ icon }\n                                    size=\"x-small\"\n                                  />\n                                ))) : (\n                                <LoaderSlot\n                                  name=\"v-switch\"\n                                  active\n                                  color={ isValid.value === false ? undefined : loaderColor.value }\n                                >\n                                  { slotProps => (\n                                    slots.loader\n                                      ? slots.loader(slotProps)\n                                      : (\n                                        <VProgressCircular\n                                          active={ slotProps.isActive }\n                                          color={ slotProps.color }\n                                          indeterminate\n                                          size=\"16\"\n                                          width=\"2\"\n                                        />\n                                      )\n                                  )}\n                                </LoaderSlot>\n                              )}\n                            </VScaleTransition>\n                          )}\n                        </div>\n                      </>\n                    ),\n                  }}\n                </VSelectionControl>\n              )\n            },\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSwitch = InstanceType<typeof VSwitch>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VSystemBar/VSystemBar.js

@@ -37,7 +37,7 @@ export const VSystemBar = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'color'));
+    } = useBackgroundColor(() => props.color);
     const {
       elevationClasses
     } = useElevation(props);
@@ -57,7 +57,7 @@ export const VSystemBar = genericComponent()({
       layoutSize: height,
       elementSize: height,
       active: computed(() => true),
-      absolute: toRef(props, 'absolute')
+      absolute: toRef(() => props.absolute)
     });
     useRender(() => _createVNode(props.tag, {
       "class": ['v-system-bar', {

package/lib/components/VSystemBar/VSystemBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"VSystemBar.js","names":["useBackgroundColor","makeComponentProps","makeElevationProps","useElevation","makeLayoutItemProps","useLayoutItem","makeRoundedProps","useRounded","useSsrBoot","makeTagProps","makeThemeProps","provideTheme","computed","shallowRef","toRef","genericComponent","propsFactory","useRender","makeVSystemBarProps","color","String","height","Number","window","Boolean","VSystemBar","name","props","setup","_ref","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","elevationClasses","roundedClasses","ssrBootStyles","layoutItemStyles","id","order","parseInt","position","layoutSize","elementSize","active","absolute","_createVNode","tag","value","class","style"],"sources":["../../../src/components/VSystemBar/VSystemBar.tsx"],"sourcesContent":["// Styles\nimport './VSystemBar.sass'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { useSsrBoot } from '@/composables/ssrBoot'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { computed, shallowRef, toRef } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVSystemBarProps = propsFactory({\n  color: String,\n  height: [Number, String],\n  window: Boolean,\n\n  ...makeComponentProps(),\n  ...makeElevationProps(),\n  ...makeLayoutItemProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps(),\n  ...makeThemeProps(),\n}, 'VSystemBar')\n\nexport const VSystemBar = genericComponent()({\n  name: 'VSystemBar',\n\n  props: makeVSystemBarProps(),\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const { ssrBootStyles } = useSsrBoot()\n    const height = computed(() => props.height ?? (props.window ? 32 : 24))\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: shallowRef('top'),\n      layoutSize: height,\n      elementSize: height,\n      active: computed(() => true),\n      absolute: toRef(props, 'absolute'),\n    })\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-system-bar',\n          { 'v-system-bar--window': props.window },\n          themeClasses.value,\n          backgroundColorClasses.value,\n          elevationClasses.value,\n          roundedClasses.value,\n          props.class,\n        ]}\n        style={[\n          backgroundColorStyles.value,\n          layoutItemStyles.value,\n          ssrBootStyles.value,\n          props.style,\n        ]}\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VSystemBar = InstanceType<typeof VSystemBar>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VSystemBar.js","names":["useBackgroundColor","makeComponentProps","makeElevationProps","useElevation","makeLayoutItemProps","useLayoutItem","makeRoundedProps","useRounded","useSsrBoot","makeTagProps","makeThemeProps","provideTheme","computed","shallowRef","toRef","genericComponent","propsFactory","useRender","makeVSystemBarProps","color","String","height","Number","window","Boolean","VSystemBar","name","props","setup","_ref","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","elevationClasses","roundedClasses","ssrBootStyles","layoutItemStyles","id","order","parseInt","position","layoutSize","elementSize","active","absolute","_createVNode","tag","value","class","style"],"sources":["../../../src/components/VSystemBar/VSystemBar.tsx"],"sourcesContent":["// Styles\nimport './VSystemBar.sass'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { useSsrBoot } from '@/composables/ssrBoot'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { computed, shallowRef, toRef } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVSystemBarProps = propsFactory({\n  color: String,\n  height: [Number, String],\n  window: Boolean,\n\n  ...makeComponentProps(),\n  ...makeElevationProps(),\n  ...makeLayoutItemProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps(),\n  ...makeThemeProps(),\n}, 'VSystemBar')\n\nexport const VSystemBar = genericComponent()({\n  name: 'VSystemBar',\n\n  props: makeVSystemBarProps(),\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => props.color)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const { ssrBootStyles } = useSsrBoot()\n    const height = computed(() => props.height ?? (props.window ? 32 : 24))\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: shallowRef('top'),\n      layoutSize: height,\n      elementSize: height,\n      active: computed(() => true),\n      absolute: toRef(() => props.absolute),\n    })\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-system-bar',\n          { 'v-system-bar--window': props.window },\n          themeClasses.value,\n          backgroundColorClasses.value,\n          elevationClasses.value,\n          roundedClasses.value,\n          props.class,\n        ]}\n        style={[\n          backgroundColorStyles.value,\n          layoutItemStyles.value,\n          ssrBootStyles.value,\n          props.style,\n        ]}\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VSystemBar = InstanceType<typeof VSystemBar>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VTabs/VTab.d.ts

@@ -683,7 +683,7 @@ export declare const VTab: {
         }) => any) | undefined;
     }, "group" | ("symbol" | "replace" | "flat" | "variant" | "exact" | "block" | "active" | "style" | "text" | "disabled" | "size" | "readonly" | "tag" | "density" | "rounded" | "tile" | "slim" | "stacked" | "ripple")> & import("vue").ShallowUnwrapRef<{
         group: import("../../composables/group.js").GroupItemProvide | null;
-    }> & {} & import("vue").ComponentCustomProperties & {}, "location" | "height" | "width" | "border" | "color" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "position" | "value" | "loading" | "class" | "theme" | "to" | "icon" | "$children" | "href" | "elevation" | "v-slots" | "v-slot:default" | keyof import("vue").VNodeProps | "baseColor" | "selectedClass" | "onGroup:selected" | "activeColor" | "prependIcon" | "appendIcon" | ("symbol" | "replace" | "flat" | "variant" | "exact" | "block" | "active" | "style" | "text" | "disabled" | "size" | "readonly" | "tag" | "density" | "rounded" | "tile" | "slim" | "stacked" | "ripple") | "v-slot:prepend" | "v-slot:append" | "v-slot:loader">, `$${any}`> & {
+    }> & {} & import("vue").ComponentCustomProperties & {}, "location" | "height" | "width" | "border" | "color" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "position" | "value" | "loading" | "class" | "theme" | "to" | "icon" | "$children" | "href" | "elevation" | "v-slots" | "v-slot:default" | keyof import("vue").VNodeProps | "baseColor" | "selectedClass" | "activeColor" | "prependIcon" | "appendIcon" | "onGroup:selected" | ("symbol" | "replace" | "flat" | "variant" | "exact" | "block" | "active" | "style" | "text" | "disabled" | "size" | "readonly" | "tag" | "density" | "rounded" | "tile" | "slim" | "stacked" | "ripple") | "v-slot:prepend" | "v-slot:append" | "v-slot:loader">, `$${any}`> & {
         _allExposed: {
             group: import("../../composables/group.js").GroupItemProvide | null;
         } | {};
@@ -1105,7 +1105,7 @@ export declare const VTab: {
         }) => any) | undefined;
     }, "group" | ("symbol" | "replace" | "flat" | "variant" | "exact" | "block" | "active" | "style" | "text" | "disabled" | "size" | "readonly" | "tag" | "density" | "rounded" | "tile" | "slim" | "stacked" | "ripple")> & import("vue").ShallowUnwrapRef<{
         group: import("../../composables/group.js").GroupItemProvide | null;
-    }> & {} & import("vue").ComponentCustomProperties & {}, "location" | "height" | "width" | "border" | "color" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "position" | "value" | "loading" | "class" | "theme" | "to" | "icon" | "$children" | "href" | "elevation" | "v-slots" | "v-slot:default" | keyof import("vue").VNodeProps | "baseColor" | "selectedClass" | "onGroup:selected" | "activeColor" | "prependIcon" | "appendIcon" | ("symbol" | "replace" | "flat" | "variant" | "exact" | "block" | "active" | "style" | "text" | "disabled" | "size" | "readonly" | "tag" | "density" | "rounded" | "tile" | "slim" | "stacked" | "ripple") | "v-slot:prepend" | "v-slot:append" | "v-slot:loader">, `$${any}`> & {
+    }> & {} & import("vue").ComponentCustomProperties & {}, "location" | "height" | "width" | "border" | "color" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "position" | "value" | "loading" | "class" | "theme" | "to" | "icon" | "$children" | "href" | "elevation" | "v-slots" | "v-slot:default" | keyof import("vue").VNodeProps | "baseColor" | "selectedClass" | "activeColor" | "prependIcon" | "appendIcon" | "onGroup:selected" | ("symbol" | "replace" | "flat" | "variant" | "exact" | "block" | "active" | "style" | "text" | "disabled" | "size" | "readonly" | "tag" | "density" | "rounded" | "tile" | "slim" | "stacked" | "ripple") | "v-slot:prepend" | "v-slot:append" | "v-slot:loader">, `$${any}`> & {
         _allExposed: {
             group: import("../../composables/group.js").GroupItemProvide | null;
         } | {};
@@ -1519,7 +1519,7 @@ export declare const VTab: {
     }) => any) | undefined;
 }, "group" | ("symbol" | "replace" | "flat" | "variant" | "exact" | "block" | "active" | "style" | "text" | "disabled" | "size" | "readonly" | "tag" | "density" | "rounded" | "tile" | "slim" | "stacked" | "ripple")> & import("vue").ShallowUnwrapRef<{
     group: import("../../composables/group.js").GroupItemProvide | null;
-}> & {} & import("vue").ComponentCustomProperties & {}, "location" | "height" | "width" | "border" | "color" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "position" | "value" | "loading" | "class" | "theme" | "to" | "icon" | "$children" | "href" | "elevation" | "v-slots" | "v-slot:default" | keyof import("vue").VNodeProps | "baseColor" | "selectedClass" | "onGroup:selected" | "activeColor" | "prependIcon" | "appendIcon" | ("symbol" | "replace" | "flat" | "variant" | "exact" | "block" | "active" | "style" | "text" | "disabled" | "size" | "readonly" | "tag" | "density" | "rounded" | "tile" | "slim" | "stacked" | "ripple") | "v-slot:prepend" | "v-slot:append" | "v-slot:loader">, `$${any}`> & {
+}> & {} & import("vue").ComponentCustomProperties & {}, "location" | "height" | "width" | "border" | "color" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "position" | "value" | "loading" | "class" | "theme" | "to" | "icon" | "$children" | "href" | "elevation" | "v-slots" | "v-slot:default" | keyof import("vue").VNodeProps | "baseColor" | "selectedClass" | "activeColor" | "prependIcon" | "appendIcon" | "onGroup:selected" | ("symbol" | "replace" | "flat" | "variant" | "exact" | "block" | "active" | "style" | "text" | "disabled" | "size" | "readonly" | "tag" | "density" | "rounded" | "tile" | "slim" | "stacked" | "ripple") | "v-slot:prepend" | "v-slot:append" | "v-slot:loader">, `$${any}`> & {
     _allExposed: {
         group: import("../../composables/group.js").GroupItemProvide | null;
     } | {};

package/lib/components/VTabs/VTab.js

@@ -33,7 +33,7 @@ export const VTab = genericComponent()({
     const {
       textColorClasses: sliderColorClasses,
       textColorStyles: sliderColorStyles
-    } = useTextColor(props, 'sliderColor');
+    } = useTextColor(() => props.sliderColor);
     const rootEl = ref();
     const sliderEl = ref();
     const isHorizontal = computed(() => props.direction === 'horizontal');

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

@@ -1 +1 @@
-{"version":3,"file":"VTab.js","names":["makeVBtnProps","VBtn","useTextColor","forwardRefs","computed","ref","VTabsSymbol","animate","genericComponent","omit","propsFactory","standardEasing","useRender","makeVTabProps","fixed","Boolean","sliderColor","String","hideSlider","direction","type","default","selectedClass","variant","VTab","name","props","setup","_ref","slots","attrs","textColorClasses","sliderColorClasses","textColorStyles","sliderColorStyles","rootEl","sliderEl","isHorizontal","isSelected","value","group","updateSlider","_ref2","prevEl","$el","parentElement","querySelector","nextEl","color","getComputedStyle","prevBox","getBoundingClientRect","nextBox","xy","XY","rightBottom","widthHeight","prevPos","nextPos","delta","origin","Math","sign","size","abs","scale","max","initialScale","sigma","backgroundColor","transform","transformOrigin","Array","fill","duration","easing","btnProps","filterProps","_createVNode","_mergeProps","class","style","undefined","_Fragment","text"],"sources":["../../../src/components/VTabs/VTab.tsx"],"sourcesContent":["// Styles\nimport './VTab.sass'\n\n// Components\nimport { makeVBtnProps, VBtn } from '@/components/VBtn/VBtn'\n\n// Composables\nimport { useTextColor } from '@/composables/color'\nimport { forwardRefs } from '@/composables/forwardRefs'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { VTabsSymbol } from './shared'\nimport { animate, genericComponent, omit, propsFactory, standardEasing, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { VBtnSlots } from '@/components/VBtn/VBtn'\n\nexport const makeVTabProps = propsFactory({\n  fixed: Boolean,\n\n  sliderColor: String,\n  hideSlider: Boolean,\n\n  direction: {\n    type: String as PropType<'horizontal' | 'vertical'>,\n    default: 'horizontal',\n  },\n\n  ...omit(makeVBtnProps({\n    selectedClass: 'v-tab--selected',\n    variant: 'text' as const,\n  }), [\n    'active',\n    'block',\n    'flat',\n    'location',\n    'position',\n    'symbol',\n  ]),\n}, 'VTab')\n\nexport const VTab = genericComponent<VBtnSlots>()({\n  name: 'VTab',\n\n  props: makeVTabProps(),\n\n  setup (props, { slots, attrs }) {\n    const { textColorClasses: sliderColorClasses, textColorStyles: sliderColorStyles } = useTextColor(props, 'sliderColor')\n\n    const rootEl = ref<VBtn>()\n    const sliderEl = ref<HTMLElement>()\n\n    const isHorizontal = computed(() => props.direction === 'horizontal')\n    const isSelected = computed(() => rootEl.value?.group?.isSelected.value ?? false)\n\n    function updateSlider ({ value }: { value: boolean }) {\n      if (value) {\n        const prevEl: HTMLElement | undefined = rootEl.value?.$el.parentElement?.querySelector('.v-tab--selected .v-tab__slider')\n        const nextEl = sliderEl.value\n\n        if (!prevEl || !nextEl) return\n\n        const color = getComputedStyle(prevEl).color\n\n        const prevBox = prevEl.getBoundingClientRect()\n        const nextBox = nextEl.getBoundingClientRect()\n\n        const xy = isHorizontal.value ? 'x' : 'y'\n        const XY = isHorizontal.value ? 'X' : 'Y'\n        const rightBottom = isHorizontal.value ? 'right' : 'bottom'\n        const widthHeight = isHorizontal.value ? 'width' : 'height'\n\n        const prevPos = prevBox[xy]\n        const nextPos = nextBox[xy]\n        const delta = prevPos > nextPos\n          ? prevBox[rightBottom] - nextBox[rightBottom]\n          : prevBox[xy] - nextBox[xy]\n        const origin =\n          Math.sign(delta) > 0 ? (isHorizontal.value ? 'right' : 'bottom')\n          : Math.sign(delta) < 0 ? (isHorizontal.value ? 'left' : 'top')\n          : 'center'\n        const size = Math.abs(delta) + (Math.sign(delta) < 0 ? prevBox[widthHeight] : nextBox[widthHeight])\n        const scale = size / Math.max(prevBox[widthHeight], nextBox[widthHeight]) || 0\n        const initialScale = prevBox[widthHeight] / nextBox[widthHeight] || 0\n\n        const sigma = 1.5\n        animate(nextEl, {\n          backgroundColor: [color, 'currentcolor'],\n          transform: [\n            `translate${XY}(${delta}px) scale${XY}(${initialScale})`,\n            `translate${XY}(${delta / sigma}px) scale${XY}(${(scale - 1) / sigma + 1})`,\n            'none',\n          ],\n          transformOrigin: Array(3).fill(origin),\n        }, {\n          duration: 225,\n          easing: standardEasing,\n        })\n      }\n    }\n\n    useRender(() => {\n      const btnProps = VBtn.filterProps(props)\n\n      return (\n        <VBtn\n          symbol={ VTabsSymbol }\n          ref={ rootEl }\n          class={[\n            'v-tab',\n            props.class,\n          ]}\n          style={ props.style }\n          tabindex={ isSelected.value ? 0 : -1 }\n          role=\"tab\"\n          aria-selected={ String(isSelected.value) }\n          active={ false }\n          { ...btnProps }\n          { ...attrs }\n          block={ props.fixed }\n          maxWidth={ props.fixed ? 300 : undefined }\n          onGroup:selected={ updateSlider }\n        >\n          {{\n            ...slots,\n            default: () => (\n              <>\n                { slots.default?.() ?? props.text }\n\n                { !props.hideSlider && (\n                  <div\n                    ref={ sliderEl }\n                    class={[\n                      'v-tab__slider',\n                      sliderColorClasses.value,\n                    ]}\n                    style={ sliderColorStyles.value }\n                  />\n                )}\n              </>\n            ),\n          }}\n        </VBtn>\n      )\n    })\n\n    return forwardRefs({}, rootEl)\n  },\n})\n\nexport type VTab = InstanceType<typeof VTab>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VTab.js","names":["makeVBtnProps","VBtn","useTextColor","forwardRefs","computed","ref","VTabsSymbol","animate","genericComponent","omit","propsFactory","standardEasing","useRender","makeVTabProps","fixed","Boolean","sliderColor","String","hideSlider","direction","type","default","selectedClass","variant","VTab","name","props","setup","_ref","slots","attrs","textColorClasses","sliderColorClasses","textColorStyles","sliderColorStyles","rootEl","sliderEl","isHorizontal","isSelected","value","group","updateSlider","_ref2","prevEl","$el","parentElement","querySelector","nextEl","color","getComputedStyle","prevBox","getBoundingClientRect","nextBox","xy","XY","rightBottom","widthHeight","prevPos","nextPos","delta","origin","Math","sign","size","abs","scale","max","initialScale","sigma","backgroundColor","transform","transformOrigin","Array","fill","duration","easing","btnProps","filterProps","_createVNode","_mergeProps","class","style","undefined","_Fragment","text"],"sources":["../../../src/components/VTabs/VTab.tsx"],"sourcesContent":["// Styles\nimport './VTab.sass'\n\n// Components\nimport { makeVBtnProps, VBtn } from '@/components/VBtn/VBtn'\n\n// Composables\nimport { useTextColor } from '@/composables/color'\nimport { forwardRefs } from '@/composables/forwardRefs'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { VTabsSymbol } from './shared'\nimport { animate, genericComponent, omit, propsFactory, standardEasing, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { VBtnSlots } from '@/components/VBtn/VBtn'\n\nexport const makeVTabProps = propsFactory({\n  fixed: Boolean,\n\n  sliderColor: String,\n  hideSlider: Boolean,\n\n  direction: {\n    type: String as PropType<'horizontal' | 'vertical'>,\n    default: 'horizontal',\n  },\n\n  ...omit(makeVBtnProps({\n    selectedClass: 'v-tab--selected',\n    variant: 'text' as const,\n  }), [\n    'active',\n    'block',\n    'flat',\n    'location',\n    'position',\n    'symbol',\n  ]),\n}, 'VTab')\n\nexport const VTab = genericComponent<VBtnSlots>()({\n  name: 'VTab',\n\n  props: makeVTabProps(),\n\n  setup (props, { slots, attrs }) {\n    const { textColorClasses: sliderColorClasses, textColorStyles: sliderColorStyles } = useTextColor(() => props.sliderColor)\n\n    const rootEl = ref<VBtn>()\n    const sliderEl = ref<HTMLElement>()\n\n    const isHorizontal = computed(() => props.direction === 'horizontal')\n    const isSelected = computed(() => rootEl.value?.group?.isSelected.value ?? false)\n\n    function updateSlider ({ value }: { value: boolean }) {\n      if (value) {\n        const prevEl: HTMLElement | undefined = rootEl.value?.$el.parentElement?.querySelector('.v-tab--selected .v-tab__slider')\n        const nextEl = sliderEl.value\n\n        if (!prevEl || !nextEl) return\n\n        const color = getComputedStyle(prevEl).color\n\n        const prevBox = prevEl.getBoundingClientRect()\n        const nextBox = nextEl.getBoundingClientRect()\n\n        const xy = isHorizontal.value ? 'x' : 'y'\n        const XY = isHorizontal.value ? 'X' : 'Y'\n        const rightBottom = isHorizontal.value ? 'right' : 'bottom'\n        const widthHeight = isHorizontal.value ? 'width' : 'height'\n\n        const prevPos = prevBox[xy]\n        const nextPos = nextBox[xy]\n        const delta = prevPos > nextPos\n          ? prevBox[rightBottom] - nextBox[rightBottom]\n          : prevBox[xy] - nextBox[xy]\n        const origin =\n          Math.sign(delta) > 0 ? (isHorizontal.value ? 'right' : 'bottom')\n          : Math.sign(delta) < 0 ? (isHorizontal.value ? 'left' : 'top')\n          : 'center'\n        const size = Math.abs(delta) + (Math.sign(delta) < 0 ? prevBox[widthHeight] : nextBox[widthHeight])\n        const scale = size / Math.max(prevBox[widthHeight], nextBox[widthHeight]) || 0\n        const initialScale = prevBox[widthHeight] / nextBox[widthHeight] || 0\n\n        const sigma = 1.5\n        animate(nextEl, {\n          backgroundColor: [color, 'currentcolor'],\n          transform: [\n            `translate${XY}(${delta}px) scale${XY}(${initialScale})`,\n            `translate${XY}(${delta / sigma}px) scale${XY}(${(scale - 1) / sigma + 1})`,\n            'none',\n          ],\n          transformOrigin: Array(3).fill(origin),\n        }, {\n          duration: 225,\n          easing: standardEasing,\n        })\n      }\n    }\n\n    useRender(() => {\n      const btnProps = VBtn.filterProps(props)\n\n      return (\n        <VBtn\n          symbol={ VTabsSymbol }\n          ref={ rootEl }\n          class={[\n            'v-tab',\n            props.class,\n          ]}\n          style={ props.style }\n          tabindex={ isSelected.value ? 0 : -1 }\n          role=\"tab\"\n          aria-selected={ String(isSelected.value) }\n          active={ false }\n          { ...btnProps }\n          { ...attrs }\n          block={ props.fixed }\n          maxWidth={ props.fixed ? 300 : undefined }\n          onGroup:selected={ updateSlider }\n        >\n          {{\n            ...slots,\n            default: () => (\n              <>\n                { slots.default?.() ?? props.text }\n\n                { !props.hideSlider && (\n                  <div\n                    ref={ sliderEl }\n                    class={[\n                      'v-tab__slider',\n                      sliderColorClasses.value,\n                    ]}\n                    style={ sliderColorStyles.value }\n                  />\n                )}\n              </>\n            ),\n          }}\n        </VBtn>\n      )\n    })\n\n    return forwardRefs({}, rootEl)\n  },\n})\n\nexport type VTab = InstanceType<typeof VTab>\n"],"mappings":"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","ignoreList":[]}

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":"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","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