persagy-vant 0.0.30 → 0.0.32

package/es/material-action-bar/MaterialActionBar.mjs

@@ -0,0 +1,132 @@
+import { defineComponent, ref, createVNode as _createVNode } from "vue";
+import { Dialog } from "../dialog/index.mjs";
+import { Icon } from "../icon/index.mjs";
+import { Stepper } from "../stepper/index.mjs";
+import { Tag } from "../tag/index.mjs";
+import { createNamespace, truthProp } from "../utils/index.mjs";
+const [name, bem] = createNamespace("material-action-bar");
+var stdin_default = defineComponent({
+  name,
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    modelValue: {
+      type: Number,
+      required: true
+    },
+    keyword: {
+      type: String,
+      default: ""
+    },
+    selected: Boolean,
+    enableInputDialog: truthProp,
+    showWarning: Boolean,
+    warning: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue", "detail"],
+  setup(props, {
+    emit
+  }) {
+    const showInputDialog = ref(false);
+    const inputValue = ref("");
+    const openInputDialog = () => {
+      if (!props.enableInputDialog)
+        return;
+      inputValue.value = String(props.modelValue);
+      showInputDialog.value = true;
+    };
+    const confirmInputValue = () => {
+      const value = Number(inputValue.value);
+      if (!Number.isNaN(value)) {
+        emit("update:modelValue", Math.max(0, value));
+      }
+    };
+    const highlight = (text) => {
+      const query = props.keyword.trim();
+      if (!query)
+        return text;
+      const lowerText = text.toLowerCase();
+      const lowerQuery = query.toLowerCase();
+      const parts = [];
+      let start = 0;
+      let index = lowerText.indexOf(lowerQuery, start);
+      while (index !== -1) {
+        if (index > start)
+          parts.push(text.slice(start, index));
+        parts.push(_createVNode("span", {
+          "class": bem("keyword")
+        }, [text.slice(index, index + query.length)]));
+        start = index + query.length;
+        index = lowerText.indexOf(lowerQuery, start);
+      }
+      if (start < text.length)
+        parts.push(text.slice(start));
+      return parts;
+    };
+    return () => _createVNode("div", {
+      "class": bem({
+        selected: props.selected
+      })
+    }, [_createVNode("div", {
+      "class": bem("main")
+    }, [_createVNode("button", {
+      "type": "button",
+      "class": bem("detail"),
+      "onClick": () => emit("detail", props.item)
+    }, [_createVNode("span", null, [highlight(props.item.name)]), props.selected && props.item.kind && _createVNode(Tag, {
+      "class": bem("kind-tag"),
+      "color": props.item.kind === "material" ? "#d9ebff" : "#d9f7f7",
+      "textColor": props.item.kind === "material" ? "var(--van-primary-color)" : "#00aeb3"
+    }, {
+      default: () => [props.item.kind === "material" ? "\u7269\u8D44" : "\u5DE5\u5177"]
+    }), _createVNode(Icon, {
+      "name": "arrow",
+      "size": "12"
+    }, null)]), _createVNode("div", {
+      "class": bem("stepper-wrapper")
+    }, [_createVNode(Stepper, {
+      "class": bem("stepper"),
+      "modelValue": props.modelValue,
+      "min": 0,
+      "theme": "round",
+      "buttonSize": 18,
+      "disableInput": true,
+      "onUpdate:modelValue": (value) => emit("update:modelValue", Number(value))
+    }, null), props.enableInputDialog && _createVNode("button", {
+      "type": "button",
+      "class": bem("number-trigger"),
+      "aria-label": "\u8F93\u5165\u6570\u91CF",
+      "onClick": openInputDialog
+    }, null)]), _createVNode("span", {
+      "class": bem("unit")
+    }, [props.item.unit])]), _createVNode("p", {
+      "class": bem("desc")
+    }, [highlight(props.item.detail)]), props.showWarning && props.warning && _createVNode("p", {
+      "class": bem("warning")
+    }, [props.warning]), _createVNode(Dialog.Component, {
+      "show": showInputDialog.value,
+      "inputValue": inputValue.value,
+      "inputAlign": "left",
+      "title": "\u8F93\u5165\u6570\u91CF",
+      "inputPlaceholder": "\u8BF7\u8F93\u5165\u6570\u91CF",
+      "inputAutofocus": true,
+      "showInput": true,
+      "showCancelButton": true,
+      "onUpdate:show": (value) => {
+        showInputDialog.value = value;
+      },
+      "onUpdate:inputValue": (value) => {
+        inputValue.value = value;
+      },
+      "onConfirm": confirmInputValue
+    }, null)]);
+  }
+});
+export {
+  stdin_default as default
+};

package/es/material-action-bar/index.css

