@youcan/celeste 0.6.28 → 0.6.29

package/dist/es/color-area.js

@@ -1,176 +0,0 @@
-import { defineComponent, useCssVars, ref, useTemplateRef, computed, watch, onUnmounted, openBlock, createElementBlock, createElementVNode, normalizeStyle } from "vue";
-import { getAbsolutePosition, getPageXYFromEvent, resolveArrowDirection, clamp } from "./color.js";
-import { C as ColorPickerEmits, d as defineColorModel } from "./chunks/use-color-model.js";
-import { useUserPageSelection } from "./use-user-select.js";
-import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "color-area",
-  props: {
-    hue: {},
-    modelValue: {}
-  },
-  emits: ["change"].concat(ColorPickerEmits),
-  setup(__props, { emit: __emit }) {
-    useCssVars((_ctx) => ({
-      "170188f0": colorAreaBg.value
-    }));
-    const props = __props;
-    const emit = __emit;
-    const { preventPageUserSelect, allowPageUserSelect } = useUserPageSelection();
-    const pointerRef = ref(0);
-    const tinyColorRef = defineColorModel(props, emit);
-    const containerRef = useTemplateRef("color-area");
-    const hsv = computed(() => {
-      return tinyColorRef.value.toHsv();
-    });
-    const hue = computed(() => {
-      return props.hue ?? hsv.value.h;
-    });
-    const colorAreaBg = computed(() => {
-      return `hsl(${hue.value}, 100%, 50%)`;
-    });
-    const colorAreaThumbBg = computed(() => {
-      const { r, g, b } = tinyColorRef.value.toRgb();
-      return `rgb(${r}, ${g}, ${b})`;
-    });
-    const pointerTop = computed(() => {
-      return `${-(hsv.value.v * 100) + 1 + 100}%`;
-    });
-    const pointerLeft = computed(() => {
-      if (hsv.value.v <= 0.01) {
-        return `${pointerRef.value * 100}%`;
-      }
-      return `${hsv.value.s * 100}%`;
-    });
-    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 } = getAbsolutePosition(container);
-      const { x: pageX, y: pageY } = getPageXYFromEvent(e);
-      const left = clamp(pageX - xOffset, 0, containerWidth);
-      const top = clamp(pageY - yOffset, 0, containerHeight);
-      const saturation = left / containerWidth;
-      const brightness = 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 = 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;
-        }
-      }
-    }
-    onUnmounted(() => {
-      unbindEventListeners();
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref: "color-area",
-        class: "celeste-color-area",
-        role: "application",
-        "aria-label": "Saturation and brightness picker",
-        onMousedown: handleMouseDown,
-        onTouchmovePassive: handleChange,
-        onTouchstartPassive: handleChange
-      }, [
-        createElementVNode("div", {
-          class: "celeste-color-thumb",
-          style: 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__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bcf02776"]]);
-export {
-  ColorArea as default
-};