{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/color-picker/src/index.vue"],"sourcesContent":["<template>\r\n  <sg-tooltip\r\n    ref=\"popper\"\r\n    v-model:visible=\"showPicker\"\r\n    :show-arrow=\"false\"\r\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\r\n    :offset=\"0\"\r\n    :gpu-acceleration=\"false\"\r\n    :popper-class=\"`sg-color-picker__panel sg-color-dropdown`\"\r\n    :stop-popper-mouse-event=\"false\"\r\n    theme=\"light\"\r\n    trigger=\"click\"\r\n    transition=\"sg-zoom-in-top\"\r\n    persistent\r\n  >\r\n    <template #content>\r\n      <div v-click-outside=\"hide\">\r\n        <div class=\"sg-color-dropdown__main-wrapper\">\r\n          <sv-panel ref=\"svPanel\" :color=\"color\" />\r\n          <hue-slider ref=\"hue\" class=\"hue-slider\" :color=\"color\" vertical />\r\n        </div>\r\n        <alpha-slider v-if=\"showAlpha\" ref=\"alpha\" :color=\"color\" />\r\n        <predefine\r\n          v-if=\"predefine\"\r\n          ref=\"predefine\"\r\n          :color=\"color\"\r\n          :colors=\"predefine\"\r\n        />\r\n        <div class=\"sg-color-dropdown__btns\">\r\n          <span class=\"sg-color-dropdown__value\">\r\n            <sg-input\r\n              v-model=\"customInput\"\r\n              :validate-event=\"false\"\r\n              size=\"small\"\r\n              @keyup.enter=\"handleConfirm\"\r\n              @on-blur=\"handleConfirm\"\r\n            />\r\n          </span>\r\n          <sg-button\r\n            size=\"small\"\r\n            type=\"primary\"\r\n            text\r\n            class=\"sg-color-dropdown__link-btn\"\r\n            @click=\"clear\"\r\n          >\r\n            {{ t('sg.colorpicker.clear') }}\r\n          </sg-button>\r\n          <sg-button\r\n            type=\"primary\"\r\n            size=\"small\"\r\n            class=\"sg-color-dropdown__btn\"\r\n            @click=\"confirmValue\"\r\n          >\r\n            {{ t('sg.colorpicker.confirm') }}\r\n          </sg-button>\r\n        </div>\r\n      </div>\r\n    </template>\r\n    <template #default>\r\n      <div\r\n        :class=\"[\r\n          'sg-color-picker',\r\n          colorDisabled ? 'is-disabled' : '',\r\n          colorSize ? `sg-color-picker--${colorSize}` : '',\r\n        ]\"\r\n      >\r\n        <div v-if=\"colorDisabled\" class=\"sg-color-picker__mask\"></div>\r\n        <div class=\"sg-color-picker__trigger\" @click=\"handleTrigger\">\r\n          <span\r\n            class=\"sg-color-picker__color\"\r\n            :class=\"{ 'is-alpha': showAlpha }\"\r\n          >\r\n            <span\r\n              class=\"sg-color-picker__color-inner\"\r\n              :style=\"{\r\n                backgroundColor: displayedColor,\r\n              }\"\r\n            >\r\n              <sg-icon\r\n                v-show=\"(modelValue && modelValue!=='transparent') || showPanelColor\"\r\n                class=\"sg-color-picker__icon is-icon-arrow-down\"\r\n              >\r\n                <CaretBottomSolid />\r\n              </sg-icon>\r\n              <sg-icon\r\n                v-if=\"(!modelValue || modelValue==='transparent') && !showPanelColor\"\r\n                class=\"sg-color-picker__empty is-icon-close\"\r\n              >\r\n                <Close />\r\n              </sg-icon>\r\n            </span>\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </template>\r\n  </sg-tooltip>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n  computed,\r\n  defineComponent,\r\n  nextTick,\r\n  onMounted,\r\n  provide,\r\n  reactive,\r\n  ref,\r\n  watch,\r\n} from 'vue'\r\nimport debounce from 'lodash/debounce'\r\nimport SgButton from '@sgui-plus/components/button'\r\nimport SgIcon from '@sgui-plus/components/icon'\r\nimport { ClickOutside } from '@sgui-plus/directives'\r\nimport { useLocale, useSize, useFormItem } from '@sgui-plus/hooks'\r\nimport SgTooltip from '@sgui-plus/components/tooltip'\r\nimport SgInput from '@sgui-plus/components/input'\r\nimport { UPDATE_MODEL_EVENT } from '@sgui-plus/utils/constants'\r\nimport { isValidComponentSize } from '@sgui-plus/utils/validators'\r\nimport { debugWarn } from '@sgui-plus/utils/error'\r\nimport { Close,CaretBottomSolid } from '@sgui-plus/icons-vue'\r\nimport AlphaSlider from './components/alpha-slider.vue'\r\nimport HueSlider from './components/hue-slider.vue'\r\nimport Predefine from './components/predefine.vue'\r\nimport SvPanel from './components/sv-panel.vue'\r\nimport Color from './color'\r\nimport { OPTIONS_KEY } from './useOption'\r\n\r\nimport type { PropType } from 'vue'\r\nimport type { ComponentSize } from '@sgui-plus/utils/size'\r\nimport type { IUseOptions } from './useOption'\r\n\r\nexport default defineComponent({\r\n  name: 'SgColorPicker',\r\n  components: {\r\n    SgButton,\r\n    SgTooltip,\r\n    SgInput,\r\n    SgIcon,\r\n    Close,\r\n    CaretBottomSolid,\r\n    SvPanel,\r\n    HueSlider,\r\n    AlphaSlider,\r\n    Predefine,\r\n  },\r\n  directives: {\r\n    ClickOutside,\r\n  },\r\n  props: {\r\n    modelValue: String,\r\n    showAlpha: Boolean,\r\n    colorFormat: String,\r\n    disabled: Boolean,\r\n    size: {\r\n      type: String as PropType<ComponentSize>,\r\n      validator: isValidComponentSize,\r\n    },\r\n    predefine: {\r\n      type: Array\r\n    },\r\n    clearType: {\r\n      type: String,\r\n      default: 'null'\r\n    },\r\n    validateEvent: {\r\n      type: Boolean,\r\n      default: true\r\n    }\r\n  },\r\n  emits: ['on-change', 'on-active-change', UPDATE_MODEL_EVENT, 'on-visible-change'],\r\n  setup(props, { emit }) {\r\n    const { t } = useLocale()\r\n    const { formItem } = useFormItem()\r\n\r\n    const hue = ref()\r\n    const svPanel = ref()\r\n    const alpha = ref()\r\n    const popper = ref(null)\r\n    // data\r\n    const color = reactive(\r\n      new Color({\r\n        enableAlpha: props.showAlpha,\r\n        format: props.colorFormat  as string,\r\n        value: props.modelValue,\r\n        clearType: props.clearType\r\n      })\r\n    )\r\n    const showPicker = ref(false)\r\n    const showPanelColor = ref(false)\r\n    const customInput = ref('')\r\n    // computed\r\n    const displayedColor = computed(() => {\r\n      if (!props.modelValue && !showPanelColor.value) {\r\n        return 'transparent'\r\n      }\r\n      if (props.modelValue == 'transparent' && !showPanelColor.value) {\r\n        return 'transparent'\r\n      }\r\n      return displayedRgb(color, props.showAlpha)\r\n    })\r\n    const colorSize = useSize()\r\n    const colorDisabled = computed(() => {\r\n      return props.disabled\r\n    })\r\n\r\n    const currentColor = computed(() => {\r\n      return !props.modelValue && !showPanelColor.value ? '' : color.value\r\n    })\r\n    // watch\r\n    watch(\r\n      () => props.modelValue,\r\n      (newVal) => {\r\n        if (!newVal || newVal == 'transparent') {\r\n          showPanelColor.value = false\r\n        } else if (newVal && newVal !== color.value) {\r\n          color.fromString(newVal)\r\n        }\r\n      }\r\n    )\r\n\r\n    watch(\r\n      () => currentColor.value,\r\n      (val) => {\r\n        customInput.value = val\r\n        emit('on-active-change', val)\r\n      }\r\n    )\r\n\r\n    watch(\r\n      () => props.clearType,\r\n      (val) => {\r\n        color.clearType = val\r\n      }\r\n    )\r\n\r\n    watch(\r\n      () => color.value,\r\n      () => {\r\n        if (props.clearType == 'transparent' && color.value == 'transparent') return\r\n        if (!props.modelValue && !showPanelColor.value) {\r\n          showPanelColor.value = true\r\n        }\r\n      }\r\n    )\r\n\r\n    watch(\r\n      () => props.colorFormat,\r\n      (val) => {\r\n        color.set('format', val, true)\r\n        resetColor()\r\n        nextTick(() => {\r\n          confirmValue()\r\n        })\r\n      }\r\n    )\r\n\r\n    watch(\r\n      () => showPicker.value,\r\n      (val) => {\r\n        if (val == false && props.modelValue == 'transparent') {\r\n          showPanelColor.value = false\r\n        }\r\n        emit('on-visible-change', val)\r\n      }\r\n    )\r\n\r\n    // methods\r\n    function displayedRgb(color, showAlpha) {\r\n      if (!(color instanceof Color)) {\r\n        throw Error('color should be instance of _color Class')\r\n      }\r\n\r\n      const { r, g, b } = color.toRgb()\r\n      return showAlpha\r\n        ? `rgba(${r}, ${g}, ${b}, ${color.get('alpha') / 100})`\r\n        : `rgb(${r}, ${g}, ${b})`\r\n    }\r\n\r\n    function setShowPicker(value) {\r\n      showPicker.value = value\r\n    }\r\n\r\n    const debounceSetShowPicker = debounce(setShowPicker, 100)\r\n\r\n    function hide() {\r\n      debounceSetShowPicker(false)\r\n      resetColor()\r\n    }\r\n\r\n    function resetColor() {\r\n      nextTick(() => {\r\n        if (props.modelValue) {\r\n          color.fromString(props.modelValue)\r\n        } else {\r\n          showPanelColor.value = false\r\n        }\r\n      })\r\n    }\r\n\r\n    function handleTrigger() {\r\n      if (colorDisabled.value) return\r\n      debounceSetShowPicker(!showPicker.value)\r\n    }\r\n\r\n    function handleConfirm() {\r\n      color.fromString(customInput.value)\r\n    }\r\n\r\n    function confirmValue() {\r\n      let value: string|null = color.value\r\n      if (props.clearType !== 'transparent' && color.value == 'transparent') {\r\n        value = null\r\n      }\r\n      emit(UPDATE_MODEL_EVENT, value)\r\n      emit('on-change', value)\r\n      if (props.validateEvent) {\r\n        formItem?.validate('change').catch((err) => debugWarn(err))\r\n      }\r\n      debounceSetShowPicker(false)\r\n      // check if modelValue change, if not change, then reset color.\r\n      nextTick(() => {\r\n        const newColor = new Color({\r\n          enableAlpha: props.showAlpha,\r\n          format: props.colorFormat as string,\r\n          value: props.modelValue,\r\n          clearType: props.clearType\r\n        })\r\n        if (!color.compare(newColor)) {\r\n          resetColor()\r\n        }\r\n      })\r\n    }\r\n\r\n    function clear() {\r\n      debounceSetShowPicker(false)\r\n      if (props.clearType == 'transparent') {\r\n        emit(UPDATE_MODEL_EVENT, 'transparent')\r\n        emit('on-change', 'transparent')\r\n      } else {\r\n        emit(UPDATE_MODEL_EVENT, null)\r\n        emit('on-change', null)\r\n      }\r\n      if (props.modelValue !== null && props.validateEvent) {\r\n        formItem?.validate('change').catch((err) => debugWarn(err))\r\n      }\r\n      resetColor()\r\n    }\r\n\r\n    onMounted(() => {\r\n      if (props.modelValue) {\r\n        customInput.value = currentColor.value\r\n      }\r\n    })\r\n    watch(\r\n      () => showPicker.value,\r\n      () => {\r\n        nextTick(() => {\r\n          hue.value?.update()\r\n          svPanel.value?.update()\r\n          alpha.value?.update()\r\n        })\r\n      }\r\n    )\r\n\r\n    provide<IUseOptions>(OPTIONS_KEY, {\r\n      currentColor,\r\n    })\r\n\r\n    return {\r\n      color: color as Color,\r\n      colorDisabled,\r\n      colorSize,\r\n      displayedColor,\r\n      showPanelColor,\r\n      showPicker,\r\n      customInput,\r\n      handleConfirm,\r\n      hide,\r\n      handleTrigger,\r\n      clear,\r\n      confirmValue,\r\n      t,\r\n      hue,\r\n      svPanel,\r\n      alpha,\r\n      popper,\r\n    }\r\n  },\r\n})\r\n</script>\r\n"],"names":["_resolveDirective","_openBlock","_createBlock","_withCtx","_withDirectives","_createElementBlock","_createElementVNode","_createVNode","_createCommentVNode","_withKeys","_normalizeClass","_vShow"],"mappings":"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"}