zartui 3.0.1 → 3.0.3

package/es/cascader/Cascader.d.ts

@@ -0,0 +1,171 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { CascaderOption, CascaderFieldNames } from './types';
+import { PopupPosition } from '../popup';
+export declare const cascaderProps: {
+    title: StringConstructor;
+    show: BooleanConstructor;
+    round: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    options: {
+        type: PropType<CascaderOption[]>;
+        default: () => CascaderOption[];
+    };
+    closeable: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeable: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    teleport: {
+        type: PropType<string>;
+        default: string;
+    };
+    position: {
+        type: PropType<PopupPosition>;
+        default: PopupPosition;
+    };
+    showHeader: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    modelValue: (NumberConstructor | StringConstructor)[];
+    fieldNames: PropType<CascaderFieldNames>;
+    placeholder: StringConstructor;
+    activeColor: StringConstructor;
+    safeAreaInsetTop: BooleanConstructor;
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+};
+export declare type CascaderProps = ExtractPropTypes<typeof cascaderProps>;
+declare const _default: import("vue").DefineComponent<{
+    title: StringConstructor;
+    show: BooleanConstructor;
+    round: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    options: {
+        type: PropType<CascaderOption[]>;
+        default: () => CascaderOption[];
+    };
+    closeable: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeable: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    teleport: {
+        type: PropType<string>;
+        default: string;
+    };
+    position: {
+        type: PropType<PopupPosition>;
+        default: PopupPosition;
+    };
+    showHeader: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    modelValue: (NumberConstructor | StringConstructor)[];
+    fieldNames: PropType<CascaderFieldNames>;
+    placeholder: StringConstructor;
+    activeColor: StringConstructor;
+    safeAreaInsetTop: BooleanConstructor;
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "update:show" | "cancel" | "clickTab" | "finish")[], "update:modelValue" | "change" | "update:show" | "cancel" | "clickTab" | "finish", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    title: StringConstructor;
+    show: BooleanConstructor;
+    round: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    options: {
+        type: PropType<CascaderOption[]>;
+        default: () => CascaderOption[];
+    };
+    closeable: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeable: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    teleport: {
+        type: PropType<string>;
+        default: string;
+    };
+    position: {
+        type: PropType<PopupPosition>;
+        default: PopupPosition;
+    };
+    showHeader: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    modelValue: (NumberConstructor | StringConstructor)[];
+    fieldNames: PropType<CascaderFieldNames>;
+    placeholder: StringConstructor;
+    activeColor: StringConstructor;
+    safeAreaInsetTop: BooleanConstructor;
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onClickTab?: ((...args: any[]) => any) | undefined;
+    onFinish?: ((...args: any[]) => any) | undefined;
+}, {
+    position: PopupPosition;
+    show: boolean;
+    teleport: string;
+    closeOnClickOverlay: boolean;
+    round: boolean;
+    closeable: boolean;
+    closeOnPopstate: boolean;
+    safeAreaInsetTop: boolean;
+    popup: boolean;
+    swipeable: boolean;
+    options: CascaderOption[];
+    showHeader: boolean;
+}>;
+export default _default;

package/es/cascader/Cascader.mjs

