zartui 3.0.2 → 3.0.3

package/lib/multiple-picker/MultiplePickerOptions.js

@@ -0,0 +1,125 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  default: () => stdin_default
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_utils = require("../utils");
+var import_use_expose = require("../composables/use-expose");
+const [name, bem] = (0, import_utils.createNamespace)("multiple-picker-options");
+const multiplePickerOptionsProps = {
+  valueKey: (0, import_utils.makeStringProp)(""),
+  readonly: Boolean,
+  allowHtml: Boolean,
+  itemHeight: (0, import_utils.makeNumberProp)(0),
+  columnCounts: (0, import_utils.makeNumberProp)(3),
+  initialOptions: (0, import_utils.makeArrayProp)([]),
+  currentIndexes: (0, import_utils.makeArrayProp)([])
+};
+var stdin_default = (0, import_vue2.defineComponent)({
+  name,
+  props: multiplePickerOptionsProps,
+  emits: ["change", "update:currentIndexes"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const state = (0, import_vue2.reactive)({
+      options: props.initialOptions,
+      confirmed: false
+    });
+    const currentIndexes = (0, import_vue2.ref)(props.currentIndexes);
+    const columnCounts = (0, import_vue2.ref)(props.columnCounts);
+    const onClickItem = (index) => {
+      if (props.readonly) {
+        return;
+      }
+      let exist = false;
+      currentIndexes.value.forEach((v, i) => {
+        if (v === index) {
+          exist = true;
+          currentIndexes.value.splice(i, 1);
+        }
+      });
+      if (!exist) {
+        currentIndexes.value.push(index);
+      }
+      emit("update:currentIndexes", currentIndexes.value);
+      emit("change");
+    };
+    const getOptionText = (option) => {
+      if ((0, import_utils.isObject)(option) && props.valueKey in option) {
+        return option[props.valueKey];
+      }
+      return option;
+    };
+    const isOptionDisabled = (option) => (0, import_utils.isObject)(option) && option.disabled;
+    const genOptions = () => {
+      columnCounts.value = Number(props.columnCounts);
+      if (columnCounts.value && columnCounts.value > 3) {
+        columnCounts.value = 3;
+      }
+      if (columnCounts.value && columnCounts.value < 1) {
+        columnCounts.value = 1;
+      }
+      const optionStyle = {
+        height: `${props.itemHeight + 8}px`,
+        width: `${1 / columnCounts.value * 100}%`
+      };
+      return state.options.map((option, index) => {
+        const text = getOptionText(option);
+        const disabled = isOptionDisabled(option);
+        const childData = {
+          class: "zt-ellipsis",
+          [props.allowHtml ? "innerHTML" : "textContent"]: text
+        };
+        return (0, import_vue.createVNode)("div", {
+          "role": "button",
+          "style": optionStyle,
+          "tabindex": disabled ? -1 : 0,
+          "onClick": () => onClickItem(index),
+          "class": [bem("item", {
+            disabled,
+            selected: currentIndexes.value.indexOf(index) > -1,
+            last: (index + 1) % columnCounts.value === 0
+          })]
+        }, [slots.options ? slots.options(option) : (0, import_vue.createVNode)("div", childData, null)]);
+      });
+    };
+    const setConfirmIndex = (indexes) => {
+      state.confirmed = true;
+      const keys = Object.keys(indexes);
+      currentIndexes.value.length = 0;
+      keys.forEach((item) => {
+        currentIndexes.value.push(indexes[item]);
+      });
+    };
+    (0, import_use_expose.useExpose)({
+      setConfirmIndex
+    });
+    return () => (0, import_vue.createVNode)("div", {
+      "class": bem()
+    }, [(0, import_vue.createVNode)("div", {
+      "ref": "wrapper",
+      "class": bem("wrapper")
+    }, [genOptions()])]);
+  }
+});

package/lib/multiple-picker/index.css

