zartui 3.0.2 → 3.0.3

package/lib/collapse-item/CollapseItem.js

@@ -0,0 +1,160 @@
+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 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 __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, {
+  collapseItemProps: () => collapseItemProps,
+  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_Collapse = require("../collapse/Collapse");
+var import_use = require("@zartui/use");
+var import_use_expose = require("../composables/use-expose");
+var import_use_lazy_render = require("../composables/use-lazy-render");
+var import_Icon = __toESM(require("../icon/Icon"));
+const [name, bem] = (0, import_utils.createNamespace)("collapse-item");
+const collapseItemProps = (0, import_utils.extend)({}, {
+  name: import_utils.numericProp,
+  title: import_utils.numericProp,
+  lazyRender: import_utils.truthProp,
+  titleBackground: String,
+  color: String
+});
+var stdin_default = (0, import_vue2.defineComponent)({
+  name,
+  props: collapseItemProps,
+  setup(props, {
+    slots
+  }) {
+    const wrapperRef = (0, import_vue2.ref)();
+    const contentRef = (0, import_vue2.ref)();
+    const {
+      parent,
+      index
+    } = (0, import_use.useParent)(import_Collapse.COLLAPSE_KEY);
+    if (!parent) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("[ZartUI] <CollapseItem> must be a child component of <Collapse>.");
+      }
+      return;
+    }
+    const name2 = (0, import_vue2.computed)(() => {
+      var _a;
+      return (_a = props.name) != null ? _a : index.value;
+    });
+    const expanded = (0, import_vue2.computed)(() => parent.isExpanded(name2.value));
+    const show = (0, import_vue2.ref)(expanded.value);
+    const lazyRender = (0, import_use_lazy_render.useLazyRender)(() => show.value || !props.lazyRender);
+    const onTransitionEnd = () => {
+      if (!expanded.value) {
+        show.value = false;
+      } else if (wrapperRef.value) {
+        wrapperRef.value.style.height = "";
+      }
+    };
+    (0, import_vue2.watch)(expanded, (value, oldValue) => {
+      if (oldValue === null) {
+        return;
+      }
+      if (value) {
+        show.value = true;
+      }
+      const tick = value ? import_vue2.nextTick : import_use.raf;
+      tick(() => {
+        if (!contentRef.value || !wrapperRef.value) {
+          return;
+        }
+        const {
+          offsetHeight
+        } = contentRef.value;
+        if (offsetHeight) {
+          const contentHeight = `${offsetHeight}px`;
+          wrapperRef.value.style.height = value ? "0" : contentHeight;
+          (0, import_use.doubleRaf)(() => {
+            if (wrapperRef.value) {
+              wrapperRef.value.style.height = value ? contentHeight : "0";
+            }
+          });
+        } else {
+          onTransitionEnd();
+        }
+      });
+    });
+    const toggle = (newValue = !expanded.value) => {
+      parent.toggle(name2.value, newValue);
+    };
+    const onClickTitle = () => {
+      toggle();
+    };
+    const renderTitle = () => {
+      const {
+        titleBackground,
+        color
+      } = props;
+      return (0, import_vue.createVNode)("div", {
+        "class": [bem("title"), expanded.value ? import_utils.BORDER_BOTTOM : "", import_utils.HAPTICS_FEEDBACK],
+        "style": titleBackground ? `background:${titleBackground};color:#fff;` : "",
+        "onClick": onClickTitle
+      }, [(0, import_vue.createVNode)("span", {
+        "class": bem("bar", {
+          custom: titleBackground
+        }),
+        "style": color ? `background:${color};` : ""
+      }, null), (0, import_vue.createVNode)("span", {
+        "style": color ? `color:${color};` : "",
+        "class": bem("text", {
+          custom: titleBackground
+        })
+      }, [props.title]), (0, import_vue.createVNode)(import_Icon.default, {
+        "name": "keyboard-arrow-up",
+        "style": color ? `color:${color};` : "",
+        "class": bem("icon", {
+          expanded: expanded.value,
+          custom: titleBackground
+        })
+      }, null)]);
+    };
+    const renderContent = lazyRender(() => {
+      var _a;
+      return (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", {
+        "ref": wrapperRef,
+        "class": bem("wrapper"),
+        "onTransitionend": onTransitionEnd
+      }, [(0, import_vue.createVNode)("div", {
+        "ref": contentRef,
+        "class": bem("content")
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)])]), [[import_vue.vShow, show.value]]);
+    });
+    (0, import_use_expose.useExpose)({
+      toggle,
+      expanded,
+      itemName: name2
+    });
+    return () => (0, import_vue.createVNode)("div", {
+      "class": [bem()]
+    }, [renderTitle(), renderContent()]);
+  }
+});

package/lib/collapse-item/index.css

