@mekari/pixel3-color-picker 0.0.1-dev.0

package/dist/color-picker.mjs

@@ -0,0 +1,13 @@
+import {
+  MpColorPicker
+} from "./chunk-YLUI3RMF.mjs";
+import "./chunk-PULVLME3.mjs";
+import "./chunk-5FWKSVUW.mjs";
+import "./chunk-DVRBDVR4.mjs";
+import "./chunk-AEUPCATZ.mjs";
+import "./chunk-36OXI4E3.mjs";
+import "./chunk-L5BRB7ES.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpColorPicker
+};

package/dist/hue.d.mts

@@ -0,0 +1,27 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+
+declare const MpColorHue: vue.DefineComponent<{
+    value: {
+        type: ObjectConstructor;
+    };
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "change"[], "change", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    value: {
+        type: ObjectConstructor;
+    };
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    direction: "horizontal" | "vertical";
+}, {}>;
+
+export { MpColorHue };

package/dist/hue.d.ts

@@ -0,0 +1,27 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+
+declare const MpColorHue: vue.DefineComponent<{
+    value: {
+        type: ObjectConstructor;
+    };
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "change"[], "change", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    value: {
+        type: ObjectConstructor;
+    };
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    direction: "horizontal" | "vertical";
+}, {}>;
+
+export { MpColorHue };

package/dist/hue.js

