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

package/lib/components/VDatePicker/VDatePickerMonth.js

@@ -7,7 +7,7 @@ import { VBtn } from "../VBtn/index.js"; // Composables
 import { makeCalendarProps, useCalendar } from "../../composables/calendar.js";
 import { useDate } from "../../composables/date/date.js";
 import { MaybeTransition } from "../../composables/transition.js"; // Utilities
-import { computed, ref, shallowRef, watch } from 'vue';
+import { computed, ref, shallowRef, toRef, watch } from 'vue';
 import { genericComponent, omit, propsFactory, useRender } from "../../util/index.js"; // Types
 export const makeVDatePickerMonthProps = propsFactory({
   color: String,
@@ -47,7 +47,7 @@ export const VDatePickerMonth = genericComponent()({
     const rangeStart = shallowRef();
     const rangeStop = shallowRef();
     const isReverse = shallowRef(false);
-    const transition = computed(() => {
+    const transition = toRef(() => {
       return !isReverse.value ? props.transition : props.reverseTransition;
     });
     if (props.multiple === 'range' && model.value.length > 0) {

package/lib/components/VDatePicker/VDatePickerMonth.js.map

@@ -1 +1 @@
-{"version":3,"file":"VDatePickerMonth.js","names":["VBtn","makeCalendarProps","useCalendar","useDate","MaybeTransition","computed","ref","shallowRef","watch","genericComponent","omit","propsFactory","useRender","makeVDatePickerMonthProps","color","String","hideWeekdays","Boolean","multiple","Number","showWeek","transition","type","default","reverseTransition","VDatePickerMonth","name","props","emits","date","setup","_ref","emit","slots","daysRef","daysInMonth","model","weekNumbers","adapter","rangeStart","rangeStop","isReverse","value","length","atMax","max","includes","Infinity","val","oldVal","isBefore","onRangeClick","_value","startOfDay","undefined","isSameDay","endOfDay","diff","getDiff","datesInRange","i","nextDate","addDays","push","onMultipleClick","index","findIndex","selection","splice","onClick","_createVNode","_createTextVNode","map","week","toString","getWeekdays","firstDayOfWeek","weekDay","item","slotProps","class","isSelected","isToday","disabled","isDisabled","icon","ripple","text","localized","variant","isAdjacent","isHidden","isWeekEnd","isWeekStart","isoDate","showAdjacentMonths","day"],"sources":["../../../src/components/VDatePicker/VDatePickerMonth.tsx"],"sourcesContent":["// Styles\nimport './VDatePickerMonth.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { makeCalendarProps, useCalendar } from '@/composables/calendar'\nimport { useDate } from '@/composables/date/date'\nimport { MaybeTransition } from '@/composables/transition'\n\n// Utilities\nimport { computed, ref, shallowRef, watch } from 'vue'\nimport { genericComponent, omit, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport type VDatePickerMonthSlots = {\n  day: {\n    props: {\n      onClick: () => void\n    }\n    item: any\n    i: number\n  }\n}\n\nexport const makeVDatePickerMonthProps = propsFactory({\n  color: String,\n  hideWeekdays: Boolean,\n  multiple: [Boolean, Number, String] as PropType<boolean | 'range' | number | (string & {})>,\n  showWeek: Boolean,\n  transition: {\n    type: String,\n    default: 'picker-transition',\n  },\n  reverseTransition: {\n    type: String,\n    default: 'picker-reverse-transition',\n  },\n\n  ...omit(makeCalendarProps(), ['displayValue']),\n}, 'VDatePickerMonth')\n\nexport const VDatePickerMonth = genericComponent<VDatePickerMonthSlots>()({\n  name: 'VDatePickerMonth',\n\n  props: makeVDatePickerMonthProps(),\n\n  emits: {\n    'update:modelValue': (date: unknown) => true,\n    'update:month': (date: number) => true,\n    'update:year': (date: number) => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const daysRef = ref()\n\n    const { daysInMonth, model, weekNumbers } = useCalendar(props)\n    const adapter = useDate()\n\n    const rangeStart = shallowRef()\n    const rangeStop = shallowRef()\n    const isReverse = shallowRef(false)\n\n    const transition = computed(() => {\n      return !isReverse.value ? props.transition : props.reverseTransition\n    })\n\n    if (props.multiple === 'range' && model.value.length > 0) {\n      rangeStart.value = model.value[0]\n      if (model.value.length > 1) {\n        rangeStop.value = model.value[model.value.length - 1]\n      }\n    }\n\n    const atMax = computed(() => {\n      const max = ['number', 'string'].includes(typeof props.multiple) ? Number(props.multiple) : Infinity\n\n      return model.value.length >= max\n    })\n\n    watch(daysInMonth, (val, oldVal) => {\n      if (!oldVal) return\n\n      isReverse.value = adapter.isBefore(val[0].date, oldVal[0].date)\n    })\n\n    function onRangeClick (value: unknown) {\n      const _value = adapter.startOfDay(value)\n\n      if (model.value.length === 0) {\n        rangeStart.value = undefined\n      } else if (model.value.length === 1) {\n        rangeStart.value = model.value[0]\n        rangeStop.value = undefined\n      }\n      if (!rangeStart.value) {\n        rangeStart.value = _value\n        model.value = [rangeStart.value]\n      } else if (!rangeStop.value) {\n        if (adapter.isSameDay(_value, rangeStart.value)) {\n          rangeStart.value = undefined\n          model.value = []\n          return\n        } else if (adapter.isBefore(_value, rangeStart.value)) {\n          rangeStop.value = adapter.endOfDay(rangeStart.value)\n          rangeStart.value = _value\n        } else {\n          rangeStop.value = adapter.endOfDay(_value)\n        }\n\n        const diff = adapter.getDiff(rangeStop.value, rangeStart.value, 'days')\n        const datesInRange = [rangeStart.value]\n\n        for (let i = 1; i < diff; i++) {\n          const nextDate = adapter.addDays(rangeStart.value, i)\n          datesInRange.push(nextDate)\n        }\n\n        datesInRange.push(rangeStop.value)\n\n        model.value = datesInRange\n      } else {\n        rangeStart.value = value\n        rangeStop.value = undefined\n        model.value = [rangeStart.value]\n      }\n    }\n\n    function onMultipleClick (value: unknown) {\n      const index = model.value.findIndex(selection => adapter.isSameDay(selection, value))\n\n      if (index === -1) {\n        model.value = [...model.value, value]\n      } else {\n        const value = [...model.value]\n        value.splice(index, 1)\n        model.value = value\n      }\n    }\n\n    function onClick (value: unknown) {\n      if (props.multiple === 'range') {\n        onRangeClick(value)\n      } else if (props.multiple) {\n        onMultipleClick(value)\n      } else {\n        model.value = [value]\n      }\n    }\n\n    useRender(() => (\n      <div class=\"v-date-picker-month\">\n        { props.showWeek && (\n          <div key=\"weeks\" class=\"v-date-picker-month__weeks\">\n            { !props.hideWeekdays && (\n              <div key=\"hide-week-days\" class=\"v-date-picker-month__day\">&nbsp;</div>\n            )}\n            { weekNumbers.value.map(week => (\n              <div\n                class={[\n                  'v-date-picker-month__day',\n                  'v-date-picker-month__day--adjacent',\n                ]}\n              >{ week }</div>\n            ))}\n          </div>\n        )}\n\n        <MaybeTransition name={ transition.value }>\n          <div\n            ref={ daysRef }\n            key={ daysInMonth.value[0].date?.toString() }\n            class=\"v-date-picker-month__days\"\n          >\n            { !props.hideWeekdays && adapter.getWeekdays(props.firstDayOfWeek).map(weekDay => (\n              <div\n                class={[\n                  'v-date-picker-month__day',\n                  'v-date-picker-month__weekday',\n                ]}\n              >{ weekDay }</div>\n            ))}\n\n            { daysInMonth.value.map((item, i) => {\n              const slotProps = {\n                props: {\n                  class: 'v-date-picker-month__day-btn',\n                  color: item.isSelected || item.isToday ? props.color : undefined,\n                  disabled: item.isDisabled,\n                  icon: true,\n                  ripple: false,\n                  text: item.localized,\n                  variant: item.isSelected ? 'flat' : item.isToday ? 'outlined' : 'text',\n                  onClick: () => onClick(item.date),\n                },\n                item,\n                i,\n              } as const\n\n              if (atMax.value && !item.isSelected) {\n                item.isDisabled = true\n              }\n\n              return (\n                <div\n                  class={[\n                    'v-date-picker-month__day',\n                    {\n                      'v-date-picker-month__day--adjacent': item.isAdjacent,\n                      'v-date-picker-month__day--hide-adjacent': item.isHidden,\n                      'v-date-picker-month__day--selected': item.isSelected,\n                      'v-date-picker-month__day--week-end': item.isWeekEnd,\n                      'v-date-picker-month__day--week-start': item.isWeekStart,\n                    },\n                  ]}\n                  data-v-date={ !item.isDisabled ? item.isoDate : undefined }\n                >\n                  { (props.showAdjacentMonths || !item.isAdjacent) && (\n                    slots.day?.(slotProps) ?? (<VBtn { ...slotProps.props } />)\n                  )}\n                </div>\n              )\n            })}\n          </div>\n        </MaybeTransition>\n      </div>\n    ))\n  },\n})\n\nexport type VDatePickerMonth = InstanceType<typeof VDatePickerMonth>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VDatePickerMonth.js","names":["VBtn","makeCalendarProps","useCalendar","useDate","MaybeTransition","computed","ref","shallowRef","toRef","watch","genericComponent","omit","propsFactory","useRender","makeVDatePickerMonthProps","color","String","hideWeekdays","Boolean","multiple","Number","showWeek","transition","type","default","reverseTransition","VDatePickerMonth","name","props","emits","date","setup","_ref","emit","slots","daysRef","daysInMonth","model","weekNumbers","adapter","rangeStart","rangeStop","isReverse","value","length","atMax","max","includes","Infinity","val","oldVal","isBefore","onRangeClick","_value","startOfDay","undefined","isSameDay","endOfDay","diff","getDiff","datesInRange","i","nextDate","addDays","push","onMultipleClick","index","findIndex","selection","splice","onClick","_createVNode","_createTextVNode","map","week","toString","getWeekdays","firstDayOfWeek","weekDay","item","slotProps","class","isSelected","isToday","disabled","isDisabled","icon","ripple","text","localized","variant","isAdjacent","isHidden","isWeekEnd","isWeekStart","isoDate","showAdjacentMonths","day"],"sources":["../../../src/components/VDatePicker/VDatePickerMonth.tsx"],"sourcesContent":["// Styles\nimport './VDatePickerMonth.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { makeCalendarProps, useCalendar } from '@/composables/calendar'\nimport { useDate } from '@/composables/date/date'\nimport { MaybeTransition } from '@/composables/transition'\n\n// Utilities\nimport { computed, ref, shallowRef, toRef, watch } from 'vue'\nimport { genericComponent, omit, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport type VDatePickerMonthSlots = {\n  day: {\n    props: {\n      onClick: () => void\n    }\n    item: any\n    i: number\n  }\n}\n\nexport const makeVDatePickerMonthProps = propsFactory({\n  color: String,\n  hideWeekdays: Boolean,\n  multiple: [Boolean, Number, String] as PropType<boolean | 'range' | number | (string & {})>,\n  showWeek: Boolean,\n  transition: {\n    type: String,\n    default: 'picker-transition',\n  },\n  reverseTransition: {\n    type: String,\n    default: 'picker-reverse-transition',\n  },\n\n  ...omit(makeCalendarProps(), ['displayValue']),\n}, 'VDatePickerMonth')\n\nexport const VDatePickerMonth = genericComponent<VDatePickerMonthSlots>()({\n  name: 'VDatePickerMonth',\n\n  props: makeVDatePickerMonthProps(),\n\n  emits: {\n    'update:modelValue': (date: unknown) => true,\n    'update:month': (date: number) => true,\n    'update:year': (date: number) => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const daysRef = ref()\n\n    const { daysInMonth, model, weekNumbers } = useCalendar(props)\n    const adapter = useDate()\n\n    const rangeStart = shallowRef()\n    const rangeStop = shallowRef()\n    const isReverse = shallowRef(false)\n\n    const transition = toRef(() => {\n      return !isReverse.value ? props.transition : props.reverseTransition\n    })\n\n    if (props.multiple === 'range' && model.value.length > 0) {\n      rangeStart.value = model.value[0]\n      if (model.value.length > 1) {\n        rangeStop.value = model.value[model.value.length - 1]\n      }\n    }\n\n    const atMax = computed(() => {\n      const max = ['number', 'string'].includes(typeof props.multiple) ? Number(props.multiple) : Infinity\n\n      return model.value.length >= max\n    })\n\n    watch(daysInMonth, (val, oldVal) => {\n      if (!oldVal) return\n\n      isReverse.value = adapter.isBefore(val[0].date, oldVal[0].date)\n    })\n\n    function onRangeClick (value: unknown) {\n      const _value = adapter.startOfDay(value)\n\n      if (model.value.length === 0) {\n        rangeStart.value = undefined\n      } else if (model.value.length === 1) {\n        rangeStart.value = model.value[0]\n        rangeStop.value = undefined\n      }\n      if (!rangeStart.value) {\n        rangeStart.value = _value\n        model.value = [rangeStart.value]\n      } else if (!rangeStop.value) {\n        if (adapter.isSameDay(_value, rangeStart.value)) {\n          rangeStart.value = undefined\n          model.value = []\n          return\n        } else if (adapter.isBefore(_value, rangeStart.value)) {\n          rangeStop.value = adapter.endOfDay(rangeStart.value)\n          rangeStart.value = _value\n        } else {\n          rangeStop.value = adapter.endOfDay(_value)\n        }\n\n        const diff = adapter.getDiff(rangeStop.value, rangeStart.value, 'days')\n        const datesInRange = [rangeStart.value]\n\n        for (let i = 1; i < diff; i++) {\n          const nextDate = adapter.addDays(rangeStart.value, i)\n          datesInRange.push(nextDate)\n        }\n\n        datesInRange.push(rangeStop.value)\n\n        model.value = datesInRange\n      } else {\n        rangeStart.value = value\n        rangeStop.value = undefined\n        model.value = [rangeStart.value]\n      }\n    }\n\n    function onMultipleClick (value: unknown) {\n      const index = model.value.findIndex(selection => adapter.isSameDay(selection, value))\n\n      if (index === -1) {\n        model.value = [...model.value, value]\n      } else {\n        const value = [...model.value]\n        value.splice(index, 1)\n        model.value = value\n      }\n    }\n\n    function onClick (value: unknown) {\n      if (props.multiple === 'range') {\n        onRangeClick(value)\n      } else if (props.multiple) {\n        onMultipleClick(value)\n      } else {\n        model.value = [value]\n      }\n    }\n\n    useRender(() => (\n      <div class=\"v-date-picker-month\">\n        { props.showWeek && (\n          <div key=\"weeks\" class=\"v-date-picker-month__weeks\">\n            { !props.hideWeekdays && (\n              <div key=\"hide-week-days\" class=\"v-date-picker-month__day\">&nbsp;</div>\n            )}\n            { weekNumbers.value.map(week => (\n              <div\n                class={[\n                  'v-date-picker-month__day',\n                  'v-date-picker-month__day--adjacent',\n                ]}\n              >{ week }</div>\n            ))}\n          </div>\n        )}\n\n        <MaybeTransition name={ transition.value }>\n          <div\n            ref={ daysRef }\n            key={ daysInMonth.value[0].date?.toString() }\n            class=\"v-date-picker-month__days\"\n          >\n            { !props.hideWeekdays && adapter.getWeekdays(props.firstDayOfWeek).map(weekDay => (\n              <div\n                class={[\n                  'v-date-picker-month__day',\n                  'v-date-picker-month__weekday',\n                ]}\n              >{ weekDay }</div>\n            ))}\n\n            { daysInMonth.value.map((item, i) => {\n              const slotProps = {\n                props: {\n                  class: 'v-date-picker-month__day-btn',\n                  color: item.isSelected || item.isToday ? props.color : undefined,\n                  disabled: item.isDisabled,\n                  icon: true,\n                  ripple: false,\n                  text: item.localized,\n                  variant: item.isSelected ? 'flat' : item.isToday ? 'outlined' : 'text',\n                  onClick: () => onClick(item.date),\n                },\n                item,\n                i,\n              } as const\n\n              if (atMax.value && !item.isSelected) {\n                item.isDisabled = true\n              }\n\n              return (\n                <div\n                  class={[\n                    'v-date-picker-month__day',\n                    {\n                      'v-date-picker-month__day--adjacent': item.isAdjacent,\n                      'v-date-picker-month__day--hide-adjacent': item.isHidden,\n                      'v-date-picker-month__day--selected': item.isSelected,\n                      'v-date-picker-month__day--week-end': item.isWeekEnd,\n                      'v-date-picker-month__day--week-start': item.isWeekStart,\n                    },\n                  ]}\n                  data-v-date={ !item.isDisabled ? item.isoDate : undefined }\n                >\n                  { (props.showAdjacentMonths || !item.isAdjacent) && (\n                    slots.day?.(slotProps) ?? (<VBtn { ...slotProps.props } />)\n                  )}\n                </div>\n              )\n            })}\n          </div>\n        </MaybeTransition>\n      </div>\n    ))\n  },\n})\n\nexport type VDatePickerMonth = InstanceType<typeof VDatePickerMonth>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VDialog/VDialog.d.ts

@@ -651,7 +651,7 @@ export declare const VDialog: {
             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;
@@ -826,7 +826,7 @@ export declare const VDialog: {
         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: {
@@ -836,7 +836,7 @@ export declare const VDialog: {
             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, {
@@ -1186,7 +1186,7 @@ export declare const VDialog: {
             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;
@@ -1361,7 +1361,7 @@ export declare const VDialog: {
         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: {
@@ -1371,7 +1371,7 @@ export declare const VDialog: {
             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>;
         } | {};
     }, {}, {}, {}, {
@@ -1705,7 +1705,7 @@ export declare const VDialog: {
         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;
@@ -1880,7 +1880,7 @@ export declare const VDialog: {
     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: {
@@ -1890,7 +1890,7 @@ export declare const VDialog: {
         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/VDivider/VDivider.js

@@ -6,7 +6,7 @@ import "./VDivider.css";
 import { useTextColor } from "../../composables/color.js";
 import { makeComponentProps } from "../../composables/component.js";
 import { makeThemeProps, provideTheme } from "../../composables/theme.js"; // Utilities
-import { computed, toRef } from 'vue';
+import { computed } from 'vue';
 import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.js";
 export const makeVDividerProps = propsFactory({
   color: String,
@@ -32,7 +32,7 @@ export const VDivider = genericComponent()({
     const {
       textColorClasses,
       textColorStyles
-    } = useTextColor(toRef(props, 'color'));
+    } = useTextColor(() => props.color);
     const dividerStyles = computed(() => {
       const styles = {};
       if (props.length) {

package/lib/components/VDivider/VDivider.js.map

@@ -1 +1 @@
-{"version":3,"file":"VDivider.js","names":["useTextColor","makeComponentProps","makeThemeProps","provideTheme","computed","toRef","convertToUnit","genericComponent","propsFactory","useRender","makeVDividerProps","color","String","inset","Boolean","length","Number","opacity","thickness","vertical","VDivider","name","props","setup","_ref","attrs","slots","themeClasses","textColorClasses","textColorStyles","dividerStyles","styles","divider","_createVNode","value","class","style","role","undefined","default"],"sources":["../../../src/components/VDivider/VDivider.tsx"],"sourcesContent":["// Styles\nimport './VDivider.sass'\n\n// Composables\nimport { useTextColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\ntype DividerKey = 'borderRightWidth' | 'borderTopWidth' | 'height' | 'width'\ntype DividerStyles = Partial<Record<DividerKey, string>>\n\nexport const makeVDividerProps = propsFactory({\n  color: String,\n  inset: Boolean,\n  length: [Number, String],\n  opacity: [Number, String],\n  thickness: [Number, String],\n  vertical: Boolean,\n\n  ...makeComponentProps(),\n  ...makeThemeProps(),\n}, 'VDivider')\n\nexport const VDivider = genericComponent()({\n  name: 'VDivider',\n\n  props: makeVDividerProps(),\n\n  setup (props, { attrs, slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color'))\n    const dividerStyles = computed(() => {\n      const styles: DividerStyles = {}\n\n      if (props.length) {\n        styles[props.vertical ? 'height' : 'width'] = convertToUnit(props.length)\n      }\n\n      if (props.thickness) {\n        styles[props.vertical ? 'borderRightWidth' : 'borderTopWidth'] = convertToUnit(props.thickness)\n      }\n\n      return styles\n    })\n\n    useRender(() => {\n      const divider = (\n        <hr\n          class={[\n            {\n              'v-divider': true,\n              'v-divider--inset': props.inset,\n              'v-divider--vertical': props.vertical,\n            },\n            themeClasses.value,\n            textColorClasses.value,\n            props.class,\n          ]}\n          style={[\n            dividerStyles.value,\n            textColorStyles.value,\n            { '--v-border-opacity': props.opacity },\n            props.style,\n          ]}\n          aria-orientation={\n            !attrs.role || attrs.role === 'separator'\n              ? props.vertical ? 'vertical' : 'horizontal'\n              : undefined\n          }\n          role={ `${attrs.role || 'separator'}` }\n        />\n      )\n\n      if (!slots.default) return divider\n\n      return (\n        <div\n          class={[\n            'v-divider__wrapper',\n            {\n              'v-divider__wrapper--vertical': props.vertical,\n              'v-divider__wrapper--inset': props.inset,\n            },\n          ]}\n        >\n          { divider }\n\n          <div class=\"v-divider__content\">\n            { slots.default() }\n          </div>\n\n          { divider }\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VDivider = InstanceType<typeof VDivider>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VDivider.js","names":["useTextColor","makeComponentProps","makeThemeProps","provideTheme","computed","convertToUnit","genericComponent","propsFactory","useRender","makeVDividerProps","color","String","inset","Boolean","length","Number","opacity","thickness","vertical","VDivider","name","props","setup","_ref","attrs","slots","themeClasses","textColorClasses","textColorStyles","dividerStyles","styles","divider","_createVNode","value","class","style","role","undefined","default"],"sources":["../../../src/components/VDivider/VDivider.tsx"],"sourcesContent":["// Styles\nimport './VDivider.sass'\n\n// Composables\nimport { useTextColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { computed } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\ntype DividerKey = 'borderRightWidth' | 'borderTopWidth' | 'height' | 'width'\ntype DividerStyles = Partial<Record<DividerKey, string>>\n\nexport const makeVDividerProps = propsFactory({\n  color: String,\n  inset: Boolean,\n  length: [Number, String],\n  opacity: [Number, String],\n  thickness: [Number, String],\n  vertical: Boolean,\n\n  ...makeComponentProps(),\n  ...makeThemeProps(),\n}, 'VDivider')\n\nexport const VDivider = genericComponent()({\n  name: 'VDivider',\n\n  props: makeVDividerProps(),\n\n  setup (props, { attrs, slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { textColorClasses, textColorStyles } = useTextColor(() => props.color)\n    const dividerStyles = computed(() => {\n      const styles: DividerStyles = {}\n\n      if (props.length) {\n        styles[props.vertical ? 'height' : 'width'] = convertToUnit(props.length)\n      }\n\n      if (props.thickness) {\n        styles[props.vertical ? 'borderRightWidth' : 'borderTopWidth'] = convertToUnit(props.thickness)\n      }\n\n      return styles\n    })\n\n    useRender(() => {\n      const divider = (\n        <hr\n          class={[\n            {\n              'v-divider': true,\n              'v-divider--inset': props.inset,\n              'v-divider--vertical': props.vertical,\n            },\n            themeClasses.value,\n            textColorClasses.value,\n            props.class,\n          ]}\n          style={[\n            dividerStyles.value,\n            textColorStyles.value,\n            { '--v-border-opacity': props.opacity },\n            props.style,\n          ]}\n          aria-orientation={\n            !attrs.role || attrs.role === 'separator'\n              ? props.vertical ? 'vertical' : 'horizontal'\n              : undefined\n          }\n          role={ `${attrs.role || 'separator'}` }\n        />\n      )\n\n      if (!slots.default) return divider\n\n      return (\n        <div\n          class={[\n            'v-divider__wrapper',\n            {\n              'v-divider__wrapper--vertical': props.vertical,\n              'v-divider__wrapper--inset': props.inset,\n            },\n          ]}\n        >\n          { divider }\n\n          <div class=\"v-divider__content\">\n            { slots.default() }\n          </div>\n\n          { divider }\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VDivider = InstanceType<typeof VDivider>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,YAAY;AAAA,SACZC,kBAAkB;AAAA,SAClBC,cAAc,EAAEC,YAAY,sCAErC;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,aAAa,EAAEC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAKjE,OAAO,MAAMC,iBAAiB,GAAGF,YAAY,CAAC;EAC5CG,KAAK,EAAEC,MAAM;EACbC,KAAK,EAAEC,OAAO;EACdC,MAAM,EAAE,CAACC,MAAM,EAAEJ,MAAM,CAAC;EACxBK,OAAO,EAAE,CAACD,MAAM,EAAEJ,MAAM,CAAC;EACzBM,SAAS,EAAE,CAACF,MAAM,EAAEJ,MAAM,CAAC;EAC3BO,QAAQ,EAAEL,OAAO;EAEjB,GAAGZ,kBAAkB,CAAC,CAAC;EACvB,GAAGC,cAAc,CAAC;AACpB,CAAC,EAAE,UAAU,CAAC;AAEd,OAAO,MAAMiB,QAAQ,GAAGb,gBAAgB,CAAC,CAAC,CAAC;EACzCc,IAAI,EAAE,UAAU;EAEhBC,KAAK,EAAEZ,iBAAiB,CAAC,CAAC;EAE1Ba,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAoB;IAAA,IAAlB;MAAEC,KAAK;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC5B,MAAM;MAAEG;IAAa,CAAC,GAAGvB,YAAY,CAACkB,KAAK,CAAC;IAC5C,MAAM;MAAEM,gBAAgB;MAAEC;IAAgB,CAAC,GAAG5B,YAAY,CAAC,MAAMqB,KAAK,CAACX,KAAK,CAAC;IAC7E,MAAMmB,aAAa,GAAGzB,QAAQ,CAAC,MAAM;MACnC,MAAM0B,MAAqB,GAAG,CAAC,CAAC;MAEhC,IAAIT,KAAK,CAACP,MAAM,EAAE;QAChBgB,MAAM,CAACT,KAAK,CAACH,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAGb,aAAa,CAACgB,KAAK,CAACP,MAAM,CAAC;MAC3E;MAEA,IAAIO,KAAK,CAACJ,SAAS,EAAE;QACnBa,MAAM,CAACT,KAAK,CAACH,QAAQ,GAAG,kBAAkB,GAAG,gBAAgB,CAAC,GAAGb,aAAa,CAACgB,KAAK,CAACJ,SAAS,CAAC;MACjG;MAEA,OAAOa,MAAM;IACf,CAAC,CAAC;IAEFtB,SAAS,CAAC,MAAM;MACd,MAAMuB,OAAO,GAAAC,YAAA;QAAA,SAEF,CACL;UACE,WAAW,EAAE,IAAI;UACjB,kBAAkB,EAAEX,KAAK,CAACT,KAAK;UAC/B,qBAAqB,EAAES,KAAK,CAACH;QAC/B,CAAC,EACDQ,YAAY,CAACO,KAAK,EAClBN,gBAAgB,CAACM,KAAK,EACtBZ,KAAK,CAACa,KAAK,CACZ;QAAA,SACM,CACLL,aAAa,CAACI,KAAK,EACnBL,eAAe,CAACK,KAAK,EACrB;UAAE,oBAAoB,EAAEZ,KAAK,CAACL;QAAQ,CAAC,EACvCK,KAAK,CAACc,KAAK,CACZ;QAAA,oBAEC,CAACX,KAAK,CAACY,IAAI,IAAIZ,KAAK,CAACY,IAAI,KAAK,WAAW,GACrCf,KAAK,CAACH,QAAQ,GAAG,UAAU,GAAG,YAAY,GAC1CmB,SAAS;QAAA,QAER,GAAGb,KAAK,CAACY,IAAI,IAAI,WAAW;MAAE,QAExC;MAED,IAAI,CAACX,KAAK,CAACa,OAAO,EAAE,OAAOP,OAAO;MAElC,OAAAC,YAAA;QAAA,SAEW,CACL,oBAAoB,EACpB;UACE,8BAA8B,EAAEX,KAAK,CAACH,QAAQ;UAC9C,2BAA2B,EAAEG,KAAK,CAACT;QACrC,CAAC;MACF,IAECmB,OAAO,EAAAC,YAAA;QAAA;MAAA,IAGLP,KAAK,CAACa,OAAO,CAAC,CAAC,IAGjBP,OAAO;IAGf,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/components/VEmptyState/VEmptyState.js

@@ -14,7 +14,6 @@ import { useDisplay } from "../../composables/display.js";
 import { IconValue } from "../../composables/icons.js";
 import { makeSizeProps } from "../../composables/size.js";
 import { makeThemeProps, provideTheme } from "../../composables/theme.js"; // Utilities
-import { toRef } from 'vue';
 import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
 // Types
 export const makeVEmptyStateProps = propsFactory({
@@ -60,7 +59,7 @@ export const VEmptyState = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(toRef(props, 'bgColor'));
+    } = useBackgroundColor(() => props.bgColor);
     const {
       dimensionStyles
     } = useDimension(props);

package/lib/components/VEmptyState/VEmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"VEmptyState.js","names":["VBtn","VDefaultsProvider","VIcon","VImg","useBackgroundColor","makeComponentProps","makeDimensionProps","useDimension","useDisplay","IconValue","makeSizeProps","makeThemeProps","provideTheme","toRef","convertToUnit","genericComponent","propsFactory","useRender","makeVEmptyStateProps","actionText","String","bgColor","color","icon","image","justify","type","default","headline","title","text","textWidth","Number","href","to","size","undefined","VEmptyState","name","props","emits","e","setup","_ref","emit","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","dimensionStyles","displayClasses","onClickAction","hasActions","actions","hasHeadline","hasTitle","hasText","hasMedia","media","_createVNode","value","class","style","_Fragment","src","height","maxWidth","onClick"],"sources":["../../../src/components/VEmptyState/VEmptyState.tsx"],"sourcesContent":["// Styles\nimport './VEmptyState.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\nimport { VImg } from '@/components/VImg'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { useDisplay } from '@/composables/display'\nimport { IconValue } from '@/composables/icons'\nimport { makeSizeProps } from '@/composables/size'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { toRef } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\n// Types\n\nexport type VEmptyStateSlots = {\n  actions: {\n    props: {\n      onClick: (e: Event) => void\n    }\n  }\n  default: never\n  headline: never\n  title: never\n  media: never\n  text: never\n}\n\nexport const makeVEmptyStateProps = propsFactory({\n  actionText: String,\n  bgColor: String,\n  color: String,\n  icon: IconValue,\n  image: String,\n  justify: {\n    type: String as PropType<'start' | 'center' | 'end'>,\n    default: 'center',\n  },\n  headline: String,\n  title: String,\n  text: String,\n  textWidth: {\n    type: [Number, String],\n    default: 500,\n  },\n  href: String,\n  to: String,\n\n  ...makeComponentProps(),\n  ...makeDimensionProps(),\n  ...makeSizeProps({ size: undefined }),\n  ...makeThemeProps(),\n}, 'VEmptyState')\n\nexport const VEmptyState = genericComponent<VEmptyStateSlots>()({\n  name: 'VEmptyState',\n\n  props: makeVEmptyStateProps(),\n\n  emits: {\n    'click:action': (e: Event) => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor'))\n    const { dimensionStyles } = useDimension(props)\n    const { displayClasses } = useDisplay()\n\n    function onClickAction (e: Event) {\n      emit('click:action', e)\n    }\n\n    useRender(() => {\n      const hasActions = !!(slots.actions || props.actionText)\n      const hasHeadline = !!(slots.headline || props.headline)\n      const hasTitle = !!(slots.title || props.title)\n      const hasText = !!(slots.text || props.text)\n      const hasMedia = !!(slots.media || props.image || props.icon)\n      const size = props.size || (props.image ? 200 : 96)\n\n      return (\n        <div\n          class={[\n            'v-empty-state',\n            {\n              [`v-empty-state--${props.justify}`]: true,\n            },\n            themeClasses.value,\n            backgroundColorClasses.value,\n            displayClasses.value,\n            props.class,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n            dimensionStyles.value,\n            props.style,\n          ]}\n        >\n          { hasMedia && (\n            <div key=\"media\" class=\"v-empty-state__media\">\n              { !slots.media ? (\n                <>\n                  { props.image ? (\n                    <VImg\n                      key=\"image\"\n                      src={ props.image }\n                      height={ size }\n                    />\n                  ) : props.icon ? (\n                    <VIcon\n                      key=\"icon\"\n                      color={ props.color }\n                      size={ size }\n                      icon={ props.icon }\n                    />\n                  ) : undefined }\n                </>\n              ) : (\n                <VDefaultsProvider\n                  key=\"media-defaults\"\n                  defaults={{\n                    VImg: {\n                      src: props.image,\n                      height: size,\n                    },\n                    VIcon: {\n                      size,\n                      icon: props.icon,\n                    },\n                  }}\n                >\n                  { slots.media() }\n                </VDefaultsProvider>\n              )}\n            </div>\n          )}\n\n          { hasHeadline && (\n            <div key=\"headline\" class=\"v-empty-state__headline\">\n              { slots.headline?.() ?? props.headline }\n            </div>\n          )}\n\n          { hasTitle && (\n            <div key=\"title\" class=\"v-empty-state__title\">\n              { slots.title?.() ?? props.title }\n            </div>\n          )}\n\n          { hasText && (\n            <div\n              key=\"text\"\n              class=\"v-empty-state__text\"\n              style={{\n                maxWidth: convertToUnit(props.textWidth),\n              }}\n            >\n              { slots.text?.() ?? props.text }\n            </div>\n          )}\n\n          { slots.default && (\n            <div key=\"content\" class=\"v-empty-state__content\">\n              { slots.default() }\n            </div>\n          )}\n\n          { hasActions && (\n            <div key=\"actions\" class=\"v-empty-state__actions\">\n              <VDefaultsProvider\n                defaults={{\n                  VBtn: {\n                    class: 'v-empty-state__action-btn',\n                    color: props.color ?? 'surface-variant',\n                    href: props.href,\n                    text: props.actionText,\n                    to: props.to,\n                  },\n                }}\n              >\n                {\n                  slots.actions?.({ props: { onClick: onClickAction } }) ?? (\n                    <VBtn onClick={ onClickAction } />\n                  )\n                }\n              </VDefaultsProvider>\n            </div>\n          )}\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VEmptyState = InstanceType<typeof VEmptyState>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VEmptyState.js","names":["VBtn","VDefaultsProvider","VIcon","VImg","useBackgroundColor","makeComponentProps","makeDimensionProps","useDimension","useDisplay","IconValue","makeSizeProps","makeThemeProps","provideTheme","convertToUnit","genericComponent","propsFactory","useRender","makeVEmptyStateProps","actionText","String","bgColor","color","icon","image","justify","type","default","headline","title","text","textWidth","Number","href","to","size","undefined","VEmptyState","name","props","emits","e","setup","_ref","emit","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","dimensionStyles","displayClasses","onClickAction","hasActions","actions","hasHeadline","hasTitle","hasText","hasMedia","media","_createVNode","value","class","style","_Fragment","src","height","maxWidth","onClick"],"sources":["../../../src/components/VEmptyState/VEmptyState.tsx"],"sourcesContent":["// Styles\nimport './VEmptyState.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\nimport { VImg } from '@/components/VImg'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { useDisplay } from '@/composables/display'\nimport { IconValue } from '@/composables/icons'\nimport { makeSizeProps } from '@/composables/size'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\n// Types\n\nexport type VEmptyStateSlots = {\n  actions: {\n    props: {\n      onClick: (e: Event) => void\n    }\n  }\n  default: never\n  headline: never\n  title: never\n  media: never\n  text: never\n}\n\nexport const makeVEmptyStateProps = propsFactory({\n  actionText: String,\n  bgColor: String,\n  color: String,\n  icon: IconValue,\n  image: String,\n  justify: {\n    type: String as PropType<'start' | 'center' | 'end'>,\n    default: 'center',\n  },\n  headline: String,\n  title: String,\n  text: String,\n  textWidth: {\n    type: [Number, String],\n    default: 500,\n  },\n  href: String,\n  to: String,\n\n  ...makeComponentProps(),\n  ...makeDimensionProps(),\n  ...makeSizeProps({ size: undefined }),\n  ...makeThemeProps(),\n}, 'VEmptyState')\n\nexport const VEmptyState = genericComponent<VEmptyStateSlots>()({\n  name: 'VEmptyState',\n\n  props: makeVEmptyStateProps(),\n\n  emits: {\n    'click:action': (e: Event) => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => props.bgColor)\n    const { dimensionStyles } = useDimension(props)\n    const { displayClasses } = useDisplay()\n\n    function onClickAction (e: Event) {\n      emit('click:action', e)\n    }\n\n    useRender(() => {\n      const hasActions = !!(slots.actions || props.actionText)\n      const hasHeadline = !!(slots.headline || props.headline)\n      const hasTitle = !!(slots.title || props.title)\n      const hasText = !!(slots.text || props.text)\n      const hasMedia = !!(slots.media || props.image || props.icon)\n      const size = props.size || (props.image ? 200 : 96)\n\n      return (\n        <div\n          class={[\n            'v-empty-state',\n            {\n              [`v-empty-state--${props.justify}`]: true,\n            },\n            themeClasses.value,\n            backgroundColorClasses.value,\n            displayClasses.value,\n            props.class,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n            dimensionStyles.value,\n            props.style,\n          ]}\n        >\n          { hasMedia && (\n            <div key=\"media\" class=\"v-empty-state__media\">\n              { !slots.media ? (\n                <>\n                  { props.image ? (\n                    <VImg\n                      key=\"image\"\n                      src={ props.image }\n                      height={ size }\n                    />\n                  ) : props.icon ? (\n                    <VIcon\n                      key=\"icon\"\n                      color={ props.color }\n                      size={ size }\n                      icon={ props.icon }\n                    />\n                  ) : undefined }\n                </>\n              ) : (\n                <VDefaultsProvider\n                  key=\"media-defaults\"\n                  defaults={{\n                    VImg: {\n                      src: props.image,\n                      height: size,\n                    },\n                    VIcon: {\n                      size,\n                      icon: props.icon,\n                    },\n                  }}\n                >\n                  { slots.media() }\n                </VDefaultsProvider>\n              )}\n            </div>\n          )}\n\n          { hasHeadline && (\n            <div key=\"headline\" class=\"v-empty-state__headline\">\n              { slots.headline?.() ?? props.headline }\n            </div>\n          )}\n\n          { hasTitle && (\n            <div key=\"title\" class=\"v-empty-state__title\">\n              { slots.title?.() ?? props.title }\n            </div>\n          )}\n\n          { hasText && (\n            <div\n              key=\"text\"\n              class=\"v-empty-state__text\"\n              style={{\n                maxWidth: convertToUnit(props.textWidth),\n              }}\n            >\n              { slots.text?.() ?? props.text }\n            </div>\n          )}\n\n          { slots.default && (\n            <div key=\"content\" class=\"v-empty-state__content\">\n              { slots.default() }\n            </div>\n          )}\n\n          { hasActions && (\n            <div key=\"actions\" class=\"v-empty-state__actions\">\n              <VDefaultsProvider\n                defaults={{\n                  VBtn: {\n                    class: 'v-empty-state__action-btn',\n                    color: props.color ?? 'surface-variant',\n                    href: props.href,\n                    text: props.actionText,\n                    to: props.to,\n                  },\n                }}\n              >\n                {\n                  slots.actions?.({ props: { onClick: onClickAction } }) ?? (\n                    <VBtn onClick={ onClickAction } />\n                  )\n                }\n              </VDefaultsProvider>\n            </div>\n          )}\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VEmptyState = InstanceType<typeof VEmptyState>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VExpansionPanel/VExpansionPanel.js

@@ -9,7 +9,7 @@ import { makeElevationProps, useElevation } from "../../composables/elevation.js
 import { makeGroupItemProps, useGroupItem } from "../../composables/group.js";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
 import { makeTagProps } from "../../composables/tag.js"; // Utilities
-import { computed, provide } from 'vue';
+import { computed, provide, toRef } from 'vue';
 import { genericComponent, propsFactory, useRender } from "../../util/index.js";
 export const makeVExpansionPanelProps = propsFactory({
   title: String,
@@ -36,14 +36,14 @@ export const VExpansionPanel = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(props, 'bgColor');
+    } = useBackgroundColor(() => props.bgColor);
     const {
       elevationClasses
     } = useElevation(props);
     const {
       roundedClasses
     } = useRounded(props);
-    const isDisabled = computed(() => groupItem?.disabled.value || props.disabled);
+    const isDisabled = toRef(() => groupItem?.disabled.value || props.disabled);
     const selectedIndices = computed(() => groupItem.group.items.value.reduce((arr, item, index) => {
       if (groupItem.group.selected.value.includes(item.id)) arr.push(index);
       return arr;

package/lib/components/VExpansionPanel/VExpansionPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"VExpansionPanel.js","names":["VExpansionPanelSymbol","makeVExpansionPanelTextProps","VExpansionPanelText","makeVExpansionPanelTitleProps","VExpansionPanelTitle","VDefaultsProvider","useBackgroundColor","makeElevationProps","useElevation","makeGroupItemProps","useGroupItem","makeRoundedProps","useRounded","makeTagProps","computed","provide","genericComponent","propsFactory","useRender","makeVExpansionPanelProps","title","String","text","bgColor","VExpansionPanel","name","props","emits","val","setup","_ref","slots","groupItem","backgroundColorClasses","backgroundColorStyles","elevationClasses","roundedClasses","isDisabled","disabled","value","selectedIndices","group","items","reduce","arr","item","index","selected","includes","id","push","isBeforeSelected","findIndex","isSelected","some","selectedIndex","isAfterSelected","hasText","hasTitle","expansionPanelTitleProps","filterProps","expansionPanelTextProps","_createVNode","tag","class","style","default"],"sources":["../../../src/components/VExpansionPanel/VExpansionPanel.tsx"],"sourcesContent":["// Components\nimport { VExpansionPanelSymbol } from './shared'\nimport { makeVExpansionPanelTextProps, VExpansionPanelText } from './VExpansionPanelText'\nimport { makeVExpansionPanelTitleProps, VExpansionPanelTitle } from './VExpansionPanelTitle'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeGroupItemProps, useGroupItem } from '@/composables/group'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { computed, provide } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVExpansionPanelProps = propsFactory({\n  title: String,\n  text: String,\n  bgColor: String,\n\n  ...makeElevationProps(),\n  ...makeGroupItemProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps(),\n  ...makeVExpansionPanelTitleProps(),\n  ...makeVExpansionPanelTextProps(),\n}, 'VExpansionPanel')\n\nexport type VExpansionPanelSlots = {\n  default: never\n  title: never\n  text: never\n}\n\nexport const VExpansionPanel = genericComponent<VExpansionPanelSlots>()({\n  name: 'VExpansionPanel',\n\n  props: makeVExpansionPanelProps(),\n\n  emits: {\n    'group:selected': (val: { value: boolean }) => true,\n  },\n\n  setup (props, { slots }) {\n    const groupItem = useGroupItem(props, VExpansionPanelSymbol)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'bgColor')\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const isDisabled = computed(() => groupItem?.disabled.value || props.disabled)\n\n    const selectedIndices = computed(() => groupItem.group.items.value.reduce<number[]>((arr, item, index) => {\n      if (groupItem.group.selected.value.includes(item.id)) arr.push(index)\n      return arr\n    }, []))\n\n    const isBeforeSelected = computed(() => {\n      const index = groupItem.group.items.value.findIndex(item => item.id === groupItem.id)\n      return !groupItem.isSelected.value &&\n        selectedIndices.value.some(selectedIndex => selectedIndex - index === 1)\n    })\n\n    const isAfterSelected = computed(() => {\n      const index = groupItem.group.items.value.findIndex(item => item.id === groupItem.id)\n      return !groupItem.isSelected.value &&\n        selectedIndices.value.some(selectedIndex => selectedIndex - index === -1)\n    })\n\n    provide(VExpansionPanelSymbol, groupItem)\n\n    useRender(() => {\n      const hasText = !!(slots.text || props.text)\n      const hasTitle = !!(slots.title || props.title)\n\n      const expansionPanelTitleProps = VExpansionPanelTitle.filterProps(props)\n      const expansionPanelTextProps = VExpansionPanelText.filterProps(props)\n\n      return (\n        <props.tag\n          class={[\n            'v-expansion-panel',\n            {\n              'v-expansion-panel--active': groupItem.isSelected.value,\n              'v-expansion-panel--before-active': isBeforeSelected.value,\n              'v-expansion-panel--after-active': isAfterSelected.value,\n              'v-expansion-panel--disabled': isDisabled.value,\n            },\n            roundedClasses.value,\n            backgroundColorClasses.value,\n            props.class,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n            props.style,\n          ]}\n        >\n          <div\n            class={[\n              'v-expansion-panel__shadow',\n              ...elevationClasses.value,\n            ]}\n          />\n\n          <VDefaultsProvider\n            defaults={{\n              VExpansionPanelTitle: {\n                ...expansionPanelTitleProps,\n              },\n              VExpansionPanelText: {\n                ...expansionPanelTextProps,\n              },\n            }}\n          >\n            { hasTitle && (\n              <VExpansionPanelTitle key=\"title\">\n                { slots.title ? slots.title() : props.title }\n              </VExpansionPanelTitle>\n            )}\n\n            { hasText && (\n              <VExpansionPanelText key=\"text\">\n                { slots.text ? slots.text() : props.text }\n              </VExpansionPanelText>\n            )}\n\n            { slots.default?.() }\n          </VDefaultsProvider>\n        </props.tag>\n      )\n    })\n\n    return {\n      groupItem,\n    }\n  },\n})\n\nexport type VExpansionPanel = InstanceType<typeof VExpansionPanel>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VExpansionPanel.js","names":["VExpansionPanelSymbol","makeVExpansionPanelTextProps","VExpansionPanelText","makeVExpansionPanelTitleProps","VExpansionPanelTitle","VDefaultsProvider","useBackgroundColor","makeElevationProps","useElevation","makeGroupItemProps","useGroupItem","makeRoundedProps","useRounded","makeTagProps","computed","provide","toRef","genericComponent","propsFactory","useRender","makeVExpansionPanelProps","title","String","text","bgColor","VExpansionPanel","name","props","emits","val","setup","_ref","slots","groupItem","backgroundColorClasses","backgroundColorStyles","elevationClasses","roundedClasses","isDisabled","disabled","value","selectedIndices","group","items","reduce","arr","item","index","selected","includes","id","push","isBeforeSelected","findIndex","isSelected","some","selectedIndex","isAfterSelected","hasText","hasTitle","expansionPanelTitleProps","filterProps","expansionPanelTextProps","_createVNode","tag","class","style","default"],"sources":["../../../src/components/VExpansionPanel/VExpansionPanel.tsx"],"sourcesContent":["// Components\nimport { VExpansionPanelSymbol } from './shared'\nimport { makeVExpansionPanelTextProps, VExpansionPanelText } from './VExpansionPanelText'\nimport { makeVExpansionPanelTitleProps, VExpansionPanelTitle } from './VExpansionPanelTitle'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeGroupItemProps, useGroupItem } from '@/composables/group'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\n\n// Utilities\nimport { computed, provide, toRef } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVExpansionPanelProps = propsFactory({\n  title: String,\n  text: String,\n  bgColor: String,\n\n  ...makeElevationProps(),\n  ...makeGroupItemProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps(),\n  ...makeVExpansionPanelTitleProps(),\n  ...makeVExpansionPanelTextProps(),\n}, 'VExpansionPanel')\n\nexport type VExpansionPanelSlots = {\n  default: never\n  title: never\n  text: never\n}\n\nexport const VExpansionPanel = genericComponent<VExpansionPanelSlots>()({\n  name: 'VExpansionPanel',\n\n  props: makeVExpansionPanelProps(),\n\n  emits: {\n    'group:selected': (val: { value: boolean }) => true,\n  },\n\n  setup (props, { slots }) {\n    const groupItem = useGroupItem(props, VExpansionPanelSymbol)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => props.bgColor)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const isDisabled = toRef(() => groupItem?.disabled.value || props.disabled)\n\n    const selectedIndices = computed(() => groupItem.group.items.value.reduce<number[]>((arr, item, index) => {\n      if (groupItem.group.selected.value.includes(item.id)) arr.push(index)\n      return arr\n    }, []))\n\n    const isBeforeSelected = computed(() => {\n      const index = groupItem.group.items.value.findIndex(item => item.id === groupItem.id)\n      return !groupItem.isSelected.value &&\n        selectedIndices.value.some(selectedIndex => selectedIndex - index === 1)\n    })\n\n    const isAfterSelected = computed(() => {\n      const index = groupItem.group.items.value.findIndex(item => item.id === groupItem.id)\n      return !groupItem.isSelected.value &&\n        selectedIndices.value.some(selectedIndex => selectedIndex - index === -1)\n    })\n\n    provide(VExpansionPanelSymbol, groupItem)\n\n    useRender(() => {\n      const hasText = !!(slots.text || props.text)\n      const hasTitle = !!(slots.title || props.title)\n\n      const expansionPanelTitleProps = VExpansionPanelTitle.filterProps(props)\n      const expansionPanelTextProps = VExpansionPanelText.filterProps(props)\n\n      return (\n        <props.tag\n          class={[\n            'v-expansion-panel',\n            {\n              'v-expansion-panel--active': groupItem.isSelected.value,\n              'v-expansion-panel--before-active': isBeforeSelected.value,\n              'v-expansion-panel--after-active': isAfterSelected.value,\n              'v-expansion-panel--disabled': isDisabled.value,\n            },\n            roundedClasses.value,\n            backgroundColorClasses.value,\n            props.class,\n          ]}\n          style={[\n            backgroundColorStyles.value,\n            props.style,\n          ]}\n        >\n          <div\n            class={[\n              'v-expansion-panel__shadow',\n              ...elevationClasses.value,\n            ]}\n          />\n\n          <VDefaultsProvider\n            defaults={{\n              VExpansionPanelTitle: {\n                ...expansionPanelTitleProps,\n              },\n              VExpansionPanelText: {\n                ...expansionPanelTextProps,\n              },\n            }}\n          >\n            { hasTitle && (\n              <VExpansionPanelTitle key=\"title\">\n                { slots.title ? slots.title() : props.title }\n              </VExpansionPanelTitle>\n            )}\n\n            { hasText && (\n              <VExpansionPanelText key=\"text\">\n                { slots.text ? slots.text() : props.text }\n              </VExpansionPanelText>\n            )}\n\n            { slots.default?.() }\n          </VDefaultsProvider>\n        </props.tag>\n      )\n    })\n\n    return {\n      groupItem,\n    }\n  },\n})\n\nexport type VExpansionPanel = InstanceType<typeof VExpansionPanel>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VExpansionPanel/VExpansionPanelTitle.js

@@ -8,7 +8,7 @@ import { makeComponentProps } from "../../composables/component.js";
 import { makeDimensionProps, useDimension } from "../../composables/dimensions.js";
 import { IconValue } from "../../composables/icons.js"; // Directives
 import { Ripple } from "../../directives/ripple/index.js"; // Utilities
-import { computed, inject } from 'vue';
+import { computed, inject, toRef } from 'vue';
 import { genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
 export const makeVExpansionPanelTitleProps = propsFactory({
   color: String,
@@ -46,7 +46,7 @@ export const VExpansionPanelTitle = genericComponent()({
     const {
       backgroundColorClasses,
       backgroundColorStyles
-    } = useBackgroundColor(props, 'color');
+    } = useBackgroundColor(() => props.color);
     const {
       dimensionStyles
     } = useDimension(props);
@@ -57,7 +57,7 @@ export const VExpansionPanelTitle = genericComponent()({
       expandIcon: props.expandIcon,
       readonly: props.readonly
     }));
-    const icon = computed(() => expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon);
+    const icon = toRef(() => expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon);
     useRender(() => _withDirectives(_createVNode("button", {
       "class": ['v-expansion-panel-title', {
         'v-expansion-panel-title--active': expansionPanel.isSelected.value,

package/lib/components/VExpansionPanel/VExpansionPanelTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"VExpansionPanelTitle.js","names":["VExpansionPanelSymbol","VDefaultsProvider","VIcon","useBackgroundColor","makeComponentProps","makeDimensionProps","useDimension","IconValue","Ripple","computed","inject","genericComponent","propsFactory","useRender","makeVExpansionPanelTitleProps","color","String","expandIcon","type","default","collapseIcon","hideActions","Boolean","focusable","static","ripple","Object","readonly","VExpansionPanelTitle","name","directives","props","setup","_ref","slots","expansionPanel","Error","backgroundColorClasses","backgroundColorStyles","dimensionStyles","slotProps","disabled","value","expanded","isSelected","icon","_withDirectives","_createVNode","class","style","undefined","toggle","actions","_resolveDirective"],"sources":["../../../src/components/VExpansionPanel/VExpansionPanelTitle.tsx"],"sourcesContent":["// Components\nimport { VExpansionPanelSymbol } from './shared'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { IconValue } from '@/composables/icons'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Utilities\nimport { computed, inject } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { RippleDirectiveBinding } from '@/directives/ripple'\n\ninterface ExpansionPanelTitleSlot {\n  collapseIcon: IconValue\n  disabled: boolean | undefined\n  expanded: boolean\n  expandIcon: IconValue\n  readonly: boolean\n}\n\nexport type VExpansionPanelTitleSlots = {\n  default: ExpansionPanelTitleSlot\n  actions: ExpansionPanelTitleSlot\n}\n\nexport const makeVExpansionPanelTitleProps = propsFactory({\n  color: String,\n  expandIcon: {\n    type: IconValue,\n    default: '$expand',\n  },\n  collapseIcon: {\n    type: IconValue,\n    default: '$collapse',\n  },\n  hideActions: Boolean,\n  focusable: Boolean,\n  static: Boolean,\n  ripple: {\n    type: [Boolean, Object] as PropType<RippleDirectiveBinding['value']>,\n    default: false,\n  },\n  readonly: Boolean,\n\n  ...makeComponentProps(),\n  ...makeDimensionProps(),\n}, 'VExpansionPanelTitle')\n\nexport const VExpansionPanelTitle = genericComponent<VExpansionPanelTitleSlots>()({\n  name: 'VExpansionPanelTitle',\n\n  directives: { Ripple },\n\n  props: makeVExpansionPanelTitleProps(),\n\n  setup (props, { slots }) {\n    const expansionPanel = inject(VExpansionPanelSymbol)\n\n    if (!expansionPanel) throw new Error('[Vuetify] v-expansion-panel-title needs to be placed inside v-expansion-panel')\n\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color')\n    const { dimensionStyles } = useDimension(props)\n\n    const slotProps = computed(() => ({\n      collapseIcon: props.collapseIcon,\n      disabled: expansionPanel.disabled.value,\n      expanded: expansionPanel.isSelected.value,\n      expandIcon: props.expandIcon,\n      readonly: props.readonly,\n    }))\n\n    const icon = computed(() => expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon)\n\n    useRender(() => (\n      <button\n        class={[\n          'v-expansion-panel-title',\n          {\n            'v-expansion-panel-title--active': expansionPanel.isSelected.value,\n            'v-expansion-panel-title--focusable': props.focusable,\n            'v-expansion-panel-title--static': props.static,\n          },\n          backgroundColorClasses.value,\n          props.class,\n        ]}\n        style={[\n          backgroundColorStyles.value,\n          dimensionStyles.value,\n          props.style,\n        ]}\n        type=\"button\"\n        tabindex={ expansionPanel.disabled.value ? -1 : undefined }\n        disabled={ expansionPanel.disabled.value }\n        aria-expanded={ expansionPanel.isSelected.value }\n        onClick={ !props.readonly ? expansionPanel.toggle : undefined }\n        v-ripple={ props.ripple }\n      >\n        <span class=\"v-expansion-panel-title__overlay\" />\n\n        { slots.default?.(slotProps.value) }\n\n        { !props.hideActions && (\n          <VDefaultsProvider\n            defaults={{\n              VIcon: {\n                icon: icon.value,\n              },\n            }}\n          >\n            <span class=\"v-expansion-panel-title__icon\">\n              { slots.actions?.(slotProps.value) ?? <VIcon /> }\n            </span>\n          </VDefaultsProvider>\n        )}\n      </button>\n    ))\n\n    return {}\n  },\n})\n\nexport type VExpansionPanelTitle = InstanceType<typeof VExpansionPanelTitle>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VExpansionPanelTitle.js","names":["VExpansionPanelSymbol","VDefaultsProvider","VIcon","useBackgroundColor","makeComponentProps","makeDimensionProps","useDimension","IconValue","Ripple","computed","inject","toRef","genericComponent","propsFactory","useRender","makeVExpansionPanelTitleProps","color","String","expandIcon","type","default","collapseIcon","hideActions","Boolean","focusable","static","ripple","Object","readonly","VExpansionPanelTitle","name","directives","props","setup","_ref","slots","expansionPanel","Error","backgroundColorClasses","backgroundColorStyles","dimensionStyles","slotProps","disabled","value","expanded","isSelected","icon","_withDirectives","_createVNode","class","style","undefined","toggle","actions","_resolveDirective"],"sources":["../../../src/components/VExpansionPanel/VExpansionPanelTitle.tsx"],"sourcesContent":["// Components\nimport { VExpansionPanelSymbol } from './shared'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { IconValue } from '@/composables/icons'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Utilities\nimport { computed, inject, toRef } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { RippleDirectiveBinding } from '@/directives/ripple'\n\ninterface ExpansionPanelTitleSlot {\n  collapseIcon: IconValue\n  disabled: boolean | undefined\n  expanded: boolean\n  expandIcon: IconValue\n  readonly: boolean\n}\n\nexport type VExpansionPanelTitleSlots = {\n  default: ExpansionPanelTitleSlot\n  actions: ExpansionPanelTitleSlot\n}\n\nexport const makeVExpansionPanelTitleProps = propsFactory({\n  color: String,\n  expandIcon: {\n    type: IconValue,\n    default: '$expand',\n  },\n  collapseIcon: {\n    type: IconValue,\n    default: '$collapse',\n  },\n  hideActions: Boolean,\n  focusable: Boolean,\n  static: Boolean,\n  ripple: {\n    type: [Boolean, Object] as PropType<RippleDirectiveBinding['value']>,\n    default: false,\n  },\n  readonly: Boolean,\n\n  ...makeComponentProps(),\n  ...makeDimensionProps(),\n}, 'VExpansionPanelTitle')\n\nexport const VExpansionPanelTitle = genericComponent<VExpansionPanelTitleSlots>()({\n  name: 'VExpansionPanelTitle',\n\n  directives: { Ripple },\n\n  props: makeVExpansionPanelTitleProps(),\n\n  setup (props, { slots }) {\n    const expansionPanel = inject(VExpansionPanelSymbol)\n\n    if (!expansionPanel) throw new Error('[Vuetify] v-expansion-panel-title needs to be placed inside v-expansion-panel')\n\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => props.color)\n    const { dimensionStyles } = useDimension(props)\n\n    const slotProps = computed(() => ({\n      collapseIcon: props.collapseIcon,\n      disabled: expansionPanel.disabled.value,\n      expanded: expansionPanel.isSelected.value,\n      expandIcon: props.expandIcon,\n      readonly: props.readonly,\n    }))\n\n    const icon = toRef(() => expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon)\n\n    useRender(() => (\n      <button\n        class={[\n          'v-expansion-panel-title',\n          {\n            'v-expansion-panel-title--active': expansionPanel.isSelected.value,\n            'v-expansion-panel-title--focusable': props.focusable,\n            'v-expansion-panel-title--static': props.static,\n          },\n          backgroundColorClasses.value,\n          props.class,\n        ]}\n        style={[\n          backgroundColorStyles.value,\n          dimensionStyles.value,\n          props.style,\n        ]}\n        type=\"button\"\n        tabindex={ expansionPanel.disabled.value ? -1 : undefined }\n        disabled={ expansionPanel.disabled.value }\n        aria-expanded={ expansionPanel.isSelected.value }\n        onClick={ !props.readonly ? expansionPanel.toggle : undefined }\n        v-ripple={ props.ripple }\n      >\n        <span class=\"v-expansion-panel-title__overlay\" />\n\n        { slots.default?.(slotProps.value) }\n\n        { !props.hideActions && (\n          <VDefaultsProvider\n            defaults={{\n              VIcon: {\n                icon: icon.value,\n              },\n            }}\n          >\n            <span class=\"v-expansion-panel-title__icon\">\n              { slots.actions?.(slotProps.value) ?? <VIcon /> }\n            </span>\n          </VDefaultsProvider>\n        )}\n      </button>\n    ))\n\n    return {}\n  },\n})\n\nexport type VExpansionPanelTitle = InstanceType<typeof VExpansionPanelTitle>\n"],"mappings":";AAAA;AAAA,SACSA,qBAAqB;AAAA,SACrBC,iBAAiB;AAAA,SACjBC,KAAK,6BAEd;AAAA,SACSC,kBAAkB;AAAA,SAClBC,kBAAkB;AAAA,SAClBC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,SAAS,sCAElB;AAAA,SACSC,MAAM,4CAEf;AACA,SAASC,QAAQ,EAAEC,MAAM,EAAEC,KAAK,QAAQ,KAAK;AAAA,SACpCC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,+BAElD;AAiBA,OAAO,MAAMC,6BAA6B,GAAGF,YAAY,CAAC;EACxDG,KAAK,EAAEC,MAAM;EACbC,UAAU,EAAE;IACVC,IAAI,EAAEZ,SAAS;IACfa,OAAO,EAAE;EACX,CAAC;EACDC,YAAY,EAAE;IACZF,IAAI,EAAEZ,SAAS;IACfa,OAAO,EAAE;EACX,CAAC;EACDE,WAAW,EAAEC,OAAO;EACpBC,SAAS,EAAED,OAAO;EAClBE,MAAM,EAAEF,OAAO;EACfG,MAAM,EAAE;IACNP,IAAI,EAAE,CAACI,OAAO,EAAEI,MAAM,CAA8C;IACpEP,OAAO,EAAE;EACX,CAAC;EACDQ,QAAQ,EAAEL,OAAO;EAEjB,GAAGnB,kBAAkB,CAAC,CAAC;EACvB,GAAGC,kBAAkB,CAAC;AACxB,CAAC,EAAE,sBAAsB,CAAC;AAE1B,OAAO,MAAMwB,oBAAoB,GAAGjB,gBAAgB,CAA4B,CAAC,CAAC;EAChFkB,IAAI,EAAE,sBAAsB;EAE5BC,UAAU,EAAE;IAAEvB;EAAO,CAAC;EAEtBwB,KAAK,EAAEjB,6BAA6B,CAAC,CAAC;EAEtCkB,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAME,cAAc,GAAG1B,MAAM,CAACV,qBAAqB,CAAC;IAEpD,IAAI,CAACoC,cAAc,EAAE,MAAM,IAAIC,KAAK,CAAC,+EAA+E,CAAC;IAErH,MAAM;MAAEC,sBAAsB;MAAEC;IAAsB,CAAC,GAAGpC,kBAAkB,CAAC,MAAM6B,KAAK,CAAChB,KAAK,CAAC;IAC/F,MAAM;MAAEwB;IAAgB,CAAC,GAAGlC,YAAY,CAAC0B,KAAK,CAAC;IAE/C,MAAMS,SAAS,GAAGhC,QAAQ,CAAC,OAAO;MAChCY,YAAY,EAAEW,KAAK,CAACX,YAAY;MAChCqB,QAAQ,EAAEN,cAAc,CAACM,QAAQ,CAACC,KAAK;MACvCC,QAAQ,EAAER,cAAc,CAACS,UAAU,CAACF,KAAK;MACzCzB,UAAU,EAAEc,KAAK,CAACd,UAAU;MAC5BU,QAAQ,EAAEI,KAAK,CAACJ;IAClB,CAAC,CAAC,CAAC;IAEH,MAAMkB,IAAI,GAAGnC,KAAK,CAAC,MAAMyB,cAAc,CAACS,UAAU,CAACF,KAAK,GAAGX,KAAK,CAACX,YAAY,GAAGW,KAAK,CAACd,UAAU,CAAC;IAEjGJ,SAAS,CAAC,MAAAiC,eAAA,CAAAC,YAAA;MAAA,SAEC,CACL,yBAAyB,EACzB;QACE,iCAAiC,EAAEZ,cAAc,CAACS,UAAU,CAACF,KAAK;QAClE,oCAAoC,EAAEX,KAAK,CAACR,SAAS;QACrD,iCAAiC,EAAEQ,KAAK,CAACP;MAC3C,CAAC,EACDa,sBAAsB,CAACK,KAAK,EAC5BX,KAAK,CAACiB,KAAK,CACZ;MAAA,SACM,CACLV,qBAAqB,CAACI,KAAK,EAC3BH,eAAe,CAACG,KAAK,EACrBX,KAAK,CAACkB,KAAK,CACZ;MAAA;MAAA,YAEUd,cAAc,CAACM,QAAQ,CAACC,KAAK,GAAG,CAAC,CAAC,GAAGQ,SAAS;MAAA,YAC9Cf,cAAc,CAACM,QAAQ,CAACC,KAAK;MAAA,iBACxBP,cAAc,CAACS,UAAU,CAACF,KAAK;MAAA,WACrC,CAACX,KAAK,CAACJ,QAAQ,GAAGQ,cAAc,CAACgB,MAAM,GAAGD;IAAS,IAAAH,YAAA;MAAA;IAAA,UAK3Db,KAAK,CAACf,OAAO,GAAGqB,SAAS,CAACE,KAAK,CAAC,EAEhC,CAACX,KAAK,CAACV,WAAW,IAAA0B,YAAA,CAAA/C,iBAAA;MAAA,YAEN;QACRC,KAAK,EAAE;UACL4C,IAAI,EAAEA,IAAI,CAACH;QACb;MACF;IAAC;MAAAvB,OAAA,EAAAA,CAAA,MAAA4B,YAAA;QAAA;MAAA,IAGGb,KAAK,CAACkB,OAAO,GAAGZ,SAAS,CAACE,KAAK,CAAC,IAAAK,YAAA,CAAA9C,KAAA,aAAa;IAAA,EAGpD,MAAAoD,iBAAA,YAlBUtB,KAAK,CAACN,MAAM,GAoB1B,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/components/VExpansionPanel/VExpansionPanels.js

@@ -10,7 +10,7 @@ import { provideDefaults } from "../../composables/defaults.js";
 import { makeGroupProps, useGroup } from "../../composables/group.js";
 import { makeTagProps } from "../../composables/tag.js";
 import { makeThemeProps, provideTheme } from "../../composables/theme.js"; // Utilities
-import { computed, toRef } from 'vue';
+import { toRef } from 'vue';
 import { genericComponent, pick, propsFactory, useRender } from "../../util/index.js"; // Types
 const allowedVariants = ['default', 'accordion', 'inset', 'popout'];
 export const makeVExpansionPanelsProps = propsFactory({
@@ -43,21 +43,21 @@ export const VExpansionPanels = genericComponent()({
     const {
       themeClasses
     } = provideTheme(props);
-    const variantClass = computed(() => props.variant && `v-expansion-panels--variant-${props.variant}`);
+    const variantClass = toRef(() => props.variant && `v-expansion-panels--variant-${props.variant}`);
     provideDefaults({
       VExpansionPanel: {
-        bgColor: toRef(props, 'bgColor'),
-        collapseIcon: toRef(props, 'collapseIcon'),
-        color: toRef(props, 'color'),
-        eager: toRef(props, 'eager'),
-        elevation: toRef(props, 'elevation'),
-        expandIcon: toRef(props, 'expandIcon'),
-        focusable: toRef(props, 'focusable'),
-        hideActions: toRef(props, 'hideActions'),
-        readonly: toRef(props, 'readonly'),
-        ripple: toRef(props, 'ripple'),
-        rounded: toRef(props, 'rounded'),
-        static: toRef(props, 'static')
+        bgColor: toRef(() => props.bgColor),
+        collapseIcon: toRef(() => props.collapseIcon),
+        color: toRef(() => props.color),
+        eager: toRef(() => props.eager),
+        elevation: toRef(() => props.elevation),
+        expandIcon: toRef(() => props.expandIcon),
+        focusable: toRef(() => props.focusable),
+        hideActions: toRef(() => props.hideActions),
+        readonly: toRef(() => props.readonly),
+        ripple: toRef(() => props.ripple),
+        rounded: toRef(() => props.rounded),
+        static: toRef(() => props.static)
       }
     });
     useRender(() => _createVNode(props.tag, {

package/lib/components/VExpansionPanel/VExpansionPanels.js.map

@@ -1 +1 @@
-{"version":3,"file":"VExpansionPanels.js","names":["VExpansionPanelSymbol","makeVExpansionPanelProps","makeComponentProps","provideDefaults","makeGroupProps","useGroup","makeTagProps","makeThemeProps","provideTheme","computed","toRef","genericComponent","pick","propsFactory","useRender","allowedVariants","makeVExpansionPanelsProps","flat","Boolean","variant","type","String","default","validator","v","includes","VExpansionPanels","name","props","emits","val","setup","_ref","slots","next","prev","themeClasses","variantClass","VExpansionPanel","bgColor","collapseIcon","color","eager","elevation","expandIcon","focusable","hideActions","readonly","ripple","rounded","static","_createVNode","tag","tile","value","class","style"],"sources":["../../../src/components/VExpansionPanel/VExpansionPanels.tsx"],"sourcesContent":["// Styles\nimport './VExpansionPanel.sass'\n\n// Components\nimport { VExpansionPanelSymbol } from './shared'\nimport { makeVExpansionPanelProps } from './VExpansionPanel'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeGroupProps, useGroup } from '@/composables/group'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { genericComponent, pick, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nconst allowedVariants = ['default', 'accordion', 'inset', 'popout'] as const\n\ntype Variant = typeof allowedVariants[number]\n\nexport type VExpansionPanelSlot = {\n  prev: () => void\n  next: () => void\n}\n\nexport type VExpansionPanelSlots = {\n  default: VExpansionPanelSlot\n}\n\nexport const makeVExpansionPanelsProps = propsFactory({\n  flat: Boolean,\n\n  ...makeGroupProps(),\n  ...pick(makeVExpansionPanelProps(), [\n    'bgColor',\n    'collapseIcon',\n    'color',\n    'eager',\n    'elevation',\n    'expandIcon',\n    'focusable',\n    'hideActions',\n    'readonly',\n    'ripple',\n    'rounded',\n    'tile',\n    'static',\n  ]),\n  ...makeThemeProps(),\n  ...makeComponentProps(),\n  ...makeTagProps(),\n\n  variant: {\n    type: String as PropType<Variant>,\n    default: 'default',\n    validator: (v: any) => allowedVariants.includes(v),\n  },\n}, 'VExpansionPanels')\n\nexport const VExpansionPanels = genericComponent<VExpansionPanelSlots>()({\n  name: 'VExpansionPanels',\n\n  props: makeVExpansionPanelsProps(),\n\n  emits: {\n    'update:modelValue': (val: unknown) => true,\n  },\n\n  setup (props, { slots }) {\n    const { next, prev } = useGroup(props, VExpansionPanelSymbol)\n\n    const { themeClasses } = provideTheme(props)\n\n    const variantClass = computed(() => props.variant && `v-expansion-panels--variant-${props.variant}`)\n\n    provideDefaults({\n      VExpansionPanel: {\n        bgColor: toRef(props, 'bgColor'),\n        collapseIcon: toRef(props, 'collapseIcon'),\n        color: toRef(props, 'color'),\n        eager: toRef(props, 'eager'),\n        elevation: toRef(props, 'elevation'),\n        expandIcon: toRef(props, 'expandIcon'),\n        focusable: toRef(props, 'focusable'),\n        hideActions: toRef(props, 'hideActions'),\n        readonly: toRef(props, 'readonly'),\n        ripple: toRef(props, 'ripple'),\n        rounded: toRef(props, 'rounded'),\n        static: toRef(props, 'static'),\n      },\n    })\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-expansion-panels',\n          {\n            'v-expansion-panels--flat': props.flat,\n            'v-expansion-panels--tile': props.tile,\n          },\n          themeClasses.value,\n          variantClass.value,\n          props.class,\n        ]}\n        style={ props.style }\n      >\n        { slots.default?.({ prev, next }) }\n      </props.tag>\n    ))\n\n    return {\n      next,\n      prev,\n    }\n  },\n})\n\nexport type VExpansionPanels = InstanceType<typeof VExpansionPanels>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VExpansionPanels.js","names":["VExpansionPanelSymbol","makeVExpansionPanelProps","makeComponentProps","provideDefaults","makeGroupProps","useGroup","makeTagProps","makeThemeProps","provideTheme","toRef","genericComponent","pick","propsFactory","useRender","allowedVariants","makeVExpansionPanelsProps","flat","Boolean","variant","type","String","default","validator","v","includes","VExpansionPanels","name","props","emits","val","setup","_ref","slots","next","prev","themeClasses","variantClass","VExpansionPanel","bgColor","collapseIcon","color","eager","elevation","expandIcon","focusable","hideActions","readonly","ripple","rounded","static","_createVNode","tag","tile","value","class","style"],"sources":["../../../src/components/VExpansionPanel/VExpansionPanels.tsx"],"sourcesContent":["// Styles\nimport './VExpansionPanel.sass'\n\n// Components\nimport { VExpansionPanelSymbol } from './shared'\nimport { makeVExpansionPanelProps } from './VExpansionPanel'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { provideDefaults } from '@/composables/defaults'\nimport { makeGroupProps, useGroup } from '@/composables/group'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { toRef } from 'vue'\nimport { genericComponent, pick, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nconst allowedVariants = ['default', 'accordion', 'inset', 'popout'] as const\n\ntype Variant = typeof allowedVariants[number]\n\nexport type VExpansionPanelSlot = {\n  prev: () => void\n  next: () => void\n}\n\nexport type VExpansionPanelSlots = {\n  default: VExpansionPanelSlot\n}\n\nexport const makeVExpansionPanelsProps = propsFactory({\n  flat: Boolean,\n\n  ...makeGroupProps(),\n  ...pick(makeVExpansionPanelProps(), [\n    'bgColor',\n    'collapseIcon',\n    'color',\n    'eager',\n    'elevation',\n    'expandIcon',\n    'focusable',\n    'hideActions',\n    'readonly',\n    'ripple',\n    'rounded',\n    'tile',\n    'static',\n  ]),\n  ...makeThemeProps(),\n  ...makeComponentProps(),\n  ...makeTagProps(),\n\n  variant: {\n    type: String as PropType<Variant>,\n    default: 'default',\n    validator: (v: any) => allowedVariants.includes(v),\n  },\n}, 'VExpansionPanels')\n\nexport const VExpansionPanels = genericComponent<VExpansionPanelSlots>()({\n  name: 'VExpansionPanels',\n\n  props: makeVExpansionPanelsProps(),\n\n  emits: {\n    'update:modelValue': (val: unknown) => true,\n  },\n\n  setup (props, { slots }) {\n    const { next, prev } = useGroup(props, VExpansionPanelSymbol)\n\n    const { themeClasses } = provideTheme(props)\n\n    const variantClass = toRef(() => props.variant && `v-expansion-panels--variant-${props.variant}`)\n\n    provideDefaults({\n      VExpansionPanel: {\n        bgColor: toRef(() => props.bgColor),\n        collapseIcon: toRef(() => props.collapseIcon),\n        color: toRef(() => props.color),\n        eager: toRef(() => props.eager),\n        elevation: toRef(() => props.elevation),\n        expandIcon: toRef(() => props.expandIcon),\n        focusable: toRef(() => props.focusable),\n        hideActions: toRef(() => props.hideActions),\n        readonly: toRef(() => props.readonly),\n        ripple: toRef(() => props.ripple),\n        rounded: toRef(() => props.rounded),\n        static: toRef(() => props.static),\n      },\n    })\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-expansion-panels',\n          {\n            'v-expansion-panels--flat': props.flat,\n            'v-expansion-panels--tile': props.tile,\n          },\n          themeClasses.value,\n          variantClass.value,\n          props.class,\n        ]}\n        style={ props.style }\n      >\n        { slots.default?.({ prev, next }) }\n      </props.tag>\n    ))\n\n    return {\n      next,\n      prev,\n    }\n  },\n})\n\nexport type VExpansionPanels = InstanceType<typeof VExpansionPanels>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VFab/VFab.js

@@ -50,7 +50,7 @@ export const VFab = genericComponent()({
       if (!entries.length) return;
       height.value = entries[0].target.clientHeight;
     });
-    const hasPosition = computed(() => props.app || props.absolute);
+    const hasPosition = toRef(() => props.app || props.absolute);
     const position = computed(() => {
       if (!hasPosition.value) return false;
       return props.location?.split(' ').shift() ?? 'bottom';
@@ -67,7 +67,7 @@ export const VFab = genericComponent()({
         layoutSize: computed(() => props.layout ? height.value + 24 : 0),
         elementSize: computed(() => height.value + 24),
         active: computed(() => props.app && model.value),
-        absolute: toRef(props, 'absolute')
+        absolute: toRef(() => props.absolute)
       });
       watchEffect(() => {
         layoutItemStyles.value = layout.layoutItemStyles.value;