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

package/dist/chunk-PULVLME3.mjs

@@ -0,0 +1,196 @@
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/hue.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent, ref, computed, watch } from "vue";
+import { css } from "@mekari/pixel3-styled-system/css";
+var MpColorHue = defineComponent({
+  name: "MpColorHue",
+  props: {
+    value: {
+      type: Object
+    },
+    direction: {
+      type: String,
+      default: "horizontal"
+    }
+  },
+  emits: ["change"],
+  setup(props, {
+    emit
+  }) {
+    const oldHue = ref(0);
+    const pullDirection = ref("");
+    const containerNode = ref();
+    watch(() => props.value, (oldValue, newValue) => {
+      if (oldValue !== newValue) {
+        handlePullDirection();
+      }
+    });
+    const colors = computed(() => {
+      return props.value;
+    });
+    const pointerTop = 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 = 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 _createVNode("div", {
+        "data-pixel-component": "MpColorPickerHue",
+        "class": 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%)"
+        })
+      }, [_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": css({
+          cursor: "pointer",
+          margin: "0 2px",
+          position: "relative",
+          height: "100%"
+        }),
+        "onMousedown": handleMouseDown,
+        "onTouchmove": handleChange,
+        "onTouchstart": handleChange
+      }, [_createVNode("div", {
+        "id": "hue-pointer",
+        "role": "presentation",
+        "class": css({
+          position: "absolute",
+          zIndex: "2"
+        }),
+        "style": {
+          top: pointerTop.value,
+          left: pointerLeft.value
+        }
+      }, [_createVNode("div", {
+        "id": "hue-picker",
+        "class": 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)])])]);
+    };
+  }
+});
+
+export {
+  MpColorHue
+};

package/dist/chunk-QZ7VFGWC.mjs

@@ -0,0 +1,6 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+export {
+  __name
+};

package/dist/chunk-YLUI3RMF.mjs

@@ -0,0 +1,116 @@
+import {
+  MpColorHue
+} from "./chunk-PULVLME3.mjs";
+import {
+  MpColorInput
+} from "./chunk-5FWKSVUW.mjs";
+import {
+  MpColorPreset
+} from "./chunk-DVRBDVR4.mjs";
+import {
+  MpColorSaturation
+} from "./chunk-AEUPCATZ.mjs";
+import {
+  useColorPicker
+} from "./chunk-36OXI4E3.mjs";
+import {
+  colorPickerProps
+} from "./chunk-L5BRB7ES.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/color-picker.tsx
+import { isVNode as _isVNode, createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { MpText } from "@mekari/pixel3-text";
+import { MpPopover, MpPopoverTrigger, MpPopoverContent } from "@mekari/pixel3-popover";
+import { MpInput } from "@mekari/pixel3-input";
+import { MpIcon } from "@mekari/pixel3-icon";
+import { MpDivider } from "@mekari/pixel3-divider";
+import { css } from "@mekari/pixel3-styled-system/css";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !_isVNode(s);
+}
+__name(_isSlot, "_isSlot");
+var MpColorPicker = defineComponent({
+  name: "MpColorPicker",
+  props: colorPickerProps,
+  emits: ["change"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      rootAttrs,
+      popoverAttrs,
+      popoverTriggerAttrs,
+      boxColorAttrs,
+      inputTriggerAttrs,
+      iconDropDownAttrs,
+      popoverContentAttrs,
+      wrapperAdvanceAttrs,
+      wrapperBasicAttrs,
+      wrapperSaturationAttrs,
+      saturationAttrs,
+      wrapperHueAttrs,
+      hueAttrs,
+      wrapperInputAttrs,
+      inputHexAttrs,
+      inputRedAttrs,
+      inputGreenAttrs,
+      inputBlueAttrs,
+      inputFullAttrs,
+      boxPresetAttrs,
+      wrapperBasicPresetAttrs,
+      wrapperPresetAttrs,
+      presetBoxAttrs
+    } = useColorPicker(props, emit);
+    return () => {
+      const children = slots.default && slots.default();
+      const {
+        variant,
+        title,
+        isShowSaturation,
+        isShowHue,
+        isShowInput,
+        isShowPreset
+      } = props;
+      return _createVNode("div", rootAttrs.value, [_createVNode(MpPopover, popoverAttrs.value, {
+        default: () => [_createVNode(MpPopoverTrigger, null, {
+          default: () => [children ? _createVNode("div", null, [children]) : _createVNode("div", popoverTriggerAttrs.value, [_createVNode("div", boxColorAttrs.value, null), variant === "advance" && _createVNode(MpText, {
+            "color": "gray.400",
+            "style": "margin-top: 1px"
+          }, {
+            default: () => [_createTextVNode("#")]
+          }), variant === "advance" && _createVNode(MpInput, inputTriggerAttrs.value, null), _createVNode(MpIcon, iconDropDownAttrs.value, null)])]
+        }), _createVNode(MpPopoverContent, popoverContentAttrs.value, {
+          default: () => [variant === "advance" && _createVNode("div", wrapperAdvanceAttrs.value, [isShowSaturation && _createVNode("div", wrapperSaturationAttrs.value, [_createVNode(MpColorSaturation, saturationAttrs.value, null)]), isShowHue && _createVNode("div", wrapperHueAttrs.value, [_createVNode(MpColorHue, hueAttrs.value, null)]), isShowInput && _createVNode("div", wrapperInputAttrs.value, [_createVNode(MpColorInput, inputHexAttrs.value, null), _createVNode(MpColorInput, inputRedAttrs.value, null), _createVNode(MpColorInput, inputGreenAttrs.value, null), _createVNode(MpColorInput, inputBlueAttrs.value, null)]), isShowPreset && _createVNode(MpDivider, {
+            "class": css({
+              marginTop: "0",
+              marginBottom: "0"
+            })
+          }, null), isShowPreset && _createVNode("div", boxPresetAttrs.value, [_createVNode("div", wrapperPresetAttrs.value, [_createVNode(MpText, {
+            "size": "label-small",
+            "style": "width: 100%;"
+          }, {
+            default: () => [_createTextVNode("Present")]
+          }), props.preset.map((item) => {
+            return _createVNode(MpColorPreset, presetBoxAttrs(item), null);
+          })])])]), variant === "basic" && _createVNode("div", wrapperBasicAttrs.value, [_createVNode(MpText, {
+            "size": "body-small",
+            "color": "gray.600"
+          }, _isSlot(title) ? title : {
+            default: () => [title]
+          }), isShowPreset && _createVNode("div", wrapperBasicPresetAttrs.value, [props.preset.map((item) => {
+            return _createVNode(MpColorPreset, presetBoxAttrs(item), null);
+          })]), isShowInput && _createVNode("div", wrapperInputAttrs.value, [_createVNode(MpColorInput, inputFullAttrs.value, null)])])]
+        })]
+      })]);
+    };
+  }
+});
+
+export {
+  MpColorPicker
+};

