vuetify/lib/components/VColorPicker/VColorPicker.mjs.map

Vue Material Component Framework

{"version":3,"file":"VColorPicker.mjs","names":["VColorPickerCanvas","VColorPickerEdit","VColorPickerPreview","VColorPickerSwatches","makeVSheetProps","VSheet","provideDefaults","useRtl","useProxiedModel","onMounted","ref","extractColor","modes","nullColor","consoleWarn","defineComponent","HSVtoCSS","omit","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","width","VColorPicker","name","props","emits","color","setup","lastPickedColor","currentColor","undefined","c","err","value","h","rtlClasses","updateColor","hsva","VSlider","trackColor","trackFillColor","sheetProps","filterProps","_createVNode","_mergeProps","rounded","elevation","theme","class","a","style","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 { makeVSheetProps, VSheet } from '@/components/VSheet/VSheet'\n\n// Composables\nimport { provideDefaults } from '@/composables/defaults'\nimport { useRtl } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { onMounted, ref } from 'vue'\nimport { extractColor, modes, nullColor } from './util'\nimport { consoleWarn, defineComponent, HSVtoCSS, omit, 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  ...omit(makeVSheetProps({ width: 300 }), [\n    'height',\n    'location',\n    'minHeight',\n    'maxHeight',\n    'minWidth',\n    'maxWidth',\n  ]),\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) {\n    const mode = useProxiedModel(props, 'mode')\n    const lastPickedColor = ref<HSV | null>(null)\n    const currentColor = 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        if (lastPickedColor.value) {\n          c = { ...c, h: lastPickedColor.value.h }\n          lastPickedColor.value = null\n        }\n\n        return c\n      },\n      v => {\n        if (!v) return null\n\n        return extractColor(v, props.modelValue)\n      }\n    )\n    const { rtlClasses } = useRtl()\n\n    const updateColor = (hsva: HSV) => {\n      currentColor.value = hsva\n      lastPickedColor.value = hsva\n    }\n\n    onMounted(() => {\n      if (!props.modes.includes(mode.value)) mode.value = props.modes[0]\n    })\n\n    provideDefaults({\n      VSlider: {\n        color: undefined,\n        trackColor: undefined,\n        trackFillColor: undefined,\n      },\n    })\n\n    useRender(() => {\n      const sheetProps = VSheet.filterProps(props)\n\n      return (\n        <VSheet\n          rounded={ props.rounded }\n          elevation={ props.elevation }\n          theme={ props.theme }\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          { ...sheetProps }\n          maxWidth={ props.width }\n        >\n          { !props.hideCanvas && (\n            <VColorPickerCanvas\n              key=\"canvas\"\n              color={ currentColor.value }\n              onUpdate:color={ updateColor }\n              disabled={ props.disabled }\n              dotSize={ props.dotSize }\n              width={ props.width }\n              height={ props.canvasHeight }\n            />\n          )}\n\n          { (!props.hideSliders || !props.hideInputs) && (\n            <div key=\"controls\" class=\"v-color-picker__controls\">\n              { !props.hideSliders && (\n                <VColorPickerPreview\n                  key=\"preview\"\n                  color={ currentColor.value }\n                  onUpdate:color={ updateColor }\n                  hideAlpha={ !mode.value.endsWith('a') }\n                  disabled={ props.disabled }\n                />\n              )}\n\n              { !props.hideInputs && (\n                <VColorPickerEdit\n                  key=\"edit\"\n                  modes={ props.modes }\n                  mode={ mode.value }\n                  onUpdate:mode={ m => mode.value = m }\n                  color={ currentColor.value }\n                  onUpdate:color={ updateColor }\n                  disabled={ props.disabled }\n                />\n              )}\n            </div>\n          )}\n\n          { props.showSwatches && (\n            <VColorPickerSwatches\n              key=\"swatches\"\n              color={ currentColor.value }\n              onUpdate:color={ updateColor }\n              maxHeight={ props.swatchesMaxHeight }\n              swatches={ props.swatches }\n              disabled={ props.disabled }\n            />\n          )}\n        </VSheet>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VColorPicker = InstanceType<typeof VColorPicker>\n"],"mappings":"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"}