@mekari/pixel3-color-picker 0.1.1 → 0.1.2-dev.1

package/dist/{chunk-L5BRB7ES.mjs → chunk-2ZZBAQKR.mjs}

@@ -23,7 +23,7 @@ var colorPickerProps = {
   },
   placement: {
     type: String,
-    default: "bottom"
+    default: "bottom-start"
   },
   preset: {
     type: Array,
@@ -51,6 +51,10 @@ var colorPickerProps = {
     type: Boolean,
     default: true
   },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  },
   isInvalid: {
     type: Boolean,
     default: false

package/dist/{chunk-DVRBDVR4.mjs → chunk-5CI43L4Q.mjs}

@@ -7,6 +7,7 @@ import { createVNode as _createVNode } from "vue";
 import { defineComponent } from "vue";
 import tinycolor from "tinycolor2";
 import { MpIcon } from "@mekari/pixel3-icon";
+import { usePixelTheme } from "@mekari/pixel3-utils";
 import { css } from "@mekari/pixel3-styled-system/css";
 var MpColorPreset = defineComponent({
   name: "MpColorPreset",
@@ -23,6 +24,9 @@ var MpColorPreset = defineComponent({
   setup(props, {
     emit
   }) {
+    const {
+      isNextTheme
+    } = usePixelTheme();
     function handleClick() {
       emit("click", props.value);
     }
@@ -38,7 +42,7 @@ var MpColorPreset = defineComponent({
           width: "6",
           height: "6",
           borderWidth: "1px",
-          borderColor: "gray.50",
+          borderColor: isNextTheme.value ? "border.default" : "gray.50",
           borderRadius: "sm",
           cursor: "pointer"
         }),

package/dist/{chunk-KHGAEPYZ.mjs → chunk-5VPWEGKC.mjs}

@@ -7,8 +7,6 @@ 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,
@@ -17,6 +15,7 @@ function useColorPicker(props, emit) {
     variant,
     placement,
     isShowPopover,
+    isDisabled,
     isInvalid
   } = toRefs(props);
   const val = ref(_colorChange(value.value));
@@ -33,20 +32,7 @@ function useColorPicker(props, emit) {
     }
   });
   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;
+    return colors.value.hex.replace("#", "");
   });
   const rootAttrs = computed(() => {
     return {
@@ -61,22 +47,18 @@ function useColorPicker(props, emit) {
       placement: placement.value,
       defaultIsOpen: isShowPopover.value,
       initialFocusRef: `#input-${getId}`,
+      isManual: isDisabled.value,
+      // hack way to disabled Popover
       onOpen: handleOpenPopover,
       onClose: handleClosePopover
     };
   });
   const popoverTriggerAttrs = computed(() => {
     return {
+      "data-invalid": isInvalid.value || void 0,
+      "data-disabled": isDisabled.value || void 0,
       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}`)
-      }
+      class: colorPickerSlotRecipe().popoverTrigger
     };
   });
   const boxColorAttrs = computed(() => {
@@ -96,6 +78,8 @@ function useColorPicker(props, emit) {
       maxlength: "6",
       value: colorInput.value,
       placeholder: placeholder.value,
+      isDisabled: isDisabled.value,
+      isInvalid: isInvalid.value,
       class: colorPickerSlotRecipe().inputTrigger,
       onInput: handleInputTrigger
     };
@@ -293,6 +277,8 @@ function useColorPicker(props, emit) {
   }
   __name(handleInputTrigger, "handleInputTrigger");
   function handleOpenPopover() {
+    if (isDisabled.value)
+      return;
     isPopoverOpen.value = true;
     colorInput.value = hex.value;
   }

package/dist/{chunk-YPFR76KW.mjs → chunk-MILYTHNM.mjs}

@@ -43,7 +43,6 @@ var MpColorInput = defineComponent({
       }
     });
     function handleInput(e) {
-      console.log("asdad", e);
       const target = e.target;
       const value = target.value;
       const data = {};

package/dist/{chunk-6XOLIDD7.mjs → chunk-NT4KAY3K.mjs}

@@ -3,19 +3,19 @@ import {
 } from "./chunk-PULVLME3.mjs";
 import {
   MpColorInput
-} from "./chunk-YPFR76KW.mjs";
+} from "./chunk-MILYTHNM.mjs";
 import {
   MpColorPreset
-} from "./chunk-DVRBDVR4.mjs";
+} from "./chunk-5CI43L4Q.mjs";
 import {
   MpColorSaturation
 } from "./chunk-AEUPCATZ.mjs";
 import {
   useColorPicker
-} from "./chunk-KHGAEPYZ.mjs";
+} from "./chunk-5VPWEGKC.mjs";
 import {
   colorPickerProps
-} from "./chunk-L5BRB7ES.mjs";
+} from "./chunk-2ZZBAQKR.mjs";
 import {
   __name
 } from "./chunk-QZ7VFGWC.mjs";
@@ -28,6 +28,7 @@ import { MpPopover, MpPopoverTrigger, MpPopoverContent } from "@mekari/pixel3-po
 import { MpInput } from "@mekari/pixel3-input";
 import { MpIcon } from "@mekari/pixel3-icon";
 import { MpDivider } from "@mekari/pixel3-divider";
+import { usePixelTheme } from "@mekari/pixel3-utils";
 import { css } from "@mekari/pixel3-styled-system/css";
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !_isVNode(s);
@@ -41,6 +42,9 @@ var MpColorPicker = defineComponent({
     slots,
     emit
   }) {
+    const {
+      isNextTheme
+    } = usePixelTheme();
     const {
       rootAttrs,
       popoverAttrs,
@@ -69,6 +73,7 @@ var MpColorPicker = defineComponent({
     return () => {
       const children = slots.default && slots.default();
       const {
+        id,
         variant,
         title,
         isShowSaturation,
@@ -79,28 +84,32 @@ var MpColorPicker = defineComponent({
       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"
+            "color": isNextTheme.value ? "text.disabled" : "gray.400",
+            "class": css({
+              marginTop: "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, {
-            "id": "divider-color-picker",
+            "id": `${id}-divider`,
             "class": css({
               marginTop: "0",
               marginBottom: "0"
             })
           }, null), isShowPreset && _createVNode("div", boxPresetAttrs.value, [_createVNode("div", wrapperPresetAttrs.value, [_createVNode(MpText, {
             "size": "label-small",
-            "style": "width: 100%;"
+            "class": css({
+              width: "full"
+            })
           }, {
-            default: () => [_createTextVNode("Present")]
+            default: () => [_createTextVNode("Preset")]
           }), props.preset.map((item) => {
             return _createVNode(MpColorPreset, presetBoxAttrs(item), null);
           })])])]), variant === "basic" && _createVNode("div", wrapperBasicAttrs.value, [_createVNode(MpText, {
             "size": "body-small",
-            "color": "gray.600"
+            "color": isNextTheme.value ? "text.secondary" : "gray.600"
           }, _isSlot(title) ? title : {
             default: () => [title]
           }), isShowPreset && _createVNode("div", wrapperBasicPresetAttrs.value, [props.preset.map((item) => {

package/dist/color-picker.d.mts

@@ -1,5 +1,6 @@
 import * as vue_jsx_runtime from 'vue/jsx-runtime';
 import { Placement } from './modules/color-picker.props.mjs';
+import { ColorPickerVariant } from './modules/color-picker.types.mjs';
 import * as vue from 'vue';
 
 declare const MpColorPicker: vue.DefineComponent<{
@@ -20,7 +21,7 @@ declare const MpColorPicker: vue.DefineComponent<{
         default: string;
     };
     variant: {
-        type: vue.PropType<"advance" | "basic">;
+        type: vue.PropType<ColorPickerVariant>;
         default: string;
     };
     placement: {
@@ -51,6 +52,10 @@ declare const MpColorPicker: vue.DefineComponent<{
         type: vue.PropType<boolean>;
         default: boolean;
     };
+    isDisabled: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
     isInvalid: {
         type: vue.PropType<boolean>;
         default: boolean;
@@ -73,7 +78,7 @@ declare const MpColorPicker: vue.DefineComponent<{
         default: string;
     };
     variant: {
-        type: vue.PropType<"advance" | "basic">;
+        type: vue.PropType<ColorPickerVariant>;
         default: string;
     };
     placement: {
@@ -104,6 +109,10 @@ declare const MpColorPicker: vue.DefineComponent<{
         type: vue.PropType<boolean>;
         default: boolean;
     };
+    isDisabled: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
     isInvalid: {
         type: vue.PropType<boolean>;
         default: boolean;
@@ -111,19 +120,20 @@ declare const MpColorPicker: vue.DefineComponent<{
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    value: string;
-    title: string;
     id: string;
+    title: string;
+    value: string;
     placeholder: string;
+    variant: ColorPickerVariant;
     placement: Placement;
-    variant: "advance" | "basic";
-    isInvalid: boolean;
     preset: string[];
     isShowPopover: boolean;
     isShowSaturation: boolean;
     isShowHue: boolean;
     isShowInput: boolean;
     isShowPreset: boolean;
+    isDisabled: boolean;
+    isInvalid: boolean;
 }, {}>;
 
 export { MpColorPicker };

package/dist/color-picker.d.ts

@@ -1,5 +1,6 @@
 import * as vue_jsx_runtime from 'vue/jsx-runtime';
 import { Placement } from './modules/color-picker.props.js';
+import { ColorPickerVariant } from './modules/color-picker.types.js';
 import * as vue from 'vue';
 
 declare const MpColorPicker: vue.DefineComponent<{
@@ -20,7 +21,7 @@ declare const MpColorPicker: vue.DefineComponent<{
         default: string;
     };
     variant: {
-        type: vue.PropType<"advance" | "basic">;
+        type: vue.PropType<ColorPickerVariant>;
         default: string;
     };
     placement: {
@@ -51,6 +52,10 @@ declare const MpColorPicker: vue.DefineComponent<{
         type: vue.PropType<boolean>;
         default: boolean;
     };
+    isDisabled: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
     isInvalid: {
         type: vue.PropType<boolean>;
         default: boolean;
@@ -73,7 +78,7 @@ declare const MpColorPicker: vue.DefineComponent<{
         default: string;
     };
     variant: {
-        type: vue.PropType<"advance" | "basic">;
+        type: vue.PropType<ColorPickerVariant>;
         default: string;
     };
     placement: {
@@ -104,6 +109,10 @@ declare const MpColorPicker: vue.DefineComponent<{
         type: vue.PropType<boolean>;
         default: boolean;
     };
+    isDisabled: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
     isInvalid: {
         type: vue.PropType<boolean>;
         default: boolean;
@@ -111,19 +120,20 @@ declare const MpColorPicker: vue.DefineComponent<{
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    value: string;
-    title: string;
     id: string;
+    title: string;
+    value: string;
     placeholder: string;
+    variant: ColorPickerVariant;
     placement: Placement;
-    variant: "advance" | "basic";
-    isInvalid: boolean;
     preset: string[];
     isShowPopover: boolean;
     isShowSaturation: boolean;
     isShowHue: boolean;
     isShowInput: boolean;
     isShowPreset: boolean;
+    isDisabled: boolean;
+    isInvalid: boolean;
 }, {}>;
 
 export { MpColorPicker };