yc-design-vue 1.7.5 → 1.7.7

package/es/ColorPicker/ColorInput.vue.js

@@ -1,8 +1,161 @@
-import _sfc_main from "./ColorInput.vue2.js";
-/* empty css                */
-/* empty css                */
-import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const ColorInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4a7de51a"]]);
+import { defineComponent, toRefs, ref, watch, createElementBlock, openBlock, createElementVNode, createVNode, unref, createBlock, createCommentVNode, withCtx, createTextVNode, Fragment } from "vue";
+import { parseColor } from "../_shared/utils/color.js";
+import "../_shared/utils/dom.js";
+import "../_shared/utils/time.js";
+import "../Empty/index.js";
+/* empty css                             */
+import { COLOR_PICKER_FORMAT_OPTIONS } from "../_shared/constants/index.js";
+import Select from "../Select/index.js";
+import Input from "../Input/index.js";
+import InputNumber from "../InputNumber/index.js";
+const _hoisted_1 = { class: "yc-color-picker-input-wrapper" };
+const _hoisted_2 = { class: "yc-color-picker-format" };
+const _hoisted_3 = { class: "yc-color-picker-color" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ColorInput",
+  props: {
+    color: {},
+    baseColor: {},
+    alpha: {},
+    disabled: { type: Boolean },
+    disabledAlpha: { type: Boolean }
+  },
+  emits: ["update:color", "update:baseColor", "update:alpha", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { color, alpha: _alpha } = toRefs(props);
+    const format = ref("hex");
+    const hex = ref("");
+    const rgb = ref({});
+    const alpha = ref(_alpha.value);
+    const handleSet = (type) => {
+      if (type == "hex") {
+        const a = parseColor(color.value).getAlpha();
+        const resultColor = parseColor(hex.value).setAlpha(a).toHex8();
+        emits("update:color", resultColor);
+        emits("update:baseColor", resultColor);
+        emits("change", resultColor, "color");
+      } else if (type == "rgb") {
+        const { r, g, b } = rgb.value;
+        const resultColor = `rgb(${r},${g},${b})`;
+        emits("update:color", resultColor);
+        emits("update:baseColor", resultColor);
+        emits("change", resultColor, "color");
+      } else {
+        const a = +(alpha.value / 100).toFixed(2);
+        const resultColor = parseColor(color.value).setAlpha(a).toRgbString();
+        emits("update:color", resultColor);
+        emits("update:alpha", alpha.value);
+        emits("change", resultColor, "alpha");
+      }
+    };
+    watch(
+      () => color.value,
+      () => {
+        hex.value = parseColor(color.value).toHex();
+        rgb.value = parseColor(color.value).toRgb();
+      },
+      {
+        immediate: true
+      }
+    );
+    watch(
+      () => _alpha.value,
+      () => {
+        alpha.value = _alpha.value * 100;
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createVNode(unref(Select), {
+            modelValue: format.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => format.value = $event),
+            options: unref(COLOR_PICKER_FORMAT_OPTIONS),
+            "trigger-props": {
+              contentClass: "yc-color-picker-format-popup-content"
+            },
+            size: "mini"
+          }, null, 8, ["modelValue", "options"])
+        ]),
+        createElementVNode("div", _hoisted_3, [
+          format.value == "hex" ? (openBlock(), createBlock(unref(Input), {
+            key: 0,
+            modelValue: hex.value,
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => hex.value = $event),
+            "max-length": 6,
+            disabled: _ctx.disabled,
+            size: "mini",
+            class: "hex-input",
+            onBlur: _cache[2] || (_cache[2] = ($event) => handleSet("hex")),
+            onPressEnter: _cache[3] || (_cache[3] = ($event) => handleSet("hex"))
+          }, {
+            prefix: withCtx(() => _cache[16] || (_cache[16] = [
+              createTextVNode(" # ", -1)
+            ])),
+            _: 1
+          }, 8, ["modelValue", "disabled"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            createVNode(unref(InputNumber), {
+              modelValue: rgb.value.r,
+              "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => rgb.value.r = $event),
+              min: 0,
+              max: 255,
+              disabled: _ctx.disabled,
+              size: "mini",
+              class: "rgb-input",
+              "hide-button": "",
+              onBlur: _cache[5] || (_cache[5] = ($event) => handleSet("rgb")),
+              onPressEnter: _cache[6] || (_cache[6] = ($event) => handleSet("rgb"))
+            }, null, 8, ["modelValue", "disabled"]),
+            createVNode(unref(InputNumber), {
+              modelValue: rgb.value.g,
+              "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => rgb.value.g = $event),
+              min: 0,
+              max: 255,
+              disabled: _ctx.disabled,
+              size: "mini",
+              class: "rgb-input",
+              "hide-button": "",
+              onBlur: _cache[8] || (_cache[8] = ($event) => handleSet("rgb")),
+              onPressEnter: _cache[9] || (_cache[9] = ($event) => handleSet("rgb"))
+            }, null, 8, ["modelValue", "disabled"]),
+            createVNode(unref(InputNumber), {
+              modelValue: rgb.value.b,
+              "onUpdate:modelValue": _cache[10] || (_cache[10] = ($event) => rgb.value.b = $event),
+              min: 0,
+              max: 255,
+              disabled: _ctx.disabled,
+              class: "rgb-input",
+              size: "mini",
+              "hide-button": "",
+              onBlur: _cache[11] || (_cache[11] = ($event) => handleSet("rgb")),
+              onPressEnter: _cache[12] || (_cache[12] = ($event) => handleSet("rgb"))
+            }, null, 8, ["modelValue", "disabled"])
+          ], 64)),
+          !_ctx.disabledAlpha ? (openBlock(), createBlock(unref(InputNumber), {
+            key: 2,
+            modelValue: alpha.value,
+            "onUpdate:modelValue": _cache[13] || (_cache[13] = ($event) => alpha.value = $event),
+            min: 0,
+            max: 100,
+            disabled: _ctx.disabled,
+            size: "mini",
+            "hide-button": "",
+            class: "alpha-input",
+            onBlur: _cache[14] || (_cache[14] = ($event) => handleSet("alpha")),
+            onPressEnter: _cache[15] || (_cache[15] = ($event) => handleSet("alpha"))
+          }, {
+            suffix: withCtx(() => _cache[17] || (_cache[17] = [
+              createTextVNode(" % ", -1)
+            ])),
+            _: 1
+          }, 8, ["modelValue", "disabled"])) : createCommentVNode("", true)
+        ])
+      ]);
+    };
+  }
+});
 export {
-  ColorInput as default
+  _sfc_main as default
 };

