zartui 3.1.12 → 3.1.13

package/es/drawer-select/DrawerSelect.d.ts

@@ -0,0 +1,68 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import { DrawerSelectFieldNames, DrawerSelectTreeNode } from './types';
+declare const drawerSelectProps: {
+    treeData: {
+        type: PropType<DrawerSelectTreeNode[]>;
+        default: () => DrawerSelectTreeNode[];
+    };
+    treeFieldName: PropType<DrawerSelectFieldNames>;
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: PropType<string>;
+        default: string;
+    };
+    expandAll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+export type DrawerSelectProps = ExtractPropTypes<typeof drawerSelectProps>;
+declare const _default: import("vue").DefineComponent<{
+    treeData: {
+        type: PropType<DrawerSelectTreeNode[]>;
+        default: () => DrawerSelectTreeNode[];
+    };
+    treeFieldName: PropType<DrawerSelectFieldNames>;
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: PropType<string>;
+        default: string;
+    };
+    expandAll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "change")[], "select" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    treeData: {
+        type: PropType<DrawerSelectTreeNode[]>;
+        default: () => DrawerSelectTreeNode[];
+    };
+    treeFieldName: PropType<DrawerSelectFieldNames>;
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: PropType<string>;
+        default: string;
+    };
+    expandAll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onSelect?: ((...args: any[]) => any) | undefined;
+}, {
+    title: string;
+    placeholder: string;
+    treeData: DrawerSelectTreeNode[];
+    expandAll: boolean;
+}, {}>;
+export default _default;

package/es/drawer-select/DrawerSelect.mjs