@@ -0,0 +1 @@
+.van-material-action-bar{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:none;gap:2px;align-items:center;max-width:calc(100% - 96px);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;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-wrapper{position:relative;margin-left:auto}.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: 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-action-bar__number-trigger{position:absolute;z-index:1;top:0;left:18px;width:32px;height:18px;padding:0;background:transparent;border:0;cursor:pointer}.van-material-action-bar__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-action-bar__desc{margin:2px 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-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__keyword{color:var(--van-primary-color)}

package/es/material-action-bar/index.d.ts

@@ -0,0 +1,58 @@
+export declare const MaterialActionBar: import("../utils").WithInstall<import("vue").DefineComponent<{
+    item: {
+        type: import("vue").PropType<import("./MaterialActionBar").MaterialActionBarItem>;
+        required: true;
+    };
+    modelValue: {
+        type: NumberConstructor;
+        required: true;
+    };
+    keyword: {
+        type: StringConstructor;
+        default: string;
+    };
+    selected: BooleanConstructor;
+    enableInputDialog: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showWarning: BooleanConstructor;
+    warning: {
+        type: StringConstructor;
+        default: string;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "detail")[], "update:modelValue" | "detail", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    item: {
+        type: import("vue").PropType<import("./MaterialActionBar").MaterialActionBarItem>;
+        required: true;
+    };
+    modelValue: {
+        type: NumberConstructor;
+        required: true;
+    };
+    keyword: {
+        type: StringConstructor;
+        default: string;
+    };
+    selected: BooleanConstructor;
+    enableInputDialog: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showWarning: BooleanConstructor;
+    warning: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onDetail?: ((...args: any[]) => any) | undefined;
+}, {
+    selected: boolean;
+    warning: string;
+    keyword: string;
+    enableInputDialog: boolean;
+    showWarning: boolean;
+}>>;
+export default MaterialActionBar;
+export type { MaterialActionBarItem } from './MaterialActionBar';

package/es/material-action-bar/index.less

@@ -0,0 +1,33 @@
+.van-material-action-bar {
+  position: relative;
+  padding: 10px var(--van-padding-md);
+  &--selected {
+    padding: 10px var(--van-padding-md);
+    background: var(--van-gray-2);
+    border-radius: 8px;
+
+    &::after { display: none; }
+  }
+
+  &: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: '';
+  }
+
+  &__main { display: flex; align-items: center; min-height: 22px; }
+  &__detail { display: inline-flex; flex: none; gap: 2px; align-items: center; max-width: calc(100% - 96px); 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; cursor: pointer; transition: opacity var(--van-animation-duration-fast); &:active { opacity: var(--van-active-opacity); } > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
+  &__stepper-wrapper { position: relative; margin-left: auto; }
+  &__kind-tag { flex: none; margin-left: 4px; }
+  &__stepper { flex: none; margin-left: 0; --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); }
+  &__number-trigger { position: absolute; z-index: 1; top: 0; left: 18px; width: 32px; height: 18px; padding: 0; background: transparent; border: 0; cursor: pointer; }
+  &__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; }
+  &__desc { margin: 2px 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; }
+  &__warning { margin: 2px 0 0; color: var(--van-red-500); font-size: var(--van-font-size-sm); line-height: 20px; }
+  &__keyword { color: var(--van-primary-color); }
+}

package/es/material-action-bar/index.mjs

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

package/es/material-action-bar/style/index.mjs

@@ -0,0 +1,19 @@
+import "../../style/base.css";
+import "../../action-bar/index.css";
+import "../../badge/index.css";
+import "../../icon/index.css";
+import "../../tag/index.css";
+import "../../loading/index.css";
+import "../../button/index.css";
+import "../../action-bar-button/index.css";
+import "../../overlay/index.css";
+import "../../popup/index.css";
+import "../../checkbox-group/index.css";
+import "../../checkbox/index.css";
+import "../../radio-group/index.css";
+import "../../radio/index.css";
+import "../../cell/index.css";
+import "../../field/index.css";
+import "../../dialog/index.css";
+import "../../stepper/index.css";
+import "../index.css";

package/es/material-action-bar/style/less.mjs

@@ -0,0 +1,19 @@
+import "../../style/base.less";
+import "../../action-bar/index.less";
+import "../../badge/index.less";
+import "../../icon/index.less";
+import "../../tag/index.less";
+import "../../loading/index.less";
+import "../../button/index.less";
+import "../../action-bar-button/index.less";
+import "../../overlay/index.less";
+import "../../popup/index.less";
+import "../../checkbox-group/index.less";
+import "../../checkbox/index.less";
+import "../../radio-group/index.less";
+import "../../radio/index.less";
+import "../../cell/index.less";
+import "../../field/index.less";
+import "../../dialog/index.less";
+import "../../stepper/index.less";
+import "../index.less";