package/es/ColorPicker/ColorInput.vue3.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./ColorInput.vue.js";
+/* empty css                */
+export {
+  _sfc_main as default
+};

package/es/ColorPicker/ColorList.vue.js

@@ -1,7 +1,47 @@
-import _sfc_main from "./ColorList.vue2.js";
-/* empty css               */
-import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const ColorList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cca9674b"]]);
+import { defineComponent, createElementBlock, openBlock, createElementVNode, createCommentVNode, toDisplayString, Fragment, renderList, normalizeStyle } from "vue";
+const _hoisted_1 = { class: "yc-color-picker-colors-section" };
+const _hoisted_2 = { class: "yc-color-picker-colors-text" };
+const _hoisted_3 = {
+  key: 0,
+  class: "yc-color-picker-colors-empty"
+};
+const _hoisted_4 = { class: "yc-color-picker-colors-list" };
+const _hoisted_5 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ColorList",
+  props: {
+    label: {},
+    colors: {}
+  },
+  emits: ["colorClick"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, toDisplayString(_ctx.label), 1),
+        !_ctx.colors.length ? (openBlock(), createElementBlock("div", _hoisted_3, "暂无")) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_4, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.colors, (color, index) => {
+            return openBlock(), createElementBlock("div", {
+              key: index,
+              class: "yc-color-picker-color-block",
+              style: normalizeStyle({
+                backgroundColor: color
+              }),
+              onClick: ($event) => _ctx.$emit("colorClick", color)
+            }, [
+              createElementVNode("div", {
+                class: "yc-color-picker-block",
+                style: normalizeStyle({
+                  backgroundColor: color
+                })
+              }, null, 4)
+            ], 12, _hoisted_5);
+          }), 128))
+        ])
+      ]);
+    };
+  }
+});
 export {
-  ColorList as default
+  _sfc_main as default
 };

package/es/ColorPicker/ColorList.vue3.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./ColorList.vue.js";
+/* empty css               */
+export {
+  _sfc_main as default
+};

package/es/ColorPicker/ColorPalette.vue.js

