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

package/lib/components/VChip/VChip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VChip.mjs","names":["VAvatar","VChipGroupSymbol","VExpandXTransition","VIcon","genOverlays","makeVariantProps","useVariant","makeBorderProps","useBorder","makeDensityProps","useDensity","makeElevationProps","useElevation","makeGroupItemProps","useGroupItem","makeRoundedProps","useRounded","makeRouterProps","useLink","makeSizeProps","useSize","makeTagProps","makeThemeProps","provideTheme","useProxiedModel","IconValue","Ripple","defineComponent","VChip","name","directives","props","activeClass","String","appendAvatar","appendIcon","closable","Boolean","closeIcon","type","default","closeLabel","draggable","filter","filterIcon","label","link","pill","prependAvatar","prependIcon","ripple","text","modelValue","tag","variant","emits","e","value","setup","attrs","emit","slots","isActive","themeClasses","borderClasses","colorClasses","colorStyles","variantClasses","elevationClasses","group","roundedClasses","sizeClasses","densityClasses","onCloseClick","Tag","isLink","hasAppend","append","hasClose","close","hasFilter","hasPrepend","prepend","hasColor","isSelected","isClickable","disabled","onClickFunc","toggle","undefined","selectedClass","href","size","select","onClick"],"sources":["../../../src/components/VChip/VChip.tsx"],"sourcesContent":["// Styles\nimport './VChip.sass'\n\n// Components\nimport { VAvatar } from '@/components/VAvatar'\nimport { VChipGroupSymbol } from '@/components/VChipGroup/VChipGroup'\nimport { VExpandXTransition } from '@/components/transitions'\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeGroupItemProps, useGroupItem } from '@/composables/group'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeRouterProps, useLink } from '@/composables/router'\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { IconValue } from '@/composables/icons'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VChip = defineComponent({\n  name: 'VChip',\n\n  directives: { Ripple },\n\n  props: {\n    activeClass: String,\n    appendAvatar: String,\n    appendIcon: IconValue,\n    closable: Boolean,\n    closeIcon: {\n      type: IconValue,\n      default: '$delete',\n    },\n    closeLabel: {\n      type: String,\n      default: '$vuetify.close',\n    },\n    draggable: Boolean,\n    filter: Boolean,\n    filterIcon: {\n      type: String,\n      default: '$complete',\n    },\n    label: Boolean,\n    link: Boolean,\n    pill: Boolean,\n    prependAvatar: String,\n    prependIcon: IconValue,\n    ripple: {\n      type: Boolean,\n      default: true,\n    },\n    text: String,\n    modelValue: {\n      type: Boolean,\n      default: true,\n    },\n\n    ...makeBorderProps(),\n    ...makeDensityProps(),\n    ...makeElevationProps(),\n    ...makeGroupItemProps(),\n    ...makeRoundedProps(),\n    ...makeRouterProps(),\n    ...makeSizeProps(),\n    ...makeTagProps({ tag: 'span' }),\n    ...makeThemeProps(),\n    ...makeVariantProps({ variant: 'contained-text' } as const),\n  },\n\n  emits: {\n    'click:close': (e: Event) => true,\n    'update:active': (value: Boolean) => true,\n    'update:modelValue': (value: Boolean) => true,\n  },\n\n  setup (props, { attrs, emit, slots }) {\n    const isActive = useProxiedModel(props, 'modelValue')\n\n    const { themeClasses } = provideTheme(props)\n    const { borderClasses } = useBorder(props)\n    const { colorClasses, colorStyles, variantClasses } = useVariant(props)\n    const { elevationClasses } = useElevation(props)\n    const group = useGroupItem(props, VChipGroupSymbol, false)\n    const { roundedClasses } = useRounded(props)\n    const { sizeClasses } = useSize(props)\n    const { densityClasses } = useDensity(props)\n    const link = useLink(props, attrs)\n\n    function onCloseClick (e: Event) {\n      isActive.value = false\n\n      emit('click:close', e)\n    }\n\n    return () => {\n      const Tag = (link.isLink.value) ? 'a' : props.tag\n      const hasAppend = !!(slots.append || props.appendIcon || props.appendAvatar)\n      const hasClose = !!(slots.close || props.closable)\n      const hasFilter = !!(slots.filter || props.filter) && group\n      const hasPrepend = !!(slots.prepend || props.prependIcon || props.prependAvatar)\n      const hasColor = !group || group.isSelected.value\n      const isClickable = !props.disabled && (!!group || link.isClickable.value || props.link)\n      const onClickFunc = props.link ? props.link : group?.toggle\n\n      return isActive.value && (\n        <Tag\n          class={[\n            'v-chip',\n            {\n              'v-chip--disabled': props.disabled,\n              'v-chip--label': props.label,\n              'v-chip--link': isClickable,\n              'v-chip--pill': props.pill,\n            },\n            themeClasses.value,\n            borderClasses.value,\n            hasColor ? colorClasses.value : undefined,\n            densityClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n            sizeClasses.value,\n            variantClasses.value,\n            group?.selectedClass.value,\n          ]}\n          style={[\n            hasColor ? colorStyles.value : undefined,\n          ]}\n          disabled={ props.disabled || undefined }\n          draggable={ props.draggable }\n          href={ link.href.value }\n          v-ripple={ [isClickable && props.ripple, null] }\n          onClick={ isClickable && onClickFunc }\n        >\n          { genOverlays(isClickable, 'v-chip') }\n\n          { hasFilter && (\n            <VExpandXTransition>\n              <div\n                class=\"v-chip__filter\"\n                v-show={ group.isSelected.value }\n              >\n                { slots.filter\n                  ? slots.filter()\n                  : <VIcon icon={ props.filterIcon } />\n                }\n              </div>\n            </VExpandXTransition>\n          ) }\n\n          { hasPrepend && (\n            <div class=\"v-chip__prepend\">\n              { slots.prepend\n                ? slots.prepend()\n                : (\n                  <VAvatar\n                    icon={ props.prependIcon }\n                    image={ props.prependAvatar }\n                    size={ props.size }\n                  />\n                )\n              }\n            </div>\n          ) }\n\n          { slots.default?.({\n            isSelected: group?.isSelected.value,\n            selectedClass: group?.selectedClass.value,\n            select: group?.select,\n            toggle: group?.toggle,\n            value: group?.value.value,\n            disabled: props.disabled,\n          }) ?? props.text }\n\n          { hasAppend && (\n            <div class=\"v-chip__append\">\n              { slots.append\n                ? slots.append()\n                : (\n                  <VAvatar\n                    icon={ props.appendIcon }\n                    image={ props.appendAvatar }\n                    size={ props.size }\n                  />\n                )\n              }\n            </div>\n          ) }\n\n          { hasClose && (\n            <div\n              class=\"v-chip__close\"\n              onClick={ onCloseClick }\n            >\n              { slots.close\n                ? slots.close({ props: { onClick: onCloseClick } })\n                : (\n                  <VIcon\n                    icon={ props.closeIcon }\n                    size=\"x-small\"\n                  />\n                )\n              }\n            </div>\n          ) }\n        </Tag>\n      )\n    }\n  },\n})\n\nexport type VChip = InstanceType<typeof VChip>\n"],"mappings":"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"}
+{"version":3,"file":"VChip.mjs","names":["VAvatar","VChipGroupSymbol","VDefaultsProvider","VExpandXTransition","VIcon","genOverlays","makeVariantProps","useVariant","makeBorderProps","useBorder","makeDensityProps","useDensity","makeElevationProps","useElevation","makeGroupItemProps","useGroupItem","makeRoundedProps","useRounded","makeRouterProps","useLink","makeSizeProps","useSize","makeTagProps","makeThemeProps","provideTheme","useProxiedModel","IconValue","Ripple","defineComponent","VChip","name","directives","props","activeClass","String","appendAvatar","appendIcon","closable","Boolean","closeIcon","type","default","closeLabel","draggable","filter","filterIcon","label","link","pill","prependAvatar","prependIcon","ripple","text","modelValue","tag","variant","emits","e","value","val","setup","attrs","emit","slots","borderClasses","colorClasses","colorStyles","variantClasses","densityClasses","elevationClasses","roundedClasses","sizeClasses","themeClasses","isActive","group","onCloseClick","Tag","isLink","hasAppend","append","hasClose","close","hasFilter","hasPrepend","prepend","hasColor","isSelected","isClickable","disabled","onClickFunc","toggle","undefined","selectedClass","href","icon","image","select","size"],"sources":["../../../src/components/VChip/VChip.tsx"],"sourcesContent":["/* eslint-disable complexity */\n// Styles\nimport './VChip.sass'\n\n// Components\nimport { VAvatar } from '@/components/VAvatar'\nimport { VChipGroupSymbol } from '@/components/VChipGroup/VChipGroup'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VExpandXTransition } from '@/components/transitions'\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeGroupItemProps, useGroupItem } from '@/composables/group'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeRouterProps, useLink } from '@/composables/router'\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { IconValue } from '@/composables/icons'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VChip = defineComponent({\n  name: 'VChip',\n\n  directives: { Ripple },\n\n  props: {\n    activeClass: String,\n    appendAvatar: String,\n    appendIcon: IconValue,\n    closable: Boolean,\n    closeIcon: {\n      type: IconValue,\n      default: '$delete',\n    },\n    closeLabel: {\n      type: String,\n      default: '$vuetify.close',\n    },\n    draggable: Boolean,\n    filter: Boolean,\n    filterIcon: {\n      type: String,\n      default: '$complete',\n    },\n    label: Boolean,\n    link: Boolean,\n    pill: Boolean,\n    prependAvatar: String,\n    prependIcon: IconValue,\n    ripple: {\n      type: Boolean,\n      default: true,\n    },\n    text: String,\n    modelValue: {\n      type: Boolean,\n      default: true,\n    },\n\n    ...makeBorderProps(),\n    ...makeDensityProps(),\n    ...makeElevationProps(),\n    ...makeGroupItemProps(),\n    ...makeRoundedProps(),\n    ...makeRouterProps(),\n    ...makeSizeProps(),\n    ...makeTagProps({ tag: 'span' }),\n    ...makeThemeProps(),\n    ...makeVariantProps({ variant: 'tonal' } as const),\n  },\n\n  emits: {\n    'click:close': (e: Event) => true,\n    'update:active': (value: boolean) => true,\n    'update:modelValue': (value: boolean) => true,\n    'group:selected': (val: { value: boolean }) => true,\n  },\n\n  setup (props, { attrs, emit, slots }) {\n    const { borderClasses } = useBorder(props)\n    const { colorClasses, colorStyles, variantClasses } = useVariant(props)\n    const { densityClasses } = useDensity(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const { sizeClasses } = useSize(props)\n    const { themeClasses } = provideTheme(props)\n\n    const isActive = useProxiedModel(props, 'modelValue')\n    const group = useGroupItem(props, VChipGroupSymbol, false)\n    const link = useLink(props, attrs)\n\n    function onCloseClick (e: Event) {\n      isActive.value = false\n\n      emit('click:close', e)\n    }\n\n    return () => {\n      const Tag = (link.isLink.value) ? 'a' : props.tag\n      const hasAppend = !!(slots.append || props.appendIcon || props.appendAvatar)\n      const hasClose = !!(slots.close || props.closable)\n      const hasFilter = !!(slots.filter || props.filter) && group\n      const hasPrepend = !!(slots.prepend || props.prependIcon || props.prependAvatar)\n      const hasColor = !group || group.isSelected.value\n      const isClickable = !props.disabled && (!!group || link.isClickable.value || props.link)\n      const onClickFunc = props.link ? props.link : group?.toggle\n\n      return isActive.value && (\n        <Tag\n          class={[\n            'v-chip',\n            {\n              'v-chip--disabled': props.disabled,\n              'v-chip--label': props.label,\n              'v-chip--link': isClickable,\n              'v-chip--filter': hasFilter,\n              'v-chip--pill': props.pill,\n            },\n            themeClasses.value,\n            borderClasses.value,\n            hasColor ? colorClasses.value : undefined,\n            densityClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n            sizeClasses.value,\n            variantClasses.value,\n            group?.selectedClass.value,\n          ]}\n          style={[\n            hasColor ? colorStyles.value : undefined,\n          ]}\n          disabled={ props.disabled || undefined }\n          draggable={ props.draggable }\n          href={ link.href.value }\n          v-ripple={ [isClickable && props.ripple, null] }\n          onClick={ isClickable && onClickFunc }\n        >\n          { genOverlays(isClickable, 'v-chip') }\n\n          { hasFilter && (\n            <VDefaultsProvider\n              key=\"filter\"\n              defaults={{\n                VIcon: { icon: props.filterIcon },\n              }}\n            >\n              <VExpandXTransition>\n                <div\n                  class=\"v-chip__filter\"\n                  v-show={ group.isSelected.value }\n                >\n                  { slots.filter ? slots.filter() : (<VIcon />) }\n                </div>\n              </VExpandXTransition>\n            </VDefaultsProvider>\n          ) }\n\n          { hasPrepend && (\n            <VDefaultsProvider\n              key=\"prepend\"\n              defaults={{\n                VAvatar: {\n                  image: props.prependAvatar,\n                },\n                VIcon: {\n                  icon: props.prependIcon,\n                },\n              }}\n            >\n              { slots.prepend\n                ? (\n                  <div class=\"v-chip__prepend\">\n                    { slots.prepend() }\n                  </div>\n                )\n                : props.prependAvatar ? (<VAvatar start />)\n                : props.prependIcon ? (<VIcon start />)\n                : undefined\n              }\n            </VDefaultsProvider>\n          ) }\n\n          { slots.default?.({\n            isSelected: group?.isSelected.value,\n            selectedClass: group?.selectedClass.value,\n            select: group?.select,\n            toggle: group?.toggle,\n            value: group?.value.value,\n            disabled: props.disabled,\n          }) ?? props.text }\n\n          { hasAppend && (\n            <VDefaultsProvider\n              key=\"append\"\n              defaults={{\n                VAvatar: {\n                  image: props.appendAvatar,\n                },\n                VIcon: {\n                  icon: props.appendIcon,\n                },\n              }}\n            >\n              { slots.append\n                ? (\n                  <div class=\"v-chip__append\">\n                    { slots.append() }\n                  </div>\n                )\n                : props.appendAvatar ? (<VAvatar end />)\n                : props.appendIcon ? (<VIcon end />)\n                : undefined\n              }\n            </VDefaultsProvider>\n          ) }\n\n          { hasClose && (\n            <VDefaultsProvider\n              key=\"close\"\n              defaults={{\n                VIcon: {\n                  icon: props.closeIcon,\n                  size: 'x-small',\n                },\n              }}\n            >\n              <div\n                class=\"v-chip__close\"\n                onClick={ onCloseClick }\n              >\n                { slots.close ? slots.close() : (<VIcon />) }\n              </div>\n            </VDefaultsProvider>\n          ) }\n        </Tag>\n      )\n    }\n  },\n})\n\nexport type VChip = InstanceType<typeof VChip>\n"],"mappings":"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"}

