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

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

@@ -38,8 +38,6 @@ 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,
@@ -48,6 +46,7 @@ function useColorPicker(props, emit) {
     variant,
     placement,
     isShowPopover,
+    isDisabled,
     isInvalid
   } = (0, import_vue.toRefs)(props);
   const val = (0, import_vue.ref)(_colorChange(value.value));
@@ -64,20 +63,7 @@ function useColorPicker(props, emit) {
     }
   });
   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;
+    return colors.value.hex.replace("#", "");
   });
   const rootAttrs = (0, import_vue.computed)(() => {
     return {
@@ -92,22 +78,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 = (0, import_vue.computed)(() => {
     return {
+      "data-invalid": isInvalid.value || void 0,
+      "data-disabled": isDisabled.value || void 0,
       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}`)
-      }
+      class: (0, import_recipes.colorPickerSlotRecipe)().popoverTrigger
     };
   });
   const boxColorAttrs = (0, import_vue.computed)(() => {
@@ -127,6 +109,8 @@ function useColorPicker(props, emit) {
       maxlength: "6",
       value: colorInput.value,
       placeholder: placeholder.value,
+      isDisabled: isDisabled.value,
+      isInvalid: isInvalid.value,
       class: (0, import_recipes.colorPickerSlotRecipe)().inputTrigger,
       onInput: handleInputTrigger
     };
@@ -324,6 +308,8 @@ function useColorPicker(props, emit) {
   }
   __name(handleInputTrigger, "handleInputTrigger");
   function handleOpenPopover() {
+    if (isDisabled.value)
+      return;
     isPopoverOpen.value = true;
     colorInput.value = hex.value;
   }

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

@@ -1,6 +1,6 @@
 import {
   useColorPicker
-} from "../chunk-KHGAEPYZ.mjs";
+} from "../chunk-5VPWEGKC.mjs";
 import "../chunk-QZ7VFGWC.mjs";
 export {
   useColorPicker

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

@@ -49,6 +49,10 @@ declare const colorPickerProps: {
         type: PropType<boolean>;
         default: boolean;
     };
+    isDisabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
     isInvalid: {
         type: PropType<boolean>;
         default: boolean;

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

@@ -49,6 +49,10 @@ declare const colorPickerProps: {
         type: PropType<boolean>;
         default: boolean;
     };
+    isDisabled: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
     isInvalid: {
         type: PropType<boolean>;
         default: boolean;

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

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

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

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

package/dist/preset.js

@@ -38,6 +38,7 @@ 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_pixel3_utils = require("@mekari/pixel3-utils");
 var import_css = require("@mekari/pixel3-styled-system/css");
 var MpColorPreset = (0, import_vue2.defineComponent)({
   name: "MpColorPreset",
@@ -54,6 +55,9 @@ var MpColorPreset = (0, import_vue2.defineComponent)({
   setup(props, {
     emit
   }) {
+    const {
+      isNextTheme
+    } = (0, import_pixel3_utils.usePixelTheme)();
     function handleClick() {
       emit("click", props.value);
     }
@@ -69,7 +73,7 @@ var MpColorPreset = (0, import_vue2.defineComponent)({
           width: "6",
           height: "6",
           borderWidth: "1px",
-          borderColor: "gray.50",
+          borderColor: isNextTheme.value ? "border.default" : "gray.50",
           borderRadius: "sm",
           cursor: "pointer"
         }),

package/dist/preset.mjs

@@ -1,6 +1,6 @@
 import {
   MpColorPreset
-} from "./chunk-DVRBDVR4.mjs";
+} from "./chunk-5CI43L4Q.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {
   MpColorPreset

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mekari/pixel3-color-picker",
   "description": "Color picker component for mekari pixel 3",
-  "version": "0.1.1",
+  "version": "0.1.2-dev.0",
   "main": "dist/index.js",
   "license": "MIT",
   "files": [
@@ -11,14 +11,14 @@
     "clamp": "^1.0.1",
     "lodash.throttle": "^4.0.0",
     "tinycolor2": "^1.1.2",
-    "@mekari/pixel3-button": "0.0.16",
-    "@mekari/pixel3-divider": "0.0.15",
-    "@mekari/pixel3-input": "0.0.16",
-    "@mekari/pixel3-popover": "0.0.16",
-    "@mekari/pixel3-icon": "0.0.16",
-    "@mekari/pixel3-text": "0.0.15",
-    "@mekari/pixel3-utils": "0.0.6",
-    "@mekari/pixel3-styled-system": "0.1.1"
+    "@mekari/pixel3-button": "0.0.17-dev.0",
+    "@mekari/pixel3-divider": "0.0.16-dev.0",
+    "@mekari/pixel3-icon": "0.0.17-dev.0",
+    "@mekari/pixel3-input": "0.0.17-dev.0",
+    "@mekari/pixel3-popover": "0.0.17-dev.0",
+    "@mekari/pixel3-styled-system": "0.1.2-dev.0",
+    "@mekari/pixel3-text": "0.0.16-dev.0",
+    "@mekari/pixel3-utils": "0.0.7-dev.0"
   },
   "peerDependencies": {
     "vue": "^3.4.9"