xdesign-vue-next/es/color-picker/panel/format/inputs.mjs.map

XDesign Component for vue-next

{"version":3,"file":"inputs.mjs","sources":["../../../../src/color-picker/panel/format/inputs.tsx"],"sourcesContent":["import { computed, defineComponent, PropType, reactive, watch } from 'vue';\nimport throttle from 'lodash/throttle';\nimport props from '../../props';\nimport { Color } from '../../utils';\nimport TInput from '../../../input';\nimport TInputNumber from '../../../input-number';\nimport { FORMAT_INPUT_CONFIG } from './config';\n\nexport default defineComponent({\n  name: 'FormatInputs',\n  inheritAttrs: false,\n  props: {\n    ...props,\n    color: {\n      type: Object as PropType<Color>,\n    },\n    onInputChange: {\n      type: Function,\n      default: () => {\n        return () => {};\n      },\n    },\n  },\n  setup(props) {\n    const inputConfigs = computed(() => {\n      const configs = [...FORMAT_INPUT_CONFIG[props.format]];\n      if (props.enableAlpha) {\n        configs.push({\n          type: 'inputNumber',\n          key: 'a',\n          min: 0,\n          max: 100,\n          format: (value: number) => `${value}%`,\n          flex: 1.15,\n        });\n      }\n      return configs;\n    });\n\n    const modelValue = reactive<any>({});\n    const lastModelValue = reactive<any>({});\n\n    /**\n     * 获取不同格式的输入输出值\n     * @param type 'encode' | 'decode'\n     * @returns\n     */\n    const getFormatColorMap = (type: 'encode' | 'decode') => {\n      const { color } = props;\n      if (type === 'encode') {\n        return {\n          HSV: color.getHsva(),\n          HSL: color.getHsla(),\n          RGB: color.getRgba(),\n          CMYK: color.getCmyk(),\n          CSS: {\n            css: color.css,\n          },\n          HEX: {\n            hex: color.hex,\n          },\n        };\n      }\n      // decode\n      return {\n        HSV: Color.object2color(modelValue, 'HSV'),\n        HSL: Color.object2color(modelValue, 'HSL'),\n        RGB: Color.object2color(modelValue, 'RGB'),\n        CMYK: Color.object2color(modelValue, 'CMYK'),\n        CSS: modelValue.css,\n        HEX: modelValue.hex,\n      };\n    };\n\n    // 更新modelValue\n    const updateModelValue = () => {\n      const { format, color } = props;\n      const values: any = getFormatColorMap('encode')[format];\n      values.a = Math.round(color.alpha * 100);\n      Object.keys(values).forEach((key) => {\n        modelValue[key] = values[key];\n        lastModelValue[key] = values[key];\n      });\n    };\n\n    updateModelValue();\n\n    const throttleUpdate = throttle(updateModelValue, 100);\n\n    watch(() => {\n      const { saturation, hue, value, alpha } = props.color;\n      return [saturation, hue, value, alpha, props.format];\n    }, throttleUpdate);\n\n    const handleChange = (key: string, v: number | string) => {\n      if (v === lastModelValue[key]) {\n        return;\n      }\n      const value = getFormatColorMap('decode')[props.format];\n      props.onInputChange(value, modelValue.a / 100, key, v);\n    };\n\n    return {\n      modelValue,\n      inputConfigs,\n      handleChange,\n    };\n  },\n  render() {\n    const inputProps = {\n      ...((this.inputProps as any) || {}),\n    };\n    return (\n      <div class=\"input-group\">\n        {this.inputConfigs.map((config) => {\n          return (\n            <div\n              class=\"input-group__item\"\n              key={config.key}\n              style={{\n                flex: config.flex || 1,\n              }}\n            >\n              {config.type === 'input' ? (\n                <TInput\n                  {...inputProps}\n                  align=\"center\"\n                  size=\"small\"\n                  disabled={this.disabled}\n                  v-model={this.modelValue[config.key]}\n                  maxlength={this.format === 'HEX' ? 9 : undefined}\n                  title={this.modelValue[config.key]}\n                  onBlur={(v: string) => this.handleChange(config.key, v)}\n                  onEnter={(v: string) => this.handleChange(config.key, v)}\n                />\n              ) : (\n                <TInputNumber\n                  {...inputProps}\n                  align=\"center\"\n                  size=\"small\"\n                  disabled={this.disabled}\n                  v-model={this.modelValue[config.key]}\n                  title={this.modelValue[config.key]}\n                  min={config.min}\n                  max={config.max}\n                  step={1}\n                  format={config.format}\n                  theme=\"normal\"\n                  onBlur={(v: number) => this.handleChange(config.key, v)}\n                  onEnter={(v: number) => this.handleChange(config.key, v)}\n                />\n              )}\n            </div>\n          );\n        })}\n      </div>\n    );\n  },\n});\n"],"names":["name","inheritAttrs","props","color","type","onInputChange","key","min","max","flex","HSV","HSL","RGB","CMYK","CSS","HEX","values","modelValue","lastModelValue","updateModelValue","throttle","watch","inputConfigs","handleChange","_createVNode","TInput","_mergeProps","TInputNumber"],"mappings":"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"}