zartui 3.0.1 → 3.0.3

package/es/time-picker/TimePickerColumn.mjs

@@ -0,0 +1,233 @@
+import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { defineComponent, ref, watchEffect } from "vue";
+import { clamp, createNamespace, makeArrayProp, makeNumberProp, makeRequiredProp, makeStringProp, numericProp, preventDefault } from "../utils/index.mjs";
+import { useTouch } from "../composables/use-touch.mjs";
+import { findIndexOfEnabledOption, getElementTranslateY } from "../picker/utils.mjs";
+import { useEventListener, useParent } from "@zartui/use";
+import { useExpose } from "../composables/use-expose.mjs";
+import Arrow from "./Arrow.mjs";
+const [name, bem] = createNamespace("time-picker-column");
+const TIME_PICKER_KEY = Symbol(name);
+const MOMENTUM_TIME = 300;
+const MOMENTUM_DISTANCE = 15;
+const DEFAULT_DURATION = 200;
+var stdin_default = defineComponent({
+  name,
+  props: {
+    value: numericProp,
+    unit: makeStringProp(""),
+    columnCount: makeNumberProp(1),
+    fields: makeRequiredProp(Object),
+    options: makeArrayProp(),
+    readonly: Boolean,
+    allowHtml: Boolean,
+    optionHeight: makeRequiredProp(Number),
+    swipeDuration: makeRequiredProp(numericProp)
+  },
+  emits: ["change", "clickOption"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    let moving;
+    let startOffset;
+    let touchStartTime;
+    let momentumOffset;
+    let transitionEndTrigger;
+    const root = ref();
+    const wrapper = ref();
+    const currentOffset = ref(0);
+    const currentDuration = ref(0);
+    const touch = useTouch();
+    const count = () => props.options.length;
+    const updateValueByIndex = (index) => {
+      const enabledIndex = findIndexOfEnabledOption(props.options, index);
+      const offset = -enabledIndex * props.optionHeight;
+      const trigger = () => {
+        const value = props.options[enabledIndex][props.fields.value];
+        if (value !== props.value) {
+          emit("change", value);
+        }
+      };
+      if (moving && offset !== currentOffset.value) {
+        transitionEndTrigger = trigger;
+      } else {
+        trigger();
+      }
+      currentOffset.value = offset;
+    };
+    const onClickOption = (index) => {
+      if (moving || props.readonly) {
+        return;
+      }
+      transitionEndTrigger = null;
+      currentDuration.value = DEFAULT_DURATION;
+      updateValueByIndex(index);
+      emit("clickOption", props.options[index]);
+    };
+    const getIndexByOffset = (offset) => clamp(Math.round(-offset / props.optionHeight), 0, count() - 1);
+    const momentum = (distance, duration) => {
+      const speed = Math.abs(distance / duration);
+      distance = currentOffset.value + speed / 15e-4 * (distance < 0 ? -1 : 1);
+      const index = getIndexByOffset(distance);
+      currentDuration.value = +props.swipeDuration;
+      updateValueByIndex(index);
+    };
+    const stopMomentum = () => {
+      moving = false;
+      currentDuration.value = 0;
+      if (transitionEndTrigger) {
+        transitionEndTrigger();
+        transitionEndTrigger = null;
+      }
+    };
+    const onTouchStart = (event) => {
+      if (props.readonly) {
+        return;
+      }
+      touch.start(event);
+      if (moving) {
+        const translateY = getElementTranslateY(wrapper.value);
+        currentOffset.value = Math.min(0, translateY);
+      }
+      currentDuration.value = 0;
+      startOffset = currentOffset.value;
+      touchStartTime = Date.now();
+      momentumOffset = startOffset;
+      transitionEndTrigger = null;
+    };
+    const onTouchMove = (event) => {
+      if (props.readonly) {
+        return;
+      }
+      touch.move(event);
+      if (touch.isVertical()) {
+        moving = true;
+        preventDefault(event, true);
+      }
+      currentOffset.value = clamp(startOffset + touch.deltaY.value, -(count() * props.optionHeight), props.optionHeight);
+      const now = Date.now();
+      if (now - touchStartTime > MOMENTUM_TIME) {
+        touchStartTime = now;
+        momentumOffset = currentOffset.value;
+      }
+    };
+    const onTouchEnd = () => {
+      if (props.readonly) {
+        return;
+      }
+      const distance = currentOffset.value - momentumOffset;
+      const duration = Date.now() - touchStartTime;
+      const startMomentum = duration < MOMENTUM_TIME && Math.abs(distance) > MOMENTUM_DISTANCE;
+      if (startMomentum) {
+        momentum(distance, duration);
+        return;
+      }
+      const index = getIndexByOffset(currentOffset.value);
+      currentDuration.value = DEFAULT_DURATION;
+      updateValueByIndex(index);
+      setTimeout(() => {
+        moving = false;
+      }, 0);
+    };
+    const renderOptions = () => {
+      const optionStyle = {
+        height: `${props.optionHeight}px`
+      };
+      return props.options.map((option, index) => {
+        const text = option[props.fields.text];
+        const {
+          disabled
+        } = option;
+        const value = option[props.fields.value];
+        const data = {
+          role: "button",
+          style: optionStyle,
+          tabindex: disabled ? -1 : 0,
+          class: [bem("item", {
+            disabled,
+            selected: value === props.value
+          }), option.className],
+          onClick: () => onClickOption(index)
+        };
+        const childData = {
+          class: "zt-ellipsis",
+          [props.allowHtml ? "innerHTML" : "textContent"]: text
+        };
+        const renderOption = () => {
+          if (props.unit) {
+            return _createVNode(_Fragment, null, [_createVNode("div", childData, null), _createVNode("span", {
+              "class": [bem("unit-text"), "zt-ellipsis"],
+              "style": "visibility: hidden"
+            }, [props.unit])]);
+          }
+          return _createVNode("div", childData, null);
+        };
+        return _createVNode("li", data, [slots.option ? slots.option(option, props.unit) : renderOption()]);
+      });
+    };
+    const renderUnit = () => {
+      if (props.unit) {
+        const childData = {
+          class: "zt-ellipsis",
+          [props.allowHtml ? "innerHTML" : "textContent"]: props.value
+        };
+        return _createVNode("div", {
+          "class": bem("unit")
+        }, [_createVNode("span", _mergeProps({
+          "style": "visibility: hidden"
+        }, childData), null), _createVNode("span", {
+          "class": [bem("unit-text"), "zt-ellipsis"]
+        }, [props.unit])]);
+      }
+    };
+    const onArrowClick = (isUp) => {
+      const index = getIndexByOffset(currentOffset.value);
+      currentDuration.value = DEFAULT_DURATION;
+      updateValueByIndex(isUp ? index - 1 : index + 1);
+    };
+    const renderArrow = () => [_createVNode(Arrow, {
+      "class": bem("arrow-top"),
+      "onClick": () => onArrowClick(true)
+    }, null), _createVNode(Arrow, {
+      "class": bem("arrow-bottom"),
+      "onClick": () => onArrowClick(false)
+    }, null)];
+    useParent(TIME_PICKER_KEY);
+    useExpose({
+      stopMomentum
+    });
+    watchEffect(() => {
+      const index = props.options.findIndex((option) => option[props.fields.value] === props.value);
+      const enabledIndex = findIndexOfEnabledOption(props.options, index);
+      currentOffset.value = -enabledIndex * props.optionHeight;
+    });
+    useEventListener("touchmove", onTouchMove, {
+      target: root
+    });
+    const columnStyle = {
+      width: props.columnCount === 1 ? "40%" : "20%"
+    };
+    return () => _createVNode("div", {
+      "ref": root,
+      "style": columnStyle,
+      "class": bem(),
+      "onTouchstartPassive": onTouchStart,
+      "onTouchend": onTouchEnd,
+      "onTouchcancel": onTouchEnd
+    }, [renderUnit(), _createVNode("ul", {
+      "ref": wrapper,
+      "style": {
+        transform: `translate3d(0, ${currentOffset.value}px, 0)`,
+        transitionDuration: `${currentDuration.value}ms`,
+        transitionProperty: currentDuration.value ? "all" : "none"
+      },
+      "class": bem("wrapper"),
+      "onTransitionend": stopMomentum
+    }, [renderOptions()]), renderArrow()]);
+  }
+});
+export {
+  TIME_PICKER_KEY,
+  stdin_default as default
+};