package/lib/components/VChip/VChip.sass

@@ -1,4 +1,3 @@
-@forward './variables'
 @use '../../styles/tools'
 @use './variables' as *
 @use './mixins' as *
@@ -29,6 +28,9 @@
   &--link
     cursor: pointer
 
+  &--filter
+    user-select: none
+
   &--label
     @include tools.rounded($chip-label-border-radius)
 
@@ -51,6 +53,9 @@
   .v-icon
     font-size: inherit
 
+.v-chip__filter
+  transition: $chip-filter-transition
+
 .v-chip__overlay
   @include tools.absolute()
   background-color: currentColor

package/lib/components/VChip/_mixins.scss

@@ -11,24 +11,35 @@
     $height: map.get($chip-sizes, "height") + (6 * $multiplier);
     $padding: math.round(math.div($height, $chip-padding-ratio));
 
-    .v-chip--size-#{$sizeName} {
+    .v-chip.v-chip--size-#{$sizeName} {
       --v-chip-size: #{$size};
       --v-chip-height: #{$height};
       font-size: $size;
       padding: 0 $padding;
 
       .v-avatar {
-        --v-avatar-height: #{$height - 8};
+        --v-avatar-height: #{$height - 6};
 
         @at-root #{selector.append('.v-chip--pill', &)} {
           --v-avatar-height: #{$height};
         }
       }
 
+      .v-chip__filter,
       .v-chip__prepend,
-      .v-chip__filter {
-        margin-inline-start: -$padding * .5;
+      > .v-avatar--start,
+      > .v-icon--start {
         margin-inline-end: $padding * .5;
+      }
+
+      .v-chip__filter,
+      .v-chip__prepend,
+      .v-icon--start {
+        margin-inline-start: -$padding * .5;
+      }
+
+      .v-avatar--start {
+        margin-inline-start: -$padding * .7;
 
         @at-root #{selector.append('.v-chip--pill', &)} {
           margin-inline-start: -$padding;
@@ -36,12 +47,21 @@
       }
 
       .v-chip__append,
-      .v-chip__close {
-        margin-inline-end: -$padding * .5;
+      .v-chip__close,
+      > .v-avatar--end,
+      > .v-icon--end {
         margin-inline-start: $padding * .5;
+        margin-inline-end: -$padding * .5;
+      }
 
+      .v-avatar--end,
+      .v-icon--end {
         @at-root #{selector.append('.v-chip--pill', &)} {
           margin-inline-end: -$padding;
+
+          + .v-chip__close {
+            margin-inline-start: $padding;
+          }
         }
       }
     }

package/lib/components/VChip/_variables.scss

@@ -4,16 +4,12 @@
 @use '../../styles/tools';
 
 // Defaults
-$chip-append-margin-inline-end: 0 !default;
-$chip-append-margin-inline-start: 8px !default;
 $chip-background: rgb(var(--v-theme-surface-variant)) !default;
 $chip-border-color: settings.$border-color-root !default;
 $chip-border-radius: map.get(settings.$rounded, "pill") !default;
 $chip-border-style: settings.$border-style-root !default;
 $chip-border-thin-width: thin !default;
 $chip-border-width: 0 !default;
-$chip-close-margin-inline-end: -4px !default;
-$chip-close-margin-inline-start: 8px !default;
 $chip-close-size: 18px !default;
 $chip-color: rgb(var(--v-theme-on-surface-variant)) !default;
 $chip-density: ("default": 0, "comfortable": -2, "compact": -3) !default;
@@ -28,7 +24,7 @@ $chip-max-width: 100% !default;
 $chip-overflow: hidden !default;
 $chip-padding-ratio: 2 + math.div(2, 3) !default;
 $chip-plain-opacity: 0.26 !default;
-$chip-rounded-border-radius: settings.$border-radius-root !default;
+$chip-filter-transition: .15s settings.$standard-easing !default;
 $chip-white-space: nowrap !default;
 
 $chip-sizes: (

package/lib/components/VChipGroup/VChipGroup.mjs

@@ -8,7 +8,7 @@ import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
 import { makeVariantProps } from "../../composables/variant.mjs";
 import { provideDefaults } from "../../composables/defaults.mjs"; // Utilities
 
-import { deepEqual, defineComponent } from "../../util/index.mjs";
+import { deepEqual, defineComponent, useRender } from "../../util/index.mjs";
 import { toRef } from 'vue'; // Types
 
 export const VChipGroupSymbol = Symbol.for('vuetify:v-chip-group');
@@ -27,7 +27,7 @@ export const VChipGroup = defineComponent({
     ...makeTagProps(),
     ...makeThemeProps(),
     ...makeVariantProps({
-      variant: 'contained-text'
+      variant: 'tonal'
     })
   },
   emits: {
@@ -55,7 +55,7 @@ export const VChipGroup = defineComponent({
         variant: toRef(props, 'variant')
       }
     });
-    return () => {
+    useRender(() => {
       var _slots$default;
 
       return _createVNode(props.tag, {
@@ -71,7 +71,8 @@ export const VChipGroup = defineComponent({
           selected: selected.value
         })]
       });
-    };
+    });
+    return {};
   }
 
 });

