element-plus-secondary 0.2.8 → 0.2.9

package/lib/components/checkbox/src/checkbox2.js

@@ -2,125 +2,63 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
+require('../../../constants/index.js');
 require('../../../hooks/index.js');
-var checkbox = require('./checkbox.js');
-require('./composables/index.js');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
-var useCheckbox = require('./composables/use-checkbox.js');
-var index = require('../../../hooks/use-namespace/index.js');
+require('../../../utils/index.js');
+var index = require('../../../hooks/use-size/index.js');
+var event = require('../../../constants/event.js');
+var shared = require('@vue/shared');
+var core = require('@vueuse/core');
 
-const _hoisted_1 = ["tabindex", "role", "aria-checked"];
-const _hoisted_2 = ["id", "aria-hidden", "name", "tabindex", "disabled", "true-value", "false-value"];
-const _hoisted_3 = ["id", "aria-hidden", "disabled", "value", "name", "tabindex"];
-const __default__ = vue.defineComponent({
-  name: "ElCheckbox"
-});
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...__default__,
-  props: checkbox.checkboxProps,
-  emits: checkbox.checkboxEmits,
-  setup(__props) {
-    const props = __props;
-    const slots = vue.useSlots();
-    const {
-      inputId,
-      isLabeledByFormItem,
-      isChecked,
-      isDisabled,
-      isFocused,
-      checkboxSize,
-      hasOwnLabel,
-      model,
-      handleChange,
-      onClickRoot
-    } = useCheckbox.useCheckbox(props, slots);
-    const customStyle = vue.inject("$custom-style-filter", {});
-    const normalStyle = vue.computed(() => {
-      return customStyle.text ? { color: customStyle.text } : {};
-    });
-    const ns = index.useNamespace("checkbox");
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(!vue.unref(hasOwnLabel) && vue.unref(isLabeledByFormItem) ? "span" : "label"), {
-        class: vue.normalizeClass([
-          vue.unref(ns).b(),
-          vue.unref(ns).m(vue.unref(checkboxSize)),
-          vue.unref(ns).m(_ctx.effect),
-          vue.unref(ns).is("disabled", vue.unref(isDisabled)),
-          vue.unref(ns).is("bordered", _ctx.border),
-          vue.unref(ns).is("checked", vue.unref(isChecked))
-        ]),
-        "aria-controls": _ctx.indeterminate ? _ctx.controls : null,
-        onClick: vue.unref(onClickRoot)
-      }, {
-        default: vue.withCtx(() => [
-          vue.createElementVNode("span", {
-            class: vue.normalizeClass([
-              vue.unref(ns).e("input"),
-              vue.unref(ns).is("disabled", vue.unref(isDisabled)),
-              vue.unref(ns).is("checked", vue.unref(isChecked)),
-              vue.unref(ns).is("indeterminate", _ctx.indeterminate),
-              vue.unref(ns).is("focus", vue.unref(isFocused))
-            ]),
-            tabindex: _ctx.indeterminate ? 0 : void 0,
-            role: _ctx.indeterminate ? "checkbox" : void 0,
-            "aria-checked": _ctx.indeterminate ? "mixed" : void 0
-          }, [
-            _ctx.trueLabel || _ctx.falseLabel ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
-              key: 0,
-              id: vue.unref(inputId),
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(model) ? model.value = $event : null),
-              class: vue.normalizeClass(vue.unref(ns).e("original")),
-              type: "checkbox",
-              "aria-hidden": _ctx.indeterminate ? "true" : "false",
-              name: _ctx.name,
-              tabindex: _ctx.tabindex,
-              disabled: vue.unref(isDisabled),
-              "true-value": _ctx.trueLabel,
-              "false-value": _ctx.falseLabel,
-              onChange: _cache[1] || (_cache[1] = (...args) => vue.unref(handleChange) && vue.unref(handleChange)(...args)),
-              onFocus: _cache[2] || (_cache[2] = ($event) => isFocused.value = true),
-              onBlur: _cache[3] || (_cache[3] = ($event) => isFocused.value = false)
-            }, null, 42, _hoisted_2)), [
-              [vue.vModelCheckbox, vue.unref(model)]
-            ]) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
-              key: 1,
-              id: vue.unref(inputId),
-              "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => vue.isRef(model) ? model.value = $event : null),
-              class: vue.normalizeClass(vue.unref(ns).e("original")),
-              type: "checkbox",
-              "aria-hidden": _ctx.indeterminate ? "true" : "false",
-              disabled: vue.unref(isDisabled),
-              value: _ctx.label,
-              name: _ctx.name,
-              tabindex: _ctx.tabindex,
-              onChange: _cache[5] || (_cache[5] = (...args) => vue.unref(handleChange) && vue.unref(handleChange)(...args)),
-              onFocus: _cache[6] || (_cache[6] = ($event) => isFocused.value = true),
-              onBlur: _cache[7] || (_cache[7] = ($event) => isFocused.value = false)
-            }, null, 42, _hoisted_3)), [
-              [vue.vModelCheckbox, vue.unref(model)]
-            ]),
-            vue.createElementVNode("span", {
-              class: vue.normalizeClass(vue.unref(ns).e("inner"))
-            }, null, 2)
-          ], 10, _hoisted_1),
-          vue.unref(hasOwnLabel) ? (vue.openBlock(), vue.createElementBlock("span", {
-            key: 0,
-            style: vue.normalizeStyle(vue.unref(normalStyle)),
-            class: vue.normalizeClass(vue.unref(ns).e("label"))
-          }, [
-            vue.renderSlot(_ctx.$slots, "default"),
-            !_ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-              vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
-            ], 64)) : vue.createCommentVNode("v-if", true)
-          ], 6)) : vue.createCommentVNode("v-if", true)
-        ]),
-        _: 3
-      }, 8, ["class", "aria-controls", "onClick"]);
-    };
+const checkboxProps = {
+  modelValue: {
+    type: [Number, String, Boolean],
+    default: void 0
+  },
+  label: {
+    type: [String, Boolean, Number, Object]
+  },
+  indeterminate: Boolean,
+  disabled: Boolean,
+  checked: Boolean,
+  effect: {
+    type: String,
+    values: ["dark", "light", "plain"],
+    default: "light"
+  },
+  name: {
+    type: String,
+    default: void 0
+  },
+  trueLabel: {
+    type: [String, Number],
+    default: void 0
+  },
+  falseLabel: {
+    type: [String, Number],
+    default: void 0
+  },
+  id: {
+    type: String,
+    default: void 0
+  },
+  controls: {
+    type: String,
+    default: void 0
+  },
+  border: Boolean,
+  size: index.useSizeProp,
+  tabindex: [String, Number],
+  validateEvent: {
+    type: Boolean,
+    default: true
   }
-});
-var Checkbox = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/Users/st/Desktop/vue/nxx-ui/packages/components/checkbox/src/checkbox.vue"]]);
+};
+const checkboxEmits = {
+  [event.UPDATE_MODEL_EVENT]: (val) => shared.isString(val) || core.isNumber(val) || core.isBoolean(val),
+  change: (val) => shared.isString(val) || core.isNumber(val) || core.isBoolean(val)
+};
 
