zartui 3.0.2 → 3.0.3

package/lib/calendar/types.d.ts

@@ -0,0 +1,28 @@
+import type { ComponentPublicInstance, ComputedRef, Ref } from 'vue';
+import type { Numeric } from '../utils';
+import type { CalendarProps } from './Calendar';
+import type { CalendarMonthProps } from './CalendarMonth';
+export declare type CalendarType = 'single' | 'range' | 'multiple';
+export declare type CalendarDayType = '' | 'start' | 'start-end' | 'middle' | 'end' | 'selected' | 'multiple-middle' | 'multiple-selected' | 'disabled' | 'placeholder';
+export declare type CalendarDayItem = {
+    date?: Date;
+    text?: Numeric;
+    type?: CalendarDayType;
+    topInfo?: string;
+    className?: unknown;
+    bottomInfo?: string;
+};
+export declare type CalendarExpose = {
+    reset: (date?: Date | Date[]) => void;
+    scrollToDate: (targetDate: Date) => void;
+    getSelectedDate: () => Date | Date[] | null;
+};
+export declare type CalendarInstance = ComponentPublicInstance<CalendarProps, CalendarExpose>;
+export declare type CalendarMonthInstance = ComponentPublicInstance<CalendarMonthProps, {
+    showed?: boolean;
+    getTitle: () => string;
+    getHeight: () => number;
+    setVisible: (value?: boolean | undefined) => void;
+    scrollToDate: (body: Element, targetDate: Date) => void;
+    disabledDays: Ref<ComputedRef<CalendarDayItem[]>>;
+}>;

package/lib/calendar/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/calendar/utils.d.ts

@@ -0,0 +1,12 @@
+declare const name: string, bem: (el?: import("../utils").Mods | undefined, mods?: import("../utils").Mods | undefined) => import("../utils").Mods, t: (path: string, ...args: unknown[]) => any;
+export { name, bem, t };
+export declare const formatMonthTitle: (date: Date) => any;
+export declare function compareMonth(date1: Date, date2: Date): 0 | 1 | -1;
+export declare function compareDay(day1: Date, day2: Date): 0 | 1 | -1;
+export declare const cloneDate: (date: Date) => Date;
+export declare const cloneDates: (dates: Date | Date[]) => Date | Date[];
+export declare function getDayByOffset(date: Date, offset: number): Date;
+export declare const getPrevDay: (date: Date) => Date;
+export declare const getNextDay: (date: Date) => Date;
+export declare const getToday: () => Date;
+export declare function calcDateNum(date: [Date, Date]): number;

package/lib/calendar/utils.js