@@ -1,7 +1,100 @@
-import _sfc_main from "./ColorPalette.vue2.js";
-/* empty css                  */
-import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const ColorPalette = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-60bb1666"]]);
+import { defineComponent, toRefs, ref, computed, watch, createElementBlock, openBlock, normalizeStyle, unref, createElementVNode } from "vue";
+import { useElementBounding, useDraggable } from "../node_modules/@vueuse/core/index.js";
+import { parseColor } from "../_shared/utils/color.js";
+import { sleep, valueToPx } from "../_shared/utils/dom.js";
+import "../_shared/utils/time.js";
+import "../Empty/index.js";
+/* empty css                             */
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ColorPalette",
+  props: {
+    color: {},
+    baseColor: {},
+    popupVisible: { type: Boolean },
+    disabled: { type: Boolean },
+    hideTrigger: { type: Boolean }
+  },
+  emits: ["update:color", "update:baseColor"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { popupVisible, baseColor, disabled, hideTrigger } = toRefs(props);
+    const btnRef = ref();
+    const paletteRef = ref();
+    const { width, height, top, left } = useElementBounding(paletteRef, {
+      updateTiming: "next-frame"
+    });
+    const hsv = computed(() => {
+      return parseColor(baseColor.value).toHsv();
+    });
+    const { x, y } = useDraggable(btnRef, {
+      disabled,
+      onMove() {
+        setColor();
+      }
+    });
+    const handleClick = (e) => {
+      if (disabled.value) return;
+      x.value = e.pageX;
+      y.value = e.pageY;
+      setColor();
+    };
+    const setColor = () => {
+      x.value = (x.value - left.value) / width.value;
+      x.value = x.value < 0 ? 0 : x.value;
+      x.value = x.value > 1 ? 1 : x.value;
+      y.value = (y.value - top.value) / height.value;
+      y.value = y.value < 0 ? 0 : y.value;
+      y.value = y.value > 1 ? 1 : y.value;
+      const color = parseColor({
+        ...hsv.value,
+        s: x.value,
+        v: 1 - y.value
+      }).toHexString();
+      emits("update:color", color);
+    };
+    watch(
+      () => popupVisible.value,
+      async (val) => {
+        if (val || hideTrigger.value) {
+          await sleep(0);
+          x.value = hsv.value.s;
+          y.value = 1 - hsv.value.v;
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    __expose({
+      setPosition(color) {
+        const { s, v } = parseColor(color).toHsv();
+        x.value = s;
+        y.value = 1 - v;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "yc-color-picker-palette",
+        style: normalizeStyle({
+          backgroundColor: unref(baseColor)
+        }),
+        ref_key: "paletteRef",
+        ref: paletteRef,
+        onClick: handleClick
+      }, [
+        createElementVNode("div", {
+          class: "yc-color-picker-handler",
+          style: normalizeStyle({
+            transform: `translate(calc(${unref(valueToPx)(unref(x) * unref(width))} - 50%),calc(${unref(valueToPx)(unref(y) * unref(height))} - 50%))`
+          }),
+          ref_key: "btnRef",
+          ref: btnRef
+        }, null, 4)
+      ], 4);
+    };
+  }
+});
 export {
-  ColorPalette as default
+  _sfc_main as default
 };

package/es/ColorPicker/ColorPalette.vue3.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./ColorPalette.vue.js";
+/* empty css                  */
+export {
+  _sfc_main as default
+};

package/es/ColorPicker/ColorPanel.vue.js

@@ -1,7 +1,148 @@
-import _sfc_main from "./ColorPanel.vue2.js";
+import { defineComponent, ref, createElementBlock, openBlock, normalizeClass, unref, createVNode, createElementVNode, createCommentVNode, isRef, normalizeStyle, createBlock } from "vue";
+import useContext from "./hooks/useContext.js";
+import _sfc_main$1 from "./ColorPalette.vue.js";
+/* empty css                  */
+import _sfc_main$3 from "./ColorInput.vue.js";
 /* empty css                */
-import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const ColorPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0f0acfab"]]);
+import _sfc_main$4 from "./ColorList.vue.js";
+/* empty css               */
+import _sfc_main$2 from "./ColorControl.vue.js";
+/* empty css                  */
+const _hoisted_1 = { class: "yc-color-picker-panel-control" };
+const _hoisted_2 = { class: "yc-color-picker-control-wrapper" };
+const _hoisted_3 = { class: "yc-color-picker-control-bar-bg" };
+const _hoisted_4 = {
+  key: 0,
+  class: "yc-color-picker-panel-colors"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ColorPanel",
+  setup(__props) {
+    const {
+      popupVisible,
+      computedColor,
+      baseColor,
+      alpha,
+      disabled,
+      disabledAlpha,
+      showHistory,
+      showPreset,
+      hideTrigger,
+      presetColors,
+      historyColors
+    } = useContext().inject();
+    const colorBarRef = ref();
+    const alphaBarRef = ref();
+    const paletteRef = ref();
+    const handleColorClick = (color) => {
+      var _a, _b, _c;
+      if (disabled.value) return;
+      computedColor.value = color;
+      baseColor.value = color;
+      (_a = colorBarRef.value) == null ? void 0 : _a.setPosition(color);
+      (_b = alphaBarRef.value) == null ? void 0 : _b.setPosition(color);
+      (_c = paletteRef.value) == null ? void 0 : _c.setPosition(color);
+    };
+    const handleChange = (color, type) => {
+      var _a, _b, _c;
+      if (type == "alpha") {
+        (_a = alphaBarRef.value) == null ? void 0 : _a.setPosition(color);
+      } else {
+        (_b = colorBarRef.value) == null ? void 0 : _b.setPosition(color);
+        (_c = paletteRef.value) == null ? void 0 : _c.setPosition(color);
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "yc-color-picker-panel",
+          {
+            "yc-color-picker-panel-disabled": unref(disabled)
+          }
+        ])
+      }, [
+        createVNode(_sfc_main$1, {
+          color: unref(computedColor),
+          "onUpdate:color": _cache[0] || (_cache[0] = ($event) => isRef(computedColor) ? computedColor.value = $event : null),
+          "base-color": unref(baseColor),
+          "popup-visible": unref(popupVisible),
+          "hide-trigger": unref(hideTrigger),
+          disabled: unref(disabled),
+          ref_key: "paletteRef",
+          ref: paletteRef
+        }, null, 8, ["color", "base-color", "popup-visible", "hide-trigger", "disabled"]),
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_2, [
+            createElementVNode("div", null, [
+              createVNode(_sfc_main$2, {
+                mode: "color",
+                color: unref(computedColor),
+                "onUpdate:color": _cache[1] || (_cache[1] = ($event) => isRef(computedColor) ? computedColor.value = $event : null),
+                "base-color": unref(baseColor),
+                "onUpdate:baseColor": _cache[2] || (_cache[2] = ($event) => isRef(baseColor) ? baseColor.value = $event : null),
+                "popup-visible": unref(popupVisible),
+                disabled: unref(disabled),
+                "hide-trigger": unref(hideTrigger),
+                ref_key: "colorBarRef",
+                ref: colorBarRef,
+                onChange: _cache[3] || (_cache[3] = (v) => {
+                  var _a;
+                  return (_a = paletteRef.value) == null ? void 0 : _a.setPosition(v);
+                })
+              }, null, 8, ["color", "base-color", "popup-visible", "disabled", "hide-trigger"]),
+              createElementVNode("div", _hoisted_3, [
+                createVNode(_sfc_main$2, {
+                  mode: "alpha",
+                  color: unref(computedColor),
+                  "onUpdate:color": _cache[4] || (_cache[4] = ($event) => isRef(computedColor) ? computedColor.value = $event : null),
+                  alpha: unref(alpha),
+                  "onUpdate:alpha": _cache[5] || (_cache[5] = ($event) => isRef(alpha) ? alpha.value = $event : null),
+                  "base-color": unref(baseColor),
+                  "popup-visible": unref(popupVisible),
+                  disabled: unref(disabled),
+                  "hide-trigger": unref(hideTrigger),
+                  ref_key: "alphaBarRef",
+                  ref: alphaBarRef
+                }, null, 8, ["color", "alpha", "base-color", "popup-visible", "disabled", "hide-trigger"])
+              ])
+            ]),
+            createElementVNode("div", {
+              class: "yc-color-picker-preview",
+              style: normalizeStyle({
+                backgroundColor: unref(computedColor)
+              })
+            }, null, 4)
+          ]),
+          createVNode(_sfc_main$3, {
+            color: unref(computedColor),
+            "onUpdate:color": _cache[6] || (_cache[6] = ($event) => isRef(computedColor) ? computedColor.value = $event : null),
+            "base-color": unref(baseColor),
+            "onUpdate:baseColor": _cache[7] || (_cache[7] = ($event) => isRef(baseColor) ? baseColor.value = $event : null),
+            alpha: unref(alpha),
+            "onUpdate:alpha": _cache[8] || (_cache[8] = ($event) => isRef(alpha) ? alpha.value = $event : null),
+            disabled: unref(disabled),
+            "disabled-alpha": unref(disabledAlpha),
+            onChange: handleChange
+          }, null, 8, ["color", "base-color", "alpha", "disabled", "disabled-alpha"])
+        ]),
+        unref(showHistory) || unref(showPreset) ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          unref(showHistory) ? (openBlock(), createBlock(_sfc_main$4, {
+            key: 0,
+            label: "最近使用的颜色",
+            colors: unref(historyColors),
+            onColorClick: handleColorClick
+          }, null, 8, ["colors"])) : createCommentVNode("", true),
+          unref(showPreset) ? (openBlock(), createBlock(_sfc_main$4, {
+            key: 1,
+            label: "系统预设的颜色",
+            colors: unref(presetColors),
+            onColorClick: handleColorClick
+          }, null, 8, ["colors"])) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
 export {
-  ColorPanel as default
+  _sfc_main as default
 };