@@ -0,0 +1 @@
+:root{--zt-multiple-picker-warpper-padding: 12px 16px 4px 16px;--zt-multiple-picker-option-text-color: var(--zt-gray-default);--zt-multiple-picker-background-color: var(--zt-white);--zt-multiple-picker-toolbar-height: 44px;--zt-multiple-picker-action-padding: 0 var(--zt-padding-md);--zt-multiple-picker-title-font-size: var(--zt-font-size-md);--zt-multiple-picker-title-opacity: var(--zt-disabled-opacity);--zt-multiple-picker-title-padding: 12px 0;--zt-multiple-picker-title-line-height: var(--zt-line-height-md);--zt-multiple-picker-item-padding: 0 4px 8px 0;--zt-multiple-picker-action-font-size: var(--zt-font-size-md);--zt-multiple-picker-confirm-action-font-weight: var(--zt-font-bold);--zt-multiple-picker-confirm-action-color: var(--zt-blue);--zt-multiple-picker-cancel-action-font-weight: normal;--zt-multiple-picker-cancel-action-color: var(--zt-black);--zt-multiple-picker-option-font-size: var(--zt-font-size-md);--zt-multiple-picker-option-disabled-opacity: .3;--zt-multiple-picker-option-active-opacity: .7;--zt-multiple-picker-max-height: 84.55vh;--zt-multiple-picker-loading-icon-color: var(--zt-blue);--zt-multiple-picker-loading-index: 3;--zt-multiple-picker-loading-mask-color: rgba(255, 255, 255, .9);--zt-multiple-picker-toolbar-padding: 8px 16px;--zt-multiple-picker-ellipsis-border-radius: 18px;--zt-multiple-picker-ellipsis-line-height: 20px}.zt-multiple-picker{display:flex;flex-direction:column;justify-content:space-between;position:relative;background-color:var(--zt-multiple-picker-background-color);-webkit-user-select:none;user-select:none;max-height:var(--zt-multiple-picker-max-height)}.zt-multiple-picker__toolbar{display:flex;align-items:center;justify-content:space-between;box-sizing:content-box;flex-shrink:0;height:var(--zt-multiple-picker-toolbar-height);padding:var(--zt-multiple-picker-toolbar-padding)}.zt-multiple-picker__cancel,.zt-multiple-picker__confirm{height:100%;padding:var(--zt-multiple-picker-action-padding);font-size:var(--zt-multiple-picker-action-font-size);background-color:transparent;border:none;cursor:pointer}.zt-multiple-picker__cancel:active,.zt-multiple-picker__confirm:active{opacity:var(--zt-multiple-picker-option-active-opacity)}.zt-multiple-picker__confirm{color:var(--zt-multiple-picker-confirm-action-color);font-weight:var(--zt-multiple-picker-confirm-action-font-weight)}.zt-multiple-picker__cancel{color:var(--zt-multiple-picker-cancel-action-color);font-weight:var(--zt-multiple-picker-cancel-action-font-weight)}.zt-multiple-picker__title{flex-shrink:0;font-weight:var(--zt-multiple-picker-cancel-action-font-weight);font-size:var(--zt-multiple-picker-title-font-size);line-height:var(--zt-multiple-picker-title-line-height);text-align:center;color:var(--zt-gray-default);opacity:var(--zt-multiple-picker-title-opacity);padding:var(--zt-multiple-picker-title-padding)}.zt-multiple-picker__options{position:relative;display:flex;cursor:-webkit-grab;cursor:grab;overflow-y:scroll}.zt-multiple-picker__options:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid var(--zt-border-color);transform:scaleY(.5)}.zt-multiple-picker__options:before{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;top:0;right:0;left:0;border-top:1px solid var(--zt-border-color);transform:scaleY(.5)}.zt-multiple-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;align-items:center;justify-content:center;color:var(--zt-multiple-picker-loading-icon-color);background-color:var(--zt-multiple-picker-loading-mask-color)}.zt-multiple-picker-options{flex:1;overflow-y:scroll;font-size:var(--zt-multiple-picker-option-font-size);margin:0;outline:0 none;padding:0}.zt-multiple-picker-options__wrapper{display:flex;flex-wrap:wrap;background-color:var(--zt-white);padding:var(--zt-multiple-picker-warpper-padding)}.zt-multiple-picker-options__item{color:var(--zt-multiple-picker-option-text-color);padding:var(--zt-multiple-picker-item-padding);box-sizing:border-box;text-align:center;font-size:var(--zt-font-size-md)}.zt-multiple-picker-options__item .zt-ellipsis{line-height:var(--zt-multiple-picker-ellipsis-line-height);border-radius:var(--zt-multiple-picker-ellipsis-border-radius);border:1px solid var(--zt-gray-a2);padding:var(--zt-multiple-picker-toolbar-padding);opacity:var(--zt-active-opacity)}.zt-multiple-picker-options__item--disabled{cursor:not-allowed;opacity:var(--zt-multiple-picker-option-disabled-opacity)}.zt-multiple-picker-options__item--last{padding-right:0}.zt-multiple-picker-options__item--selected .zt-ellipsis{background:rgba(0,145,250,.1);border:1px solid rgba(0,145,250,.6);border-radius:var(--zt-multiple-picker-ellipsis-border-radius);color:var(--zt-blue);opacity:1}

