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

package/dist/modules/color-picker.hooks.d.ts

@@ -0,0 +1,206 @@
+import * as vue from 'vue';
+import { ColorPickerProps, ColorPickerEmit, Placement } from './color-picker.props.js';
+
+declare function useColorPicker(props: ColorPickerProps, emit: ColorPickerEmit): {
+    rootAttrs: vue.ComputedRef<{
+        'data-pixel-component': string;
+        id: string | undefined;
+        class: string;
+        style: {
+            width: string;
+        };
+    }>;
+    popoverAttrs: vue.ComputedRef<{
+        id: string;
+        placement: Placement;
+        defaultIsOpen: boolean;
+        initialFocusRef: string;
+        onOpen: () => void;
+        onClose: () => void;
+    }>;
+    popoverTriggerAttrs: vue.ComputedRef<{
+        tabindex: string;
+        class: string;
+        style: {
+            borderColor: string;
+        };
+    }>;
+    boxColorAttrs: vue.ComputedRef<{
+        class: string;
+        style: {
+            background: string;
+        };
+    }>;
+    inputTriggerAttrs: vue.ComputedRef<{
+        id: string;
+        type: string;
+        autocomplete: string;
+        variant: "unstyled";
+        maxlength: string;
+        value: string;
+        placeholder: string;
+        class: string;
+        onInput: (e: Event) => void;
+    }>;
+    iconDropDownAttrs: vue.ComputedRef<{
+        name: "chevrons-down";
+        size: "sm";
+        class: string;
+    }>;
+    popoverContentAttrs: vue.ComputedRef<{
+        class: string;
+        style: {
+            width: string;
+        };
+    }>;
+    wrapperAdvanceAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    wrapperBasicAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    wrapperSaturationAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    saturationAttrs: vue.ComputedRef<{
+        value: {
+            hsl: {
+                h: number;
+                s: number;
+                l: number;
+                a: number;
+            };
+            hex: string;
+            hex8: string;
+            rgba: {
+                r: number;
+                g: number;
+                b: number;
+                a: number;
+            };
+            hsv: {
+                a: number;
+                h: number;
+                s: number;
+                v: number;
+            };
+            oldHue: any;
+            source: any;
+        };
+        onChange: (data: any) => void;
+    }>;
+    wrapperHueAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    hueAttrs: vue.ComputedRef<{
+        value: {
+            hsl: {
+                h: number;
+                s: number;
+                l: number;
+                a: number;
+            };
+            hex: string;
+            hex8: string;
+            rgba: {
+                r: number;
+                g: number;
+                b: number;
+                a: number;
+            };
+            hsv: {
+                a: number;
+                h: number;
+                s: number;
+                v: number;
+            };
+            oldHue: any;
+            source: any;
+        };
+        onChange: (data: any) => void;
+    }>;
+    wrapperInputAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    inputHexAttrs: vue.ComputedRef<{
+        label: string;
+        width: string;
+        value: string;
+        onChange: (data: {
+            hex?: string | undefined;
+            '#'?: string | undefined;
+            r?: string | undefined;
+            g?: string | undefined;
+            b?: string | undefined;
+            a?: string | undefined;
+        }) => void;
+    }>;
+    inputRedAttrs: vue.ComputedRef<{
+        label: string;
+        width: string;
+        value: number;
+        onChange: (data: {
+            hex?: string | undefined;
+            '#'?: string | undefined;
+            r?: string | undefined;
+            g?: string | undefined;
+            b?: string | undefined;
+            a?: string | undefined;
+        }) => void;
+    }>;
+    inputGreenAttrs: vue.ComputedRef<{
+        label: string;
+        width: string;
+        value: number;
+        onChange: (data: {
+            hex?: string | undefined;
+            '#'?: string | undefined;
+            r?: string | undefined;
+            g?: string | undefined;
+            b?: string | undefined;
+            a?: string | undefined;
+        }) => void;
+    }>;
+    inputBlueAttrs: vue.ComputedRef<{
+        label: string;
+        width: string;
+        value: number;
+        onChange: (data: {
+            hex?: string | undefined;
+            '#'?: string | undefined;
+            r?: string | undefined;
+            g?: string | undefined;
+            b?: string | undefined;
+            a?: string | undefined;
+        }) => void;
+    }>;
+    inputFullAttrs: vue.ComputedRef<{
+        label: string;
+        width: string;
+        value: string;
+        onChange: (data: {
+            hex?: string | undefined;
+            '#'?: string | undefined;
+            r?: string | undefined;
+            g?: string | undefined;
+            b?: string | undefined;
+            a?: string | undefined;
+        }) => void;
+    }>;
+    boxPresetAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    wrapperPresetAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    wrapperBasicPresetAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    presetBoxAttrs: (item: string) => {
+        value: string;
+        isActive: boolean;
+        onClick: (data: any) => void;
+    };
+};
+
+export { useColorPicker };

package/dist/modules/color-picker.hooks.js