package/es/time-picker/index.css

@@ -0,0 +1 @@
+:root{--zt-time-picker-cancel-margin: 8px 4px 8px 16px;--zt-time-picker-confirm-margin: 8px 16px 8px 4px;--zt-time-picker-title-height: 44px;--zt-time-picker-title-border-radius: 16px 16px 0 0;--zt-time-picker-frame-background-color: var(--zt-gray-a04);--zt-time-picker-cancel-background-color: var(--zt-white);--zt-time-picker-title-text-color: var(--zt-gray-a4);--zt-time-picker-background: var(--zt-background-2);--zt-time-picker-toolbar-height: 60px;--zt-time-picker-title-font-size: var(--zt-font-size-md);--zt-time-picker-title-line-height: var(--zt-line-height-md);--zt-time-picker-action-padding: 0 var(--zt-padding-md);--zt-time-picker-action-font-size: var(--zt-font-size-lg);--zt-time-picker-confirm-action-color: var(--zt-white);--zt-time-picker-cancel-action-color: var(--zt-text-color);--zt-time-picker-option-font-size: 24px;--zt-time-picker-option-radius: 8px;--zt-time-picker-option-padding: 0 var(--zt-padding-base);--zt-time-picker-option-text-color: var(--zt-text-color);--zt-time-picker-option-disabled-opacity: .3;--zt-time-picker-loading-icon-color: var(--zt-primary-color);--zt-time-picker-loading-mask-color: rgba(255, 255, 255, .9);--zt-time-picker-mask-color: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)), linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4));--zt-time-picker-unit-font-size: var(--zt-font-size-md)}.zt-theme-dark{--zt-time-picker-mask-color: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1)), linear-gradient(0deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1))}.zt-time-picker{position:relative;background:var(--zt-time-picker-background);-webkit-user-select:none;user-select:none}.zt-time-picker__toolbar{display:flex;align-items:center;justify-content:space-between;height:var(--zt-time-picker-toolbar-height)}.zt-time-picker__cancel,.zt-time-picker__confirm{width:50%}.zt-time-picker__cancel{background:#ffffff;margin:var(--zt-time-picker-cancel-margin)}.zt-time-picker__confirm{margin:var(--zt-time-picker-confirm-margin)}.zt-time-picker__title{display:flex;justify-content:center;align-items:center;width:100%;height:var(--zt-time-picker-title-height);border-radius:var(--zt-time-picker-title-border-radius);font-size:var(--zt-time-picker-title-font-size);background:#ffffff;color:var(--zt-time-picker-title-text-color)}.zt-time-picker__columns{position:relative;display:flex;cursor:-webkit-grab;cursor:grab;padding:16px 0;justify-content:space-evenly}.zt-time-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-time-picker-loading-icon-color);background:var(--zt-time-picker-loading-mask-color)}.zt-time-picker__frame{position:absolute;top:50%;z-index:2;transform:translateY(-50%);pointer-events:none;width:100%;background:var(--zt-time-picker-frame-background-color)}.zt-time-picker__mask{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-image:var(--zt-time-picker-mask-color);background-repeat:no-repeat;background-position:top,bottom;transform:translateZ(0);pointer-events:none}.zt-time-picker__separator{position:absolute;display:flex;align-items:center;width:100%;height:100%;top:0}.zt-time-picker__colon{position:relative}.zt-time-picker__colon:only-child{left:50%}.zt-time-picker__colon:not(:only-child):first-child{left:35%}.zt-time-picker__colon:not(:only-child):last-child{left:65%}.zt-time-picker__colon:before{position:absolute;content:" ";width:6px;height:6px;border-radius:50%;background:var(--zt-gray-default);left:calc(50% - 3px);top:calc(50% - 9px)}.zt-time-picker__colon:after{position:absolute;content:" ";width:6px;height:6px;border-radius:50%;background:var(--zt-gray-default);left:calc(50% - 3px);top:calc(50% + 3px)}.zt-time-picker-column{position:relative;overflow:hidden;font-size:var(--zt-time-picker-option-font-size);background:var(--zt-gray-a04);border-radius:var(--zt-time-picker-option-radius)}.zt-time-picker-column__wrapper{transition-timing-function:cubic-bezier(.23,1,.68,1)}.zt-time-picker-column__item{display:flex;align-items:center;justify-content:center;padding:var(--zt-time-picker-option-padding);color:var(--zt-time-picker-option-text-color)}.zt-time-picker-column__item--disabled{cursor:not-allowed;opacity:var(--zt-time-picker-option-disabled-opacity)}.zt-time-picker-column__unit{position:absolute;display:flex;align-items:center;justify-content:center;color:var(--zt-time-picker-option-text-color);font-size:var(--zt-time-picker-option-font-size);width:100%;height:100%}.zt-time-picker-column__unit-text{margin:0 4px;font-size:var(--zt-time-picker-unit-font-size);font-weight:700}.zt-time-picker-column__arrow-top{width:16px;height:6px;position:absolute;top:8px;left:calc(50% - 8px)}.zt-time-picker-column__arrow-bottom{width:16px;height:6px;transform:rotate(180deg);position:absolute;bottom:8px;left:calc(50% - 8px)}

package/es/time-picker/index.d.ts

@@ -0,0 +1,205 @@
+import { TimePickerProps } from './TimePicker';
+export declare const TimePicker: import("../utils").WithInstall<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;
+    };
+} & {
+    minHour: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxHour: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    minMinute: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxMinute: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    minSecond: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxSecond: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    optionHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    visibleOptionNum: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    columnsUnit: {
+        type: import("vue").PropType<string[]>;
+        default: () => string[];
+    };
+    columnsFieldNames: import("vue").PropType<import("..").PickerFieldNames>;
+    columnsType: {
+        type: import("vue").PropType<import("./TimePicker").TimePickerColumnType[]>;
+        default: () => string[];
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "clickOption")[], "update:modelValue" | "change" | "clickOption", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").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;
+    };
+} & {
+    minHour: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxHour: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    minMinute: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxMinute: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    minSecond: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    maxSecond: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    optionHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    visibleOptionNum: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    columnsUnit: {
+        type: import("vue").PropType<string[]>;
+        default: () => string[];
+    };
+    columnsFieldNames: import("vue").PropType<import("..").PickerFieldNames>;
+    columnsType: {
+        type: import("vue").PropType<import("./TimePicker").TimePickerColumnType[]>;
+        default: () => string[];
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClickOption?: ((...args: any[]) => any) | undefined;
+}, {
+    title: string;
+    formatter: (type: string, option: import("..").PickerOption) => import("..").PickerOption;
+    modelValue: string[];
+    readonly: boolean;
+    loading: boolean;
+    showTitle: boolean;
+    allowHtml: boolean;
+    optionHeight: string | number;
+    showToolbar: boolean;
+    swipeDuration: string | number;
+    visibleOptionNum: string | number;
+    columnsUnit: string[];
+    minHour: string | number;
+    maxHour: string | number;
+    minMinute: string | number;
+    maxMinute: string | number;
+    minSecond: string | number;
+    maxSecond: string | number;
+    columnsType: import("./TimePicker").TimePickerColumnType[];
+}>>;
+export default TimePicker;
+export { timePickerProps } from './TimePicker';
+export type { TimePickerProps };
+export type { TimePickerColumnType } from './TimePicker';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtTimePicker: typeof TimePicker;
+    }
+}