@@ -0,0 +1,284 @@
+import { createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
+import { ref, watch, nextTick, defineComponent } from "vue";
+import { extend, truthProp, numericProp, makeArrayProp, makeStringProp, createNamespace, isSameValue } from "../utils/index.mjs";
+import { Tab } from "../tab/index.mjs";
+import { Tabs } from "../tabs/index.mjs";
+import { Icon } from "../icon/index.mjs";
+import { Divider } from "../divider/index.mjs";
+import Button from "../button/Button.mjs";
+import { Popup } from "../popup/index.mjs";
+const [name, bem, t] = createNamespace("cascader");
+const cascaderProps = {
+  title: String,
+  show: Boolean,
+  round: truthProp,
+  closeOnPopstate: truthProp,
+  options: makeArrayProp(),
+  closeable: truthProp,
+  swipeable: truthProp,
+  popup: truthProp,
+  teleport: makeStringProp("body"),
+  position: makeStringProp("bottom"),
+  showHeader: truthProp,
+  modelValue: numericProp,
+  fieldNames: Object,
+  placeholder: String,
+  activeColor: String,
+  safeAreaInsetTop: Boolean,
+  closeOnClickOverlay: truthProp
+};
+var stdin_default = defineComponent({
+  name,
+  props: cascaderProps,
+  emits: ["change", "finish", "clickTab", "update:modelValue", "update:show", "cancel"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const tabs = ref([]);
+    const activeTab = ref(0);
+    const currentValues = ref(props.modelValue);
+    const currentShow = ref(props.show);
+    const {
+      text: textKey,
+      value: valueKey,
+      children: childrenKey
+    } = extend({
+      text: "text",
+      value: "value",
+      children: "children"
+    }, props.fieldNames);
+    const getSelectedOptionsByValue = (options, value) => {
+      for (const option of options) {
+        if (option[valueKey] === value) {
+          return [option];
+        }
+        if (option[childrenKey]) {
+          const selectedOptions = getSelectedOptionsByValue(option[childrenKey], value);
+          if (selectedOptions) {
+            return [option, ...selectedOptions];
+          }
+        }
+      }
+    };
+    const updateTabs = () => {
+      const {
+        options,
+        modelValue
+      } = props;
+      if (modelValue !== void 0) {
+        const selectedOptions = getSelectedOptionsByValue(options, modelValue);
+        if (selectedOptions) {
+          let optionsCursor = options;
+          tabs.value = selectedOptions.map((option) => {
+            const tab = {
+              options: optionsCursor,
+              selected: option
+            };
+            const next = optionsCursor.find((item) => item[valueKey] === option[valueKey]);
+            if (next) {
+              optionsCursor = next[childrenKey];
+            }
+            return tab;
+          });
+          if (optionsCursor) {
+            tabs.value.push({
+              options: optionsCursor,
+              selected: null
+            });
+          }
+          nextTick(() => {
+            activeTab.value = tabs.value.length - 1;
+          });
+          return;
+        }
+      }
+      tabs.value = [{
+        options,
+        selected: null
+      }];
+    };
+    const onSelect = (option, tabIndex) => {
+      if (option.disabled) {
+        return;
+      }
+      tabs.value[tabIndex].selected = option;
+      if (tabs.value.length > tabIndex + 1) {
+        tabs.value = tabs.value.slice(0, tabIndex + 1);
+      }
+      if (option[childrenKey]) {
+        const nextTab = {
+          options: option[childrenKey],
+          selected: null
+        };
+        if (tabs.value[tabIndex + 1]) {
+          tabs.value[tabIndex + 1] = nextTab;
+        } else {
+          tabs.value.push(nextTab);
+        }
+        nextTick(() => {
+          activeTab.value++;
+        });
+      }
+      const selectedOptions = tabs.value.map((tab) => tab.selected).filter(Boolean);
+      emit("update:modelValue", option[valueKey]);
+      const params = {
+        value: option[valueKey],
+        tabIndex,
+        selectedOptions
+      };
+      emit("change", params);
+      if (!option[childrenKey]) {
+        emit("finish", params);
+      }
+    };
+    const onCancel = () => {
+      emit("update:show", false);
+      emit("cancel");
+    };
+    const updateShow = (value) => emit("update:show", value);
+    const onClickTab = ({
+      name: name2,
+      title
+    }) => emit("clickTab", name2, title);
+    const renderHeader = () => _createVNode("div", {
+      "class": bem("header")
+    }, [_createVNode("h2", {
+      "class": bem("title")
+    }, [slots.title ? slots.title() : props.title])]);
+    const renderOption = (option, selectedOption, tabIndex) => {
+      const {
+        disabled
+      } = option;
+      const selected = !!(selectedOption && option[valueKey] === selectedOption[valueKey]);
+      const color = option.color || (selected ? props.activeColor : void 0);
+      const Text = slots.option ? slots.option({
+        option,
+        selected
+      }) : _createVNode("span", null, [option[textKey]]);
+      return _createVNode("li", {
+        "role": "menuitemradio",
+        "class": [bem("option", {
+          selected,
+          disabled
+        }), option.className],
+        "style": {
+          color
+        },
+        "tabindex": disabled ? void 0 : selected ? 0 : -1,
+        "aria-checked": selected,
+        "aria-disabled": disabled || void 0,
+        "onClick": () => onSelect(option, tabIndex)
+      }, [Text, selected ? _createVNode(Icon, {
+        "name": "success",
+        "class": bem("selected-icon")
+      }, null) : null]);
+    };
+    const renderOptions = (options, selectedOption, tabIndex) => _createVNode("ul", {
+      "role": "menu",
+      "class": bem("options")
+    }, [options.map((option) => renderOption(option, selectedOption, tabIndex))]);
+    const renderDivider = () => _createVNode(Divider, {
+      "style": {
+        margin: 0
+      }
+    }, null);
+    const renderTab = (tab, tabIndex) => {
+      const {
+        options,
+        selected
+      } = tab;
+      const placeholder = props.placeholder || t("vanCascader.select");
+      const title = selected ? selected[textKey] : placeholder;
+      return _createVNode(Tab, {
+        "title": title,
+        "titleClass": bem("tab", {
+          unselected: !selected
+        })
+      }, {
+        default: () => {
+          var _a, _b;
+          return [(_a = slots["options-top"]) == null ? void 0 : _a.call(slots, {
+            tabIndex
+          }), renderOptions(options, selected, tabIndex), (_b = slots["options-bottom"]) == null ? void 0 : _b.call(slots, {
+            tabIndex
+          })];
+        }
+      });
+    };
+    const renderTabs = () => _createVNode(Tabs, {
+      "active": activeTab.value,
+      "onUpdate:active": ($event) => activeTab.value = $event,
+      "animated": true,
+      "class": bem("tabs"),
+      "color": props.activeColor,
+      "swipeable": props.swipeable,
+      "onClickTab": onClickTab
+    }, {
+      default: () => [tabs.value.map(renderTab)]
+    });
+    const renderMenu = () => _createVNode(Button, {
+      "class": bem("cancel"),
+      "background-color": "rgba(45, 75, 115, 0.04)",
+      "color": "#2D4B73",
+      "onClick": onCancel
+    }, {
+      default: () => [_createTextVNode("\u53D6\u6D88")]
+    });
+    updateTabs();
+    const onOpen = () => {
+      if (!isSameValue(currentValues.value, props.modelValue)) {
+        currentValues.value = props.modelValue;
+      }
+    };
+    watch(currentShow, (newValue) => {
+      if (newValue !== props.show) {
+        emit("update:show", newValue);
+      }
+    });
+    watch(() => props.show, (newValue) => {
+      if (newValue !== currentShow.value) {
+        currentShow.value = newValue;
+      }
+    });
+    watch(() => props.options, updateTabs, {
+      deep: true
+    });
+    watch(() => props.modelValue, (value) => {
+      if (value !== void 0) {
+        const values = tabs.value.map((tab) => {
+          var _a;
+          return (_a = tab.selected) == null ? void 0 : _a[valueKey];
+        });
+        if (values.includes(value)) {
+          return;
+        }
+      }
+      updateTabs();
+    });
+    const renderCascade = () => _createVNode("div", {
+      "class": bem()
+    }, [renderHeader(), renderDivider(), renderTabs(), props.popup ? renderDivider() : "", props.popup ? renderMenu() : ""]);
+    return () => {
+      if (props.popup) {
+        return _createVNode(Popup, {
+          "show": currentShow.value,
+          "onUpdate:show": [($event) => currentShow.value = $event, updateShow],
+          "onOpen": onOpen,
+          "round": props.round,
+          "position": props.position,
+          "teleport": props.teleport,
+          "closeOnPopstate": props.closeOnPopstate,
+          "safeAreaInsetTop": props.safeAreaInsetTop
+        }, {
+          default: renderCascade
+        });
+      }
+      return renderCascade();
+    };
+  }
+});
+export {
+  cascaderProps,
+  stdin_default as default
+};

package/es/cascader/index.css

@@ -0,0 +1 @@
+:root{--zt-cascader-header-height: 44px;--zt-cascader-header-padding: 0 var(--zt-padding-sm);--zt-cascader-title-font-size: var(--zt-font-size-md);--zt-cascader-title-line-height: 44px;--zt-cascader-title-color: var(--zt-gray-a4);--zt-cascader-close-icon-size: 24px;--zt-cascader-close-icon-color: var(--zt-gray-5);--zt-cascader-selected-icon-size: 18px;--zt-cascader-tabs-height: 44px;--zt-cascader-active-color: var(--zt-primary-color);--zt-cascader-height: 75.26vh;--zt-cascader-option-disabled-color: var(--zt-text-color-3);--zt-cascader-tab-color: var(--zt-text-color);--zt-cascader-unselected-tab-color: var(--zt-gray-a4);--zt-cascader-tabs-margin: 0 8px;--zt-cascader-tabs-padding: 8px;--zt-cascader-tabs-line-height: 44px;--zt-cascader-option-disabled-active-color: rgba(0, 0, 0, .04);--zt-cascader-cancel-margin: 8px 16px;--zt-cascader-cancel-background: rgba(45, 75, 115, .04);--zt-cascader-cancel-width:calc(100% - 32px);--zt-cascader-cancel-border-radius: 20.5px}.zt-cascader{display:flex;justify-content:space-between;flex-direction:column;height:var(--zt-cascader-height)}.zt-cascader__header{display:flex;align-items:center;justify-content:center;flex-shrink:0;height:var(--zt-cascader-header-height);padding:var(--zt-cascader-header-padding)}.zt-cascader__title{font-size:var(--zt-cascader-title-font-size);line-height:var(--zt-cascader-title-line-height);color:var(--zt-cascader-title-color)}.zt-cascader__close-icon{color:var(--zt-cascader-close-icon-color);font-size:var(--zt-cascader-close-icon-size)}.zt-cascader__tabs{flex:1}.zt-cascader__tabs .zt-tab{flex:none;margin:var(--zt-cascader-tabs-margin);padding:0}.zt-cascader__tabs .zt-tabs__wrap{position:relative;height:var(--zt-cascader-tabs-height)}.zt-cascader__tabs .zt-tabs__wrap: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-cascader__tabs .zt-tabs__nav--complete{padding-right:var(--zt-cascader-tabs-padding);padding-left:var(--zt-cascader-tabs-padding)}.zt-cascader__tab{color:var(--zt-cascader-tab-color);font-weight:var(--zt-font-bold);line-height:var(--zt-cascader-tabs-line-height);font-size:var(--zt-font-size-md)}.zt-cascader__tab--unselected{color:var(--zt-cascader-unselected-tab-color);font-weight:400}.zt-cascader__option{display:flex;align-items:center;justify-content:space-between;color:var(--zt-gray-default);padding:0 var(--zt-padding-md);font-size:var(--zt-font-size-md);line-height:var(--zt-cascader-tabs-line-height);cursor:pointer;font-weight:400}.zt-cascader__option:active{background-color:var(--zt-active-color)}.zt-cascader__option--selected{color:var(--zt-cascader-active-color);font-weight:var(--zt-font-bold)}.zt-cascader__option--disabled{color:var(--zt-cascader-option-disabled-color);cursor:not-allowed}.zt-cascader__option--disabled:active{background-color:var(--zt-cascader-option-disabled-active-color)}.zt-cascader__selected-icon{font-size:var(--zt-cascader-selected-icon-size)}.zt-cascader__options{box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch}.zt-cascader .zt-tabs__nav{background:var(--zt-white)}.zt-cascader__cancel{margin:var(--zt-cascader-cancel-margin);width:var(--zt-cascader-cancel-width);background:var(--zt-cascader-cancel-background);border-radius:var(--zt-cascader-cancel-border-radius);border:0}

package/es/cascader/index.d.ts

@@ -0,0 +1,126 @@
+export declare const Cascader: import("../utils").WithInstall<import("vue").DefineComponent<{
+    title: StringConstructor;
+    show: BooleanConstructor;
+    round: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    options: {
+        type: import("vue").PropType<import("./types").CascaderOption[]>;
+        default: () => import("./types").CascaderOption[];
+    };
+    closeable: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeable: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    teleport: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    position: {
+        type: import("vue").PropType<import("..").PopupPosition>;
+        default: import("..").PopupPosition;
+    };
+    showHeader: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    modelValue: (NumberConstructor | StringConstructor)[];
+    fieldNames: import("vue").PropType<import("./types").CascaderFieldNames>;
+    placeholder: StringConstructor;
+    activeColor: StringConstructor;
+    safeAreaInsetTop: BooleanConstructor;
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "update:show" | "cancel" | "clickTab" | "finish")[], "update:modelValue" | "change" | "update:show" | "cancel" | "clickTab" | "finish", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    title: StringConstructor;
+    show: BooleanConstructor;
+    round: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    options: {
+        type: import("vue").PropType<import("./types").CascaderOption[]>;
+        default: () => import("./types").CascaderOption[];
+    };
+    closeable: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeable: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    teleport: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    position: {
+        type: import("vue").PropType<import("..").PopupPosition>;
+        default: import("..").PopupPosition;
+    };
+    showHeader: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    modelValue: (NumberConstructor | StringConstructor)[];
+    fieldNames: import("vue").PropType<import("./types").CascaderFieldNames>;
+    placeholder: StringConstructor;
+    activeColor: StringConstructor;
+    safeAreaInsetTop: BooleanConstructor;
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onClickTab?: ((...args: any[]) => any) | undefined;
+    onFinish?: ((...args: any[]) => any) | undefined;
+}, {
+    position: import("..").PopupPosition;
+    show: boolean;
+    teleport: string;
+    closeOnClickOverlay: boolean;
+    round: boolean;
+    closeable: boolean;
+    closeOnPopstate: boolean;
+    safeAreaInsetTop: boolean;
+    popup: boolean;
+    swipeable: boolean;
+    options: import("./types").CascaderOption[];
+    showHeader: boolean;
+}>>;
+export default Cascader;
+export { cascaderProps } from './Cascader';
+export type { CascaderProps } from './Cascader';
+export type { CascaderOption, CascaderFieldNames } from './types';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtCascader: typeof Cascader;
+    }
+}

package/es/cascader/index.mjs

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

package/es/cascader/style/index.d.ts

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

package/es/cascader/style/index.mjs

@@ -0,0 +1,14 @@
+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 "../../sticky/index.css";
+import "../../swipe/index.css";
+import "../../swipe-item/index.css";
+import "../../tabs/index.css";
+import "../../tab/index.css";
+import "../../divider/index.css";
+import "../index.css";

package/es/cascader/types.d.ts

@@ -0,0 +1,19 @@
+import type { Numeric } from '../utils';
+export declare type CascaderOption = {
+    text?: string;
+    value?: Numeric;
+    color?: string;
+    disabled?: boolean;
+    children?: CascaderOption[];
+    className?: unknown;
+    [key: PropertyKey]: any;
+};
+export declare type CascaderTab = {
+    options: CascaderOption[];
+    selected: CascaderOption | null;
+};
+export declare type CascaderFieldNames = {
+    text?: string;
+    value?: string;
+    children?: string;
+};