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

XDesign Component for vue-next

{"version":3,"file":"swatches.mjs","sources":["../../../src/color-picker/panel/swatches.tsx"],"sourcesContent":["import { computed, defineComponent, PropType, ref } from 'vue';\n\nimport { Color } from '../utils';\nimport { useBaseClassName } from '../hooks';\nimport { useCommonClassName } from '../../hooks/useConfig';\nimport baseProps from './base-props';\n\nexport default defineComponent({\n  name: 'SwatchesPanel',\n  props: {\n    ...baseProps,\n    colors: {\n      type: Array as PropType<string[]>,\n      default: () => [] as PropType<string[]>,\n    },\n    title: {\n      type: String,\n      default: '系统色彩',\n    },\n    editable: {\n      type: Boolean,\n      default: false,\n    },\n    onSetColor: {\n      type: Function,\n      default: () => {\n        return () => {};\n      },\n    },\n    handleAddColor: {\n      type: Function,\n      default: () => {\n        return () => {};\n      },\n    },\n  },\n  setup(props) {\n    const baseClassName = useBaseClassName();\n    const { STATUS } = useCommonClassName();\n    const statusClassNames = STATUS.value;\n    const visiblePopConfirm = ref<boolean>(false);\n    const setVisiblePopConfirm = (visible: boolean) => {\n      visiblePopConfirm.value = visible;\n    };\n\n    const handleClick = (color: string) => props.onSetColor(color);\n\n    const isEqualCurrentColor = (color: string) => {\n      return Color.compare(color, props.color.css);\n    };\n\n    const selectedColorIndex = computed(() => {\n      return props.colors.findIndex((color) => isEqualCurrentColor(color));\n    });\n\n    /**\n     * 移除颜色\n     */\n    const handleRemoveColor = () => {\n      const colors = [...props.colors];\n      const selectedIndex = selectedColorIndex.value;\n      if (selectedIndex > -1) {\n        colors.splice(selectedIndex, 1);\n      } else {\n        colors.length = 0;\n      }\n      props.onChange(colors);\n      setVisiblePopConfirm(false);\n    };\n\n    return {\n      baseClassName,\n      statusClassNames,\n      selectedColorIndex,\n      visiblePopConfirm,\n      setVisiblePopConfirm,\n      handleClick,\n      isEqualCurrentColor,\n      handleRemoveColor,\n    };\n  },\n  render() {\n    const { baseClassName, statusClassNames, title, editable } = this;\n    const swatchesClass = `${baseClassName}__swatches`;\n\n    const renderActions = () => {\n      if (!editable) {\n        return null;\n      }\n\n      return (\n        <div class={`${swatchesClass}--actions`}>\n          <span role=\"button\" class={`${baseClassName}__icon`} onClick={() => this.handleAddColor()}>\n            <icon-ri-add-line />\n          </span>\n          {this.colors.length > 0 ? (\n            <span role=\"button\" class={`${baseClassName}__icon`} onClick={() => this.handleRemoveColor()}>\n              <icon-ri-delete-bin-2-line />\n            </span>\n          ) : null}\n        </div>\n      );\n    };\n\n    return (\n      <div class={swatchesClass}>\n        <h3 class={`${swatchesClass}--title`}>\n          <span>{title}</span>\n          {renderActions()}\n        </h3>\n        <ul class={[`${swatchesClass}--items`, 'narrow-scrollbar']}>\n          {this.colors.map((color) => {\n            return (\n              <li\n                class={[\n                  `${swatchesClass}--item`,\n                  this.isEqualCurrentColor(color) && editable ? statusClassNames.active : '',\n                ]}\n                title={color}\n                key={color}\n                onClick={() => {\n                  if (this.disabled) {\n                    return;\n                  }\n                  this.handleClick(color);\n                }}\n              >\n                <div class={[`${swatchesClass}--color`, `${baseClassName}--bg-alpha`]}>\n                  <span\n                    class={`${swatchesClass}--inner`}\n                    style={{\n                      background: color,\n                    }}\n                  ></span>\n                </div>\n              </li>\n            );\n          })}\n        </ul>\n      </div>\n    );\n  },\n});\n"],"names":["name","props","colors","type","title","editable","onSetColor","handleAddColor","baseClassName","statusClassNames","selectedColorIndex","visiblePopConfirm","setVisiblePopConfirm","handleClick","isEqualCurrentColor","handleRemoveColor","_createVNode","_resolveComponent","_this","background"],"mappings":"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"}