@extclp/vexip-ui/es/components/color-picker/color-palette.vue2.mjs.map

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

{"version":3,"file":"color-palette.vue2.mjs","sources":["../../../components/color-picker/color-palette.vue"],"sourcesContent":["<template>\r\n  <div\r\n    ref=\"wrapper\"\r\n    :class=\"nh.be('palette')\"\r\n    tabindex=\"-1\"\r\n    role=\"group\"\r\n    :style=\"{\r\n      backgroundColor: `hsl(${hue}, 100%, 50%)`\r\n    }\"\r\n  >\r\n    <div :class=\"nh.be('saturation')\" role=\"none\"></div>\r\n    <div :class=\"nh.be('value')\" role=\"none\"></div>\r\n    <div\r\n      :class=\"nh.be('palette-handler')\"\r\n      :style=\"{\r\n        top: `${currentTop}%`,\r\n        left: `${currentLeft}%`\r\n      }\"\r\n    >\r\n      <div :class=\"nh.be('palette-pointer')\"></div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, ref, watch } from 'vue'\r\n\r\nimport { useNameHelper } from '@vexip-ui/config'\r\nimport { useModifier, useMoving } from '@vexip-ui/hooks'\r\nimport { boundRange, toFixed } from '@vexip-ui/utils'\r\n\r\nexport default defineComponent({\r\n  name: 'ColorPalette',\r\n  props: {\r\n    hue: {\r\n      type: Number,\r\n      default: 0,\r\n      validator: (value: number) => {\r\n        return value >= 0 && value <= 360\r\n      },\r\n    },\r\n    value: {\r\n      type: Number,\r\n      default: 1,\r\n      validator: (value: number) => {\r\n        return value >= 0 && value <= 1\r\n      },\r\n    },\r\n    saturation: {\r\n      type: Number,\r\n      default: 0,\r\n      validator: (value: number) => {\r\n        return value >= 0 && value <= 1\r\n      },\r\n    },\r\n  },\r\n  emits: ['edit-start', 'edit-end', 'change'],\r\n  setup(props, { emit }) {\r\n    const currentTop = ref((1 - props.value) * 100)\r\n    const currentLeft = ref(props.saturation * 100)\r\n\r\n    let prevTop = currentTop.value\r\n    let prevLeft = currentLeft.value\r\n    let widthLimit: number\r\n    let heightLimit: number\r\n    let topStartAt: number\r\n    let leftStartAt: number\r\n\r\n    const { target: wrapper } = useModifier({\r\n      passive: false,\r\n      onKeyDown: (event, modifier) => {\r\n        if (modifier.up || modifier.down || modifier.left || modifier.right) {\r\n          event.preventDefault()\r\n\r\n          const step = event.ctrlKey ? 10 : event.altKey ? 0.5 : 2\r\n          const sign = modifier.up || modifier.left ? -1 : 1\r\n          const delta = step * sign\r\n\r\n          if (modifier.up || modifier.down) {\r\n            currentTop.value += delta\r\n          } else {\r\n            currentLeft.value += delta\r\n          }\r\n\r\n          verifyPosition()\r\n          prevTop = currentTop.value\r\n          prevLeft = currentLeft.value\r\n          handleChange()\r\n        }\r\n      },\r\n    })\r\n\r\n    const { moving: editing } = useMoving({\r\n      target: wrapper,\r\n      onStart: (state, event) => {\r\n        if (!wrapper.value || event.button > 0) {\r\n          return false\r\n        }\r\n\r\n        const rect = wrapper.value.getBoundingClientRect()\r\n        const { top, left, width, height } = rect\r\n\r\n        widthLimit = width\r\n        heightLimit = height\r\n\r\n        currentTop.value = ((topStartAt = state.clientY - top) / height) * 100\r\n        currentLeft.value = ((leftStartAt = state.clientX - left) / width) * 100\r\n\r\n        verifyPosition()\r\n        emit('edit-start')\r\n\r\n        let changed = false\r\n\r\n        if (Math.abs(currentTop.value - prevTop) >= 0.01) {\r\n          prevTop = currentTop.value\r\n          changed = true\r\n        }\r\n\r\n        if (Math.abs(currentLeft.value - prevLeft) >= 0.01) {\r\n          prevLeft = currentLeft.value\r\n          changed = true\r\n        }\r\n\r\n        changed && handleChange()\r\n      },\r\n      onMove: state => {\r\n        currentTop.value = ((topStartAt + state.deltaY) / heightLimit) * 100\r\n        currentLeft.value = ((leftStartAt + state.deltaX) / widthLimit) * 100\r\n\r\n        verifyPosition()\r\n        handleChange()\r\n      },\r\n      onEnd: () => {\r\n        emit('edit-end')\r\n      },\r\n    })\r\n\r\n    watch(\r\n      () => props.value,\r\n      value => {\r\n        currentTop.value = (1 - value) * 100\r\n        verifyPosition()\r\n      },\r\n      { immediate: true },\r\n    )\r\n    watch(\r\n      () => props.saturation,\r\n      value => {\r\n        currentLeft.value = value * 100\r\n        verifyPosition()\r\n      },\r\n      { immediate: true },\r\n    )\r\n\r\n    function verifyPosition() {\r\n      currentTop.value = toFixed(boundRange(currentTop.value, 0, 100), 3)\r\n      currentLeft.value = toFixed(boundRange(currentLeft.value, 0, 100), 3)\r\n    }\r\n\r\n    function handleChange() {\r\n      emit('change', {\r\n        h: props.hue,\r\n        s: currentLeft.value / 100,\r\n        v: toFixed(1 - currentTop.value / 100, 3),\r\n      })\r\n    }\r\n\r\n    return {\r\n      nh: useNameHelper('color-picker'),\r\n      currentTop,\r\n      currentLeft,\r\n      editing,\r\n\r\n      wrapper,\r\n\r\n      // handleMouseDown\r\n    }\r\n  },\r\n})\r\n</script>\r\n"],"names":["_sfc_main","defineComponent","value","props","emit","currentTop","ref","currentLeft","prevTop","prevLeft","widthLimit","heightLimit","topStartAt","leftStartAt","wrapper","useModifier","event","modifier","step","sign","delta","verifyPosition","handleChange","editing","useMoving","state","rect","top","left","width","height","changed","watch","toFixed","boundRange","useNameHelper"],"mappings":"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"}