@@ -0,0 +1,75 @@
+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, {
+  bem: () => bem,
+  calcDateNum: () => calcDateNum,
+  cloneDate: () => cloneDate,
+  cloneDates: () => cloneDates,
+  compareDay: () => compareDay,
+  compareMonth: () => compareMonth,
+  formatMonthTitle: () => formatMonthTitle,
+  getDayByOffset: () => getDayByOffset,
+  getNextDay: () => getNextDay,
+  getPrevDay: () => getPrevDay,
+  getToday: () => getToday,
+  name: () => name,
+  t: () => t
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_utils = require("../utils");
+const [name, bem, t] = (0, import_utils.createNamespace)("calendar");
+const formatMonthTitle = (date) => t("vanCalendar.monthTitle", date.getFullYear(), date.getMonth() + 1);
+function compareMonth(date1, date2) {
+  const year1 = date1.getFullYear();
+  const year2 = date2.getFullYear();
+  if (year1 === year2) {
+    const month1 = date1.getMonth();
+    const month2 = date2.getMonth();
+    return month1 === month2 ? 0 : month1 > month2 ? 1 : -1;
+  }
+  return year1 > year2 ? 1 : -1;
+}
+function compareDay(day1, day2) {
+  const compareMonthResult = compareMonth(day1, day2);
+  if (compareMonthResult === 0) {
+    const date1 = day1.getDate();
+    const date2 = day2.getDate();
+    return date1 === date2 ? 0 : date1 > date2 ? 1 : -1;
+  }
+  return compareMonthResult;
+}
+const cloneDate = (date) => new Date(date);
+const cloneDates = (dates) => Array.isArray(dates) ? dates.map(cloneDate) : cloneDate(dates);
+function getDayByOffset(date, offset) {
+  const cloned = cloneDate(date);
+  cloned.setDate(cloned.getDate() + offset);
+  return cloned;
+}
+const getPrevDay = (date) => getDayByOffset(date, -1);
+const getNextDay = (date) => getDayByOffset(date, 1);
+const getToday = () => {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  return today;
+};
+function calcDateNum(date) {
+  const day1 = date[0].getTime();
+  const day2 = date[1].getTime();
+  return (day2 - day1) / (1e3 * 60 * 60 * 24) + 1;
+}

package/lib/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/lib/cascader/Cascader.js

@@ -0,0 +1,309 @@
+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, {
+  cascaderProps: () => cascaderProps,
+  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_tab = require("../tab");
+var import_tabs = require("../tabs");
+var import_icon = require("../icon");
+var import_divider = require("../divider");
+var import_Button = __toESM(require("../button/Button"));
+var import_popup = require("../popup");
+const [name, bem, t] = (0, import_utils.createNamespace)("cascader");
+const cascaderProps = {
+  title: String,
+  show: Boolean,
+  round: import_utils.truthProp,
+  closeOnPopstate: import_utils.truthProp,
+  options: (0, import_utils.makeArrayProp)(),
+  closeable: import_utils.truthProp,
+  swipeable: import_utils.truthProp,
+  popup: import_utils.truthProp,
+  teleport: (0, import_utils.makeStringProp)("body"),
+  position: (0, import_utils.makeStringProp)("bottom"),
+  showHeader: import_utils.truthProp,
+  modelValue: import_utils.numericProp,
+  fieldNames: Object,
+  placeholder: String,
+  activeColor: String,
+  safeAreaInsetTop: Boolean,
+  closeOnClickOverlay: import_utils.truthProp
+};
+var stdin_default = (0, import_vue2.defineComponent)({
+  name,
+  props: cascaderProps,
+  emits: ["change", "finish", "clickTab", "update:modelValue", "update:show", "cancel"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const tabs = (0, import_vue2.ref)([]);
+    const activeTab = (0, import_vue2.ref)(0);
+    const currentValues = (0, import_vue2.ref)(props.modelValue);
+    const currentShow = (0, import_vue2.ref)(props.show);
+    const {
+      text: textKey,
+      value: valueKey,
+      children: childrenKey
+    } = (0, import_utils.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
+            });
+          }
+          (0, import_vue2.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);
+        }
+        (0, import_vue2.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 = () => (0, import_vue.createVNode)("div", {
+      "class": bem("header")
+    }, [(0, import_vue.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
+      }) : (0, import_vue.createVNode)("span", null, [option[textKey]]);
+      return (0, import_vue.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 ? (0, import_vue.createVNode)(import_icon.Icon, {
+        "name": "success",
+        "class": bem("selected-icon")
+      }, null) : null]);
+    };
+    const renderOptions = (options, selectedOption, tabIndex) => (0, import_vue.createVNode)("ul", {
+      "role": "menu",
+      "class": bem("options")
+    }, [options.map((option) => renderOption(option, selectedOption, tabIndex))]);
+    const renderDivider = () => (0, import_vue.createVNode)(import_divider.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 (0, import_vue.createVNode)(import_tab.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 = () => (0, import_vue.createVNode)(import_tabs.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 = () => (0, import_vue.createVNode)(import_Button.default, {
+      "class": bem("cancel"),
+      "background-color": "rgba(45, 75, 115, 0.04)",
+      "color": "#2D4B73",
+      "onClick": onCancel
+    }, {
+      default: () => [(0, import_vue.createTextVNode)("\u53D6\u6D88")]
+    });
+    updateTabs();
+    const onOpen = () => {
+      if (!(0, import_utils.isSameValue)(currentValues.value, props.modelValue)) {
+        currentValues.value = props.modelValue;
+      }
+    };
+    (0, import_vue2.watch)(currentShow, (newValue) => {
+      if (newValue !== props.show) {
+        emit("update:show", newValue);
+      }
+    });
+    (0, import_vue2.watch)(() => props.show, (newValue) => {
+      if (newValue !== currentShow.value) {
+        currentShow.value = newValue;
+      }
+    });
+    (0, import_vue2.watch)(() => props.options, updateTabs, {
+      deep: true
+    });
+    (0, import_vue2.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 = () => (0, import_vue.createVNode)("div", {
+      "class": bem()
+    }, [renderHeader(), renderDivider(), renderTabs(), props.popup ? renderDivider() : "", props.popup ? renderMenu() : ""]);
+    return () => {
+      if (props.popup) {
+        return (0, import_vue.createVNode)(import_popup.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();
+    };
+  }
+});

package/lib/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}