yc-design-vue 2.1.8 → 2.2.0

package/es/Collapse/CollapseItem.vue.js

@@ -1,7 +1,7 @@
 import { defineComponent, toRefs, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, createVNode, createBlock, createCommentVNode, withCtx, renderSlot, resolveDynamicComponent, createTextVNode, toDisplayString, withDirectives, vShow } from "vue";
 import useCollapseContext from "./hooks/useContext.js";
-import _sfc_main$1 from "../_shared/components/IconButton/index.vue2.js";
-/* empty css                                         */
+import _sfc_main$1 from "../_shared/components/IconButton/index.vue.js";
+/* empty css                                          */
 import _sfc_main$3 from "../_shared/components/ExpandTransition/index.vue2.js";
 /* empty css                                               */
 import "../node_modules/b-tween/dist/b-tween.es.js";

package/es/ColorPicker/ColorInput.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, ref, watch, createElementBlock, openBlock, createElementVNode, createVNode, unref, createBlock, createCommentVNode, withCtx, createTextVNode, Fragment } from "vue";
+import { defineComponent, toRefs, ref, watch, createElementBlock, openBlock, createElementVNode, createVNode, unref, withCtx, createBlock, createCommentVNode, createTextVNode, Fragment } from "vue";
 import { parseColor } from "../_shared/utils/color.js";
 import "../node_modules/b-tween/dist/b-tween.es.js";
 import "../node_modules/dayjs/dayjs.min.js";
@@ -14,9 +14,10 @@ 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";
+import _sfc_main$1 from "../Input/InputGroup.vue.js";
+/* empty css                       */
 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: {
@@ -85,79 +86,82 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             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,
+        createVNode(unref(_sfc_main$1), { class: "yc-color-picker-color" }, {
+          default: withCtx(() => [
+            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: "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),
+              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: 255,
+              max: 100,
               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)
-        ])
+              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)
+          ]),
+          _: 1
+        })
       ]);
     };
   }

package/es/ColorPicker/index.css

@@ -1 +1 @@
-.yc-color-picker-panel{overflow:hidden;width:260px;background-color:var(--color-bg-1);border-radius:var(--border-radius-small);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:var(--border-radius-circle);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:var(--border-radius-circle);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:var(--border-radius-circle)}.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:var(--border-radius-circle)}.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:var(--border-radius-medium)}.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:first-child .yc-input-wrapper{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:last-child .yc-input-wrapper{border-right-color:var(--color-border-2);border-top-right-radius:2px;border-bottom-right-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{border-radius:var(--border-radius-none);border-color:var(--color-border-2);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:not(.yc-input-disabled):focus-within{border-radius:var(--border-radius-small);border-color:rgb(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-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-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:var(--border-radius-small);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:var(--border-radius-small);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}
+.yc-color-picker-panel{overflow:hidden;width:260px;background-color:var(--color-bg-1);border-radius:var(--border-radius-small);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:var(--border-radius-circle);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:var(--border-radius-circle);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:var(--border-radius-circle)}.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:var(--border-radius-circle)}.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:var(--border-radius-medium)}.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}.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 .rgb-input.rgb-input .yc-input,.yc-color-picker-panel .yc-color-picker-panel-control .yc-color-picker-input-wrapper .yc-color-picker-color .hex-input.rgb-input .yc-input{text-align:center}.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:var(--border-radius-small);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:var(--border-radius-small);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/Drawer/Drawer.vue.js

@@ -12,8 +12,8 @@ import { useI18n } from "../_shared/utils/locale.js";
 import "../_shared/utils/time.js";
 import useModalClose from "../Modal/hooks/useModalClose.js";
 import Button from "../Button/index.js";
-import _sfc_main$1 from "../_shared/components/IconButton/index.vue2.js";
-/* empty css                                         */
+import _sfc_main$1 from "../_shared/components/IconButton/index.vue.js";
+/* empty css                                          */
 /* empty css                                               */
 /* empty css                                   */
 const _hoisted_1 = { class: "yc-drawer-header" };

package/es/Dropdown/DropdownButton.vue.d.ts

@@ -23,8 +23,8 @@ declare const __VLS_component: import('vue').DefineComponent<DropdownButtonProps
     position: Extract<import('..').PopupPosition, "top" | "tr" | "tl" | "bottom" | "br" | "bl">;
     popupContainer: import('..').PopupContainer;
     type: import('../Button').ButtonType;
-    hideOnSelect: boolean;
     buttonProps: import('../Button').ButtonProps;
+    hideOnSelect: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/es/Dropdown/DropdownButton.vue.js

@@ -9,7 +9,7 @@ import "../node_modules/dayjs/plugin/isSameOrBefore.js";
 import "../_shared/utils/dom.js";
 import "../_shared/utils/locale.js";
 import "../_shared/utils/time.js";
-/* empty css                                         */
+/* empty css                                          */
 /* empty css                                               */
 /* empty css                                   */
 import _sfc_main$3 from "../_shared/icons/IconMore.vue.js";

package/es/Dropdown/Dsubmenu.vue.js

@@ -12,7 +12,7 @@ import { isBoolean, isUndefined } from "../_shared/utils/is.js";
 import { useControlValue } from "../_shared/utils/hooks.js";
 import "../_shared/utils/locale.js";
 import "../_shared/utils/time.js";
-/* empty css                                         */
+/* empty css                                          */
 /* empty css                                               */
 /* empty css                                   */
 import _sfc_main$2 from "../_shared/icons/IconArrowRight.vue.js";

package/es/Dropdown/index.d.ts

@@ -154,8 +154,8 @@ declare const Dropdown: {
             position: Extract<import('..').PopupPosition, "top" | "tr" | "tl" | "bottom" | "br" | "bl">;
             popupContainer: import('..').PopupContainer;
             type: import('..').ButtonType;
-            hideOnSelect: boolean;
             buttonProps: import('..').ButtonProps;
+            hideOnSelect: boolean;
         }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
             P: {};
             B: {};
@@ -176,8 +176,8 @@ declare const Dropdown: {
             position: Extract<import('..').PopupPosition, "top" | "tr" | "tl" | "bottom" | "br" | "bl">;
             popupContainer: import('..').PopupContainer;
             type: import('..').ButtonType;
-            hideOnSelect: boolean;
             buttonProps: import('..').ButtonProps;
+            hideOnSelect: boolean;
         }>;
         __isFragment?: never;
         __isTeleport?: never;
@@ -199,8 +199,8 @@ declare const Dropdown: {
         position: Extract<import('..').PopupPosition, "top" | "tr" | "tl" | "bottom" | "br" | "bl">;
         popupContainer: import('..').PopupContainer;
         type: import('..').ButtonType;
-        hideOnSelect: boolean;
         buttonProps: import('..').ButtonProps;
+        hideOnSelect: boolean;
     }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
         $slots: Readonly<import('./type').DropdownButtonSlots> & import('./type').DropdownButtonSlots;
     });