package/lib/multiple-picker/index.d.ts

@@ -0,0 +1,123 @@
+import { MultiplePickerProps } from './MultiplePicker';
+export declare const MultiplePicker: import("../utils").WithInstall<import("vue").DefineComponent<{
+    title: StringConstructor;
+    loading: BooleanConstructor;
+    readonly: BooleanConstructor;
+    itemHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+    showPicker: BooleanConstructor;
+    allowHtml: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showToolbar: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    options: {
+        type: import("vue").PropType<import("./types").PickerOption[]>;
+        default: () => import("./types").PickerOption[];
+    };
+    toolbarPosition: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    valueKey: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    columnCounts: {
+        type: NumberConstructor;
+        default: number;
+    };
+    selectedIndex: {
+        type: import("vue").PropType<number[]>;
+        default: () => number[];
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "cancel" | "confirm" | "update:showPicker" | "update:selectedIndex")[], "change" | "cancel" | "confirm" | "update:showPicker" | "update:selectedIndex", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    title: StringConstructor;
+    loading: BooleanConstructor;
+    readonly: BooleanConstructor;
+    itemHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+    showPicker: BooleanConstructor;
+    allowHtml: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showToolbar: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    options: {
+        type: import("vue").PropType<import("./types").PickerOption[]>;
+        default: () => import("./types").PickerOption[];
+    };
+    toolbarPosition: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    valueKey: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    columnCounts: {
+        type: NumberConstructor;
+        default: number;
+    };
+    selectedIndex: {
+        type: import("vue").PropType<number[]>;
+        default: () => number[];
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+    "onUpdate:showPicker"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:selectedIndex"?: ((...args: any[]) => any) | undefined;
+}, {
+    readonly: boolean;
+    closeOnClickOverlay: boolean;
+    closeOnPopstate: boolean;
+    loading: boolean;
+    options: import("./types").PickerOption[];
+    allowHtml: boolean;
+    showToolbar: boolean;
+    toolbarPosition: string;
+    showPicker: boolean;
+    valueKey: string;
+    itemHeight: string | number;
+    columnCounts: number;
+    selectedIndex: number[];
+}>>;
+export default MultiplePicker;
+export type { MultiplePickerProps };
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtMultiplePicker: typeof MultiplePicker;
+    }
+}

package/lib/multiple-picker/index.js

@@ -0,0 +1,33 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  MultiplePicker: () => MultiplePicker,
+  default: () => stdin_default
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_utils = require("../utils");
+var import_MultiplePicker = __toESM(require("./MultiplePicker"));
+const MultiplePicker = (0, import_utils.withInstall)(import_MultiplePicker.default);
+var stdin_default = MultiplePicker;

package/lib/multiple-picker/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/multiple-picker/style/index.js

@@ -0,0 +1,8 @@
+require("../../style/base.css");
+require("../../badge/index.css");
+require("../../icon/index.css");
+require("../../overlay/index.css");
+require("../../popup/index.css");
+require("../../loading/index.css");
+require("../../button/index.css");
+require("../index.css");

package/lib/multiple-picker/types.d.ts

@@ -0,0 +1,14 @@
+import { Numeric } from '../utils';
+import { ComponentPublicInstance } from 'vue';
+import { MultiplePickerOptionsProps } from './MultiplePickerOptions';
+export declare type PickerOption = {
+    text?: Numeric;
+    value?: Numeric;
+    disabled?: boolean;
+    className?: unknown;
+    [key: PropertyKey]: any;
+};
+export declare type MultiplePickerOptionsExpose = {
+    setConfirmIndex: (indexes: any) => void;
+};
+export declare type MultiplePickerInstance = ComponentPublicInstance<MultiplePickerOptionsProps, MultiplePickerOptionsExpose>;

