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

XDesign Component for vue-next

{"version":3,"file":"slider.mjs","sources":["../../../src/color-picker/panel/slider.tsx"],"sourcesContent":["import { computed, defineComponent, onBeforeUnmount, onMounted, PropType, reactive, ref } from 'vue';\nimport { SLIDER_DEFAULT_WIDTH } from '../const';\nimport { Draggable, Coordinate } from '../utils';\nimport { useBaseClassName } from '../hooks';\nimport baseProps from './base-props';\n\nexport default defineComponent({\n  name: 'ColorSlider',\n  props: {\n    ...baseProps,\n    className: {\n      type: String,\n      default: '',\n    },\n    value: {\n      type: Number,\n      default: 0,\n    },\n    maxValue: {\n      type: Number,\n      default: 360,\n    },\n    railStyle: {\n      type: Object as PropType<any>,\n    },\n    type: {\n      type: String as PropType<'hue' | 'alpha'>,\n      default: 'hue',\n    },\n  },\n  setup(props) {\n    const baseClassName = useBaseClassName();\n    const refPanel = ref<HTMLElement>(null);\n    const refThumb = ref<HTMLElement>(null);\n    const dragInstance = ref<Draggable>(null);\n    const panelRect = reactive({\n      width: SLIDER_DEFAULT_WIDTH,\n    });\n    const styles = computed(() => {\n      const { width } = panelRect;\n      if (!width) {\n        return;\n      }\n      const left = Math.round((props.value / props.maxValue) * width);\n      return {\n        left: `${left}px`,\n        color: props.color.rgb,\n      };\n    });\n\n    const handleDrag = (coordinate: Coordinate, isEnded?: boolean) => {\n      if (props.disabled) {\n        return;\n      }\n      const { width } = panelRect;\n      const { x } = coordinate;\n      const value = Math.round((x / width) * props.maxValue * 100) / 100;\n      props.onChange(value, isEnded);\n    };\n\n    const handleDragEnd = (coordinate: Coordinate) => {\n      if (props.disabled) {\n        return;\n      }\n      handleDrag(coordinate, true);\n    };\n\n    onMounted(() => {\n      panelRect.width = refPanel.value.offsetWidth || SLIDER_DEFAULT_WIDTH;\n      dragInstance.value = new Draggable(refPanel.value, {\n        start: () => {\n          // pop模式下由于是隐藏显示，这个宽度让其每次点击的时候重新计算\n          panelRect.width = refPanel.value.offsetWidth;\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      baseClassName,\n      refThumb,\n      refPanel,\n      styles,\n    };\n  },\n  render() {\n    const { baseClassName, className, railStyle, styles, type, color } = this;\n    const paddingStyle = {\n      background: `linear-gradient(90deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.0) 93%, ${color.rgb} 93%, ${color.rgb} 100%)`,\n    };\n    return (\n      <div class={[`${baseClassName}__slider-wrapper`, `${baseClassName}__slider-wrapper--${type}-type`]}>\n        {type === 'alpha' && <div className={`${baseClassName}__slider-padding`} style={paddingStyle} />}\n        <div class={[`${baseClassName}__slider`, className]} ref=\"refPanel\">\n          <div class={`${baseClassName}__rail`} style={railStyle}></div>\n          <span class={[`${baseClassName}__thumb`]} role=\"slider\" tabindex={0} ref=\"refThumb\" style={styles}></span>\n        </div>\n      </div>\n    );\n  },\n});\n"],"names":["name","props","className","type","value","maxValue","railStyle","width","left","color","handleDrag","onMounted","panelRect","drag","end","onBeforeUnmount","dragInstance","baseClassName","refThumb","refPanel","styles","_createVNode"],"mappings":"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"}