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

package/dist/chunk-36OXI4E3.mjs

@@ -0,0 +1,347 @@
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/color-picker.hooks.ts
+import { computed, watch, ref, toRefs, onMounted } from "vue";
+import tinycolor from "tinycolor2";
+import { getUniqueId } from "@mekari/pixel3-utils";
+import { colorPickerSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
+import { css, cx } from "@mekari/pixel3-styled-system/css";
+import { token } from "@mekari/pixel3-styled-system/tokens";
+function useColorPicker(props, emit) {
+  const {
+    id,
+    value,
+    placeholder,
+    variant,
+    placement,
+    isShowPopover,
+    isInvalid
+  } = toRefs(props);
+  const val = ref(_colorChange(value.value));
+  const colorInput = ref("");
+  const isPopoverOpen = ref(false);
+  const getId = id.value || getUniqueId("", "color-picker").value;
+  const colors = computed({
+    get() {
+      return val.value;
+    },
+    set(newVal) {
+      val.value = newVal;
+      emit("change", newVal);
+    }
+  });
+  const hex = computed(() => {
+    const hex2 = colors.value.hex;
+    return hex2.replace("#", "");
+  });
+  const borderColor = computed(() => {
+    if (isInvalid.value) {
+      return "red.400";
+    }
+    if (!isInvalid.value && isFocused.value) {
+      return "blue.400";
+    }
+    return "gray.100";
+  });
+  const isFocused = computed(() => {
+    return isPopoverOpen.value;
+  });
+  const rootAttrs = computed(() => {
+    return {
+      "data-pixel-component": "MpColorPicker",
+      id: getId,
+      class: colorPickerSlotRecipe().root,
+      style: {
+        width: variant.value === "advance" ? "280px" : "72px"
+      }
+    };
+  });
+  const popoverAttrs = computed(() => {
+    return {
+      id: `popover-${getId}`,
+      placement: placement.value,
+      defaultIsOpen: isShowPopover.value,
+      initialFocusRef: `#input-${getId}`,
+      onOpen: handleOpenPopover,
+      onClose: handleClosePopover
+    };
+  });
+  const popoverTriggerAttrs = computed(() => {
+    return {
+      tabindex: "0",
+      class: cx(css({
+        boxShadow: isPopoverOpen.value && !isInvalid.value ? "outline" : "none",
+        _hover: {
+          borderColor: isPopoverOpen.value && !isInvalid.value ? "blue.500 !important" : "gray.400 !important"
+        }
+      }), colorPickerSlotRecipe().popoverTrigger),
+      style: {
+        borderColor: token(`colors.${borderColor.value}`)
+      }
+    };
+  });
+  const boxColorAttrs = computed(() => {
+    return {
+      class: colorPickerSlotRecipe().boxColor,
+      style: {
+        background: colors.value.hex
+      }
+    };
+  });
+  const inputTriggerAttrs = computed(() => {
+    return {
+      id: `input-${getId}`,
+      type: "text",
+      autocomplete: "off",
+      variant: "unstyled",
+      maxlength: "6",
+      value: colorInput.value,
+      placeholder: placeholder.value,
+      class: colorPickerSlotRecipe().inputTrigger,
+      onInput: handleInputTrigger
+    };
+  });
+  const iconDropDownAttrs = computed(() => {
+    return {
+      name: "chevrons-down",
+      size: "sm",
+      class: colorPickerSlotRecipe().iconDropdown
+    };
+  });
+  const popoverContentAttrs = computed(() => {
+    return {
+      class: colorPickerSlotRecipe().popoverContent,
+      style: {
+        width: variant.value === "advance" ? "280px" : "188px"
+      }
+    };
+  });
+  const wrapperAdvanceAttrs = computed(() => {
+    return {
+      class: colorPickerSlotRecipe().wrapperAdvance
+    };
+  });
+  const wrapperBasicAttrs = computed(() => {
+    return {
+      class: colorPickerSlotRecipe().wrapperBasic
+    };
+  });
+  const wrapperSaturationAttrs = computed(() => {
+    return {
+      class: colorPickerSlotRecipe().wrapperSaturation
+    };
+  });
+  const saturationAttrs = computed(() => {
+    return {
+      value: colors.value,
+      onChange: childChange
+    };
+  });
+  const wrapperHueAttrs = computed(() => {
+    return {
+      class: colorPickerSlotRecipe().wrapperHue
+    };
+  });
+  const hueAttrs = computed(() => {
+    return {
+      value: colors.value,
+      onChange: childChange
+    };
+  });
+  const wrapperInputAttrs = computed(() => {
+    return {
+      class: colorPickerSlotRecipe().wrapperInput
+    };
+  });
+  const inputHexAttrs = computed(() => {
+    return {
+      label: "hex",
+      width: "88px",
+      value: hex.value,
+      onChange: inputChange
+    };
+  });
+  const inputFullAttrs = computed(() => {
+    return {
+      label: "hex",
+      width: "full",
+      value: hex.value,
+      onChange: inputChange
+    };
+  });
+  const inputRedAttrs = computed(() => {
+    return {
+      label: "r",
+      width: "48px",
+      value: colors.value.rgba.r,
+      onChange: inputChange
+    };
+  });
+  const inputGreenAttrs = computed(() => {
+    return {
+      label: "g",
+      width: "48px",
+      value: colors.value.rgba.g,
+      onChange: inputChange
+    };
+  });
+  const inputBlueAttrs = computed(() => {
+    return {
+      label: "b",
+      width: "48px",
+      value: colors.value.rgba.b,
+      onChange: inputChange
+    };
+  });
+  const boxPresetAttrs = computed(() => {
+    return {
+      class: colorPickerSlotRecipe().boxPreset
+    };
+  });
+  const wrapperPresetAttrs = computed(() => {
+    return {
+      class: colorPickerSlotRecipe().wrapperPreset
+    };
+  });
+  const wrapperBasicPresetAttrs = computed(() => {
+    return {
+      class: colorPickerSlotRecipe().wrapperBasicPreset
+    };
+  });
+  const presetBoxAttrs = /* @__PURE__ */ __name((item) => {
+    return {
+      value: item,
+      isActive: item.toLowerCase() === colors.value.hex.toLowerCase(),
+      onClick: childChange
+    };
+  }, "presetBoxAttrs");
+  function isValidHex(hex2) {
+    return tinycolor(hex2).isValid();
+  }
+  __name(isValidHex, "isValidHex");
+  function childChange(data) {
+    colorChange(data);
+  }
+  __name(childChange, "childChange");
+  function colorChange(data, oldHue) {
+    colors.value = _colorChange(data, oldHue);
+  }
+  __name(colorChange, "colorChange");
+  function _colorChange(data, oldHue) {
+    let color;
+    if (data && data.hsl) {
+      color = tinycolor(data.hsl);
+    } else if (data && data.hex && data.hex.length > 0) {
+      color = tinycolor(data.hex);
+    } else if (data && data.hsv) {
+      color = tinycolor(data.hsv);
+    } else if (data && data.rgba) {
+      color = tinycolor(data.rgba);
+    } else if (data && data.rgb) {
+      color = tinycolor(data.rgb);
+    } else {
+      color = tinycolor(data);
+    }
+    const hsl = color.toHsl();
+    const hsv = color.toHsv();
+    if (hsl.s === 0) {
+      hsv.h = hsl.h = data.h || data.hsl && data.hsl.h || oldHue || 0;
+    }
+    return {
+      hsl,
+      hex: color.toHexString().toUpperCase(),
+      hex8: color.toHex8String().toUpperCase(),
+      rgba: color.toRgb(),
+      hsv,
+      oldHue: data.h || oldHue || hsl.h,
+      source: data.source
+    };
+  }
+  __name(_colorChange, "_colorChange");
+  function inputChange(data) {
+    if (!data) {
+      return;
+    }
+    if (data.hex) {
+      isValidHex(data.hex) && colorChange({
+        hex: data.hex,
+        source: "hex"
+      });
+    } else if (data.r || data.g || data.b || data.a) {
+      colorChange({
+        r: data.r || colors.value.rgba.r,
+        g: data.g || colors.value.rgba.g,
+        b: data.b || colors.value.rgba.b,
+        a: data.a || colors.value.rgba.a,
+        source: "rgba"
+      });
+    }
+  }
+  __name(inputChange, "inputChange");
+  function handleInputTrigger(e) {
+    const target = e.target;
+    const value2 = target.value;
+    const data = {
+      hex: "",
+      "#": ""
+    };
+    data["hex"] = value2;
+    if (data.hex === void 0 && data["#"] === void 0) {
+      inputChange(data);
+    } else if (value2.length > 5) {
+      inputChange(data);
+    }
+  }
+  __name(handleInputTrigger, "handleInputTrigger");
+  function handleOpenPopover() {
+    isPopoverOpen.value = true;
+    colorInput.value = hex.value;
+  }
+  __name(handleOpenPopover, "handleOpenPopover");
+  function handleClosePopover() {
+    isPopoverOpen.value = false;
+    colorInput.value = hex.value;
+  }
+  __name(handleClosePopover, "handleClosePopover");
+  watch(() => value.value, (newValue, oldValue) => {
+    if (newValue !== oldValue) {
+      val.value = _colorChange(newValue);
+      colorInput.value = hex.value;
+    }
+  });
+  onMounted(() => {
+    colorInput.value = hex.value;
+  });
+  return {
+    rootAttrs,
+    popoverAttrs,
+    popoverTriggerAttrs,
+    boxColorAttrs,
+    inputTriggerAttrs,
+    iconDropDownAttrs,
+    popoverContentAttrs,
+    wrapperAdvanceAttrs,
+    wrapperBasicAttrs,
+    wrapperSaturationAttrs,
+    saturationAttrs,
+    wrapperHueAttrs,
+    hueAttrs,
+    wrapperInputAttrs,
+    inputHexAttrs,
+    inputRedAttrs,
+    inputGreenAttrs,
+    inputBlueAttrs,
+    inputFullAttrs,
+    boxPresetAttrs,
+    wrapperPresetAttrs,
+    wrapperBasicPresetAttrs,
+    presetBoxAttrs
+  };
+}
+__name(useColorPicker, "useColorPicker");
+
+export {
+  useColorPicker
+};

package/dist/chunk-5FWKSVUW.mjs

@@ -0,0 +1,89 @@
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/input.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent, computed } from "vue";
+import { MpText } from "@mekari/pixel3-text";
+import { MpInput } from "@mekari/pixel3-input";
+import { css } from "@mekari/pixel3-styled-system/css";
+var MpColorInput = defineComponent({
+  name: "MpColorInput",
+  props: {
+    value: {
+      type: [String, Number],
+      default: ""
+    },
+    label: {
+      type: String,
+      default: "hex"
+    },
+    width: {
+      type: String
+    },
+    max: {
+      type: Number
+    }
+  },
+  emits: ["change"],
+  setup(props, {
+    emit
+  }) {
+    const val = computed({
+      get() {
+        return props.value;
+      },
+      set(v) {
+        if (!(props.max === void 0) && +v > props.max) {
+          return props.max;
+        } else {
+          return v;
+        }
+      }
+    });
+    function handleInput(e) {
+      console.log("asdad", e);
+      const target = e.target;
+      const value = target.value;
+      const data = {};
+      data[props.label] = value;
+      if (data.hex === void 0 && data["#"] === void 0) {
+        emit("change", data);
+      } else if (value.length > 5) {
+        emit("change", data);
+      }
+    }
+    __name(handleInput, "handleInput");
+    return () => {
+      return _createVNode("div", {
+        "data-pixel-component": "MpColorPickerInput",
+        "class": css({
+          display: "flex",
+          flexDirection: "column",
+          gap: "1"
+        })
+      }, [_createVNode("div", null, [_createVNode(MpText, {
+        "size": "label-small",
+        "class": css({
+          textTransform: "capitalize"
+        })
+      }, {
+        default: () => [props.label]
+      })]), _createVNode(MpInput, {
+        "value": val.value,
+        "size": "sm",
+        "maxlength": props.label === "hex" ? "7" : "3",
+        "style": {
+          width: props.width,
+          minWidth: props.width
+        },
+        "onInput": handleInput
+      }, null)]);
+    };
+  }
+});
+
+export {
+  MpColorInput
+};

