@vuetify/nightly 3.9.3-master.2025-07-30 → 3.9.3-master.2025-07-31

package/lib/components/VColorPicker/VColorPickerEdit.css

@@ -10,6 +10,11 @@
   justify-content: center;
   text-align: center;
 }
+.v-color-picker-edit__input > input::-webkit-outer-spin-button,
+.v-color-picker-edit__input > input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
 .v-color-picker-edit__input:not(:last-child) {
   margin-inline-end: 8px;
 }

package/lib/components/VColorPicker/VColorPickerEdit.js

@@ -4,7 +4,8 @@ import "./VColorPickerEdit.css";
 
 // Components
 import { VBtn } from "../VBtn/index.js"; // Composables
-import { makeComponentProps } from "../../composables/component.js"; // Utilities
+import { makeComponentProps } from "../../composables/component.js";
+import { useLocale } from "../../composables/locale.js"; // Utilities
 import { computed } from 'vue';
 import { modes, nullColor } from "./util/index.js";
 import { defineComponent, propsFactory, useRender } from "../../util/index.js"; // Types
@@ -43,6 +44,9 @@ export const VColorPickerEdit = defineComponent({
     let {
       emit
     } = _ref2;
+    const {
+      t
+    } = useLocale();
     const enabledModes = computed(() => {
       return props.modes.map(key => ({
         ...modes[key],
@@ -57,11 +61,13 @@ export const VColorPickerEdit = defineComponent({
         let {
           getValue,
           getColor,
+          localeKey,
           ...inputProps
         } = _ref3;
         return {
           ...mode.inputProps,
           ...inputProps,
+          ariaLabel: t(`$vuetify.colorPicker.ariaLabel.${localeKey}`),
           disabled: props.disabled,
           value: color && getValue(color),
           onChange: e => {
@@ -79,6 +85,7 @@ export const VColorPickerEdit = defineComponent({
       "icon": "$unfold",
       "size": "x-small",
       "variant": "plain",
+      "aria-label": t('$vuetify.colorPicker.ariaLabel.changeFormat'),
       "onClick": () => {
         const mi = enabledModes.value.findIndex(m => m.name === props.mode);
         emit('update:mode', enabledModes.value[(mi + 1) % enabledModes.value.length].name);

package/lib/components/VColorPicker/VColorPickerEdit.js.map

@@ -1 +1 @@
-{"version":3,"file":"VColorPickerEdit.js","names":["VBtn","makeComponentProps","computed","modes","nullColor","defineComponent","propsFactory","useRender","VColorPickerInput","_ref","label","rest","_createElementVNode","_normalizeProps","_guardReactiveProps","makeVColorPickerEditProps","color","Object","disabled","Boolean","mode","type","String","default","validator","v","keys","includes","Array","isArray","every","m","VColorPickerEdit","name","props","emits","setup","_ref2","emit","enabledModes","map","key","inputs","value","find","to","_ref3","getValue","getColor","inputProps","onChange","e","target","from","_normalizeClass","class","_normalizeStyle","style","_createVNode","length","onClick","mi","findIndex"],"sources":["../../../src/components/VColorPicker/VColorPickerEdit.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerEdit.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\n\n// Utilities\nimport { computed } from 'vue'\nimport { modes, nullColor } from './util'\nimport { defineComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSV } from '@/util/colorUtils'\n\nconst VColorPickerInput = ({ label, ...rest }: any) => {\n  return (\n    <div\n      class=\"v-color-picker-edit__input\"\n    >\n      <input { ...rest } />\n      <span>{ label }</span>\n    </div>\n  )\n}\n\nexport const makeVColorPickerEditProps = propsFactory({\n  color: Object as PropType<HSV | null>,\n  disabled: Boolean,\n  mode: {\n    type: String as PropType<keyof typeof modes>,\n    default: 'rgba',\n    validator: (v: string) => Object.keys(modes).includes(v),\n  },\n  modes: {\n    type: Array as PropType<readonly (keyof typeof modes)[]>,\n    default: () => Object.keys(modes),\n    validator: (v: any) => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m)),\n  },\n\n  ...makeComponentProps(),\n}, 'VColorPickerEdit')\n\nexport const VColorPickerEdit = defineComponent({\n  name: 'VColorPickerEdit',\n\n  props: makeVColorPickerEditProps(),\n\n  emits: {\n    'update:color': (color: HSV) => true,\n    'update:mode': (mode: keyof typeof modes) => true,\n  },\n\n  setup (props, { emit }) {\n    const enabledModes = computed(() => {\n      return props.modes.map(key => ({ ...modes[key], name: key }))\n    })\n\n    const inputs = computed(() => {\n      const mode = enabledModes.value.find(m => m.name === props.mode)\n\n      if (!mode) return []\n\n      const color = props.color ? mode.to(props.color) : null\n\n      return mode.inputs?.map(({ getValue, getColor, ...inputProps }) => {\n        return {\n          ...mode.inputProps,\n          ...inputProps,\n          disabled: props.disabled,\n          value: color && getValue(color),\n          onChange: (e: InputEvent) => {\n            const target = e.target as HTMLInputElement | null\n\n            if (!target) return\n\n            emit('update:color', mode.from(getColor(color ?? mode.to(nullColor), target.value)))\n          },\n        }\n      })\n    })\n\n    useRender(() => (\n      <div\n        class={[\n          'v-color-picker-edit',\n          props.class,\n        ]}\n        style={ props.style }\n      >\n        { inputs.value?.map(props => (\n          <VColorPickerInput { ...props } />\n        ))}\n        { enabledModes.value.length > 1 && (\n          <VBtn\n            icon=\"$unfold\"\n            size=\"x-small\"\n            variant=\"plain\"\n            onClick={ () => {\n              const mi = enabledModes.value.findIndex(m => m.name === props.mode)\n\n              emit('update:mode', enabledModes.value[(mi + 1) % enabledModes.value.length].name)\n            }}\n          />\n        )}\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VColorPickerEdit = InstanceType<typeof VColorPickerEdit>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VColorPickerEdit.js","names":["VBtn","makeComponentProps","useLocale","computed","modes","nullColor","defineComponent","propsFactory","useRender","VColorPickerInput","_ref","label","rest","_createElementVNode","_normalizeProps","_guardReactiveProps","makeVColorPickerEditProps","color","Object","disabled","Boolean","mode","type","String","default","validator","v","keys","includes","Array","isArray","every","m","VColorPickerEdit","name","props","emits","setup","_ref2","emit","t","enabledModes","map","key","inputs","value","find","to","_ref3","getValue","getColor","localeKey","inputProps","ariaLabel","onChange","e","target","from","_normalizeClass","class","_normalizeStyle","style","_createVNode","length","onClick","mi","findIndex"],"sources":["../../../src/components/VColorPicker/VColorPickerEdit.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerEdit.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { useLocale } from '@/composables/locale'\n\n// Utilities\nimport { computed } from 'vue'\nimport { modes, nullColor } from './util'\nimport { defineComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSV } from '@/util/colorUtils'\n\nconst VColorPickerInput = ({ label, ...rest }: any) => {\n  return (\n    <div\n      class=\"v-color-picker-edit__input\"\n    >\n      <input { ...rest } />\n      <span>{ label }</span>\n    </div>\n  )\n}\n\nexport const makeVColorPickerEditProps = propsFactory({\n  color: Object as PropType<HSV | null>,\n  disabled: Boolean,\n  mode: {\n    type: String as PropType<keyof typeof modes>,\n    default: 'rgba',\n    validator: (v: string) => Object.keys(modes).includes(v),\n  },\n  modes: {\n    type: Array as PropType<readonly (keyof typeof modes)[]>,\n    default: () => Object.keys(modes),\n    validator: (v: any) => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m)),\n  },\n\n  ...makeComponentProps(),\n}, 'VColorPickerEdit')\n\nexport const VColorPickerEdit = defineComponent({\n  name: 'VColorPickerEdit',\n\n  props: makeVColorPickerEditProps(),\n\n  emits: {\n    'update:color': (color: HSV) => true,\n    'update:mode': (mode: keyof typeof modes) => true,\n  },\n\n  setup (props, { emit }) {\n    const { t } = useLocale()\n    const enabledModes = computed(() => {\n      return props.modes.map(key => ({ ...modes[key], name: key }))\n    })\n\n    const inputs = computed(() => {\n      const mode = enabledModes.value.find(m => m.name === props.mode)\n\n      if (!mode) return []\n\n      const color = props.color ? mode.to(props.color) : null\n\n      return mode.inputs?.map(({ getValue, getColor, localeKey, ...inputProps }) => {\n        return {\n          ...mode.inputProps,\n          ...inputProps,\n          ariaLabel: t(`$vuetify.colorPicker.ariaLabel.${localeKey}`),\n          disabled: props.disabled,\n          value: color && getValue(color),\n          onChange: (e: InputEvent) => {\n            const target = e.target as HTMLInputElement | null\n\n            if (!target) return\n\n            emit('update:color', mode.from(getColor(color ?? mode.to(nullColor), target.value)))\n          },\n        }\n      })\n    })\n\n    useRender(() => (\n      <div\n        class={[\n          'v-color-picker-edit',\n          props.class,\n        ]}\n        style={ props.style }\n      >\n        { inputs.value?.map(props => (\n          <VColorPickerInput { ...props } />\n        ))}\n        { enabledModes.value.length > 1 && (\n          <VBtn\n            icon=\"$unfold\"\n            size=\"x-small\"\n            variant=\"plain\"\n            aria-label={ t('$vuetify.colorPicker.ariaLabel.changeFormat') }\n            onClick={ () => {\n              const mi = enabledModes.value.findIndex(m => m.name === props.mode)\n\n              emit('update:mode', enabledModes.value[(mi + 1) % enabledModes.value.length].name)\n            }}\n          />\n        )}\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VColorPickerEdit = InstanceType<typeof VColorPickerEdit>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VColorPicker/VColorPickerEdit.sass

@@ -7,6 +7,11 @@
     margin-top: $color-picker-input-margin-top
 
   .v-color-picker-edit__input
+    > input::-webkit-outer-spin-button,
+    > input::-webkit-inner-spin-button
+      -webkit-appearance: none
+      margin: 0
+
     width: 100%
     display: flex
     flex-wrap: wrap

package/lib/components/VColorPicker/VColorPickerPreview.js

@@ -5,7 +5,8 @@ import "./VColorPickerPreview.css";
 // Components
 import { VBtn } from "../VBtn/index.js";
 import { VSlider } from "../VSlider/index.js"; // Composables
-import { makeComponentProps } from "../../composables/component.js"; // Utilities
+import { makeComponentProps } from "../../composables/component.js";
+import { useLocale } from "../../composables/locale.js"; // Utilities
 import { onUnmounted } from 'vue';
 import { nullColor } from "./util/index.js";
 import { defineComponent, HSVtoCSS, parseColor, propsFactory, RGBtoHSV, SUPPORTS_EYE_DROPPER, useRender } from "../../util/index.js"; // Types
@@ -27,6 +28,9 @@ export const VColorPickerPreview = defineComponent({
     let {
       emit
     } = _ref;
+    const {
+      t
+    } = useLocale();
     const abortController = new AbortController();
     onUnmounted(() => abortController.abort());
     async function openEyeDropper() {
@@ -52,6 +56,7 @@ export const VColorPickerPreview = defineComponent({
       "class": "v-color-picker-preview__eye-dropper",
       "key": "eyeDropper"
     }, [_createVNode(VBtn, {
+      "aria-label": t('$vuetify.colorPicker.ariaLabel.eyedropper'),
       "density": "comfortable",
       "disabled": props.disabled,
       "icon": "$eyeDropper",
@@ -67,6 +72,7 @@ export const VColorPickerPreview = defineComponent({
       "class": "v-color-picker-preview__sliders"
     }, [_createVNode(VSlider, {
       "class": "v-color-picker-preview__track v-color-picker-preview__hue",
+      "name": t('$vuetify.colorPicker.ariaLabel.hueSlider'),
       "modelValue": props.color?.h,
       "onUpdate:modelValue": h => emit('update:color', {
         ...(props.color ?? nullColor),
@@ -82,6 +88,7 @@ export const VColorPickerPreview = defineComponent({
       "hideDetails": true
     }, null), !props.hideAlpha && _createVNode(VSlider, {
       "class": "v-color-picker-preview__track v-color-picker-preview__alpha",
+      "name": t('$vuetify.colorPicker.ariaLabel.alphaSlider'),
       "modelValue": props.color?.a ?? 1,
       "onUpdate:modelValue": a => emit('update:color', {
         ...(props.color ?? nullColor),

package/lib/components/VColorPicker/VColorPickerPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"VColorPickerPreview.js","names":["VBtn","VSlider","makeComponentProps","onUnmounted","nullColor","defineComponent","HSVtoCSS","parseColor","propsFactory","RGBtoHSV","SUPPORTS_EYE_DROPPER","useRender","makeVColorPickerPreviewProps","color","type","Object","disabled","Boolean","hideAlpha","VColorPickerPreview","name","props","emits","setup","_ref","emit","abortController","AbortController","abort","openEyeDropper","eyeDropper","window","EyeDropper","result","open","signal","colorHexValue","sRGBHex","e","_createElementVNode","_normalizeClass","class","_normalizeStyle","style","_createVNode","background","h","a"],"sources":["../../../src/components/VColorPicker/VColorPickerPreview.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerPreview.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\nimport { VSlider } from '@/components/VSlider'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\n\n// Utilities\nimport { onUnmounted } from 'vue'\nimport { nullColor } from './util'\nimport {\n  defineComponent,\n  HSVtoCSS,\n  parseColor,\n  propsFactory,\n  RGBtoHSV,\n  SUPPORTS_EYE_DROPPER,\n  useRender,\n} from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSV } from '@/util'\n\nexport const makeVColorPickerPreviewProps = propsFactory({\n  color: {\n    type: Object as PropType<HSV | null>,\n  },\n  disabled: Boolean,\n  hideAlpha: Boolean,\n\n  ...makeComponentProps(),\n}, 'VColorPickerPreview')\n\nexport const VColorPickerPreview = defineComponent({\n  name: 'VColorPickerPreview',\n\n  props: makeVColorPickerPreviewProps(),\n\n  emits: {\n    'update:color': (color: HSV) => true,\n  },\n\n  setup (props, { emit }) {\n    const abortController = new AbortController()\n\n    onUnmounted(() => abortController.abort())\n\n    async function openEyeDropper () {\n      if (!SUPPORTS_EYE_DROPPER || props.disabled) return\n\n      const eyeDropper = new window.EyeDropper()\n      try {\n        const result = await eyeDropper.open({ signal: abortController.signal })\n        const colorHexValue = RGBtoHSV(parseColor(result.sRGBHex))\n        emit('update:color', { ...(props.color ?? nullColor), ...colorHexValue })\n      } catch (e) {}\n    }\n\n    useRender(() => (\n      <div\n        class={[\n          'v-color-picker-preview',\n          {\n            'v-color-picker-preview--hide-alpha': props.hideAlpha,\n          },\n          props.class,\n        ]}\n        style={ props.style }\n      >\n        { SUPPORTS_EYE_DROPPER && (\n          <div class=\"v-color-picker-preview__eye-dropper\" key=\"eyeDropper\">\n            <VBtn density=\"comfortable\" disabled={ props.disabled } icon=\"$eyeDropper\" variant=\"plain\" onClick={ openEyeDropper } />\n          </div>\n        )}\n\n        <div class=\"v-color-picker-preview__dot\">\n          <div style={{ background: HSVtoCSS(props.color ?? nullColor) }} />\n        </div>\n\n        <div class=\"v-color-picker-preview__sliders\">\n          <VSlider\n            class=\"v-color-picker-preview__track v-color-picker-preview__hue\"\n            modelValue={ props.color?.h }\n            onUpdate:modelValue={ h => emit('update:color', { ...(props.color ?? nullColor), h }) }\n            step={ 0 }\n            min={ 0 }\n            max={ 360 }\n            disabled={ props.disabled }\n            thumbSize={ 14 }\n            trackSize={ 8 }\n            trackFillColor=\"white\"\n            hideDetails\n          />\n\n          { !props.hideAlpha && (\n            <VSlider\n              class=\"v-color-picker-preview__track v-color-picker-preview__alpha\"\n              modelValue={ props.color?.a ?? 1 }\n              onUpdate:modelValue={ a => emit('update:color', { ...(props.color ?? nullColor), a }) }\n              step={ 1 / 256 }\n              min={ 0 }\n              max={ 1 }\n              disabled={ props.disabled }\n              thumbSize={ 14 }\n              trackSize={ 8 }\n              trackFillColor=\"white\"\n              hideDetails\n            />\n          )}\n        </div>\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VColorPickerPreview = InstanceType<typeof VColorPickerPreview>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VColorPickerPreview.js","names":["VBtn","VSlider","makeComponentProps","useLocale","onUnmounted","nullColor","defineComponent","HSVtoCSS","parseColor","propsFactory","RGBtoHSV","SUPPORTS_EYE_DROPPER","useRender","makeVColorPickerPreviewProps","color","type","Object","disabled","Boolean","hideAlpha","VColorPickerPreview","name","props","emits","setup","_ref","emit","t","abortController","AbortController","abort","openEyeDropper","eyeDropper","window","EyeDropper","result","open","signal","colorHexValue","sRGBHex","e","_createElementVNode","_normalizeClass","class","_normalizeStyle","style","_createVNode","background","h","a"],"sources":["../../../src/components/VColorPicker/VColorPickerPreview.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerPreview.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\nimport { VSlider } from '@/components/VSlider'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { useLocale } from '@/composables/locale'\n\n// Utilities\nimport { onUnmounted } from 'vue'\nimport { nullColor } from './util'\nimport {\n  defineComponent,\n  HSVtoCSS,\n  parseColor,\n  propsFactory,\n  RGBtoHSV,\n  SUPPORTS_EYE_DROPPER,\n  useRender,\n} from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSV } from '@/util'\n\nexport const makeVColorPickerPreviewProps = propsFactory({\n  color: {\n    type: Object as PropType<HSV | null>,\n  },\n  disabled: Boolean,\n  hideAlpha: Boolean,\n\n  ...makeComponentProps(),\n}, 'VColorPickerPreview')\n\nexport const VColorPickerPreview = defineComponent({\n  name: 'VColorPickerPreview',\n\n  props: makeVColorPickerPreviewProps(),\n\n  emits: {\n    'update:color': (color: HSV) => true,\n  },\n\n  setup (props, { emit }) {\n    const { t } = useLocale()\n\n    const abortController = new AbortController()\n\n    onUnmounted(() => abortController.abort())\n\n    async function openEyeDropper () {\n      if (!SUPPORTS_EYE_DROPPER || props.disabled) return\n\n      const eyeDropper = new window.EyeDropper()\n      try {\n        const result = await eyeDropper.open({ signal: abortController.signal })\n        const colorHexValue = RGBtoHSV(parseColor(result.sRGBHex))\n        emit('update:color', { ...(props.color ?? nullColor), ...colorHexValue })\n      } catch (e) {}\n    }\n\n    useRender(() => (\n      <div\n        class={[\n          'v-color-picker-preview',\n          {\n            'v-color-picker-preview--hide-alpha': props.hideAlpha,\n          },\n          props.class,\n        ]}\n        style={ props.style }\n      >\n        { SUPPORTS_EYE_DROPPER && (\n          <div class=\"v-color-picker-preview__eye-dropper\" key=\"eyeDropper\">\n            <VBtn\n              aria-label={ t('$vuetify.colorPicker.ariaLabel.eyedropper') }\n              density=\"comfortable\"\n              disabled={ props.disabled }\n              icon=\"$eyeDropper\"\n              variant=\"plain\"\n              onClick={ openEyeDropper }\n            />\n          </div>\n        )}\n\n        <div class=\"v-color-picker-preview__dot\">\n          <div style={{ background: HSVtoCSS(props.color ?? nullColor) }} />\n        </div>\n\n        <div class=\"v-color-picker-preview__sliders\">\n          <VSlider\n            class=\"v-color-picker-preview__track v-color-picker-preview__hue\"\n            name={ t('$vuetify.colorPicker.ariaLabel.hueSlider') }\n            modelValue={ props.color?.h }\n            onUpdate:modelValue={ h => emit('update:color', { ...(props.color ?? nullColor), h }) }\n            step={ 0 }\n            min={ 0 }\n            max={ 360 }\n            disabled={ props.disabled }\n            thumbSize={ 14 }\n            trackSize={ 8 }\n            trackFillColor=\"white\"\n            hideDetails\n          />\n\n          { !props.hideAlpha && (\n            <VSlider\n              class=\"v-color-picker-preview__track v-color-picker-preview__alpha\"\n              name={ t('$vuetify.colorPicker.ariaLabel.alphaSlider') }\n              modelValue={ props.color?.a ?? 1 }\n              onUpdate:modelValue={ a => emit('update:color', { ...(props.color ?? nullColor), a }) }\n              step={ 1 / 256 }\n              min={ 0 }\n              max={ 1 }\n              disabled={ props.disabled }\n              thumbSize={ 14 }\n              trackSize={ 8 }\n              trackFillColor=\"white\"\n              hideDetails\n            />\n          )}\n        </div>\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VColorPickerPreview = InstanceType<typeof VColorPickerPreview>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VColorPicker/util/index.d.ts

@@ -45,6 +45,7 @@ export declare const modes: {
             label: string;
             getValue: (c: string) => string;
             getColor: (c: string, v: string) => string;
+            localeKey: string;
         }[];
         inputProps: Record<string, unknown>;
         from: (color: any) => HSV;

package/lib/components/VColorPicker/util/index.js

@@ -70,7 +70,8 @@ const rgba = {
     getColor: (c, v) => ({
       ...c,
       r: Number(v)
-    })
+    }),
+    localeKey: 'redInput'
   }, {
     label: 'G',
     max: 255,
@@ -79,7 +80,8 @@ const rgba = {
     getColor: (c, v) => ({
       ...c,
       g: Number(v)
-    })
+    }),
+    localeKey: 'greenInput'
   }, {
     label: 'B',
     max: 255,
@@ -88,7 +90,8 @@ const rgba = {
     getColor: (c, v) => ({
       ...c,
       b: Number(v)
-    })
+    }),
+    localeKey: 'blueInput'
   }, {
     label: 'A',
     max: 1,
@@ -102,7 +105,8 @@ const rgba = {
     getColor: (c, v) => ({
       ...c,
       a: Number(v)
-    })
+    }),
+    localeKey: 'alphaInput'
   }],
   to: HSVtoRGB,
   from: RGBtoHSV
@@ -124,7 +128,8 @@ const hsla = {
     getColor: (c, v) => ({
       ...c,
       h: Number(v)
-    })
+    }),
+    localeKey: 'hueInput'
   }, {
     label: 'S',
     max: 1,
@@ -133,7 +138,8 @@ const hsla = {
     getColor: (c, v) => ({
       ...c,
       s: Number(v)
-    })
+    }),
+    localeKey: 'saturationInput'
   }, {
     label: 'L',
     max: 1,
@@ -142,7 +148,8 @@ const hsla = {
     getColor: (c, v) => ({
       ...c,
       l: Number(v)
-    })
+    }),
+    localeKey: 'lightnessInput'
   }, {
     label: 'A',
     max: 1,
@@ -156,7 +163,8 @@ const hsla = {
     getColor: (c, v) => ({
       ...c,
       a: Number(v)
-    })
+    }),
+    localeKey: 'alphaInput'
   }],
   to: HSVtoHSL,
   from: HSLtoHSV
@@ -172,7 +180,8 @@ const hexa = {
   inputs: [{
     label: 'HEXA',
     getValue: c => c,
-    getColor: (c, v) => v
+    getColor: (c, v) => v,
+    localeKey: 'hexaInput'
   }],
   to: HSVtoHex,
   from: HexToHSV
@@ -182,7 +191,8 @@ const hex = {
   inputs: [{
     label: 'HEX',
     getValue: c => c.slice(0, 7),
-    getColor: (c, v) => v
+    getColor: (c, v) => v,
+    localeKey: 'hexInput'
   }]
 };
 export const modes = {

package/lib/components/VColorPicker/util/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["HexToHSV","HSLtoHSV","HSVtoHex","HSVtoHSL","HSVtoRGB","RGBtoHSV","has","stripAlpha","color","a","rest","extractColor","input","hasA","startsWith","r","g","b","h","s","l","Math","round","hex","slice","converted","hasAlpha","length","nullColor","v","rgba","inputProps","type","min","inputs","label","max","step","getValue","c","getColor","Number","_ref","to","from","rgb","hsla","_ref2","hsl","hexa","modes"],"sources":["../../../../src/components/VColorPicker/util/index.ts"],"sourcesContent":["// Utilities\nimport {\n  HexToHSV,\n  HSLtoHSV,\n  HSVtoHex,\n  HSVtoHSL,\n  HSVtoRGB,\n  RGBtoHSV,\n} from '@/util/colorUtils'\nimport { has } from '@/util/helpers'\n\n// Types\nimport type { HSL, HSV, RGB } from '@/util/colorUtils'\n\nfunction stripAlpha (color: any, stripAlpha: boolean) {\n  if (stripAlpha) {\n    const { a, ...rest } = color\n\n    return rest\n  }\n\n  return color\n}\n\nexport function extractColor (color: HSV, input: any) {\n  if (input == null || typeof input === 'string') {\n    const hasA = color.a !== 1\n    if (input?.startsWith('rgb(')) {\n      const { r, g, b, a } = HSVtoRGB(color)\n      return `rgb(${r} ${g} ${b}` + (hasA ? ` / ${a})` : ')')\n    } else if (input?.startsWith('hsl(')) {\n      const { h, s, l, a } = HSVtoHSL(color)\n      return `hsl(${h} ${Math.round(s * 100)} ${Math.round(l * 100)}` + (hasA ? ` / ${a})` : ')')\n    }\n\n    const hex = HSVtoHex(color)\n\n    if (color.a === 1) return hex.slice(0, 7)\n    else return hex\n  }\n\n  if (typeof input === 'object') {\n    let converted\n\n    if (has(input, ['r', 'g', 'b'])) converted = HSVtoRGB(color)\n    else if (has(input, ['h', 's', 'l'])) converted = HSVtoHSL(color)\n    else if (has(input, ['h', 's', 'v'])) converted = color\n\n    return stripAlpha(converted, !has(input, ['a']) && color.a === 1)\n  }\n\n  return color\n}\n\nexport function hasAlpha (color: any) {\n  if (!color) return false\n\n  if (typeof color === 'string') {\n    return color.length > 7\n  }\n\n  if (typeof color === 'object') {\n    return has(color, ['a']) || has(color, ['alpha'])\n  }\n\n  return false\n}\n\nexport const nullColor = { h: 0, s: 0, v: 0, a: 1 }\n\nexport type ColorPickerMode = {\n  inputProps: Record<string, unknown>\n  inputs: {\n    [key: string]: any\n    getValue: (color: any) => number | string\n    getColor: (color: any, v: string) => any\n  }[]\n  from: (color: any) => HSV\n  to: (color: HSV) => any\n}\n\nconst rgba: ColorPickerMode = {\n  inputProps: {\n    type: 'number',\n    min: 0,\n  },\n  inputs: [\n    {\n      label: 'R',\n      max: 255,\n      step: 1,\n      getValue: (c: RGB) => Math.round(c.r),\n      getColor: (c: RGB, v: string): RGB => ({ ...c, r: Number(v) }),\n    },\n    {\n      label: 'G',\n      max: 255,\n      step: 1,\n      getValue: (c: RGB) => Math.round(c.g),\n      getColor: (c: RGB, v: string): RGB => ({ ...c, g: Number(v) }),\n    },\n    {\n      label: 'B',\n      max: 255,\n      step: 1,\n      getValue: (c: RGB) => Math.round(c.b),\n      getColor: (c: RGB, v: string): RGB => ({ ...c, b: Number(v) }),\n    },\n    {\n      label: 'A',\n      max: 1,\n      step: 0.01,\n      getValue: ({ a }: RGB) => a != null ? Math.round(a * 100) / 100 : 1,\n      getColor: (c: RGB, v: string): RGB => ({ ...c, a: Number(v) }),\n    },\n  ],\n  to: HSVtoRGB,\n  from: RGBtoHSV,\n}\n\nconst rgb = {\n  ...rgba,\n  inputs: rgba.inputs?.slice(0, 3),\n}\n\nconst hsla: ColorPickerMode = {\n  inputProps: {\n    type: 'number',\n    min: 0,\n  },\n  inputs: [\n    {\n      label: 'H',\n      max: 360,\n      step: 1,\n      getValue: (c: HSL) => Math.round(c.h),\n      getColor: (c: HSL, v: string): HSL => ({ ...c, h: Number(v) }),\n    },\n    {\n      label: 'S',\n      max: 1,\n      step: 0.01,\n      getValue: (c: HSL) => Math.round(c.s * 100) / 100,\n      getColor: (c: HSL, v: string): HSL => ({ ...c, s: Number(v) }),\n    },\n    {\n      label: 'L',\n      max: 1,\n      step: 0.01,\n      getValue: (c: HSL) => Math.round(c.l * 100) / 100,\n      getColor: (c: HSL, v: string): HSL => ({ ...c, l: Number(v) }),\n    },\n    {\n      label: 'A',\n      max: 1,\n      step: 0.01,\n      getValue: ({ a }: HSL) => a != null ? Math.round(a * 100) / 100 : 1,\n      getColor: (c: HSL, v: string): HSL => ({ ...c, a: Number(v) }),\n    },\n  ],\n  to: HSVtoHSL,\n  from: HSLtoHSV,\n}\n\nconst hsl = {\n  ...hsla,\n  inputs: hsla.inputs.slice(0, 3),\n}\n\nconst hexa: ColorPickerMode = {\n  inputProps: {\n    type: 'text',\n  },\n  inputs: [\n    {\n      label: 'HEXA',\n      getValue: (c: string) => c,\n      getColor: (c: string, v: string) => v,\n    },\n  ],\n  to: HSVtoHex,\n  from: HexToHSV,\n}\n\nconst hex = {\n  ...hexa,\n  inputs: [\n    {\n      label: 'HEX',\n      getValue: (c: string) => c.slice(0, 7),\n      getColor: (c: string, v: string) => v,\n    },\n  ],\n}\n\nexport const modes = {\n  rgb,\n  rgba,\n  hsl,\n  hsla,\n  hex,\n  hexa,\n} satisfies Record<string, ColorPickerMode>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["HexToHSV","HSLtoHSV","HSVtoHex","HSVtoHSL","HSVtoRGB","RGBtoHSV","has","stripAlpha","color","a","rest","extractColor","input","hasA","startsWith","r","g","b","h","s","l","Math","round","hex","slice","converted","hasAlpha","length","nullColor","v","rgba","inputProps","type","min","inputs","label","max","step","getValue","c","getColor","Number","localeKey","_ref","to","from","rgb","hsla","_ref2","hsl","hexa","modes"],"sources":["../../../../src/components/VColorPicker/util/index.ts"],"sourcesContent":["// Utilities\nimport {\n  HexToHSV,\n  HSLtoHSV,\n  HSVtoHex,\n  HSVtoHSL,\n  HSVtoRGB,\n  RGBtoHSV,\n} from '@/util/colorUtils'\nimport { has } from '@/util/helpers'\n\n// Types\nimport type { HSL, HSV, RGB } from '@/util/colorUtils'\n\nfunction stripAlpha (color: any, stripAlpha: boolean) {\n  if (stripAlpha) {\n    const { a, ...rest } = color\n\n    return rest\n  }\n\n  return color\n}\n\nexport function extractColor (color: HSV, input: any) {\n  if (input == null || typeof input === 'string') {\n    const hasA = color.a !== 1\n    if (input?.startsWith('rgb(')) {\n      const { r, g, b, a } = HSVtoRGB(color)\n      return `rgb(${r} ${g} ${b}` + (hasA ? ` / ${a})` : ')')\n    } else if (input?.startsWith('hsl(')) {\n      const { h, s, l, a } = HSVtoHSL(color)\n      return `hsl(${h} ${Math.round(s * 100)} ${Math.round(l * 100)}` + (hasA ? ` / ${a})` : ')')\n    }\n\n    const hex = HSVtoHex(color)\n\n    if (color.a === 1) return hex.slice(0, 7)\n    else return hex\n  }\n\n  if (typeof input === 'object') {\n    let converted\n\n    if (has(input, ['r', 'g', 'b'])) converted = HSVtoRGB(color)\n    else if (has(input, ['h', 's', 'l'])) converted = HSVtoHSL(color)\n    else if (has(input, ['h', 's', 'v'])) converted = color\n\n    return stripAlpha(converted, !has(input, ['a']) && color.a === 1)\n  }\n\n  return color\n}\n\nexport function hasAlpha (color: any) {\n  if (!color) return false\n\n  if (typeof color === 'string') {\n    return color.length > 7\n  }\n\n  if (typeof color === 'object') {\n    return has(color, ['a']) || has(color, ['alpha'])\n  }\n\n  return false\n}\n\nexport const nullColor = { h: 0, s: 0, v: 0, a: 1 }\n\nexport type ColorPickerMode = {\n  inputProps: Record<string, unknown>\n  inputs: {\n    [key: string]: any\n    getValue: (color: any) => number | string\n    getColor: (color: any, v: string) => any\n  }[]\n  from: (color: any) => HSV\n  to: (color: HSV) => any\n}\n\nconst rgba: ColorPickerMode = {\n  inputProps: {\n    type: 'number',\n    min: 0,\n  },\n  inputs: [\n    {\n      label: 'R',\n      max: 255,\n      step: 1,\n      getValue: (c: RGB) => Math.round(c.r),\n      getColor: (c: RGB, v: string): RGB => ({ ...c, r: Number(v) }),\n      localeKey: 'redInput',\n    },\n    {\n      label: 'G',\n      max: 255,\n      step: 1,\n      getValue: (c: RGB) => Math.round(c.g),\n      getColor: (c: RGB, v: string): RGB => ({ ...c, g: Number(v) }),\n      localeKey: 'greenInput',\n    },\n    {\n      label: 'B',\n      max: 255,\n      step: 1,\n      getValue: (c: RGB) => Math.round(c.b),\n      getColor: (c: RGB, v: string): RGB => ({ ...c, b: Number(v) }),\n      localeKey: 'blueInput',\n    },\n    {\n      label: 'A',\n      max: 1,\n      step: 0.01,\n      getValue: ({ a }: RGB) => a != null ? Math.round(a * 100) / 100 : 1,\n      getColor: (c: RGB, v: string): RGB => ({ ...c, a: Number(v) }),\n      localeKey: 'alphaInput',\n    },\n  ],\n  to: HSVtoRGB,\n  from: RGBtoHSV,\n}\n\nconst rgb = {\n  ...rgba,\n  inputs: rgba.inputs?.slice(0, 3),\n}\n\nconst hsla: ColorPickerMode = {\n  inputProps: {\n    type: 'number',\n    min: 0,\n  },\n  inputs: [\n    {\n      label: 'H',\n      max: 360,\n      step: 1,\n      getValue: (c: HSL) => Math.round(c.h),\n      getColor: (c: HSL, v: string): HSL => ({ ...c, h: Number(v) }),\n      localeKey: 'hueInput',\n    },\n    {\n      label: 'S',\n      max: 1,\n      step: 0.01,\n      getValue: (c: HSL) => Math.round(c.s * 100) / 100,\n      getColor: (c: HSL, v: string): HSL => ({ ...c, s: Number(v) }),\n      localeKey: 'saturationInput',\n    },\n    {\n      label: 'L',\n      max: 1,\n      step: 0.01,\n      getValue: (c: HSL) => Math.round(c.l * 100) / 100,\n      getColor: (c: HSL, v: string): HSL => ({ ...c, l: Number(v) }),\n      localeKey: 'lightnessInput',\n    },\n    {\n      label: 'A',\n      max: 1,\n      step: 0.01,\n      getValue: ({ a }: HSL) => a != null ? Math.round(a * 100) / 100 : 1,\n      getColor: (c: HSL, v: string): HSL => ({ ...c, a: Number(v) }),\n      localeKey: 'alphaInput',\n    },\n  ],\n  to: HSVtoHSL,\n  from: HSLtoHSV,\n}\n\nconst hsl = {\n  ...hsla,\n  inputs: hsla.inputs.slice(0, 3),\n}\n\nconst hexa: ColorPickerMode = {\n  inputProps: {\n    type: 'text',\n  },\n  inputs: [\n    {\n      label: 'HEXA',\n      getValue: (c: string) => c,\n      getColor: (c: string, v: string) => v,\n      localeKey: 'hexaInput',\n    },\n  ],\n  to: HSVtoHex,\n  from: HexToHSV,\n}\n\nconst hex = {\n  ...hexa,\n  inputs: [\n    {\n      label: 'HEX',\n      getValue: (c: string) => c.slice(0, 7),\n      getColor: (c: string, v: string) => v,\n      localeKey: 'hexInput',\n    },\n  ],\n}\n\nexport const modes = {\n  rgb,\n  rgba,\n  hsl,\n  hsla,\n  hex,\n  hexa,\n} satisfies Record<string, ColorPickerMode>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VConfirmEdit/VConfirmEdit.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, mergeProps as _mergeProps, createVNode as _createVNode, createElementVNode as _createElementVNode } from "vue";
 // Components
 import { VBtn } from "../VBtn/index.js"; // Composables
-import { useLocale } from "../../composables/index.js";
+import { useLocale } from "../../composables/locale.js";
 import { useProxiedModel } from "../../composables/proxiedModel.js"; // Utilities
 import { computed, ref, toRaw, watchEffect } from 'vue';
 import { deepEqual, genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types

package/lib/components/VConfirmEdit/VConfirmEdit.js.map

@@ -1 +1 @@
-{"version":3,"file":"VConfirmEdit.js","names":["VBtn","useLocale","useProxiedModel","computed","ref","toRaw","watchEffect","deepEqual","genericComponent","propsFactory","useRender","makeVConfirmEditProps","modelValue","color","String","cancelText","type","default","okText","disabled","Boolean","Array","undefined","hideActions","VConfirmEdit","name","props","emits","cancel","save","value","setup","_ref","emit","slots","model","internalModel","structuredClone","t","isPristine","isActionDisabled","action","isArray","includes","isSaveDisabled","isCancelDisabled","actions","actionsProps","_createElementVNode","_Fragment","_createVNode","_mergeProps","actionsUsed"],"sources":["../../../src/components/VConfirmEdit/VConfirmEdit.tsx"],"sourcesContent":["// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { useLocale } from '@/composables'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref, toRaw, watchEffect } from 'vue'\nimport { deepEqual, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType, Ref, VNode } from 'vue'\nimport type { GenericProps } from '@/util'\n\nexport type VConfirmEditSlots<T> = {\n  default: {\n    model: Ref<T>\n    save: () => void\n    cancel: () => void\n    isPristine: boolean\n    get actions (): (props?: {}) => VNode\n  }\n}\n\nexport const makeVConfirmEditProps = propsFactory({\n  modelValue: null,\n  color: String,\n  cancelText: {\n    type: String,\n    default: '$vuetify.confirmEdit.cancel',\n  },\n  okText: {\n    type: String,\n    default: '$vuetify.confirmEdit.ok',\n  },\n  disabled: {\n    type: [Boolean, Array] as PropType<boolean | ('save' | 'cancel')[]>,\n    default: undefined,\n  },\n  hideActions: Boolean,\n}, 'VConfirmEdit')\n\nexport const VConfirmEdit = genericComponent<new <T> (\n  props: {\n    modelValue?: T\n    'onUpdate:modelValue'?: (value: T) => void\n    'onSave'?: (value: T) => void\n  },\n  slots: VConfirmEditSlots<T>\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VConfirmEdit',\n\n  props: makeVConfirmEditProps(),\n\n  emits: {\n    cancel: () => true,\n    save: (value: any) => true,\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const model = useProxiedModel(props, 'modelValue')\n    const internalModel = ref()\n    watchEffect(() => {\n      internalModel.value = structuredClone(toRaw(model.value))\n    })\n\n    const { t } = useLocale()\n\n    const isPristine = computed(() => {\n      return deepEqual(model.value, internalModel.value)\n    })\n\n    function isActionDisabled (action: 'save' | 'cancel') {\n      if (typeof props.disabled === 'boolean') {\n        return props.disabled\n      }\n\n      if (Array.isArray(props.disabled)) {\n        return props.disabled.includes(action)\n      }\n\n      return isPristine.value\n    }\n\n    const isSaveDisabled = computed(() => isActionDisabled('save'))\n    const isCancelDisabled = computed(() => isActionDisabled('cancel'))\n\n    function save () {\n      model.value = internalModel.value\n      emit('save', internalModel.value)\n    }\n\n    function cancel () {\n      internalModel.value = structuredClone(toRaw(model.value))\n      emit('cancel')\n    }\n\n    function actions (actionsProps?: {}) {\n      return (\n        <>\n          <VBtn\n            disabled={ isCancelDisabled.value }\n            variant=\"text\"\n            color={ props.color }\n            onClick={ cancel }\n            text={ t(props.cancelText) }\n            { ...actionsProps }\n          />\n\n          <VBtn\n            disabled={ isSaveDisabled.value }\n            variant=\"text\"\n            color={ props.color }\n            onClick={ save }\n            text={ t(props.okText) }\n            { ...actionsProps }\n          />\n        </>\n      )\n    }\n\n    let actionsUsed = false\n    useRender(() => {\n      return (\n        <>\n          {\n            slots.default?.({\n              model: internalModel,\n              save,\n              cancel,\n              isPristine: isPristine.value,\n              get actions () {\n                actionsUsed = true\n                return actions\n              },\n            })\n          }\n\n          { !props.hideActions && !actionsUsed && actions() }\n        </>\n      )\n    })\n\n    return {\n      save,\n      cancel,\n      isPristine,\n    }\n  },\n})\n\nexport type VConfirmEdit = InstanceType<typeof VConfirmEdit>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VConfirmEdit.js","names":["VBtn","useLocale","useProxiedModel","computed","ref","toRaw","watchEffect","deepEqual","genericComponent","propsFactory","useRender","makeVConfirmEditProps","modelValue","color","String","cancelText","type","default","okText","disabled","Boolean","Array","undefined","hideActions","VConfirmEdit","name","props","emits","cancel","save","value","setup","_ref","emit","slots","model","internalModel","structuredClone","t","isPristine","isActionDisabled","action","isArray","includes","isSaveDisabled","isCancelDisabled","actions","actionsProps","_createElementVNode","_Fragment","_createVNode","_mergeProps","actionsUsed"],"sources":["../../../src/components/VConfirmEdit/VConfirmEdit.tsx"],"sourcesContent":["// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { useLocale } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref, toRaw, watchEffect } from 'vue'\nimport { deepEqual, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType, Ref, VNode } from 'vue'\nimport type { GenericProps } from '@/util'\n\nexport type VConfirmEditSlots<T> = {\n  default: {\n    model: Ref<T>\n    save: () => void\n    cancel: () => void\n    isPristine: boolean\n    get actions (): (props?: {}) => VNode\n  }\n}\n\nexport const makeVConfirmEditProps = propsFactory({\n  modelValue: null,\n  color: String,\n  cancelText: {\n    type: String,\n    default: '$vuetify.confirmEdit.cancel',\n  },\n  okText: {\n    type: String,\n    default: '$vuetify.confirmEdit.ok',\n  },\n  disabled: {\n    type: [Boolean, Array] as PropType<boolean | ('save' | 'cancel')[]>,\n    default: undefined,\n  },\n  hideActions: Boolean,\n}, 'VConfirmEdit')\n\nexport const VConfirmEdit = genericComponent<new <T> (\n  props: {\n    modelValue?: T\n    'onUpdate:modelValue'?: (value: T) => void\n    'onSave'?: (value: T) => void\n  },\n  slots: VConfirmEditSlots<T>\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VConfirmEdit',\n\n  props: makeVConfirmEditProps(),\n\n  emits: {\n    cancel: () => true,\n    save: (value: any) => true,\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const model = useProxiedModel(props, 'modelValue')\n    const internalModel = ref()\n    watchEffect(() => {\n      internalModel.value = structuredClone(toRaw(model.value))\n    })\n\n    const { t } = useLocale()\n\n    const isPristine = computed(() => {\n      return deepEqual(model.value, internalModel.value)\n    })\n\n    function isActionDisabled (action: 'save' | 'cancel') {\n      if (typeof props.disabled === 'boolean') {\n        return props.disabled\n      }\n\n      if (Array.isArray(props.disabled)) {\n        return props.disabled.includes(action)\n      }\n\n      return isPristine.value\n    }\n\n    const isSaveDisabled = computed(() => isActionDisabled('save'))\n    const isCancelDisabled = computed(() => isActionDisabled('cancel'))\n\n    function save () {\n      model.value = internalModel.value\n      emit('save', internalModel.value)\n    }\n\n    function cancel () {\n      internalModel.value = structuredClone(toRaw(model.value))\n      emit('cancel')\n    }\n\n    function actions (actionsProps?: {}) {\n      return (\n        <>\n          <VBtn\n            disabled={ isCancelDisabled.value }\n            variant=\"text\"\n            color={ props.color }\n            onClick={ cancel }\n            text={ t(props.cancelText) }\n            { ...actionsProps }\n          />\n\n          <VBtn\n            disabled={ isSaveDisabled.value }\n            variant=\"text\"\n            color={ props.color }\n            onClick={ save }\n            text={ t(props.okText) }\n            { ...actionsProps }\n          />\n        </>\n      )\n    }\n\n    let actionsUsed = false\n    useRender(() => {\n      return (\n        <>\n          {\n            slots.default?.({\n              model: internalModel,\n              save,\n              cancel,\n              isPristine: isPristine.value,\n              get actions () {\n                actionsUsed = true\n                return actions\n              },\n            })\n          }\n\n          { !props.hideActions && !actionsUsed && actions() }\n        </>\n      )\n    })\n\n    return {\n      save,\n      cancel,\n      isPristine,\n    }\n  },\n})\n\nexport type VConfirmEdit = InstanceType<typeof VConfirmEdit>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VDataIterator/VDataIterator.d.ts

@@ -5,7 +5,7 @@ import { provideSelection } from "../VDataTable/composables/select.js";
 import { provideSort } from "../VDataTable/composables/sort.js";
 import type { Component } from 'vue';
 import type { DataIteratorItem } from './composables/items.js';
-import type { Group } from "../VDataTable/composables/group.js";
+import type { Group, GroupSummary } from "../VDataTable/composables/group.js";
 import type { SortItem } from "../VDataTable/composables/sort.js";
 import type { LoaderSlotProps } from "../../composables/loader.js";
 import type { GenericProps } from "../../util/index.js";
@@ -28,7 +28,7 @@ type VDataIteratorSlotProps<T> = {
     isGroupOpen: ReturnType<typeof provideGroupBy>['isGroupOpen'];
     toggleGroup: ReturnType<typeof provideGroupBy>['toggleGroup'];
     items: readonly DataIteratorItem<T>[];
-    groupedItems: readonly (DataIteratorItem<T> | Group<DataIteratorItem<T>>)[];
+    groupedItems: readonly (DataIteratorItem<T> | Group<DataIteratorItem<T>> | GroupSummary<DataIteratorItem<T>>)[];
 };
 export type VDataIteratorSlots<T> = {
     default: VDataIteratorSlotProps<T>;

package/lib/components/VDataIterator/VDataIterator.js

@@ -98,7 +98,7 @@ export const VDataIterator = genericComponent()({
     });
     const {
       flatItems
-    } = useGroupedItems(sortedItems, groupBy, opened);
+    } = useGroupedItems(sortedItems, groupBy, opened, false);
     const itemsLength = toRef(() => flatItems.value.length);
     const {
       startIndex,

package/lib/components/VDataIterator/VDataIterator.js.map

@@ -1 +1 @@
-{"version":3,"file":"VDataIterator.js","names":["VFadeTransition","makeDataTableExpandProps","provideExpanded","makeDataTableGroupProps","provideGroupBy","useGroupedItems","useOptions","createPagination","makeDataTablePaginateProps","providePagination","usePaginatedItems","makeDataTableSelectProps","provideSelection","createSort","makeDataTableSortProps","provideSort","useSortedItems","makeDataIteratorItemsProps","useDataIteratorItems","makeComponentProps","makeFilterProps","useFilter","LoaderSlot","useProxiedModel","makeTagProps","makeTransitionProps","MaybeTransition","computed","toRef","genericComponent","propsFactory","useRender","makeVDataIteratorProps","search","String","loading","Boolean","itemsPerPage","transition","component","hideOnLeave","VDataIterator","name","props","emits","value","setup","_ref","slots","groupBy","items","filteredItems","transform","item","raw","sortBy","multiSort","mustSort","page","toggleSort","sortByWithGroups","opened","extractRows","isGroupOpen","toggleGroup","sortedItems","flatItems","itemsLength","length","startIndex","stopIndex","pageCount","prevPage","nextPage","setItemsPerPage","setPage","paginatedItems","paginatedItemsWithoutGroups","isSelected","select","selectAll","toggleSelect","allItems","currentPage","isExpanded","toggleExpand","slotProps","groupedItems","_createVNode","tag","_normalizeClass","class","_normalizeStyle","style","default","header","loader","_createElementVNode","footer"],"sources":["../../../src/components/VDataIterator/VDataIterator.tsx"],"sourcesContent":["// Components\nimport { VFadeTransition } from '@/components/transitions'\nimport { makeDataTableExpandProps, provideExpanded } from '@/components/VDataTable/composables/expand'\nimport { makeDataTableGroupProps, provideGroupBy, useGroupedItems } from '@/components/VDataTable/composables/group'\nimport { useOptions } from '@/components/VDataTable/composables/options'\nimport {\n  createPagination,\n  makeDataTablePaginateProps,\n  providePagination,\n  usePaginatedItems,\n} from '@/components/VDataTable/composables/paginate'\nimport { makeDataTableSelectProps, provideSelection } from '@/components/VDataTable/composables/select'\nimport { createSort, makeDataTableSortProps, provideSort, useSortedItems } from '@/components/VDataTable/composables/sort'\n\n// Composables\nimport { makeDataIteratorItemsProps, useDataIteratorItems } from './composables/items'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeFilterProps, useFilter } from '@/composables/filter'\nimport { LoaderSlot } from '@/composables/loader'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { Component } from 'vue'\nimport type { DataIteratorItem } from './composables/items'\nimport type { Group } from '@/components/VDataTable/composables/group'\nimport type { SortItem } from '@/components/VDataTable/composables/sort'\nimport type { LoaderSlotProps } from '@/composables/loader'\nimport type { GenericProps } from '@/util'\n\ntype VDataIteratorSlotProps<T> = {\n  page: number\n  itemsPerPage: number\n  sortBy: readonly SortItem[]\n  pageCount: number\n  toggleSort: ReturnType<typeof provideSort>['toggleSort']\n  prevPage: ReturnType<typeof providePagination>['prevPage']\n  nextPage: ReturnType<typeof providePagination>['nextPage']\n  setPage: ReturnType<typeof providePagination>['setPage']\n  setItemsPerPage: ReturnType<typeof providePagination>['setItemsPerPage']\n  isSelected: ReturnType<typeof provideSelection>['isSelected']\n  select: ReturnType<typeof provideSelection>['select']\n  selectAll: ReturnType<typeof provideSelection>['selectAll']\n  toggleSelect: ReturnType<typeof provideSelection>['toggleSelect']\n  isExpanded: ReturnType<typeof provideExpanded>['isExpanded']\n  toggleExpand: ReturnType<typeof provideExpanded>['toggleExpand']\n  isGroupOpen: ReturnType<typeof provideGroupBy>['isGroupOpen']\n  toggleGroup: ReturnType<typeof provideGroupBy>['toggleGroup']\n  items: readonly DataIteratorItem<T>[]\n  groupedItems: readonly (DataIteratorItem<T> | Group<DataIteratorItem<T>>)[]\n}\n\nexport type VDataIteratorSlots<T> = {\n  default: VDataIteratorSlotProps<T>\n  header: VDataIteratorSlotProps<T>\n  footer: VDataIteratorSlotProps<T>\n  loader: LoaderSlotProps\n  'no-data': never\n}\n\nexport const makeVDataIteratorProps = propsFactory({\n  search: String,\n  loading: Boolean,\n\n  ...makeComponentProps(),\n  ...makeDataIteratorItemsProps(),\n  ...makeDataTableSelectProps(),\n  ...makeDataTableSortProps(),\n  ...makeDataTablePaginateProps({ itemsPerPage: 5 }),\n  ...makeDataTableExpandProps(),\n  ...makeDataTableGroupProps(),\n  ...makeFilterProps(),\n  ...makeTagProps(),\n  ...makeTransitionProps({\n    transition: {\n      component: VFadeTransition as Component,\n      hideOnLeave: true,\n    },\n  }),\n}, 'VDataIterator')\n\nexport const VDataIterator = genericComponent<new <T> (\n  props: {\n    items?: readonly T[]\n  },\n  slots: VDataIteratorSlots<T>,\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VDataIterator',\n\n  props: makeVDataIteratorProps(),\n\n  emits: {\n    'update:modelValue': (value: any[]) => true,\n    'update:groupBy': (value: any) => true,\n    'update:page': (value: number) => true,\n    'update:itemsPerPage': (value: number) => true,\n    'update:sortBy': (value: any) => true,\n    'update:options': (value: any) => true,\n    'update:expanded': (value: any) => true,\n    'update:currentItems': (value: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const groupBy = useProxiedModel(props, 'groupBy')\n    const search = toRef(() => props.search)\n\n    const { items } = useDataIteratorItems(props)\n    const { filteredItems } = useFilter(props, items, search, { transform: item => item.raw })\n\n    const { sortBy, multiSort, mustSort } = createSort(props)\n    const { page, itemsPerPage } = createPagination(props)\n\n    const { toggleSort } = provideSort({ sortBy, multiSort, mustSort, page })\n    const { sortByWithGroups, opened, extractRows, isGroupOpen, toggleGroup } = provideGroupBy({ groupBy, sortBy })\n\n    const { sortedItems } = useSortedItems(props, filteredItems, sortByWithGroups, { transform: item => item.raw })\n    const { flatItems } = useGroupedItems(sortedItems, groupBy, opened)\n\n    const itemsLength = toRef(() => flatItems.value.length)\n\n    const {\n      startIndex,\n      stopIndex,\n      pageCount,\n      prevPage,\n      nextPage,\n      setItemsPerPage,\n      setPage,\n    } = providePagination({ page, itemsPerPage, itemsLength })\n    const { paginatedItems } = usePaginatedItems({ items: flatItems, startIndex, stopIndex, itemsPerPage })\n\n    const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value))\n\n    const {\n      isSelected,\n      select,\n      selectAll,\n      toggleSelect,\n    } = provideSelection(props, { allItems: items, currentPage: paginatedItemsWithoutGroups })\n    const { isExpanded, toggleExpand } = provideExpanded(props)\n\n    useOptions({\n      page,\n      itemsPerPage,\n      sortBy,\n      groupBy,\n      search,\n    })\n\n    const slotProps = computed(() => ({\n      page: page.value,\n      itemsPerPage: itemsPerPage.value,\n      sortBy: sortBy.value,\n      pageCount: pageCount.value,\n      toggleSort,\n      prevPage,\n      nextPage,\n      setPage,\n      setItemsPerPage,\n      isSelected,\n      select,\n      selectAll,\n      toggleSelect,\n      isExpanded,\n      toggleExpand,\n      isGroupOpen,\n      toggleGroup,\n      items: paginatedItemsWithoutGroups.value,\n      groupedItems: paginatedItems.value,\n    }))\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-data-iterator',\n          {\n            'v-data-iterator--loading': props.loading,\n          },\n          props.class,\n        ]}\n        style={ props.style }\n      >\n        { slots.header?.(slotProps.value) }\n\n        <MaybeTransition transition={ props.transition }>\n          { props.loading ? (\n            <LoaderSlot key=\"loader\" name=\"v-data-iterator\" active>\n              { slotProps => slots.loader?.(slotProps) }\n            </LoaderSlot>\n          ) : (\n            <div key=\"items\">\n              { !paginatedItems.value.length\n                ? slots['no-data']?.()\n                : slots.default?.(slotProps.value)\n              }\n            </div>\n          )}\n        </MaybeTransition>\n\n        { slots.footer?.(slotProps.value) }\n      </props.tag>\n    ))\n\n    return {}\n  },\n})\n\nexport type VDataIterator = InstanceType<typeof VDataIterator>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VDataIterator.js","names":["VFadeTransition","makeDataTableExpandProps","provideExpanded","makeDataTableGroupProps","provideGroupBy","useGroupedItems","useOptions","createPagination","makeDataTablePaginateProps","providePagination","usePaginatedItems","makeDataTableSelectProps","provideSelection","createSort","makeDataTableSortProps","provideSort","useSortedItems","makeDataIteratorItemsProps","useDataIteratorItems","makeComponentProps","makeFilterProps","useFilter","LoaderSlot","useProxiedModel","makeTagProps","makeTransitionProps","MaybeTransition","computed","toRef","genericComponent","propsFactory","useRender","makeVDataIteratorProps","search","String","loading","Boolean","itemsPerPage","transition","component","hideOnLeave","VDataIterator","name","props","emits","value","setup","_ref","slots","groupBy","items","filteredItems","transform","item","raw","sortBy","multiSort","mustSort","page","toggleSort","sortByWithGroups","opened","extractRows","isGroupOpen","toggleGroup","sortedItems","flatItems","itemsLength","length","startIndex","stopIndex","pageCount","prevPage","nextPage","setItemsPerPage","setPage","paginatedItems","paginatedItemsWithoutGroups","isSelected","select","selectAll","toggleSelect","allItems","currentPage","isExpanded","toggleExpand","slotProps","groupedItems","_createVNode","tag","_normalizeClass","class","_normalizeStyle","style","default","header","loader","_createElementVNode","footer"],"sources":["../../../src/components/VDataIterator/VDataIterator.tsx"],"sourcesContent":["// Components\nimport { VFadeTransition } from '@/components/transitions'\nimport { makeDataTableExpandProps, provideExpanded } from '@/components/VDataTable/composables/expand'\nimport { makeDataTableGroupProps, provideGroupBy, useGroupedItems } from '@/components/VDataTable/composables/group'\nimport { useOptions } from '@/components/VDataTable/composables/options'\nimport {\n  createPagination,\n  makeDataTablePaginateProps,\n  providePagination,\n  usePaginatedItems,\n} from '@/components/VDataTable/composables/paginate'\nimport { makeDataTableSelectProps, provideSelection } from '@/components/VDataTable/composables/select'\nimport { createSort, makeDataTableSortProps, provideSort, useSortedItems } from '@/components/VDataTable/composables/sort'\n\n// Composables\nimport { makeDataIteratorItemsProps, useDataIteratorItems } from './composables/items'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeFilterProps, useFilter } from '@/composables/filter'\nimport { LoaderSlot } from '@/composables/loader'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { Component } from 'vue'\nimport type { DataIteratorItem } from './composables/items'\nimport type { Group, GroupSummary } from '@/components/VDataTable/composables/group'\nimport type { SortItem } from '@/components/VDataTable/composables/sort'\nimport type { LoaderSlotProps } from '@/composables/loader'\nimport type { GenericProps } from '@/util'\n\ntype VDataIteratorSlotProps<T> = {\n  page: number\n  itemsPerPage: number\n  sortBy: readonly SortItem[]\n  pageCount: number\n  toggleSort: ReturnType<typeof provideSort>['toggleSort']\n  prevPage: ReturnType<typeof providePagination>['prevPage']\n  nextPage: ReturnType<typeof providePagination>['nextPage']\n  setPage: ReturnType<typeof providePagination>['setPage']\n  setItemsPerPage: ReturnType<typeof providePagination>['setItemsPerPage']\n  isSelected: ReturnType<typeof provideSelection>['isSelected']\n  select: ReturnType<typeof provideSelection>['select']\n  selectAll: ReturnType<typeof provideSelection>['selectAll']\n  toggleSelect: ReturnType<typeof provideSelection>['toggleSelect']\n  isExpanded: ReturnType<typeof provideExpanded>['isExpanded']\n  toggleExpand: ReturnType<typeof provideExpanded>['toggleExpand']\n  isGroupOpen: ReturnType<typeof provideGroupBy>['isGroupOpen']\n  toggleGroup: ReturnType<typeof provideGroupBy>['toggleGroup']\n  items: readonly DataIteratorItem<T>[]\n  groupedItems: readonly (DataIteratorItem<T> | Group<DataIteratorItem<T>> | GroupSummary<DataIteratorItem<T>>)[]\n}\n\nexport type VDataIteratorSlots<T> = {\n  default: VDataIteratorSlotProps<T>\n  header: VDataIteratorSlotProps<T>\n  footer: VDataIteratorSlotProps<T>\n  loader: LoaderSlotProps\n  'no-data': never\n}\n\nexport const makeVDataIteratorProps = propsFactory({\n  search: String,\n  loading: Boolean,\n\n  ...makeComponentProps(),\n  ...makeDataIteratorItemsProps(),\n  ...makeDataTableSelectProps(),\n  ...makeDataTableSortProps(),\n  ...makeDataTablePaginateProps({ itemsPerPage: 5 }),\n  ...makeDataTableExpandProps(),\n  ...makeDataTableGroupProps(),\n  ...makeFilterProps(),\n  ...makeTagProps(),\n  ...makeTransitionProps({\n    transition: {\n      component: VFadeTransition as Component,\n      hideOnLeave: true,\n    },\n  }),\n}, 'VDataIterator')\n\nexport const VDataIterator = genericComponent<new <T> (\n  props: {\n    items?: readonly T[]\n  },\n  slots: VDataIteratorSlots<T>,\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VDataIterator',\n\n  props: makeVDataIteratorProps(),\n\n  emits: {\n    'update:modelValue': (value: any[]) => true,\n    'update:groupBy': (value: any) => true,\n    'update:page': (value: number) => true,\n    'update:itemsPerPage': (value: number) => true,\n    'update:sortBy': (value: any) => true,\n    'update:options': (value: any) => true,\n    'update:expanded': (value: any) => true,\n    'update:currentItems': (value: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const groupBy = useProxiedModel(props, 'groupBy')\n    const search = toRef(() => props.search)\n\n    const { items } = useDataIteratorItems(props)\n    const { filteredItems } = useFilter(props, items, search, { transform: item => item.raw })\n\n    const { sortBy, multiSort, mustSort } = createSort(props)\n    const { page, itemsPerPage } = createPagination(props)\n\n    const { toggleSort } = provideSort({ sortBy, multiSort, mustSort, page })\n    const { sortByWithGroups, opened, extractRows, isGroupOpen, toggleGroup } = provideGroupBy({ groupBy, sortBy })\n\n    const { sortedItems } = useSortedItems(props, filteredItems, sortByWithGroups, { transform: item => item.raw })\n    const { flatItems } = useGroupedItems(sortedItems, groupBy, opened, false)\n\n    const itemsLength = toRef(() => flatItems.value.length)\n\n    const {\n      startIndex,\n      stopIndex,\n      pageCount,\n      prevPage,\n      nextPage,\n      setItemsPerPage,\n      setPage,\n    } = providePagination({ page, itemsPerPage, itemsLength })\n    const { paginatedItems } = usePaginatedItems({ items: flatItems, startIndex, stopIndex, itemsPerPage })\n\n    const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value))\n\n    const {\n      isSelected,\n      select,\n      selectAll,\n      toggleSelect,\n    } = provideSelection(props, { allItems: items, currentPage: paginatedItemsWithoutGroups })\n    const { isExpanded, toggleExpand } = provideExpanded(props)\n\n    useOptions({\n      page,\n      itemsPerPage,\n      sortBy,\n      groupBy,\n      search,\n    })\n\n    const slotProps = computed(() => ({\n      page: page.value,\n      itemsPerPage: itemsPerPage.value,\n      sortBy: sortBy.value,\n      pageCount: pageCount.value,\n      toggleSort,\n      prevPage,\n      nextPage,\n      setPage,\n      setItemsPerPage,\n      isSelected,\n      select,\n      selectAll,\n      toggleSelect,\n      isExpanded,\n      toggleExpand,\n      isGroupOpen,\n      toggleGroup,\n      items: paginatedItemsWithoutGroups.value,\n      groupedItems: paginatedItems.value,\n    }))\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-data-iterator',\n          {\n            'v-data-iterator--loading': props.loading,\n          },\n          props.class,\n        ]}\n        style={ props.style }\n      >\n        { slots.header?.(slotProps.value) }\n\n        <MaybeTransition transition={ props.transition }>\n          { props.loading ? (\n            <LoaderSlot key=\"loader\" name=\"v-data-iterator\" active>\n              { slotProps => slots.loader?.(slotProps) }\n            </LoaderSlot>\n          ) : (\n            <div key=\"items\">\n              { !paginatedItems.value.length\n                ? slots['no-data']?.()\n                : slots.default?.(slotProps.value)\n              }\n            </div>\n          )}\n        </MaybeTransition>\n\n        { slots.footer?.(slotProps.value) }\n      </props.tag>\n    ))\n\n    return {}\n  },\n})\n\nexport type VDataIterator = InstanceType<typeof VDataIterator>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VDataTable/VDataTable.css

@@ -91,7 +91,8 @@
 .v-data-table-column--fixed,
 .v-data-table-column--fixed-end,
 .v-data-table__th--sticky {
-  background: rgb(var(--v-theme-surface));
+  background-color: rgb(var(--v-theme-surface));
+  background-image: inherit;
   position: sticky !important;
   left: 0;
   z-index: 1;

package/lib/components/VDataTable/VDataTable.d.ts

@@ -4,7 +4,7 @@ import { providePagination } from './composables/paginate.js';
 import { provideSelection } from './composables/select.js';
 import { provideSort } from './composables/sort.js';
 import type { DeepReadonly, UnwrapRef } from 'vue';
-import type { Group } from './composables/group.js';
+import type { Group, GroupSummary } from './composables/group.js';
 import type { CellProps, DataTableHeader, DataTableItem, InternalDataTableHeader, RowProps } from './types.js';
 import type { VDataTableHeadersSlots } from './VDataTableHeaders.js';
 import type { VDataTableRowsSlots } from './VDataTableRows.js';
@@ -28,7 +28,7 @@ export type VDataTableSlotProps<T> = {
     toggleGroup: ReturnType<typeof provideGroupBy>['toggleGroup'];
     items: readonly T[];
     internalItems: readonly DataTableItem[];
-    groupedItems: readonly (DataTableItem<T> | Group<DataTableItem<T>>)[];
+    groupedItems: readonly (DataTableItem<T> | Group<DataTableItem<T>> | GroupSummary<DataTableItem<T>>)[];
     columns: InternalDataTableHeader[];
     headers: InternalDataTableHeader[][];
 };
@@ -1448,7 +1448,7 @@ export declare const VDataTable: {
         'update:groupBy': (value: any) => true;
         'update:expanded': (value: any) => true;
         'update:currentItems': (value: any) => true;
-    }, "headers" | "$children" | "v-slots" | "v-slot:default" | "modelValue" | "cellProps" | "items" | "itemValue" | "itemSelectable" | "rowProps" | "update:modelValue" | "v-slot:loader" | "v-slot:item" | "v-slot:no-data" | "v-slot:headers" | `v-slot:header.${string}` | "v-slot:data-table-group" | "v-slot:data-table-select" | `v-slot:item.${string}` | "v-slot:loading" | "v-slot:group-header" | "v-slot:expanded-row" | "v-slot:top" | "v-slot:bottom" | "v-slot:body" | "v-slot:colgroup" | "v-slot:tbody" | "v-slot:tfoot" | "v-slot:thead" | "v-slot:body.prepend" | "v-slot:body.append" | "v-slot:footer.prepend">, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
+    }, "headers" | "$children" | "v-slots" | "v-slot:default" | "modelValue" | "cellProps" | "items" | "itemValue" | "itemSelectable" | "rowProps" | "update:modelValue" | "v-slot:loader" | "v-slot:item" | "v-slot:no-data" | "v-slot:headers" | `v-slot:header.${string}` | "v-slot:data-table-group" | "v-slot:data-table-select" | `v-slot:item.${string}` | "v-slot:loading" | "v-slot:group-summary" | "v-slot:group-header" | "v-slot:expanded-row" | "v-slot:top" | "v-slot:bottom" | "v-slot:body" | "v-slot:colgroup" | "v-slot:tbody" | "v-slot:tfoot" | "v-slot:thead" | "v-slot:body.prepend" | "v-slot:body.append" | "v-slot:footer.prepend">, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
         page: string | number;
         expanded: readonly string[];
         style: import("vue").StyleValue;
@@ -1527,6 +1527,7 @@ export declare const VDataTable: {
         }) => import("vue").VNode[];
         loading: () => import("vue").VNode[];
         'group-header': (arg: import("./types.js").GroupHeaderSlot) => import("vue").VNode[];
+        'group-summary': (arg: import("./types.js").GroupSummarySlot) => import("vue").VNode[];
         'no-data': () => import("vue").VNode[];
         'expanded-row': (arg: import("./types.js").ItemSlot<any>) => import("vue").VNode[];
         headers: (arg: import("./VDataTableHeaders.js").HeadersSlotProps) => import("vue").VNode[];
@@ -1753,7 +1754,7 @@ export declare const VDataTable: {
     'update:groupBy': (value: any) => true;
     'update:expanded': (value: any) => true;
     'update:currentItems': (value: any) => true;
-}, "headers" | "$children" | "v-slots" | "v-slot:default" | "modelValue" | "cellProps" | "items" | "itemValue" | "itemSelectable" | "rowProps" | "update:modelValue" | "v-slot:loader" | "v-slot:item" | "v-slot:no-data" | "v-slot:headers" | `v-slot:header.${string}` | "v-slot:data-table-group" | "v-slot:data-table-select" | `v-slot:item.${string}` | "v-slot:loading" | "v-slot:group-header" | "v-slot:expanded-row" | "v-slot:top" | "v-slot:bottom" | "v-slot:body" | "v-slot:colgroup" | "v-slot:tbody" | "v-slot:tfoot" | "v-slot:thead" | "v-slot:body.prepend" | "v-slot:body.append" | "v-slot:footer.prepend">, string, {
+}, "headers" | "$children" | "v-slots" | "v-slot:default" | "modelValue" | "cellProps" | "items" | "itemValue" | "itemSelectable" | "rowProps" | "update:modelValue" | "v-slot:loader" | "v-slot:item" | "v-slot:no-data" | "v-slot:headers" | `v-slot:header.${string}` | "v-slot:data-table-group" | "v-slot:data-table-select" | `v-slot:item.${string}` | "v-slot:loading" | "v-slot:group-summary" | "v-slot:group-header" | "v-slot:expanded-row" | "v-slot:top" | "v-slot:bottom" | "v-slot:body" | "v-slot:colgroup" | "v-slot:tbody" | "v-slot:tfoot" | "v-slot:thead" | "v-slot:body.prepend" | "v-slot:body.append" | "v-slot:footer.prepend">, string, {
     page: string | number;
     expanded: readonly string[];
     style: import("vue").StyleValue;
@@ -1832,6 +1833,7 @@ export declare const VDataTable: {
     }) => import("vue").VNode[];
     loading: () => import("vue").VNode[];
     'group-header': (arg: import("./types.js").GroupHeaderSlot) => import("vue").VNode[];
+    'group-summary': (arg: import("./types.js").GroupSummarySlot) => import("vue").VNode[];
     'no-data': () => import("vue").VNode[];
     'expanded-row': (arg: import("./types.js").ItemSlot<any>) => import("vue").VNode[];
     headers: (arg: import("./VDataTableHeaders.js").HeadersSlotProps) => import("vue").VNode[];

package/lib/components/VDataTable/VDataTable.js

@@ -127,7 +127,7 @@ export const VDataTable = genericComponent()({
     });
     const {
       flatItems
-    } = useGroupedItems(sortedItems, groupBy, opened);
+    } = useGroupedItems(sortedItems, groupBy, opened, () => !!slots['group-summary']);
     const itemsLength = computed(() => flatItems.value.length);
     const {
       startIndex,