tdesign-vue-next
Version:
TDesign Component for vue-next
1 lines • 8.87 kB
Source Map (JSON)
{"version":3,"file":"swatches.mjs","sources":["../../../../../components/color-picker/components/panel/swatches.tsx"],"sourcesContent":["import { computed, defineComponent, PropType, ref } from 'vue';\nimport { DeleteIcon as TdDeleteIcon, AddIcon as TdAddIcon } from 'tdesign-icons-vue-next';\n\nimport { Color } from '../../utils';\nimport { useBaseClassName } from '../../hooks';\nimport { useGlobalIcon, useCommonClassName } from '@tdesign/shared-hooks';\n\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 { DeleteIcon, AddIcon } = useGlobalIcon({ DeleteIcon: TdDeleteIcon, AddIcon: TdAddIcon });\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;\n const selectedIndex = selectedColorIndex.value;\n if (selectedIndex === -1) return;\n colors.splice(selectedIndex, 1);\n props.onChange(colors);\n setVisiblePopConfirm(false);\n };\n\n return () => {\n const swatchesClass = `${baseClassName.value}__swatches`;\n\n const renderActions = () => {\n if (!props.editable) {\n return null;\n }\n\n return (\n <div class={`${swatchesClass}--actions`}>\n <span role=\"button\" class={`${baseClassName.value}__icon`} onClick={() => props.handleAddColor()}>\n <AddIcon />\n </span>\n {props.colors.length > 0 ? (\n <span role=\"button\" class={`${baseClassName.value}__icon`} onClick={() => handleRemoveColor()}>\n <DeleteIcon />\n </span>\n ) : null}\n </div>\n );\n };\n\n return (\n <div class={swatchesClass}>\n <h3 class={`${swatchesClass}--title`}>\n <span>{props.title}</span>\n {renderActions()}\n </h3>\n <ul class={[`${swatchesClass}--items`, 'narrow-scrollbar']}>\n {props.colors.map((color) => {\n return (\n <li\n class={[\n `${swatchesClass}--item`,\n isEqualCurrentColor(color) && props.editable ? statusClassNames.active : '',\n ]}\n title={color}\n key={color}\n onClick={() => {\n if (props.disabled) {\n return;\n }\n handleClick(color);\n }}\n >\n <div class={[`${swatchesClass}--color`, `${baseClassName.value}--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});\n"],"names":["defineComponent","name","props","_objectSpread","baseProps","colors","type","Array","default","title","String","editable","Boolean","onSetColor","Function","handleAddColor","setup","baseClassName","useBaseClassName","_useGlobalIcon","useGlobalIcon","DeleteIcon","TdDeleteIcon","AddIcon","TdAddIcon","_useCommonClassName","useCommonClassName","STATUS","statusClassNames","value","visiblePopConfirm","ref","setVisiblePopConfirm","visible","handleClick","color","isEqualCurrentColor","Color","compare","css","selectedColorIndex","computed","findIndex","handleRemoveColor","selectedIndex","splice","onChange","swatchesClass","concat","renderActions","_createVNode","onClick","length","map","active","disabled","background"],"mappings":"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"}