vexip-ui/lib/components/color-picker/color-palette.vue2.cjs.map

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

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