package/es/Empty/index.vue.js

@@ -9,7 +9,7 @@ import "../node_modules/dayjs/plugin/isSameOrBefore.js";
 import "../_shared/utils/dom.js";
 import { useI18n } from "../_shared/utils/locale.js";
 import "../_shared/utils/time.js";
-/* empty css                                         */
+/* empty css                                          */
 /* empty css                                               */
 /* empty css                                   */
 import _sfc_main$1 from "../_shared/icons/IconEmpty.vue.js";

package/es/Image/Image.vue.js

@@ -10,7 +10,7 @@ import { valueToPx } from "../_shared/utils/dom.js";
 import { useControlValue } from "../_shared/utils/hooks.js";
 import { useI18n } from "../_shared/utils/locale.js";
 import "../_shared/utils/time.js";
-/* empty css                                         */
+/* empty css                                          */
 /* empty css                                               */
 /* empty css                                   */
 import _sfc_main$2 from "../_shared/icons/IconImageClose.vue.js";

package/es/Image/ImagePreview.vue.js

@@ -12,7 +12,7 @@ import { getGlobalConfig } from "../_shared/utils/global-config.js";
 import { useControlValue } from "../_shared/utils/hooks.js";
 import "../_shared/utils/locale.js";
 import "../_shared/utils/time.js";
-/* empty css                                         */
+/* empty css                                          */
 /* empty css                                               */
 /* empty css                                   */
 import _sfc_main$2 from "../_shared/icons/IconClose.vue.js";

package/es/Image/ImagePreviewArrow.vue.js

@@ -9,7 +9,7 @@ import "../node_modules/dayjs/plugin/isSameOrBefore.js";
 import "../_shared/utils/dom.js";
 import "../_shared/utils/locale.js";
 import "../_shared/utils/time.js";
-/* empty css                                         */
+/* empty css                                          */
 /* empty css                                               */
 /* empty css                                   */
 import _sfc_main$1 from "../_shared/icons/IconArrowRight.vue.js";

package/es/Image/ImagePreviewToolbar.vue.js

