zartui 3.0.5 → 3.0.7

package/lib/picker/PickerToolbar.js

@@ -30,6 +30,7 @@ var import_utils2 = require("../utils");
 var import_button = require("../button");
 const [name] = (0, import_utils2.createNamespace)("picker-toolbar");
 const pickerToolbarProps = {
+  // title: String,
   cancelButtonText: String,
   confirmButtonText: String
 };

package/lib/picker/index.js

@@ -17,6 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/lib/popover/Popover.d.ts

@@ -47,6 +47,10 @@ export declare const popoverProps: {
         type: PropType<string | import("vue").RendererElement | null | undefined>;
         default: string;
     };
+    autoAdjustOverflow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 };
 export declare type PopoverProps = ExtractPropTypes<typeof popoverProps>;
 declare const _default: import("vue").DefineComponent<{
@@ -96,6 +100,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<string | import("vue").RendererElement | null | undefined>;
         default: string;
     };
+    autoAdjustOverflow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "touchstart" | "update:show")[], "select" | "touchstart" | "update:show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     show: BooleanConstructor;
     theme: {
@@ -143,6 +151,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<string | import("vue").RendererElement | null | undefined>;
         default: string;
     };
+    autoAdjustOverflow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onSelect?: ((...args: any[]) => any) | undefined;
     onTouchstart?: ((...args: any[]) => any) | undefined;
@@ -160,5 +172,6 @@ declare const _default: import("vue").DefineComponent<{
     trigger: PopoverTrigger;
     showArrow: boolean;
     placement: PopoverPlacement;
+    autoAdjustOverflow: boolean;
 }>;
 export default _default;

package/lib/popover/Popover.js