package/es/material-add/MaterialAdd.mjs

@@ -11,8 +11,9 @@ import { SwipeItem } from "../swipe-item/index.mjs";
 import { Tab } from "../tab/index.mjs";
 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 MaterialAddItemComponent from "./MaterialAddItem.mjs";
 const [name, bem] = createNamespace("material-add");
 const detailBanners = ["motor", "blower", "coil"];
 const defaultItems = [{
@@ -379,7 +380,7 @@ var stdin_default = defineComponent({
       detailBannerIndex.value = 0;
       detailItem.value = material;
     };
-    const renderMaterialCell = (item, index, selected = false) => _createVNode(MaterialAddItemComponent, {
+    const renderMaterialCell = (item, index, selected = false) => _createVNode(MaterialActionBar, {
       "key": item.id,
       "item": item,
       "modelValue": quantities.value[index],
@@ -653,11 +654,15 @@ var stdin_default = defineComponent({
       }, null)]), _createVNode(Teleport, {
         "to": "body"
       }, {
-        default: () => [_createVNode(Transition, {
-          "name": "van-material-add-detail"
-        }, {
-          default: () => [detailItem.value && renderDetail()]
-        })]
+        default: () => [_createVNode(MaterialDetail, {
+          "show": !!detailItem.value,
+          "item": detailItem.value,
+          "categories": props.categories,
+          "onUpdate:show": (show) => {
+            if (!show)
+              detailItem.value = void 0;
+          }
+        }, null)]
       })])]
     });
   }

package/es/material-add/index.css

@@ -1 +1 @@
-.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;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__catalog-leaf .van-material-add-item:after{position:absolute;right:var(--van-padding-md);bottom:0;left:var(--van-padding-md);display:block;height:1px;content:"";background:var(--van-border-color);transform:scaleY(.5)}.van-tree-select__children>.van-tree-select__node:last-child>.van-material-add__catalog-leaf .van-material-add-item:after{display:none}.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(./assets/material-banner-motor.png)}.van-material-add__detail-image--blower{background-image:url(./assets/material-banner-blower.png)}.van-material-add__detail-image--coil{background-image:url(./assets/material-banner-coil.png)}.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{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:none;gap:2px;align-items:center;max-width:calc(100% - 96px);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;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-wrapper{position:relative;margin-left:auto}.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: 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-action-bar__number-trigger{position:absolute;z-index:1;top:0;left:18px;width:32px;height:18px;padding:0;background:transparent;border:0;cursor:pointer}.van-material-action-bar__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-action-bar__desc{margin:2px 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-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__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;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__catalog-leaf .van-material-action-bar:after{position:absolute;right:var(--van-padding-md);bottom:0;left:var(--van-padding-md);display:block;height:1px;content:"";background:var(--van-border-color);transform:scaleY(.5)}.van-tree-select__children>.van-tree-select__node:last-child>.van-material-add__catalog-leaf .van-material-action-bar:after{display:none}.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)}

package/es/material-add/index.less