package/dist/chunk-AEUPCATZ.mjs

@@ -0,0 +1,156 @@
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/saturation.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent, ref, computed } from "vue";
+import clamp from "clamp";
+import throttle from "lodash.throttle";
+import { css } from "@mekari/pixel3-styled-system/css";
+var MpColorSaturation = defineComponent({
+  name: "MpColorSaturation",
+  props: {
+    value: {
+      type: Object
+    }
+  },
+  emits: ["change"],
+  setup(props, {
+    emit
+  }) {
+    const containerNode = ref();
+    const colors = computed(() => {
+      return props.value;
+    });
+    const bgColor = computed(() => {
+      var _a;
+      return `hsl(${(_a = colors.value) == null ? void 0 : _a.hsv.h}, 100%, 50%)`;
+    });
+    const pointerTop = computed(() => {
+      var _a;
+      return -(((_a = colors.value) == null ? void 0 : _a.hsv.v) * 100) + 1 + 100 + "%";
+    });
+    const pointerLeft = computed(() => {
+      var _a;
+      return ((_a = colors.value) == null ? void 0 : _a.hsv.s) * 100 + "%";
+    });
+    const handleThrottle = throttle((fn, data) => {
+      fn(data);
+    }, 20, {
+      leading: true,
+      trailing: false
+    });
+    function handleChange(e, skip) {
+      var _a, _b;
+      !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 = clamp(pageX - xOffset, 0, containerWidth);
+      const top = clamp(pageY - yOffset, 0, containerHeight);
+      const saturation = left / containerWidth;
+      const bright = clamp(-(top / containerHeight) + 1, 0, 1);
+      handleThrottle(onChange, {
+        h: (_a = colors.value) == null ? void 0 : _a.hsv.h,
+        s: saturation,
+        v: bright,
+        a: (_b = colors.value) == null ? void 0 : _b.hsv.a,
+        source: "hsva"
+      });
+    }
+    __name(handleChange, "handleChange");
+    function onChange(param) {
+      emit("change", param);
+    }
+    __name(onChange, "onChange");
+    function handleMouseDown() {
+      window.addEventListener("mousemove", handleChange);
+      window.addEventListener("mouseup", handleChange);
+      window.addEventListener("mouseup", handleMouseUp);
+    }
+    __name(handleMouseDown, "handleMouseDown");
+    function handleMouseUp() {
+      unbindEventListeners();
+    }
+    __name(handleMouseUp, "handleMouseUp");
+    function unbindEventListeners() {
+      window.removeEventListener("mousemove", handleChange);
+      window.removeEventListener("mouseup", handleChange);
+      window.removeEventListener("mouseup", handleMouseUp);
+    }
+    __name(unbindEventListeners, "unbindEventListeners");
+    return () => {
+      return _createVNode("div", {
+        "ref": containerNode,
+        "data-pixel-component": "MpColorPickerSaturation",
+        "id": "saturation-container",
+        "class": css({
+          cursor: "pointer",
+          position: "absolute",
+          top: "0",
+          right: "0",
+          bottom: "0",
+          left: "0"
+        }),
+        "style": {
+          background: bgColor.value
+        },
+        "onMousedown": handleMouseDown,
+        "onTouchmove": handleChange,
+        "onTouchstart": handleChange
+      }, [_createVNode("div", {
+        "id": "saturation-white",
+        "class": css({
+          position: "absolute",
+          top: "0",
+          right: "0",
+          bottom: "0",
+          left: "0",
+          background: "linear-gradient(to right, #fff, rgba(255,255,255,0))"
+        })
+      }, null), _createVNode("div", {
+        "id": "saturation-black",
+        "class": css({
+          position: "absolute",
+          top: "0",
+          right: "0",
+          bottom: "0",
+          left: "0",
+          background: "linear-gradient(to top, #000, rgba(0,0,0,0))"
+        })
+      }, null), _createVNode("div", {
+        "id": "saturation-pointer",
+        "class": css({
+          cursor: "pointer",
+          position: "absolute"
+        }),
+        "style": {
+          top: pointerTop.value,
+          left: pointerLeft.value
+        }
+      }, [_createVNode("div", {
+        "id": "saturation-circle",
+        "class": css({
+          cursor: "pointer",
+          width: "6px",
+          height: "6px",
+          boxShadow: "0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4)",
+          borderRadius: "50%",
+          transform: "translate(-2px, -2px)"
+        })
+      }, null)])]);
+    };
+  }
+});
+
+export {
+  MpColorSaturation
+};

