@extclp/vexip-ui/es/components/color-picker/color-alpha.vue.mjs.map

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

{"version":3,"file":"color-alpha.vue.mjs","sources":["../../../components/color-picker/color-alpha.vue"],"sourcesContent":["<template>\r\n  <div\r\n    ref=\"wrapper\"\r\n    :class=\"nh.be('alpha')\"\r\n    tabindex=\"-1\"\r\n    role=\"group\"\r\n  >\r\n    <div\r\n      :class=\"nh.be('opacity')\"\r\n      :style=\"{\r\n        backgroundImage: `linear-gradient(to right, rgba(${rgbString}, 0) 0%, rgb(${rgbString}) 100%)`\r\n      }\"\r\n    ></div>\r\n    <div :class=\"nh.be('alpha-handler')\" :style=\"{ left: `${currentLeft}%` }\"></div>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { computed, 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\nimport type { PropType } from 'vue'\r\nimport type { RGBColor } from '@vexip-ui/utils'\r\n\r\nexport default defineComponent({\r\n  name: 'ColorAlpha',\r\n  props: {\r\n    rgb: {\r\n      type: Object as PropType<RGBColor>,\r\n      default: () => {\r\n        return { r: 0, g: 0, b: 0 }\r\n      },\r\n      validator: (value: RGBColor) => {\r\n        return 'r' in value && 'g' in value && 'b' in value\r\n      },\r\n    },\r\n    alpha: {\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  },\r\n  emits: ['edit-start', 'edit-end', 'change'],\r\n  setup(props, { emit }) {\r\n    const currentLeft = ref(props.alpha * 100)\r\n\r\n    let prevLeft = currentLeft.value\r\n    let widthLimit: 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.left || modifier.right) {\r\n          event.preventDefault()\r\n\r\n          const step = event.ctrlKey ? 10 : event.altKey ? 0.5 : 2\r\n          const delta = step * (modifier.left ? -1 : 1)\r\n\r\n          currentLeft.value += delta\r\n\r\n          verifyPosition()\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 { left, width } = rect\r\n\r\n        widthLimit = width\r\n        currentLeft.value = ((leftStartAt = state.clientX - left) / width) * 100\r\n\r\n        verifyPosition()\r\n        emit('edit-start')\r\n\r\n        if (Math.abs(currentLeft.value - prevLeft) >= 0.01) {\r\n          prevLeft = currentLeft.value\r\n          handleChange()\r\n        }\r\n      },\r\n      onMove: state => {\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    const rgbString = computed(() => {\r\n      const { r, g, b } = props.rgb\r\n\r\n      return `${r}, ${g}, ${b}`\r\n    })\r\n\r\n    verifyPosition()\r\n\r\n    watch(\r\n      () => props.alpha,\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      currentLeft.value = toFixed(boundRange(currentLeft.value, 0, 100), 3)\r\n    }\r\n\r\n    function handleChange() {\r\n      emit('change', currentLeft.value / 100)\r\n    }\r\n\r\n    return {\r\n      nh: useNameHelper('color-picker'),\r\n      currentLeft,\r\n      editing,\r\n\r\n      rgbString,\r\n\r\n      wrapper,\r\n    }\r\n  },\r\n})\r\n</script>\r\n"],"names":["_createElementBlock","_normalizeClass","_ctx","_createElementVNode","_normalizeStyle"],"mappings":";;;;cACEA,EAaM,OAAA;AAAA,IAZJ,KAAI;AAAA,IACH,OAAKC,EAAEC,EAAA,GAAG,GAAE,OAAA,CAAA;AAAA,IACb,UAAS;AAAA,IACT,MAAK;AAAA,EAAA,GAAA;AAAA,IAELC,EAKO,OAAA;AAAA,MAJJ,OAAKF,EAAEC,EAAA,GAAG,GAAE,SAAA,CAAA;AAAA,MACZ,OAAKE,EAAA;AAAA,QAAgE,iBAAA,kCAAAF,EAAA,SAAS,gBAAgBA,EAAS,SAAA;AAAA,MAAA,CAAA;AAAA;IAI1GC,EAAgF,OAAA;AAAA,MAA1E,OAAKF,EAAEC,EAAA,GAAG,GAAE,eAAA,CAAA;AAAA,MAAoB,OAAKE,aAAaF,EAAW,WAAA,IAAA,CAAA;AAAA,IAAA,GAAA,MAAA,CAAA;AAAA;;;"}