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","computed","onMounted","ref","watch","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","hue","model","undefined","c","err","currentColor","value","h","rtlClasses","externalChange","immediate","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 { computed, onMounted, ref, watch } 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 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    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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","ignoreList":[]}