@@ -15,6 +15,26 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 var stdin_exports = {};
 __export(stdin_exports, {
   default: () => stdin_default,
@@ -23,6 +43,7 @@ __export(stdin_exports, {
 module.exports = __toCommonJS(stdin_exports);
 var import_vue = require("vue");
 var import_vue2 = require("vue");
+var import_vue3 = require("@floating-ui/vue");
 var import_popperjs = require("@zartui/popperjs");
 var import_utils = require("../utils");
 var import_use = require("@zartui/use");
@@ -52,6 +73,10 @@ const popoverProps = {
   teleport: {
     type: [String, Object],
     default: "body"
+  },
+  autoAdjustOverflow: {
+    type: Boolean,
+    default: false
   }
 };
 var stdin_default = (0, import_vue2.defineComponent)({
@@ -67,6 +92,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
     const popupRef = (0, import_vue2.ref)();
     const wrapperRef = (0, import_vue2.ref)();
     const popoverRef = (0, import_vue2.ref)();
+    const arrowRef = (0, import_vue2.ref)();
     const getPopoverOptions = () => ({
       placement: props.placement,
       modifiers: [{
@@ -94,6 +120,10 @@ var stdin_default = (0, import_vue2.defineComponent)({
         }
         if (!popper) {
           popper = createPopperInstance();
+          if (import_utils.inBrowser) {
+            window.addEventListener("animationend", updateLocation);
+            window.addEventListener("transitionend", updateLocation);
+          }
         } else {
           popper.setOptions(getPopoverOptions());
         }
@@ -162,15 +192,69 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "onClick": () => onClickAction(action, index)
       }, [renderActionContent(action, index)]);
     };
+    function update() {
+      return __async(this, null, function* () {
+        var _a;
+        if (wrapperRef.value && popupRef.value && arrowRef.value) {
+          const {
+            x,
+            y,
+            placement: realPlacement,
+            middlewareData
+          } = yield (0, import_vue3.computePosition)(wrapperRef.value, popupRef.value, {
+            placement: props.placement,
+            middleware: [(0, import_vue3.offset)(8), (0, import_vue3.shift)({
+              padding: 4,
+              crossAxis: false,
+              limiter: (0, import_vue3.limitShift)()
+            }), (0, import_vue3.flip)(), (0, import_vue3.hide)(), (0, import_vue3.arrow)({
+              element: arrowRef.value,
+              padding: 6
+            })]
+          });
+          Object.assign(popupRef.value.style, {
+            left: `${x}px`,
+            top: `${y}px`
+          });
+          popupRef.value.setAttribute("data-popper-placement", realPlacement);
+          const side = realPlacement.split("-")[0];
+          const arrowSide = {
+            top: "bottom",
+            right: "left",
+            bottom: "top",
+            left: "right"
+          }[side];
+          const {
+            x: arrowX,
+            y: arrowY
+          } = (_a = middlewareData.arrow) != null ? _a : {};
+          Object.assign(arrowRef.value.style, {
+            left: arrowX != null ? `${arrowX}px` : "",
+            top: arrowY != null ? `${arrowY}px` : "",
+            margin: 0,
+            [arrowSide]: "calc(var(--zt-popover-arrow-size) * -1)"
+          });
+        }
+      });
+    }
     (0, import_vue2.onMounted)(() => {
       updateLocation();
       (0, import_vue2.watchEffect)(() => {
         var _a;
         popupRef.value = (_a = popoverRef.value) == null ? void 0 : _a.popupRef.value;
+        if (wrapperRef.value && popupRef.value && props.autoAdjustOverflow) {
+          (0, import_vue3.autoUpdate)(wrapperRef.value, popupRef.value, update, {
+            elementResize: typeof ResizeObserver !== "undefined"
+          });
+        }
       });
     });
     (0, import_vue2.onBeforeUnmount)(() => {
       if (popper) {
+        if (import_utils.inBrowser) {
+          window.removeEventListener("animationend", updateLocation);
+          window.removeEventListener("transitionend", updateLocation);
+        }
         popper.destroy();
         popper = null;
       }
@@ -187,14 +271,17 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "onClick": onClickWrapper
       }, [(_a = slots.reference) == null ? void 0 : _a.call(slots)]), (0, import_vue.createVNode)(import_popup.Popup, (0, import_vue.mergeProps)({
         "ref": popoverRef,
-        "class": bem([props.theme]),
+        "class": bem([props.theme, props.show ? "show" : "hidden"]),
         "position": "",
         "transition": "zt-popover-zoom",
         "lockScroll": false,
         "onUpdate:show": updateShow
-      }, attrs, (0, import_utils.pick)(props, popupProps)), {
+      }, attrs, (0, import_utils.pick)(props, popupProps), {
+        "show": true
+      }), {
         default: () => [props.showArrow && (0, import_vue.createVNode)("div", {
-          "class": bem("arrow")
+          "class": bem("arrow"),
+          "ref": arrowRef
         }, null), (0, import_vue.createVNode)("div", {
           "role": "menu",
           "class": bem("content")

package/lib/popover/index.css

@@ -1 +1 @@
-:root{--zt-popover-arrow-size: 6px;--zt-popover-radius: var(--zt-radius-lg);--zt-popover-action-width: 120px;--zt-popover-action-height: 40px;--zt-popover-action-font-size: var(--zt-font-size-md);--zt-popover-action-line-height: var(--zt-line-height-md);--zt-popover-action-icon-size: 20px;--zt-popover-light-text-color: var(--zt-text-color);--zt-popover-light-background: var(--zt-background-2);--zt-popover-light-action-disabled-text-color: var(--zt-text-color-3);--zt-popover-dark-text-color: var(--zt-white);--zt-popover-dark-background: #4a4a4a;--zt-popover-dark-action-disabled-text-color: var(--zt-text-color-2)}.zt-popover{position:absolute;overflow:visible;background-color:transparent;transition:opacity .15s,transform .15s}.zt-popover__wrapper{display:inline-block}.zt-popover__arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid;border-width:var(--zt-popover-arrow-size)}.zt-popover__content{overflow:hidden;border-radius:var(--zt-popover-radius)}.zt-popover__action{position:relative;display:flex;align-items:center;box-sizing:border-box;width:var(--zt-popover-action-width);height:var(--zt-popover-action-height);padding:0 var(--zt-padding-md);font-size:var(--zt-popover-action-font-size);line-height:var(--zt-line-height-md);cursor:pointer}.zt-popover__action:last-child .zt-popover__action-text:after{display:none}.zt-popover__action-text{display:flex;flex:1;align-items:center;justify-content:center;height:100%}.zt-popover__action-icon{margin-right:var(--zt-padding-xs);font-size:var(--zt-popover-action-icon-size)}.zt-popover__action--with-icon .zt-popover__action-text{justify-content:flex-start}.zt-popover[data-popper-placement^=top] .zt-popover__arrow{bottom:0;border-top-color:currentColor;border-bottom-width:0;transform:translate(-50%);margin-bottom:calc(var(--zt-popover-arrow-size) * -1)}.zt-popover[data-popper-placement=top]{transform-origin:50% 100%}.zt-popover[data-popper-placement=top] .zt-popover__arrow{left:50%}.zt-popover[data-popper-placement=top-start]{transform-origin:0 100%}.zt-popover[data-popper-placement=top-start] .zt-popover__arrow{left:var(--zt-padding-md)}.zt-popover[data-popper-placement=top-end]{transform-origin:100% 100%}.zt-popover[data-popper-placement=top-end] .zt-popover__arrow{right:var(--zt-padding-md)}.zt-popover[data-popper-placement^=left] .zt-popover__arrow{right:0;border-right-width:0;border-left-color:currentColor;transform:translateY(-50%);margin-right:calc(var(--zt-popover-arrow-size) * -1)}.zt-popover[data-popper-placement=left]{transform-origin:100% 50%}.zt-popover[data-popper-placement=left] .zt-popover__arrow{top:50%}.zt-popover[data-popper-placement=left-start]{transform-origin:100% 0}.zt-popover[data-popper-placement=left-start] .zt-popover__arrow{top:var(--zt-padding-md)}.zt-popover[data-popper-placement=left-end]{transform-origin:100% 100%}.zt-popover[data-popper-placement=left-end] .zt-popover__arrow{bottom:var(--zt-padding-md)}.zt-popover[data-popper-placement^=right] .zt-popover__arrow{left:0;border-right-color:currentColor;border-left-width:0;transform:translateY(-50%);margin-left:calc(var(--zt-popover-arrow-size) * -1)}.zt-popover[data-popper-placement=right]{transform-origin:0 50%}.zt-popover[data-popper-placement=right] .zt-popover__arrow{top:50%}.zt-popover[data-popper-placement=right-start]{transform-origin:0 0}.zt-popover[data-popper-placement=right-start] .zt-popover__arrow{top:var(--zt-padding-md)}.zt-popover[data-popper-placement=right-end]{transform-origin:0 100%}.zt-popover[data-popper-placement=right-end] .zt-popover__arrow{bottom:var(--zt-padding-md)}.zt-popover[data-popper-placement^=bottom] .zt-popover__arrow{top:0;border-top-width:0;border-bottom-color:currentColor;transform:translate(-50%);margin-top:calc(var(--zt-popover-arrow-size) * -1)}.zt-popover[data-popper-placement=bottom]{transform-origin:50% 0}.zt-popover[data-popper-placement=bottom] .zt-popover__arrow{left:50%}.zt-popover[data-popper-placement=bottom-start]{transform-origin:0 0}.zt-popover[data-popper-placement=bottom-start] .zt-popover__arrow{left:var(--zt-padding-md)}.zt-popover[data-popper-placement=bottom-end]{transform-origin:100% 0}.zt-popover[data-popper-placement=bottom-end] .zt-popover__arrow{right:var(--zt-padding-md)}.zt-popover--light{color:var(--zt-popover-light-text-color)}.zt-popover--light .zt-popover__content{background:var(--zt-popover-light-background);box-shadow:0 2px 12px rgba(50,50,51,.12)}.zt-popover--light .zt-popover__arrow{color:var(--zt-popover-light-background)}.zt-popover--light .zt-popover__action:active{background-color:var(--zt-active-color)}.zt-popover--light .zt-popover__action--selected{color:var(--zt-blue);cursor:not-allowed}.zt-popover--light .zt-popover__action--selected:active{background-color:transparent}.zt-popover--light .zt-popover__action--disabled{color:var(--zt-popover-light-action-disabled-text-color);cursor:not-allowed}.zt-popover--light .zt-popover__action--disabled:active{background-color:transparent}.zt-popover--dark{color:var(--zt-popover-dark-text-color)}.zt-popover--dark .zt-popover__content{background:var(--zt-popover-dark-background)}.zt-popover--dark .zt-popover__arrow{color:var(--zt-popover-dark-background)}.zt-popover--dark .zt-popover__action:active{background-color:rgba(0,0,0,.2)}.zt-popover--dark .zt-popover__action--disabled{color:var(--zt-popover-dark-action-disabled-text-color)}.zt-popover--dark .zt-popover__action--disabled:active{background-color:transparent}.zt-popover--dark .zt-popover__action-text:after{border-color:var(--zt-gray-7)}.zt-popover-zoom-enter-from,.zt-popover-zoom-leave-active{transform:scale(.8);opacity:0}.zt-popover-zoom-enter-active{transition-timing-function:var(--zt-ease-out)}.zt-popover-zoom-leave-active{transition-timing-function:var(--zt-ease-in)}
+:root{--zt-popover-arrow-size: 6px;--zt-popover-radius: var(--zt-radius-lg);--zt-popover-action-width: 120px;--zt-popover-action-height: 40px;--zt-popover-action-font-size: var(--zt-font-size-md);--zt-popover-action-line-height: var(--zt-line-height-md);--zt-popover-action-icon-size: 20px;--zt-popover-light-text-color: var(--zt-text-color);--zt-popover-light-background: var(--zt-background-2);--zt-popover-light-action-disabled-text-color: var(--zt-text-color-3);--zt-popover-dark-text-color: var(--zt-white);--zt-popover-dark-background: #4a4a4a;--zt-popover-dark-action-disabled-text-color: var(--zt-text-color-2)}.zt-popover{position:absolute;overflow:visible;background-color:transparent;transition:opacity .15s,transform .15s}.zt-popover__wrapper{display:inline-block}.zt-popover__arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid;border-width:var(--zt-popover-arrow-size)}.zt-popover__content{overflow:hidden;border-radius:var(--zt-popover-radius)}.zt-popover__action{position:relative;display:flex;align-items:center;box-sizing:border-box;width:var(--zt-popover-action-width);height:var(--zt-popover-action-height);padding:0 var(--zt-padding-md);font-size:var(--zt-popover-action-font-size);line-height:var(--zt-line-height-md);cursor:pointer}.zt-popover__action:last-child .zt-popover__action-text:after{display:none}.zt-popover__action-text{display:flex;flex:1;align-items:center;justify-content:center;height:100%}.zt-popover__action-icon{margin-right:var(--zt-padding-xs);font-size:var(--zt-popover-action-icon-size)}.zt-popover__action--with-icon .zt-popover__action-text{justify-content:flex-start}.zt-popover[data-popper-placement^=top] .zt-popover__arrow{bottom:0;border-top-color:currentColor;border-bottom-width:0;margin-bottom:calc(var(--zt-popover-arrow-size) * -1)}.zt-popover[data-popper-placement=top]{transform-origin:50% 100%}.zt-popover[data-popper-placement=top] .zt-popover__arrow{left:50%;transform:translate(-50%)}.zt-popover[data-popper-placement=top-start]{transform-origin:0 100%}.zt-popover[data-popper-placement=top-start] .zt-popover__arrow{left:var(--zt-padding-md)}.zt-popover[data-popper-placement=top-end]{transform-origin:100% 100%}.zt-popover[data-popper-placement=top-end] .zt-popover__arrow{right:var(--zt-padding-md)}.zt-popover[data-popper-placement^=left] .zt-popover__arrow{right:0;border-right-width:0;border-left-color:currentColor;transform:translateY(-50%);margin-right:calc(var(--zt-popover-arrow-size) * -1)}.zt-popover[data-popper-placement=left]{transform-origin:100% 50%}.zt-popover[data-popper-placement=left] .zt-popover__arrow{top:50%}.zt-popover[data-popper-placement=left-start]{transform-origin:100% 0}.zt-popover[data-popper-placement=left-start] .zt-popover__arrow{top:var(--zt-padding-md)}.zt-popover[data-popper-placement=left-end]{transform-origin:100% 100%}.zt-popover[data-popper-placement=left-end] .zt-popover__arrow{bottom:var(--zt-padding-md)}.zt-popover[data-popper-placement^=right] .zt-popover__arrow{left:0;border-right-color:currentColor;border-left-width:0;transform:translateY(-50%);margin-left:calc(var(--zt-popover-arrow-size) * -1)}.zt-popover[data-popper-placement=right]{transform-origin:0 50%}.zt-popover[data-popper-placement=right] .zt-popover__arrow{top:50%}.zt-popover[data-popper-placement=right-start]{transform-origin:0 0}.zt-popover[data-popper-placement=right-start] .zt-popover__arrow{top:var(--zt-padding-md)}.zt-popover[data-popper-placement=right-end]{transform-origin:0 100%}.zt-popover[data-popper-placement=right-end] .zt-popover__arrow{bottom:var(--zt-padding-md)}.zt-popover[data-popper-placement^=bottom] .zt-popover__arrow{top:0;border-top-width:0;border-bottom-color:currentColor;transform:translate(-50%);margin-top:calc(var(--zt-popover-arrow-size) * -1)}.zt-popover[data-popper-placement=bottom]{transform-origin:50% 0}.zt-popover[data-popper-placement=bottom] .zt-popover__arrow{left:50%}.zt-popover[data-popper-placement=bottom-start]{transform-origin:0 0}.zt-popover[data-popper-placement=bottom-start] .zt-popover__arrow{left:var(--zt-padding-md)}.zt-popover[data-popper-placement=bottom-end]{transform-origin:100% 0}.zt-popover[data-popper-placement=bottom-end] .zt-popover__arrow{right:var(--zt-padding-md)}.zt-popover--light{display:none;color:var(--zt-popover-light-text-color)}.zt-popover--light .zt-popover__content{background:var(--zt-popover-light-background);box-shadow:0 2px 12px rgba(50,50,51,.12)}.zt-popover--light .zt-popover__arrow{color:var(--zt-popover-light-background)}.zt-popover--light .zt-popover__action:active{background-color:var(--zt-active-color)}.zt-popover--light .zt-popover__action--selected{color:var(--zt-blue);cursor:not-allowed}.zt-popover--light .zt-popover__action--selected:active{background-color:transparent}.zt-popover--light .zt-popover__action--disabled{color:var(--zt-popover-light-action-disabled-text-color);cursor:not-allowed}.zt-popover--light .zt-popover__action--disabled:active{background-color:transparent}.zt-popover--dark{display:none;color:var(--zt-popover-dark-text-color)}.zt-popover--dark .zt-popover__content{background:var(--zt-popover-dark-background)}.zt-popover--dark .zt-popover__arrow{color:var(--zt-popover-dark-background)}.zt-popover--dark .zt-popover__action:active{background-color:rgba(0,0,0,.2)}.zt-popover--dark .zt-popover__action--disabled{color:var(--zt-popover-dark-action-disabled-text-color)}.zt-popover--dark .zt-popover__action--disabled:active{background-color:transparent}.zt-popover--dark .zt-popover__action-text:after{border-color:var(--zt-gray-7)}.zt-popover--show{display:block}.zt-popover--hidden{display:none}.zt-popover-zoom-enter-from,.zt-popover-zoom-leave-active{transform:scale(.8);opacity:0}.zt-popover-zoom-enter-active{transition-timing-function:var(--zt-ease-out)}.zt-popover-zoom-leave-active{transition-timing-function:var(--zt-ease-in)}

package/lib/popover/index.d.ts

@@ -45,6 +45,10 @@ export declare const Popover: import("../utils").WithInstall<import("vue").Defin
         type: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
         default: string;
     };
+    autoAdjustOverflow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "touchstart" | "update:show")[], "select" | "touchstart" | "update:show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     show: BooleanConstructor;
     theme: {
@@ -92,6 +96,10 @@ export declare const Popover: import("../utils").WithInstall<import("vue").Defin
         type: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
         default: string;
     };
+    autoAdjustOverflow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onSelect?: ((...args: any[]) => any) | undefined;
     onTouchstart?: ((...args: any[]) => any) | undefined;
@@ -109,6 +117,7 @@ export declare const Popover: import("../utils").WithInstall<import("vue").Defin
     trigger: import("./types").PopoverTrigger;
     showArrow: boolean;
     placement: import("./types").PopoverPlacement;
+    autoAdjustOverflow: boolean;
 }>>;
 export default Popover;
 export { popoverProps } from './Popover';

package/lib/popover/index.js

@@ -17,6 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/lib/popup/Popup.js

@@ -43,6 +43,7 @@ const popupProps = (0, import_utils.extend)({}, import_shared.popupSharedProps,
   safeAreaInsetTop: Boolean,
   safeAreaInsetBottom: Boolean,
   sliderContentHeight: (0, import_utils.makeNumberProp)(60),
+  // 控制滑动区域的高度,滑动区域最小高
   minDragHeight: (0, import_utils.makeStringProp)("40px"),
   maxDragHeight: (0, import_utils.makeStringProp)("85vh"),
   slideable: Boolean

package/lib/popup/index.css

@@ -1 +1 @@
-:root{--zt-popup-background: var(--zt-background-2);--zt-popup-transition: transform var(--zt-duration-base);--zt-popup-round-radius: 16px;--zt-popup-close-icon-size: 22px;--zt-popup-close-icon-color: var(--zt-gray-5);--zt-popup-close-icon-margin: 16px;--zt-popup-close-icon-z-index: 1}.zt-overflow-hidden{overflow:hidden!important}.zt-popup{position:fixed;max-height:100%;overflow-y:auto;background:var(--zt-popup-background);transition:var(--zt-popup-transition);-webkit-overflow-scrolling:touch}.zt-popup__slider{position:fixed;width:100%;bottom:0;border-radius:16px 16px 0 0;background-color:var(--zt-popup-background)}.zt-popup__slider-title{height:40px;text-align:center}.zt-popup__slider-bar{display:inline-block;width:32px;height:4px;transform:scaleY(-1);background:rgba(45,75,115,.2);border-radius:3px}.zt-popup__slider-content{overflow-y:auto}.zt-popup--center{top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.zt-popup--center.zt-popup--round{border-radius:var(--zt-popup-round-radius)}.zt-popup--top{top:0;left:0;width:100%}.zt-popup--top.zt-popup--round{border-radius:0 0 var(--zt-popup-round-radius) var(--zt-popup-round-radius)}.zt-popup--right{top:50%;right:0;transform:translate3d(0,-50%,0)}.zt-popup--right.zt-popup--round{border-radius:var(--zt-popup-round-radius) 0 0 var(--zt-popup-round-radius)}.zt-popup--bottom{bottom:0;left:0;width:100%}.zt-popup--bottom.zt-popup--round{border-radius:var(--zt-popup-round-radius) var(--zt-popup-round-radius) 0 0}.zt-popup--left{top:50%;left:0;transform:translate3d(0,-50%,0)}.zt-popup--left.zt-popup--round{border-radius:0 var(--zt-popup-round-radius) var(--zt-popup-round-radius) 0}.zt-popup-slide-top-enter-active,.zt-popup-slide-left-enter-active,.zt-popup-slide-right-enter-active,.zt-popup-slide-bottom-enter-active{transition-timing-function:var(--zt-ease-out)}.zt-popup-slide-top-leave-active,.zt-popup-slide-left-leave-active,.zt-popup-slide-right-leave-active,.zt-popup-slide-bottom-leave-active{transition-timing-function:var(--zt-ease-in)}.zt-popup-slide-top-enter-from,.zt-popup-slide-top-leave-active{transform:translate3d(0,-100%,0)}.zt-popup-slide-right-enter-from,.zt-popup-slide-right-leave-active{transform:translate3d(100%,-50%,0)}.zt-popup-slide-bottom-enter-from,.zt-popup-slide-bottom-leave-active{transform:translate3d(0,100%,0)}.zt-popup-slide-left-enter-from,.zt-popup-slide-left-leave-active{transform:translate3d(-100%,-50%,0)}.zt-popup__slider-icon{z-index:var(--zt-popup-close-icon-z-index);color:var(--zt-popup-close-icon-color);font-size:var(--zt-popup-close-icon-size);cursor:pointer}.zt-popup__close-icon{position:absolute;z-index:var(--zt-popup-close-icon-z-index);color:var(--zt-popup-close-icon-color);font-size:var(--zt-popup-close-icon-size)}.zt-popup__close-icon--top-left{top:var(--zt-popup-close-icon-margin);left:var(--zt-popup-close-icon-margin)}.zt-popup__close-icon--top-right{top:var(--zt-popup-close-icon-margin);right:var(--zt-popup-close-icon-margin)}.zt-popup__close-icon--bottom-left{bottom:var(--zt-popup-close-icon-margin);left:var(--zt-popup-close-icon-margin)}.zt-popup__close-icon--bottom-right{right:var(--zt-popup-close-icon-margin);bottom:var(--zt-popup-close-icon-margin)}
+:root{--zt-popup-background: var(--zt-background-2);--zt-popup-transition: transform var(--zt-duration-base);--zt-popup-round-radius: 16px;--zt-popup-close-icon-size: 22px;--zt-popup-close-icon-color: var(--zt-gray-5);--zt-popup-close-icon-margin: 16px;--zt-popup-close-icon-z-index: 1}.zt-overflow-hidden{overflow:hidden!important}.zt-popup{position:fixed;max-height:100%;overflow-y:auto;background:var(--zt-popup-background);transition:var(--zt-popup-transition);-webkit-overflow-scrolling:touch}.zt-popup__slider{position:fixed;width:100%;bottom:0;left:0;border-radius:16px 16px 0 0;background-color:var(--zt-popup-background)}.zt-popup__slider-title{height:40px;text-align:center}.zt-popup__slider-bar{display:inline-block;width:32px;height:4px;transform:scaleY(-1);background:rgba(45,75,115,.2);border-radius:3px}.zt-popup__slider-content{overflow-y:auto}.zt-popup--center{top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.zt-popup--center.zt-popup--round{border-radius:var(--zt-popup-round-radius)}.zt-popup--top{top:0;left:0;width:100%}.zt-popup--top.zt-popup--round{border-radius:0 0 var(--zt-popup-round-radius) var(--zt-popup-round-radius)}.zt-popup--right{top:50%;right:0;transform:translate3d(0,-50%,0)}.zt-popup--right.zt-popup--round{border-radius:var(--zt-popup-round-radius) 0 0 var(--zt-popup-round-radius)}.zt-popup--bottom{bottom:0;left:0;width:100%}.zt-popup--bottom.zt-popup--round{border-radius:var(--zt-popup-round-radius) var(--zt-popup-round-radius) 0 0}.zt-popup--left{top:50%;left:0;transform:translate3d(0,-50%,0)}.zt-popup--left.zt-popup--round{border-radius:0 var(--zt-popup-round-radius) var(--zt-popup-round-radius) 0}.zt-popup-slide-top-enter-active,.zt-popup-slide-left-enter-active,.zt-popup-slide-right-enter-active,.zt-popup-slide-bottom-enter-active{transition-timing-function:var(--zt-ease-out)}.zt-popup-slide-top-leave-active,.zt-popup-slide-left-leave-active,.zt-popup-slide-right-leave-active,.zt-popup-slide-bottom-leave-active{transition-timing-function:var(--zt-ease-in)}.zt-popup-slide-top-enter-from,.zt-popup-slide-top-leave-active{transform:translate3d(0,-100%,0)}.zt-popup-slide-right-enter-from,.zt-popup-slide-right-leave-active{transform:translate3d(100%,-50%,0)}.zt-popup-slide-bottom-enter-from,.zt-popup-slide-bottom-leave-active{transform:translate3d(0,100%,0)}.zt-popup-slide-left-enter-from,.zt-popup-slide-left-leave-active{transform:translate3d(-100%,-50%,0)}.zt-popup__slider-icon{z-index:var(--zt-popup-close-icon-z-index);color:var(--zt-popup-close-icon-color);font-size:var(--zt-popup-close-icon-size);cursor:pointer}.zt-popup__close-icon{position:absolute;z-index:var(--zt-popup-close-icon-z-index);color:var(--zt-popup-close-icon-color);font-size:var(--zt-popup-close-icon-size)}.zt-popup__close-icon--top-left{top:var(--zt-popup-close-icon-margin);left:var(--zt-popup-close-icon-margin)}.zt-popup__close-icon--top-right{top:var(--zt-popup-close-icon-margin);right:var(--zt-popup-close-icon-margin)}.zt-popup__close-icon--bottom-left{bottom:var(--zt-popup-close-icon-margin);left:var(--zt-popup-close-icon-margin)}.zt-popup__close-icon--bottom-right{right:var(--zt-popup-close-icon-margin);bottom:var(--zt-popup-close-icon-margin)}

package/lib/popup/index.js

@@ -17,6 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/lib/popup/shared.js

@@ -23,17 +23,29 @@ __export(stdin_exports, {
 module.exports = __toCommonJS(stdin_exports);
 var import_utils = require("../utils");
 const popupSharedProps = {
+  // whether to show popup
   show: Boolean,
+  // z-index
   zIndex: import_utils.numericProp,
+  // whether to show overlay
   overlay: import_utils.truthProp,
+  // transition duration
   duration: import_utils.numericProp,
+  // teleport
   teleport: [String, Object],
+  // prevent body scroll
   lockScroll: import_utils.truthProp,
+  // whether to lazy render
   lazyRender: import_utils.truthProp,
+  // callback function before close
   beforeClose: Function,
+  // overlay custom style
   overlayStyle: Object,
+  // overlay custom class name
   overlayClass: import_utils.unknownProp,
+  // Initial rendering animation
   transitionAppear: Boolean,
+  // whether to close popup when overlay is clicked
   closeOnClickOverlay: import_utils.truthProp
 };
 const popupSharedPropKeys = Object.keys(

package/lib/pull-refresh/index.js

@@ -17,6 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/lib/radio/Radio.d.ts

@@ -30,8 +30,8 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    disabled: boolean;
     shape: CheckerShape;
+    disabled: boolean;
     labelDisabled: boolean;
 }>;
 export default _default;

package/lib/radio/Radio.js

@@ -17,6 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/lib/radio/index.d.ts

@@ -25,8 +25,8 @@ export declare const Radio: import("../utils").WithInstall<import("vue").DefineC
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    disabled: boolean;
     shape: import("../checkbox/Checker").CheckerShape;
+    disabled: boolean;
     labelDisabled: boolean;
 }>>;
 export default Radio;

package/lib/radio/index.js

@@ -17,6 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/lib/radio-group/index.js

@@ -17,6 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/lib/rate/index.css

@@ -1 +1 @@
-:root{--zt-rate-icon-size: 20px;--zt-rate-icon-gutter: var(--zt-padding-base);--zt-rate-icon-void-color: var(--zt-gray-5);--zt-rate-icon-full-color: var(--zt-yellow);--zt-rate-icon-disabled-color: var(--zt-gray-5)}.zt-rate{cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;display:inline-flex;align-items:center}.zt-rate__item{position:relative}.zt-rate__item:not(:last-child){padding-right:var(--zt-rate-icon-gutter)}.zt-rate__icon{display:block;width:1em;color:var(--zt-rate-icon-void-color);font-size:var(--zt-rate-icon-size)}.zt-rate__icon--half{position:absolute;top:0;left:0;overflow:hidden}.zt-rate__icon--full{color:var(--zt-rate-icon-full-color)}.zt-rate__icon--disabled{color:var(--zt-rate-icon-disabled-color)}.zt-rate--disabled{cursor:not-allowed}.zt-rate--readonly{cursor:default}
+:root{--zt-rate-icon-size: 20px;--zt-rate-icon-gutter: var(--zt-padding-base);--zt-rate-icon-void-color: rgba(0, 0, 0, .2);--zt-rate-icon-full-color: var(--zt-yellow);--zt-rate-icon-disabled-color: var(--zt-gray-5)}.zt-rate{cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;display:inline-flex;align-items:center}.zt-rate__item{position:relative}.zt-rate__item:not(:last-child){padding-right:var(--zt-rate-icon-gutter)}.zt-rate__icon{display:block;width:1em;color:var(--zt-rate-icon-void-color);font-size:var(--zt-rate-icon-size)}.zt-rate__icon--half{position:absolute;top:0;left:0;overflow:hidden}.zt-rate__icon--full{color:var(--zt-rate-icon-full-color)}.zt-rate__icon--disabled{color:var(--zt-rate-icon-disabled-color)}.zt-rate--disabled{cursor:not-allowed}.zt-rate--readonly{cursor:default}.zt-theme-dark{--zt-rate-icon-void-color: rgba(255, 255, 255, .2)}

package/lib/rate/index.js

@@ -17,6 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/lib/row/index.js

@@ -17,6 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/lib/search/Search.d.ts

@@ -201,9 +201,9 @@ declare const _default: import("vue").DefineComponent<{
     onCancel?: ((...args: any[]) => any) | undefined;
     onSearch?: ((...args: any[]) => any) | undefined;
 }, {
+    shape: SearchShape;
     autofocus: boolean;
     disabled: boolean;
-    shape: SearchShape;
     leftIcon: string;
     clearable: boolean;
     clearIcon: string;

package/lib/search/Search.js

@@ -51,6 +51,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
     "search",
     "cancel",
     "clickInput",
+    // 'clickLeftIcon',
     "clickRightIcon",
     "update:modelValue"
   ],

package/lib/search/index.d.ts

@@ -135,9 +135,9 @@ export declare const Search: import("../utils").WithInstall<import("vue").Define
     onCancel?: ((...args: any[]) => any) | undefined;
     onSearch?: ((...args: any[]) => any) | undefined;
 }, {
+    shape: import("./types").SearchShape;
     autofocus: boolean;
     disabled: boolean;
-    shape: import("./types").SearchShape;
     leftIcon: string;
     clearable: boolean;
     clearIcon: string;

package/lib/search/index.js

@@ -17,6 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/lib/signature/Signature.js

@@ -17,6 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -36,11 +40,17 @@ var import_media_util = require("../media-picker/util/media-util");
 var import_button = __toESM(require("../button"));
 var import_parse = require("../utils/parse");
 const [name, bem] = (0, import_utils.createNamespace)("signature");
+const SignColorMap = {
+  white: "#FFF",
+  black: "#000"
+};
+const strokeColor = (0, import_utils.colorFromCSSClass)(bem("stroke"), SignColorMap.black);
+const canvasBgColor = (0, import_utils.colorFromCSSClass)(bem("canvas"), SignColorMap.white);
 const signatureProps = {
   customClass: (0, import_utils.makeStringProp)(""),
   lineWidth: (0, import_utils.makeNumericProp)(2),
-  strokeStyle: (0, import_utils.makeStringProp)("#000"),
-  backgroundStyle: (0, import_utils.makeStringProp)("#fff"),
+  strokeStyle: (0, import_utils.makeStringProp)(strokeColor),
+  backgroundStyle: (0, import_utils.makeStringProp)(canvasBgColor),
   imageType: (0, import_utils.makeStringProp)("png"),
   resultTypes: (0, import_utils.makeArrayProp)(["file", "dataUrl"]),
   unSupportTpl: (0, import_utils.makeStringProp)("\u5BF9\u4E0D\u8D77\uFF0C\u5F53\u524D\u6D4F\u89C8\u5668\u4E0D\u652F\u6301Canvas\uFF0C\u65E0\u6CD5\u4F7F\u7528\u7B7E\u540D\u7EC4\u4EF6"),
@@ -231,24 +241,21 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "plain": true,
         "type": "warning",
         "onClick": () => clear(),
-        "style": {
-          "background-color": "#fff"
-        }
+        "class": bem("button-again")
       }, {
         default: () => [(0, import_vue.createTextVNode)("\u91CD\u7B7E")]
       }), (0, import_vue.createVNode)(import_button.default, {
         "type": "default",
         "onClick": cancel,
-        "style": {
-          "background-color": "#fff"
-        }
+        "class": bem("button-cancel")
       }, {
         default: () => [(0, import_vue.createTextVNode)("\u53D6\u6D88")]
       }), (0, import_vue.createVNode)(import_button.default, {
         "block": true,
         "type": "primary",
         "disabled": isCompleteButtonDisabled.value,
-        "onClick": confirm
+        "onClick": confirm,
+        "class": bem("button-complete")
       }, {
         default: () => [(0, import_vue.createTextVNode)("\u5B8C\u6210")]
       })])])]

package/lib/signature/index.css

@@ -1 +1 @@
-:root{--zt-signature-canvas-z-index: 1;--zt-signature-hint-z-index: 2;--zt-signature-actions-z-index: 2}.zt-signature{background-color:var(--zt-background);width:100%;height:100%;position:relative}.zt-signature__placeholder{z-index:var(--zt-signature-hint-z-index);pointer-events:none;position:absolute;left:0;top:calc(50% - 12px);font-size:16px;height:24px;width:100%;color:var(--zt-gray-a2);text-align:center}.zt-signature__canvasWrapper{z-index:var(--zt-signature-canvas-z-index);position:absolute;top:0;left:0;width:100%;height:100%;background:var(--zt-white)}.zt-signature__actions{z-index:var(--zt-signature-actions-z-index);position:absolute;right:0;bottom:16px;width:320px;float:right}.zt-signature__actions button{float:left;width:96px;margin-right:8px}
+:root{--zt-signature-canvas-z-index: 1;--zt-signature-canvas-background-color: var(--zt-white);--zt-signature-hint-z-index: 2;--zt-signature-actions-z-index: 2;--zt-signature-button-backgroud: #ffffff;--zt-signature-button-again-border: .5px solid #ff8700;--zt-signature-button-cancel-border: .5px solid rgba(45, 75, 115, .2);--zt-signature-button-complete-background-image: linear-gradient(-45deg, #3cafff 0%, #0091fa 100%)}.zt-signature{background-color:var(--zt-background);width:100%;height:100%;position:relative}.zt-signature__placeholder{z-index:var(--zt-signature-hint-z-index);pointer-events:none;position:absolute;left:0;top:calc(50% - 12px);font-size:16px;height:24px;width:100%;color:var(--zt-gray-a2);text-align:center}.zt-signature__canvasWrapper{z-index:var(--zt-signature-canvas-z-index);position:absolute;top:0;left:0;width:100%;height:100%;background:var(--zt-signature-canvas-background-color)}.zt-signature__canvas{background:var(--zt-signature-canvas-background-color);color:var(--zt-signature-canvas-background-color)}.zt-signature__actions{z-index:var(--zt-signature-actions-z-index);position:absolute;right:0;bottom:16px;width:320px;float:right}.zt-signature__actions button{float:left;width:96px;margin-right:8px}.zt-signature__stroke{color:var(--zt-text-color)}.zt-signature__button-again{background:var(--zt-signature-button-backgroud);border:var(--zt-signature-button-again-border)}.zt-signature__button-cancel{background:var(--zt-signature-button-backgroud);color:var(--zt-text-color);border:var(--zt-signature-button-cancel-border)}.zt-signature__button-complete{background-image:var(--zt-signature-button-complete-background-image)}.zt-theme-dark{--zt-signature-canvas-background-color: #19222d;--zt-signature-button-backgroud: rgba(255, 255, 255, .04);--zt-signature-button-again-border: 0px;--zt-signature-button-cancel-border: 0px;--zt-signature-button-complete-background-image: linear-gradient(-45deg, #3cafff 0%, #0091fa 100%)}

package/lib/signature/index.js

@@ -17,6 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/lib/skeleton/index.js

@@ -17,6 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));

package/lib/step/Step.js

@@ -58,11 +58,11 @@ var stdin_default = (0, import_vue2.defineComponent)({
     const titleStyle = (0, import_vue2.computed)(() => {
       if (isActive()) {
         return {
-          color: parentProps.titleActiveColor || "#2D4B73"
+          color: parentProps.titleActiveColor || ""
         };
       }
       return {
-        color: parentProps.titleInactiveColor || "rgba(45, 75, 115, 0.6)"
+        color: parentProps.titleInactiveColor || ""
       };
     });
     const onClickStep = () => parent.onClickStep(index.value);
@@ -78,12 +78,16 @@ var stdin_default = (0, import_vue2.defineComponent)({
       const style = {};
       if (isActive()) {
         style.background = `${activeBgColor || "rgba(0,145,250,0.20)"}`;
-        style.border = `1px solid ${activeBorderColor || "rgba(0,145,250,0.20)"}`;
+        if (activeBorderColor) {
+          style.border = `1px solid ${activeBorderColor}`;
+        }
         style.fontWeight = "bold";
         style.color = `${activeColor || "#0091FA"}`;
       } else {
-        style.background = `${inactiveBgColor || "rgba(0,0,0,0.20)"}`;
-        style.border = `1px solid ${inactiveBorderColor || "rgba(0,0,0,0)"}`;
+        style.background = `${inactiveBgColor || ""}`;
+        if (inactiveBorderColor) {
+          style.border = `1px solid ${inactiveBorderColor}`;
+        }
         style.fontWeight = "normal";
         style.color = `${inactiveColor || "#FFFFFF"}`;
       }
@@ -130,7 +134,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       return (0, import_vue.createVNode)("div", {
         "class": bem("circle"),
         "style": circleStyle()
-      }, [index.value]);
+      }, [index.value + 1]);
     };
     return () => {
       var _a;