package/lib/multiple-picker/types.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+module.exports = __toCommonJS(stdin_exports);

package/lib/nav-bar/NavBar.d.ts

@@ -0,0 +1,72 @@
+import { PropType } from 'vue';
+import type { CSSProperties, ExtractPropTypes } from 'vue';
+declare const navBarProps: {
+    title: StringConstructor;
+    fixed: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    border: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    leftText: BooleanConstructor;
+    leftIcon: BooleanConstructor;
+    multiIcon: BooleanConstructor;
+    rightText: StringConstructor;
+    rightIcon: BooleanConstructor;
+    placeholder: BooleanConstructor;
+    safeAreaInsetTop: BooleanConstructor;
+    color: StringConstructor;
+    navBarBackground: StringConstructor;
+    leftBtnStyle: PropType<CSSProperties>;
+};
+export declare type NavBarProps = ExtractPropTypes<typeof navBarProps>;
+declare const _default: import("vue").DefineComponent<{
+    title: StringConstructor;
+    fixed: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    border: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    leftText: BooleanConstructor;
+    leftIcon: BooleanConstructor;
+    multiIcon: BooleanConstructor;
+    rightText: StringConstructor;
+    rightIcon: BooleanConstructor;
+    placeholder: BooleanConstructor;
+    safeAreaInsetTop: BooleanConstructor;
+    color: StringConstructor;
+    navBarBackground: StringConstructor;
+    leftBtnStyle: PropType<CSSProperties>;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clickLeft" | "clickRight")[], "clickLeft" | "clickRight", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    title: StringConstructor;
+    fixed: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    border: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    leftText: BooleanConstructor;
+    leftIcon: BooleanConstructor;
+    multiIcon: BooleanConstructor;
+    rightText: StringConstructor;
+    rightIcon: BooleanConstructor;
+    placeholder: BooleanConstructor;
+    safeAreaInsetTop: BooleanConstructor;
+    color: StringConstructor;
+    navBarBackground: StringConstructor;
+    leftBtnStyle: PropType<CSSProperties>;
+}>> & {
+    onClickLeft?: ((...args: any[]) => any) | undefined;
+    onClickRight?: ((...args: any[]) => any) | undefined;
+}, {
+    fixed: boolean;
+    leftIcon: boolean;
+    border: boolean;
+    rightIcon: boolean;
+    placeholder: boolean;
+    safeAreaInsetTop: boolean;
+    leftText: boolean;
+    multiIcon: boolean;
+}>;
+export default _default;

package/lib/nav-bar/NavBar.js