@@ -0,0 +1,378 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/modules/color-picker.hooks.ts
+var color_picker_hooks_exports = {};
+__export(color_picker_hooks_exports, {
+  useColorPicker: () => useColorPicker
+});
+module.exports = __toCommonJS(color_picker_hooks_exports);
+var import_vue = require("vue");
+var import_tinycolor2 = __toESM(require("tinycolor2"));
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+var import_css = require("@mekari/pixel3-styled-system/css");
+var import_tokens = require("@mekari/pixel3-styled-system/tokens");
+function useColorPicker(props, emit) {
+  const {
+    id,
+    value,
+    placeholder,
+    variant,
+    placement,
+    isShowPopover,
+    isInvalid
+  } = (0, import_vue.toRefs)(props);
+  const val = (0, import_vue.ref)(_colorChange(value.value));
+  const colorInput = (0, import_vue.ref)("");
+  const isPopoverOpen = (0, import_vue.ref)(false);
+  const getId = id.value || (0, import_pixel3_utils.getUniqueId)("", "color-picker").value;
+  const colors = (0, import_vue.computed)({
+    get() {
+      return val.value;
+    },
+    set(newVal) {
+      val.value = newVal;
+      emit("change", newVal);
+    }
+  });
+  const hex = (0, import_vue.computed)(() => {
+    const hex2 = colors.value.hex;
+    return hex2.replace("#", "");
+  });
+  const borderColor = (0, import_vue.computed)(() => {
+    if (isInvalid.value) {
+      return "red.400";
+    }
+    if (!isInvalid.value && isFocused.value) {
+      return "blue.400";
+    }
+    return "gray.100";
+  });
+  const isFocused = (0, import_vue.computed)(() => {
+    return isPopoverOpen.value;
+  });
+  const rootAttrs = (0, import_vue.computed)(() => {
+    return {
+      "data-pixel-component": "MpColorPicker",
+      id: getId,
+      class: (0, import_recipes.colorPickerSlotRecipe)().root,
+      style: {
+        width: variant.value === "advance" ? "280px" : "72px"
+      }
+    };
+  });
+  const popoverAttrs = (0, import_vue.computed)(() => {
+    return {
+      id: `popover-${getId}`,
+      placement: placement.value,
+      defaultIsOpen: isShowPopover.value,
+      initialFocusRef: `#input-${getId}`,
+      onOpen: handleOpenPopover,
+      onClose: handleClosePopover
+    };
+  });
+  const popoverTriggerAttrs = (0, import_vue.computed)(() => {
+    return {
+      tabindex: "0",
+      class: (0, import_css.cx)((0, import_css.css)({
+        boxShadow: isPopoverOpen.value && !isInvalid.value ? "outline" : "none",
+        _hover: {
+          borderColor: isPopoverOpen.value && !isInvalid.value ? "blue.500 !important" : "gray.400 !important"
+        }
+      }), (0, import_recipes.colorPickerSlotRecipe)().popoverTrigger),
+      style: {
+        borderColor: (0, import_tokens.token)(`colors.${borderColor.value}`)
+      }
+    };
+  });
+  const boxColorAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.colorPickerSlotRecipe)().boxColor,
+      style: {
+        background: colors.value.hex
+      }
+    };
+  });
+  const inputTriggerAttrs = (0, import_vue.computed)(() => {
+    return {
+      id: `input-${getId}`,
+      type: "text",
+      autocomplete: "off",
+      variant: "unstyled",
+      maxlength: "6",
+      value: colorInput.value,
+      placeholder: placeholder.value,
+      class: (0, import_recipes.colorPickerSlotRecipe)().inputTrigger,
+      onInput: handleInputTrigger
+    };
+  });
+  const iconDropDownAttrs = (0, import_vue.computed)(() => {
+    return {
+      name: "chevrons-down",
+      size: "sm",
+      class: (0, import_recipes.colorPickerSlotRecipe)().iconDropdown
+    };
+  });
+  const popoverContentAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.colorPickerSlotRecipe)().popoverContent,
+      style: {
+        width: variant.value === "advance" ? "280px" : "188px"
+      }
+    };
+  });
+  const wrapperAdvanceAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.colorPickerSlotRecipe)().wrapperAdvance
+    };
+  });
+  const wrapperBasicAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.colorPickerSlotRecipe)().wrapperBasic
+    };
+  });
+  const wrapperSaturationAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.colorPickerSlotRecipe)().wrapperSaturation
+    };
+  });
+  const saturationAttrs = (0, import_vue.computed)(() => {
+    return {
+      value: colors.value,
+      onChange: childChange
+    };
+  });
+  const wrapperHueAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.colorPickerSlotRecipe)().wrapperHue
+    };
+  });
+  const hueAttrs = (0, import_vue.computed)(() => {
+    return {
+      value: colors.value,
+      onChange: childChange
+    };
+  });
+  const wrapperInputAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.colorPickerSlotRecipe)().wrapperInput
+    };
+  });
+  const inputHexAttrs = (0, import_vue.computed)(() => {
+    return {
+      label: "hex",
+      width: "88px",
+      value: hex.value,
+      onChange: inputChange
+    };
+  });
+  const inputFullAttrs = (0, import_vue.computed)(() => {
+    return {
+      label: "hex",
+      width: "full",
+      value: hex.value,
+      onChange: inputChange
+    };
+  });
+  const inputRedAttrs = (0, import_vue.computed)(() => {
+    return {
+      label: "r",
+      width: "48px",
+      value: colors.value.rgba.r,
+      onChange: inputChange
+    };
+  });
+  const inputGreenAttrs = (0, import_vue.computed)(() => {
+    return {
+      label: "g",
+      width: "48px",
+      value: colors.value.rgba.g,
+      onChange: inputChange
+    };
+  });
+  const inputBlueAttrs = (0, import_vue.computed)(() => {
+    return {
+      label: "b",
+      width: "48px",
+      value: colors.value.rgba.b,
+      onChange: inputChange
+    };
+  });
+  const boxPresetAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.colorPickerSlotRecipe)().boxPreset
+    };
+  });
+  const wrapperPresetAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.colorPickerSlotRecipe)().wrapperPreset
+    };
+  });
+  const wrapperBasicPresetAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.colorPickerSlotRecipe)().wrapperBasicPreset
+    };
+  });
+  const presetBoxAttrs = /* @__PURE__ */ __name((item) => {
+    return {
+      value: item,
+      isActive: item.toLowerCase() === colors.value.hex.toLowerCase(),
+      onClick: childChange
+    };
+  }, "presetBoxAttrs");
+  function isValidHex(hex2) {
+    return (0, import_tinycolor2.default)(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 = (0, import_tinycolor2.default)(data.hsl);
+    } else if (data && data.hex && data.hex.length > 0) {
+      color = (0, import_tinycolor2.default)(data.hex);
+    } else if (data && data.hsv) {
+      color = (0, import_tinycolor2.default)(data.hsv);
+    } else if (data && data.rgba) {
+      color = (0, import_tinycolor2.default)(data.rgba);
+    } else if (data && data.rgb) {
+      color = (0, import_tinycolor2.default)(data.rgb);
+    } else {
+      color = (0, import_tinycolor2.default)(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");
+  (0, import_vue.watch)(() => value.value, (newValue, oldValue) => {
+    if (newValue !== oldValue) {
+      val.value = _colorChange(newValue);
+      colorInput.value = hex.value;
+    }
+  });
+  (0, import_vue.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");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useColorPicker
+});

package/dist/modules/color-picker.hooks.mjs

@@ -0,0 +1,7 @@
+import {
+  useColorPicker
+} from "../chunk-36OXI4E3.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  useColorPicker
+};

package/dist/modules/color-picker.props.d.mts

@@ -0,0 +1,62 @@
+import { PropType, ExtractPropTypes } from 'vue';
+
+declare const colorPickerProps: {
+    id: {
+        type: PropType<string>;
+        default: string;
+    };
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
+    value: {
+        type: PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: PropType<string>;
+        default: string;
+    };
+    variant: {
+        type: PropType<"advance" | "basic">;
+        default: string;
+    };
+    placement: {
+        type: PropType<Placement>;
+        default: string;
+    };
+    preset: {
+        type: PropType<string[]>;
+        default(): string[];
+    };
+    isShowPopover: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isShowSaturation: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isShowHue: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isShowInput: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isShowPreset: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+};
+declare const colorPickerEmit: readonly ["change"];
+type ColorPickerProps = ExtractPropTypes<typeof colorPickerProps>;
+type ColorPickerEmit = (event: (typeof colorPickerEmit)[number], value?: unknown, value2?: unknown) => void;
+type Placement = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
+
+export { ColorPickerEmit, ColorPickerProps, Placement, colorPickerEmit, colorPickerProps };

package/dist/modules/color-picker.props.d.ts

@@ -0,0 +1,62 @@
+import { PropType, ExtractPropTypes } from 'vue';
+
+declare const colorPickerProps: {
+    id: {
+        type: PropType<string>;
+        default: string;
+    };
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
+    value: {
+        type: PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: PropType<string>;
+        default: string;
+    };
+    variant: {
+        type: PropType<"advance" | "basic">;
+        default: string;
+    };
+    placement: {
+        type: PropType<Placement>;
+        default: string;
+    };
+    preset: {
+        type: PropType<string[]>;
+        default(): string[];
+    };
+    isShowPopover: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isShowSaturation: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isShowHue: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isShowInput: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isShowPreset: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+};
+declare const colorPickerEmit: readonly ["change"];
+type ColorPickerProps = ExtractPropTypes<typeof colorPickerProps>;
+type ColorPickerEmit = (event: (typeof colorPickerEmit)[number], value?: unknown, value2?: unknown) => void;
+type Placement = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
+
+export { ColorPickerEmit, ColorPickerProps, Placement, colorPickerEmit, colorPickerProps };