persagy-vant 0.0.44 → 0.0.45

package/es/index.d.ts

@@ -117,4 +117,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "0.0.44";
+export const version: "0.0.45";

package/es/index.mjs

@@ -110,7 +110,7 @@ import { Uploader } from "./uploader/index.mjs";
 import { VideoPreview } from "./video-preview/index.mjs";
 import { WorkOrderCard } from "./work-order-card/index.mjs";
 import { WorkOrderFilter } from "./work-order-filter/index.mjs";
-const version = "0.0.44";
+const version = "0.0.45";
 function install(app) {
   const components = [
     ActionBar,

package/es/location-select/LocationSelect.d.ts

@@ -1,6 +1,7 @@
 import { type ExtractPropTypes, type PropType } from 'vue';
 import { type Numeric } from '../utils';
 import { type TreeSelectItem } from '../tree-select';
+import type { LocationSelectSearch } from './types';
 declare const props: {
     show: BooleanConstructor;
     modelValue: PropType<Numeric | undefined>;
@@ -16,6 +17,11 @@ declare const props: {
         type: PropType<string[]>;
         default: () => never[];
     };
+    search: PropType<LocationSelectSearch>;
+    searchDebounce: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
 };
 export declare type LocationSelectProps = ExtractPropTypes<typeof props>;
 declare const _default: import("vue").DefineComponent<{
@@ -33,7 +39,12 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<string[]>;
         default: () => never[];
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue" | "update:show")[], "change" | "update:modelValue" | "update:show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    search: PropType<LocationSelectSearch>;
+    searchDebounce: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue" | "update:show" | "search-error")[], "change" | "update:modelValue" | "update:show" | "search-error", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     show: BooleanConstructor;
     modelValue: PropType<Numeric | undefined>;
     title: {
@@ -48,14 +59,21 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<string[]>;
         default: () => never[];
     };
+    search: PropType<LocationSelectSearch>;
+    searchDebounce: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+    "onSearch-error"?: ((...args: any[]) => any) | undefined;
 }, {
     title: string;
     show: boolean;
     items: TreeSelectItem[][];
     tabTitles: string[];
+    searchDebounce: string | number;
 }>;
 export default _default;

package/es/location-select/LocationSelect.mjs

@@ -1,9 +1,31 @@
-import { computed, defineComponent, ref, watch, createVNode as _createVNode, Fragment as _Fragment } from "vue";
-import { createNamespace, makeArrayProp, makeStringProp } from "../utils/index.mjs";
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { computed, defineComponent, onBeforeUnmount, ref, shallowReactive, watch, createTextVNode as _createTextVNode, createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { createNamespace, makeArrayProp, makeNumericProp, makeStringProp } from "../utils/index.mjs";
 import { ActionSheet } from "../action-sheet/index.mjs";
 import { Cell } from "../cell/index.mjs";
 import { Dialog } from "../dialog/index.mjs";
+import { Empty } from "../empty/index.mjs";
 import { Icon } from "../icon/index.mjs";
+import { Loading } from "../loading/index.mjs";
 import { NavBar } from "../nav-bar/index.mjs";
 import { Search } from "../search/index.mjs";
 import { Tab } from "../tab/index.mjs";
@@ -143,12 +165,14 @@ const props = {
     type: Array,
     default: () => locations
   },
-  tabTitles: makeArrayProp()
+  tabTitles: makeArrayProp(),
+  search: Function,
+  searchDebounce: makeNumericProp(300)
 };
 var stdin_default = defineComponent({
   name,
   props,
-  emits: ["update:show", "update:modelValue", "change"],
+  emits: ["update:show", "update:modelValue", "change", "search-error"],
   setup(props2, {
     emit
   }) {
@@ -158,6 +182,12 @@ var stdin_default = defineComponent({
     const customValue = ref("");
     const expandedKeys = ref(["basement", "b3"]);
     const query = ref("");
+    const asyncSearchResults = ref([]);
+    const searchLoading = ref(false);
+    const searchFailed = ref(false);
+    const searchedItems = shallowReactive(/* @__PURE__ */ new Map());
+    let searchTimer;
+    let searchRequestId = 0;
     const titles = computed(() => props2.tabTitles.length ? props2.tabTitles : ["ABC\u5EA7\u5730\u4E0B\u5BA4", "A\u5EA7", "B\u5EA7", "C\u5EA7", "D\u5EA7"]);
     const allItems = computed(() => props2.items.flatMap(flatten));
     const currentRoot = computed(() => {
@@ -168,7 +198,48 @@ var stdin_default = defineComponent({
       var _a;
       return ((_a = currentRoot.value) == null ? void 0 : _a.children) || [];
     });
-    const searchResults = computed(() => query.value ? allItems.value.filter((item) => item.text.includes(query.value)) : []);
+    const searchResults = computed(() => {
+      if (!query.value.trim())
+        return [];
+      if (props2.search)
+        return asyncSearchResults.value;
+      return allItems.value.filter((item) => item.text.includes(query.value));
+    });
+    const runSearch = (..._0) => __async(this, [..._0], function* (keyword = query.value.trim()) {
+      if (!props2.search || !keyword)
+        return;
+      const requestId = ++searchRequestId;
+      searchLoading.value = true;
+      searchFailed.value = false;
+      try {
+        const results = yield props2.search(keyword);
+        if (requestId !== searchRequestId)
+          return;
+        asyncSearchResults.value = results;
+        results.forEach((item) => searchedItems.set(item.id, item));
+      } catch (error) {
+        if (requestId !== searchRequestId)
+          return;
+        asyncSearchResults.value = [];
+        searchFailed.value = true;
+        emit("search-error", keyword, error);
+      } finally {
+        if (requestId === searchRequestId)
+          searchLoading.value = false;
+      }
+    });
+    const scheduleSearch = () => {
+      if (searchTimer)
+        clearTimeout(searchTimer);
+      searchRequestId += 1;
+      searchLoading.value = false;
+      searchFailed.value = false;
+      asyncSearchResults.value = [];
+      if (props2.search && query.value.trim()) {
+        searchTimer = setTimeout(runSearch, Number(props2.searchDebounce));
+      }
+    };
+    watch([query, () => props2.search], scheduleSearch);
     watch(() => props2.show, (show) => {
       if (show) {
         active.value = 0;
@@ -176,11 +247,16 @@ var stdin_default = defineComponent({
         expandedKeys.value = ["basement", "b3"];
       }
     });
+    onBeforeUnmount(() => {
+      searchRequestId += 1;
+      if (searchTimer)
+        clearTimeout(searchTimer);
+    });
     const close = () => emit("update:show", false);
     const select = (value) => {
       const selected = value[0];
       if (selected !== void 0) {
-        const selectedItem = allItems.value.find((item) => item.id === selected);
+        const selectedItem = allItems.value.find((item) => item.id === selected) || searchedItems.get(selected);
         emit("update:modelValue", selected);
         emit("change", selected, selectedItem == null ? void 0 : selectedItem.text);
         close();
@@ -195,6 +271,37 @@ var stdin_default = defineComponent({
       showCustom.value = false;
       close();
     };
+    const renderSearchContent = () => {
+      if (searchLoading.value)
+        return _createVNode("div", {
+          "class": bem("search-state")
+        }, [_createVNode(Loading, {
+          "vertical": true
+        }, {
+          default: () => [_createTextVNode("\u52A0\u8F7D\u4E2D...")]
+        })]);
+      if (searchFailed.value)
+        return _createVNode(Empty, {
+          "image": "network",
+          "description": "\u641C\u7D22\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5"
+        }, null);
+      if (!searchResults.value.length)
+        return _createVNode(Empty, {
+          "description": "\u6682\u65E0\u641C\u7D22\u7ED3\u679C"
+        }, null);
+      return _createVNode("div", {
+        "class": bem("card")
+      }, [searchResults.value.map((item, index) => _createVNode(Cell, {
+        "key": item.id,
+        "title": item.text,
+        "rightSelect": props2.modelValue === item.id,
+        "selectType": "radio",
+        "border": index < searchResults.value.length - 1,
+        "clickable": true,
+        "onClick": () => select([item.id]),
+        "onUpdate:rightSelect": () => select([item.id])
+      }, null))]);
+    };
     return () => _createVNode(ActionSheet, {
       "show": props2.show,
       "class": bem(),
@@ -225,23 +332,20 @@ var stdin_default = defineComponent({
         "modelValue": query.value,
         "onUpdate:modelValue": ($event) => query.value = $event,
         "class": bem("search"),
+        "variant": "pure",
         "shape": "round",
         "inputAlign": "left",
-        "placeholder": "\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD"
+        "placeholder": "\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD",
+        "onSearch": () => {
+          if (props2.search) {
+            if (searchTimer)
+              clearTimeout(searchTimer);
+            runSearch();
+          }
+        }
       }, null), query.value ? _createVNode("div", {
         "class": bem("body")
-      }, [_createVNode("div", {
-        "class": bem("card")
-      }, [searchResults.value.map((item) => _createVNode(Cell, {
-        "key": item.id,
-        "title": item.text,
-        "rightSelect": props2.modelValue === item.id,
-        "selectType": "radio",
-        "border": true,
-        "clickable": true,
-        "onClick": () => select([item.id]),
-        "onUpdate:rightSelect": () => select([item.id])
-      }, null))])]) : _createVNode(_Fragment, null, [_createVNode(Tabs, {
+      }, [renderSearchContent()]) : _createVNode(_Fragment, null, [_createVNode(Tabs, {
         "active": active.value,
         "onUpdate:active": ($event) => active.value = $event,
         "showMore": showMore.value,

package/es/location-select/index.css

@@ -1 +1 @@
-.van-location-select{display:flex;flex-direction:column;height:calc(100vh - 96px);overflow:hidden;background:var(--van-gray-2)}.van-location-select>.van-action-sheet__content{display:flex;flex:1;flex-direction:column;min-height:0;gap:0;padding:0;overflow:hidden}.van-location-select__nav{flex:none;--van-nav-bar-background-color: var(--van-gray-2)}.van-location-select__nav .van-nav-bar__left--slot{left:var(--van-padding-md)}.van-location-select__nav .van-nav-bar__right--slot{display:flex;gap:12px;padding-right:var(--van-padding-md)}.van-location-select__search{flex:none;padding:8px var(--van-padding-md);--van-search-padding: 0;--van-search-background-color: var(--van-gray-2);--van-search-content-background-color: var(--van-white)}.van-location-select__search .van-search__field{padding-left:0}.van-location-select__tabs{flex:none;padding-left:8px;--van-tab-font-size: var(--van-font-size-md);--van-tabs-line-height: 44px;--van-tabs-nav-background-color: transparent}.van-location-select__body{flex:1;min-height:0;padding:12px var(--van-padding-md);overflow-y:auto}.van-location-select__card{overflow:hidden;background:var(--van-white);border-radius:8px}.van-location-select__root-option{margin-bottom:8px;background:var(--van-white);border-radius:8px}
+.van-location-select{display:flex;flex-direction:column;height:calc(100vh - 96px);overflow:hidden;background:var(--van-gray-2)}.van-location-select>.van-action-sheet__content{display:flex;flex:1;flex-direction:column;min-height:0;gap:0;padding:0;overflow:hidden}.van-location-select__nav{flex:none;--van-nav-bar-background-color: var(--van-gray-2)}.van-location-select__nav .van-nav-bar__left--slot{left:var(--van-padding-md)}.van-location-select__nav .van-nav-bar__right--slot{display:flex;gap:12px;padding-right:var(--van-padding-md)}.van-location-select__search{flex:none;padding:8px var(--van-padding-md);--van-search-padding: 0;--van-search-background-color: var(--van-gray-2);--van-search-content-background-color: var(--van-white)}.van-location-select__search .van-search__field{padding-left:0}.van-location-select__tabs{flex:none;padding-left:8px;--van-tab-font-size: var(--van-font-size-md);--van-tabs-line-height: 44px;--van-tabs-nav-background-color: transparent}.van-location-select__body{flex:1;min-height:0;padding:12px var(--van-padding-md);overflow-y:auto}.van-location-select__card{overflow:hidden;background:var(--van-white);border-radius:8px}.van-location-select__search-state{display:flex;align-items:center;justify-content:center;min-height:160px}.van-location-select__root-option{margin-bottom:8px;background:var(--van-white);border-radius:8px}

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

@@ -13,7 +13,12 @@ export declare const LocationSelect: import("../utils").WithInstall<import("vue"
         type: import("vue").PropType<string[]>;
         default: () => never[];
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue" | "update:show")[], "change" | "update:modelValue" | "update:show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    search: import("vue").PropType<import("./types").LocationSelectSearch>;
+    searchDebounce: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue" | "update:show" | "search-error")[], "change" | "update:modelValue" | "update:show" | "search-error", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     show: BooleanConstructor;
     modelValue: import("vue").PropType<import("../utils").Numeric | undefined>;
     title: {
@@ -28,18 +33,26 @@ export declare const LocationSelect: import("../utils").WithInstall<import("vue"
         type: import("vue").PropType<string[]>;
         default: () => never[];
     };
+    search: import("vue").PropType<import("./types").LocationSelectSearch>;
+    searchDebounce: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+    "onSearch-error"?: ((...args: any[]) => any) | undefined;
 }, {
     title: string;
     show: boolean;
     items: import("..").TreeSelectItem[][];
     tabTitles: string[];
+    searchDebounce: string | number;
 }>>;
 export default LocationSelect;
 export type { LocationSelectProps } from './LocationSelect';
+export type { LocationSelectSearch } from './types';
 declare module 'vue' {
     interface GlobalComponents {
         VanLocationSelect: typeof LocationSelect;

package/es/location-select/index.less

@@ -11,5 +11,6 @@
   &__tabs { flex: none; padding-left: 8px; --van-tab-font-size: var(--van-font-size-md); --van-tabs-line-height: 44px; --van-tabs-nav-background-color: transparent; }
   &__body { flex: 1; min-height: 0; padding: 12px var(--van-padding-md); overflow-y: auto; }
   &__card { overflow: hidden; background: var(--van-white); border-radius: 8px; }
+  &__search-state { display: flex; align-items: center; justify-content: center; min-height: 160px; }
   &__root-option { margin-bottom: 8px; background: var(--van-white); border-radius: 8px; }
 }

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

@@ -25,4 +25,5 @@ import "../../swipe/index.css";
 import "../../swipe-item/index.css";
 import "../../tabs/index.css";
 import "../../tab/index.css";
+import "../../empty/index.css";
 import "../index.css";

package/es/location-select/style/less.mjs

@@ -25,4 +25,5 @@ import "../../swipe/index.less";
 import "../../swipe-item/index.less";
 import "../../tabs/index.less";
 import "../../tab/index.less";
+import "../../empty/index.less";
 import "../index.less";

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

@@ -0,0 +1,2 @@
+import type { TreeSelectItem } from '../tree-select';
+export declare type LocationSelectSearch = (keyword: string) => TreeSelectItem[] | Promise<TreeSelectItem[]>;

package/es/material-add/MaterialAdd.d.ts

@@ -1,5 +1,5 @@
 import { type ExtractPropTypes, type PropType } from 'vue';
-import type { MaterialAddCategory, MaterialAddItem } from './types';
+import type { MaterialAddCategory, MaterialAddItem, MaterialAddSearch } from './types';
 declare const materialAddProps: {
     show: BooleanConstructor;
     modelValue: {
@@ -54,6 +54,11 @@ declare const materialAddProps: {
         type: PropType<string>;
         default: string;
     };
+    search: PropType<MaterialAddSearch>;
+    searchDebounce: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
 };
 export declare type MaterialAddProps = ExtractPropTypes<typeof materialAddProps>;
 declare const _default: import("vue").DefineComponent<{
@@ -110,7 +115,12 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<string>;
         default: string;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue" | "update:show" | "confirm")[], "change" | "update:modelValue" | "update:show" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    search: PropType<MaterialAddSearch>;
+    searchDebounce: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue" | "update:show" | "confirm" | "search-error")[], "change" | "update:modelValue" | "update:show" | "confirm" | "search-error", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     show: BooleanConstructor;
     modelValue: {
         type: PropType<number[]>;
@@ -164,17 +174,24 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<string>;
         default: string;
     };
+    search: PropType<MaterialAddSearch>;
+    searchDebounce: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onUpdate:show"?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
+    "onSearch-error"?: ((...args: any[]) => any) | undefined;
 }, {
     title: string;
     modelValue: number[];
     show: boolean;
     confirmText: string;
     items: MaterialAddItem[];
+    searchDebounce: string | number;
     categories: MaterialAddCategory[];
     showCommonTab: boolean;
     showAllTab: boolean;

package/es/material-add/MaterialAdd.mjs

@@ -1,9 +1,31 @@
-import { Transition, Teleport, computed, defineComponent, ref, watch, createVNode as _createVNode, createTextVNode as _createTextVNode, Fragment as _Fragment } from "vue";
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { Transition, Teleport, computed, defineComponent, onBeforeUnmount, ref, watch, createVNode as _createVNode, createTextVNode as _createTextVNode, Fragment as _Fragment } from "vue";
 import { ActionSheet } from "../action-sheet/index.mjs";
 import { BlueMarkHeader } from "../blue-mark/index.mjs";
 import { BottomActionBar } from "../bottom-action-bar/index.mjs";
 import { FilterTag } from "../filter-tag/index.mjs";
+import { Empty } from "../empty/index.mjs";
 import { Icon } from "../icon/index.mjs";
+import { Loading } from "../loading/index.mjs";
 import { NavBar } from "../nav-bar/index.mjs";
 import { Search } from "../search/index.mjs";
 import { Swipe } from "../swipe/index.mjs";
@@ -13,7 +35,7 @@ import { Tabs } from "../tabs/index.mjs";
 import TreeSelect from "../tree-select/index.mjs";
 import MaterialActionBar from "../material-action-bar/index.mjs";
 import MaterialDetail from "../material-detail/index.mjs";
-import { createNamespace, makeArrayProp, makeStringProp } from "../utils/index.mjs";
+import { createNamespace, makeArrayProp, makeNumericProp, makeStringProp } from "../utils/index.mjs";
 const [name, bem] = createNamespace("material-add");
 const detailBanners = ["motor", "blower", "coil"];
 const defaultItems = [{
@@ -322,12 +344,14 @@ const materialAddProps = {
   commonTabText: makeStringProp("\u5E38\u7528\u7269\u6599"),
   allTabText: makeStringProp("\u5168\u90E8\u7269\u6599"),
   materialTabText: makeStringProp("\u7269\u8D44"),
-  toolTabText: makeStringProp("\u5DE5\u5177")
+  toolTabText: makeStringProp("\u5DE5\u5177"),
+  search: Function,
+  searchDebounce: makeNumericProp(300)
 };
 var stdin_default = defineComponent({
   name,
   props: materialAddProps,
-  emits: ["update:show", "update:modelValue", "change", "confirm"],
+  emits: ["update:show", "update:modelValue", "change", "confirm", "search-error"],
   setup(props, {
     emit
   }) {
@@ -343,6 +367,10 @@ var stdin_default = defineComponent({
     const activeKind = ref(getDefaultKind());
     const keyword = ref("");
     const searching = ref(false);
+    const searchLoading = ref(false);
+    const searchFailed = ref(false);
+    let searchTimer;
+    let searchRequestId = 0;
     const expandedKeys = ref([]);
     const expandedSelected = ref(false);
     const detailItem = ref();
@@ -425,6 +453,11 @@ var stdin_default = defineComponent({
         activeTab.value = getDefaultTab();
         activeKind.value = getDefaultKind();
         keyword.value = "";
+        searchLoading.value = false;
+        searchFailed.value = false;
+        searchRequestId += 1;
+        if (searchTimer)
+          clearTimeout(searchTimer);
         searching.value = false;
         expandedKeys.value = getDefaultExpandedKeys();
         expandedSelected.value = false;
@@ -442,6 +475,40 @@ var stdin_default = defineComponent({
         expandedKeys.value = getDefaultExpandedKeys();
       }
     });
+    const runSearch = (..._0) => __async(this, [..._0], function* (query = keyword.value.trim()) {
+      if (!props.search || !query)
+        return;
+      const requestId = ++searchRequestId;
+      searchLoading.value = true;
+      searchFailed.value = false;
+      try {
+        yield props.search(query);
+      } catch (error) {
+        if (requestId !== searchRequestId)
+          return;
+        searchFailed.value = true;
+        emit("search-error", query, error);
+      } finally {
+        if (requestId === searchRequestId)
+          searchLoading.value = false;
+      }
+    });
+    const scheduleSearch = () => {
+      if (searchTimer)
+        clearTimeout(searchTimer);
+      searchRequestId += 1;
+      searchLoading.value = false;
+      searchFailed.value = false;
+      if (props.search && keyword.value.trim()) {
+        searchTimer = setTimeout(runSearch, Number(props.searchDebounce));
+      }
+    };
+    watch([keyword, () => props.search], scheduleSearch);
+    onBeforeUnmount(() => {
+      searchRequestId += 1;
+      if (searchTimer)
+        clearTimeout(searchTimer);
+    });
     const setActiveTab = (tab) => {
       activeTab.value = tab;
       if (tab === "all") {
@@ -508,9 +575,25 @@ var stdin_default = defineComponent({
     }, null);
     const renderList = () => _createVNode("div", {
       "class": bem("material-list")
-    }, [visibleItems.value.length ? visibleItems.value.map((item) => renderMaterialCell(item, props.items.indexOf(item))) : _createVNode("div", {
-      "class": bem("empty")
-    }, [_createTextVNode("\u6682\u65E0\u5339\u914D\u7269\u6599")])]);
+    }, [visibleItems.value.length ? visibleItems.value.map((item) => renderMaterialCell(item, props.items.indexOf(item))) : _createVNode(Empty, {
+      "description": "\u6682\u65E0\u5339\u914D\u7269\u6599"
+    }, null)]);
+    const renderSearchContent = () => {
+      if (searchLoading.value)
+        return _createVNode("div", {
+          "class": bem("search-state")
+        }, [_createVNode(Loading, {
+          "vertical": true
+        }, {
+          default: () => [_createTextVNode("\u52A0\u8F7D\u4E2D...")]
+        })]);
+      if (searchFailed.value)
+        return _createVNode(Empty, {
+          "image": "network",
+          "description": "\u641C\u7D22\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5"
+        }, null);
+      return renderList();
+    };
     const renderCatalog = () => {
       const catalogItems = getCatalogItems();
       const defaultExpandedKeys = getDefaultExpandedKeys();
@@ -669,11 +752,19 @@ var stdin_default = defineComponent({
         "modelValue": keyword.value,
         "onUpdate:modelValue": ($event) => keyword.value = $event,
         "class": bem("search"),
+        "variant": "pure",
         "shape": "round",
         "inputAlign": "left",
         "autofocus": true,
         "showAction": true,
         "placeholder": "\u641C\u7D22\u7269\u8D44/\u5DE5\u5177\u540D\u79F0",
+        "onSearch": () => {
+          if (props.search) {
+            if (searchTimer)
+              clearTimeout(searchTimer);
+            runSearch();
+          }
+        },
         "onCancel": () => {
           searching.value = false;
           keyword.value = "";
@@ -727,7 +818,7 @@ var stdin_default = defineComponent({
         default: () => [props.toolTabText]
       })])]), _createVNode("div", {
         "class": bem("body")
-      }, [searching.value && !keyword.value.trim() ? null : searching.value || activeTab.value === "common" ? renderList() : renderCatalog()]), _createVNode("div", {
+      }, [searching.value && !keyword.value.trim() ? null : searching.value ? renderSearchContent() : activeTab.value === "common" ? renderList() : renderCatalog()]), _createVNode("div", {
         "class": bem("footer")
       }, [renderSelectPanel(), _createVNode(BottomActionBar, {
         "fixed": false,

package/es/material-add/index.css

@@ -1 +1 @@
-.van-material-action-bar{--van-material-action-bar-title-font-size: 15px;--van-material-action-bar-title-font-weight: var(--van-font-weight-bold);position:relative;padding:10px var(--van-padding-md)}.van-material-action-bar--selected{padding:10px var(--van-padding-md);background:var(--van-gray-2);border-radius:8px}.van-material-action-bar--selected:after{display:none}.van-material-action-bar:not(:last-child):after{position:absolute;right:var(--van-padding-md);bottom:0;left:var(--van-padding-md);height:1px;background:var(--van-border-color);transform:scaleY(.5);content:""}.van-material-action-bar__main{display:flex;align-items:center;min-height:22px}.van-material-action-bar__detail{display:inline-flex;flex:1 1 0;gap:2px;align-items:center;min-width:0;padding:0;overflow:hidden;color:var(--van-gray-9);font:inherit;font-size:var(--van-material-action-bar-title-font-size);font-weight:var(--van-material-action-bar-title-font-weight);line-height:var(--van-line-height-lg);text-align:left;background:transparent;border:0;cursor:pointer;transition:opacity var(--van-animation-duration-fast)}.van-material-action-bar__detail:active{opacity:var(--van-active-opacity)}.van-material-action-bar__detail>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.van-material-action-bar__stepper-prefix{flex:none;margin:0 4px 0 8px;color:var(--van-text-color-2);font-size:var(--van-font-size-md);line-height:var(--van-line-height-lg)}.van-material-action-bar__stepper-wrapper{position:relative;flex:none;margin-left:4px}.van-material-action-bar__kind-tag{flex:none;margin-left:4px}.van-material-action-bar__stepper{flex:none;margin-left:0;--van-stepper-input-width: 24px;--van-stepper-input-height: 18px;--van-stepper-input-font-size: var(--van-font-size-md);--van-stepper-input-line-height: var(--van-line-height-lg)}.van-material-action-bar__number-trigger{position:absolute;z-index:1;top:0;left:18px;width:24px;height:18px;padding:0;background:transparent;border:0;cursor:pointer}.van-material-action-bar__unit{display:flex;flex:none;align-items:center;width:32px;height:18px;margin-left:8px;overflow:hidden;color:var(--van-text-color-2);font-size:var(--van-font-size-md);line-height:18px;text-overflow:ellipsis;white-space:nowrap}.van-material-action-bar__desc{margin:6px 0 0;overflow:hidden;color:var(--van-gray-6);font-size:var(--van-font-size-md);line-height:20px;text-overflow:ellipsis;white-space:nowrap}.van-material-action-bar__warning{margin:2px 0 0;color:var(--van-red-500);font-size:var(--van-font-size-sm);line-height:20px}.van-material-action-bar__picking-outbound{display:flex;gap:4px;margin:2px 0 0;color:var(--van-text-color);font-size:var(--van-font-size-sm);line-height:20px}.van-material-action-bar__picking-label{color:var(--van-gray-6)}.van-material-action-bar__picking-value{font-weight:600}.van-material-action-bar__bottom{display:flex;flex-direction:column;gap:2px;margin-top:2px}.van-material-action-bar__keyword{color:var(--van-primary-color)}.van-material-add{position:relative;display:flex;flex-direction:column;height:calc(100vh - 96px);max-height:calc(100vh - 96px);bottom:56px;overflow:hidden;background:var(--van-gray-2)}.van-material-add>.van-action-sheet__content{display:flex;flex:1;flex-direction:column;min-height:0;gap:0;padding:0;overflow:hidden}.van-material-add__nav{flex:none;--van-nav-bar-background-color: var(--van-gray-2)}.van-material-add__nav .van-nav-bar__left--slot{left:var(--van-padding-md)}.van-material-add__nav .van-nav-bar__right--slot{right:var(--van-padding-md)}.van-material-add__search{flex:none;padding:8px var(--van-padding-md);--van-search-padding: 0;--van-search-background-color: var(--van-gray-2);--van-search-content-background-color: var(--van-white)}.van-material-add__search .van-search__field{padding-left:0}.van-material-add__tabs{flex:none;padding-left:8px;--van-tabs-line-height: 44px;--van-tab-font-size: var(--van-font-size-md);--van-tabs-bottom-bar-width: 40px;--van-tabs-nav-background-color: transparent}.van-material-add__filter-tags{display:flex;flex:none;gap:6px;padding:12px var(--van-padding-md)}.van-material-add__filter-tags .van-filter-tag{min-width:56px;--van-filter-tag-background-color: var(--van-gray-4)}.van-material-add__body{flex:1;min-height:0;padding:0 var(--van-padding-md) 12px;overflow-y:auto}.van-material-add__tree-card{margin-bottom:12px;overflow:hidden;background:var(--van-white);border-radius:8px}.van-material-add__catalog-leaf{overflow:hidden}.van-material-add__material-list{overflow:hidden;background:var(--van-white);border-radius:8px}.van-material-add__empty{padding:32px 16px;color:var(--van-text-color-3);font-size:var(--van-font-size-md);text-align:center}.van-material-add__footer{position:relative;z-index:2;flex:none;background:var(--van-white);box-shadow:0 -2px 5px rgba(27,33,41,.1)}.van-material-add__footer .van-bottom-action-bar{box-shadow:none}.van-material-add__selected-panel{position:absolute;right:0;bottom:60px;left:0;display:flex;flex-direction:column;max-height:340px;overflow:hidden;background:var(--van-white);box-shadow:0 -2px 5px rgba(27,33,41,.1)}.van-material-add__selected-header{display:flex;align-items:center;justify-content:space-between;padding:12px var(--van-padding-md) 4px}.van-material-add__clear,.van-material-add__collapse{padding:0;background:transparent;border:0}.van-material-add__clear{color:var(--van-primary-color);font:inherit;font-size:var(--van-font-size-md)}.van-material-add__collapse{display:inline-flex;gap:2px;align-items:center;color:var(--van-gray-6);font:inherit;font-size:var(--van-font-size-md)}.van-material-add__selected-list{display:flex;flex-direction:column;gap:6px;padding:var(--van-padding-xs) var(--van-padding-md);overflow-y:auto}.van-material-add__detail-page{position:fixed;z-index:3000;inset:0;display:flex;flex-direction:column;overflow:hidden;background:var(--van-gray-2)}.van-material-add__detail-banner{position:absolute;top:0;right:0;left:0;height:320px;overflow:hidden;background:var(--van-gray-8)}.van-material-add__detail-swipe{height:320px;touch-action:pan-y}.van-material-add__detail-image{width:100%;height:310px;background-position:center;background-size:cover}.van-material-add__detail-image--motor{background-image:url(/dog1.jpg)}.van-material-add__detail-image--blower{background-image:url(/dog2.jpg)}.van-material-add__detail-image--coil{background-image:url(/dog3.jpg)}.van-material-add__detail-dots{position:absolute;z-index:2;top:226px;left:50%;display:flex;gap:6px;transform:translate(-50%)}.van-material-add__detail-dots>i{width:6px;height:6px;background:rgba(255,255,255,.55);border-radius:50%}.van-material-add__detail-dot--active{background:var(--van-white)!important}.van-material-add__detail-close{position:absolute;z-index:1;top:56px;left:var(--van-padding-md);display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;color:var(--van-gray-9);background:var(--van-gray-3);border:0;border-radius:50%;box-shadow:0 2px 5px rgba(27,33,41,.1)}.van-material-add__detail-content{position:relative;z-index:1;display:flex;flex:1;flex-direction:column;min-height:0;margin-top:246px;overflow:hidden;background:var(--van-white);border-radius:16px 16px 0 0}.van-material-add__detail-body{flex:1;min-height:0;padding:16px var(--van-padding-md) 24px;overflow-y:auto}.van-material-add__detail-section+.van-material-add__detail-section{margin-top:24px}.van-material-add__detail-section .van-blue-mark-header{margin-bottom:8px;padding:0}.van-material-add__detail-card{padding:8px 12px;color:var(--van-gray-9);font-size:var(--van-font-size-md);line-height:var(--van-line-height-lg);background:linear-gradient(90deg,var(--van-gray-2),rgba(241,244,246,.2));border-radius:8px}.van-material-add__detail-info-rows{display:flex;flex-direction:column;gap:8px}.van-material-add__detail-row{display:flex;gap:16px;justify-content:space-between;min-height:22px}.van-material-add__detail-row>span{flex:none;width:56px;color:var(--van-gray-6)}.van-material-add__detail-row>strong{flex:1;color:var(--van-gray-9);font-weight:400;text-align:right;white-space:pre-line}.van-material-add__detail-link{color:var(--van-primary-color)!important;font-weight:var(--van-font-weight-bold)!important}.van-material-add-detail-enter-active{transition:transform var(--van-animation-duration-fast) var(--van-animation-timing-function-enter);will-change:transform}.van-material-add-detail-leave-active{transition:transform var(--van-animation-duration-fast) var(--van-animation-timing-function-leave);will-change:transform}.van-material-add-detail-enter-from,.van-material-add-detail-leave-to{transform:translateY(100%)}.van-material-add-detail-section-enter-active,.van-material-add-detail-section-leave-active{overflow:hidden;transition:max-height .2s ease,opacity .2s ease}.van-material-add-detail-section-enter-from,.van-material-add-detail-section-leave-to{max-height:0;opacity:0}.van-material-add-detail-section-enter-to,.van-material-add-detail-section-leave-from{max-height:480px;opacity:1}.van-material-add-item{position:relative;padding:10px var(--van-padding-md);cursor:pointer;transition:background-color .2s ease}.van-material-add-item:active{background-color:var(--van-active-color)}.van-material-add-item--selected{padding:10px var(--van-padding-md);background:var(--van-gray-2);border-radius:8px}.van-material-add-item--selected:after{display:none}.van-material-add-item:not(:last-child):after{position:absolute;right:var(--van-padding-md);bottom:0;left:var(--van-padding-md);height:1px;background:var(--van-border-color);transform:scaleY(.5);content:""}.van-material-add-item__main{display:flex;align-items:center;min-height:22px}.van-material-add-item__detail{display:inline-flex;flex:1;gap:2px;align-items:center;min-width:0;padding:0;overflow:hidden;color:var(--van-gray-9);font:inherit;font-size:var(--van-font-size-md);line-height:var(--van-line-height-lg);text-align:left;background:transparent;border:0}.van-material-add-item__detail>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.van-material-add-item__kind-tag{flex:none;margin-left:4px}.van-material-add-item__stepper{flex:none;margin-left:8px;--van-stepper-input-width: 32px;--van-stepper-input-height: 18px;--van-stepper-input-font-size: var(--van-font-size-md);--van-stepper-input-line-height: var(--van-line-height-lg)}.van-material-add-item__unit{width:32px;margin-left:8px;overflow:hidden;color:var(--van-text-color-2);font-size:var(--van-font-size-md);line-height:var(--van-line-height-lg);text-overflow:ellipsis;white-space:nowrap}.van-material-add-item__desc{margin:4px 0 0;overflow:hidden;color:var(--van-gray-6);font-size:var(--van-font-size-sm);line-height:20px;text-overflow:ellipsis;white-space:nowrap}.van-material-add-item__keyword{color:var(--van-primary-color)}
+.van-material-action-bar{--van-material-action-bar-title-font-size: 15px;--van-material-action-bar-title-font-weight: var(--van-font-weight-bold);position:relative;padding:10px var(--van-padding-md)}.van-material-action-bar--selected{padding:10px var(--van-padding-md);background:var(--van-gray-2);border-radius:8px}.van-material-action-bar--selected:after{display:none}.van-material-action-bar:not(:last-child):after{position:absolute;right:var(--van-padding-md);bottom:0;left:var(--van-padding-md);height:1px;background:var(--van-border-color);transform:scaleY(.5);content:""}.van-material-action-bar__main{display:flex;align-items:center;min-height:22px}.van-material-action-bar__detail{display:inline-flex;flex:1 1 0;gap:2px;align-items:center;min-width:0;padding:0;overflow:hidden;color:var(--van-gray-9);font:inherit;font-size:var(--van-material-action-bar-title-font-size);font-weight:var(--van-material-action-bar-title-font-weight);line-height:var(--van-line-height-lg);text-align:left;background:transparent;border:0;cursor:pointer;transition:opacity var(--van-animation-duration-fast)}.van-material-action-bar__detail:active{opacity:var(--van-active-opacity)}.van-material-action-bar__detail>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.van-material-action-bar__stepper-prefix{flex:none;margin:0 4px 0 8px;color:var(--van-text-color-2);font-size:var(--van-font-size-md);line-height:var(--van-line-height-lg)}.van-material-action-bar__stepper-wrapper{position:relative;flex:none;margin-left:4px}.van-material-action-bar__kind-tag{flex:none;margin-left:4px}.van-material-action-bar__stepper{flex:none;margin-left:0;--van-stepper-input-width: 24px;--van-stepper-input-height: 18px;--van-stepper-input-font-size: var(--van-font-size-md);--van-stepper-input-line-height: var(--van-line-height-lg)}.van-material-action-bar__number-trigger{position:absolute;z-index:1;top:0;left:18px;width:24px;height:18px;padding:0;background:transparent;border:0;cursor:pointer}.van-material-action-bar__unit{display:flex;flex:none;align-items:center;width:32px;height:18px;margin-left:8px;overflow:hidden;color:var(--van-text-color-2);font-size:var(--van-font-size-md);line-height:18px;text-overflow:ellipsis;white-space:nowrap}.van-material-action-bar__desc{margin:6px 0 0;overflow:hidden;color:var(--van-gray-6);font-size:var(--van-font-size-md);line-height:20px;text-overflow:ellipsis;white-space:nowrap}.van-material-action-bar__warning{margin:2px 0 0;color:var(--van-red-500);font-size:var(--van-font-size-sm);line-height:20px}.van-material-action-bar__picking-outbound{display:flex;gap:4px;margin:2px 0 0;color:var(--van-text-color);font-size:var(--van-font-size-sm);line-height:20px}.van-material-action-bar__picking-label{color:var(--van-gray-6)}.van-material-action-bar__picking-value{font-weight:600}.van-material-action-bar__bottom{display:flex;flex-direction:column;gap:2px;margin-top:2px}.van-material-action-bar__keyword{color:var(--van-primary-color)}.van-material-add{position:relative;display:flex;flex-direction:column;height:calc(100vh - 96px);max-height:calc(100vh - 96px);bottom:56px;overflow:hidden;background:var(--van-gray-2)}.van-material-add>.van-action-sheet__content{display:flex;flex:1;flex-direction:column;min-height:0;gap:0;padding:0;overflow:hidden}.van-material-add__nav{flex:none;--van-nav-bar-background-color: var(--van-gray-2)}.van-material-add__nav .van-nav-bar__left--slot{left:var(--van-padding-md)}.van-material-add__nav .van-nav-bar__right--slot{right:var(--van-padding-md)}.van-material-add__search{flex:none;padding:8px var(--van-padding-md);--van-search-padding: 0;--van-search-background-color: var(--van-gray-2);--van-search-content-background-color: var(--van-white)}.van-material-add__search .van-search__field{padding-left:0}.van-material-add__tabs{flex:none;padding-left:8px;--van-tabs-line-height: 44px;--van-tab-font-size: var(--van-font-size-md);--van-tabs-bottom-bar-width: 40px;--van-tabs-nav-background-color: transparent}.van-material-add__filter-tags{display:flex;flex:none;gap:6px;padding:12px var(--van-padding-md)}.van-material-add__filter-tags .van-filter-tag{min-width:56px;--van-filter-tag-background-color: var(--van-gray-4)}.van-material-add__body{flex:1;min-height:0;padding:0 var(--van-padding-md) 12px;overflow-y:auto}.van-material-add__tree-card{margin-bottom:12px;overflow:hidden;background:var(--van-white);border-radius:8px}.van-material-add__catalog-leaf{overflow:hidden}.van-material-add__material-list{overflow:hidden;background:var(--van-white);border-radius:8px}.van-material-add__search-state{display:flex;align-items:center;justify-content:center;min-height:160px}.van-material-add__footer{position:relative;z-index:2;flex:none;background:var(--van-white);box-shadow:0 -2px 5px rgba(27,33,41,.1)}.van-material-add__footer .van-bottom-action-bar{box-shadow:none}.van-material-add__selected-panel{position:absolute;right:0;bottom:60px;left:0;display:flex;flex-direction:column;max-height:340px;overflow:hidden;background:var(--van-white);box-shadow:0 -2px 5px rgba(27,33,41,.1)}.van-material-add__selected-header{display:flex;align-items:center;justify-content:space-between;padding:12px var(--van-padding-md) 4px}.van-material-add__clear,.van-material-add__collapse{padding:0;background:transparent;border:0}.van-material-add__clear{color:var(--van-primary-color);font:inherit;font-size:var(--van-font-size-md)}.van-material-add__collapse{display:inline-flex;gap:2px;align-items:center;color:var(--van-gray-6);font:inherit;font-size:var(--van-font-size-md)}.van-material-add__selected-list{display:flex;flex-direction:column;gap:6px;padding:var(--van-padding-xs) var(--van-padding-md);overflow-y:auto}.van-material-add__detail-page{position:fixed;z-index:3000;inset:0;display:flex;flex-direction:column;overflow:hidden;background:var(--van-gray-2)}.van-material-add__detail-banner{position:absolute;top:0;right:0;left:0;height:320px;overflow:hidden;background:var(--van-gray-8)}.van-material-add__detail-swipe{height:320px;touch-action:pan-y}.van-material-add__detail-image{width:100%;height:310px;background-position:center;background-size:cover}.van-material-add__detail-image--motor{background-image:url(/dog1.jpg)}.van-material-add__detail-image--blower{background-image:url(/dog2.jpg)}.van-material-add__detail-image--coil{background-image:url(/dog3.jpg)}.van-material-add__detail-dots{position:absolute;z-index:2;top:226px;left:50%;display:flex;gap:6px;transform:translate(-50%)}.van-material-add__detail-dots>i{width:6px;height:6px;background:rgba(255,255,255,.55);border-radius:50%}.van-material-add__detail-dot--active{background:var(--van-white)!important}.van-material-add__detail-close{position:absolute;z-index:1;top:56px;left:var(--van-padding-md);display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;color:var(--van-gray-9);background:var(--van-gray-3);border:0;border-radius:50%;box-shadow:0 2px 5px rgba(27,33,41,.1)}.van-material-add__detail-content{position:relative;z-index:1;display:flex;flex:1;flex-direction:column;min-height:0;margin-top:246px;overflow:hidden;background:var(--van-white);border-radius:16px 16px 0 0}.van-material-add__detail-body{flex:1;min-height:0;padding:16px var(--van-padding-md) 24px;overflow-y:auto}.van-material-add__detail-section+.van-material-add__detail-section{margin-top:24px}.van-material-add__detail-section .van-blue-mark-header{margin-bottom:8px;padding:0}.van-material-add__detail-card{padding:8px 12px;color:var(--van-gray-9);font-size:var(--van-font-size-md);line-height:var(--van-line-height-lg);background:linear-gradient(90deg,var(--van-gray-2),rgba(241,244,246,.2));border-radius:8px}.van-material-add__detail-info-rows{display:flex;flex-direction:column;gap:8px}.van-material-add__detail-row{display:flex;gap:16px;justify-content:space-between;min-height:22px}.van-material-add__detail-row>span{flex:none;width:56px;color:var(--van-gray-6)}.van-material-add__detail-row>strong{flex:1;color:var(--van-gray-9);font-weight:400;text-align:right;white-space:pre-line}.van-material-add__detail-link{color:var(--van-primary-color)!important;font-weight:var(--van-font-weight-bold)!important}.van-material-add-detail-enter-active{transition:transform var(--van-animation-duration-fast) var(--van-animation-timing-function-enter);will-change:transform}.van-material-add-detail-leave-active{transition:transform var(--van-animation-duration-fast) var(--van-animation-timing-function-leave);will-change:transform}.van-material-add-detail-enter-from,.van-material-add-detail-leave-to{transform:translateY(100%)}.van-material-add-detail-section-enter-active,.van-material-add-detail-section-leave-active{overflow:hidden;transition:max-height .2s ease,opacity .2s ease}.van-material-add-detail-section-enter-from,.van-material-add-detail-section-leave-to{max-height:0;opacity:0}.van-material-add-detail-section-enter-to,.van-material-add-detail-section-leave-from{max-height:480px;opacity:1}.van-material-add-item{position:relative;padding:10px var(--van-padding-md);cursor:pointer;transition:background-color .2s ease}.van-material-add-item:active{background-color:var(--van-active-color)}.van-material-add-item--selected{padding:10px var(--van-padding-md);background:var(--van-gray-2);border-radius:8px}.van-material-add-item--selected:after{display:none}.van-material-add-item:not(:last-child):after{position:absolute;right:var(--van-padding-md);bottom:0;left:var(--van-padding-md);height:1px;background:var(--van-border-color);transform:scaleY(.5);content:""}.van-material-add-item__main{display:flex;align-items:center;min-height:22px}.van-material-add-item__detail{display:inline-flex;flex:1;gap:2px;align-items:center;min-width:0;padding:0;overflow:hidden;color:var(--van-gray-9);font:inherit;font-size:var(--van-font-size-md);line-height:var(--van-line-height-lg);text-align:left;background:transparent;border:0}.van-material-add-item__detail>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.van-material-add-item__kind-tag{flex:none;margin-left:4px}.van-material-add-item__stepper{flex:none;margin-left:8px;--van-stepper-input-width: 32px;--van-stepper-input-height: 18px;--van-stepper-input-font-size: var(--van-font-size-md);--van-stepper-input-line-height: var(--van-line-height-lg)}.van-material-add-item__unit{width:32px;margin-left:8px;overflow:hidden;color:var(--van-text-color-2);font-size:var(--van-font-size-md);line-height:var(--van-line-height-lg);text-overflow:ellipsis;white-space:nowrap}.van-material-add-item__desc{margin:4px 0 0;overflow:hidden;color:var(--van-gray-6);font-size:var(--van-font-size-sm);line-height:20px;text-overflow:ellipsis;white-space:nowrap}.van-material-add-item__keyword{color:var(--van-primary-color)}