@vuetify/nightly 3.8.6-master.2025-05-24 → 3.8.6-master.2025-05-26

package/lib/components/VChip/VChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"VChip.js","names":["VExpandXTransition","VAvatar","VChipGroupSymbol","VDefaultsProvider","VIcon","makeBorderProps","useBorder","makeComponentProps","makeDensityProps","useDensity","makeElevationProps","useElevation","makeGroupItemProps","useGroupItem","IconValue","useLocale","useProxiedModel","makeRoundedProps","useRounded","makeRouterProps","useLink","makeSizeProps","useSize","makeTagProps","makeThemeProps","provideTheme","genOverlays","makeVariantProps","useVariant","Ripple","computed","toDisplayString","toRef","EventProp","genericComponent","propsFactory","makeVChipProps","activeClass","String","appendAvatar","appendIcon","baseColor","closable","Boolean","closeIcon","type","default","closeLabel","draggable","filter","filterIcon","label","link","undefined","pill","prependAvatar","prependIcon","ripple","Object","text","Number","modelValue","onClick","onClickOnce","tag","variant","VChip","name","directives","props","emits","e","value","val","click","setup","_ref","attrs","emit","slots","t","borderClasses","densityClasses","elevationClasses","roundedClasses","sizeClasses","themeClasses","isActive","group","isLink","isClickable","disabled","closeProps","preventDefault","stopPropagation","colorClasses","colorStyles","variantClasses","showColor","isSelected","color","navigate","toggle","onKeyDown","key","Tag","hasAppendMedia","hasAppend","append","hasClose","close","hasFilter","hasPrependMedia","hasPrepend","prepend","_withDirectives","_createVNode","_mergeProps","selectedClass","class","style","linkProps","icon","_vShow","_Fragment","image","start","select","end","size","_resolveDirective"],"sources":["../../../src/components/VChip/VChip.tsx"],"sourcesContent":["/* eslint-disable complexity */\n// Styles\nimport './VChip.sass'\n\n// Components\nimport { VExpandXTransition } from '@/components/transitions'\nimport { VAvatar } from '@/components/VAvatar'\nimport { VChipGroupSymbol } from '@/components/VChipGroup/VChipGroup'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeGroupItemProps, useGroupItem } from '@/composables/group'\nimport { IconValue } from '@/composables/icons'\nimport { useLocale } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\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 { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Utilities\nimport { computed, toDisplayString, toRef } from 'vue'\nimport { EventProp, genericComponent, propsFactory } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { RippleDirectiveBinding } from '@/directives/ripple'\n\nexport type VChipSlots = {\n  default: {\n    isSelected: boolean | undefined\n    selectedClass: boolean | (string | undefined)[] | undefined\n    select: ((value: boolean) => void) | undefined\n    toggle: (() => void) | undefined\n    value: unknown\n    disabled: boolean\n  }\n  label: never\n  prepend: never\n  append: never\n  close: never\n  filter: never\n}\n\nexport const makeVChipProps = propsFactory({\n  activeClass: String,\n  appendAvatar: String,\n  appendIcon: IconValue,\n  baseColor: String,\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: IconValue,\n    default: '$complete',\n  },\n  label: Boolean,\n  link: {\n    type: Boolean,\n    default: undefined,\n  },\n  pill: Boolean,\n  prependAvatar: String,\n  prependIcon: IconValue,\n  ripple: {\n    type: [Boolean, Object] as PropType<RippleDirectiveBinding['value']>,\n    default: true,\n  },\n  text: {\n    type: [String, Number, Boolean],\n    default: undefined,\n  },\n  modelValue: {\n    type: Boolean,\n    default: true,\n  },\n\n  onClick: EventProp<[MouseEvent]>(),\n  onClickOnce: EventProp<[MouseEvent]>(),\n\n  ...makeBorderProps(),\n  ...makeComponentProps(),\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}, 'VChip')\n\nexport const VChip = genericComponent<VChipSlots>()({\n  name: 'VChip',\n\n  directives: { Ripple },\n\n  props: makeVChipProps(),\n\n  emits: {\n    'click:close': (e: MouseEvent) => true,\n    'update:modelValue': (value: boolean) => true,\n    'group:selected': (val: { value: boolean }) => true,\n    click: (e: MouseEvent | KeyboardEvent) => true,\n  },\n\n  setup (props, { attrs, emit, slots }) {\n    const { t } = useLocale()\n    const { borderClasses } = useBorder(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    const isLink = toRef(() => props.link !== false && link.isLink.value)\n    const isClickable = computed(() =>\n      !props.disabled &&\n      props.link !== false &&\n      (!!group || props.link || link.isClickable.value)\n    )\n    const closeProps = toRef(() => ({\n      'aria-label': t(props.closeLabel),\n      onClick (e: MouseEvent) {\n        e.preventDefault()\n        e.stopPropagation()\n\n        isActive.value = false\n\n        emit('click:close', e)\n      },\n    }))\n\n    const { colorClasses, colorStyles, variantClasses } = useVariant(() => {\n      const showColor = !group || group.isSelected.value\n      return ({\n        color: showColor ? props.color ?? props.baseColor : props.baseColor,\n        variant: props.variant,\n      })\n    })\n\n    function onClick (e: MouseEvent) {\n      emit('click', e)\n\n      if (!isClickable.value) return\n\n      link.navigate?.(e)\n      group?.toggle()\n    }\n\n    function onKeyDown (e: KeyboardEvent) {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        onClick(e as any as MouseEvent)\n      }\n    }\n\n    return () => {\n      const Tag = (link.isLink.value) ? 'a' : props.tag\n      const hasAppendMedia = !!(props.appendIcon || props.appendAvatar)\n      const hasAppend = !!(hasAppendMedia || slots.append)\n      const hasClose = !!(slots.close || props.closable)\n      const hasFilter = !!(slots.filter || props.filter) && group\n      const hasPrependMedia = !!(props.prependIcon || props.prependAvatar)\n      const hasPrepend = !!(hasPrependMedia || slots.prepend)\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.value,\n              'v-chip--filter': hasFilter,\n              'v-chip--pill': props.pill,\n              [`${props.activeClass}`]: props.activeClass && link.isActive?.value,\n            },\n            themeClasses.value,\n            borderClasses.value,\n            colorClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n            sizeClasses.value,\n            variantClasses.value,\n            group?.selectedClass.value,\n            props.class,\n          ]}\n          style={[\n            colorStyles.value,\n            props.style,\n          ]}\n          disabled={ props.disabled || undefined }\n          draggable={ props.draggable }\n          tabindex={ isClickable.value ? 0 : undefined }\n          onClick={ onClick }\n          onKeydown={ isClickable.value && !isLink.value && onKeyDown }\n          v-ripple={[isClickable.value && props.ripple, null]}\n          { ...link.linkProps }\n        >\n          { genOverlays(isClickable.value, 'v-chip') }\n\n          { hasFilter && (\n            <VExpandXTransition key=\"filter\">\n              <div\n                class=\"v-chip__filter\"\n                v-show={ group.isSelected.value }\n              >\n                { !slots.filter ? (\n                  <VIcon\n                    key=\"filter-icon\"\n                    icon={ props.filterIcon }\n                  />\n                ) : (\n                  <VDefaultsProvider\n                    key=\"filter-defaults\"\n                    disabled={ !props.filterIcon }\n                    defaults={{\n                      VIcon: { icon: props.filterIcon },\n                    }}\n                    v-slots:default={ slots.filter }\n                  />\n                )}\n              </div>\n            </VExpandXTransition>\n          )}\n\n          { hasPrepend && (\n            <div key=\"prepend\" class=\"v-chip__prepend\">\n              { !slots.prepend ? (\n                <>\n                  { props.prependIcon && (\n                    <VIcon\n                      key=\"prepend-icon\"\n                      icon={ props.prependIcon }\n                      start\n                    />\n                  )}\n\n                  { props.prependAvatar && (\n                    <VAvatar\n                      key=\"prepend-avatar\"\n                      image={ props.prependAvatar }\n                      start\n                    />\n                  )}\n                </>\n              ) : (\n                <VDefaultsProvider\n                  key=\"prepend-defaults\"\n                  disabled={ !hasPrependMedia }\n                  defaults={{\n                    VAvatar: {\n                      image: props.prependAvatar,\n                      start: true,\n                    },\n                    VIcon: {\n                      icon: props.prependIcon,\n                      start: true,\n                    },\n                  }}\n                  v-slots:default={ slots.prepend }\n                />\n              )}\n            </div>\n          )}\n\n          <div class=\"v-chip__content\" data-no-activator=\"\">\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            }) ?? toDisplayString(props.text)}\n          </div>\n\n          { hasAppend && (\n            <div key=\"append\" class=\"v-chip__append\">\n              { !slots.append ? (\n                <>\n                  { props.appendIcon && (\n                    <VIcon\n                      key=\"append-icon\"\n                      end\n                      icon={ props.appendIcon }\n                    />\n                  )}\n\n                  { props.appendAvatar && (\n                    <VAvatar\n                      key=\"append-avatar\"\n                      end\n                      image={ props.appendAvatar }\n                    />\n                  )}\n                </>\n              ) : (\n                <VDefaultsProvider\n                  key=\"append-defaults\"\n                  disabled={ !hasAppendMedia }\n                  defaults={{\n                    VAvatar: {\n                      end: true,\n                      image: props.appendAvatar,\n                    },\n                    VIcon: {\n                      end: true,\n                      icon: props.appendIcon,\n                    },\n                  }}\n                  v-slots:default={ slots.append }\n                />\n              )}\n            </div>\n          )}\n\n          { hasClose && (\n            <button\n              key=\"close\"\n              class=\"v-chip__close\"\n              type=\"button\"\n              data-testid=\"close-chip\"\n              { ...closeProps.value }\n            >\n              { !slots.close ? (\n                <VIcon\n                  key=\"close-icon\"\n                  icon={ props.closeIcon }\n                  size=\"x-small\"\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"close-defaults\"\n                  defaults={{\n                    VIcon: {\n                      icon: props.closeIcon,\n                      size: 'x-small',\n                    },\n                  }}\n                  v-slots:default={ slots.close }\n                />\n              )}\n            </button>\n          )}\n        </Tag>\n      )\n    }\n  },\n})\n\nexport type VChip = InstanceType<typeof VChip>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VChip.js","names":["VExpandXTransition","VAvatar","VChipGroupSymbol","VDefaultsProvider","VIcon","makeBorderProps","useBorder","makeComponentProps","makeDensityProps","useDensity","makeElevationProps","useElevation","makeGroupItemProps","useGroupItem","IconValue","useLocale","useProxiedModel","makeRoundedProps","useRounded","makeRouterProps","useLink","makeSizeProps","useSize","makeTagProps","makeThemeProps","provideTheme","genOverlays","makeVariantProps","useVariant","vRipple","computed","toDisplayString","toRef","EventProp","genericComponent","propsFactory","makeVChipProps","activeClass","String","appendAvatar","appendIcon","baseColor","closable","Boolean","closeIcon","type","default","closeLabel","draggable","filter","filterIcon","label","link","undefined","pill","prependAvatar","prependIcon","ripple","Object","text","Number","modelValue","onClick","onClickOnce","tag","variant","VChip","name","directives","props","emits","e","value","val","click","setup","_ref","attrs","emit","slots","t","borderClasses","densityClasses","elevationClasses","roundedClasses","sizeClasses","themeClasses","isActive","group","isLink","isClickable","disabled","closeProps","preventDefault","stopPropagation","colorClasses","colorStyles","variantClasses","showColor","isSelected","color","navigate","toggle","onKeyDown","key","Tag","hasAppendMedia","hasAppend","append","hasClose","close","hasFilter","hasPrependMedia","hasPrepend","prepend","_withDirectives","_createVNode","_mergeProps","selectedClass","class","style","linkProps","_createElementVNode","icon","_vShow","_Fragment","image","start","select","end","size"],"sources":["../../../src/components/VChip/VChip.tsx"],"sourcesContent":["/* eslint-disable complexity */\n// Styles\nimport './VChip.sass'\n\n// Components\nimport { VExpandXTransition } from '@/components/transitions'\nimport { VAvatar } from '@/components/VAvatar'\nimport { VChipGroupSymbol } from '@/components/VChipGroup/VChipGroup'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeGroupItemProps, useGroupItem } from '@/composables/group'\nimport { IconValue } from '@/composables/icons'\nimport { useLocale } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\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 { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\n\n// Directives\nimport vRipple from '@/directives/ripple'\n\n// Utilities\nimport { computed, toDisplayString, toRef } from 'vue'\nimport { EventProp, genericComponent, propsFactory } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { RippleDirectiveBinding } from '@/directives/ripple'\n\nexport type VChipSlots = {\n  default: {\n    isSelected: boolean | undefined\n    selectedClass: boolean | (string | undefined)[] | undefined\n    select: ((value: boolean) => void) | undefined\n    toggle: (() => void) | undefined\n    value: unknown\n    disabled: boolean\n  }\n  label: never\n  prepend: never\n  append: never\n  close: never\n  filter: never\n}\n\nexport const makeVChipProps = propsFactory({\n  activeClass: String,\n  appendAvatar: String,\n  appendIcon: IconValue,\n  baseColor: String,\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: IconValue,\n    default: '$complete',\n  },\n  label: Boolean,\n  link: {\n    type: Boolean,\n    default: undefined,\n  },\n  pill: Boolean,\n  prependAvatar: String,\n  prependIcon: IconValue,\n  ripple: {\n    type: [Boolean, Object] as PropType<RippleDirectiveBinding['value']>,\n    default: true,\n  },\n  text: {\n    type: [String, Number, Boolean],\n    default: undefined,\n  },\n  modelValue: {\n    type: Boolean,\n    default: true,\n  },\n\n  onClick: EventProp<[MouseEvent]>(),\n  onClickOnce: EventProp<[MouseEvent]>(),\n\n  ...makeBorderProps(),\n  ...makeComponentProps(),\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}, 'VChip')\n\nexport const VChip = genericComponent<VChipSlots>()({\n  name: 'VChip',\n\n  directives: { vRipple },\n\n  props: makeVChipProps(),\n\n  emits: {\n    'click:close': (e: MouseEvent) => true,\n    'update:modelValue': (value: boolean) => true,\n    'group:selected': (val: { value: boolean }) => true,\n    click: (e: MouseEvent | KeyboardEvent) => true,\n  },\n\n  setup (props, { attrs, emit, slots }) {\n    const { t } = useLocale()\n    const { borderClasses } = useBorder(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    const isLink = toRef(() => props.link !== false && link.isLink.value)\n    const isClickable = computed(() =>\n      !props.disabled &&\n      props.link !== false &&\n      (!!group || props.link || link.isClickable.value)\n    )\n    const closeProps = toRef(() => ({\n      'aria-label': t(props.closeLabel),\n      onClick (e: MouseEvent) {\n        e.preventDefault()\n        e.stopPropagation()\n\n        isActive.value = false\n\n        emit('click:close', e)\n      },\n    }))\n\n    const { colorClasses, colorStyles, variantClasses } = useVariant(() => {\n      const showColor = !group || group.isSelected.value\n      return ({\n        color: showColor ? props.color ?? props.baseColor : props.baseColor,\n        variant: props.variant,\n      })\n    })\n\n    function onClick (e: MouseEvent) {\n      emit('click', e)\n\n      if (!isClickable.value) return\n\n      link.navigate?.(e)\n      group?.toggle()\n    }\n\n    function onKeyDown (e: KeyboardEvent) {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        onClick(e as any as MouseEvent)\n      }\n    }\n\n    return () => {\n      const Tag = (link.isLink.value) ? 'a' : props.tag\n      const hasAppendMedia = !!(props.appendIcon || props.appendAvatar)\n      const hasAppend = !!(hasAppendMedia || slots.append)\n      const hasClose = !!(slots.close || props.closable)\n      const hasFilter = !!(slots.filter || props.filter) && group\n      const hasPrependMedia = !!(props.prependIcon || props.prependAvatar)\n      const hasPrepend = !!(hasPrependMedia || slots.prepend)\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.value,\n              'v-chip--filter': hasFilter,\n              'v-chip--pill': props.pill,\n              [`${props.activeClass}`]: props.activeClass && link.isActive?.value,\n            },\n            themeClasses.value,\n            borderClasses.value,\n            colorClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n            sizeClasses.value,\n            variantClasses.value,\n            group?.selectedClass.value,\n            props.class,\n          ]}\n          style={[\n            colorStyles.value,\n            props.style,\n          ]}\n          disabled={ props.disabled || undefined }\n          draggable={ props.draggable }\n          tabindex={ isClickable.value ? 0 : undefined }\n          onClick={ onClick }\n          onKeydown={ isClickable.value && !isLink.value && onKeyDown }\n          v-ripple={[isClickable.value && props.ripple, null]}\n          { ...link.linkProps }\n        >\n          { genOverlays(isClickable.value, 'v-chip') }\n\n          { hasFilter && (\n            <VExpandXTransition key=\"filter\">\n              <div\n                class=\"v-chip__filter\"\n                v-show={ group.isSelected.value }\n              >\n                { !slots.filter ? (\n                  <VIcon\n                    key=\"filter-icon\"\n                    icon={ props.filterIcon }\n                  />\n                ) : (\n                  <VDefaultsProvider\n                    key=\"filter-defaults\"\n                    disabled={ !props.filterIcon }\n                    defaults={{\n                      VIcon: { icon: props.filterIcon },\n                    }}\n                    v-slots:default={ slots.filter }\n                  />\n                )}\n              </div>\n            </VExpandXTransition>\n          )}\n\n          { hasPrepend && (\n            <div key=\"prepend\" class=\"v-chip__prepend\">\n              { !slots.prepend ? (\n                <>\n                  { props.prependIcon && (\n                    <VIcon\n                      key=\"prepend-icon\"\n                      icon={ props.prependIcon }\n                      start\n                    />\n                  )}\n\n                  { props.prependAvatar && (\n                    <VAvatar\n                      key=\"prepend-avatar\"\n                      image={ props.prependAvatar }\n                      start\n                    />\n                  )}\n                </>\n              ) : (\n                <VDefaultsProvider\n                  key=\"prepend-defaults\"\n                  disabled={ !hasPrependMedia }\n                  defaults={{\n                    VAvatar: {\n                      image: props.prependAvatar,\n                      start: true,\n                    },\n                    VIcon: {\n                      icon: props.prependIcon,\n                      start: true,\n                    },\n                  }}\n                  v-slots:default={ slots.prepend }\n                />\n              )}\n            </div>\n          )}\n\n          <div class=\"v-chip__content\" data-no-activator=\"\">\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            }) ?? toDisplayString(props.text)}\n          </div>\n\n          { hasAppend && (\n            <div key=\"append\" class=\"v-chip__append\">\n              { !slots.append ? (\n                <>\n                  { props.appendIcon && (\n                    <VIcon\n                      key=\"append-icon\"\n                      end\n                      icon={ props.appendIcon }\n                    />\n                  )}\n\n                  { props.appendAvatar && (\n                    <VAvatar\n                      key=\"append-avatar\"\n                      end\n                      image={ props.appendAvatar }\n                    />\n                  )}\n                </>\n              ) : (\n                <VDefaultsProvider\n                  key=\"append-defaults\"\n                  disabled={ !hasAppendMedia }\n                  defaults={{\n                    VAvatar: {\n                      end: true,\n                      image: props.appendAvatar,\n                    },\n                    VIcon: {\n                      end: true,\n                      icon: props.appendIcon,\n                    },\n                  }}\n                  v-slots:default={ slots.append }\n                />\n              )}\n            </div>\n          )}\n\n          { hasClose && (\n            <button\n              key=\"close\"\n              class=\"v-chip__close\"\n              type=\"button\"\n              data-testid=\"close-chip\"\n              { ...closeProps.value }\n            >\n              { !slots.close ? (\n                <VIcon\n                  key=\"close-icon\"\n                  icon={ props.closeIcon }\n                  size=\"x-small\"\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"close-defaults\"\n                  defaults={{\n                    VIcon: {\n                      icon: props.closeIcon,\n                      size: 'x-small',\n                    },\n                  }}\n                  v-slots:default={ slots.close }\n                />\n              )}\n            </button>\n          )}\n        </Tag>\n      )\n    }\n  },\n})\n\nexport type VChip = InstanceType<typeof VChip>\n"],"mappings":";AAAA;AACA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,OAAO;AAAA,SACPC,gBAAgB;AAAA,SAChBC,iBAAiB;AAAA,SACjBC,KAAK,6BAEd;AAAA,SACSC,eAAe,EAAEC,SAAS;AAAA,SAC1BC,kBAAkB;AAAA,SAClBC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,SAAS;AAAA,SACTC,SAAS;AAAA,SACTC,eAAe;AAAA,SACfC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,eAAe,EAAEC,OAAO;AAAA,SACxBC,aAAa,EAAEC,OAAO;AAAA,SACtBC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY;AAAA,SAC5BC,WAAW,EAAEC,gBAAgB,EAAEC,UAAU,wCAElD;AAAA,OACOC,OAAO,0CAEd;AACA,SAASC,QAAQ,EAAEC,eAAe,EAAEC,KAAK,QAAQ,KAAK;AAAA,SAC7CC,SAAS,EAAEC,gBAAgB,EAAEC,YAAY,+BAElD;AAoBA,OAAO,MAAMC,cAAc,GAAGD,YAAY,CAAC;EACzCE,WAAW,EAAEC,MAAM;EACnBC,YAAY,EAAED,MAAM;EACpBE,UAAU,EAAE1B,SAAS;EACrB2B,SAAS,EAAEH,MAAM;EACjBI,QAAQ,EAAEC,OAAO;EACjBC,SAAS,EAAE;IACTC,IAAI,EAAE/B,SAAS;IACfgC,OAAO,EAAE;EACX,CAAC;EACDC,UAAU,EAAE;IACVF,IAAI,EAAEP,MAAM;IACZQ,OAAO,EAAE;EACX,CAAC;EACDE,SAAS,EAAEL,OAAO;EAClBM,MAAM,EAAEN,OAAO;EACfO,UAAU,EAAE;IACVL,IAAI,EAAE/B,SAAS;IACfgC,OAAO,EAAE;EACX,CAAC;EACDK,KAAK,EAAER,OAAO;EACdS,IAAI,EAAE;IACJP,IAAI,EAAEF,OAAO;IACbG,OAAO,EAAEO;EACX,CAAC;EACDC,IAAI,EAAEX,OAAO;EACbY,aAAa,EAAEjB,MAAM;EACrBkB,WAAW,EAAE1C,SAAS;EACtB2C,MAAM,EAAE;IACNZ,IAAI,EAAE,CAACF,OAAO,EAAEe,MAAM,CAA8C;IACpEZ,OAAO,EAAE;EACX,CAAC;EACDa,IAAI,EAAE;IACJd,IAAI,EAAE,CAACP,MAAM,EAAEsB,MAAM,EAAEjB,OAAO,CAAC;IAC/BG,OAAO,EAAEO;EACX,CAAC;EACDQ,UAAU,EAAE;IACVhB,IAAI,EAAEF,OAAO;IACbG,OAAO,EAAE;EACX,CAAC;EAEDgB,OAAO,EAAE7B,SAAS,CAAe,CAAC;EAClC8B,WAAW,EAAE9B,SAAS,CAAe,CAAC;EAEtC,GAAG5B,eAAe,CAAC,CAAC;EACpB,GAAGE,kBAAkB,CAAC,CAAC;EACvB,GAAGC,gBAAgB,CAAC,CAAC;EACrB,GAAGE,kBAAkB,CAAC,CAAC;EACvB,GAAGE,kBAAkB,CAAC,CAAC;EACvB,GAAGK,gBAAgB,CAAC,CAAC;EACrB,GAAGE,eAAe,CAAC,CAAC;EACpB,GAAGE,aAAa,CAAC,CAAC;EAClB,GAAGE,YAAY,CAAC;IAAEyC,GAAG,EAAE;EAAO,CAAC,CAAC;EAChC,GAAGxC,cAAc,CAAC,CAAC;EACnB,GAAGG,gBAAgB,CAAC;IAAEsC,OAAO,EAAE;EAAQ,CAAU;AACnD,CAAC,EAAE,OAAO,CAAC;AAEX,OAAO,MAAMC,KAAK,GAAGhC,gBAAgB,CAAa,CAAC,CAAC;EAClDiC,IAAI,EAAE,OAAO;EAEbC,UAAU,EAAE;IAAEvC;EAAQ,CAAC;EAEvBwC,KAAK,EAAEjC,cAAc,CAAC,CAAC;EAEvBkC,KAAK,EAAE;IACL,aAAa,EAAGC,CAAa,IAAK,IAAI;IACtC,mBAAmB,EAAGC,KAAc,IAAK,IAAI;IAC7C,gBAAgB,EAAGC,GAAuB,IAAK,IAAI;IACnDC,KAAK,EAAGH,CAA6B,IAAK;EAC5C,CAAC;EAEDI,KAAKA,CAAEN,KAAK,EAAAO,IAAA,EAA0B;IAAA,IAAxB;MAAEC,KAAK;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAH,IAAA;IAClC,MAAM;MAAEI;IAAE,CAAC,GAAGjE,SAAS,CAAC,CAAC;IACzB,MAAM;MAAEkE;IAAc,CAAC,GAAG3E,SAAS,CAAC+D,KAAK,CAAC;IAC1C,MAAM;MAAEa;IAAe,CAAC,GAAGzE,UAAU,CAAC4D,KAAK,CAAC;IAC5C,MAAM;MAAEc;IAAiB,CAAC,GAAGxE,YAAY,CAAC0D,KAAK,CAAC;IAChD,MAAM;MAAEe;IAAe,CAAC,GAAGlE,UAAU,CAACmD,KAAK,CAAC;IAC5C,MAAM;MAAEgB;IAAY,CAAC,GAAG/D,OAAO,CAAC+C,KAAK,CAAC;IACtC,MAAM;MAAEiB;IAAa,CAAC,GAAG7D,YAAY,CAAC4C,KAAK,CAAC;IAE5C,MAAMkB,QAAQ,GAAGvE,eAAe,CAACqD,KAAK,EAAE,YAAY,CAAC;IACrD,MAAMmB,KAAK,GAAG3E,YAAY,CAACwD,KAAK,EAAEnE,gBAAgB,EAAE,KAAK,CAAC;IAC1D,MAAMkD,IAAI,GAAGhC,OAAO,CAACiD,KAAK,EAAEQ,KAAK,CAAC;IAClC,MAAMY,MAAM,GAAGzD,KAAK,CAAC,MAAMqC,KAAK,CAACjB,IAAI,KAAK,KAAK,IAAIA,IAAI,CAACqC,MAAM,CAACjB,KAAK,CAAC;IACrE,MAAMkB,WAAW,GAAG5D,QAAQ,CAAC,MAC3B,CAACuC,KAAK,CAACsB,QAAQ,IACftB,KAAK,CAACjB,IAAI,KAAK,KAAK,KACnB,CAAC,CAACoC,KAAK,IAAInB,KAAK,CAACjB,IAAI,IAAIA,IAAI,CAACsC,WAAW,CAAClB,KAAK,CAClD,CAAC;IACD,MAAMoB,UAAU,GAAG5D,KAAK,CAAC,OAAO;MAC9B,YAAY,EAAEgD,CAAC,CAACX,KAAK,CAACtB,UAAU,CAAC;MACjCe,OAAOA,CAAES,CAAa,EAAE;QACtBA,CAAC,CAACsB,cAAc,CAAC,CAAC;QAClBtB,CAAC,CAACuB,eAAe,CAAC,CAAC;QAEnBP,QAAQ,CAACf,KAAK,GAAG,KAAK;QAEtBM,IAAI,CAAC,aAAa,EAAEP,CAAC,CAAC;MACxB;IACF,CAAC,CAAC,CAAC;IAEH,MAAM;MAAEwB,YAAY;MAAEC,WAAW;MAAEC;IAAe,CAAC,GAAGrE,UAAU,CAAC,MAAM;MACrE,MAAMsE,SAAS,GAAG,CAACV,KAAK,IAAIA,KAAK,CAACW,UAAU,CAAC3B,KAAK;MAClD,OAAQ;QACN4B,KAAK,EAAEF,SAAS,GAAG7B,KAAK,CAAC+B,KAAK,IAAI/B,KAAK,CAAC5B,SAAS,GAAG4B,KAAK,CAAC5B,SAAS;QACnEwB,OAAO,EAAEI,KAAK,CAACJ;MACjB,CAAC;IACH,CAAC,CAAC;IAEF,SAASH,OAAOA,CAAES,CAAa,EAAE;MAC/BO,IAAI,CAAC,OAAO,EAAEP,CAAC,CAAC;MAEhB,IAAI,CAACmB,WAAW,CAAClB,KAAK,EAAE;MAExBpB,IAAI,CAACiD,QAAQ,GAAG9B,CAAC,CAAC;MAClBiB,KAAK,EAAEc,MAAM,CAAC,CAAC;IACjB;IAEA,SAASC,SAASA,CAAEhC,CAAgB,EAAE;MACpC,IAAIA,CAAC,CAACiC,GAAG,KAAK,OAAO,IAAIjC,CAAC,CAACiC,GAAG,KAAK,GAAG,EAAE;QACtCjC,CAAC,CAACsB,cAAc,CAAC,CAAC;QAClB/B,OAAO,CAACS,CAAsB,CAAC;MACjC;IACF;IAEA,OAAO,MAAM;MACX,MAAMkC,GAAG,GAAIrD,IAAI,CAACqC,MAAM,CAACjB,KAAK,GAAI,GAAG,GAAGH,KAAK,CAACL,GAAG;MACjD,MAAM0C,cAAc,GAAG,CAAC,EAAErC,KAAK,CAAC7B,UAAU,IAAI6B,KAAK,CAAC9B,YAAY,CAAC;MACjE,MAAMoE,SAAS,GAAG,CAAC,EAAED,cAAc,IAAI3B,KAAK,CAAC6B,MAAM,CAAC;MACpD,MAAMC,QAAQ,GAAG,CAAC,EAAE9B,KAAK,CAAC+B,KAAK,IAAIzC,KAAK,CAAC3B,QAAQ,CAAC;MAClD,MAAMqE,SAAS,GAAG,CAAC,EAAEhC,KAAK,CAAC9B,MAAM,IAAIoB,KAAK,CAACpB,MAAM,CAAC,IAAIuC,KAAK;MAC3D,MAAMwB,eAAe,GAAG,CAAC,EAAE3C,KAAK,CAACb,WAAW,IAAIa,KAAK,CAACd,aAAa,CAAC;MACpE,MAAM0D,UAAU,GAAG,CAAC,EAAED,eAAe,IAAIjC,KAAK,CAACmC,OAAO,CAAC;MAEvD,OAAO3B,QAAQ,CAACf,KAAK,IAAA2C,eAAA,CAAAC,YAAA,CAAAX,GAAA,EAAAY,WAAA;QAAA,SAEV,CACL,QAAQ,EACR;UACE,kBAAkB,EAAEhD,KAAK,CAACsB,QAAQ;UAClC,eAAe,EAAEtB,KAAK,CAAClB,KAAK;UAC5B,cAAc,EAAEuC,WAAW,CAAClB,KAAK;UACjC,gBAAgB,EAAEuC,SAAS;UAC3B,cAAc,EAAE1C,KAAK,CAACf,IAAI;UAC1B,CAAC,GAAGe,KAAK,CAAChC,WAAW,EAAE,GAAGgC,KAAK,CAAChC,WAAW,IAAIe,IAAI,CAACmC,QAAQ,EAAEf;QAChE,CAAC,EACDc,YAAY,CAACd,KAAK,EAClBS,aAAa,CAACT,KAAK,EACnBuB,YAAY,CAACvB,KAAK,EAClBU,cAAc,CAACV,KAAK,EACpBW,gBAAgB,CAACX,KAAK,EACtBY,cAAc,CAACZ,KAAK,EACpBa,WAAW,CAACb,KAAK,EACjByB,cAAc,CAACzB,KAAK,EACpBgB,KAAK,EAAE8B,aAAa,CAAC9C,KAAK,EAC1BH,KAAK,CAACkD,KAAK,CACZ;QAAA,SACM,CACLvB,WAAW,CAACxB,KAAK,EACjBH,KAAK,CAACmD,KAAK,CACZ;QAAA,YACUnD,KAAK,CAACsB,QAAQ,IAAItC,SAAS;QAAA,aAC1BgB,KAAK,CAACrB,SAAS;QAAA,YAChB0C,WAAW,CAAClB,KAAK,GAAG,CAAC,GAAGnB,SAAS;QAAA,WAClCS,OAAO;QAAA,aACL4B,WAAW,CAAClB,KAAK,IAAI,CAACiB,MAAM,CAACjB,KAAK,IAAI+B;MAAS,GAEtDnD,IAAI,CAACqE,SAAS;QAAA3E,OAAA,EAAAA,CAAA,MAEjBpB,WAAW,CAACgE,WAAW,CAAClB,KAAK,EAAE,QAAQ,CAAC,EAExCuC,SAAS,IAAAK,YAAA,CAAApH,kBAAA;UAAA;QAAA;UAAA8C,OAAA,EAAAA,CAAA,MAAAqE,eAAA,CAAAO,mBAAA;YAAA;UAAA,IAMH,CAAC3C,KAAK,CAAC9B,MAAM,GAAAmE,YAAA,CAAAhH,KAAA;YAAA;YAAA,QAGJiE,KAAK,CAACnB;UAAU,WAAAkE,YAAA,CAAAjH,iBAAA;YAAA;YAAA,YAKZ,CAACkE,KAAK,CAACnB,UAAU;YAAA,YAClB;cACR9C,KAAK,EAAE;gBAAEuH,IAAI,EAAEtD,KAAK,CAACnB;cAAW;YAClC;UAAC,GACiB6B,KAAK,CAAC9B,MAAM,CAEjC,MAAA2E,MAAA,EAhBQpC,KAAK,CAACW,UAAU,CAAC3B,KAAK;QAAA,EAmBpC,EAECyC,UAAU,IAAAS,mBAAA;UAAA;UAAA;QAAA,IAEN,CAAC3C,KAAK,CAACmC,OAAO,GAAAQ,mBAAA,CAAAG,SAAA,SAEVxD,KAAK,CAACb,WAAW,IAAA4D,YAAA,CAAAhH,KAAA;UAAA;UAAA,QAGRiE,KAAK,CAACb,WAAW;UAAA;QAAA,QAG3B,EAECa,KAAK,CAACd,aAAa,IAAA6D,YAAA,CAAAnH,OAAA;UAAA;UAAA,SAGToE,KAAK,CAACd,aAAa;UAAA;QAAA,QAG9B,KAAA6D,YAAA,CAAAjH,iBAAA;UAAA;UAAA,YAKU,CAAC6G,eAAe;UAAA,YACjB;YACR/G,OAAO,EAAE;cACP6H,KAAK,EAAEzD,KAAK,CAACd,aAAa;cAC1BwE,KAAK,EAAE;YACT,CAAC;YACD3H,KAAK,EAAE;cACLuH,IAAI,EAAEtD,KAAK,CAACb,WAAW;cACvBuE,KAAK,EAAE;YACT;UACF;QAAC,GACiBhD,KAAK,CAACmC,OAAO,CAElC,EAEJ,EAAAQ,mBAAA;UAAA;UAAA;QAAA,IAGG3C,KAAK,CAACjC,OAAO,GAAG;UAChBqD,UAAU,EAAEX,KAAK,EAAEW,UAAU,CAAC3B,KAAK;UACnC8C,aAAa,EAAE9B,KAAK,EAAE8B,aAAa,CAAC9C,KAAK;UACzCwD,MAAM,EAAExC,KAAK,EAAEwC,MAAM;UACrB1B,MAAM,EAAEd,KAAK,EAAEc,MAAM;UACrB9B,KAAK,EAAEgB,KAAK,EAAEhB,KAAK,CAACA,KAAK;UACzBmB,QAAQ,EAAEtB,KAAK,CAACsB;QAClB,CAAC,CAAC,IAAI5D,eAAe,CAACsC,KAAK,CAACV,IAAI,CAAC,IAGjCgD,SAAS,IAAAe,mBAAA;UAAA;UAAA;QAAA,IAEL,CAAC3C,KAAK,CAAC6B,MAAM,GAAAc,mBAAA,CAAAG,SAAA,SAETxD,KAAK,CAAC7B,UAAU,IAAA4E,YAAA,CAAAhH,KAAA;UAAA;UAAA;UAAA,QAIPiE,KAAK,CAAC7B;QAAU,QAE1B,EAEC6B,KAAK,CAAC9B,YAAY,IAAA6E,YAAA,CAAAnH,OAAA;UAAA;UAAA;UAAA,SAIRoE,KAAK,CAAC9B;QAAY,QAE7B,KAAA6E,YAAA,CAAAjH,iBAAA;UAAA;UAAA,YAKU,CAACuG,cAAc;UAAA,YAChB;YACRzG,OAAO,EAAE;cACPgI,GAAG,EAAE,IAAI;cACTH,KAAK,EAAEzD,KAAK,CAAC9B;YACf,CAAC;YACDnC,KAAK,EAAE;cACL6H,GAAG,EAAE,IAAI;cACTN,IAAI,EAAEtD,KAAK,CAAC7B;YACd;UACF;QAAC,GACiBuC,KAAK,CAAC6B,MAAM,CAEjC,EAEJ,EAECC,QAAQ,IAAAa,mBAAA,WAAAL,WAAA;UAAA;UAAA;UAAA;UAAA;QAAA,GAMDzB,UAAU,CAACpB,KAAK,IAEnB,CAACO,KAAK,CAAC+B,KAAK,GAAAM,YAAA,CAAAhH,KAAA;UAAA;UAAA,QAGHiE,KAAK,CAACzB,SAAS;UAAA;QAAA,WAAAwE,YAAA,CAAAjH,iBAAA;UAAA;UAAA,YAMZ;YACRC,KAAK,EAAE;cACLuH,IAAI,EAAEtD,KAAK,CAACzB,SAAS;cACrBsF,IAAI,EAAE;YACR;UACF;QAAC,GACiBnD,KAAK,CAAC+B,KAAK,CAEhC,EAEJ;MAAA,MAAAjF,OAAA,EApJU6D,WAAW,CAAClB,KAAK,IAAIH,KAAK,CAACZ,MAAM,EAAE,IAAI,GAsJrD;IACH,CAAC;EACH;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/components/VColorPicker/VColorPicker.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { Fragment as _Fragment, createVNode as _createVNode, createElementVNode as _createElementVNode, mergeProps as _mergeProps } from "vue";
 // Styles
 import "./VColorPicker.css";
 
@@ -125,7 +125,7 @@ export const VColorPicker = defineComponent({
         }, props.style]
       }), {
         ...slots,
-        default: () => _createVNode(_Fragment, null, [!props.hideCanvas && _createVNode(VColorPickerCanvas, {
+        default: () => _createElementVNode(_Fragment, null, [!props.hideCanvas && _createVNode(VColorPickerCanvas, {
           "key": "canvas",
           "color": currentColor.value,
           "onUpdate:color": updateColor,
@@ -133,7 +133,7 @@ export const VColorPicker = defineComponent({
           "dotSize": props.dotSize,
           "width": props.width,
           "height": props.canvasHeight
-        }, null), (!props.hideSliders || !props.hideInputs) && _createVNode("div", {
+        }, null), (!props.hideSliders || !props.hideInputs) && _createElementVNode("div", {
           "key": "controls",
           "class": "v-color-picker__controls"
         }, [!props.hideSliders && _createVNode(VColorPickerPreview, {

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

@@ -1 +1 @@
-{"version":3,"file":"VColorPicker.js","names":["VColorPickerCanvas","VColorPickerEdit","VColorPickerPreview","VColorPickerSwatches","makeVPickerProps","VPicker","useRtl","provideDefaults","useProxiedModel","computed","onBeforeMount","ref","watch","extractColor","modes","nullColor","consoleWarn","defineComponent","HSVtoCSS","parseColor","propsFactory","RGBtoHSV","useRender","makeVColorPickerProps","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","hideHeader","VColorPicker","name","props","emits","color","setup","_ref","slots","hue","model","undefined","c","err","currentColor","value","h","rtlClasses","externalChange","immediate","updateColor","hsva","VSlider","trackColor","trackFillColor","pickerProps","filterProps","_createVNode","_mergeProps","class","a","style","_Fragment","width","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 { makeVPickerProps, VPicker } from '@/labs/VPicker/VPicker'\n\n// Composables\nimport { useRtl } from '@/composables'\nimport { provideDefaults } from '@/composables/defaults'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, onBeforeMount, ref, watch } from 'vue'\nimport { extractColor, modes, nullColor } from './util'\nimport { consoleWarn, defineComponent, HSVtoCSS, parseColor, propsFactory, RGBtoHSV, useRender } from '@/util'\n\n// Types\nimport type { DeepReadonly, PropType } from 'vue'\nimport type { Color, HSV } from '@/util'\n\nexport const makeVColorPickerProps = propsFactory({\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 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  showSwatches: Boolean,\n  swatches: Array as PropType<DeepReadonly<Color[][]>>,\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\n  ...makeVPickerProps({ hideHeader: true }),\n}, 'VColorPicker')\n\nexport const VColorPicker = defineComponent({\n  name: 'VColorPicker',\n\n  props: makeVColorPickerProps(),\n\n  emits: {\n    'update:modelValue': (color: any) => true,\n    'update:mode': (mode: keyof typeof modes) => true,\n  },\n\n  setup (props, { slots }) {\n    const mode = useProxiedModel(props, 'mode')\n    const hue = ref<number | null>(null)\n    const model = useProxiedModel(\n      props,\n      'modelValue',\n      undefined,\n      v => {\n        if (v == null || v === '') return null\n\n        let c: HSV\n        try {\n          c = RGBtoHSV(parseColor(v as any))\n        } catch (err) {\n          consoleWarn(err as any)\n          return null\n        }\n\n        return c\n      },\n      v => {\n        if (!v) return null\n\n        return extractColor(v, props.modelValue)\n      }\n    )\n    const currentColor = computed(() => {\n      return model.value\n        ? { ...model.value, h: hue.value ?? model.value.h }\n        : null\n    })\n    const { rtlClasses } = useRtl()\n\n    let externalChange = true\n    watch(model, v => {\n      if (!externalChange) {\n        // prevent hue shift from rgb conversion inaccuracy\n        externalChange = true\n        return\n      }\n      if (!v) return\n      hue.value = v.h\n    }, { immediate: true })\n\n    const updateColor = (hsva: HSV) => {\n      externalChange = false\n      hue.value = hsva.h\n      model.value = hsva\n    }\n\n    onBeforeMount(() => {\n      if (!props.modes.includes(mode.value)) mode.value = props.modes[0]\n    })\n\n    provideDefaults({\n      VSlider: {\n        color: undefined,\n        trackColor: undefined,\n        trackFillColor: undefined,\n      },\n    })\n\n    useRender(() => {\n      const pickerProps = VPicker.filterProps(props)\n\n      return (\n        <VPicker\n          { ...pickerProps }\n          class={[\n            'v-color-picker',\n            rtlClasses.value,\n            props.class,\n          ]}\n          style={[\n            {\n              '--v-color-picker-color-hsv': HSVtoCSS({ ...(currentColor.value ?? nullColor), a: 1 }),\n            },\n            props.style,\n          ]}\n          v-slots={{\n            ...slots,\n            default: () => (\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              </>\n            ),\n          }}\n        />\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VColorPicker = InstanceType<typeof VColorPicker>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VColorPicker.js","names":["VColorPickerCanvas","VColorPickerEdit","VColorPickerPreview","VColorPickerSwatches","makeVPickerProps","VPicker","useRtl","provideDefaults","useProxiedModel","computed","onBeforeMount","ref","watch","extractColor","modes","nullColor","consoleWarn","defineComponent","HSVtoCSS","parseColor","propsFactory","RGBtoHSV","useRender","makeVColorPickerProps","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","hideHeader","VColorPicker","name","props","emits","color","setup","_ref","slots","hue","model","undefined","c","err","currentColor","value","h","rtlClasses","externalChange","immediate","updateColor","hsva","VSlider","trackColor","trackFillColor","pickerProps","filterProps","_createVNode","_mergeProps","class","a","style","_createElementVNode","_Fragment","width","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 { makeVPickerProps, VPicker } from '@/labs/VPicker/VPicker'\n\n// Composables\nimport { useRtl } from '@/composables'\nimport { provideDefaults } from '@/composables/defaults'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, onBeforeMount, ref, watch } from 'vue'\nimport { extractColor, modes, nullColor } from './util'\nimport { consoleWarn, defineComponent, HSVtoCSS, parseColor, propsFactory, RGBtoHSV, useRender } from '@/util'\n\n// Types\nimport type { DeepReadonly, PropType } from 'vue'\nimport type { Color, HSV } from '@/util'\n\nexport const makeVColorPickerProps = propsFactory({\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 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  showSwatches: Boolean,\n  swatches: Array as PropType<DeepReadonly<Color[][]>>,\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\n  ...makeVPickerProps({ hideHeader: true }),\n}, 'VColorPicker')\n\nexport const VColorPicker = defineComponent({\n  name: 'VColorPicker',\n\n  props: makeVColorPickerProps(),\n\n  emits: {\n    'update:modelValue': (color: any) => true,\n    'update:mode': (mode: keyof typeof modes) => true,\n  },\n\n  setup (props, { slots }) {\n    const mode = useProxiedModel(props, 'mode')\n    const hue = ref<number | null>(null)\n    const model = useProxiedModel(\n      props,\n      'modelValue',\n      undefined,\n      v => {\n        if (v == null || v === '') return null\n\n        let c: HSV\n        try {\n          c = RGBtoHSV(parseColor(v as any))\n        } catch (err) {\n          consoleWarn(err as any)\n          return null\n        }\n\n        return c\n      },\n      v => {\n        if (!v) return null\n\n        return extractColor(v, props.modelValue)\n      }\n    )\n    const currentColor = computed(() => {\n      return model.value\n        ? { ...model.value, h: hue.value ?? model.value.h }\n        : null\n    })\n    const { rtlClasses } = useRtl()\n\n    let externalChange = true\n    watch(model, v => {\n      if (!externalChange) {\n        // prevent hue shift from rgb conversion inaccuracy\n        externalChange = true\n        return\n      }\n      if (!v) return\n      hue.value = v.h\n    }, { immediate: true })\n\n    const updateColor = (hsva: HSV) => {\n      externalChange = false\n      hue.value = hsva.h\n      model.value = hsva\n    }\n\n    onBeforeMount(() => {\n      if (!props.modes.includes(mode.value)) mode.value = props.modes[0]\n    })\n\n    provideDefaults({\n      VSlider: {\n        color: undefined,\n        trackColor: undefined,\n        trackFillColor: undefined,\n      },\n    })\n\n    useRender(() => {\n      const pickerProps = VPicker.filterProps(props)\n\n      return (\n        <VPicker\n          { ...pickerProps }\n          class={[\n            'v-color-picker',\n            rtlClasses.value,\n            props.class,\n          ]}\n          style={[\n            {\n              '--v-color-picker-color-hsv': HSVtoCSS({ ...(currentColor.value ?? nullColor), a: 1 }),\n            },\n            props.style,\n          ]}\n          v-slots={{\n            ...slots,\n            default: () => (\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              </>\n            ),\n          }}\n        />\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VColorPicker = InstanceType<typeof VColorPicker>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VColorPicker/VColorPickerCanvas.js

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode } from "vue";
+import { createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
 // Styles
 import "./VColorPickerCanvas.css";
 
@@ -166,21 +166,21 @@ export const VColorPickerCanvas = defineComponent({
       immediate: true
     });
     onMounted(() => updateCanvas());
-    useRender(() => _createVNode("div", {
+    useRender(() => _createElementVNode("div", {
       "ref": resizeRef,
-      "class": ['v-color-picker-canvas', props.class],
-      "style": props.style,
+      "class": _normalizeClass(['v-color-picker-canvas', props.class]),
+      "style": _normalizeStyle(props.style),
       "onMousedown": handleMouseDown,
       "onTouchstartPassive": handleMouseDown
-    }, [_createVNode("canvas", {
+    }, [_createElementVNode("canvas", {
       "ref": canvasRef,
       "width": canvasWidth.value,
       "height": canvasHeight.value
-    }, null), props.color && _createVNode("div", {
-      "class": ['v-color-picker-canvas__dot', {
+    }, null), props.color && _createElementVNode("div", {
+      "class": _normalizeClass(['v-color-picker-canvas__dot', {
         'v-color-picker-canvas__dot--disabled': props.disabled
-      }],
-      "style": dotStyles.value
+      }]),
+      "style": _normalizeStyle(dotStyles.value)
     }, null)]));
     return {};
   }

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

@@ -1 +1 @@
-{"version":3,"file":"VColorPickerCanvas.js","names":["makeComponentProps","useResizeObserver","computed","onMounted","ref","shallowRef","watch","clamp","convertToUnit","defineComponent","getEventCoordinates","propsFactory","useRender","makeVColorPickerCanvasProps","color","type","Object","disabled","Boolean","dotSize","Number","String","default","height","width","VColorPickerCanvas","name","props","emits","hue","setup","_ref","emit","isInteracting","canvasRef","canvasWidth","parseFloat","canvasHeight","_dotPosition","x","y","dotPosition","get","value","set","val","h","s","v","a","dotStyles","radius","parseInt","transform","resizeRef","entries","el","offsetParent","contentRect","updateDotPosition","rect","left","top","handleMouseDown","e","preventDefault","handleMouseMove","window","addEventListener","handleMouseUp","coords","clientX","clientY","getBoundingClientRect","removeEventListener","updateCanvas","canvas","ctx","getContext","saturationGradient","createLinearGradient","addColorStop","fillStyle","fillRect","valueGradient","immediate","newVal","oldVal","flush","deep","_createVNode","class","style"],"sources":["../../../src/components/VColorPicker/VColorPickerCanvas.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerCanvas.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { useResizeObserver } from '@/composables/resizeObserver'\n\n// Utilities\nimport { computed, onMounted, ref, shallowRef, watch } from 'vue'\nimport { clamp, convertToUnit, defineComponent, getEventCoordinates, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSV } from '@/util'\n\nexport const makeVColorPickerCanvasProps = propsFactory({\n  color: {\n    type: Object as PropType<HSV | 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  ...makeComponentProps(),\n}, 'VColorPickerCanvas')\n\nexport const VColorPickerCanvas = defineComponent({\n  name: 'VColorPickerCanvas',\n\n  props: makeVColorPickerCanvasProps(),\n\n  emits: {\n    'update:color': (color: HSV) => true,\n    'update:position': (hue: any) => true,\n  },\n\n  setup (props, { emit }) {\n    const isInteracting = shallowRef(false)\n    const canvasRef = ref<HTMLCanvasElement | null>()\n    const canvasWidth = shallowRef(parseFloat(props.width))\n    const canvasHeight = shallowRef(parseFloat(props.height))\n\n    const _dotPosition = ref({ x: 0, y: 0 })\n    const dotPosition = computed({\n      get: () => _dotPosition.value,\n      set (val) {\n        if (!canvasRef.value) return\n\n        const { x, y } = val\n        _dotPosition.value = val\n\n        emit('update:color', {\n          h: props.color?.h ?? 0,\n          s: clamp(x, 0, canvasWidth.value) / canvasWidth.value,\n          v: 1 - clamp(y, 0, canvasHeight.value) / canvasHeight.value,\n          a: props.color?.a ?? 1,\n        })\n      },\n    })\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 { resizeRef } = useResizeObserver(entries => {\n      if (!resizeRef.el?.offsetParent) return\n\n      const { width, height } = entries[0].contentRect\n\n      canvasWidth.value = width\n      canvasHeight.value = height\n    })\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 handleMouseDown (e: MouseEvent | TouchEvent) {\n      if (e.type === 'mousedown') {\n        // Prevent text selection while dragging\n        e.preventDefault()\n      }\n\n      if (props.disabled) return\n\n      handleMouseMove(e)\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    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%, 0%, 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    watch(() => [canvasWidth.value, canvasHeight.value], (newVal, oldVal) => {\n      updateCanvas()\n      _dotPosition.value = {\n        x: dotPosition.value.x * newVal[0] / oldVal[0],\n        y: dotPosition.value.y * newVal[1] / oldVal[1],\n      }\n    }, { flush: 'post' })\n\n    watch(() => props.color, () => {\n      if (isInteracting.value) {\n        isInteracting.value = false\n        return\n      }\n\n      _dotPosition.value = props.color ? {\n        x: props.color.s * canvasWidth.value,\n        y: (1 - props.color.v) * canvasHeight.value,\n      } : { x: 0, y: 0 }\n    }, { deep: true, immediate: true })\n\n    onMounted(() => updateCanvas())\n\n    useRender(() => (\n      <div\n        ref={ resizeRef }\n        class={[\n          'v-color-picker-canvas',\n          props.class,\n        ]}\n        style={ props.style }\n        onMousedown={ handleMouseDown }\n        onTouchstartPassive={ handleMouseDown }\n      >\n        <canvas\n          ref={ canvasRef }\n          width={ canvasWidth.value }\n          height={ canvasHeight.value }\n        />\n        { props.color && (\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        )}\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VColorPickerCanvas = InstanceType<typeof VColorPickerCanvas>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VColorPickerCanvas.js","names":["makeComponentProps","useResizeObserver","computed","onMounted","ref","shallowRef","watch","clamp","convertToUnit","defineComponent","getEventCoordinates","propsFactory","useRender","makeVColorPickerCanvasProps","color","type","Object","disabled","Boolean","dotSize","Number","String","default","height","width","VColorPickerCanvas","name","props","emits","hue","setup","_ref","emit","isInteracting","canvasRef","canvasWidth","parseFloat","canvasHeight","_dotPosition","x","y","dotPosition","get","value","set","val","h","s","v","a","dotStyles","radius","parseInt","transform","resizeRef","entries","el","offsetParent","contentRect","updateDotPosition","rect","left","top","handleMouseDown","e","preventDefault","handleMouseMove","window","addEventListener","handleMouseUp","coords","clientX","clientY","getBoundingClientRect","removeEventListener","updateCanvas","canvas","ctx","getContext","saturationGradient","createLinearGradient","addColorStop","fillStyle","fillRect","valueGradient","immediate","newVal","oldVal","flush","deep","_createElementVNode","_normalizeClass","class","_normalizeStyle","style"],"sources":["../../../src/components/VColorPicker/VColorPickerCanvas.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerCanvas.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { useResizeObserver } from '@/composables/resizeObserver'\n\n// Utilities\nimport { computed, onMounted, ref, shallowRef, watch } from 'vue'\nimport { clamp, convertToUnit, defineComponent, getEventCoordinates, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { HSV } from '@/util'\n\nexport const makeVColorPickerCanvasProps = propsFactory({\n  color: {\n    type: Object as PropType<HSV | 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  ...makeComponentProps(),\n}, 'VColorPickerCanvas')\n\nexport const VColorPickerCanvas = defineComponent({\n  name: 'VColorPickerCanvas',\n\n  props: makeVColorPickerCanvasProps(),\n\n  emits: {\n    'update:color': (color: HSV) => true,\n    'update:position': (hue: any) => true,\n  },\n\n  setup (props, { emit }) {\n    const isInteracting = shallowRef(false)\n    const canvasRef = ref<HTMLCanvasElement | null>()\n    const canvasWidth = shallowRef(parseFloat(props.width))\n    const canvasHeight = shallowRef(parseFloat(props.height))\n\n    const _dotPosition = ref({ x: 0, y: 0 })\n    const dotPosition = computed({\n      get: () => _dotPosition.value,\n      set (val) {\n        if (!canvasRef.value) return\n\n        const { x, y } = val\n        _dotPosition.value = val\n\n        emit('update:color', {\n          h: props.color?.h ?? 0,\n          s: clamp(x, 0, canvasWidth.value) / canvasWidth.value,\n          v: 1 - clamp(y, 0, canvasHeight.value) / canvasHeight.value,\n          a: props.color?.a ?? 1,\n        })\n      },\n    })\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 { resizeRef } = useResizeObserver(entries => {\n      if (!resizeRef.el?.offsetParent) return\n\n      const { width, height } = entries[0].contentRect\n\n      canvasWidth.value = width\n      canvasHeight.value = height\n    })\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 handleMouseDown (e: MouseEvent | TouchEvent) {\n      if (e.type === 'mousedown') {\n        // Prevent text selection while dragging\n        e.preventDefault()\n      }\n\n      if (props.disabled) return\n\n      handleMouseMove(e)\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    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%, 0%, 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    watch(() => [canvasWidth.value, canvasHeight.value], (newVal, oldVal) => {\n      updateCanvas()\n      _dotPosition.value = {\n        x: dotPosition.value.x * newVal[0] / oldVal[0],\n        y: dotPosition.value.y * newVal[1] / oldVal[1],\n      }\n    }, { flush: 'post' })\n\n    watch(() => props.color, () => {\n      if (isInteracting.value) {\n        isInteracting.value = false\n        return\n      }\n\n      _dotPosition.value = props.color ? {\n        x: props.color.s * canvasWidth.value,\n        y: (1 - props.color.v) * canvasHeight.value,\n      } : { x: 0, y: 0 }\n    }, { deep: true, immediate: true })\n\n    onMounted(() => updateCanvas())\n\n    useRender(() => (\n      <div\n        ref={ resizeRef }\n        class={[\n          'v-color-picker-canvas',\n          props.class,\n        ]}\n        style={ props.style }\n        onMousedown={ handleMouseDown }\n        onTouchstartPassive={ handleMouseDown }\n      >\n        <canvas\n          ref={ canvasRef }\n          width={ canvasWidth.value }\n          height={ canvasHeight.value }\n        />\n        { props.color && (\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        )}\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VColorPickerCanvas = InstanceType<typeof VColorPickerCanvas>\n"],"mappings":"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","ignoreList":[]}

package/lib/components/VColorPicker/VColorPickerEdit.js

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode } from "vue";
+import { normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, createElementVNode as _createElementVNode, createVNode as _createVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
 // Styles
 import "./VColorPickerEdit.css";
 
@@ -13,9 +13,9 @@ const VColorPickerInput = _ref => {
     label,
     ...rest
   } = _ref;
-  return _createVNode("div", {
+  return _createElementVNode("div", {
     "class": "v-color-picker-edit__input"
-  }, [_createVNode("input", rest, null), _createVNode("span", null, [label])]);
+  }, [_createElementVNode("input", _normalizeProps(_guardReactiveProps(rest)), null), _createElementVNode("span", null, [label])]);
 };
 export const makeVColorPickerEditProps = propsFactory({
   color: Object,
@@ -72,9 +72,9 @@ export const VColorPickerEdit = defineComponent({
         };
       });
     });
-    useRender(() => _createVNode("div", {
-      "class": ['v-color-picker-edit', props.class],
-      "style": props.style
+    useRender(() => _createElementVNode("div", {
+      "class": _normalizeClass(['v-color-picker-edit', props.class]),
+      "style": _normalizeStyle(props.style)
     }, [inputs.value?.map(props => _createVNode(VColorPickerInput, props, null)), enabledModes.value.length > 1 && _createVNode(VBtn, {
       "icon": "$unfold",
       "size": "x-small",

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","_createVNode","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","class","style","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","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":[]}

package/lib/components/VColorPicker/VColorPickerPreview.js

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, normalizeClass as _normalizeClass } from "vue";
 // Styles
 import "./VColorPickerPreview.css";
 
@@ -43,12 +43,12 @@ export const VColorPickerPreview = defineComponent({
         });
       } catch (e) {}
     }
-    useRender(() => _createVNode("div", {
-      "class": ['v-color-picker-preview', {
+    useRender(() => _createElementVNode("div", {
+      "class": _normalizeClass(['v-color-picker-preview', {
         'v-color-picker-preview--hide-alpha': props.hideAlpha
-      }, props.class],
-      "style": props.style
-    }, [SUPPORTS_EYE_DROPPER && _createVNode("div", {
+      }, props.class]),
+      "style": _normalizeStyle(props.style)
+    }, [SUPPORTS_EYE_DROPPER && _createElementVNode("div", {
       "class": "v-color-picker-preview__eye-dropper",
       "key": "eyeDropper"
     }, [_createVNode(VBtn, {
@@ -57,13 +57,13 @@ export const VColorPickerPreview = defineComponent({
       "icon": "$eyeDropper",
       "variant": "plain",
       "onClick": openEyeDropper
-    }, null)]), _createVNode("div", {
+    }, null)]), _createElementVNode("div", {
       "class": "v-color-picker-preview__dot"
-    }, [_createVNode("div", {
-      "style": {
+    }, [_createElementVNode("div", {
+      "style": _normalizeStyle({
         background: HSVtoCSS(props.color ?? nullColor)
-      }
-    }, null)]), _createVNode("div", {
+      })
+    }, null)]), _createElementVNode("div", {
       "class": "v-color-picker-preview__sliders"
     }, [_createVNode(VSlider, {
       "class": "v-color-picker-preview__track v-color-picker-preview__hue",

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","_createVNode","class","style","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","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":[]}

package/lib/components/VColorPicker/VColorPickerSwatches.js

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from "vue";
 // Styles
 import "./VColorPickerSwatches.css";
 
@@ -33,24 +33,24 @@ export const VColorPickerSwatches = defineComponent({
     let {
       emit
     } = _ref;
-    useRender(() => _createVNode("div", {
-      "class": ['v-color-picker-swatches', props.class],
-      "style": [{
+    useRender(() => _createElementVNode("div", {
+      "class": _normalizeClass(['v-color-picker-swatches', props.class]),
+      "style": _normalizeStyle([{
         maxHeight: convertToUnit(props.maxHeight)
-      }, props.style]
-    }, [_createVNode("div", null, [props.swatches.map(swatch => _createVNode("div", {
+      }, props.style])
+    }, [_createElementVNode("div", null, [props.swatches.map(swatch => _createElementVNode("div", {
       "class": "v-color-picker-swatches__swatch"
     }, [swatch.map(color => {
       const rgba = parseColor(color);
       const hsva = RGBtoHSV(rgba);
       const background = RGBtoCSS(rgba);
-      return _createVNode("div", {
+      return _createElementVNode("div", {
         "class": "v-color-picker-swatches__color",
         "onClick": () => hsva && emit('update:color', hsva)
-      }, [_createVNode("div", {
-        "style": {
+      }, [_createElementVNode("div", {
+        "style": _normalizeStyle({
           background
-        }
+        })
       }, [props.color && deepEqual(props.color, hsva) ? _createVNode(VIcon, {
         "size": "x-small",
         "icon": "$success",

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

@@ -1 +1 @@
-{"version":3,"file":"VColorPickerSwatches.js","names":["VIcon","makeComponentProps","convertToUnit","deepEqual","defineComponent","getContrast","parseColor","propsFactory","RGBtoCSS","RGBtoHSV","useRender","colors","makeVColorPickerSwatchesProps","swatches","type","Array","default","parseDefaultColors","disabled","Boolean","color","Object","maxHeight","Number","String","keys","map","key","base","darken4","darken3","darken2","darken1","lighten1","lighten2","lighten3","lighten4","lighten5","black","white","transparent","VColorPickerSwatches","name","props","emits","setup","_ref","emit","_createVNode","class","style","swatch","rgba","hsva","background","onClick","undefined"],"sources":["../../../src/components/VColorPicker/VColorPickerSwatches.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerSwatches.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\n\n// Utilities\nimport {\n  convertToUnit,\n  deepEqual,\n  defineComponent,\n  getContrast,\n  parseColor,\n  propsFactory,\n  RGBtoCSS,\n  RGBtoHSV,\n  useRender,\n} from '@/util'\nimport colors from '@/util/colors'\n\n// Types\nimport type { DeepReadonly, PropType } from 'vue'\nimport type { Color, HSV } from '@/util'\n\nexport const makeVColorPickerSwatchesProps = propsFactory({\n  swatches: {\n    type: Array as PropType<DeepReadonly<Color[][]>>,\n    default: () => parseDefaultColors(colors),\n  },\n  disabled: Boolean,\n  color: Object as PropType<HSV | null>,\n  maxHeight: [Number, String],\n\n  ...makeComponentProps(),\n}, 'VColorPickerSwatches')\n\nfunction parseDefaultColors (colors: Record<string, Record<string, string>>) {\n  return Object.keys(colors).map(key => {\n    const color = colors[key]\n    return color.base ? [\n      color.base,\n      color.darken4,\n      color.darken3,\n      color.darken2,\n      color.darken1,\n      color.lighten1,\n      color.lighten2,\n      color.lighten3,\n      color.lighten4,\n      color.lighten5,\n    ] : [\n      color.black,\n      color.white,\n      color.transparent,\n    ]\n  })\n}\n\nexport const VColorPickerSwatches = defineComponent({\n  name: 'VColorPickerSwatches',\n\n  props: makeVColorPickerSwatchesProps(),\n\n  emits: {\n    'update:color': (color: HSV) => true,\n  },\n\n  setup (props, { emit }) {\n    useRender(() => (\n      <div\n        class={[\n          'v-color-picker-swatches',\n          props.class,\n        ]}\n        style={[\n          { maxHeight: convertToUnit(props.maxHeight) },\n          props.style,\n        ]}\n      >\n        <div>\n          { props.swatches.map(swatch => (\n            <div class=\"v-color-picker-swatches__swatch\">\n              { swatch.map(color => {\n                const rgba = parseColor(color)\n                const hsva = RGBtoHSV(rgba)\n                const background = RGBtoCSS(rgba)\n\n                return (\n                  <div\n                    class=\"v-color-picker-swatches__color\"\n                    onClick={ () => hsva && emit('update:color', hsva) }\n                  >\n                    <div style={{ background }}>\n                      { props.color && deepEqual(props.color, hsva)\n                        ? <VIcon size=\"x-small\" icon=\"$success\" color={ getContrast(color, '#FFFFFF') > 2 ? 'white' : 'black' } />\n                        : undefined\n                      }\n                    </div>\n                  </div>\n                )\n              })}\n            </div>\n          ))}\n        </div>\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VColorPickerSwatches = InstanceType<typeof VColorPickerSwatches>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VColorPickerSwatches.js","names":["VIcon","makeComponentProps","convertToUnit","deepEqual","defineComponent","getContrast","parseColor","propsFactory","RGBtoCSS","RGBtoHSV","useRender","colors","makeVColorPickerSwatchesProps","swatches","type","Array","default","parseDefaultColors","disabled","Boolean","color","Object","maxHeight","Number","String","keys","map","key","base","darken4","darken3","darken2","darken1","lighten1","lighten2","lighten3","lighten4","lighten5","black","white","transparent","VColorPickerSwatches","name","props","emits","setup","_ref","emit","_createElementVNode","_normalizeClass","class","_normalizeStyle","style","swatch","rgba","hsva","background","onClick","_createVNode","undefined"],"sources":["../../../src/components/VColorPicker/VColorPickerSwatches.tsx"],"sourcesContent":["// Styles\nimport './VColorPickerSwatches.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\n\n// Utilities\nimport {\n  convertToUnit,\n  deepEqual,\n  defineComponent,\n  getContrast,\n  parseColor,\n  propsFactory,\n  RGBtoCSS,\n  RGBtoHSV,\n  useRender,\n} from '@/util'\nimport colors from '@/util/colors'\n\n// Types\nimport type { DeepReadonly, PropType } from 'vue'\nimport type { Color, HSV } from '@/util'\n\nexport const makeVColorPickerSwatchesProps = propsFactory({\n  swatches: {\n    type: Array as PropType<DeepReadonly<Color[][]>>,\n    default: () => parseDefaultColors(colors),\n  },\n  disabled: Boolean,\n  color: Object as PropType<HSV | null>,\n  maxHeight: [Number, String],\n\n  ...makeComponentProps(),\n}, 'VColorPickerSwatches')\n\nfunction parseDefaultColors (colors: Record<string, Record<string, string>>) {\n  return Object.keys(colors).map(key => {\n    const color = colors[key]\n    return color.base ? [\n      color.base,\n      color.darken4,\n      color.darken3,\n      color.darken2,\n      color.darken1,\n      color.lighten1,\n      color.lighten2,\n      color.lighten3,\n      color.lighten4,\n      color.lighten5,\n    ] : [\n      color.black,\n      color.white,\n      color.transparent,\n    ]\n  })\n}\n\nexport const VColorPickerSwatches = defineComponent({\n  name: 'VColorPickerSwatches',\n\n  props: makeVColorPickerSwatchesProps(),\n\n  emits: {\n    'update:color': (color: HSV) => true,\n  },\n\n  setup (props, { emit }) {\n    useRender(() => (\n      <div\n        class={[\n          'v-color-picker-swatches',\n          props.class,\n        ]}\n        style={[\n          { maxHeight: convertToUnit(props.maxHeight) },\n          props.style,\n        ]}\n      >\n        <div>\n          { props.swatches.map(swatch => (\n            <div class=\"v-color-picker-swatches__swatch\">\n              { swatch.map(color => {\n                const rgba = parseColor(color)\n                const hsva = RGBtoHSV(rgba)\n                const background = RGBtoCSS(rgba)\n\n                return (\n                  <div\n                    class=\"v-color-picker-swatches__color\"\n                    onClick={ () => hsva && emit('update:color', hsva) }\n                  >\n                    <div style={{ background }}>\n                      { props.color && deepEqual(props.color, hsva)\n                        ? <VIcon size=\"x-small\" icon=\"$success\" color={ getContrast(color, '#FFFFFF') > 2 ? 'white' : 'black' } />\n                        : undefined\n                      }\n                    </div>\n                  </div>\n                )\n              })}\n            </div>\n          ))}\n        </div>\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VColorPickerSwatches = InstanceType<typeof VColorPickerSwatches>\n"],"mappings":"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","ignoreList":[]}