@@ -0,0 +1 @@
+:root{--zt-collapse-item-duration: var(--zt-duration-base);--zt-collapse-item-content-padding: var(--zt-padding-sm) var(--zt-padding-md);--zt-collapse-item-content-font-size: var(--zt-font-size-md);--zt-collapse-item-content-line-height: 20px;--zt-collapse-item-content-text-color: var(--zt-text-color);--zt-collapse-item-content-background: var(--zt-background);--zt-collapse-item-title-padding: 10px 16px;--zt-collapse-item-title-line-height: 24px;--zt-collapse-item-title-font-size: 16px}.zt-collapse-item{-webkit-user-select:none;user-select:none}.zt-collapse-item__title{position:relative;display:flex;align-items:center;background-color:var(--zt-background);padding:var(--zt-collapse-item-title-padding)}.zt-collapse-item__bar{position:absolute;left:0;width:4px;height:16px;background:var(--zt-blue)}.zt-collapse-item__bar--custom{background:var(--zt-white)}.zt-collapse-item__icon{font-size:var(--zt-collapse-item-title-line-height);color:var(--zt-text-color-a4);transition:transform var(--zt-collapse-item-duration)}.zt-collapse-item__icon--expanded{color:var(--zt-blue);transform:rotate(-180deg)}.zt-collapse-item__icon--custom{color:var(--zt-white)}.zt-collapse-item__text{flex:1;font-weight:600;font-size:var(--zt-collapse-item-title-font-size);color:var(--zt-text-color);line-height:var(--zt-collapse-item-title-line-height)}.zt-collapse-item__text--custom{color:var(--zt-white)}.zt-collapse-item__text--disabled{cursor:not-allowed}.zt-collapse-item__wrapper{overflow:hidden;transition:height var(--zt-collapse-item-duration) ease-in-out;will-change:height}.zt-collapse-item__content{color:var(--zt-collapse-item-content-text-color);font-size:var(--zt-collapse-item-content-font-size);line-height:var(--zt-collapse-item-content-line-height);background:var(--zt-collapse-item-content-background)}

package/lib/collapse-item/index.d.ts

@@ -0,0 +1,30 @@
+export declare const CollapseItem: import("../utils").WithInstall<import("vue").DefineComponent<{
+    name: (NumberConstructor | StringConstructor)[];
+    title: (NumberConstructor | StringConstructor)[];
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    titleBackground: StringConstructor;
+    color: StringConstructor;
+}, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    name: (NumberConstructor | StringConstructor)[];
+    title: (NumberConstructor | StringConstructor)[];
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    titleBackground: StringConstructor;
+    color: StringConstructor;
+}>>, {
+    lazyRender: boolean;
+}>>;
+export default CollapseItem;
+export { collapseItemProps } from './CollapseItem';
+export type { CollapseItemProps } from './CollapseItem';
+export type { CollapseItemInstance } from './types';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtCollapseItem: typeof CollapseItem;
+    }
+}

package/lib/collapse-item/index.js

