tdesign-vue-next/es/color-picker/components/panel/saturation.mjs.map

TDesign Component for vue-next

{"version":3,"file":"saturation.mjs","sources":["../../../../../components/color-picker/components/panel/saturation.tsx"],"sourcesContent":["import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, reactive, ref } from 'vue';\nimport {\n  SATURATION_PANEL_DEFAULT_HEIGHT,\n  SATURATION_PANEL_DEFAULT_WIDTH,\n} from '@tdesign/common-js/color-picker/constants';\nimport { Draggable, Coordinate } from '../../utils';\nimport { useBaseClassName } from '../../hooks';\nimport baseProps from './base-props';\n\nexport default defineComponent({\n  name: 'SaturationPanel',\n  props: baseProps,\n  setup(props) {\n    const baseClassName = useBaseClassName();\n    const refPanel = ref<HTMLElement>();\n    const refThumb = ref<HTMLElement>(null);\n    const dragInstance = ref<Draggable>(null);\n    const panelRect = reactive({\n      width: SATURATION_PANEL_DEFAULT_WIDTH,\n      height: SATURATION_PANEL_DEFAULT_HEIGHT,\n    });\n\n    const styles = computed(() => {\n      const { saturation, value } = props.color;\n      const { width, height } = panelRect;\n      const top = Math.round((1 - value) * height);\n      const left = Math.round(saturation * width);\n      return {\n        color: props.color.rgb,\n        left: `${left}px`,\n        top: `${top}px`,\n      };\n    });\n\n    const getSaturationAndValueByCoordinate = (coordinate: Coordinate) => {\n      const { width, height } = panelRect;\n      const { x, y } = coordinate;\n      const saturation = Math.round((x / width) * 100);\n      const value = Math.round((1 - y / height) * 100);\n      return {\n        saturation,\n        value,\n      };\n    };\n\n    const handleDrag = (coordinate: Coordinate, isEnded?: boolean) => {\n      if (props.disabled) {\n        return;\n      }\n      const { saturation, value } = getSaturationAndValueByCoordinate(coordinate);\n      props.onChange({\n        saturation: saturation / 100,\n        value: value / 100,\n        addUsedColor: isEnded,\n      });\n    };\n\n    const handleDragEnd = (coordinate: Coordinate) => {\n      if (props.disabled) {\n        return;\n      }\n      nextTick(() => {\n        handleDrag(coordinate, true);\n      });\n    };\n\n    const panelBackground = computed(() => {\n      return `hsl(${props.color.hue}, 100%, 50%)`;\n    });\n\n    onMounted(() => {\n      panelRect.width = refPanel.value.offsetWidth || SATURATION_PANEL_DEFAULT_WIDTH;\n      panelRect.height = refPanel.value.offsetHeight || SATURATION_PANEL_DEFAULT_HEIGHT;\n      dragInstance.value = new Draggable(refPanel.value, {\n        start() {\n          panelRect.width = refPanel.value.offsetWidth;\n          panelRect.height = refPanel.value.offsetHeight;\n        },\n        drag: (coordinate: Coordinate) => {\n          handleDrag(coordinate);\n        },\n        end: handleDragEnd,\n      });\n    });\n\n    onBeforeUnmount(() => {\n      dragInstance.value.destroy();\n    });\n\n    return () => {\n      return (\n        <div\n          class={[`${baseClassName.value}__saturation`]}\n          ref={refPanel}\n          style={{\n            background: panelBackground.value,\n          }}\n        >\n          <span\n            class={[`${baseClassName.value}__thumb`]}\n            role=\"slider\"\n            tabindex={0}\n            ref={refThumb}\n            style={styles.value}\n          ></span>\n        </div>\n      );\n    };\n  },\n});\n"],"names":["defineComponent","name","props","baseProps","setup","baseClassName","useBaseClassName","refPanel","ref","refThumb","dragInstance","panelRect","reactive","width","SATURATION_PANEL_DEFAULT_WIDTH","height","SATURATION_PANEL_DEFAULT_HEIGHT","styles","computed","_props$color","color","saturation","value","top","Math","round","left","rgb","getSaturationAndValueByCoordinate","coordinate","x","y","handleDrag","isEnded","disabled","_getSaturationAndValu","onChange","addUsedColor","handleDragEnd","nextTick","panelBackground","concat","hue","onMounted","offsetWidth","offsetHeight","Draggable","start","drag","end","onBeforeUnmount","destroy","_createVNode","background"],"mappings":"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"}