package/lib/components/VChipGroup/VChipGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VChipGroup.mjs","names":["makeGroupProps","useGroup","makeTagProps","makeThemeProps","provideTheme","makeVariantProps","provideDefaults","deepEqual","defineComponent","toRef","VChipGroupSymbol","Symbol","for","VChipGroup","name","props","column","Boolean","filter","valueComparator","type","Function","default","selectedClass","variant","emits","value","setup","slots","themeClasses","isSelected","select","next","prev","selected","VChip","color"],"sources":["../../../src/components/VChipGroup/VChipGroup.tsx"],"sourcesContent":["// Styles\nimport './VChipGroup.sass'\n\n// Composables\nimport { makeGroupProps, useGroup } from '@/composables/group'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { makeVariantProps } from '@/composables/variant'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { deepEqual, defineComponent } from '@/util'\nimport { toRef } from 'vue'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VChipGroupSymbol = Symbol.for('vuetify:v-chip-group')\n\nexport const VChipGroup = defineComponent({\n  name: 'VChipGroup',\n\n  props: {\n    column: Boolean,\n    filter: Boolean,\n    valueComparator: {\n      type: Function as PropType<typeof deepEqual>,\n      default: deepEqual,\n    },\n\n    ...makeGroupProps({ selectedClass: 'v-chip--selected' }),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n    ...makeVariantProps({ variant: 'contained-text' } as const),\n  },\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { isSelected, select, next, prev, selected } = useGroup(props, VChipGroupSymbol)\n\n    provideDefaults({\n      VChip: {\n        color: toRef(props, 'color'),\n        filter: toRef(props, 'filter'),\n        variant: toRef(props, 'variant'),\n      },\n    })\n\n    return () => (\n      <props.tag\n        class={[\n          'v-chip-group',\n          {\n            'v-chip-group--column': props.column,\n          },\n          themeClasses.value,\n        ]}\n      >\n        { slots.default?.({\n          isSelected,\n          select,\n          next,\n          prev,\n          selected: selected.value,\n        }) }\n      </props.tag>\n    )\n  },\n})\n\nexport type VChipGroup = InstanceType<typeof VChipGroup>\n"],"mappings":";AAAA;AACA,0B,CAEA;;SACSA,c,EAAgBC,Q;SAChBC,Y;SACAC,c,EAAgBC,Y;SAChBC,gB;SACAC,e,0CAET;;SACSC,S,EAAWC,e;AACpB,SAASC,KAAT,QAAsB,KAAtB,C,CAEA;;AAGA,OAAO,MAAMC,gBAAgB,GAAGC,MAAM,CAACC,GAAP,CAAW,sBAAX,CAAzB;AAEP,OAAO,MAAMC,UAAU,GAAGL,eAAe,CAAC;EACxCM,IAAI,EAAE,YADkC;EAGxCC,KAAK,EAAE;IACLC,MAAM,EAAEC,OADH;IAELC,MAAM,EAAED,OAFH;IAGLE,eAAe,EAAE;MACfC,IAAI,EAAEC,QADS;MAEfC,OAAO,EAAEf;IAFM,CAHZ;IAQL,GAAGP,cAAc,CAAC;MAAEuB,aAAa,EAAE;IAAjB,CAAD,CARZ;IASL,GAAGrB,YAAY,EATV;IAUL,GAAGC,cAAc,EAVZ;IAWL,GAAGE,gBAAgB,CAAC;MAAEmB,OAAO,EAAE;IAAX,CAAD;EAXd,CAHiC;EAiBxCC,KAAK,EAAE;IACL,qBAAsBC,KAAD,IAAgB;EADhC,CAjBiC;;EAqBxCC,KAAK,CAAEZ,KAAF,QAAoB;IAAA,IAAX;MAAEa;IAAF,CAAW;IACvB,MAAM;MAAEC;IAAF,IAAmBzB,YAAY,CAACW,KAAD,CAArC;IACA,MAAM;MAAEe,UAAF;MAAcC,MAAd;MAAsBC,IAAtB;MAA4BC,IAA5B;MAAkCC;IAAlC,IAA+CjC,QAAQ,CAACc,KAAD,EAAQL,gBAAR,CAA7D;IAEAJ,eAAe,CAAC;MACd6B,KAAK,EAAE;QACLC,KAAK,EAAE3B,KAAK,CAACM,KAAD,EAAQ,OAAR,CADP;QAELG,MAAM,EAAET,KAAK,CAACM,KAAD,EAAQ,QAAR,CAFR;QAGLS,OAAO,EAAEf,KAAK,CAACM,KAAD,EAAQ,SAAR;MAHT;IADO,CAAD,CAAf;IAQA,OAAO;MAAA;;MAAA;QAAA,SAEI,CACL,cADK,EAEL;UACE,wBAAwBA,KAAK,CAACC;QADhC,CAFK,EAKLa,YAAY,CAACH,KALR;MAFJ;QAAA,kCAUDE,KAAK,CAACN,OAVL,qBAUD,oBAAAM,KAAK,EAAW;UAChBE,UADgB;UAEhBC,MAFgB;UAGhBC,IAHgB;UAIhBC,IAJgB;UAKhBC,QAAQ,EAAEA,QAAQ,CAACR;QALH,CAAX,CAVJ;MAAA;IAAA,CAAP;EAmBD;;AApDuC,CAAD,CAAlC"}
+{"version":3,"file":"VChipGroup.mjs","names":["makeGroupProps","useGroup","makeTagProps","makeThemeProps","provideTheme","makeVariantProps","provideDefaults","deepEqual","defineComponent","useRender","toRef","VChipGroupSymbol","Symbol","for","VChipGroup","name","props","column","Boolean","filter","valueComparator","type","Function","default","selectedClass","variant","emits","value","setup","slots","themeClasses","isSelected","select","next","prev","selected","VChip","color"],"sources":["../../../src/components/VChipGroup/VChipGroup.tsx"],"sourcesContent":["// Styles\nimport './VChipGroup.sass'\n\n// Composables\nimport { makeGroupProps, useGroup } from '@/composables/group'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { makeVariantProps } from '@/composables/variant'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utilities\nimport { deepEqual, defineComponent, useRender } from '@/util'\nimport { toRef } from 'vue'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VChipGroupSymbol = Symbol.for('vuetify:v-chip-group')\n\nexport const VChipGroup = defineComponent({\n  name: 'VChipGroup',\n\n  props: {\n    column: Boolean,\n    filter: Boolean,\n    valueComparator: {\n      type: Function as PropType<typeof deepEqual>,\n      default: deepEqual,\n    },\n\n    ...makeGroupProps({ selectedClass: 'v-chip--selected' }),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n    ...makeVariantProps({ variant: 'tonal' } as const),\n  },\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { isSelected, select, next, prev, selected } = useGroup(props, VChipGroupSymbol)\n\n    provideDefaults({\n      VChip: {\n        color: toRef(props, 'color'),\n        filter: toRef(props, 'filter'),\n        variant: toRef(props, 'variant'),\n      },\n    })\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-chip-group',\n          {\n            'v-chip-group--column': props.column,\n          },\n          themeClasses.value,\n        ]}\n      >\n        { slots.default?.({\n          isSelected,\n          select,\n          next,\n          prev,\n          selected: selected.value,\n        }) }\n      </props.tag>\n    ))\n\n    return {}\n  },\n})\n\nexport type VChipGroup = InstanceType<typeof VChipGroup>\n"],"mappings":";AAAA;AACA,0B,CAEA;;SACSA,c,EAAgBC,Q;SAChBC,Y;SACAC,c,EAAgBC,Y;SAChBC,gB;SACAC,e,0CAET;;SACSC,S,EAAWC,e,EAAiBC,S;AACrC,SAASC,KAAT,QAAsB,KAAtB,C,CAEA;;AAGA,OAAO,MAAMC,gBAAgB,GAAGC,MAAM,CAACC,GAAP,CAAW,sBAAX,CAAzB;AAEP,OAAO,MAAMC,UAAU,GAAGN,eAAe,CAAC;EACxCO,IAAI,EAAE,YADkC;EAGxCC,KAAK,EAAE;IACLC,MAAM,EAAEC,OADH;IAELC,MAAM,EAAED,OAFH;IAGLE,eAAe,EAAE;MACfC,IAAI,EAAEC,QADS;MAEfC,OAAO,EAAEhB;IAFM,CAHZ;IAQL,GAAGP,cAAc,CAAC;MAAEwB,aAAa,EAAE;IAAjB,CAAD,CARZ;IASL,GAAGtB,YAAY,EATV;IAUL,GAAGC,cAAc,EAVZ;IAWL,GAAGE,gBAAgB,CAAC;MAAEoB,OAAO,EAAE;IAAX,CAAD;EAXd,CAHiC;EAiBxCC,KAAK,EAAE;IACL,qBAAsBC,KAAD,IAAgB;EADhC,CAjBiC;;EAqBxCC,KAAK,CAAEZ,KAAF,QAAoB;IAAA,IAAX;MAAEa;IAAF,CAAW;IACvB,MAAM;MAAEC;IAAF,IAAmB1B,YAAY,CAACY,KAAD,CAArC;IACA,MAAM;MAAEe,UAAF;MAAcC,MAAd;MAAsBC,IAAtB;MAA4BC,IAA5B;MAAkCC;IAAlC,IAA+ClC,QAAQ,CAACe,KAAD,EAAQL,gBAAR,CAA7D;IAEAL,eAAe,CAAC;MACd8B,KAAK,EAAE;QACLC,KAAK,EAAE3B,KAAK,CAACM,KAAD,EAAQ,OAAR,CADP;QAELG,MAAM,EAAET,KAAK,CAACM,KAAD,EAAQ,QAAR,CAFR;QAGLS,OAAO,EAAEf,KAAK,CAACM,KAAD,EAAQ,SAAR;MAHT;IADO,CAAD,CAAf;IAQAP,SAAS,CAAC;MAAA;;MAAA;QAAA,SAEC,CACL,cADK,EAEL;UACE,wBAAwBO,KAAK,CAACC;QADhC,CAFK,EAKLa,YAAY,CAACH,KALR;MAFD;QAAA,kCAUJE,KAAK,CAACN,OAVF,qBAUJ,oBAAAM,KAAK,EAAW;UAChBE,UADgB;UAEhBC,MAFgB;UAGhBC,IAHgB;UAIhBC,IAJgB;UAKhBC,QAAQ,EAAEA,QAAQ,CAACR;QALH,CAAX,CAVD;MAAA;IAAA,CAAD,CAAT;IAoBA,OAAO,EAAP;EACD;;AAtDuC,CAAD,CAAlC"}

package/lib/components/VChipGroup/VChipGroup.sass

@@ -1,4 +1,4 @@
-@import './_variables.scss'
+@use './variables' as *
 
 // Block
 .v-chip-group

package/lib/components/VChipGroup/_variables.scss

@@ -1,4 +1,4 @@
-// Defaults
+// VChipGroup
 $chip-group-selected-opacity: var(--v-activated-opacity) !default;
 $chip-group-padding: 4px 0 !default;
 $chip-group-margin: 4px 8px 4px 0 !default;

package/lib/components/VCode/VCode.sass

@@ -1,8 +1,7 @@
-@forward './variables'
 @use './variables' as *
 
 .v-code
-  background-color: rgb(var(--v-code-background-color))
+  background-color: rgb($code-background-color)
   border-radius: $code-border-radius
   font-size: $code-font-size
   font-weight: $code-font-weight

package/lib/components/VCode/_variables.scss

@@ -1,4 +1,4 @@
-// Defaults
+$code-background-color: var(--v-code-background-color) !default;
 $code-border-radius: 3px !default;
 $code-font-size: 85% !default;
 $code-font-weight: normal !default;

package/lib/components/VColorPicker/VColorPicker.mjs

@@ -2,20 +2,20 @@ import { createVNode as _createVNode } from "vue";
 // Styles
 import "./VColorPicker.css"; // Components
 
-import { VSheet } from "../VSheet/index.mjs";
-import { VColorPickerPreview } from "./VColorPickerPreview.mjs";
 import { VColorPickerCanvas } from "./VColorPickerCanvas.mjs";
 import { VColorPickerEdit } from "./VColorPickerEdit.mjs";
-import { VColorPickerSwatches } from "./VColorPickerSwatches.mjs"; // Composables
+import { VColorPickerPreview } from "./VColorPickerPreview.mjs";
+import { VColorPickerSwatches } from "./VColorPickerSwatches.mjs";
+import { VSheet } from "../VSheet/index.mjs"; // Composables
 
-import { useProxiedModel } from "../../composables/proxiedModel.mjs";
 import { makeElevationProps } from "../../composables/elevation.mjs";
 import { makeRoundedProps } from "../../composables/rounded.mjs";
-import { makeThemeProps } from "../../composables/theme.mjs"; // Utilities
+import { makeThemeProps } from "../../composables/theme.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
 
