@youcan/celeste 0.6.29 → 0.6.30

package/dist/cjs/color-area.js

@@ -0,0 +1,175 @@
+"use strict";
+const Mo = require("vue");
+const color = require("./color.js");
+const useColorModel = require("./chunks/use-color-model.js");
+const useUserSelect = require("./use-user-select.js");
+const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
+const _sfc_main = /* @__PURE__ */ Mo.defineComponent({
+  __name: "color-area",
+  props: {
+    hue: {},
+    modelValue: {}
+  },
+  emits: ["change"].concat(useColorModel.ColorPickerEmits),
+  setup(__props, { emit: __emit }) {
+    Mo.useCssVars((_ctx) => ({
+      "170188f0": colorAreaBg.value
+    }));
+    const props = __props;
+    const emit = __emit;
+    const { preventPageUserSelect, allowPageUserSelect } = useUserSelect.useUserPageSelection();
+    const pointerRef = Mo.ref(0);
+    const tinyColorRef = useColorModel.defineColorModel(props, emit);
+    const containerRef = Mo.useTemplateRef("color-area");
+    const hsv = Mo.computed(() => {
+      return tinyColorRef.value.toHsv();
+    });
+    const hue = Mo.computed(() => {
+      return props.hue ?? hsv.value.h;
+    });
+    const colorAreaBg = Mo.computed(() => {
+      return `hsl(${hue.value}, 100%, 50%)`;
+    });
+    const colorAreaThumbBg = Mo.computed(() => {
+      const { r, g, b } = tinyColorRef.value.toRgb();
+      return `rgb(${r}, ${g}, ${b})`;
+    });
+    const pointerTop = Mo.computed(() => {
+      return `${-(hsv.value.v * 100) + 1 + 100}%`;
+    });
+    const pointerLeft = Mo.computed(() => {
+      if (hsv.value.v <= 0.01) {
+        return `${pointerRef.value * 100}%`;
+      }
+      return `${hsv.value.s * 100}%`;
+    });
+    Mo.watch(() => props.hue, (newHue, oldHue) => {
+      if (newHue !== oldHue) {
+        const { s, v, a } = hsv.value;
+        onChange({
+          h: newHue,
+          s: s * 100,
+          v: v * 100,
+          a
+        });
+      }
+    });
+    function handleChange(e, skip = false) {
+      e.preventDefault();
+      const container = containerRef.value;
+      if (!container) {
+        return;
+      }
+      const containerWidth = container.clientWidth;
+      const containerHeight = container.clientHeight;
+      const { x: xOffset, y: yOffset } = color.getAbsolutePosition(container);
+      const { x: pageX, y: pageY } = color.getPageXYFromEvent(e);
+      const left = color.clamp(pageX - xOffset, 0, containerWidth);
+      const top = color.clamp(pageY - yOffset, 0, containerHeight);
+      const saturation = left / containerWidth;
+      const brightness = color.clamp(1 - top / containerHeight, 0, 1);
+      pointerRef.value = saturation;
+      let s = Math.round(saturation * 100);
+      let v = Math.round(brightness * 100);
+      if (s === 1) {
+        s = 0.01;
+      }
+      if (v === 1) {
+        v = 0.01;
+      }
+      onChange({
+        h: hue.value,
+        s,
+        v,
+        a: hsv.value.a
+      });
+    }
+    function onChange(newColor) {
+      tinyColorRef.value = newColor;
+    }
+    function handleMouseDown() {
+      preventPageUserSelect();
+      window.addEventListener("mousemove", handleChange);
+      window.addEventListener("mouseup", handleChange);
+      window.addEventListener("mouseup", handleMouseUp);
+    }
+    function handleMouseUp() {
+      allowPageUserSelect();
+      unbindEventListeners();
+    }
+    function unbindEventListeners() {
+      window.removeEventListener("mousemove", handleChange);
+      window.removeEventListener("mouseup", handleChange);
+      window.removeEventListener("mouseup", handleMouseUp);
+    }
+    function handleKeyDown(e) {
+      const direction = color.resolveArrowDirection(e);
+      if (!direction) {
+        return;
+      }
+      e.preventDefault();
+      switch (direction) {
+        case "left": {
+          const newSaturation = hsv.value.s - 0.01;
+          onChange({
+            ...hsv.value,
+            s: newSaturation >= 0 ? newSaturation : 0
+          });
+          break;
+        }
+        case "right": {
+          const newSaturation = hsv.value.s + 0.01;
+          onChange({
+            ...hsv.value,
+            s: newSaturation > 1 ? 1 : newSaturation
+          });
+          break;
+        }
+        case "up": {
+          const newBrightness = hsv.value.v + 0.01;
+          onChange({
+            ...hsv.value,
+            v: newBrightness > 1 ? 1 : newBrightness
+          });
+          break;
+        }
+        case "down": {
+          const newBrightness = hsv.value.v - 0.01;
+          onChange({
+            ...hsv.value,
+            v: newBrightness < 0 ? 0 : newBrightness
+          });
+          break;
+        }
+      }
+    }
+    Mo.onUnmounted(() => {
+      unbindEventListeners();
+    });
+    return (_ctx, _cache) => {
+      return Mo.openBlock(), Mo.createElementBlock("div", {
+        ref: "color-area",
+        class: "celeste-color-area",
+        role: "application",
+        "aria-label": "Saturation and brightness picker",
+        onMousedown: handleMouseDown,
+        onTouchmovePassive: handleChange,
+        onTouchstartPassive: handleChange
+      }, [
+        Mo.createElementVNode("div", {
+          class: "celeste-color-thumb",
+          style: Mo.normalizeStyle({ top: pointerTop.value, left: pointerLeft.value, background: colorAreaThumbBg.value }),
+          role: "slider",
+          tabindex: "0",
+          "aria-valuemin": "0",
+          "aria-valuemax": "1",
+          "aria-label": "press arrow to change saturation or brightness",
+          "aria-valuenow": "?",
+          onKeydown: handleKeyDown
+        }, null, 36)
+      ], 544);
+    };
+  }
+});
+const ColorArea = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-bcf02776"]]);
+module.exports = ColorArea;