@@ -0,0 +1,133 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  default: () => stdin_default
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_utils = require("../utils");
+var import_use_placeholder = require("../composables/use-placeholder");
+var import_icon = require("../icon");
+const [name, bem] = (0, import_utils.createNamespace)("nav-bar");
+const navBarProps = {
+  title: String,
+  fixed: Boolean,
+  zIndex: import_utils.numericProp,
+  border: import_utils.truthProp,
+  leftText: Boolean,
+  leftIcon: Boolean,
+  multiIcon: Boolean,
+  rightText: String,
+  rightIcon: Boolean,
+  placeholder: Boolean,
+  safeAreaInsetTop: Boolean,
+  color: String,
+  navBarBackground: String,
+  leftBtnStyle: Object
+};
+var stdin_default = (0, import_vue2.defineComponent)({
+  name,
+  props: navBarProps,
+  emits: ["clickLeft", "clickRight"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const navBarRef = (0, import_vue2.ref)();
+    const renderPlaceholder = (0, import_use_placeholder.usePlaceholder)(navBarRef, bem);
+    const onClickLeft = (event) => emit("clickLeft", event);
+    const onClickRight = (event) => emit("clickRight", event);
+    const renderLeft = () => {
+      if (slots.left) {
+        return slots.left();
+      }
+      return (0, import_vue.createVNode)("div", {
+        "class": bem("bar-btn", "left")
+      }, [props.leftIcon ? (0, import_vue.createVNode)(import_icon.Icon, {
+        "class": bem("icon"),
+        "name": "back"
+      }, null) : "", props.leftText ? (0, import_vue.createVNode)("span", {
+        "class": bem("text", props.leftIcon ? "left-text" : "")
+      }, ["\u8FD4\u56DE"]) : ""]);
+    };
+    const renderRight = () => {
+      if (slots.right) {
+        return slots.right();
+      }
+      return (0, import_vue.createVNode)("div", {
+        "class": bem("bar-btn", "right")
+      }, [props.rightIcon ? (0, import_vue.createVNode)(import_icon.Icon, {
+        "class": bem("icon"),
+        "name": "more"
+      }, null) : "", props.rightText ? (0, import_vue.createVNode)("span", {
+        "class": bem("text")
+      }, [props.rightText || "\u66F4\u591A"]) : ""]);
+    };
+    const genNavBarStyle = () => {
+      const {
+        color,
+        navBarBackground
+      } = props;
+      const style = {};
+      if (color) {
+        style.color = color;
+      }
+      if (navBarBackground) {
+        style.background = navBarBackground;
+      }
+      if (Object.keys(style).length > 0) {
+        return style;
+      }
+    };
+    const renderNavBar = () => {
+      const {
+        title,
+        fixed
+      } = props;
+      const hasLeft = props.leftText || props.leftIcon || slots.left;
+      const hasRight = props.rightIcon || props.rightText || slots.right;
+      return (0, import_vue.createVNode)("div", {
+        "ref": navBarRef,
+        "style": genNavBarStyle(),
+        "class": [bem({
+          fixed
+        }), {
+          "zt-safe-area-top": props.safeAreaInsetTop
+        }]
+      }, [(0, import_vue.createVNode)("div", {
+        "class": bem("content")
+      }, [hasLeft && (0, import_vue.createVNode)("div", {
+        "class": [bem("left")],
+        "onClick": onClickLeft
+      }, [renderLeft()]), (0, import_vue.createVNode)("div", {
+        "class": [bem("title"), "zt-ellipsis"]
+      }, [slots.title ? slots.title() : title]), hasRight && (0, import_vue.createVNode)("div", {
+        "class": [bem("right", props.multiIcon ? "multi-icon" : "")],
+        "onClick": onClickRight
+      }, [renderRight(), slots.extra ? slots.extra() : null])])]);
+    };
+    return () => {
+      if (props.fixed && props.placeholder) {
+        return renderPlaceholder(renderNavBar);
+      }
+      return renderNavBar();
+    };
+  }
+});

package/lib/nav-bar/index.css