@@ -1,3 +1,5 @@
+@import '../material-action-bar/index.less';
+
 .van-material-add {
   position: relative;
   display: flex;
@@ -22,7 +24,7 @@
   &__catalog-leaf { overflow: hidden; }
   // Tree leaf nodes each sit inside their own wrapper, so restore the list
   // divider here instead of relying on the item sibling selector.
-  &__catalog-leaf .van-material-add-item::after {
+  &__catalog-leaf .van-material-action-bar::after {
     position: absolute;
     right: var(--van-padding-md);
     bottom: 0;
@@ -33,7 +35,7 @@
     background: var(--van-border-color);
     transform: scaleY(.5);
   }
-  .van-tree-select__children > .van-tree-select__node:last-child > &__catalog-leaf .van-material-add-item::after { display: none; }
+  .van-tree-select__children > .van-tree-select__node:last-child > &__catalog-leaf .van-material-action-bar::after { display: none; }
   &__material-list { overflow: hidden; background: var(--van-white); border-radius: 8px; }
   &__empty { padding: 32px 16px; color: var(--van-text-color-3); font-size: var(--van-font-size-md); text-align: center; }
   &__footer { position: relative; z-index: 2; flex: none; background: var(--van-white); box-shadow: 0 -2px 5px rgb(27 33 41 / 10%); .van-bottom-action-bar { box-shadow: none; } }
@@ -47,9 +49,9 @@
   &__detail-banner { position: absolute; top: 0; right: 0; left: 0; height: 320px; overflow: hidden; background: var(--van-gray-8); }
   &__detail-swipe { height: 320px; touch-action: pan-y; }
   &__detail-image { width: 100%; height: 310px; background-position: center; background-size: cover; }
-  &__detail-image--motor { background-image: url('./assets/material-banner-motor.png'); }
-  &__detail-image--blower { background-image: url('./assets/material-banner-blower.png'); }
-  &__detail-image--coil { background-image: url('./assets/material-banner-coil.png'); }
+  &__detail-image--motor { background-image: url('/dog1.jpg'); }
+  &__detail-image--blower { background-image: url('/dog2.jpg'); }
+  &__detail-image--coil { background-image: url('/dog3.jpg'); }
   &__detail-dots { position: absolute; z-index: 2; top: 226px; left: 50%; display: flex; gap: 6px; transform: translateX(-50%); > i { width: 6px; height: 6px; background: rgb(255 255 255 / 55%); border-radius: 50%; } }
   &__detail-dot--active { background: var(--van-white) !important; }
   &__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 rgb(27 33 41 / 10%); }

package/es/material-add/style/index.mjs

@@ -1,10 +1,14 @@
 import "../../style/base.css";
+import "../../action-bar/index.css";
 import "../../badge/index.css";
 import "../../icon/index.css";
+import "../../image/index.css";
 import "../../filter-tag/index.css";
 import "../../tag/index.css";
+import "../../label/index.css";
 import "../../loading/index.css";
 import "../../button/index.css";
+import "../../action-bar-button/index.css";
 import "../../overlay/index.css";
 import "../../popup/index.css";
 import "../../popover/index.css";
@@ -19,12 +23,15 @@ import "../../cell/index.css";
 import "../../tree-select/index.css";
 import "../../field/index.css";
 import "../../search/index.css";
+import "../../dialog/index.css";
 import "../../divider/index.css";
 import "../../blue-mark/index.css";
 import "../../sticky/index.css";
 import "../../swipe/index.css";
 import "../../swipe-item/index.css";
+import "../../material-detail/index.css";
 import "../../tabs/index.css";
 import "../../tab/index.css";
 import "../../stepper/index.css";
+import "../../material-action-bar/index.css";
 import "../index.css";

package/es/material-add/style/less.mjs

@@ -1,10 +1,14 @@
 import "../../style/base.less";
+import "../../action-bar/index.less";
 import "../../badge/index.less";
 import "../../icon/index.less";
+import "../../image/index.less";
 import "../../filter-tag/index.less";
 import "../../tag/index.less";
+import "../../label/index.less";
 import "../../loading/index.less";
 import "../../button/index.less";
+import "../../action-bar-button/index.less";
 import "../../overlay/index.less";
 import "../../popup/index.less";
 import "../../popover/index.less";
@@ -19,12 +23,15 @@ import "../../cell/index.less";
 import "../../tree-select/index.less";
 import "../../field/index.less";
 import "../../search/index.less";
+import "../../dialog/index.less";
 import "../../divider/index.less";
 import "../../blue-mark/index.less";
 import "../../sticky/index.less";
 import "../../swipe/index.less";
 import "../../swipe-item/index.less";
+import "../../material-detail/index.less";
 import "../../tabs/index.less";
 import "../../tab/index.less";
 import "../../stepper/index.less";
+import "../../material-action-bar/index.less";
 import "../index.less";

package/es/material-detail/MaterialDetail.d.ts

@@ -0,0 +1,64 @@
+import { type ExtractPropTypes, type PropType } from 'vue';
+import { type Numeric } from '../utils';
+import type { MaterialAddCategory, MaterialAddItem } from '../material-add/types';
+export declare type MaterialDetailField = {
+    label: string;
+    content: Numeric;
+    type?: 'default' | 'link';
+};
+declare const materialDetailProps: {
+    show: BooleanConstructor;
+    item: PropType<MaterialAddItem>;
+    categories: {
+        type: PropType<MaterialAddCategory[]>;
+        default: () => never[];
+    };
+    fields: {
+        type: PropType<MaterialDetailField[]>;
+        default: () => never[];
+    };
+    images: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+};
+export declare type MaterialDetailProps = ExtractPropTypes<typeof materialDetailProps>;
+declare const _default: import("vue").DefineComponent<{
+    show: BooleanConstructor;
+    item: PropType<MaterialAddItem>;
+    categories: {
+        type: PropType<MaterialAddCategory[]>;
+        default: () => never[];
+    };
+    fields: {
+        type: PropType<MaterialDetailField[]>;
+        default: () => never[];
+    };
+    images: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:show"[], "update:show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    show: BooleanConstructor;
+    item: PropType<MaterialAddItem>;
+    categories: {
+        type: PropType<MaterialAddCategory[]>;
+        default: () => never[];
+    };
+    fields: {
+        type: PropType<MaterialDetailField[]>;
+        default: () => never[];
+    };
+    images: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+}>> & {
+    "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+}, {
+    show: boolean;
+    fields: MaterialDetailField[];
+    images: string[];
+    categories: MaterialAddCategory[];
+}>;
+export default _default;