package/dist/color-picker.d.mts

@@ -0,0 +1,129 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import { Placement } from './modules/color-picker.props.mjs';
+import * as vue from 'vue';
+
+declare const MpColorPicker: vue.DefineComponent<{
+    id: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    title: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    value: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    variant: {
+        type: vue.PropType<"advance" | "basic">;
+        default: string;
+    };
+    placement: {
+        type: vue.PropType<Placement>;
+        default: string;
+    };
+    preset: {
+        type: vue.PropType<string[]>;
+        default(): string[];
+    };
+    isShowPopover: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowSaturation: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowHue: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowInput: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowPreset: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "change"[], "change", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    id: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    title: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    value: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    variant: {
+        type: vue.PropType<"advance" | "basic">;
+        default: string;
+    };
+    placement: {
+        type: vue.PropType<Placement>;
+        default: string;
+    };
+    preset: {
+        type: vue.PropType<string[]>;
+        default(): string[];
+    };
+    isShowPopover: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowSaturation: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowHue: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowInput: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowPreset: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    id: string;
+    title: string;
+    value: string;
+    placeholder: string;
+    variant: "advance" | "basic";
+    placement: Placement;
+    preset: string[];
+    isShowPopover: boolean;
+    isShowSaturation: boolean;
+    isShowHue: boolean;
+    isShowInput: boolean;
+    isShowPreset: boolean;
+    isInvalid: boolean;
+}, {}>;
+
+export { MpColorPicker };

package/dist/color-picker.d.ts

@@ -0,0 +1,129 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import { Placement } from './modules/color-picker.props.js';
+import * as vue from 'vue';
+
+declare const MpColorPicker: vue.DefineComponent<{
+    id: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    title: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    value: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    variant: {
+        type: vue.PropType<"advance" | "basic">;
+        default: string;
+    };
+    placement: {
+        type: vue.PropType<Placement>;
+        default: string;
+    };
+    preset: {
+        type: vue.PropType<string[]>;
+        default(): string[];
+    };
+    isShowPopover: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowSaturation: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowHue: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowInput: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowPreset: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "change"[], "change", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    id: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    title: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    value: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    variant: {
+        type: vue.PropType<"advance" | "basic">;
+        default: string;
+    };
+    placement: {
+        type: vue.PropType<Placement>;
+        default: string;
+    };
+    preset: {
+        type: vue.PropType<string[]>;
+        default(): string[];
+    };
+    isShowPopover: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowSaturation: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowHue: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowInput: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isShowPreset: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    id: string;
+    title: string;
+    value: string;
+    placeholder: string;
+    variant: "advance" | "basic";
+    placement: Placement;
+    preset: string[];
+    isShowPopover: boolean;
+    isShowSaturation: boolean;
+    isShowHue: boolean;
+    isShowInput: boolean;
+    isShowPreset: boolean;
+    isInvalid: boolean;
+}, {}>;
+
+export { MpColorPicker };