@@ -0,0 +1 @@
+:root{--zt-nav-bar-height: 44px;--zt-nav-bar-padding-bottom: 12px;--zt-nav-bar-background: var(--zt-background);--zt-nav-bar-icon-font-size: 24px;--zt-nav-bar-icon-color: var(--zt-text-color);--zt-nav-bar-icon-size: 36px;--zt-nav-bar-button-height: 36px;--zt-nav-bar-border-height: 18px;--zt-nav-bar-text-color: var(--zt-primary-color);--zt-nav-bar-title-font-size: var(--zt-font-size-gt);--zt-nav-bar-title-text-color: var(--zt-text-color);--zt-nav-bar-title-height: 28px;--zt-nav-bar-z-index: 1;--zt-nav-bar-btn-border-radius: 18px;--zt-nav-bar-padding-left: 16px;--zt-nav-bar-padding-right: 16px}.zt-nav-bar{position:relative;padding-bottom:var(--zt-nav-bar-padding-bottom);z-index:var(--zt-nav-bar-z-index);text-align:center;-webkit-user-select:none;user-select:none;color:var(--zt-nav-bar-icon-color)}.zt-nav-bar--fixed{position:fixed;top:0;left:0;width:100%}.zt-nav-bar--safe-area-inset-top{padding-top:constant(safe-area-inset-top);padding-top:env(safe-area-inset-top)}.zt-nav-bar__content{position:relative;display:flex;align-items:center;height:var(--zt-nav-bar-height)}.zt-nav-bar__icon{width:var(--zt-nav-bar-icon-size);height:var(--zt-nav-bar-icon-size);line-height:var(--zt-nav-bar-icon-size);font-size:var(--zt-nav-bar-icon-font-size)}.zt-nav-bar__text{display:inline-block;font-size:var(--zt-font-size-lg);padding-right:var(--zt-nav-bar-padding-left);padding-left:var(--zt-nav-bar-padding-right)}.zt-nav-bar__text--left-text{padding-left:0}.zt-nav-bar__bar-btn{display:flex;align-items:center;box-sizing:border-box;height:var(--zt-nav-bar-button-height);line-height:var(--zt-nav-bar-button-height);background:linear-gradient(135deg,#e6ebf0 0%,#ffffff 100%,#ffffff 100%);box-shadow:-4px -4px 8px #fff,4px 4px 8px rgba(45,75,115,.1);border-radius:var(--zt-nav-bar-btn-border-radius);border:1px solid rgba(255,255,255,.75)}.zt-nav-bar__bar-btn:active{border:1px solid rgba(255,255,255,.75);box-shadow:inset 4px 4px 8px rgba(45,75,115,.24);background:rgba(45,75,115,.04)}.zt-nav-bar__title{height:var(--zt-nav-bar-title-height);text-align:center;line-height:var(--zt-nav-bar-title-height);max-width:50%;margin:0 auto;font-weight:var(--zt-font-bold);font-size:var(--zt-nav-bar-title-font-size)}.zt-nav-bar__left,.zt-nav-bar__right{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0 var(--zt-padding-md);font-size:var(--zt-font-size-md);max-width:30%}.zt-nav-bar__left{left:0}.zt-nav-bar__right{right:0}

package/lib/nav-bar/index.d.ts

@@ -0,0 +1,56 @@
+export declare const NavBar: import("../utils").WithInstall<import("vue").DefineComponent<{
+    title: StringConstructor;
+    fixed: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    border: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    leftText: BooleanConstructor;
+    leftIcon: BooleanConstructor;
+    multiIcon: BooleanConstructor;
+    rightText: StringConstructor;
+    rightIcon: BooleanConstructor;
+    placeholder: BooleanConstructor;
+    safeAreaInsetTop: BooleanConstructor;
+    color: StringConstructor;
+    navBarBackground: StringConstructor;
+    leftBtnStyle: import("vue").PropType<import("vue").CSSProperties>;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clickLeft" | "clickRight")[], "clickLeft" | "clickRight", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    title: StringConstructor;
+    fixed: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    border: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    leftText: BooleanConstructor;
+    leftIcon: BooleanConstructor;
+    multiIcon: BooleanConstructor;
+    rightText: StringConstructor;
+    rightIcon: BooleanConstructor;
+    placeholder: BooleanConstructor;
+    safeAreaInsetTop: BooleanConstructor;
+    color: StringConstructor;
+    navBarBackground: StringConstructor;
+    leftBtnStyle: import("vue").PropType<import("vue").CSSProperties>;
+}>> & {
+    onClickLeft?: ((...args: any[]) => any) | undefined;
+    onClickRight?: ((...args: any[]) => any) | undefined;
+}, {
+    fixed: boolean;
+    leftIcon: boolean;
+    border: boolean;
+    rightIcon: boolean;
+    placeholder: boolean;
+    safeAreaInsetTop: boolean;
+    leftText: boolean;
+    multiIcon: boolean;
+}>>;
+export default NavBar;
+export type { NavBarProps } from './NavBar';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtNavBar: typeof NavBar;
+    }
+}

package/lib/nav-bar/index.js

@@ -0,0 +1,33 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  NavBar: () => NavBar,
+  default: () => stdin_default
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_utils = require("../utils");
+var import_NavBar = __toESM(require("./NavBar"));
+const NavBar = (0, import_utils.withInstall)(import_NavBar.default);
+var stdin_default = NavBar;

package/lib/nav-bar/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/nav-bar/style/index.js

@@ -0,0 +1,4 @@
+require("../../style/base.css");
+require("../../badge/index.css");
+require("../../icon/index.css");
+require("../index.css");

package/lib/notice-bar/NoticeBar.d.ts

@@ -63,9 +63,9 @@ declare const _default: import("vue").DefineComponent<{
     onClose?: ((...args: any[]) => any) | undefined;
     onReplay?: ((...args: any[]) => any) | undefined;
 }, {
+    scrollable: boolean | null;
     delay: string | number;
     speed: string | number;
     wrapable: boolean;
-    scrollable: boolean | null;
 }>;
 export default _default;

