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

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

@@ -0,0 +1,89 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/modules/color-picker.props.ts
+var color_picker_props_exports = {};
+__export(color_picker_props_exports, {
+  colorPickerEmit: () => colorPickerEmit,
+  colorPickerProps: () => colorPickerProps
+});
+module.exports = __toCommonJS(color_picker_props_exports);
+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"];
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  colorPickerEmit,
+  colorPickerProps
+});

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

@@ -0,0 +1,9 @@
+import {
+  colorPickerEmit,
+  colorPickerProps
+} from "../chunk-L5BRB7ES.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  colorPickerEmit,
+  colorPickerProps
+};

package/dist/preset.d.mts

@@ -0,0 +1,26 @@
+import * as vue from 'vue';
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+
+declare const MpColorPreset: vue.DefineComponent<{
+    value: {
+        type: StringConstructor;
+    };
+    isActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "click"[], "click", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+    };
+    isActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
+    isActive: boolean;
+}, {}>;
+
+export { MpColorPreset };

package/dist/preset.d.ts

@@ -0,0 +1,26 @@
+import * as vue from 'vue';
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+
+declare const MpColorPreset: vue.DefineComponent<{
+    value: {
+        type: StringConstructor;
+    };
+    isActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "click"[], "click", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+    };
+    isActive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
+    isActive: boolean;
+}, {}>;
+
+export { MpColorPreset };

package/dist/preset.js

@@ -0,0 +1,94 @@
+"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/preset.tsx
+var preset_exports = {};
+__export(preset_exports, {
+  MpColorPreset: () => MpColorPreset
+});
+module.exports = __toCommonJS(preset_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_tinycolor2 = __toESM(require("tinycolor2"));
+var import_pixel3_icon = require("@mekari/pixel3-icon");
+var import_css = require("@mekari/pixel3-styled-system/css");
+var MpColorPreset = (0, import_vue2.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 (0, import_vue.createVNode)("div", {
+        "data-pixel-component": "MpColorPickerPreset",
+        "class": (0, import_css.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 && (0, import_vue.createVNode)(import_pixel3_icon.MpIcon, {
+        "name": "check",
+        "size": "sm",
+        "color": (0, import_tinycolor2.default)(props.value).isDark() ? "white" : "dark",
+        "style": {
+          position: "absolute"
+        }
+      }, null)]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpColorPreset
+});

package/dist/preset.mjs

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

package/dist/saturation.d.mts

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

package/dist/saturation.d.ts

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

package/dist/saturation.js

@@ -0,0 +1,187 @@
+"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/saturation.tsx
+var saturation_exports = {};
+__export(saturation_exports, {
+  MpColorSaturation: () => MpColorSaturation
+});
+module.exports = __toCommonJS(saturation_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_clamp = __toESM(require("clamp"));
+var import_lodash = __toESM(require("lodash.throttle"));
+var import_css = require("@mekari/pixel3-styled-system/css");
+var MpColorSaturation = (0, import_vue2.defineComponent)({
+  name: "MpColorSaturation",
+  props: {
+    value: {
+      type: Object
+    }
+  },
+  emits: ["change"],
+  setup(props, {
+    emit
+  }) {
+    const containerNode = (0, import_vue2.ref)();
+    const colors = (0, import_vue2.computed)(() => {
+      return props.value;
+    });
+    const bgColor = (0, import_vue2.computed)(() => {
+      var _a;
+      return `hsl(${(_a = colors.value) == null ? void 0 : _a.hsv.h}, 100%, 50%)`;
+    });
+    const pointerTop = (0, import_vue2.computed)(() => {
+      var _a;
+      return -(((_a = colors.value) == null ? void 0 : _a.hsv.v) * 100) + 1 + 100 + "%";
+    });
+    const pointerLeft = (0, import_vue2.computed)(() => {
+      var _a;
+      return ((_a = colors.value) == null ? void 0 : _a.hsv.s) * 100 + "%";
+    });
+    const handleThrottle = (0, import_lodash.default)((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 = (0, import_clamp.default)(pageX - xOffset, 0, containerWidth);
+      const top = (0, import_clamp.default)(pageY - yOffset, 0, containerHeight);
+      const saturation = left / containerWidth;
+      const bright = (0, import_clamp.default)(-(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 (0, import_vue.createVNode)("div", {
+        "ref": containerNode,
+        "data-pixel-component": "MpColorPickerSaturation",
+        "id": "saturation-container",
+        "class": (0, import_css.css)({
+          cursor: "pointer",
+          position: "absolute",
+          top: "0",
+          right: "0",
+          bottom: "0",
+          left: "0"
+        }),
+        "style": {
+          background: bgColor.value
+        },
+        "onMousedown": handleMouseDown,
+        "onTouchmove": handleChange,
+        "onTouchstart": handleChange
+      }, [(0, import_vue.createVNode)("div", {
+        "id": "saturation-white",
+        "class": (0, import_css.css)({
+          position: "absolute",
+          top: "0",
+          right: "0",
+          bottom: "0",
+          left: "0",
+          background: "linear-gradient(to right, #fff, rgba(255,255,255,0))"
+        })
+      }, null), (0, import_vue.createVNode)("div", {
+        "id": "saturation-black",
+        "class": (0, import_css.css)({
+          position: "absolute",
+          top: "0",
+          right: "0",
+          bottom: "0",
+          left: "0",
+          background: "linear-gradient(to top, #000, rgba(0,0,0,0))"
+        })
+      }, null), (0, import_vue.createVNode)("div", {
+        "id": "saturation-pointer",
+        "class": (0, import_css.css)({
+          cursor: "pointer",
+          position: "absolute"
+        }),
+        "style": {
+          top: pointerTop.value,
+          left: pointerLeft.value
+        }
+      }, [(0, import_vue.createVNode)("div", {
+        "id": "saturation-circle",
+        "class": (0, import_css.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)])]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpColorSaturation
+});

package/dist/saturation.mjs

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

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@mekari/pixel3-color-picker",
+  "description": "Color picker component for mekari pixel 3",
+  "version": "0.0.1-dev.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "clamp": "^1.0.1",
+    "lodash.throttle": "^4.0.0",
+    "tinycolor2": "^1.1.2",
+    "@mekari/pixel3-button": "0.0.12-dev.2",
+    "@mekari/pixel3-divider": "0.0.12-dev.1",
+    "@mekari/pixel3-icon": "0.0.12-dev.2",
+    "@mekari/pixel3-input": "0.0.12-dev.2",
+    "@mekari/pixel3-popover": "0.0.12-dev.2",
+    "@mekari/pixel3-styled-system": "0.0.10-dev.1",
+    "@mekari/pixel3-text": "0.0.12-dev.1",
+    "@mekari/pixel3-utils": "0.0.6"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.9"
+  },
+  "devDependencies": {
+    "@types/tinycolor2": "^1.4.6",
+    "@types/lodash.throttle": "^4.1.9",
+    "@types/clamp": "^1.0.3",
+    "vue": "^3.4.9"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "scripts": {
+    "clean": "rimraf dist .turbo",
+    "build": "tsup && pnpm build:types",
+    "build:fast": "tsup",
+    "build:types": "tsup src --dts-only",
+    "types:check": "tsc --noEmit",
+    "replace-config": "clean-package",
+    "restore-config": "clean-package restore"
+  }
+}