package/es/ColorPicker/ColorPanel.vue3.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./ColorPanel.vue.js";
+/* empty css                */
+export {
+  _sfc_main as default
+};

package/es/ColorPicker/ColorPicker.vue.js

@@ -1,7 +1,88 @@
-import _sfc_main from "./ColorPicker.vue2.js";
-/* empty css                 */
-import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const _ColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4c78f046"]]);
+import { defineComponent, createBlock, openBlock, unref, mergeProps, isRef, withCtx, renderSlot, createElementVNode, normalizeStyle, normalizeClass, createElementBlock, createCommentVNode, toDisplayString, createVNode } from "vue";
+import { COLOR_PICKER_PRESET_COLORS } from "../_shared/constants/index.js";
+import useContext from "./hooks/useContext.js";
+import _sfc_main$1 from "./ColorPanel.vue.js";
+/* empty css                */
+import Trigger from "../Trigger/index.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "yc-color-picker-value"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "ColorPicker"
+  },
+  __name: "ColorPicker",
+  props: {
+    modelValue: { default: void 0 },
+    defaultValue: { default: "#FF0000" },
+    format: { default: "hex" },
+    size: { default: void 0 },
+    showText: { type: Boolean, default: false },
+    showHistory: { type: Boolean, default: false },
+    showPreset: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    disabledAlpha: { type: Boolean, default: false },
+    hideTrigger: { type: Boolean, default: false },
+    triggerProps: { default: () => {
+      return {};
+    } },
+    historyColors: { default: () => [] },
+    presetColors: { default: () => COLOR_PICKER_PRESET_COLORS }
+  },
+  emits: ["update:modelValue", "change", "popup-visible-change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { popupVisible, computedColor, size } = useContext().provide(
+      props,
+      emits
+    );
+    return (_ctx, _cache) => {
+      return !_ctx.hideTrigger ? (openBlock(), createBlock(unref(Trigger), mergeProps({
+        key: 0,
+        "popup-visible": unref(popupVisible),
+        "onUpdate:popupVisible": _cache[0] || (_cache[0] = ($event) => isRef(popupVisible) ? popupVisible.value = $event : null),
+        "popup-offset": 4,
+        disabled: _ctx.disabled,
+        "need-transform-origin": "",
+        "animation-name": "slide-dynamic-origin",
+        trigger: "click",
+        position: "bl"
+      }, _ctx.triggerProps, {
+        onPopupVisibleChange: _cache[1] || (_cache[1] = (v) => _ctx.$emit("popup-visible-change", v, unref(computedColor)))
+      }), {
+        content: withCtx(() => [
+          createVNode(_sfc_main$1)
+        ]),
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createElementVNode("div", {
+              class: normalizeClass([
+                "yc-color-picker",
+                `yc-color-picker-size-${unref(size)}`,
+                {
+                  "yc-color-picker-disabled": _ctx.disabled
+                },
+                _ctx.$attrs.class
+              ]),
+              style: normalizeStyle(_ctx.$attrs.style)
+            }, [
+              createElementVNode("div", {
+                class: "yc-color-picker-preview",
+                style: normalizeStyle({
+                  backgroundColor: unref(computedColor)
+                })
+              }, null, 4),
+              _ctx.showText ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(unref(computedColor)), 1)) : createCommentVNode("", true)
+            ], 6)
+          ])
+        ]),
+        _: 3
+      }, 16, ["popup-visible", "disabled"])) : (openBlock(), createBlock(_sfc_main$1, { key: 1 }));
+    };
+  }
+});
 export {
-  _ColorPicker as default
+  _sfc_main as default
 };