@@ -0,0 +1,360 @@
+import { withDirectives as _withDirectives, vShow as _vShow, Fragment as _Fragment, createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
+import { computed, defineComponent, onMounted, ref } from "vue";
+import { useEventListener, useRect } from "@zartui/use";
+import { createNamespace, makeArrayProp, makeStringProp } from "../utils/index.mjs";
+import ZtSearch from "../search/index.mjs";
+import ZtIcon from "../icon/index.mjs";
+import ZtPopup from "../popup/index.mjs";
+import ZtTag from "../tag/index.mjs";
+import { deepClone } from "../utils/deep-clone.mjs";
+import { assignDefaultFields } from "../picker/utils.mjs";
+import { showConfirmDialog } from "../dialog/index.mjs";
+const [name, bem] = createNamespace("drawer-select");
+const drawerSelectProps = {
+  treeData: makeArrayProp(),
+  treeFieldName: Object,
+  title: makeStringProp("\u9009\u62E9\u7C7B\u578B"),
+  placeholder: makeStringProp("\u8BF7\u641C\u7D22\u95EE\u9898\u7C7B\u578B"),
+  expandAll: {
+    type: Boolean,
+    default: false
+  }
+};
+var stdin_default = defineComponent({
+  name,
+  props: drawerSelectProps,
+  emits: ["change", "select"],
+  setup(props, {
+    emit
+  }) {
+    const keyword = ref("");
+    const expandNode = ref();
+    const selectNode = ref();
+    const flatArray = ref([]);
+    const show = ref(false);
+    const searchRef = ref();
+    const offset = ref(0);
+    const historyList = ref([]);
+    const defaultTreeNode = ref(props.treeData);
+    const fields = computed(() => assignDefaultFields(props.treeFieldName));
+    const {
+      value,
+      children,
+      text: key
+    } = fields.value;
+    const allData = {
+      [value]: -1,
+      [key]: "\u5168\u90E8",
+      [children]: props.treeData
+    };
+    const clearSearch = () => {
+      keyword.value = "";
+      show.value = false;
+    };
+    const onScroll = () => {
+      if (show.value) {
+        updateOffset();
+      }
+    };
+    useEventListener("scroll", onScroll, {
+      target: searchRef,
+      passive: true
+    });
+    const updateOffset = () => {
+      if (searchRef.value) {
+        const rect = useRect(searchRef);
+        offset.value = rect.bottom;
+      }
+    };
+    const flatData = (data) => {
+      const result = [];
+      const getNext = (list) => {
+        for (const v of list) {
+          const current = {
+            [key]: v[key],
+            [value]: v[value]
+          };
+          if (props.expandAll) {
+            v.checked = true;
+            v.expand = true;
+          }
+          if (v[children] && v[children].length > 0) {
+            if (v && v.parent) {
+              v[children].forEach((item) => {
+                var _a;
+                item.parent = deepClone(v.parent);
+                (_a = item.parent) == null ? void 0 : _a.push(current);
+              });
+            } else {
+              v[children].forEach((item) => {
+                item.parent = [current];
+              });
+            }
+            getNext(v[children]);
+          } else {
+            if (v && v.parent) {
+              v.parent.push(current);
+            } else {
+              v.parent = [current];
+            }
+            const fullName = v.parent.map((item) => item[key]).join(" \xB7 ");
+            result.push(Object.assign(v, {
+              fullName,
+              parent: v.parent
+            }));
+          }
+        }
+      };
+      getNext(data);
+      flatArray.value = result;
+    };
+    onMounted(() => {
+      var _a;
+      historyList.value = JSON.parse((_a = localStorage.getItem("problemSearchHistory")) != null ? _a : "[]") || [];
+      expandNode.value = {
+        text: allData[key],
+        value: allData[value],
+        children: allData[children]
+      };
+      flatData(props.treeData);
+      updateOffset();
+    });
+    const isEmpty = (item) => !item[children] || item[children].length === 0;
+    const onLabelClick = (item, assign = true) => {
+      const {
+        text,
+        value: value2,
+        children: children2
+      } = fields.value;
+      if (item) {
+        if (assign) {
+          expandNode.value = {
+            text: item[text],
+            value: item[value2],
+            children: item[children2]
+          };
+        }
+        if (isEmpty(item)) {
+          selectNode.value = item;
+          emit("select", item);
+        }
+        item.checked = !item.checked;
+        emit("change", item);
+      }
+    };
+    const isStrValid = (text) => {
+      return text !== null && text !== "" && Object.prototype.toString.call(text) === "[object String]";
+    };
+    const onSearch = (value2) => {
+      if (isStrValid(value2)) {
+        show.value = true;
+      }
+    };
+    const onClickInput = (e) => {
+      const {
+        value: value2
+      } = e.target;
+      onSearch(value2);
+    };
+    const formatSearchKeyword = (keywords, text = "") => {
+      if (!keywords)
+        return text;
+      const replaceReg = new RegExp(keywords, "ig");
+      const replaceString = `<span style="color: #0091FA; background: rgba(0, 145, 250, 0.1); font-weight: bold;">${keywords}</span>`;
+      return text.replace(replaceReg, replaceString);
+    };
+    const filterTree = computed(() => {
+      if (keyword.value) {
+        return flatArray.value.filter((item) => {
+          return (item.fullName || "").indexOf(keyword.value) > -1;
+        });
+      }
+      return [];
+    });
+    const onSearchClick = (item) => {
+      var _a;
+      if (item) {
+        const {
+          text
+        } = fields.value;
+        show.value = false;
+        keyword.value = item[text];
+        let history = JSON.parse((_a = localStorage.getItem("problemSearchHistory")) != null ? _a : "[]") || [];
+        if (history.includes(keyword.value)) {
+          history.map((v, i) => {
+            if (v === keyword.value) {
+              history.splice(i, 1);
+            }
+          });
+        }
+        history.unshift(keyword.value);
+        if (history.length > 10) {
+          history = history.slice(0, 10);
+        }
+        historyList.value = history;
+        localStorage.setItem("problemSearchHistory", JSON.stringify(history));
+        emit("select", Object.assign(item, {
+          parent: item.parent
+        }));
+      }
+    };
+    const renderSecondTree = (item) => {
+      var _a, _b;
+      const text = item[fields.value.text];
+      const children2 = (_a = item[fields.value.children]) != null ? _a : [];
+      return _createVNode("div", null, [_createVNode("div", {
+        "class": [bem("label")],
+        "onClick": () => item.expand = !item.expand
+      }, [_createVNode("span", {
+        "class": [bem("label--placeholder")]
+      }, [children2.length > 0 && _createVNode(ZtIcon, {
+        "name": "play-small",
+        "class": [bem("label--icon", {
+          active: item.expand
+        })],
+        "size": "20"
+      }, null)]), _createVNode("span", {
+        "class": [bem("label--text")]
+      }, [text])]), !isEmpty(item) && item.expand && ((_b = item.children) == null ? void 0 : _b.map((child) => {
+        var _a2;
+        return _createVNode("div", {
+          "class": [bem("label", "second"), bem("label", {
+            active: ((_a2 = expandNode.value) == null ? void 0 : _a2.value) === child[value]
+          })],
+          "onClick": () => onLabelClick(child)
+        }, [child[fields.value.text]]);
+      }))]);
+    };
+    const renderItem = (item) => {
+      var _a, _b;
+      const empty = isEmpty(item);
+      return _createVNode("div", {
+        "onClick": (e) => {
+          e.stopPropagation();
+          onLabelClick(item, false);
+        },
+        "class": [bem("item")]
+      }, [_createVNode("div", {
+        "class": [bem("item--header")]
+      }, [_createVNode("span", {
+        "class": [bem("item--placeholder")]
+      }, [!empty && _createVNode(ZtIcon, {
+        "name": "play-small",
+        "class": [bem("item--icon", {
+          active: item.checked
+        })],
+        "size": "20"
+      }, null)]), _createVNode("div", {
+        "class": [bem("item--label", {
+          active: empty && ((_a = selectNode.value) == null ? void 0 : _a.value) == item[fields.value.value]
+        }), "zt-hairline--top"]
+      }, [item[fields.value.text]])]), _createVNode("div", {
+        "class": [bem("item--child")]
+      }, [!empty && item.checked && ((_b = item[fields.value.children]) == null ? void 0 : _b.map(renderItem))])]);
+    };
+    const onClearHistory = () => {
+      showConfirmDialog({
+        title: "\u786E\u8BA4\u5220\u9664\u5168\u90E8\u641C\u7D22\u5386\u53F2",
+        message: "\u70B9\u51FB\u201C\u5220\u9664\u201D\u5C06\u6E05\u7A7A\u5168\u90E8\u7684\u641C\u7D22\u8BB0\u5F55",
+        confirmButtonText: "\u5220\u9664",
+        teleport: ".zt-drawer-select"
+      }).then(() => {
+        historyList.value = [];
+        show.value = false;
+        localStorage.removeItem("problemSearchHistory");
+      });
+    };
+    const onHistoryClick = (itme) => {
+      keyword.value = itme;
+    };
+    return () => {
+      var _a, _b, _c, _d, _e;
+      return _createVNode("div", {
+        "class": [bem()]
+      }, [_createVNode("div", {
+        "class": [bem("search")],
+        "ref": searchRef
+      }, [_createVNode(ZtSearch, {
+        "modelValue": keyword.value,
+        "onUpdate:modelValue": [($event) => keyword.value = $event, onSearch],
+        "placeholder": props.placeholder,
+        "onClickInput": onClickInput,
+        "onSearch": onSearch,
+        "onClear": clearSearch,
+        "onFocus": () => show.value = true,
+        "autocomplete": "off"
+      }, null), _withDirectives(_createVNode("div", {
+        "class": [bem("wrap")],
+        "style": {
+          top: `${offset.value}px`
+        }
+      }, [_createVNode(ZtPopup, {
+        "class": [bem("popup")],
+        "position": "top",
+        "show": show.value,
+        "onUpdate:show": ($event) => show.value = $event,
+        "overlayStyle": {
+          position: "absolute"
+        }
+      }, {
+        default: () => [keyword.value ? _createVNode(_Fragment, null, [filterTree.value.length > 0 ? filterTree.value.map((item) => _createVNode("div", {
+          "class": [bem("search--item"), "zt-hairline--bottom"],
+          "onClick": () => onSearchClick(item)
+        }, [_createVNode("div", {
+          "class": [bem("search--header")],
+          "innerHTML": formatSearchKeyword(keyword.value, item[key])
+        }, null), _createVNode("div", {
+          "class": [bem("search--name")],
+          "innerHTML": formatSearchKeyword(keyword.value, item == null ? void 0 : item.fullName)
+        }, null)])) : _createVNode("div", {
+          "class": [bem("empty")]
+        }, [_createTextVNode("\u6CA1\u6709\u76F8\u5173\u5185\u5BB9\uFF0C\u8BF7\u91CD\u65B0\u8F93\u5165\u5173\u952E\u5B57")]), " "]) : _createVNode("section", {
+          "class": [bem("history")]
+        }, [historyList.value.length > 0 && _createVNode("div", null, [_createVNode("p", {
+          "class": [bem("history--title"), "zt-hairline--bottom"]
+        }, [_createTextVNode("\u641C\u7D22\u5386\u53F2")]), _createVNode("div", {
+          "class": [bem("history--content")]
+        }, [historyList.value.map((item) => _createVNode(ZtTag, {
+          "onClick": () => onHistoryClick(item),
+          "round": true,
+          "text-color": "var(--zt-gray-a8)",
+          "icon-color": "var(--zt-gray)"
+        }, {
+          default: () => [item]
+        }))]), _createVNode("div", {
+          "class": [bem("history--clear")],
+          "onClick": onClearHistory
+        }, [_createVNode(ZtIcon, {
+          "name": "delete",
+          "size": "20"
+        }, null), _createTextVNode("\u6E05\u7A7A\u641C\u7D22\u5386\u53F2")])]), historyList.value.length === 0 && _createVNode("div", {
+          "class": [bem("empty")]
+        }, [_createTextVNode("\u6682\u65E0\u641C\u7D22\u8BB0\u5F55")])])]
+      })]), [[_vShow, show.value]])]), _createVNode("div", {
+        "class": [bem("name"), "zt-hairline--bottom"]
+      }, [props.title]), _createVNode("main", {
+        "class": [bem("tree")]
+      }, [_createVNode("nav", {
+        "class": [bem("tree-left")]
+      }, [_createVNode("div", {
+        "class": [bem("label", {
+          active: ((_a = expandNode.value) == null ? void 0 : _a.value) === allData[value]
+        })],
+        "onClick": () => onLabelClick(allData)
+      }, [_createVNode("span", {
+        "class": [bem("label", "placeholder")]
+      }, null), _createVNode("span", {
+        "class": [bem("label--text")]
+      }, [_createTextVNode("\u5168\u90E8")])]), (_b = defaultTreeNode.value) == null ? void 0 : _b.map(renderSecondTree)]), _createVNode("section", {
+        "class": [bem("tree-right")]
+      }, [_createVNode("div", {
+        "class": [bem("title")]
+      }, [(_c = expandNode.value) == null ? void 0 : _c.text]), _createVNode("div", {
+        "class": [bem("content")]
+      }, [(_e = (_d = expandNode.value) == null ? void 0 : _d.children) == null ? void 0 : _e.map(renderItem)])])])]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/drawer-select/index.css

@@ -0,0 +1 @@
+:root{--zt-drawer-select-background: #ebf2f5}.zt-drawer-select{height:100%;width:100%;display:flex;flex-direction:column;background:var(--zt-background)}.zt-drawer-select__search{padding:var(--zt-padding-xs) 0}.zt-drawer-select__search--item{padding:var(--zt-padding-sm) 0 var(--zt-padding-sm) var(--zt-padding-md)}.zt-drawer-select__search--item:after{left:calc(-50% + 22px)}.zt-drawer-select__search--header{font-size:var(--zt-font-size-lg);font-weight:700;color:var(--zt-text-color);margin-bottom:4px}.zt-drawer-select__search--name{font-size:var(--zt-font-size-md);color:var(--zt-text-color-2)}.zt-drawer-select__wrap{position:fixed;right:0;left:0;bottom:0;z-index:999;overflow:hidden}.zt-drawer-select__popup{position:absolute;max-height:350px;border-radius:0 0 16px 16px}.zt-drawer-select__empty{font-size:var(--zt-font-size-md);color:var(--zt-gray-a4);text-align:center;padding:var(--zt-padding-lg) 0}.zt-drawer-select__history--title{height:44px;line-height:44px;font-weight:700;padding-left:var(--zt-padding-sm);color:var(--zt-text-color)}.zt-drawer-select__history--content{padding:var(--zt-padding-sm) var(--zt-padding-md) var(--zt-padding-xs)}.zt-drawer-select__history--content .zt-tag{line-height:28px;border-radius:14px;font-size:var(--zt-font-size-md);margin-right:4px;margin-bottom:8px}.zt-drawer-select__history--clear{display:flex;align-items:center;justify-content:center;height:44px;color:var(--zt-gray-a6);text-align:center;font-size:var(--zt-font-size-md)}.zt-drawer-select__name{position:relative;height:44px;line-height:44px;font-size:var(--zt-font-size-lg);color:var(--zt-text-color);font-weight:700;padding-left:var(--zt-padding-md)}.zt-drawer-select__name:before{content:"";position:absolute;width:4px;height:16px;top:14px;left:0;background:var(--zt-primary-color)}.zt-drawer-select__tree{display:flex;flex:1;height:calc(100% - 104px)}.zt-drawer-select__tree-left{width:120px}.zt-drawer-select__tree-right{flex:1;display:flex;flex-direction:column;background:var(--zt-white)}.zt-drawer-select__label{display:flex;align-items:center;line-height:28px;color:var(--zt-text-color);padding:var(--zt-padding-xs) 0 var(--zt-padding-xs) var(--zt-padding-base);font-size:var(--zt-font-size-md)}.zt-drawer-select__label--second{background:var(--zt-drawer-select-background);padding-left:var(--zt-padding-sm)}.zt-drawer-select__label--placeholder{display:flex;align-items:center;width:24px}.zt-drawer-select__label--text{display:flex;align-items:center;min-height:28px}.zt-drawer-select__label--icon--active{transform:rotate(90deg);color:var(--zt-primary-color)}.zt-drawer-select__label--active{color:var(--zt-primary-color);background:var(--zt-white)}.zt-drawer-select__title{display:flex;align-items:center;line-height:28px;font-size:var(--zt-font-size-md);color:var(--zt-text-color);font-weight:700;padding:var(--zt-padding-xs) var(--zt-padding-md)}.zt-drawer-select__content{flex:1;overflow-y:scroll}.zt-drawer-select__item--placeholder{width:30px}.zt-drawer-select__item--header{display:flex;min-height:44px;font-size:var(--zt-font-size-md);color:var(--zt-text-color);padding-left:4px}.zt-drawer-select__item--icon{display:flex;align-items:center;width:24px;margin-right:6px;height:100%}.zt-drawer-select__item--icon--active{transform:rotate(90deg);color:var(--zt-primary-color)}.zt-drawer-select__item--label{flex:1;display:flex;align-items:center;line-height:28px;padding:var(--zt-padding-xs) var(--zt-padding-md) var(--zt-padding-xs) 0}.zt-drawer-select__item--label--active{color:var(--zt-primary-color)}.zt-drawer-select__item--child{padding-left:var(--zt-padding-md)}.zt-drawer-select .zt-dialog__confirm{background:var(--zt-dialog-cancel-button-background-color);border:var(--zt-button-border-width) solid #ff5023;color:#ff5023}

package/es/drawer-select/index.d.ts

@@ -0,0 +1,53 @@
+export declare const DrawerSelect: import("../utils").WithInstall<import("vue").DefineComponent<{
+    treeData: {
+        type: import("vue").PropType<import("./types").DrawerSelectTreeNode[]>;
+        default: () => import("./types").DrawerSelectTreeNode[];
+    };
+    treeFieldName: import("vue").PropType<import("./types").DrawerSelectFieldNames>;
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    expandAll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "change")[], "select" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    treeData: {
+        type: import("vue").PropType<import("./types").DrawerSelectTreeNode[]>;
+        default: () => import("./types").DrawerSelectTreeNode[];
+    };
+    treeFieldName: import("vue").PropType<import("./types").DrawerSelectFieldNames>;
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    expandAll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onSelect?: ((...args: any[]) => any) | undefined;
+}, {
+    title: string;
+    placeholder: string;
+    treeData: import("./types").DrawerSelectTreeNode[];
+    expandAll: boolean;
+}, {}>>;
+export default DrawerSelect;
+export type { DrawerSelectProps } from './DrawerSelect';
+export type { DrawerSelectThemeVars, DrawerSelectTreeNode, FlatTreeNode, } from './types';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtDrawerSelect: typeof DrawerSelect;
+    }
+}

package/es/drawer-select/index.mjs

@@ -0,0 +1,8 @@
+import { withInstall } from "../utils/index.mjs";
+import _DrawerSelect from "./DrawerSelect.mjs";
+const DrawerSelect = withInstall(_DrawerSelect);
+var stdin_default = DrawerSelect;
+export {
+  DrawerSelect,
+  stdin_default as default
+};

package/es/drawer-select/style/index.d.ts

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

package/es/drawer-select/style/index.mjs

@@ -0,0 +1,15 @@
+import "../../style/base.css";
+import "../../badge/index.css";
+import "../../icon/index.css";
+import "../../image/index.css";
+import "../../tag/index.css";
+import "../../overlay/index.css";
+import "../../popup/index.css";
+import "../../loading/index.css";
+import "../../button/index.css";
+import "../../dialog/index.css";
+import "../../picker/index.css";
+import "../../cell/index.css";
+import "../../field/index.css";
+import "../../search/index.css";
+import "../index.css";

package/es/drawer-select/types.d.ts

@@ -0,0 +1,26 @@
+export type DrawerSelectTreeNode = {
+    text?: string;
+    value?: string | number;
+    children?: DrawerSelectTreeNode[];
+    [key: PropertyKey]: any;
+};
+export type FlatTreeNode = {
+    text?: string;
+    value?: string | number;
+    children?: FlatTreeNode[];
+    checked?: boolean;
+    expand?: boolean;
+    fullName?: string;
+    parent?: {
+        [key: PropertyKey]: any;
+    }[];
+    [key: PropertyKey]: any;
+};
+export type DrawerSelectFieldNames = {
+    text?: string;
+    value?: string;
+    children?: string;
+};
+export type DrawerSelectThemeVars = {
+    drawSelectBackground?: string;
+};

package/es/dropdown-item/DropdownItem.d.ts

@@ -40,7 +40,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     titleClass: PropType<unknown>;
     multiSelect: BooleanConstructor;
-}, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("reset" | "open" | "change" | "close" | "update:modelValue" | "opened" | "closed" | "confirm")[], "reset" | "open" | "change" | "close" | "update:modelValue" | "opened" | "closed" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("reset" | "open" | "update:modelValue" | "change" | "close" | "opened" | "closed" | "confirm")[], "reset" | "open" | "update:modelValue" | "change" | "close" | "opened" | "closed" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     title: StringConstructor;
     options: {
         type: PropType<DropdownItemOption[]>;

package/es/dropdown-item/index.d.ts

@@ -18,7 +18,7 @@ export declare const DropdownItem: import("../utils").WithInstall<import("vue").
     };
     titleClass: import("vue").PropType<unknown>;
     multiSelect: BooleanConstructor;
-}, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("reset" | "open" | "change" | "close" | "update:modelValue" | "opened" | "closed" | "confirm")[], "reset" | "open" | "change" | "close" | "update:modelValue" | "opened" | "closed" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, (() => JSX.Element) | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("reset" | "open" | "update:modelValue" | "change" | "close" | "opened" | "closed" | "confirm")[], "reset" | "open" | "update:modelValue" | "change" | "close" | "opened" | "closed" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     title: StringConstructor;
     options: {
         type: import("vue").PropType<import("./types").DropdownItemOption[]>;

package/es/dropdown-item/style/index.mjs

@@ -2,11 +2,12 @@ import "../../style/base.css";
 import "../../badge/index.css";
 import "../../icon/index.css";
 import "../../dropdown-menu/index.css";
-import "../../cell/index.css";
 import "../../overlay/index.css";
 import "../../popup/index.css";
 import "../../loading/index.css";
 import "../../button/index.css";
+import "../../cell/index.css";
+import "../../field/index.css";
 import "../../checkbox-group/index.css";
 import "../../checkbox/index.css";
 import "../index.css";

package/es/dropdown-menu/DropdownMenu.mjs

@@ -79,6 +79,9 @@ var stdin_default = defineComponent({
         disabled,
         titleClass
       } = item;
+      if (item.$slots.header) {
+        return item.$slots.header(item);
+      }
       return _createVNode("div", {
         "id": `${id}-${index}`,
         "role": "button",

package/es/dropdown-menu/index.css

@@ -1 +1 @@
-:root{--zt-dropdown-menu-background: var(--zt-background-2);--zt-dropdown-menu-bar-padding: 0 12px;--zt-dropdown-menu-item-margin: 12px 4px;--zt-dropdown-menu-item-height: 36px;--zt-dropdown-menu-item-padding: 0 12px;--zt-dropdown-menu-title-text-color: var(--zt-text-color);--zt-dropdown-menu-title-active-text-color: var(--zt-primary-color);--zt-dropdown-menu-title-disabled-text-color: var(--zt-text-color-2);--zt-dropdown-menu-option-active-color: var(--zt-primary-color);--zt-dropdown-menu-content-max-height: 80%}:root[zt-theme-size=large]{--zt-dropdown-menu-item-height: 48px}.zt-dropdown-menu{-webkit-user-select:none;user-select:none}.zt-dropdown-menu__bar{position:relative;display:flex;padding:var(--zt-dropdown-menu-bar-padding);align-items:center}.zt-dropdown-menu__bar--opened{z-index:calc(var(--zt-dropdown-item-z-index) + 1)}.zt-dropdown-menu__item{display:flex;flex:1;align-items:center;justify-content:center;background:var(--zt-dropdown-menu-background);min-width:0;margin:var(--zt-dropdown-menu-item-margin);height:var(--zt-dropdown-menu-item-height);border-radius:calc(var(--zt-dropdown-menu-item-height) / 2);padding:var(--zt-dropdown-menu-item-padding);line-height:var(--zt-line-height-xs);cursor:pointer}.zt-dropdown-menu__item:last-child{margin-right:0}.zt-dropdown-menu__item:active{opacity:.7}.zt-dropdown-menu__item--disabled:active{opacity:1}.zt-dropdown-menu__item--disabled .zt-dropdown-menu__title{color:var(--zt-dropdown-menu-title-disabled-text-color)}.zt-dropdown-menu__title{position:relative;box-sizing:border-box;width:100%;color:var(--zt-dropdown-menu-title-text-color);font-size:var(--zt-font-size-md)}.zt-dropdown-menu__title .zt-icon{position:absolute;right:0;margin-top:1px;color:var(--zt-gray-4)}.zt-dropdown-menu__title--active{color:var(--zt-dropdown-menu-title-active-text-color)}.zt-dropdown-menu__title--active .zt-icon{color:currentColor}.zt-dropdown-menu__title--active .zt-dropdown-menu__icon{transform:rotate(180deg)}.zt-dropdown-menu__title--down:after{margin-top:-1px;transform:rotate(135deg)}
+:root{--zt-dropdown-menu-background: var(--zt-background-popup);--zt-dropdown-menu-bar-padding: 0 12px;--zt-dropdown-menu-item-margin: 12px 4px;--zt-dropdown-menu-item-height: 36px;--zt-dropdown-menu-item-padding: 0 12px;--zt-dropdown-menu-title-text-color: var(--zt-text-color);--zt-dropdown-menu-title-active-text-color: var(--zt-primary-color);--zt-dropdown-menu-title-disabled-text-color: var(--zt-text-color-2);--zt-dropdown-menu-option-active-color: var(--zt-primary-color);--zt-dropdown-menu-content-max-height: 80%}:root[zt-theme-size=large]{--zt-dropdown-menu-item-height: 48px}.zt-dropdown-menu{-webkit-user-select:none;user-select:none}.zt-dropdown-menu__bar{position:relative;display:flex;padding:var(--zt-dropdown-menu-bar-padding);align-items:center}.zt-dropdown-menu__bar--opened{z-index:calc(var(--zt-dropdown-item-z-index) + 1)}.zt-dropdown-menu__item{display:flex;flex:1;align-items:center;justify-content:center;background:var(--zt-dropdown-menu-background);min-width:0;margin:var(--zt-dropdown-menu-item-margin);height:var(--zt-dropdown-menu-item-height);border-radius:calc(var(--zt-dropdown-menu-item-height) / 2);padding:var(--zt-dropdown-menu-item-padding);font-size:var(--zt-font-size-md);line-height:var(--zt-line-height-md);cursor:pointer}.zt-dropdown-menu__item:last-child{margin-right:0}.zt-dropdown-menu__item:active{opacity:.7}.zt-dropdown-menu__item--disabled:active{opacity:1}.zt-dropdown-menu__item--disabled .zt-dropdown-menu__title{color:var(--zt-dropdown-menu-title-disabled-text-color)}.zt-dropdown-menu__title{position:relative;box-sizing:border-box;width:100%;color:var(--zt-dropdown-menu-title-text-color);font-size:var(--zt-font-size-md)}.zt-dropdown-menu__title .zt-icon{position:absolute;right:0;margin-top:1px;color:var(--zt-gray-4)}.zt-dropdown-menu__title--active{color:var(--zt-dropdown-menu-title-active-text-color)}.zt-dropdown-menu__title--active .zt-icon{color:currentColor}.zt-dropdown-menu__title--active .zt-dropdown-menu__icon{transform:rotate(180deg)}.zt-dropdown-menu__title--down:after{margin-top:-1px;transform:rotate(135deg)}