package/dist/chunk-DVRBDVR4.mjs

@@ -0,0 +1,63 @@
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/preset.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import tinycolor from "tinycolor2";
+import { MpIcon } from "@mekari/pixel3-icon";
+import { css } from "@mekari/pixel3-styled-system/css";
+var MpColorPreset = defineComponent({
+  name: "MpColorPreset",
+  props: {
+    value: {
+      type: String
+    },
+    isActive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["click"],
+  setup(props, {
+    emit
+  }) {
+    function handleClick() {
+      emit("click", props.value);
+    }
+    __name(handleClick, "handleClick");
+    return () => {
+      return _createVNode("div", {
+        "data-pixel-component": "MpColorPickerPreset",
+        "class": css({
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          position: "relative",
+          width: "6",
+          height: "6",
+          borderWidth: "1px",
+          borderColor: "gray.50",
+          borderRadius: "sm",
+          cursor: "pointer"
+        }),
+        "style": {
+          background: props.value
+        },
+        "onClick": handleClick
+      }, [props.isActive && _createVNode(MpIcon, {
+        "name": "check",
+        "size": "sm",
+        "color": tinycolor(props.value).isDark() ? "white" : "dark",
+        "style": {
+          position: "absolute"
+        }
+      }, null)]);
+    };
+  }
+});
+
+export {
+  MpColorPreset
+};

package/dist/chunk-L5BRB7ES.mjs

@@ -0,0 +1,64 @@
+// src/modules/color-picker.props.ts
+var PRESET_DEFAULT = ["#3B82F6", "#14B8A6", "#8B5CF6", "#F59E0B", "#EF4444", "#71717A", "#84CC16", "#EC4899", "#232933", "#60A5FA", "#2DD4BF", "#A78BFA", "#FBBF24", "#F87171", "#A1A1AA", "#A3E635", "#F472B6", "#FFFFFF"];
+var colorPickerProps = {
+  id: {
+    type: String,
+    default: ""
+  },
+  title: {
+    type: String,
+    default: "Pick a color"
+  },
+  value: {
+    type: String,
+    default: "#3B82F6"
+  },
+  placeholder: {
+    type: String,
+    default: "3B82F6"
+  },
+  variant: {
+    type: String,
+    default: "advance"
+  },
+  placement: {
+    type: String,
+    default: "bottom"
+  },
+  preset: {
+    type: Array,
+    default() {
+      return PRESET_DEFAULT;
+    }
+  },
+  isShowPopover: {
+    type: Boolean,
+    default: false
+  },
+  isShowSaturation: {
+    type: Boolean,
+    default: true
+  },
+  isShowHue: {
+    type: Boolean,
+    default: true
+  },
+  isShowInput: {
+    type: Boolean,
+    default: true
+  },
+  isShowPreset: {
+    type: Boolean,
+    default: true
+  },
+  isInvalid: {
+    type: Boolean,
+    default: false
+  }
+};
+var colorPickerEmit = ["change"];
+
+export {
+  colorPickerProps,
+  colorPickerEmit
+};