@@ -0,0 +1,35 @@
+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, {
+  CollapseItem: () => CollapseItem,
+  collapseItemProps: () => import_CollapseItem2.collapseItemProps,
+  default: () => stdin_default
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_utils = require("../utils");
+var import_CollapseItem = __toESM(require("./CollapseItem"));
+var import_CollapseItem2 = require("./CollapseItem");
+const CollapseItem = (0, import_utils.withInstall)(import_CollapseItem.default);
+var stdin_default = CollapseItem;

package/lib/collapse-item/style/index.d.ts

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

package/lib/collapse-item/style/index.js

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

package/lib/collapse-item/types.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { CollapseItemProps } from './CollapseItem';
+export declare type CollapseItemExpose = {
+    toggle: (newValue?: boolean) => void;
+};
+export declare type CollapseItemInstance = ComponentPublicInstance<CollapseItemProps, CollapseItemExpose>;

package/lib/collapse-item/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/composables/use-route.d.ts

@@ -1,7 +1,4 @@
-/**
- * Vue Router support
- */
-import { type PropType, type ExtractPropTypes, type ComponentPublicInstance } from 'vue';
+import type { PropType, ExtractPropTypes, ComponentPublicInstance } from 'vue';
 import type { RouteLocationRaw } from 'vue-router';
 export declare const routeProps: {
     to: PropType<RouteLocationRaw>;

package/lib/config-provider/ConfigProvider.js

@@ -52,10 +52,10 @@ var stdin_default = (0, import_vue2.defineComponent)({
     });
     if (import_utils.inBrowser) {
       const addTheme = () => {
-        document.body.classList.add(`zt-theme-${props.theme}`);
+        document.documentElement.classList.add(`zt-theme-${props.theme}`);
       };
       const removeTheme = (theme = props.theme) => {
-        document.body.classList.remove(`zt-theme-${theme}`);
+        document.documentElement.classList.remove(`zt-theme-${theme}`);
       };
       (0, import_vue2.watch)(() => props.theme, (newVal, oldVal) => {
         if (oldVal) {

package/lib/date-time-picker/DateTimePicker.d.ts

@@ -0,0 +1,242 @@
+import { ExtractPropTypes } from 'vue';
+import { dateTimePickerProps } from './DateTimePickerWrapper';
+export declare type DateTimePickerColumnType = 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second';
+export declare type DateTimePickerProps = ExtractPropTypes<typeof dateTimePickerProps>;
+declare const _default: import("vue").DefineComponent<{
+    loading: BooleanConstructor;
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    optionHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    showToolbar: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showTitle: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    visibleOptionNum: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+} & {
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+} & {
+    modelValue: {
+        type: import("vue").PropType<string[]>;
+        default: () => string[];
+    };
+    filter: {
+        type: import("vue").PropType<(columnType: string, options: import("..").PickerOption[]) => import("..").PickerOption[]>;
+    };
+    formatter: {
+        type: import("vue").PropType<(type: string, option: import("..").PickerOption) => import("..").PickerOption>;
+        default: (type: string, option: import("..").PickerOption) => import("..").PickerOption;
+    };
+} & {
+    show: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    overlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    duration: (NumberConstructor | StringConstructor)[];
+    teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
+    lockScroll: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    beforeClose: import("vue").PropType<import("../utils").Interceptor>;
+    overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
+    overlayClass: import("vue").PropType<unknown>;
+    transitionAppear: BooleanConstructor;
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+} & {
+    range: BooleanConstructor;
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    columnsType: {
+        type: import("vue").PropType<DateTimePickerColumnType[]>;
+        default: () => string[];
+    };
+    columnsUnit: {
+        type: import("vue").PropType<string[]>;
+        default: () => string[];
+    };
+    minDate: {
+        type: DateConstructor;
+        default: () => Date;
+        validator: (val: unknown) => val is Date;
+    };
+    maxDate: {
+        type: DateConstructor;
+        default: () => Date;
+        validator: (val: unknown) => val is Date;
+    };
+    startValue: {
+        type: import("vue").PropType<string[]>;
+        default: () => string[];
+    };
+    endValue: {
+        type: import("vue").PropType<string[]>;
+        default: () => string[];
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "update:show" | "cancel" | "confirm" | "startChange" | "endChange" | "update:startValue" | "update:endValue")[], "update:modelValue" | "change" | "update:show" | "cancel" | "confirm" | "startChange" | "endChange" | "update:startValue" | "update:endValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    loading: BooleanConstructor;
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    optionHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    showToolbar: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showTitle: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    visibleOptionNum: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+} & {
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+} & {
+    modelValue: {
+        type: import("vue").PropType<string[]>;
+        default: () => string[];
+    };
+    filter: {
+        type: import("vue").PropType<(columnType: string, options: import("..").PickerOption[]) => import("..").PickerOption[]>;
+    };
+    formatter: {
+        type: import("vue").PropType<(type: string, option: import("..").PickerOption) => import("..").PickerOption>;
+        default: (type: string, option: import("..").PickerOption) => import("..").PickerOption;
+    };
+} & {
+    show: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    overlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    duration: (NumberConstructor | StringConstructor)[];
+    teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
+    lockScroll: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    beforeClose: import("vue").PropType<import("../utils").Interceptor>;
+    overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
+    overlayClass: import("vue").PropType<unknown>;
+    transitionAppear: BooleanConstructor;
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+} & {
+    range: BooleanConstructor;
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    columnsType: {
+        type: import("vue").PropType<DateTimePickerColumnType[]>;
+        default: () => string[];
+    };
+    columnsUnit: {
+        type: import("vue").PropType<string[]>;
+        default: () => string[];
+    };
+    minDate: {
+        type: DateConstructor;
+        default: () => Date;
+        validator: (val: unknown) => val is Date;
+    };
+    maxDate: {
+        type: DateConstructor;
+        default: () => Date;
+        validator: (val: unknown) => val is Date;
+    };
+    startValue: {
+        type: import("vue").PropType<string[]>;
+        default: () => string[];
+    };
+    endValue: {
+        type: import("vue").PropType<string[]>;
+        default: () => string[];
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+    onStartChange?: ((...args: any[]) => any) | undefined;
+    onEndChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:startValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:endValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    range: boolean;
+    title: string;
+    formatter: (type: string, option: import("..").PickerOption) => import("..").PickerOption;
+    modelValue: string[];
+    readonly: boolean;
+    show: boolean;
+    overlay: boolean;
+    lockScroll: boolean;
+    lazyRender: boolean;
+    transitionAppear: boolean;
+    closeOnClickOverlay: boolean;
+    popup: boolean;
+    loading: boolean;
+    showTitle: boolean;
+    minDate: Date;
+    maxDate: Date;
+    allowHtml: boolean;
+    optionHeight: string | number;
+    showToolbar: boolean;
+    swipeDuration: string | number;
+    visibleOptionNum: string | number;
+    columnsUnit: string[];
+    columnsType: DateTimePickerColumnType[];
+    startValue: string[];
+    endValue: string[];
+}>;
+export default _default;