@youcan/celeste 0.6.27 → 0.6.29

package/dist/cjs/color-area.js

@@ -1,175 +0,0 @@
-"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;