package/es/ColorPicker/ColorPicker.vue3.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./ColorPicker.vue.js";
+/* empty css                 */
+export {
+  _sfc_main as default
+};

package/es/ColorPicker/index.css

@@ -1 +1 @@
-.yc-color-picker-panel{overflow:hidden;width:260px;background-color:var(--color-bg-1);border-radius:2px;box-shadow:0 8px 20px 0 rgba(0,0,0,0.1)}.yc-color-picker-panel .yc-color-picker-palette{overflow:hidden;position:relative;cursor:pointer;width:100%;height:178px;background-image:linear-gradient(0deg, #000, transparent),linear-gradient(90deg, #fff, rgba(255,255,255,0));border:1px solid var(--color-border-2);border-bottom:0}.yc-color-picker-panel .yc-color-picker-palette .yc-color-picker-handler{position:absolute;width:16px;height:16px;border:2px solid #fff;border-radius:50%;background-color:transparent;transform:translate(-50%, -50%)}.yc-color-picker-panel .yc-color-picker-panel-control{padding:12px;display:flex;flex-direction:column;gap:12px}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-control-wrapper{display:flex;justify-content:space-between;align-items:center}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-control-wrapper:not(.yc-color-picker-preview)>div{display:flex;flex-direction:column;gap:12px}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-control-wrapper .yc-color-picker-control-bar{cursor:pointer;position:relative;width:182px;height:14px;border-radius:10px;border:1px solid var(--color-border-2);background-image:linear-gradient(90deg, #f00 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00)}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-control-wrapper .yc-color-picker-control-bar .yc-color-picker-control-bar-handler{user-select:none;position:absolute;top:50%;transform:translate(-50%, -50%);width:16px;height:16px;border-radius:50%;border:1px solid var(--color-border-2)}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-control-wrapper .yc-color-picker-control-bar .yc-color-picker-control-bar-handler::before{display:block;content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:8px;height:8px;background:currentColor;border-radius:50%}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-control-wrapper .yc-color-picker-control-bar .yc-color-picker-control-bar-handler::after{display:block;content:'';width:100%;height:100%;background:var(--color-bg-white);border-radius:50%}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-control-wrapper .yc-color-picker-control-bar-bg{width:fit-content;height:fit-content;background-image:conic-gradient(rgba(0,0,0,0.06) 0 25%, transparent 0 50%, rgba(0,0,0,0.06) 0 75%, transparent 0);background-size:8px 8px;border-radius:10px}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-control-wrapper .yc-color-picker-preview{width:40px;height:40px;border:1px solid var(--color-border-2);border-radius:4px}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper{display:flex;align-items:center;gap:20px}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper:deep(.yc-input-outer) .yc-input-wrapper{padding:0 6px}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper:deep(.yc-input-outer) .yc-input-wrapper .yc-input-suffix{padding-left:0}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper .yc-color-picker-format:deep(.yc-select){width:58px}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper .yc-color-picker-color{flex:1;overflow:hidden;display:flex;align-items:center}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper .yc-color-picker-color:deep(.yc-input-outer) .yc-input-wrapper{border-radius:0;border-right-color:var(--color-border-2);border-color:var(--color-border-2)}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper .yc-color-picker-color:deep(.yc-input-outer) .yc-input-wrapper .yc-input-prefix{padding-right:6px}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper .yc-color-picker-color:deep(.yc-input-outer) .yc-input-wrapper:first-child{border-top-left-radius:2px;border-bottom-left-radius:2px}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper .yc-color-picker-color:deep(.yc-input-outer) .yc-input-wrapper:last-child{border-top-right-radius:2px;border-bottom-right-radius:2px;border-right-color:transparent}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper .yc-color-picker-color:deep(.yc-input-outer) .yc-input-wrapper:focus-within:not(.yc-input-disabled){border-radius:2px;border-right-color:var(--primary-6);border-color:var(--primary-6)}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper .yc-color-picker-color:deep(.yc-input-outer).yc-input-number .yc-input{text-align:center}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper .yc-color-picker-color .rgb-input,.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper .yc-color-picker-color .hex-input{flex:1}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper .yc-color-picker-color .alpha-input{width:52px}.yc-color-picker-panel .yc-color-picker-panel-colors{padding:12px;border-top:1px solid var(--color-border-2);display:flex;flex-direction:column;gap:12px}.yc-color-picker-panel .yc-color-picker-panel-colors .yc-color-picker-colors-section{display:flex;flex-direction:column;gap:6px}.yc-color-picker-panel .yc-color-picker-panel-colors .yc-color-picker-colors-section .yc-color-picker-colors-text{color:var(--color-text-1);font-weight:400;font-size:12px}.yc-color-picker-panel .yc-color-picker-panel-colors .yc-color-picker-colors-section .yc-color-picker-colors-empty{margin:6px 0 0 0;color:var(--color-text-3);font-size:12px}.yc-color-picker-panel .yc-color-picker-panel-colors .yc-color-picker-colors-section .yc-color-picker-colors-list{display:flex;flex-wrap:wrap;gap:6px 4px}.yc-color-picker-panel .yc-color-picker-panel-colors .yc-color-picker-colors-section .yc-color-picker-colors-list .yc-color-picker-color-block{cursor:pointer;width:16px;height:16px;overflow:hidden;background-image:conic-gradient(rgba(0,0,0,0.06) 0 25%, transparent 0 50%, rgba(0,0,0,0.06) 0 75%, transparent 0);background-size:8px 8px;border-radius:2px;transition:transform ease-out 60ms}.yc-color-picker-panel .yc-color-picker-panel-colors .yc-color-picker-colors-section .yc-color-picker-colors-list .yc-color-picker-color-block:hover{transform:scale(1.1)}.yc-color-picker-panel .yc-color-picker-panel-colors .yc-color-picker-colors-section .yc-color-picker-colors-list .yc-color-picker-color-block .yc-color-picker-block{height:100%;width:100%}.yc-color-picker-panel-disabled{cursor:not-allowed}.yc-color-picker-panel-disabled .yc-color-picker-palette{cursor:not-allowed}.yc-color-picker-panel-disabled .yc-color-picker-panel-control .yc-color-picker-control-wrapper .yc-color-picker-control-bar{cursor:not-allowed}.yc-color-picker{cursor:pointer;background-color:var(--color-fill-2);border-radius:2px;display:inline-flex;align-items:center;gap:4px}.yc-color-picker:not(.yc-color-picker-disabled):hover{background-color:var(--color-fill-3)}.yc-color-picker .yc-color-picker-value{color:var(--color-text-1);font-weight:400}.yc-color-picker.yc-color-picker-disabled{cursor:not-allowed;background-color:var(--color-fill-2)}.yc-color-picker.yc-color-picker-disabled .yc-color-picker-value{color:var(--color-text-4)}.yc-color-picker-size-mini{height:24px;padding:4px;font-size:12px}.yc-color-picker-size-mini .yc-color-picker-preview{height:100%;width:calc(24px - 8px)}.yc-color-picker-size-small{height:28px;padding:3px 4px;font-size:14px}.yc-color-picker-size-small .yc-color-picker-preview{height:100%;width:calc(28px - 8px)}.yc-color-picker-size-medium{height:32px;padding:4px;font-size:14px}.yc-color-picker-size-medium .yc-color-picker-preview{height:100%;width:calc(32px - 8px)}.yc-color-picker-size-large{height:36px;padding:5px;font-size:14px}.yc-color-picker-size-large .yc-color-picker-preview{height:100%;width:calc(36px - 10px)}
+.yc-color-picker-panel{overflow:hidden;width:260px;background-color:var(--color-bg-1);border-radius:2px;box-shadow:0 8px 20px 0 rgba(0,0,0,0.1)}.yc-color-picker-panel .yc-color-picker-palette{overflow:hidden;position:relative;cursor:pointer;width:100%;height:178px;background-image:linear-gradient(0deg, #000, transparent),linear-gradient(90deg, #fff, rgba(255,255,255,0));border:1px solid var(--color-border-2);border-bottom:0}.yc-color-picker-panel .yc-color-picker-palette .yc-color-picker-handler{position:absolute;width:16px;height:16px;border:2px solid #fff;border-radius:50%;background-color:transparent;transform:translate(-50%, -50%)}.yc-color-picker-panel .yc-color-picker-panel-control{padding:12px;display:flex;flex-direction:column;gap:12px}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-control-wrapper{display:flex;justify-content:space-between;align-items:center}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-control-wrapper:not(.yc-color-picker-preview)>div{display:flex;flex-direction:column;gap:12px}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-control-wrapper .yc-color-picker-control-bar{cursor:pointer;position:relative;width:182px;height:14px;border-radius:10px;border:1px solid var(--color-border-2);background-image:linear-gradient(90deg, #f00 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00)}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-control-wrapper .yc-color-picker-control-bar .yc-color-picker-control-bar-handler{user-select:none;position:absolute;top:50%;transform:translate(-50%, -50%);width:16px;height:16px;border-radius:50%;border:1px solid var(--color-border-2)}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-control-wrapper .yc-color-picker-control-bar .yc-color-picker-control-bar-handler::before{display:block;content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:8px;height:8px;background:currentColor;border-radius:50%}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-control-wrapper .yc-color-picker-control-bar .yc-color-picker-control-bar-handler::after{display:block;content:'';width:100%;height:100%;background:var(--color-bg-white);border-radius:50%}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-control-wrapper .yc-color-picker-control-bar-bg{width:fit-content;height:fit-content;background-image:conic-gradient(rgba(0,0,0,0.06) 0 25%, transparent 0 50%, rgba(0,0,0,0.06) 0 75%, transparent 0);background-size:8px 8px;border-radius:10px}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-control-wrapper .yc-color-picker-preview{width:40px;height:40px;border:1px solid var(--color-border-2);border-radius:4px}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper{display:flex;align-items:center;gap:20px}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper .yc-input-outer .yc-input-wrapper{padding:0 6px}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper .yc-input-outer .yc-input-wrapper .yc-input-suffix{padding-left:0}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper .yc-color-picker-format .yc-select{width:58px}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper .yc-color-picker-color{flex:1;overflow:hidden;display:flex;align-items:center}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper .yc-color-picker-color .yc-input-outer .yc-input-wrapper{border-radius:0;border-right-color:var(--color-border-2);border-color:var(--color-border-2)}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper .yc-color-picker-color .yc-input-outer .yc-input-wrapper .yc-input-prefix{padding-right:6px}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper .yc-color-picker-color .yc-input-outer .yc-input-wrapper:first-child{border-top-left-radius:2px;border-bottom-left-radius:2px}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper .yc-color-picker-color .yc-input-outer .yc-input-wrapper:last-child{border-top-right-radius:2px;border-bottom-right-radius:2px;border-right-color:transparent}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper .yc-color-picker-color .yc-input-outer .yc-input-wrapper:focus-within:not(.yc-input-disabled){border-radius:2px;border-right-color:var(--primary-6);border-color:var(--primary-6)}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper .yc-color-picker-color .yc-input-outer.yc-input-number .yc-input{text-align:center}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper .yc-color-picker-color .rgb-input,.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper .yc-color-picker-color .hex-input{flex:1}.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper .yc-color-picker-color .alpha-input{width:52px}.yc-color-picker-panel .yc-color-picker-panel-colors{padding:12px;border-top:1px solid var(--color-border-2);display:flex;flex-direction:column;gap:12px}.yc-color-picker-panel .yc-color-picker-panel-colors .yc-color-picker-colors-section{display:flex;flex-direction:column;gap:6px}.yc-color-picker-panel .yc-color-picker-panel-colors .yc-color-picker-colors-section .yc-color-picker-colors-text{color:var(--color-text-1);font-weight:400;font-size:12px}.yc-color-picker-panel .yc-color-picker-panel-colors .yc-color-picker-colors-section .yc-color-picker-colors-empty{margin:6px 0 0 0;color:var(--color-text-3);font-size:12px}.yc-color-picker-panel .yc-color-picker-panel-colors .yc-color-picker-colors-section .yc-color-picker-colors-list{display:flex;flex-wrap:wrap;gap:6px 4px}.yc-color-picker-panel .yc-color-picker-panel-colors .yc-color-picker-colors-section .yc-color-picker-colors-list .yc-color-picker-color-block{cursor:pointer;width:16px;height:16px;overflow:hidden;background-image:conic-gradient(rgba(0,0,0,0.06) 0 25%, transparent 0 50%, rgba(0,0,0,0.06) 0 75%, transparent 0);background-size:8px 8px;border-radius:2px;transition:transform ease-out 60ms}.yc-color-picker-panel .yc-color-picker-panel-colors .yc-color-picker-colors-section .yc-color-picker-colors-list .yc-color-picker-color-block:hover{transform:scale(1.1)}.yc-color-picker-panel .yc-color-picker-panel-colors .yc-color-picker-colors-section .yc-color-picker-colors-list .yc-color-picker-color-block .yc-color-picker-block{height:100%;width:100%}.yc-color-picker-panel-disabled{cursor:not-allowed}.yc-color-picker-panel-disabled .yc-color-picker-palette{cursor:not-allowed}.yc-color-picker-panel-disabled .yc-color-picker-panel-control .yc-color-picker-control-wrapper .yc-color-picker-control-bar{cursor:not-allowed}.yc-color-picker{cursor:pointer;background-color:var(--color-fill-2);border-radius:2px;display:inline-flex;align-items:center;gap:4px}.yc-color-picker:not(.yc-color-picker-disabled):hover{background-color:var(--color-fill-3)}.yc-color-picker .yc-color-picker-value{color:var(--color-text-1);font-weight:400}.yc-color-picker.yc-color-picker-disabled{cursor:not-allowed;background-color:var(--color-fill-2)}.yc-color-picker.yc-color-picker-disabled .yc-color-picker-value{color:var(--color-text-4)}.yc-color-picker-size-mini{height:24px;padding:4px;font-size:12px}.yc-color-picker-size-mini .yc-color-picker-preview{height:100%;width:calc(24px - 8px)}.yc-color-picker-size-small{height:28px;padding:3px 4px;font-size:14px}.yc-color-picker-size-small .yc-color-picker-preview{height:100%;width:calc(28px - 8px)}.yc-color-picker-size-medium{height:32px;padding:4px;font-size:14px}.yc-color-picker-size-medium .yc-color-picker-preview{height:100%;width:calc(32px - 8px)}.yc-color-picker-size-large{height:36px;padding:5px;font-size:14px}.yc-color-picker-size-large .yc-color-picker-preview{height:100%;width:calc(36px - 10px)}.yc-color-picker-format-popup-content .yc-select-option{font-size:12px;line-height:24px}

package/es/ColorPicker/index.js

@@ -1,7 +1,8 @@
-import _ColorPicker from "./ColorPicker.vue.js";
-const ColorPicker = Object.assign(_ColorPicker, {
+import _sfc_main from "./ColorPicker.vue.js";
+/* empty css                 */
+const ColorPicker = Object.assign(_sfc_main, {
   install: (app) => {
-    app.component("Yc" + _ColorPicker.name, _ColorPicker);
+    app.component("Yc" + _sfc_main.name, _sfc_main);
   }
 });
 export {