package/lib/notice-bar/index.css

@@ -1 +1 @@
-body{--zt-notice-bar-height: 36px;--zt-notice-bar-padding: 0 var(--zt-padding-md);--zt-notice-bar-wrapable-padding: var(--zt-padding-xs) var(--zt-padding-md);--zt-notice-bar-text-color: var(--zt-orange-2);--zt-notice-bar-font-size: var(--zt-font-size-md);--zt-notice-bar-line-height: 36px;--zt-notice-bar-background: var(--zt-background-4);--zt-notice-bar-icon-size: 20px;--zt-notice-bar-icon-min-width: 20px;--zt-notice-bar-icon-height: 20px}.zt-notice-bar{position:relative;display:flex;align-items:center;height:var(--zt-notice-bar-height);padding:var(--zt-notice-bar-padding);color:var(--zt-notice-bar-text-color);font-size:var(--zt-notice-bar-font-size);line-height:var(--zt-notice-bar-line-height);background:var(--zt-notice-bar-background)}.zt-notice-bar__left-icon,.zt-notice-bar__right-icon{min-width:var(--zt-notice-bar-icon-min-width);font-size:var(--zt-notice-bar-icon-size);height:var(--zt-notice-bar-icon-height)}.zt-notice-bar__right-icon{text-align:right;cursor:pointer}.zt-notice-bar__left-icon-size,.zt-notice-bar__right-icon-size{width:var(--zt-notice-bar-icon-size);height:var(--zt-notice-bar-icon-size)}.zt-notice-bar__wrap{position:relative;display:flex;flex:1;align-items:center;height:100%;overflow:hidden}.zt-notice-bar__content{position:absolute;white-space:nowrap;transition-timing-function:linear}.zt-notice-bar__content.zt-ellipsis{max-width:100%}.zt-notice-bar--wrapable{height:auto;padding:var(--zt-notice-bar-wrapable-padding)}.zt-notice-bar--wrapable .zt-notice-bar__wrap{height:auto}.zt-notice-bar--wrapable .zt-notice-bar__content{position:relative;white-space:normal;word-wrap:break-word}
+:root{--zt-notice-bar-height: 36px;--zt-notice-bar-padding: 0 var(--zt-padding-md);--zt-notice-bar-wrapable-padding: var(--zt-padding-xs) var(--zt-padding-md);--zt-notice-bar-text-color: var(--zt-orange-2);--zt-notice-bar-font-size: var(--zt-font-size-md);--zt-notice-bar-line-height: 36px;--zt-notice-bar-background: var(--zt-background-4);--zt-notice-bar-icon-size: 20px;--zt-notice-bar-icon-min-width: 20px;--zt-notice-bar-icon-height: 20px}.zt-notice-bar{position:relative;display:flex;align-items:center;height:var(--zt-notice-bar-height);padding:var(--zt-notice-bar-padding);color:var(--zt-notice-bar-text-color);font-size:var(--zt-notice-bar-font-size);line-height:var(--zt-notice-bar-line-height);background:var(--zt-notice-bar-background)}.zt-notice-bar__left-icon,.zt-notice-bar__right-icon{min-width:var(--zt-notice-bar-icon-min-width);font-size:var(--zt-notice-bar-icon-size);height:var(--zt-notice-bar-icon-height)}.zt-notice-bar__right-icon{text-align:right;cursor:pointer}.zt-notice-bar__left-icon-size,.zt-notice-bar__right-icon-size{width:var(--zt-notice-bar-icon-size);height:var(--zt-notice-bar-icon-size)}.zt-notice-bar__wrap{position:relative;display:flex;flex:1;align-items:center;height:100%;overflow:hidden}.zt-notice-bar__content{position:absolute;white-space:nowrap;transition-timing-function:linear}.zt-notice-bar__content.zt-ellipsis{max-width:100%}.zt-notice-bar--wrapable{height:auto;padding:var(--zt-notice-bar-wrapable-padding)}.zt-notice-bar--wrapable .zt-notice-bar__wrap{height:auto}.zt-notice-bar--wrapable .zt-notice-bar__content{position:relative;white-space:normal;word-wrap:break-word}