-import { onMounted, ref } from 'vue';
-import { defineComponent, HSVAtoCSS } from "../../util/index.mjs";
-import { extractColor, modes, nullColor, parseColor } from "./util/index.mjs"; // Types
+import { defineComponent, HSVAtoCSS, useRender } from "../../util/index.mjs";
+import { extractColor, modes, nullColor, parseColor } from "./util/index.mjs";
+import { onMounted, ref } from 'vue'; // Types
 
 export const VColorPicker = defineComponent({
   name: 'VColorPicker',
@@ -93,7 +93,7 @@ export const VColorPicker = defineComponent({
     onMounted(() => {
       if (!props.modes.includes(mode.value)) mode.value = props.modes[0];
     });
-    return () => {
+    useRender(() => {
       var _currentColor$value;
 
       return _createVNode(VSheet, {
@@ -109,6 +109,7 @@ export const VColorPicker = defineComponent({
         "maxWidth": props.width
       }, {
         default: () => [!props.hideCanvas && _createVNode(VColorPickerCanvas, {
+          "key": "canvas",
           "color": currentColor.value,
           "onUpdate:color": updateColor,
           "disabled": props.disabled,
@@ -116,13 +117,16 @@ export const VColorPicker = defineComponent({
           "width": props.width,
           "height": props.canvasHeight
         }, null), (!props.hideSliders || !props.hideInputs) && _createVNode("div", {
+          "key": "controls",
           "class": "v-color-picker__controls"
         }, [!props.hideSliders && _createVNode(VColorPickerPreview, {
+          "key": "preview",
           "color": currentColor.value,
           "onUpdate:color": updateColor,
           "hideAlpha": !mode.value.endsWith('a'),
           "disabled": props.disabled
         }, null), !props.hideInputs && _createVNode(VColorPickerEdit, {
+          "key": "edit",
           "modes": props.modes,
           "mode": mode.value,
           "onUpdate:mode": m => mode.value = m,
@@ -130,6 +134,7 @@ export const VColorPicker = defineComponent({
           "onUpdate:color": updateColor,
           "disabled": props.disabled
         }, null)]), props.showSwatches && _createVNode(VColorPickerSwatches, {
+          "key": "swatches",
           "color": currentColor.value,
           "onUpdate:color": updateColor,
           "maxHeight": props.swatchesMaxHeight,
@@ -137,7 +142,8 @@ export const VColorPicker = defineComponent({
           "disabled": props.disabled
         }, null)]
       });
-    };
+    });
+    return {};
   }
 
 });

package/lib/components/VColorPicker/VColorPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VColorPicker.mjs","names":["VSheet","VColorPickerPreview","VColorPickerCanvas","VColorPickerEdit","VColorPickerSwatches","useProxiedModel","makeElevationProps","makeRoundedProps","makeThemeProps","onMounted","ref","defineComponent","HSVAtoCSS","extractColor","modes","nullColor","parseColor","VColorPicker","name","inheritAttrs","props","canvasHeight","type","String","Number","default","disabled","Boolean","dotSize","hideCanvas","hideSliders","hideInputs","mode","validator","v","Object","keys","includes","Array","isArray","every","m","showSwatches","swatches","swatchesMaxHeight","modelValue","width","emits","color","setup","lastPickedColor","currentColor","undefined","c","value","h","updateColor","hsva","rounded","elevation","theme","a","endsWith"],"sources":["../../../src/components/VColorPicker/VColorPicker.tsx"],"sourcesContent":["// Styles\nimport './VColorPicker.sass'\n\n// Components\nimport { VSheet } from '@/components/VSheet'\nimport { VColorPickerPreview } from './VColorPickerPreview'\nimport { VColorPickerCanvas } from './VColorPickerCanvas'\nimport { VColorPickerEdit } from './VColorPickerEdit'\nimport { VColorPickerSwatches } from './VColorPickerSwatches'\n\n// Composables\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { makeElevationProps } from '@/composables/elevation'\nimport { makeRoundedProps } from '@/composables/rounded'\nimport { makeThemeProps } from '@/composables/theme'\n\n// Utilities\nimport { onMounted, ref } from 'vue'\nimport { defineComponent, HSVAtoCSS } from '@/util'\nimport { extractColor, modes, nullColor, parseColor } from './util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSVA } from '@/util'\n\nexport const VColorPicker = defineComponent({\n  name: 'VColorPicker',\n\n  inheritAttrs: false,\n\n  props: {\n    canvasHeight: {\n      type: [String, Number],\n      default: 150,\n    },\n    disabled: Boolean,\n    dotSize: {\n      type: [Number, String],\n      default: 10,\n    },\n    hideCanvas: Boolean,\n    hideSliders: Boolean,\n    hideInputs: Boolean,\n    mode: {\n      type: String,\n      default: 'rgba',\n      validator: (v: string) => Object.keys(modes).includes(v),\n    },\n    modes: {\n      type: Array as PropType<string[]>,\n      default: () => Object.keys(modes),\n      validator: (v: any) => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m)),\n    },\n    showSwatches: Boolean,\n    swatches: Array as PropType<string[][]>,\n    swatchesMaxHeight: {\n      type: [Number, String],\n      default: 150,\n    },\n    modelValue: {\n      type: [Object, String] as PropType<Record<string, unknown> | string | undefined | null>,\n    },\n    width: {\n      type: [Number, String],\n      default: 300,\n    },\n\n    ...makeElevationProps(),\n    ...makeRoundedProps(),\n    ...makeThemeProps(),\n  },\n\n  emits: {\n    'update:modelValue': (color: any) => true,\n    'update:mode': (mode: string) => true,\n  },\n\n  setup (props) {\n    const mode = useProxiedModel(props, 'mode')\n    const lastPickedColor = ref<HSVA | null>(null)\n    const currentColor = useProxiedModel(\n      props,\n      'modelValue',\n      undefined,\n      v => {\n        let c = parseColor(v)\n\n        if (!c) return null\n\n        if (lastPickedColor.value) {\n          c = { ...c, h: lastPickedColor.value.h }\n          lastPickedColor.value = null\n        }\n\n        return c\n      },\n      v => {\n        if (!v) return null\n\n        return extractColor(v, props.modelValue)\n      }\n    )\n\n    const updateColor = (hsva: HSVA) => {\n      currentColor.value = hsva\n      lastPickedColor.value = hsva\n    }\n\n    onMounted(() => {\n      if (!props.modes.includes(mode.value)) mode.value = props.modes[0]\n    })\n\n    return () => (\n      <VSheet\n        rounded={ props.rounded }\n        elevation={ props.elevation }\n        theme={ props.theme }\n        class={[\n          'v-color-picker',\n        ]}\n        style={{\n          '--v-color-picker-color-hsv': HSVAtoCSS({ ...(currentColor.value ?? nullColor), a: 1 }),\n        }}\n        maxWidth={ props.width }\n      >\n        { !props.hideCanvas && (\n          <VColorPickerCanvas\n            color={ currentColor.value }\n            onUpdate:color={ updateColor }\n            disabled={ props.disabled }\n            dotSize={ props.dotSize }\n            width={ props.width }\n            height={ props.canvasHeight }\n          />\n        ) }\n        { (!props.hideSliders || !props.hideInputs) && (\n          <div class=\"v-color-picker__controls\">\n            { !props.hideSliders && (\n              <VColorPickerPreview\n                color={ currentColor.value }\n                onUpdate:color={ updateColor }\n                hideAlpha={ !mode.value.endsWith('a') }\n                disabled={ props.disabled }\n              />\n            ) }\n            { !props.hideInputs && (\n              <VColorPickerEdit\n                modes={ props.modes }\n                mode={ mode.value }\n                onUpdate:mode={ m => mode.value = m }\n                color={ currentColor.value }\n                onUpdate:color={ updateColor }\n                disabled={ props.disabled }\n              />\n            ) }\n          </div>\n        ) }\n        { props.showSwatches && (\n          <VColorPickerSwatches\n            color={ currentColor.value }\n            onUpdate:color={ updateColor }\n            maxHeight={ props.swatchesMaxHeight }\n            swatches={ props.swatches }\n            disabled={ props.disabled }\n          />\n        ) }\n      </VSheet>\n    )\n  },\n})\n\nexport type VColorPicker = InstanceType<typeof VColorPicker>\n"],"mappings":";AAAA;AACA,4B,CAEA;;SACSA,M;SACAC,mB;SACAC,kB;SACAC,gB;SACAC,oB,sCAET;;SACSC,e;SACAC,kB;SACAC,gB;SACAC,c,uCAET;;AACA,SAASC,SAAT,EAAoBC,GAApB,QAA+B,KAA/B;SACSC,e,EAAiBC,S;SACjBC,Y,EAAcC,K,EAAOC,S,EAAWC,U,4BAEzC;;AAIA,OAAO,MAAMC,YAAY,GAAGN,eAAe,CAAC;EAC1CO,IAAI,EAAE,cADoC;EAG1CC,YAAY,EAAE,KAH4B;EAK1CC,KAAK,EAAE;IACLC,YAAY,EAAE;MACZC,IAAI,EAAE,CAACC,MAAD,EAASC,MAAT,CADM;MAEZC,OAAO,EAAE;IAFG,CADT;IAKLC,QAAQ,EAAEC,OALL;IAMLC,OAAO,EAAE;MACPN,IAAI,EAAE,CAACE,MAAD,EAASD,MAAT,CADC;MAEPE,OAAO,EAAE;IAFF,CANJ;IAULI,UAAU,EAAEF,OAVP;IAWLG,WAAW,EAAEH,OAXR;IAYLI,UAAU,EAAEJ,OAZP;IAaLK,IAAI,EAAE;MACJV,IAAI,EAAEC,MADF;MAEJE,OAAO,EAAE,MAFL;MAGJQ,SAAS,EAAGC,CAAD,IAAeC,MAAM,CAACC,IAAP,CAAYtB,KAAZ,EAAmBuB,QAAnB,CAA4BH,CAA5B;IAHtB,CAbD;IAkBLpB,KAAK,EAAE;MACLQ,IAAI,EAAEgB,KADD;MAELb,OAAO,EAAE,MAAMU,MAAM,CAACC,IAAP,CAAYtB,KAAZ,CAFV;MAGLmB,SAAS,EAAGC,CAAD,IAAYI,KAAK,CAACC,OAAN,CAAcL,CAAd,KAAoBA,CAAC,CAACM,KAAF,CAAQC,CAAC,IAAIN,MAAM,CAACC,IAAP,CAAYtB,KAAZ,EAAmBuB,QAAnB,CAA4BI,CAA5B,CAAb;IAHtC,CAlBF;IAuBLC,YAAY,EAAEf,OAvBT;IAwBLgB,QAAQ,EAAEL,KAxBL;IAyBLM,iBAAiB,EAAE;MACjBtB,IAAI,EAAE,CAACE,MAAD,EAASD,MAAT,CADW;MAEjBE,OAAO,EAAE;IAFQ,CAzBd;IA6BLoB,UAAU,EAAE;MACVvB,IAAI,EAAE,CAACa,MAAD,EAASZ,MAAT;IADI,CA7BP;IAgCLuB,KAAK,EAAE;MACLxB,IAAI,EAAE,CAACE,MAAD,EAASD,MAAT,CADD;MAELE,OAAO,EAAE;IAFJ,CAhCF;IAqCL,GAAGnB,kBAAkB,EArChB;IAsCL,GAAGC,gBAAgB,EAtCd;IAuCL,GAAGC,cAAc;EAvCZ,CALmC;EA+C1CuC,KAAK,EAAE;IACL,qBAAsBC,KAAD,IAAgB,IADhC;IAEL,eAAgBhB,IAAD,IAAkB;EAF5B,CA/CmC;;EAoD1CiB,KAAK,CAAE7B,KAAF,EAAS;IACZ,MAAMY,IAAI,GAAG3B,eAAe,CAACe,KAAD,EAAQ,MAAR,CAA5B;IACA,MAAM8B,eAAe,GAAGxC,GAAG,CAAc,IAAd,CAA3B;IACA,MAAMyC,YAAY,GAAG9C,eAAe,CAClCe,KADkC,EAElC,YAFkC,EAGlCgC,SAHkC,EAIlClB,CAAC,IAAI;MACH,IAAImB,CAAC,GAAGrC,UAAU,CAACkB,CAAD,CAAlB;MAEA,IAAI,CAACmB,CAAL,EAAQ,OAAO,IAAP;;MAER,IAAIH,eAAe,CAACI,KAApB,EAA2B;QACzBD,CAAC,GAAG,EAAE,GAAGA,CAAL;UAAQE,CAAC,EAAEL,eAAe,CAACI,KAAhB,CAAsBC;QAAjC,CAAJ;QACAL,eAAe,CAACI,KAAhB,GAAwB,IAAxB;MACD;;MAED,OAAOD,CAAP;IACD,CAfiC,EAgBlCnB,CAAC,IAAI;MACH,IAAI,CAACA,CAAL,EAAQ,OAAO,IAAP;MAER,OAAOrB,YAAY,CAACqB,CAAD,EAAId,KAAK,CAACyB,UAAV,CAAnB;IACD,CApBiC,CAApC;;IAuBA,MAAMW,WAAW,GAAIC,IAAD,IAAgB;MAClCN,YAAY,CAACG,KAAb,GAAqBG,IAArB;MACAP,eAAe,CAACI,KAAhB,GAAwBG,IAAxB;IACD,CAHD;;IAKAhD,SAAS,CAAC,MAAM;MACd,IAAI,CAACW,KAAK,CAACN,KAAN,CAAYuB,QAAZ,CAAqBL,IAAI,CAACsB,KAA1B,CAAL,EAAuCtB,IAAI,CAACsB,KAAL,GAAalC,KAAK,CAACN,KAAN,CAAY,CAAZ,CAAb;IACxC,CAFQ,CAAT;IAIA,OAAO;MAAA;;MAAA;QAAA,WAEOM,KAAK,CAACsC,OAFb;QAAA,aAGStC,KAAK,CAACuC,SAHf;QAAA,SAIKvC,KAAK,CAACwC,KAJX;QAAA,SAKI,CACL,gBADK,CALJ;QAAA,SAQI;UACL,8BAA8BhD,SAAS,CAAC,EAAE,2BAAIuC,YAAY,CAACG,KAAjB,kCAA0BvC,SAA1B,CAAF;YAAwC8C,CAAC,EAAE;UAA3C,CAAD;QADlC,CARJ;QAAA,YAWQzC,KAAK,CAAC0B;MAXd;QAAA,gBAaD,CAAC1B,KAAK,CAACS,UAAP;UAAA,SAEUsB,YAAY,CAACG,KAFvB;UAAA,kBAGmBE,WAHnB;UAAA,YAIapC,KAAK,CAACM,QAJnB;UAAA,WAKYN,KAAK,CAACQ,OALlB;UAAA,SAMUR,KAAK,CAAC0B,KANhB;UAAA,UAOW1B,KAAK,CAACC;QAPjB,QAbC,EAuBD,CAAC,CAACD,KAAK,CAACU,WAAP,IAAsB,CAACV,KAAK,CAACW,UAA9B;UAAA,SACW;QADX,IAEI,CAACX,KAAK,CAACU,WAAP;UAAA,SAEUqB,YAAY,CAACG,KAFvB;UAAA,kBAGmBE,WAHnB;UAAA,aAIc,CAACxB,IAAI,CAACsB,KAAL,CAAWQ,QAAX,CAAoB,GAApB,CAJf;UAAA,YAKa1C,KAAK,CAACM;QALnB,QAFJ,EAUI,CAACN,KAAK,CAACW,UAAP;UAAA,SAEUX,KAAK,CAACN,KAFhB;UAAA,QAGSkB,IAAI,CAACsB,KAHd;UAAA,iBAIkBb,CAAC,IAAIT,IAAI,CAACsB,KAAL,GAAab,CAJpC;UAAA,SAKUU,YAAY,CAACG,KALvB;UAAA,kBAMmBE,WANnB;UAAA,YAOapC,KAAK,CAACM;QAPnB,QAVJ,EAvBC,EA6CDN,KAAK,CAACsB,YAAN;UAAA,SAEUS,YAAY,CAACG,KAFvB;UAAA,kBAGmBE,WAHnB;UAAA,aAIcpC,KAAK,CAACwB,iBAJpB;UAAA,YAKaxB,KAAK,CAACuB,QALnB;UAAA,YAMavB,KAAK,CAACM;QANnB,QA7CC;MAAA;IAAA,CAAP;EAwDD;;AA/IyC,CAAD,CAApC"}
+{"version":3,"file":"VColorPicker.mjs","names":["VColorPickerCanvas","VColorPickerEdit","VColorPickerPreview","VColorPickerSwatches","VSheet","makeElevationProps","makeRoundedProps","makeThemeProps","useProxiedModel","defineComponent","HSVAtoCSS","useRender","extractColor","modes","nullColor","parseColor","onMounted","ref","VColorPicker","name","inheritAttrs","props","canvasHeight","type","String","Number","default","disabled","Boolean","dotSize","hideCanvas","hideSliders","hideInputs","mode","validator","v","Object","keys","includes","Array","isArray","every","m","showSwatches","swatches","swatchesMaxHeight","modelValue","width","emits","color","setup","lastPickedColor","currentColor","undefined","c","value","h","updateColor","hsva","rounded","elevation","theme","a","endsWith"],"sources":["../../../src/components/VColorPicker/VColorPicker.tsx"],"sourcesContent":["// Styles\nimport './VColorPicker.sass'\n\n// Components\nimport { VColorPickerCanvas } from './VColorPickerCanvas'\nimport { VColorPickerEdit } from './VColorPickerEdit'\nimport { VColorPickerPreview } from './VColorPickerPreview'\nimport { VColorPickerSwatches } from './VColorPickerSwatches'\nimport { VSheet } from '@/components/VSheet'\n\n// Composables\nimport { makeElevationProps } from '@/composables/elevation'\nimport { makeRoundedProps } from '@/composables/rounded'\nimport { makeThemeProps } from '@/composables/theme'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { defineComponent, HSVAtoCSS, useRender } from '@/util'\nimport { extractColor, modes, nullColor, parseColor } from './util'\nimport { onMounted, ref } from 'vue'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSVA } from '@/util'\n\nexport const VColorPicker = defineComponent({\n  name: 'VColorPicker',\n\n  inheritAttrs: false,\n\n  props: {\n    canvasHeight: {\n      type: [String, Number],\n      default: 150,\n    },\n    disabled: Boolean,\n    dotSize: {\n      type: [Number, String],\n      default: 10,\n    },\n    hideCanvas: Boolean,\n    hideSliders: Boolean,\n    hideInputs: Boolean,\n    mode: {\n      type: String,\n      default: 'rgba',\n      validator: (v: string) => Object.keys(modes).includes(v),\n    },\n    modes: {\n      type: Array as PropType<string[]>,\n      default: () => Object.keys(modes),\n      validator: (v: any) => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m)),\n    },\n    showSwatches: Boolean,\n    swatches: Array as PropType<string[][]>,\n    swatchesMaxHeight: {\n      type: [Number, String],\n      default: 150,\n    },\n    modelValue: {\n      type: [Object, String] as PropType<Record<string, unknown> | string | undefined | null>,\n    },\n    width: {\n      type: [Number, String],\n      default: 300,\n    },\n\n    ...makeElevationProps(),\n    ...makeRoundedProps(),\n    ...makeThemeProps(),\n  },\n\n  emits: {\n    'update:modelValue': (color: any) => true,\n    'update:mode': (mode: string) => true,\n  },\n\n  setup (props) {\n    const mode = useProxiedModel(props, 'mode')\n    const lastPickedColor = ref<HSVA | null>(null)\n    const currentColor = useProxiedModel(\n      props,\n      'modelValue',\n      undefined,\n      v => {\n        let c = parseColor(v)\n\n        if (!c) return null\n\n        if (lastPickedColor.value) {\n          c = { ...c, h: lastPickedColor.value.h }\n          lastPickedColor.value = null\n        }\n\n        return c\n      },\n      v => {\n        if (!v) return null\n\n        return extractColor(v, props.modelValue)\n      }\n    )\n\n    const updateColor = (hsva: HSVA) => {\n      currentColor.value = hsva\n      lastPickedColor.value = hsva\n    }\n\n    onMounted(() => {\n      if (!props.modes.includes(mode.value)) mode.value = props.modes[0]\n    })\n\n    useRender(() => (\n      <VSheet\n        rounded={ props.rounded }\n        elevation={ props.elevation }\n        theme={ props.theme }\n        class={[\n          'v-color-picker',\n        ]}\n        style={{\n          '--v-color-picker-color-hsv': HSVAtoCSS({ ...(currentColor.value ?? nullColor), a: 1 }),\n        }}\n        maxWidth={ props.width }\n      >\n        { !props.hideCanvas && (\n          <VColorPickerCanvas\n            key=\"canvas\"\n            color={ currentColor.value }\n            onUpdate:color={ updateColor }\n            disabled={ props.disabled }\n            dotSize={ props.dotSize }\n            width={ props.width }\n            height={ props.canvasHeight }\n          />\n        ) }\n\n        { (!props.hideSliders || !props.hideInputs) && (\n          <div key=\"controls\" class=\"v-color-picker__controls\">\n            { !props.hideSliders && (\n              <VColorPickerPreview\n                key=\"preview\"\n                color={ currentColor.value }\n                onUpdate:color={ updateColor }\n                hideAlpha={ !mode.value.endsWith('a') }\n                disabled={ props.disabled }\n              />\n            ) }\n\n            { !props.hideInputs && (\n              <VColorPickerEdit\n                key=\"edit\"\n                modes={ props.modes }\n                mode={ mode.value }\n                onUpdate:mode={ m => mode.value = m }\n                color={ currentColor.value }\n                onUpdate:color={ updateColor }\n                disabled={ props.disabled }\n              />\n            ) }\n          </div>\n        ) }\n\n        { props.showSwatches && (\n          <VColorPickerSwatches\n            key=\"swatches\"\n            color={ currentColor.value }\n            onUpdate:color={ updateColor }\n            maxHeight={ props.swatchesMaxHeight }\n            swatches={ props.swatches }\n            disabled={ props.disabled }\n          />\n        ) }\n      </VSheet>\n    ))\n\n    return {}\n  },\n})\n\nexport type VColorPicker = InstanceType<typeof VColorPicker>\n"],"mappings":"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"}

package/lib/components/VColorPicker/VColorPicker.sass

@@ -1,4 +1,3 @@
-@forward './variables'
 @use '../../styles/tools'
 @use './variables' as *
 

package/lib/components/VColorPicker/VColorPickerCanvas.mjs

@@ -2,8 +2,8 @@ import { createVNode as _createVNode } from "vue";
 // Styles
 import "./VColorPickerCanvas.css"; // Utilities
 
-import { computed, onMounted, ref, watch } from 'vue';
-import { clamp, convertToUnit, defineComponent, getEventCoordinates } from "../../util/index.mjs"; // Types
+import { clamp, convertToUnit, defineComponent, getEventCoordinates, useRender } from "../../util/index.mjs";
+import { computed, onMounted, ref, watch } from 'vue'; // Types
 
 export const VColorPickerCanvas = defineComponent({
   name: 'VColorPickerCanvas',
@@ -168,7 +168,7 @@ export const VColorPickerCanvas = defineComponent({
       immediate: true
     });
     onMounted(() => updateCanvas());
-    return () => _createVNode("div", {
+    useRender(() => _createVNode("div", {
       "class": "v-color-picker-canvas",
       "style": {
         width: convertToUnit(props.width),
@@ -186,7 +186,8 @@ export const VColorPickerCanvas = defineComponent({
         'v-color-picker-canvas__dot--disabled': props.disabled
       }],
       "style": dotStyles.value
-    }, null)]);
+    }, null)]));
+    return {};
   }
 
 });

package/lib/components/VColorPicker/VColorPickerCanvas.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VColorPickerCanvas.mjs","names":["computed","onMounted","ref","watch","clamp","convertToUnit","defineComponent","getEventCoordinates","VColorPickerCanvas","name","props","color","type","Object","disabled","Boolean","dotSize","Number","String","default","height","width","emits","hue","setup","emit","isInteracting","isOutsideUpdate","dotPosition","x","y","dotStyles","value","radius","parseInt","transform","canvasRef","updateDotPosition","rect","left","top","handleClick","e","clientX","clientY","getBoundingClientRect","handleMouseDown","preventDefault","window","addEventListener","handleMouseMove","handleMouseUp","coords","removeEventListener","h","s","v","a","updateCanvas","canvas","ctx","getContext","saturationGradient","createLinearGradient","addColorStop","fillStyle","fillRect","valueGradient","immediate","deep"],"sources":["../../../src/components/VColorPicker/VColorPickerCanvas.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerCanvas.sass'\n\n// Utilities\nimport { computed, onMounted, ref, watch } from 'vue'\nimport { clamp, convertToUnit, defineComponent, getEventCoordinates } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSVA } from '@/util'\n\nexport const VColorPickerCanvas = defineComponent({\n  name: 'VColorPickerCanvas',\n\n  props: {\n    color: {\n      type: Object as PropType<HSVA | null>,\n    },\n    disabled: Boolean,\n    dotSize: {\n      type: [Number, String],\n      default: 10,\n    },\n    height: {\n      type: [Number, String],\n      default: 150,\n    },\n    width: {\n      type: [Number, String],\n      default: 300,\n    },\n  },\n\n  emits: {\n    'update:color': (color: HSVA) => true,\n    'update:position': (hue: any) => true,\n  },\n\n  setup (props, { emit }) {\n    const isInteracting = ref(false)\n    const isOutsideUpdate = ref(false)\n    const dotPosition = ref({ x: 0, y: 0 })\n\n    const dotStyles = computed(() => {\n      const { x, y } = dotPosition.value\n      const radius = parseInt(props.dotSize, 10) / 2\n\n      return {\n        width: convertToUnit(props.dotSize),\n        height: convertToUnit(props.dotSize),\n        transform: `translate(${convertToUnit(x - radius)}, ${convertToUnit(y - radius)})`,\n      }\n    })\n\n    const canvasRef = ref<HTMLCanvasElement | null>()\n\n    function updateDotPosition (x: number, y: number, rect: DOMRect) {\n      const { left, top, width, height } = rect\n      dotPosition.value = {\n        x: clamp(x - left, 0, width),\n        y: clamp(y - top, 0, height),\n      }\n    }\n\n    function handleClick (e: MouseEvent) {\n      if (props.disabled || !canvasRef.value) return\n\n      updateDotPosition(e.clientX, e.clientY, canvasRef.value.getBoundingClientRect())\n    }\n\n    function handleMouseDown (e: MouseEvent | TouchEvent) {\n      // To prevent selection while moving cursor\n      e.preventDefault()\n\n      if (props.disabled) return\n\n      isInteracting.value = true\n\n      window.addEventListener('mousemove', handleMouseMove)\n      window.addEventListener('mouseup', handleMouseUp)\n      window.addEventListener('touchmove', handleMouseMove)\n      window.addEventListener('touchend', handleMouseUp)\n    }\n\n    function handleMouseMove (e: MouseEvent | TouchEvent) {\n      if (props.disabled || !canvasRef.value) return\n\n      isInteracting.value = true\n\n      const coords = getEventCoordinates(e)\n\n      updateDotPosition(coords.clientX, coords.clientY, canvasRef.value.getBoundingClientRect())\n    }\n\n    function handleMouseUp () {\n      window.removeEventListener('mousemove', handleMouseMove)\n      window.removeEventListener('mouseup', handleMouseUp)\n      window.removeEventListener('touchmove', handleMouseMove)\n      window.removeEventListener('touchend', handleMouseUp)\n    }\n\n    watch(dotPosition, () => {\n      if (isOutsideUpdate.value) {\n        isOutsideUpdate.value = false\n        return\n      }\n\n      if (!canvasRef.value) return\n\n      const { width, height } = canvasRef.value.getBoundingClientRect()\n      const { x, y } = dotPosition.value\n\n      emit('update:color', {\n        h: props.color?.h ?? 0,\n        s: clamp(x, 0, width) / width,\n        v: 1 - clamp(y, 0, height) / height,\n        a: props.color?.a ?? 1,\n      })\n    })\n\n    function updateCanvas () {\n      if (!canvasRef.value) return\n\n      const canvas = canvasRef.value\n      const ctx = canvas.getContext('2d')\n\n      if (!ctx) return\n\n      const saturationGradient = ctx.createLinearGradient(0, 0, canvas.width, 0)\n      saturationGradient.addColorStop(0, 'hsla(0, 0%, 100%, 1)') // white\n      saturationGradient.addColorStop(1, `hsla(${props.color?.h ?? 0}, 100%, 50%, 1)`)\n      ctx.fillStyle = saturationGradient\n      ctx.fillRect(0, 0, canvas.width, canvas.height)\n\n      const valueGradient = ctx.createLinearGradient(0, 0, 0, canvas.height)\n      valueGradient.addColorStop(0, 'hsla(0, 0%, 100%, 0)') // transparent\n      valueGradient.addColorStop(1, 'hsla(0, 0%, 0%, 1)') // black\n      ctx.fillStyle = valueGradient\n      ctx.fillRect(0, 0, canvas.width, canvas.height)\n    }\n\n    watch(() => props.color?.h, updateCanvas, { immediate: true })\n\n    watch(() => props.color, () => {\n      if (isInteracting.value) {\n        isInteracting.value = false\n        return\n      }\n\n      if (!props.color) return\n\n      isOutsideUpdate.value = true\n\n      dotPosition.value = {\n        x: props.color.s * parseInt(props.width, 10),\n        y: (1 - props.color.v) * parseInt(props.height, 10),\n      }\n    }, { deep: true, immediate: true })\n\n    onMounted(() => updateCanvas())\n\n    return () => (\n      <div\n        class=\"v-color-picker-canvas\"\n        style={{\n          width: convertToUnit(props.width),\n          height: convertToUnit(props.height),\n        }}\n        onClick={ handleClick }\n        onMousedown={ handleMouseDown }\n        onTouchstart={ handleMouseDown }\n      >\n        <canvas\n          ref={ canvasRef }\n          width={ props.width }\n          height={ props.height }\n        />\n        <div\n          class={[\n            'v-color-picker-canvas__dot',\n            {\n              'v-color-picker-canvas__dot--disabled': props.disabled,\n            },\n          ]}\n          style={ dotStyles.value }\n        />\n      </div>\n    )\n  },\n})\n"],"mappings":";AAAA;AACA,kC,CAEA;;AACA,SAASA,QAAT,EAAmBC,SAAnB,EAA8BC,GAA9B,EAAmCC,KAAnC,QAAgD,KAAhD;SACSC,K,EAAOC,a,EAAeC,e,EAAiBC,mB,gCAEhD;;AAIA,OAAO,MAAMC,kBAAkB,GAAGF,eAAe,CAAC;EAChDG,IAAI,EAAE,oBAD0C;EAGhDC,KAAK,EAAE;IACLC,KAAK,EAAE;MACLC,IAAI,EAAEC;IADD,CADF;IAILC,QAAQ,EAAEC,OAJL;IAKLC,OAAO,EAAE;MACPJ,IAAI,EAAE,CAACK,MAAD,EAASC,MAAT,CADC;MAEPC,OAAO,EAAE;IAFF,CALJ;IASLC,MAAM,EAAE;MACNR,IAAI,EAAE,CAACK,MAAD,EAASC,MAAT,CADA;MAENC,OAAO,EAAE;IAFH,CATH;IAaLE,KAAK,EAAE;MACLT,IAAI,EAAE,CAACK,MAAD,EAASC,MAAT,CADD;MAELC,OAAO,EAAE;IAFJ;EAbF,CAHyC;EAsBhDG,KAAK,EAAE;IACL,gBAAiBX,KAAD,IAAiB,IAD5B;IAEL,mBAAoBY,GAAD,IAAc;EAF5B,CAtByC;;EA2BhDC,KAAK,CAAEd,KAAF,QAAmB;IAAA,IAAV;MAAEe;IAAF,CAAU;IACtB,MAAMC,aAAa,GAAGxB,GAAG,CAAC,KAAD,CAAzB;IACA,MAAMyB,eAAe,GAAGzB,GAAG,CAAC,KAAD,CAA3B;IACA,MAAM0B,WAAW,GAAG1B,GAAG,CAAC;MAAE2B,CAAC,EAAE,CAAL;MAAQC,CAAC,EAAE;IAAX,CAAD,CAAvB;IAEA,MAAMC,SAAS,GAAG/B,QAAQ,CAAC,MAAM;MAC/B,MAAM;QAAE6B,CAAF;QAAKC;MAAL,IAAWF,WAAW,CAACI,KAA7B;MACA,MAAMC,MAAM,GAAGC,QAAQ,CAACxB,KAAK,CAACM,OAAP,EAAgB,EAAhB,CAAR,GAA8B,CAA7C;MAEA,OAAO;QACLK,KAAK,EAAEhB,aAAa,CAACK,KAAK,CAACM,OAAP,CADf;QAELI,MAAM,EAAEf,aAAa,CAACK,KAAK,CAACM,OAAP,CAFhB;QAGLmB,SAAS,EAAG,aAAY9B,aAAa,CAACwB,CAAC,GAAGI,MAAL,CAAa,KAAI5B,aAAa,CAACyB,CAAC,GAAGG,MAAL,CAAa;MAH3E,CAAP;IAKD,CATyB,CAA1B;IAWA,MAAMG,SAAS,GAAGlC,GAAG,EAArB;;IAEA,SAASmC,iBAAT,CAA4BR,CAA5B,EAAuCC,CAAvC,EAAkDQ,IAAlD,EAAiE;MAC/D,MAAM;QAAEC,IAAF;QAAQC,GAAR;QAAanB,KAAb;QAAoBD;MAApB,IAA+BkB,IAArC;MACAV,WAAW,CAACI,KAAZ,GAAoB;QAClBH,CAAC,EAAEzB,KAAK,CAACyB,CAAC,GAAGU,IAAL,EAAW,CAAX,EAAclB,KAAd,CADU;QAElBS,CAAC,EAAE1B,KAAK,CAAC0B,CAAC,GAAGU,GAAL,EAAU,CAAV,EAAapB,MAAb;MAFU,CAApB;IAID;;IAED,SAASqB,WAAT,CAAsBC,CAAtB,EAAqC;MACnC,IAAIhC,KAAK,CAACI,QAAN,IAAkB,CAACsB,SAAS,CAACJ,KAAjC,EAAwC;MAExCK,iBAAiB,CAACK,CAAC,CAACC,OAAH,EAAYD,CAAC,CAACE,OAAd,EAAuBR,SAAS,CAACJ,KAAV,CAAgBa,qBAAhB,EAAvB,CAAjB;IACD;;IAED,SAASC,eAAT,CAA0BJ,CAA1B,EAAsD;MACpD;MACAA,CAAC,CAACK,cAAF;MAEA,IAAIrC,KAAK,CAACI,QAAV,EAAoB;MAEpBY,aAAa,CAACM,KAAd,GAAsB,IAAtB;MAEAgB,MAAM,CAACC,gBAAP,CAAwB,WAAxB,EAAqCC,eAArC;MACAF,MAAM,CAACC,gBAAP,CAAwB,SAAxB,EAAmCE,aAAnC;MACAH,MAAM,CAACC,gBAAP,CAAwB,WAAxB,EAAqCC,eAArC;MACAF,MAAM,CAACC,gBAAP,CAAwB,UAAxB,EAAoCE,aAApC;IACD;;IAED,SAASD,eAAT,CAA0BR,CAA1B,EAAsD;MACpD,IAAIhC,KAAK,CAACI,QAAN,IAAkB,CAACsB,SAAS,CAACJ,KAAjC,EAAwC;MAExCN,aAAa,CAACM,KAAd,GAAsB,IAAtB;MAEA,MAAMoB,MAAM,GAAG7C,mBAAmB,CAACmC,CAAD,CAAlC;MAEAL,iBAAiB,CAACe,MAAM,CAACT,OAAR,EAAiBS,MAAM,CAACR,OAAxB,EAAiCR,SAAS,CAACJ,KAAV,CAAgBa,qBAAhB,EAAjC,CAAjB;IACD;;IAED,SAASM,aAAT,GAA0B;MACxBH,MAAM,CAACK,mBAAP,CAA2B,WAA3B,EAAwCH,eAAxC;MACAF,MAAM,CAACK,mBAAP,CAA2B,SAA3B,EAAsCF,aAAtC;MACAH,MAAM,CAACK,mBAAP,CAA2B,WAA3B,EAAwCH,eAAxC;MACAF,MAAM,CAACK,mBAAP,CAA2B,UAA3B,EAAuCF,aAAvC;IACD;;IAEDhD,KAAK,CAACyB,WAAD,EAAc,MAAM;MAAA;;MACvB,IAAID,eAAe,CAACK,KAApB,EAA2B;QACzBL,eAAe,CAACK,KAAhB,GAAwB,KAAxB;QACA;MACD;;MAED,IAAI,CAACI,SAAS,CAACJ,KAAf,EAAsB;MAEtB,MAAM;QAAEX,KAAF;QAASD;MAAT,IAAoBgB,SAAS,CAACJ,KAAV,CAAgBa,qBAAhB,EAA1B;MACA,MAAM;QAAEhB,CAAF;QAAKC;MAAL,IAAWF,WAAW,CAACI,KAA7B;MAEAP,IAAI,CAAC,cAAD,EAAiB;QACnB6B,CAAC,oCAAE5C,KAAK,CAACC,KAAR,qBAAE,aAAa2C,CAAf,6BAAoB,CADF;QAEnBC,CAAC,EAAEnD,KAAK,CAACyB,CAAD,EAAI,CAAJ,EAAOR,KAAP,CAAL,GAAqBA,KAFL;QAGnBmC,CAAC,EAAE,IAAIpD,KAAK,CAAC0B,CAAD,EAAI,CAAJ,EAAOV,MAAP,CAAL,GAAsBA,MAHV;QAInBqC,CAAC,qCAAE/C,KAAK,CAACC,KAAR,qBAAE,cAAa8C,CAAf,6BAAoB;MAJF,CAAjB,CAAJ;IAMD,CAjBI,CAAL;;IAmBA,SAASC,YAAT,GAAyB;MAAA;;MACvB,IAAI,CAACtB,SAAS,CAACJ,KAAf,EAAsB;MAEtB,MAAM2B,MAAM,GAAGvB,SAAS,CAACJ,KAAzB;MACA,MAAM4B,GAAG,GAAGD,MAAM,CAACE,UAAP,CAAkB,IAAlB,CAAZ;MAEA,IAAI,CAACD,GAAL,EAAU;MAEV,MAAME,kBAAkB,GAAGF,GAAG,CAACG,oBAAJ,CAAyB,CAAzB,EAA4B,CAA5B,EAA+BJ,MAAM,CAACtC,KAAtC,EAA6C,CAA7C,CAA3B;MACAyC,kBAAkB,CAACE,YAAnB,CAAgC,CAAhC,EAAmC,sBAAnC,EATuB,CASoC;;MAC3DF,kBAAkB,CAACE,YAAnB,CAAgC,CAAhC,EAAoC,QAAD,oCAAQtD,KAAK,CAACC,KAAd,qBAAQ,cAAa2C,CAArB,8BAA0B,CAAE,iBAA/D;MACAM,GAAG,CAACK,SAAJ,GAAgBH,kBAAhB;MACAF,GAAG,CAACM,QAAJ,CAAa,CAAb,EAAgB,CAAhB,EAAmBP,MAAM,CAACtC,KAA1B,EAAiCsC,MAAM,CAACvC,MAAxC;MAEA,MAAM+C,aAAa,GAAGP,GAAG,CAACG,oBAAJ,CAAyB,CAAzB,EAA4B,CAA5B,EAA+B,CAA/B,EAAkCJ,MAAM,CAACvC,MAAzC,CAAtB;MACA+C,aAAa,CAACH,YAAd,CAA2B,CAA3B,EAA8B,sBAA9B,EAfuB,CAe+B;;MACtDG,aAAa,CAACH,YAAd,CAA2B,CAA3B,EAA8B,oBAA9B,EAhBuB,CAgB6B;;MACpDJ,GAAG,CAACK,SAAJ,GAAgBE,aAAhB;MACAP,GAAG,CAACM,QAAJ,CAAa,CAAb,EAAgB,CAAhB,EAAmBP,MAAM,CAACtC,KAA1B,EAAiCsC,MAAM,CAACvC,MAAxC;IACD;;IAEDjB,KAAK,CAAC;MAAA;;MAAA,wBAAMO,KAAK,CAACC,KAAZ,qBAAM,cAAa2C,CAAnB;IAAA,CAAD,EAAuBI,YAAvB,EAAqC;MAAEU,SAAS,EAAE;IAAb,CAArC,CAAL;IAEAjE,KAAK,CAAC,MAAMO,KAAK,CAACC,KAAb,EAAoB,MAAM;MAC7B,IAAIe,aAAa,CAACM,KAAlB,EAAyB;QACvBN,aAAa,CAACM,KAAd,GAAsB,KAAtB;QACA;MACD;;MAED,IAAI,CAACtB,KAAK,CAACC,KAAX,EAAkB;MAElBgB,eAAe,CAACK,KAAhB,GAAwB,IAAxB;MAEAJ,WAAW,CAACI,KAAZ,GAAoB;QAClBH,CAAC,EAAEnB,KAAK,CAACC,KAAN,CAAY4C,CAAZ,GAAgBrB,QAAQ,CAACxB,KAAK,CAACW,KAAP,EAAc,EAAd,CADT;QAElBS,CAAC,EAAE,CAAC,IAAIpB,KAAK,CAACC,KAAN,CAAY6C,CAAjB,IAAsBtB,QAAQ,CAACxB,KAAK,CAACU,MAAP,EAAe,EAAf;MAFf,CAApB;IAID,CAdI,EAcF;MAAEiD,IAAI,EAAE,IAAR;MAAcD,SAAS,EAAE;IAAzB,CAdE,CAAL;IAgBAnE,SAAS,CAAC,MAAMyD,YAAY,EAAnB,CAAT;IAEA,OAAO;MAAA,SAEG,uBAFH;MAAA,SAGI;QACLrC,KAAK,EAAEhB,aAAa,CAACK,KAAK,CAACW,KAAP,CADf;QAELD,MAAM,EAAEf,aAAa,CAACK,KAAK,CAACU,MAAP;MAFhB,CAHJ;MAAA,WAOOqB,WAPP;MAAA,eAQWK,eARX;MAAA,gBASYA;IATZ;MAAA,OAYKV,SAZL;MAAA,SAaO1B,KAAK,CAACW,KAbb;MAAA,UAcQX,KAAK,CAACU;IAdd;MAAA,SAiBM,CACL,4BADK,EAEL;QACE,wCAAwCV,KAAK,CAACI;MADhD,CAFK,CAjBN;MAAA,SAuBOiB,SAAS,CAACC;IAvBjB,UAAP;EA2BD;;AAjL+C,CAAD,CAA1C"}
+{"version":3,"file":"VColorPickerCanvas.mjs","names":["clamp","convertToUnit","defineComponent","getEventCoordinates","useRender","computed","onMounted","ref","watch","VColorPickerCanvas","name","props","color","type","Object","disabled","Boolean","dotSize","Number","String","default","height","width","emits","hue","setup","emit","isInteracting","isOutsideUpdate","dotPosition","x","y","dotStyles","value","radius","parseInt","transform","canvasRef","updateDotPosition","rect","left","top","handleClick","e","clientX","clientY","getBoundingClientRect","handleMouseDown","preventDefault","window","addEventListener","handleMouseMove","handleMouseUp","coords","removeEventListener","h","s","v","a","updateCanvas","canvas","ctx","getContext","saturationGradient","createLinearGradient","addColorStop","fillStyle","fillRect","valueGradient","immediate","deep"],"sources":["../../../src/components/VColorPicker/VColorPickerCanvas.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerCanvas.sass'\n\n// Utilities\nimport { clamp, convertToUnit, defineComponent, getEventCoordinates, useRender } from '@/util'\nimport { computed, onMounted, ref, watch } from 'vue'\n\n// Types\nimport type { HSVA } from '@/util'\nimport type { PropType } from 'vue'\n\nexport const VColorPickerCanvas = defineComponent({\n  name: 'VColorPickerCanvas',\n\n  props: {\n    color: {\n      type: Object as PropType<HSVA | null>,\n    },\n    disabled: Boolean,\n    dotSize: {\n      type: [Number, String],\n      default: 10,\n    },\n    height: {\n      type: [Number, String],\n      default: 150,\n    },\n    width: {\n      type: [Number, String],\n      default: 300,\n    },\n  },\n\n  emits: {\n    'update:color': (color: HSVA) => true,\n    'update:position': (hue: any) => true,\n  },\n\n  setup (props, { emit }) {\n    const isInteracting = ref(false)\n    const isOutsideUpdate = ref(false)\n    const dotPosition = ref({ x: 0, y: 0 })\n\n    const dotStyles = computed(() => {\n      const { x, y } = dotPosition.value\n      const radius = parseInt(props.dotSize, 10) / 2\n\n      return {\n        width: convertToUnit(props.dotSize),\n        height: convertToUnit(props.dotSize),\n        transform: `translate(${convertToUnit(x - radius)}, ${convertToUnit(y - radius)})`,\n      }\n    })\n\n    const canvasRef = ref<HTMLCanvasElement | null>()\n\n    function updateDotPosition (x: number, y: number, rect: DOMRect) {\n      const { left, top, width, height } = rect\n      dotPosition.value = {\n        x: clamp(x - left, 0, width),\n        y: clamp(y - top, 0, height),\n      }\n    }\n\n    function handleClick (e: MouseEvent) {\n      if (props.disabled || !canvasRef.value) return\n\n      updateDotPosition(e.clientX, e.clientY, canvasRef.value.getBoundingClientRect())\n    }\n\n    function handleMouseDown (e: MouseEvent | TouchEvent) {\n      // To prevent selection while moving cursor\n      e.preventDefault()\n\n      if (props.disabled) return\n\n      isInteracting.value = true\n\n      window.addEventListener('mousemove', handleMouseMove)\n      window.addEventListener('mouseup', handleMouseUp)\n      window.addEventListener('touchmove', handleMouseMove)\n      window.addEventListener('touchend', handleMouseUp)\n    }\n\n    function handleMouseMove (e: MouseEvent | TouchEvent) {\n      if (props.disabled || !canvasRef.value) return\n\n      isInteracting.value = true\n\n      const coords = getEventCoordinates(e)\n\n      updateDotPosition(coords.clientX, coords.clientY, canvasRef.value.getBoundingClientRect())\n    }\n\n    function handleMouseUp () {\n      window.removeEventListener('mousemove', handleMouseMove)\n      window.removeEventListener('mouseup', handleMouseUp)\n      window.removeEventListener('touchmove', handleMouseMove)\n      window.removeEventListener('touchend', handleMouseUp)\n    }\n\n    watch(dotPosition, () => {\n      if (isOutsideUpdate.value) {\n        isOutsideUpdate.value = false\n        return\n      }\n\n      if (!canvasRef.value) return\n\n      const { width, height } = canvasRef.value.getBoundingClientRect()\n      const { x, y } = dotPosition.value\n\n      emit('update:color', {\n        h: props.color?.h ?? 0,\n        s: clamp(x, 0, width) / width,\n        v: 1 - clamp(y, 0, height) / height,\n        a: props.color?.a ?? 1,\n      })\n    })\n\n    function updateCanvas () {\n      if (!canvasRef.value) return\n\n      const canvas = canvasRef.value\n      const ctx = canvas.getContext('2d')\n\n      if (!ctx) return\n\n      const saturationGradient = ctx.createLinearGradient(0, 0, canvas.width, 0)\n      saturationGradient.addColorStop(0, 'hsla(0, 0%, 100%, 1)') // white\n      saturationGradient.addColorStop(1, `hsla(${props.color?.h ?? 0}, 100%, 50%, 1)`)\n      ctx.fillStyle = saturationGradient\n      ctx.fillRect(0, 0, canvas.width, canvas.height)\n\n      const valueGradient = ctx.createLinearGradient(0, 0, 0, canvas.height)\n      valueGradient.addColorStop(0, 'hsla(0, 0%, 100%, 0)') // transparent\n      valueGradient.addColorStop(1, 'hsla(0, 0%, 0%, 1)') // black\n      ctx.fillStyle = valueGradient\n      ctx.fillRect(0, 0, canvas.width, canvas.height)\n    }\n\n    watch(() => props.color?.h, updateCanvas, { immediate: true })\n\n    watch(() => props.color, () => {\n      if (isInteracting.value) {\n        isInteracting.value = false\n        return\n      }\n\n      if (!props.color) return\n\n      isOutsideUpdate.value = true\n\n      dotPosition.value = {\n        x: props.color.s * parseInt(props.width, 10),\n        y: (1 - props.color.v) * parseInt(props.height, 10),\n      }\n    }, { deep: true, immediate: true })\n\n    onMounted(() => updateCanvas())\n\n    useRender(() => (\n      <div\n        class=\"v-color-picker-canvas\"\n        style={{\n          width: convertToUnit(props.width),\n          height: convertToUnit(props.height),\n        }}\n        onClick={ handleClick }\n        onMousedown={ handleMouseDown }\n        onTouchstart={ handleMouseDown }\n      >\n        <canvas\n          ref={ canvasRef }\n          width={ props.width }\n          height={ props.height }\n        />\n        <div\n          class={[\n            'v-color-picker-canvas__dot',\n            {\n              'v-color-picker-canvas__dot--disabled': props.disabled,\n            },\n          ]}\n          style={ dotStyles.value }\n        />\n      </div>\n    ))\n\n    return {}\n  },\n})\n"],"mappings":"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"}

package/lib/components/VColorPicker/VColorPickerCanvas.sass

@@ -1,4 +1,3 @@
-@forward './variables'
 @use '../../styles/tools'
 @use './variables' as *
 

package/lib/components/VColorPicker/VColorPickerEdit.mjs

@@ -5,7 +5,7 @@ import "./VColorPickerEdit.css"; // Components
 import { VBtn } from "../VBtn/index.mjs"; // Utilities
 
 import { computed } from 'vue';
-import { defineComponent } from "../../util/index.mjs";
+import { defineComponent, useRender } from "../../util/index.mjs";
 import { modes } from "./util/index.mjs"; // Types
 
 const VColorPickerInput = _ref => {
@@ -72,7 +72,7 @@ export const VColorPickerEdit = defineComponent({
         };
       });
     });
-    return () => {
+    useRender(() => {
       var _inputs$value;
 
       return _createVNode("div", {
@@ -86,7 +86,8 @@ export const VColorPickerEdit = defineComponent({
           emit('update:mode', enabledModes.value[(mi + 1) % enabledModes.value.length].name);
         }
       }, null)]);
-    };
+    });
+    return {};
   }
 
 });

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