@@ -9,7 +9,7 @@ import "../node_modules/dayjs/plugin/isSameOrBefore.js";
 import "../_shared/utils/dom.js";
 import { useI18n } from "../_shared/utils/locale.js";
 import "../_shared/utils/time.js";
-/* empty css                                         */
+/* empty css                                          */
 /* empty css                                               */
 /* empty css                                   */
 import _sfc_main$6 from "../_shared/icons/IconFullScreen.vue2.js";

package/es/Input/Input.vue.d.ts

@@ -12,6 +12,8 @@ declare const __VLS_component: import('vue').DefineComponent<InputProps, {
     focus(): void;
     blur(): void;
     getInputRef(): HTMLInputElement;
+    setCursor?: () => void;
+    recordCursor?: () => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     change: (value: string, ev: Event) => any;
     focus: (ev: FocusEvent) => any;
@@ -20,8 +22,6 @@ declare const __VLS_component: import('vue').DefineComponent<InputProps, {
     input: (value: string, ev: Event) => any;
     keydown: (ev: KeyboardEvent) => any;
     "update:modelValue": (value: string) => any;
-    "update:visibility": (value: boolean) => any;
-    "visibility-change": (value: boolean) => any;
     pressEnter: (ev: KeyboardEvent) => any;
 }, string, import('vue').PublicProps, Readonly<InputProps> & Readonly<{
     onChange?: ((value: string, ev: Event) => any) | undefined;
@@ -31,8 +31,6 @@ declare const __VLS_component: import('vue').DefineComponent<InputProps, {
     onInput?: ((value: string, ev: Event) => any) | undefined;
     onKeydown?: ((ev: KeyboardEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-    "onUpdate:visibility"?: ((value: boolean) => any) | undefined;
-    "onVisibility-change"?: ((value: boolean) => any) | undefined;
     onPressEnter?: ((ev: KeyboardEvent) => any) | undefined;
 }>, {
     error: boolean;
@@ -48,10 +46,6 @@ declare const __VLS_component: import('vue').DefineComponent<InputProps, {
     wordLength: import('./type').WordLength;
     wordSlice: import('./type').WordSlice;
     inputAttrs: import('..').RecordType;
-    isPassword: boolean;
-    visibility: boolean;
-    defaultVisibility: boolean;
-    invisibleButton: boolean;
     showInput: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     inputRef: HTMLInputElement;

package/es/Input/Input.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, useSlots, toRefs, ref, computed, createElementBlock, openBlock, normalizeClass, unref, createBlock, createCommentVNode, createElementVNode, withCtx, renderSlot, withDirectives, mergeProps, withKeys, vShow, createSlots } from "vue";
+import { defineComponent, useSlots, ref, createElementBlock, openBlock, normalizeClass, unref, createBlock, createCommentVNode, createElementVNode, withCtx, renderSlot, withDirectives, createVNode, mergeProps, withKeys, vShow, toDisplayString } from "vue";
 import "../node_modules/b-tween/dist/b-tween.es.js";
 import "../node_modules/dayjs/dayjs.min.js";
 import "../node_modules/tinycolor2/esm/tinycolor.js";
@@ -8,18 +8,19 @@ import "../node_modules/dayjs/plugin/isSameOrAfter.js";
 import "../node_modules/dayjs/plugin/isSameOrBefore.js";
 import "../_shared/utils/dom.js";
 import { getGlobalConfig } from "../_shared/utils/global-config.js";
-import { useControlValue } from "../_shared/utils/hooks.js";
 import "../_shared/utils/locale.js";
 import "../_shared/utils/time.js";
 import useLimitedInput from "./hooks/useLimitedInput.js";
-import _sfc_main$2 from "../_shared/components/IconButton/index.vue2.js";
-/* empty css                                         */
+import _sfc_main$2 from "../_shared/components/IconButton/index.vue.js";
+/* empty css                                          */
 import _sfc_main$1 from "../_shared/components/PreventFocus/index.vue.js";
 /* empty css                                               */
 /* empty css                                   */
-import _sfc_main$3 from "./InputSuffix.vue.js";
-/* empty css                 */
-const _hoisted_1 = ["value", "type", "disabled", "readonly", "placeholder"];
+const _hoisted_1 = ["value", "disabled", "readonly", "placeholder"];
+const _hoisted_2 = {
+  key: 0,
+  class: "yc-input-word-limit"
+};
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "Input"
@@ -45,31 +46,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     inputAttrs: { default: () => {
       return {};
     } },
-    isPassword: { type: Boolean, default: false },
-    visibility: { type: Boolean, default: void 0 },
-    defaultVisibility: { type: Boolean, default: false },
-    invisibleButton: { type: Boolean, default: true },
     showInput: { type: Boolean, default: false }
   },
-  emits: ["update:modelValue", "update:visibility", "input", "change", "visibility-change", "pressEnter", "keydown", "clear", "focus", "blur"],
+  emits: ["update:modelValue", "input", "change", "pressEnter", "keydown", "clear", "focus", "blur"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const $slots = useSlots();
     const props = __props;
     const emits = __emit;
-    const { visibility, defaultVisibility } = toRefs(props);
     const { size } = getGlobalConfig(props);
     const inputRef = ref();
-    const computedVisibility = useControlValue(
-      visibility,
-      defaultVisibility.value,
-      (val) => {
-        emits("update:visibility", val);
-        emits("visibility-change", val);
-      }
-    );
-    const type = computed(() => {
-      return computedVisibility.value ? "password" : "text";
-    });
     const {
       computedValue,
       showWordLimit,
@@ -77,6 +62,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       curLength,
       maxLength,
       error,
+      recordCursor,
+      setCursor,
       handleInput,
       handleComposition
     } = useLimitedInput({
@@ -84,8 +71,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emits,
       inputRef
     });
-    const handleEvent = async (type2, e) => {
-      switch (type2) {
+    const handleEvent = async (type, e) => {
+      switch (type) {
         case "input":
           {
             handleInput(e);
@@ -99,7 +86,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         case "focus":
         case "blur":
           {
-            emits(type2, e);
+            emits(type, e);
           }
           break;
         case "clear":
@@ -118,6 +105,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     __expose({
+      setCursor,
+      recordCursor,
       focus() {
         var _a;
         (_a = inputRef.value) == null ? void 0 : _a.focus();
@@ -166,10 +155,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           })) : createCommentVNode("", true),
           withDirectives(createElementVNode("input", mergeProps({
             value: unref(computedValue),
-            type: type.value,
             disabled: _ctx.disabled,
             readonly: _ctx.readonly,
-            placeholder: _ctx.placeholder
+            placeholder: _ctx.placeholder,
+            type: "text"
           }, _ctx.inputAttrs, {
             class: "yc-input",
             ref_key: "inputRef",
@@ -204,25 +193,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             class: "yc-input-clear-button",
             onClick: _cache[8] || (_cache[8] = ($event) => handleEvent("clear", $event))
           })) : createCommentVNode("", true),
-          $slots.suffix || unref(showWordLimit) || _ctx.isPassword && _ctx.invisibleButton ? (openBlock(), createBlock(_sfc_main$3, {
-            key: 3,
-            "cur-length": unref(curLength),
-            "max-length": unref(maxLength),
-            "computed-value": unref(computedValue),
-            "show-word-limit": unref(showWordLimit),
-            "computed-visibility": unref(computedVisibility),
-            "invisible-button": _ctx.invisibleButton,
-            "is-password": _ctx.isPassword,
-            onVisibilityChange: _cache[9] || (_cache[9] = (v) => computedVisibility.value = v)
-          }, createSlots({ _: 2 }, [
-            $slots.suffix ? {
-              name: "suffix",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "suffix")
-              ]),
-              key: "0"
-            } : void 0
-          ]), 1032, ["cur-length", "max-length", "computed-value", "show-word-limit", "computed-visibility", "invisible-button", "is-password"])) : createCommentVNode("", true)
+          createVNode(unref(_sfc_main$1), { class: "yc-input-suffix" }, {
+            default: withCtx(() => [
+              unref(showWordLimit) ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(unref(curLength)) + "/" + toDisplayString(unref(maxLength)), 1)) : createCommentVNode("", true),
+              renderSlot(_ctx.$slots, "extra"),
+              renderSlot(_ctx.$slots, "suffix")
+            ]),
+            _: 3
+          })
         ], 2),
         $slots.append ? (openBlock(), createBlock(unref(_sfc_main$1), {
           key: 1,

package/es/Input/InputGroup.vue.d.ts

@@ -0,0 +1,17 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/Input/InputGroup.vue.js

@@ -0,0 +1,18 @@
+import { defineComponent, createElementBlock, openBlock, renderSlot } from "vue";
+const _hoisted_1 = { class: "yc-input-group" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "InputGroup"
+  },
+  __name: "InputGroup",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        renderSlot(_ctx.$slots, "default")
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/Input/InputGroup.vue3.js

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