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

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

{"version":3,"file":"color-alpha.vue2.cjs","sources":["../../../components/color-picker/color-alpha.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"wrapper\"\n    :class=\"nh.be('alpha')\"\n    tabindex=\"-1\"\n    role=\"group\"\n  >\n    <div\n      :class=\"nh.be('opacity')\"\n      :style=\"{\n        backgroundImage: `linear-gradient(to right, rgba(${rgbString}, 0) 0%, rgb(${rgbString}) 100%)`\n      }\"\n    ></div>\n    <div :class=\"nh.be('alpha-handler')\" :style=\"{ left: `${currentLeft}%` }\"></div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, 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\nimport type { PropType } from 'vue'\nimport type { RGBColor } from '@vexip-ui/utils'\n\nexport default defineComponent({\n  name: 'ColorAlpha',\n  props: {\n    rgb: {\n      type: Object as PropType<RGBColor>,\n      default: () => {\n        return { r: 0, g: 0, b: 0 }\n      },\n      validator: (value: RGBColor) => {\n        return 'r' in value && 'g' in value && 'b' in value\n      },\n    },\n    alpha: {\n      type: Number,\n      default: 1,\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 currentLeft = ref(props.alpha * 100)\n\n    let prevLeft = currentLeft.value\n    let widthLimit: number\n    let leftStartAt: number\n\n    const { target: wrapper } = useModifier({\n      passive: false,\n      onKeyDown: (event, modifier) => {\n        if (modifier.left || modifier.right) {\n          event.preventDefault()\n\n          const step = event.ctrlKey ? 10 : event.altKey ? 0.5 : 2\n          const delta = step * (modifier.left ? -1 : 1)\n\n          currentLeft.value += delta\n\n          verifyPosition()\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 { left, width } = rect\n\n        widthLimit = width\n        currentLeft.value = ((leftStartAt = state.clientX - left) / width) * 100\n\n        verifyPosition()\n        emit('edit-start')\n\n        if (Math.abs(currentLeft.value - prevLeft) >= 0.01) {\n          prevLeft = currentLeft.value\n          handleChange()\n        }\n      },\n      onMove: state => {\n        currentLeft.value = ((leftStartAt + state.deltaX) / widthLimit) * 100\n\n        verifyPosition()\n        handleChange()\n      },\n      onEnd: () => {\n        emit('edit-end')\n      },\n    })\n\n    const rgbString = computed(() => {\n      const { r, g, b } = props.rgb\n\n      return `${r}, ${g}, ${b}`\n    })\n\n    verifyPosition()\n\n    watch(\n      () => props.alpha,\n      value => {\n        currentLeft.value = value * 100\n        verifyPosition()\n      },\n      { immediate: true },\n    )\n\n    function verifyPosition() {\n      currentLeft.value = toFixed(boundRange(currentLeft.value, 0, 100), 3)\n    }\n\n    function handleChange() {\n      emit('change', currentLeft.value / 100)\n    }\n\n    return {\n      nh: useNameHelper('color-picker'),\n      currentLeft,\n      editing,\n\n      rgbString,\n\n      wrapper,\n    }\n  },\n})\n</script>\n"],"names":["_sfc_main","defineComponent","value","props","emit","currentLeft","ref","prevLeft","widthLimit","leftStartAt","wrapper","useModifier","event","modifier","delta","verifyPosition","handleChange","editing","useMoving","state","rect","left","width","rgbString","computed","r","g","b","watch","toFixed","boundRange","useNameHelper"],"mappings":"4HA2BAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,MAAO,CACL,IAAK,CACH,KAAM,OACN,QAAS,KACA,CAAE,EAAG,EAAG,EAAG,EAAG,EAAG,CAAE,GAE5B,UAAYC,GACH,MAAOA,GAAS,MAAOA,GAAS,MAAOA,CAElD,EACA,MAAO,CACL,KAAM,OACN,QAAS,EACT,UAAYA,GACHA,GAAS,GAAKA,GAAS,CAChC,CAEJ,EACA,MAAO,CAAC,aAAc,WAAY,QAAQ,EAC1C,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAcC,EAAA,IAAIH,EAAM,MAAQ,GAAG,EAEzC,IAAII,EAAWF,EAAY,MACvBG,EACAC,EAEJ,KAAM,CAAE,OAAQC,CAAQ,EAAIC,cAAY,CACtC,QAAS,GACT,UAAW,CAACC,EAAOC,IAAa,CAC1B,GAAAA,EAAS,MAAQA,EAAS,MAAO,CACnCD,EAAM,eAAe,EAGrB,MAAME,GADOF,EAAM,QAAU,GAAKA,EAAM,OAAS,GAAM,IACjCC,EAAS,KAAO,GAAK,GAE3CR,EAAY,OAASS,EAENC,EAAA,EACfR,EAAWF,EAAY,MACVW,EAAA,CAAA,CACf,CACF,CACD,EAEK,CAAE,OAAQC,CAAQ,EAAIC,YAAU,CACpC,OAAQR,EACR,QAAS,CAACS,EAAOP,IAAU,CACzB,GAAI,CAACF,EAAQ,OAASE,EAAM,OAAS,EAC5B,MAAA,GAGH,MAAAQ,EAAOV,EAAQ,MAAM,sBAAsB,EAC3C,CAAE,KAAAW,EAAM,MAAAC,CAAA,EAAUF,EAEXZ,EAAAc,EACbjB,EAAY,OAAUI,EAAcU,EAAM,QAAUE,GAAQC,EAAS,IAEtDP,EAAA,EACfX,EAAK,YAAY,EAEb,KAAK,IAAIC,EAAY,MAAQE,CAAQ,GAAK,MAC5CA,EAAWF,EAAY,MACVW,EAAA,EAEjB,EACA,OAAiBG,GAAA,CACfd,EAAY,OAAUI,EAAcU,EAAM,QAAUX,EAAc,IAEnDO,EAAA,EACFC,EAAA,CACf,EACA,MAAO,IAAM,CACXZ,EAAK,UAAU,CAAA,CACjB,CACD,EAEKmB,EAAYC,EAAAA,SAAS,IAAM,CAC/B,KAAM,CAAE,EAAAC,EAAG,EAAAC,EAAG,EAAAC,GAAMxB,EAAM,IAE1B,MAAO,GAAGsB,CAAC,KAAKC,CAAC,KAAKC,CAAC,EAAA,CACxB,EAEcZ,EAAA,EAEfa,EAAA,MACE,IAAMzB,EAAM,MACHD,GAAA,CACPG,EAAY,MAAQH,EAAQ,IACba,EAAA,CACjB,EACA,CAAE,UAAW,EAAK,CACpB,EAEA,SAASA,GAAiB,CACZV,EAAA,MAAQwB,UAAQC,aAAWzB,EAAY,MAAO,EAAG,GAAG,EAAG,CAAC,CAAA,CAGtE,SAASW,GAAe,CACjBZ,EAAA,SAAUC,EAAY,MAAQ,GAAG,CAAA,CAGjC,MAAA,CACL,GAAI0B,gBAAc,cAAc,EAChC,YAAA1B,EACA,QAAAY,EAEA,UAAAM,EAEA,QAAAb,CACF,CAAA,CAEJ,CAAC"}