@@ -1 +1 @@
-{"version":3,"file":"VColorPickerEdit.mjs","names":["VBtn","computed","defineComponent","modes","VColorPickerInput","label","rest","VColorPickerEdit","name","props","color","Object","disabled","Boolean","mode","type","String","default","validator","v","keys","includes","Array","isArray","every","m","emits","setup","emit","enabledModes","map","key","inputs","value","find","to","getValue","getColor","inputProps","onChange","e","target","from","length","mi","findIndex"],"sources":["../../../src/components/VColorPicker/VColorPickerEdit.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerEdit.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Utilities\nimport { computed } from 'vue'\nimport { defineComponent } from '@/util'\nimport { modes } from './util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSVA } 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 VColorPickerEdit = defineComponent({\n  name: 'VColorPickerEdit',\n\n  props: {\n    color: Object as PropType<HSVA | null>,\n    disabled: Boolean,\n    mode: {\n      type: String,\n      default: 'rgba',\n      validator: (v: string) => Object.keys(modes).includes(v),\n    },\n    modes: {\n      type: Array as PropType<string[]>,\n      default: () => Object.keys(modes),\n      validator: (v: any) => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m)),\n    },\n  },\n\n  emits: {\n    'update:color': (color: HSVA) => true,\n    'update:mode': (mode: string) => 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) : {}\n\n      return mode.inputs?.map(({ getValue, getColor, ...inputProps }) => {\n        return {\n          ...mode.inputProps,\n          ...inputProps,\n          disabled: props.disabled,\n          value: 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, target.value)))\n          },\n        }\n      })\n    })\n\n    return () => (\n      <div\n        class=\"v-color-picker-edit\"\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})\n"],"mappings":";AAAA;AACA,gC,CAEA;;SACSA,I,6BAET;;AACA,SAASC,QAAT,QAAyB,KAAzB;SACSC,e;SACAC,K,4BAET;;AAIA,MAAMC,iBAAiB,GAAG,QAA6B;EAAA,IAA5B;IAAEC,KAAF;IAAS,GAAGC;EAAZ,CAA4B;EACrD;IAAA,SAEU;EAFV,0BAIeA,IAJf,qCAKYD,KALZ;AAQD,CATD;;AAWA,OAAO,MAAME,gBAAgB,GAAGL,eAAe,CAAC;EAC9CM,IAAI,EAAE,kBADwC;EAG9CC,KAAK,EAAE;IACLC,KAAK,EAAEC,MADF;IAELC,QAAQ,EAAEC,OAFL;IAGLC,IAAI,EAAE;MACJC,IAAI,EAAEC,MADF;MAEJC,OAAO,EAAE,MAFL;MAGJC,SAAS,EAAGC,CAAD,IAAeR,MAAM,CAACS,IAAP,CAAYjB,KAAZ,EAAmBkB,QAAnB,CAA4BF,CAA5B;IAHtB,CAHD;IAQLhB,KAAK,EAAE;MACLY,IAAI,EAAEO,KADD;MAELL,OAAO,EAAE,MAAMN,MAAM,CAACS,IAAP,CAAYjB,KAAZ,CAFV;MAGLe,SAAS,EAAGC,CAAD,IAAYG,KAAK,CAACC,OAAN,CAAcJ,CAAd,KAAoBA,CAAC,CAACK,KAAF,CAAQC,CAAC,IAAId,MAAM,CAACS,IAAP,CAAYjB,KAAZ,EAAmBkB,QAAnB,CAA4BI,CAA5B,CAAb;IAHtC;EARF,CAHuC;EAkB9CC,KAAK,EAAE;IACL,gBAAiBhB,KAAD,IAAiB,IAD5B;IAEL,eAAgBI,IAAD,IAAkB;EAF5B,CAlBuC;;EAuB9Ca,KAAK,CAAElB,KAAF,SAAmB;IAAA,IAAV;MAAEmB;IAAF,CAAU;IACtB,MAAMC,YAAY,GAAG5B,QAAQ,CAAC,MAAM;MAClC,OAAOQ,KAAK,CAACN,KAAN,CAAY2B,GAAZ,CAAgBC,GAAG,KAAK,EAAE,GAAG5B,KAAK,CAAC4B,GAAD,CAAV;QAAiBvB,IAAI,EAAEuB;MAAvB,CAAL,CAAnB,CAAP;IACD,CAF4B,CAA7B;IAIA,MAAMC,MAAM,GAAG/B,QAAQ,CAAC,MAAM;MAAA;;MAC5B,MAAMa,IAAI,GAAGe,YAAY,CAACI,KAAb,CAAmBC,IAAnB,CAAwBT,CAAC,IAAIA,CAAC,CAACjB,IAAF,KAAWC,KAAK,CAACK,IAA9C,CAAb;MAEA,IAAI,CAACA,IAAL,EAAW,OAAO,EAAP;MAEX,MAAMJ,KAAK,GAAGD,KAAK,CAACC,KAAN,GAAcI,IAAI,CAACqB,EAAL,CAAQ1B,KAAK,CAACC,KAAd,CAAd,GAAqC,EAAnD;MAEA,uBAAOI,IAAI,CAACkB,MAAZ,qBAAO,aAAaF,GAAb,CAAiB,SAA2C;QAAA,IAA1C;UAAEM,QAAF;UAAYC,QAAZ;UAAsB,GAAGC;QAAzB,CAA0C;QACjE,OAAO,EACL,GAAGxB,IAAI,CAACwB,UADH;UAEL,GAAGA,UAFE;UAGL1B,QAAQ,EAAEH,KAAK,CAACG,QAHX;UAILqB,KAAK,EAAEG,QAAQ,CAAC1B,KAAD,CAJV;UAKL6B,QAAQ,EAAGC,CAAD,IAAmB;YAC3B,MAAMC,MAAM,GAAGD,CAAC,CAACC,MAAjB;YAEA,IAAI,CAACA,MAAL,EAAa;YAEbb,IAAI,CAAC,cAAD,EAAiBd,IAAI,CAAC4B,IAAL,CAAUL,QAAQ,CAAC3B,KAAD,EAAQ+B,MAAM,CAACR,KAAf,CAAlB,CAAjB,CAAJ;UACD;QAXI,CAAP;MAaD,CAdM,CAAP;IAeD,CAtBsB,CAAvB;IAwBA,OAAO;MAAA;;MAAA;QAAA,SAEG;MAFH,qBAIDD,MAAM,CAACC,KAJN,qBAID,cAAcH,GAAd,CAAkBrB,KAAK,oCACAA,KADA,OAAvB,CAJC,EAODoB,YAAY,CAACI,KAAb,CAAmBU,MAAnB,GAA4B,CAA5B;QAAA,QAEO,SAFP;QAAA,QAGO,SAHP;QAAA,WAIU,OAJV;QAAA,WAKY,MAAM;UACd,MAAMC,EAAE,GAAGf,YAAY,CAACI,KAAb,CAAmBY,SAAnB,CAA6BpB,CAAC,IAAIA,CAAC,CAACjB,IAAF,KAAWC,KAAK,CAACK,IAAnD,CAAX;UAEAc,IAAI,CAAC,aAAD,EAAgBC,YAAY,CAACI,KAAb,CAAmB,CAACW,EAAE,GAAG,CAAN,IAAWf,YAAY,CAACI,KAAb,CAAmBU,MAAjD,EAAyDnC,IAAzE,CAAJ;QACD;MATH,QAPC;IAAA,CAAP;EAqBD;;AAzE6C,CAAD,CAAxC"}
+{"version":3,"file":"VColorPickerEdit.mjs","names":["VBtn","computed","defineComponent","useRender","modes","VColorPickerInput","label","rest","VColorPickerEdit","name","props","color","Object","disabled","Boolean","mode","type","String","default","validator","v","keys","includes","Array","isArray","every","m","emits","setup","emit","enabledModes","map","key","inputs","value","find","to","getValue","getColor","inputProps","onChange","e","target","from","length","mi","findIndex"],"sources":["../../../src/components/VColorPicker/VColorPickerEdit.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerEdit.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Utilities\nimport { computed } from 'vue'\nimport { defineComponent, useRender } from '@/util'\nimport { modes } from './util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSVA } 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 VColorPickerEdit = defineComponent({\n  name: 'VColorPickerEdit',\n\n  props: {\n    color: Object as PropType<HSVA | null>,\n    disabled: Boolean,\n    mode: {\n      type: String,\n      default: 'rgba',\n      validator: (v: string) => Object.keys(modes).includes(v),\n    },\n    modes: {\n      type: Array as PropType<string[]>,\n      default: () => Object.keys(modes),\n      validator: (v: any) => Array.isArray(v) && v.every(m => Object.keys(modes).includes(m)),\n    },\n  },\n\n  emits: {\n    'update:color': (color: HSVA) => true,\n    'update:mode': (mode: string) => 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) : {}\n\n      return mode.inputs?.map(({ getValue, getColor, ...inputProps }) => {\n        return {\n          ...mode.inputProps,\n          ...inputProps,\n          disabled: props.disabled,\n          value: 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, target.value)))\n          },\n        }\n      })\n    })\n\n    useRender(() => (\n      <div\n        class=\"v-color-picker-edit\"\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"],"mappings":"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"}

package/lib/components/VColorPicker/VColorPickerEdit.sass

@@ -1,4 +1,3 @@
-@forward './variables'
 @use '../../styles/tools'
 @use './variables' as *
 

package/lib/components/VColorPicker/VColorPickerPreview.mjs

@@ -4,7 +4,7 @@ import "./VColorPickerPreview.css"; // Components
 
 import { VSlider } from "../VSlider/index.mjs"; // Utilities
 
-import { defineComponent, HSVAtoCSS } from "../../util/index.mjs";
+import { defineComponent, HSVAtoCSS, useRender } from "../../util/index.mjs";
 import { nullColor } from "./util/index.mjs"; // Types
 
 export const VColorPickerPreview = defineComponent({
@@ -24,7 +24,7 @@ export const VColorPickerPreview = defineComponent({
     let {
       emit
     } = _ref;
-    return () => {
+    useRender(() => {
       var _props$color, _props$color2, _props$color4;
 
       return _createVNode("div", {
@@ -76,7 +76,8 @@ export const VColorPickerPreview = defineComponent({
         "trackFillColor": "white",
         "hideDetails": true
       }, null)])]);
-    };
+    });
+    return {};
   }
 
 });