package/es/time-picker/index.mjs

@@ -0,0 +1,10 @@
+import { withInstall } from "../utils/index.mjs";
+import _TimePicker from "./TimePicker.mjs";
+const TimePicker = withInstall(_TimePicker);
+var stdin_default = TimePicker;
+import { timePickerProps } from "./TimePicker.mjs";
+export {
+  TimePicker,
+  stdin_default as default,
+  timePickerProps
+};

package/es/time-picker/style/index.d.ts

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

package/es/time-picker/style/index.mjs

@@ -0,0 +1,11 @@
+import "../../style/base.css";
+import "../../badge/index.css";
+import "../../icon/index.css";
+import "../../overlay/index.css";
+import "../../popup/index.css";
+import "../../loading/index.css";
+import "../../button/index.css";
+import "../../divider/index.css";
+import "../../picker/index.css";
+import "../../date-time-picker/index.css";
+import "../index.css";

package/es/toast/Toast.d.ts

@@ -1,4 +1,4 @@
-import { PropType, CSSProperties, ExtractPropTypes } from 'vue';
+import type { PropType, CSSProperties, ExtractPropTypes } from 'vue';
 import { LoadingType } from '../loading';
 import type { ToastType, ToastPosition } from './types';
 declare const toastProps: {
@@ -101,8 +101,8 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     type: ToastType;
     position: ToastPosition;
-    overlay: boolean;
     show: boolean;
+    overlay: boolean;
     duration: number;
     closeOnClickOverlay: boolean;
     transition: string;

package/es/toast/index.css

@@ -1 +1 @@
-body{--zt-toast-max-width: 70%;--zt-toast-font-size: var(--zt-font-size-md);--zt-toast-text-color: var(--zt-white);--zt-toast-loading-icon-color: var(--zt-white);--zt-toast-line-height: var(--zt-line-height-md);--zt-toast-radius: var(--zt-radius-lg);--zt-toast-background: rgba(45, 75, 115, .8);--zt-toast-icon-size: 36px;--zt-toast-text-min-width: 96px;--zt-toast-text-padding: var(--zt-padding-xs) var(--zt-padding-sm);--zt-toast-default-padding: var(--zt-padding-md);--zt-toast-default-width: 88px;--zt-toast-default-min-height: 84px;--zt-toast-position-top-distance: 20%;--zt-toast-position-bottom-distance: 20%}.zt-toast{display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:content-box;transition:all var(--zt-duration-fast);width:var(--zt-toast-default-width);max-width:var(--zt-toast-max-width);min-height:var(--zt-toast-default-min-height);padding:var(--zt-toast-default-padding);color:var(--zt-toast-text-color);font-size:var(--zt-toast-font-size);line-height:var(--zt-toast-line-height);white-space:pre-wrap;text-align:center;word-break:break-all;background:var(--zt-toast-background);border-radius:var(--zt-toast-radius)}.zt-toast--unclickable{overflow:hidden;cursor:not-allowed}.zt-toast--unclickable *{pointer-events:none}.zt-toast--text,.zt-toast--html{width:-webkit-fit-content;width:fit-content;min-width:var(--zt-toast-text-min-width);min-height:0;padding:var(--zt-toast-text-padding)}.zt-toast--text .zt-toast__text,.zt-toast--html .zt-toast__text{margin-top:0}.zt-toast--top{top:var(--zt-toast-position-top-distance)}.zt-toast--bottom{top:auto;bottom:var(--zt-toast-position-bottom-distance)}.zt-toast__icon{font-size:var(--zt-toast-icon-size)}.zt-toast__loading{padding:var(--zt-padding-base);color:var(--zt-toast-loading-icon-color)}.zt-toast__text{margin-top:var(--zt-padding-xs)}
+:root{--zt-toast-max-width: 70%;--zt-toast-font-size: var(--zt-font-size-md);--zt-toast-text-color: var(--zt-white);--zt-toast-loading-icon-color: var(--zt-white);--zt-toast-line-height: var(--zt-line-height-md);--zt-toast-radius: var(--zt-radius-lg);--zt-toast-background: rgba(45, 75, 115, .8);--zt-toast-icon-size: 36px;--zt-toast-text-min-width: 96px;--zt-toast-text-padding: var(--zt-padding-xs) var(--zt-padding-sm);--zt-toast-default-padding: var(--zt-padding-md);--zt-toast-default-width: 88px;--zt-toast-default-min-height: 84px;--zt-toast-position-top-distance: 20%;--zt-toast-position-bottom-distance: 20%}.zt-toast{display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:content-box;transition:all var(--zt-duration-fast);width:var(--zt-toast-default-width);max-width:var(--zt-toast-max-width);min-height:var(--zt-toast-default-min-height);padding:var(--zt-toast-default-padding);color:var(--zt-toast-text-color);font-size:var(--zt-toast-font-size);line-height:var(--zt-toast-line-height);white-space:pre-wrap;text-align:center;word-break:break-all;background:var(--zt-toast-background);border-radius:var(--zt-toast-radius)}.zt-toast--unclickable{overflow:hidden;cursor:not-allowed}.zt-toast--unclickable *{pointer-events:none}.zt-toast--text,.zt-toast--html{width:-webkit-fit-content;width:fit-content;min-width:var(--zt-toast-text-min-width);min-height:0;padding:var(--zt-toast-text-padding)}.zt-toast--text .zt-toast__text,.zt-toast--html .zt-toast__text{margin-top:0}.zt-toast--top{top:var(--zt-toast-position-top-distance)}.zt-toast--bottom{top:auto;bottom:var(--zt-toast-position-bottom-distance)}.zt-toast__icon{font-size:var(--zt-toast-icon-size)}.zt-toast__loading{padding:var(--zt-padding-base);color:var(--zt-toast-loading-icon-color)}.zt-toast__text{margin-top:var(--zt-padding-xs)}

package/es/toast/index.d.ts

@@ -65,8 +65,8 @@ export declare const Toast: import("../utils").WithInstall<import("vue").DefineC
 }, {
     type: import("./types").ToastType;
     position: import("./types").ToastPosition;
-    overlay: boolean;
     show: boolean;
+    overlay: boolean;
     duration: number;
     closeOnClickOverlay: boolean;
     transition: string;
@@ -77,3 +77,8 @@ export default Toast;
 export { showToast, closeToast, showFailToast, showLoadingToast, showSuccessToast, allowMultipleToast, setToastDefaultOptions, resetToastDefaultOptions, } from './function-call';
 export type { ToastProps } from './Toast';
 export type { ToastType, ToastOptions, ToastPosition } from './types';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtToast: typeof Toast;
+    }
+}

package/es/toast/style/index.mjs

@@ -1,7 +1,7 @@
 import "../../style/base.css";
 import "../../badge/index.css";
 import "../../icon/index.css";
-import "../../loading/index.css";
 import "../../overlay/index.css";
 import "../../popup/index.css";
+import "../../loading/index.css";
 import "../index.css";