-exports["default"] = Checkbox;
+exports.checkboxEmits = checkboxEmits;
+exports.checkboxProps = checkboxProps;
 //# sourceMappingURL=checkbox2.js.map

package/lib/components/checkbox/src/checkbox2.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox2.js","sources":["../../../../../../packages/components/checkbox/src/checkbox.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"!hasOwnLabel && isLabeledByFormItem ? 'span' : 'label'\"\n    :class=\"[\n      ns.b(),\n      ns.m(checkboxSize),\n      ns.m(effect),\n      ns.is('disabled', isDisabled),\n      ns.is('bordered', border),\n      ns.is('checked', isChecked),\n    ]\"\n    :aria-controls=\"indeterminate ? controls : null\"\n    @click=\"onClickRoot\"\n  >\n    <span\n      :class=\"[\n        ns.e('input'),\n        ns.is('disabled', isDisabled),\n        ns.is('checked', isChecked),\n        ns.is('indeterminate', indeterminate),\n        ns.is('focus', isFocused),\n      ]\"\n      :tabindex=\"indeterminate ? 0 : undefined\"\n      :role=\"indeterminate ? 'checkbox' : undefined\"\n      :aria-checked=\"indeterminate ? 'mixed' : undefined\"\n    >\n      <input\n        v-if=\"trueLabel || falseLabel\"\n        :id=\"inputId\"\n        v-model=\"model\"\n        :class=\"ns.e('original')\"\n        type=\"checkbox\"\n        :aria-hidden=\"indeterminate ? 'true' : 'false'\"\n        :name=\"name\"\n        :tabindex=\"tabindex\"\n        :disabled=\"isDisabled\"\n        :true-value=\"trueLabel\"\n        :false-value=\"falseLabel\"\n        @change=\"handleChange\"\n        @focus=\"isFocused = true\"\n        @blur=\"isFocused = false\"\n      />\n      <input\n        v-else\n        :id=\"inputId\"\n        v-model=\"model\"\n        :class=\"ns.e('original')\"\n        type=\"checkbox\"\n        :aria-hidden=\"indeterminate ? 'true' : 'false'\"\n        :disabled=\"isDisabled\"\n        :value=\"label\"\n        :name=\"name\"\n        :tabindex=\"tabindex\"\n        @change=\"handleChange\"\n        @focus=\"isFocused = true\"\n        @blur=\"isFocused = false\"\n      />\n      <span :class=\"ns.e('inner')\" />\n    </span>\n    <span v-if=\"hasOwnLabel\" :style=\"normalStyle\" :class=\"ns.e('label')\">\n      <slot />\n      <template v-if=\"!$slots.default\">{{ label }}</template>\n    </span>\n  </component>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useSlots, inject, computed } from 'vue'\nimport type { CSSProperties } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { checkboxEmits, checkboxProps } from './checkbox'\nimport { useCheckbox } from './composables'\n\ndefineOptions({\n  name: 'ElCheckbox',\n})\n\nconst props = defineProps(checkboxProps)\ndefineEmits(checkboxEmits)\nconst slots = useSlots()\n\nconst {\n  inputId,\n  isLabeledByFormItem,\n  isChecked,\n  isDisabled,\n  isFocused,\n  checkboxSize,\n  hasOwnLabel,\n  model,\n  handleChange,\n  onClickRoot,\n} = useCheckbox(props, slots)\n\nconst customStyle = inject('$custom-style-filter', {}) as {\n  text: string\n      }\n\nconst normalStyle = computed<CSSProperties>(() => {\n  return customStyle.text ? { color: customStyle.text } : {}\n})\n\nconst ns = useNamespace('checkbox')\n</script>\n"],"names":["useSlots","useCheckbox","inject","computed","useNamespace"],"mappings":";;;;;;;;;;;;;;;uCAyEc,CAAA;AAAA,EACZ,IAAM,EAAA,YAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAIA,IAAA,MAAM,QAAQA,YAAS,EAAA,CAAA;AAEvB,IAAM,MAAA;AAAA,MACJ,OAAA;AAAA,MACA,mBAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,KACE,GAAAC,uBAAA,CAAY,OAAO,KAAK,CAAA,CAAA;AAE5B,IAAA,MAAM,WAAc,GAAAC,UAAA,CAAO,sBAAwB,EAAA,EAAE,CAAA,CAAA;AAIrD,IAAM,MAAA,WAAA,GAAcC,aAAwB,MAAM;AAChD,MAAA,OAAO,YAAY,IAAO,GAAA,EAAE,OAAO,WAAY,CAAA,IAAA,KAAS,EAAC,CAAA;AAAA,KAC1D,CAAA,CAAA;AAED,IAAM,MAAA,EAAA,GAAKC,mBAAa,UAAU,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"checkbox2.js","sources":["../../../../../../packages/components/checkbox/src/checkbox.ts"],"sourcesContent":["import { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { useSizeProp } from '@element-plus/hooks'\nimport { isBoolean, isNumber, isString } from '@element-plus/utils'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type Checkbox from './checkbox.vue'\n\nexport type CheckboxValueType = string | number | boolean\n\nexport const checkboxProps = {\n  modelValue: {\n    type: [Number, String, Boolean],\n    default: undefined,\n  },\n  label: {\n    type: [String, Boolean, Number, Object],\n  },\n  indeterminate: Boolean,\n  disabled: Boolean,\n  checked: Boolean,\n  effect: {\n    type: String,\n    values: ['dark', 'light', 'plain'],\n    default: 'light',\n  },\n  name: {\n    type: String,\n    default: undefined,\n  },\n  trueLabel: {\n    type: [String, Number],\n    default: undefined,\n  },\n  falseLabel: {\n    type: [String, Number],\n    default: undefined,\n  },\n  id: {\n    type: String,\n    default: undefined,\n  },\n  controls: {\n    type: String,\n    default: undefined,\n  },\n  border: Boolean,\n  size: useSizeProp,\n  tabindex: [String, Number],\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n}\n\nexport const checkboxEmits = {\n  [UPDATE_MODEL_EVENT]: (val: CheckboxValueType) =>\n    isString(val) || isNumber(val) || isBoolean(val),\n  change: (val: CheckboxValueType) =>\n    isString(val) || isNumber(val) || isBoolean(val),\n}\n\nexport type CheckboxProps = ExtractPropTypes<typeof checkboxProps>\nexport type CheckboxEmits = typeof checkboxEmits\nexport type CheckboxInstance = InstanceType<typeof Checkbox>\n"],"names":["useSizeProp","UPDATE_MODEL_EVENT","isString","isNumber","isBoolean"],"mappings":";;;;;;;;;;;;AAGY,MAAC,aAAa,GAAG;AAC7B,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC;AACnC,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC;AAC3C,GAAG;AACH,EAAE,aAAa,EAAE,OAAO;AACxB,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,OAAO,EAAE,OAAO;AAClB,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC;AACtC,IAAI,OAAO,EAAE,OAAO;AACpB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,IAAI,EAAEA,iBAAW;AACnB,EAAE,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC5B,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE;AACU,MAAC,aAAa,GAAG;AAC7B,EAAE,CAACC,wBAAkB,GAAG,CAAC,GAAG,KAAKC,eAAQ,CAAC,GAAG,CAAC,IAAIC,aAAQ,CAAC,GAAG,CAAC,IAAIC,cAAS,CAAC,GAAG,CAAC;AACjF,EAAE,MAAM,EAAE,CAAC,GAAG,KAAKF,eAAQ,CAAC,GAAG,CAAC,IAAIC,aAAQ,CAAC,GAAG,CAAC,IAAIC,cAAS,CAAC,GAAG,CAAC;AACnE;;;;;"}

package/lib/components/color-picker/index.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('../../utils/index.js');
-var colorPicker$1 = require('./src/color-picker.js');
-var colorPicker = require('./src/color-picker2.js');
+var colorPicker$1 = require('./src/color-picker2.js');
+var colorPicker = require('./src/color-picker.js');
 var install = require('../../utils/vue/install.js');
 
 const ElColorPicker = install.withInstall(colorPicker$1["default"]);

package/lib/components/color-picker/src/color-picker.js

@@ -2,382 +2,54 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
 var lodashUnified = require('lodash-unified');
-var index$7 = require('../../radio/index.js');
-var index$6 = require('../../icon/index.js');
-require('../../../directives/index.js');
-var index$4 = require('../../tooltip/index.js');
-var index$5 = require('../../input/index.js');
+require('../../../utils/index.js');
 require('../../../hooks/index.js');
 require('../../../constants/index.js');
-require('../../../utils/index.js');
-var iconsVue = require('@element-plus/icons-vue');
-var alphaSlider = require('./components/alpha-slider.js');
-var hueSlider = require('./components/hue-slider.js');
-var predefine = require('./components/predefine.js');
-var svPanel = require('./components/sv-panel.js');
-var color = require('./utils/color.js');
-var colorPicker = require('./color-picker2.js');
-var core = require('@vueuse/core');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
-var index = require('../../../hooks/use-locale/index.js');
-var index$1 = require('../../../hooks/use-namespace/index.js');
-var index$2 = require('../../../hooks/use-form-item/index.js');
-var index$3 = require('../../../hooks/use-common-props/index.js');
+var runtime = require('../../../utils/vue/props/runtime.js');
+var index = require('../../../hooks/use-size/index.js');
 var event = require('../../../constants/event.js');
-var error = require('../../../utils/error.js');
-var index$8 = require('../../../directives/click-outside/index.js');
+var shared = require('@vue/shared');
 
-const _hoisted_1 = ["id", "aria-label", "aria-labelledby", "aria-description", "tabindex", "onKeydown"];
-const __default__ = vue.defineComponent({
-  name: "ElColorPicker"
-});
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...__default__,
-  props: colorPicker.colorPickerProps,
-  emits: colorPicker.colorPickerEmits,
-  setup(__props, { expose, emit }) {
-    var _a, _b;
-    const props = __props;
-    const { isSupported, open, sRGBHex } = core.useEyeDropper();
-    const { t } = index.useLocale();
-    const ns = index$1.useNamespace("color");
-    const { formItem } = index$2.useFormItem();
-    const colorSize = index$3.useSize();
-    const colorDisabled = index$3.useDisabled();
-    const { inputId: buttonId, isLabeledByFormItem } = index$2.useFormItemInputId(props, {
-      formItemContext: formItem
-    });
-    const hue = vue.ref();
-    const sv = vue.ref();
-    const alpha = vue.ref();
-    const popper = vue.ref();
-    let shouldActiveChange = true;
-    const color$1 = vue.reactive(new color["default"]({
-      enableAlpha: props.showAlpha,
-      format: props.colorFormat || ((_a = props.modelValue) == null ? void 0 : _a.startsWith("#")) ? "hex" : "rgb",
-      value: props.modelValue
-    }));
-    const showPicker = vue.ref(false);
-    const showPanelColor = vue.ref(false);
-    const customInput = vue.ref("");
-    const displayedColor = vue.computed(() => {
-      if (!props.modelValue && !showPanelColor.value) {
-        return "transparent";
-      }
-      return displayedRgb(color$1, props.showAlpha);
-    });
-    const getEyeDropper = () => {
-      if (!isSupported)
-        return;
-      open();
-    };
-    const colorMode = vue.ref(((_b = props.modelValue) == null ? void 0 : _b.startsWith("#")) ? "HEX" : "RGB");
-    const currentColor = vue.computed(() => {
-      return !props.modelValue && !showPanelColor.value ? "" : color$1.value;
-    });
-    const modeChange = (val) => {
-      color$1.format = val.toLowerCase();
-      handleConfirm();
-      customInput.value = color$1.value;
-    };
-    function customInputChange() {
-      handleConfirm();
-      customInput.value = color$1.value;
-      confirmValue();
-    }
-    const buttonAriaLabel = vue.computed(() => {
-      return !isLabeledByFormItem.value ? props.label || t("el.colorpicker.defaultLabel") : void 0;
-    });
-    const buttonAriaLabelledby = vue.computed(() => {
-      return isLabeledByFormItem.value ? formItem == null ? void 0 : formItem.labelId : void 0;
-    });
-    const btnKls = vue.computed(() => {
-      return [
-        ns.b("picker"),
-        ns.is("disabled", colorDisabled.value),
-        ns.is("custom", props.isCustom),
-        ns.bm("picker", colorSize.value)
-      ];
-    });
-    function displayedRgb(color2, showAlpha) {
-      if (!(color2 instanceof color["default"])) {
-        throw new TypeError("color should be instance of _color Class");
-      }
-      const { r, g, b } = color2.toRgb();
-      return showAlpha ? `rgba(${r}, ${g}, ${b}, ${color2.get("alpha") / 100})` : `rgb(${r}, ${g}, ${b})`;
-    }
-    function setShowPicker(value) {
-      showPicker.value = value;
-    }
-    const debounceSetShowPicker = lodashUnified.debounce(setShowPicker, 100);
-    function show() {
-      setTimeout(() => {
-        if (colorDisabled.value)
-          return;
-        setShowPicker(true);
-      }, 100);
-    }
-    function hide() {
-      debounceSetShowPicker(false);
-      resetColor();
-    }
-    function resetColor() {
-      vue.nextTick(() => {
-        if (props.modelValue) {
-          color$1.fromString(props.modelValue);
-        } else {
-          color$1.value = "";
-          vue.nextTick(() => {
-            showPanelColor.value = false;
-          });
-        }
-      });
-    }
-    function handleTrigger() {
-      if (colorDisabled.value)
-        return;
-      debounceSetShowPicker(!showPicker.value);
-    }
-    function handleConfirm() {
-      color$1.fromString(customInput.value);
-    }
-    function confirmValue() {
-      const value = color$1.value;
-      emit(event.UPDATE_MODEL_EVENT, value);
-      showPicker.value && emit("change", value);
-      if (props.validateEvent) {
-        formItem == null ? void 0 : formItem.validate("change").catch((err) => error.debugWarn(err));
-      }
-      vue.nextTick(() => {
-        const newColor = new color["default"]({
-          enableAlpha: props.showAlpha,
-          format: props.colorFormat || "",
-          value: props.modelValue
-        });
-        if (!color$1.compare(newColor)) {
-          resetColor();
-        }
-      });
-    }
-    function clear() {
-      debounceSetShowPicker(false);
-      emit(event.UPDATE_MODEL_EVENT, null);
-      emit("change", null);
-      if (props.modelValue !== null && props.validateEvent) {
-        formItem == null ? void 0 : formItem.validate("change").catch((err) => error.debugWarn(err));
-      }
-      resetColor();
-    }
-    vue.onMounted(() => {
-      if (props.modelValue) {
-        customInput.value = currentColor.value;
-      }
-    });
-    vue.watch(() => props.modelValue, (newVal) => {
-      if (!newVal) {
-        showPanelColor.value = false;
-      } else if (newVal && newVal !== color$1.value) {
-        shouldActiveChange = false;
-        color$1.fromString(newVal);
-      }
-    });
-    vue.watch(sRGBHex, (newValue) => {
-      color$1.fromString(newValue);
-      customInput.value = color$1.value;
-    });
-    vue.watch(() => customInput.value, (newValue, oldValue) => {
-      if (newValue !== oldValue) {
-        confirmValue();
-      }
-    });
-    vue.watch(() => currentColor.value, (val) => {
-      customInput.value = val;
-      shouldActiveChange && emit("activeChange", val);
-      shouldActiveChange = true;
-    });
-    vue.watch(() => color$1.value, () => {
-      if (!props.modelValue && !showPanelColor.value) {
-        showPanelColor.value = true;
-      }
-    });
-    vue.watch(() => showPicker.value, () => {
-      vue.nextTick(() => {
-        var _a2, _b2, _c;
-        (_a2 = hue.value) == null ? void 0 : _a2.update();
-        (_b2 = sv.value) == null ? void 0 : _b2.update();
-        (_c = alpha.value) == null ? void 0 : _c.update();
-      });
-    });
-    vue.provide(colorPicker.colorPickerContextKey, {
-      currentColor
-    });
-    expose({
-      color: color$1,
-      show,
-      hide
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(index$4.ElTooltip), {
-        ref_key: "popper",
-        ref: popper,
-        visible: showPicker.value,
-        "show-arrow": false,
-        "fallback-placements": ["bottom", "top", "right", "left"],
-        offset: 0,
-        "gpu-acceleration": false,
-        "popper-class": [vue.unref(ns).be("picker", "panel"), vue.unref(ns).b("dropdown"), _ctx.popperClass],
-        "stop-popper-mouse-event": false,
-        effect: "light",
-        trigger: "click",
-        transition: `${vue.unref(ns).namespace.value}-zoom-in-top`,
-        persistent: ""
-      }, {
-        content: vue.withCtx(() => [
-          vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", null, [
-            vue.createElementVNode("div", {
-              class: vue.normalizeClass(vue.unref(ns).be("dropdown", "main-wrapper"))
-            }, [
-              vue.createVNode(hueSlider["default"], {
-                ref_key: "hue",
-                ref: hue,
-                class: "hue-slider",
-                color: vue.unref(color$1),
-                vertical: ""
-              }, null, 8, ["color"]),
-              vue.createVNode(svPanel["default"], {
-                ref_key: "sv",
-                ref: sv,
-                color: vue.unref(color$1)
-              }, null, 8, ["color"])
-            ], 2),
-            _ctx.showAlpha ? (vue.openBlock(), vue.createBlock(alphaSlider["default"], {
-              key: 0,
-              ref_key: "alpha",
-              ref: alpha,
-              color: vue.unref(color$1)
-            }, null, 8, ["color"])) : vue.createCommentVNode("v-if", true),
-            _ctx.predefine ? (vue.openBlock(), vue.createBlock(predefine["default"], {
-              key: 1,
-              ref: "predefine",
-              color: vue.unref(color$1),
-              colors: _ctx.predefine
-            }, null, 8, ["color", "colors"])) : vue.createCommentVNode("v-if", true),
-            vue.createElementVNode("div", {
-              class: vue.normalizeClass(vue.unref(ns).be("dropdown", "btns"))
-            }, [
-              vue.createElementVNode("span", {
-                class: vue.normalizeClass(vue.unref(ns).be("dropdown", "value"))
-              }, [
-                vue.createVNode(vue.unref(index$5.ElInput), {
-                  modelValue: customInput.value,
-                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => customInput.value = $event),
-                  "validate-event": false,
-                  size: "small",
-                  onKeyup: vue.withKeys(handleConfirm, ["enter"]),
-                  onBlur: customInputChange
-                }, null, 8, ["modelValue", "onKeyup"])
-              ], 2),
-              vue.createVNode(vue.unref(index$6.ElIcon), {
-                onClick: vue.withModifiers(getEyeDropper, ["stop"])
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(iconsVue.EditPen))
-                ]),
-                _: 1
-              }, 8, ["onClick"]),
-              vue.createVNode(vue.unref(index$7.ElRadioGroup), {
-                onChange: modeChange,
-                modelValue: colorMode.value,
-                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => colorMode.value = $event),
-                size: "small"
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(index$7.ElRadioButton), { label: "HEX" }),
-                  vue.createVNode(vue.unref(index$7.ElRadioButton), { label: "RGB" })
-                ]),
-                _: 1
-              }, 8, ["modelValue"]),
-              vue.createCommentVNode(` <el-button
-            :class="ns.be('dropdown', 'link-btn')"
-            text
-            size="small"
-            @click="clear"
-          >
-            {{ t('el.colorpicker.clear') }}
-          </el-button>
-          <el-button
-            plain
-            size="small"
-            :class="ns.be('dropdown', 'btn')"
-            @click="confirmValue"
-          >
-            {{ t('el.colorpicker.confirm') }}
-          </el-button> `)
-            ], 2)
-          ])), [
-            [vue.unref(index$8["default"]), hide]
-          ])
-        ]),
-        default: vue.withCtx(() => [
-          vue.createElementVNode("div", {
-            id: vue.unref(buttonId),
-            class: vue.normalizeClass(vue.unref(btnKls)),
-            role: "button",
-            "aria-label": vue.unref(buttonAriaLabel),
-            "aria-labelledby": vue.unref(buttonAriaLabelledby),
-            "aria-description": vue.unref(t)("el.colorpicker.description", { color: _ctx.modelValue || "" }),
-            tabindex: _ctx.tabindex,
-            onKeydown: vue.withKeys(handleTrigger, ["enter"])
-          }, [
-            vue.unref(colorDisabled) ? (vue.openBlock(), vue.createElementBlock("div", {
-              key: 0,
-              class: vue.normalizeClass(vue.unref(ns).be("picker", "mask"))
-            }, null, 2)) : vue.createCommentVNode("v-if", true),
-            vue.createElementVNode("div", {
-              class: vue.normalizeClass(vue.unref(ns).be("picker", "trigger")),
-              onClick: handleTrigger
-            }, [
-              vue.createElementVNode("span", {
-                class: vue.normalizeClass([vue.unref(ns).be("picker", "color"), vue.unref(ns).is("alpha", _ctx.showAlpha)])
-              }, [
-                vue.createElementVNode("span", {
-                  class: vue.normalizeClass(vue.unref(ns).be("picker", "color-inner")),
-                  style: vue.normalizeStyle({
-                    backgroundColor: vue.unref(displayedColor)
-                  })
-                }, [
-                  vue.withDirectives(vue.createVNode(vue.unref(index$6.ElIcon), {
-                    class: vue.normalizeClass([vue.unref(ns).be("picker", "icon"), vue.unref(ns).is("icon-arrow-down")])
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(iconsVue.ArrowDown))
-                    ]),
-                    _: 1
-                  }, 8, ["class"]), [
-                    [vue.vShow, _ctx.modelValue || showPanelColor.value]
-                  ]),
-                  !_ctx.modelValue && !showPanelColor.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$6.ElIcon), {
-                    key: 0,
-                    class: vue.normalizeClass([vue.unref(ns).be("picker", "empty"), vue.unref(ns).is("icon-close")])
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(iconsVue.Close))
-                    ]),
-                    _: 1
-                  }, 8, ["class"])) : vue.createCommentVNode("v-if", true)
-                ], 6)
-              ], 2)
-            ], 2)
-          ], 42, _hoisted_1)
-        ]),
-        _: 1
-      }, 8, ["visible", "popper-class", "transition"]);
-    };
+const colorPickerProps = runtime.buildProps({
+  modelValue: String,
+  id: String,
+  showAlpha: Boolean,
+  colorFormat: String,
+  disabled: Boolean,
+  size: index.useSizeProp,
+  popperClass: {
+    type: String,
+    default: ""
+  },
+  label: {
+    type: String,
+    default: void 0
+  },
+  isCustom: {
+    type: Boolean,
+    default: false
+  },
+  tabindex: {
+    type: [String, Number],
+    default: 0
+  },
+  predefine: {
+    type: runtime.definePropType(Array)
+  },
+  validateEvent: {
+    type: Boolean,
+    default: true
   }
 });
-var ColorPicker = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/Users/st/Desktop/vue/nxx-ui/packages/components/color-picker/src/color-picker.vue"]]);
+const colorPickerEmits = {
+  [event.UPDATE_MODEL_EVENT]: (val) => shared.isString(val) || lodashUnified.isNil(val),
+  [event.CHANGE_EVENT]: (val) => shared.isString(val) || lodashUnified.isNil(val),
+  activeChange: (val) => shared.isString(val) || lodashUnified.isNil(val)
+};
+const colorPickerContextKey = Symbol("colorPickerContextKey");
 
-exports["default"] = ColorPicker;
+exports.colorPickerContextKey = colorPickerContextKey;
+exports.colorPickerEmits = colorPickerEmits;
+exports.colorPickerProps = colorPickerProps;
 //# sourceMappingURL=color-picker.js.map