@@ -0,0 +1,217 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hue.tsx
+var hue_exports = {};
+__export(hue_exports, {
+  MpColorHue: () => MpColorHue
+});
+module.exports = __toCommonJS(hue_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_css = require("@mekari/pixel3-styled-system/css");
+var MpColorHue = (0, import_vue2.defineComponent)({
+  name: "MpColorHue",
+  props: {
+    value: {
+      type: Object
+    },
+    direction: {
+      type: String,
+      default: "horizontal"
+    }
+  },
+  emits: ["change"],
+  setup(props, {
+    emit
+  }) {
+    const oldHue = (0, import_vue2.ref)(0);
+    const pullDirection = (0, import_vue2.ref)("");
+    const containerNode = (0, import_vue2.ref)();
+    (0, import_vue2.watch)(() => props.value, (oldValue, newValue) => {
+      if (oldValue !== newValue) {
+        handlePullDirection();
+      }
+    });
+    const colors = (0, import_vue2.computed)(() => {
+      return props.value;
+    });
+    const pointerTop = (0, import_vue2.computed)(() => {
+      var _a;
+      const h = (_a = props.value) == null ? void 0 : _a.hsl.h;
+      if (props.direction === "vertical") {
+        if (h === 0 && pullDirection.value === "right")
+          return 0;
+        return -(h * 100 / 360) + 100 + "%";
+      } else {
+        return 0;
+      }
+    });
+    const pointerLeft = (0, import_vue2.computed)(() => {
+      var _a;
+      const h = (_a = props.value) == null ? void 0 : _a.hsl.h;
+      if (props.direction === "vertical") {
+        return 0;
+      } else {
+        if (h === 0 && pullDirection.value === "right")
+          return "100%";
+        return h * 100 / 360 + "%";
+      }
+    });
+    function handlePullDirection() {
+      var _a;
+      const h = (_a = props.value) == null ? void 0 : _a.hsl.h;
+      if (h !== 0 && h - oldHue.value > 0)
+        pullDirection.value = "right";
+      if (h !== 0 && h - oldHue.value < 0)
+        pullDirection.value = "left";
+      oldHue.value = h;
+    }
+    __name(handlePullDirection, "handlePullDirection");
+    function handleChange(e, skip) {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      !skip && e.preventDefault();
+      const container = containerNode.value;
+      if (!container) {
+        return;
+      }
+      const containerWidth = container.clientWidth;
+      const containerHeight = container.clientHeight;
+      const xOffset = container.getBoundingClientRect().left + window.scrollX;
+      const yOffset = container.getBoundingClientRect().top + window.scrollY;
+      const pageX = e.pageX || (e.touches ? e.touches[0].pageX : 0);
+      const pageY = e.pageY || (e.touches ? e.touches[0].pageY : 0);
+      const left = pageX - xOffset;
+      const top = pageY - yOffset;
+      let h;
+      let percent;
+      if (props.direction === "vertical") {
+        if (top < 0) {
+          h = 360;
+        } else if (top > containerHeight) {
+          h = 0;
+        } else {
+          percent = -(top * 100 / containerHeight) + 100;
+          h = 360 * percent / 100;
+        }
+        if (((_a = colors.value) == null ? void 0 : _a.hsl.h) !== h) {
+          emit("change", {
+            h,
+            s: (_b = colors.value) == null ? void 0 : _b.hsl.s,
+            l: (_c = colors.value) == null ? void 0 : _c.hsl.l,
+            a: (_d = colors.value) == null ? void 0 : _d.hsl.a,
+            source: "hsl"
+          });
+        }
+      } else {
+        if (left < 0) {
+          h = 0;
+        } else if (left > containerWidth) {
+          h = 360;
+        } else {
+          percent = left * 100 / containerWidth;
+          h = 360 * percent / 100;
+        }
+        if (((_e = colors.value) == null ? void 0 : _e.hsl.h) !== h) {
+          emit("change", {
+            h,
+            s: (_f = colors.value) == null ? void 0 : _f.hsl.s,
+            l: (_g = colors.value) == null ? void 0 : _g.hsl.l,
+            a: (_h = colors.value) == null ? void 0 : _h.hsl.a,
+            source: "hsl"
+          });
+        }
+      }
+    }
+    __name(handleChange, "handleChange");
+    function handleMouseDown(e) {
+      handleChange(e, true);
+      window.addEventListener("mousemove", handleChange);
+      window.addEventListener("mouseup", handleMouseUp);
+    }
+    __name(handleMouseDown, "handleMouseDown");
+    function handleMouseUp() {
+      unbindEventListeners();
+    }
+    __name(handleMouseUp, "handleMouseUp");
+    function unbindEventListeners() {
+      window.removeEventListener("mousemove", handleChange);
+      window.removeEventListener("mouseup", handleMouseUp);
+    }
+    __name(unbindEventListeners, "unbindEventListeners");
+    return () => {
+      var _a;
+      return (0, import_vue.createVNode)("div", {
+        "data-pixel-component": "MpColorPickerHue",
+        "class": (0, import_css.css)({
+          position: "absolute",
+          top: "0",
+          right: "0",
+          bottom: "0",
+          left: "0",
+          background: props.direction === "horizontal" ? "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)" : "linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)"
+        })
+      }, [(0, import_vue.createVNode)("div", {
+        "ref": containerNode,
+        "id": "hue-container",
+        "role": "slider",
+        "aria-valuenow": (_a = colors.value) == null ? void 0 : _a.hsl.h,
+        "aria-valuemin": "0",
+        "aria-valuemax": "360",
+        "class": (0, import_css.css)({
+          cursor: "pointer",
+          margin: "0 2px",
+          position: "relative",
+          height: "100%"
+        }),
+        "onMousedown": handleMouseDown,
+        "onTouchmove": handleChange,
+        "onTouchstart": handleChange
+      }, [(0, import_vue.createVNode)("div", {
+        "id": "hue-pointer",
+        "role": "presentation",
+        "class": (0, import_css.css)({
+          position: "absolute",
+          zIndex: "2"
+        }),
+        "style": {
+          top: pointerTop.value,
+          left: pointerLeft.value
+        }
+      }, [(0, import_vue.createVNode)("div", {
+        "id": "hue-picker",
+        "class": (0, import_css.css)({
+          cursor: "pointer",
+          marginTop: "-2px",
+          width: "32px",
+          height: "32px",
+          transform: "translateX(-16px)",
+          borderRadius: "24px",
+          boxShadow: "0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.05)",
+          background: "white"
+        })
+      }, null)])])]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpColorHue
+});

package/dist/hue.mjs

@@ -0,0 +1,7 @@
+import {
+  MpColorHue
+} from "./chunk-PULVLME3.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpColorHue
+};

package/dist/index.d.mts

@@ -0,0 +1,4 @@
+export { MpColorPicker } from './color-picker.mjs';
+import 'vue/jsx-runtime';
+import './modules/color-picker.props.mjs';
+import 'vue';

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { MpColorPicker } from './color-picker.js';
+import 'vue/jsx-runtime';
+import './modules/color-picker.props.js';
+import 'vue';