persagy-vant 0.0.30 → 0.0.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/cell/Cell.d.ts +34 -1
- package/es/cell/Cell.mjs +48 -12
- package/es/cell/index.css +1 -1
- package/es/cell/index.d.ts +20 -1
- package/es/cell/index.less +19 -0
- package/es/cell/var.less +1 -1
- package/es/collapse-item/CollapseItem.d.ts +25 -0
- package/es/collapse-item/index.d.ts +18 -0
- package/es/content-panel/ContentPanel.d.ts +46 -0
- package/es/content-panel/ContentPanel.mjs +72 -0
- package/es/content-panel/index.css +1 -0
- package/es/content-panel/index.d.ts +33 -0
- package/es/content-panel/index.less +54 -0
- package/es/content-panel/index.mjs +8 -0
- package/es/content-panel/style/index.mjs +11 -0
- package/es/content-panel/style/less.mjs +11 -0
- package/es/content-panel/var.css +0 -0
- package/es/content-panel/var.less +3 -0
- package/es/dialog/Dialog.d.ts +4 -0
- package/es/dialog/Dialog.mjs +14 -1
- package/es/dialog/function-call.d.ts +2 -0
- package/es/dialog/types.d.ts +2 -0
- package/es/field/Field.d.ts +25 -0
- package/es/field/Field.mjs +1 -1
- package/es/field/index.d.ts +18 -0
- package/es/index.d.ts +6 -1
- package/es/index.mjs +16 -1
- package/es/info-card/InfoCard.d.ts +1 -0
- package/es/info-card/InfoCard.mjs +1 -0
- package/es/label/Label.d.ts +67 -0
- package/es/label/Label.mjs +22 -7
- package/es/label/index.css +1 -1
- package/es/label/index.d.ts +45 -0
- package/es/label/index.less +19 -0
- package/es/label/var.less +4 -1
- package/es/loading/Loading.mjs +18 -21
- package/es/material-action-bar/MaterialActionBar.d.ts +66 -0
- package/es/material-action-bar/MaterialActionBar.mjs +132 -0
- package/es/material-action-bar/index.css +1 -0
- package/es/material-action-bar/index.d.ts +58 -0
- package/es/material-action-bar/index.less +33 -0
- package/es/material-action-bar/index.mjs +8 -0
- package/es/material-action-bar/style/index.mjs +19 -0
- package/es/material-action-bar/style/less.mjs +19 -0
- package/es/material-add/MaterialAdd.mjs +12 -7
- package/es/material-add/index.css +1 -1
- package/es/material-add/index.less +7 -5
- package/es/material-add/style/index.mjs +7 -0
- package/es/material-add/style/less.mjs +7 -0
- package/es/material-detail/MaterialDetail.d.ts +64 -0
- package/es/material-detail/MaterialDetail.mjs +192 -0
- package/es/material-detail/index.css +1 -0
- package/es/material-detail/index.d.ts +40 -0
- package/es/material-detail/index.less +20 -0
- package/es/material-detail/index.mjs +8 -0
- package/es/material-detail/style/index.mjs +11 -0
- package/es/material-detail/style/less.mjs +11 -0
- package/es/material-display-bar/MaterialDisplayBar.d.ts +159 -0
- package/es/material-display-bar/MaterialDisplayBar.mjs +109 -0
- package/es/material-display-bar/index.css +1 -0
- package/es/material-display-bar/index.d.ts +103 -0
- package/es/material-display-bar/index.less +113 -0
- package/es/material-display-bar/index.mjs +8 -0
- package/es/material-display-bar/style/index.mjs +11 -0
- package/es/material-display-bar/style/less.mjs +11 -0
- package/es/material-display-bar/var.css +0 -0
- package/es/material-display-bar/var.less +12 -0
- package/es/rate/RateCell.mjs +4 -1
- package/es/rate/index.css +1 -1
- package/es/rate/index.less +16 -3
- package/es/search/Search.d.ts +14 -1
- package/es/search/Search.mjs +5 -3
- package/es/search/index.css +1 -1
- package/es/search/index.d.ts +9 -0
- package/es/search/index.less +10 -0
- package/es/search/types.d.ts +1 -0
- package/es/step/index.css +1 -1
- package/es/step/var.less +2 -2
- package/es/style/base.css +1 -1
- package/es/style/css-variables.css +1 -1
- package/es/style/var.less +1 -1
- package/es/title-bar/TitleBar.d.ts +85 -0
- package/es/title-bar/TitleBar.mjs +62 -0
- package/es/title-bar/index.css +1 -0
- package/es/title-bar/index.d.ts +60 -0
- package/es/title-bar/index.less +25 -0
- package/es/title-bar/index.mjs +8 -0
- package/es/title-bar/style/index.mjs +4 -0
- package/es/title-bar/style/less.mjs +4 -0
- package/es/title-bar/var.css +0 -0
- package/es/title-bar/var.less +6 -0
- package/es/tree-select/TreeSelect.d.ts +13 -0
- package/es/tree-select/TreeSelect.mjs +4 -2
- package/es/tree-select/index.css +1 -1
- package/es/tree-select/index.d.ts +9 -0
- package/es/tree-select/index.less +6 -0
- package/lib/cell/Cell.d.ts +34 -1
- package/lib/cell/Cell.js +46 -10
- package/lib/cell/index.css +1 -1
- package/lib/cell/index.d.ts +20 -1
- package/lib/cell/index.less +19 -0
- package/lib/cell/var.less +1 -1
- package/lib/collapse-item/CollapseItem.d.ts +25 -0
- package/lib/collapse-item/index.d.ts +18 -0
- package/lib/content-panel/ContentPanel.d.ts +46 -0
- package/lib/content-panel/ContentPanel.js +91 -0
- package/lib/content-panel/index.css +1 -0
- package/lib/content-panel/index.d.ts +33 -0
- package/lib/content-panel/index.js +37 -0
- package/lib/content-panel/index.less +54 -0
- package/lib/content-panel/style/index.js +11 -0
- package/lib/content-panel/style/less.js +11 -0
- package/lib/content-panel/var.css +0 -0
- package/lib/content-panel/var.less +3 -0
- package/lib/dialog/Dialog.d.ts +4 -0
- package/lib/dialog/Dialog.js +13 -0
- package/lib/dialog/function-call.d.ts +2 -0
- package/lib/dialog/types.d.ts +2 -0
- package/lib/dog1.jpg +0 -0
- package/lib/dog2.jpg +0 -0
- package/lib/dog3.jpg +0 -0
- package/lib/field/Field.d.ts +25 -0
- package/lib/field/Field.js +1 -1
- package/lib/field/index.d.ts +18 -0
- package/lib/index.css +1 -1
- package/lib/index.d.ts +6 -1
- package/lib/index.js +16 -1
- package/lib/index.less +6 -1
- package/lib/info-card/InfoCard.d.ts +1 -0
- package/lib/info-card/InfoCard.js +1 -0
- package/lib/label/Label.d.ts +67 -0
- package/lib/label/Label.js +21 -6
- package/lib/label/index.css +1 -1
- package/lib/label/index.d.ts +45 -0
- package/lib/label/index.less +19 -0
- package/lib/label/var.less +4 -1
- package/lib/loading/Loading.js +18 -21
- package/lib/material-action-bar/MaterialActionBar.d.ts +66 -0
- package/lib/material-action-bar/MaterialActionBar.js +151 -0
- package/lib/material-action-bar/index.css +1 -0
- package/lib/material-action-bar/index.d.ts +58 -0
- package/lib/material-action-bar/index.js +37 -0
- package/lib/material-action-bar/index.less +33 -0
- package/lib/material-action-bar/style/index.js +19 -0
- package/lib/material-action-bar/style/less.js +19 -0
- package/lib/material-add/MaterialAdd.js +12 -7
- package/lib/material-add/index.css +1 -1
- package/lib/material-add/index.less +7 -5
- package/lib/material-add/style/index.js +7 -0
- package/lib/material-add/style/less.js +7 -0
- package/lib/material-detail/MaterialDetail.d.ts +64 -0
- package/lib/material-detail/MaterialDetail.js +211 -0
- package/lib/material-detail/index.css +1 -0
- package/lib/material-detail/index.d.ts +40 -0
- package/lib/material-detail/index.js +37 -0
- package/lib/material-detail/index.less +20 -0
- package/lib/material-detail/style/index.js +11 -0
- package/lib/material-detail/style/less.js +11 -0
- package/lib/material-display-bar/MaterialDisplayBar.d.ts +159 -0
- package/lib/material-display-bar/MaterialDisplayBar.js +128 -0
- package/lib/material-display-bar/index.css +1 -0
- package/lib/material-display-bar/index.d.ts +103 -0
- package/lib/material-display-bar/index.js +37 -0
- package/lib/material-display-bar/index.less +113 -0
- package/lib/material-display-bar/style/index.js +11 -0
- package/lib/material-display-bar/style/less.js +11 -0
- package/lib/material-display-bar/var.css +0 -0
- package/lib/material-display-bar/var.less +12 -0
- package/lib/rate/RateCell.js +4 -1
- package/lib/rate/index.css +1 -1
- package/lib/rate/index.less +16 -3
- package/lib/search/Search.d.ts +14 -1
- package/lib/search/Search.js +5 -3
- package/lib/search/index.css +1 -1
- package/lib/search/index.d.ts +9 -0
- package/lib/search/index.less +10 -0
- package/lib/search/types.d.ts +1 -0
- package/lib/step/index.css +1 -1
- package/lib/step/var.less +2 -2
- package/lib/style/base.css +1 -1
- package/lib/style/css-variables.css +1 -1
- package/lib/style/var.less +1 -1
- package/lib/title-bar/TitleBar.d.ts +85 -0
- package/lib/title-bar/TitleBar.js +81 -0
- package/lib/title-bar/index.css +1 -0
- package/lib/title-bar/index.d.ts +60 -0
- package/lib/title-bar/index.js +37 -0
- package/lib/title-bar/index.less +25 -0
- package/lib/title-bar/style/index.js +4 -0
- package/lib/title-bar/style/less.js +4 -0
- package/lib/title-bar/var.css +0 -0
- package/lib/title-bar/var.less +6 -0
- package/lib/tree-select/TreeSelect.d.ts +13 -0
- package/lib/tree-select/TreeSelect.js +3 -1
- package/lib/tree-select/index.css +1 -1
- package/lib/tree-select/index.d.ts +9 -0
- package/lib/tree-select/index.less +6 -0
- package/lib/vant.cjs.js +1641 -1218
- package/lib/vant.es.js +1641 -1218
- package/lib/vant.js +1641 -1218
- package/lib/vant.min.js +1 -1
- package/lib/web-types.json +1 -1
- package/package.json +1 -1
- package/skills/use-persagy-vant/references/business-component-catalog.md +8 -3
- package/skills/use-persagy-vant/references/component-catalog.md +7 -4
- package/skills/use-persagy-vant/references/component-documentation.md +1 -1
- package/skills/use-persagy-vant/references/design-interaction-baseline.md +3 -3
- package/skills/use-persagy-vant/references/page-recipes.md +18 -5
- package/skills/use-persagy-vant/references/reuse-policy.md +1 -1
- package/skills/use-persagy-vant/references/usage-patterns.md +9 -1
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
.van-material-action-bar {
|
|
2
|
+
position: relative;
|
|
3
|
+
padding: 10px var(--van-padding-md);
|
|
4
|
+
&--selected {
|
|
5
|
+
padding: 10px var(--van-padding-md);
|
|
6
|
+
background: var(--van-gray-2);
|
|
7
|
+
border-radius: 8px;
|
|
8
|
+
|
|
9
|
+
&::after { display: none; }
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
&:not(:last-child)::after {
|
|
13
|
+
position: absolute;
|
|
14
|
+
right: var(--van-padding-md);
|
|
15
|
+
bottom: 0;
|
|
16
|
+
left: var(--van-padding-md);
|
|
17
|
+
height: 1px;
|
|
18
|
+
background: var(--van-border-color);
|
|
19
|
+
transform: scaleY(.5);
|
|
20
|
+
content: '';
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&__main { display: flex; align-items: center; min-height: 22px; }
|
|
24
|
+
&__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; } }
|
|
25
|
+
&__stepper-wrapper { position: relative; margin-left: auto; }
|
|
26
|
+
&__kind-tag { flex: none; margin-left: 4px; }
|
|
27
|
+
&__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); }
|
|
28
|
+
&__number-trigger { position: absolute; z-index: 1; top: 0; left: 18px; width: 32px; height: 18px; padding: 0; background: transparent; border: 0; cursor: pointer; }
|
|
29
|
+
&__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; }
|
|
30
|
+
&__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; }
|
|
31
|
+
&__warning { margin: 2px 0 0; color: var(--van-red-500); font-size: var(--van-font-size-sm); line-height: 20px; }
|
|
32
|
+
&__keyword { color: var(--van-primary-color); }
|
|
33
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { withInstall } from "../utils/index.mjs";
|
|
2
|
+
import _MaterialActionBar from "./MaterialActionBar.mjs";
|
|
3
|
+
const MaterialActionBar = withInstall(_MaterialActionBar);
|
|
4
|
+
var stdin_default = MaterialActionBar;
|
|
5
|
+
export {
|
|
6
|
+
MaterialActionBar,
|
|
7
|
+
stdin_default as default
|
|
8
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import "../../style/base.css";
|
|
2
|
+
import "../../action-bar/index.css";
|
|
3
|
+
import "../../badge/index.css";
|
|
4
|
+
import "../../icon/index.css";
|
|
5
|
+
import "../../tag/index.css";
|
|
6
|
+
import "../../loading/index.css";
|
|
7
|
+
import "../../button/index.css";
|
|
8
|
+
import "../../action-bar-button/index.css";
|
|
9
|
+
import "../../overlay/index.css";
|
|
10
|
+
import "../../popup/index.css";
|
|
11
|
+
import "../../checkbox-group/index.css";
|
|
12
|
+
import "../../checkbox/index.css";
|
|
13
|
+
import "../../radio-group/index.css";
|
|
14
|
+
import "../../radio/index.css";
|
|
15
|
+
import "../../cell/index.css";
|
|
16
|
+
import "../../field/index.css";
|
|
17
|
+
import "../../dialog/index.css";
|
|
18
|
+
import "../../stepper/index.css";
|
|
19
|
+
import "../index.css";
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import "../../style/base.less";
|
|
2
|
+
import "../../action-bar/index.less";
|
|
3
|
+
import "../../badge/index.less";
|
|
4
|
+
import "../../icon/index.less";
|
|
5
|
+
import "../../tag/index.less";
|
|
6
|
+
import "../../loading/index.less";
|
|
7
|
+
import "../../button/index.less";
|
|
8
|
+
import "../../action-bar-button/index.less";
|
|
9
|
+
import "../../overlay/index.less";
|
|
10
|
+
import "../../popup/index.less";
|
|
11
|
+
import "../../checkbox-group/index.less";
|
|
12
|
+
import "../../checkbox/index.less";
|
|
13
|
+
import "../../radio-group/index.less";
|
|
14
|
+
import "../../radio/index.less";
|
|
15
|
+
import "../../cell/index.less";
|
|
16
|
+
import "../../field/index.less";
|
|
17
|
+
import "../../dialog/index.less";
|
|
18
|
+
import "../../stepper/index.less";
|
|
19
|
+
import "../index.less";
|
|
@@ -11,8 +11,9 @@ import { SwipeItem } from "../swipe-item/index.mjs";
|
|
|
11
11
|
import { Tab } from "../tab/index.mjs";
|
|
12
12
|
import { Tabs } from "../tabs/index.mjs";
|
|
13
13
|
import TreeSelect from "../tree-select/index.mjs";
|
|
14
|
+
import MaterialActionBar from "../material-action-bar/index.mjs";
|
|
15
|
+
import MaterialDetail from "../material-detail/index.mjs";
|
|
14
16
|
import { createNamespace, makeArrayProp, makeStringProp } from "../utils/index.mjs";
|
|
15
|
-
import MaterialAddItemComponent from "./MaterialAddItem.mjs";
|
|
16
17
|
const [name, bem] = createNamespace("material-add");
|
|
17
18
|
const detailBanners = ["motor", "blower", "coil"];
|
|
18
19
|
const defaultItems = [{
|
|
@@ -379,7 +380,7 @@ var stdin_default = defineComponent({
|
|
|
379
380
|
detailBannerIndex.value = 0;
|
|
380
381
|
detailItem.value = material;
|
|
381
382
|
};
|
|
382
|
-
const renderMaterialCell = (item, index, selected = false) => _createVNode(
|
|
383
|
+
const renderMaterialCell = (item, index, selected = false) => _createVNode(MaterialActionBar, {
|
|
383
384
|
"key": item.id,
|
|
384
385
|
"item": item,
|
|
385
386
|
"modelValue": quantities.value[index],
|
|
@@ -653,11 +654,15 @@ var stdin_default = defineComponent({
|
|
|
653
654
|
}, null)]), _createVNode(Teleport, {
|
|
654
655
|
"to": "body"
|
|
655
656
|
}, {
|
|
656
|
-
default: () => [_createVNode(
|
|
657
|
-
"
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
657
|
+
default: () => [_createVNode(MaterialDetail, {
|
|
658
|
+
"show": !!detailItem.value,
|
|
659
|
+
"item": detailItem.value,
|
|
660
|
+
"categories": props.categories,
|
|
661
|
+
"onUpdate:show": (show) => {
|
|
662
|
+
if (!show)
|
|
663
|
+
detailItem.value = void 0;
|
|
664
|
+
}
|
|
665
|
+
}, null)]
|
|
661
666
|
})])]
|
|
662
667
|
});
|
|
663
668
|
}
|
|
@@ -1 +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)}
|
|
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)}.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)}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@import '../material-action-bar/index.less';
|
|
2
|
+
|
|
1
3
|
.van-material-add {
|
|
2
4
|
position: relative;
|
|
3
5
|
display: flex;
|
|
@@ -22,7 +24,7 @@
|
|
|
22
24
|
&__catalog-leaf { overflow: hidden; }
|
|
23
25
|
// Tree leaf nodes each sit inside their own wrapper, so restore the list
|
|
24
26
|
// divider here instead of relying on the item sibling selector.
|
|
25
|
-
&__catalog-leaf .van-material-
|
|
27
|
+
&__catalog-leaf .van-material-action-bar::after {
|
|
26
28
|
position: absolute;
|
|
27
29
|
right: var(--van-padding-md);
|
|
28
30
|
bottom: 0;
|
|
@@ -33,7 +35,7 @@
|
|
|
33
35
|
background: var(--van-border-color);
|
|
34
36
|
transform: scaleY(.5);
|
|
35
37
|
}
|
|
36
|
-
.van-tree-select__children > .van-tree-select__node:last-child > &__catalog-leaf .van-material-
|
|
38
|
+
.van-tree-select__children > .van-tree-select__node:last-child > &__catalog-leaf .van-material-action-bar::after { display: none; }
|
|
37
39
|
&__material-list { overflow: hidden; background: var(--van-white); border-radius: 8px; }
|
|
38
40
|
&__empty { padding: 32px 16px; color: var(--van-text-color-3); font-size: var(--van-font-size-md); text-align: center; }
|
|
39
41
|
&__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 @@
|
|
|
47
49
|
&__detail-banner { position: absolute; top: 0; right: 0; left: 0; height: 320px; overflow: hidden; background: var(--van-gray-8); }
|
|
48
50
|
&__detail-swipe { height: 320px; touch-action: pan-y; }
|
|
49
51
|
&__detail-image { width: 100%; height: 310px; background-position: center; background-size: cover; }
|
|
50
|
-
&__detail-image--motor { background-image: url('
|
|
51
|
-
&__detail-image--blower { background-image: url('
|
|
52
|
-
&__detail-image--coil { background-image: url('
|
|
52
|
+
&__detail-image--motor { background-image: url('/dog1.jpg'); }
|
|
53
|
+
&__detail-image--blower { background-image: url('/dog2.jpg'); }
|
|
54
|
+
&__detail-image--coil { background-image: url('/dog3.jpg'); }
|
|
53
55
|
&__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%; } }
|
|
54
56
|
&__detail-dot--active { background: var(--van-white) !important; }
|
|
55
57
|
&__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%); }
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import "../../style/base.css";
|
|
2
|
+
import "../../action-bar/index.css";
|
|
2
3
|
import "../../badge/index.css";
|
|
3
4
|
import "../../icon/index.css";
|
|
5
|
+
import "../../image/index.css";
|
|
4
6
|
import "../../filter-tag/index.css";
|
|
5
7
|
import "../../tag/index.css";
|
|
8
|
+
import "../../label/index.css";
|
|
6
9
|
import "../../loading/index.css";
|
|
7
10
|
import "../../button/index.css";
|
|
11
|
+
import "../../action-bar-button/index.css";
|
|
8
12
|
import "../../overlay/index.css";
|
|
9
13
|
import "../../popup/index.css";
|
|
10
14
|
import "../../popover/index.css";
|
|
@@ -19,12 +23,15 @@ import "../../cell/index.css";
|
|
|
19
23
|
import "../../tree-select/index.css";
|
|
20
24
|
import "../../field/index.css";
|
|
21
25
|
import "../../search/index.css";
|
|
26
|
+
import "../../dialog/index.css";
|
|
22
27
|
import "../../divider/index.css";
|
|
23
28
|
import "../../blue-mark/index.css";
|
|
24
29
|
import "../../sticky/index.css";
|
|
25
30
|
import "../../swipe/index.css";
|
|
26
31
|
import "../../swipe-item/index.css";
|
|
32
|
+
import "../../material-detail/index.css";
|
|
27
33
|
import "../../tabs/index.css";
|
|
28
34
|
import "../../tab/index.css";
|
|
29
35
|
import "../../stepper/index.css";
|
|
36
|
+
import "../../material-action-bar/index.css";
|
|
30
37
|
import "../index.css";
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import "../../style/base.less";
|
|
2
|
+
import "../../action-bar/index.less";
|
|
2
3
|
import "../../badge/index.less";
|
|
3
4
|
import "../../icon/index.less";
|
|
5
|
+
import "../../image/index.less";
|
|
4
6
|
import "../../filter-tag/index.less";
|
|
5
7
|
import "../../tag/index.less";
|
|
8
|
+
import "../../label/index.less";
|
|
6
9
|
import "../../loading/index.less";
|
|
7
10
|
import "../../button/index.less";
|
|
11
|
+
import "../../action-bar-button/index.less";
|
|
8
12
|
import "../../overlay/index.less";
|
|
9
13
|
import "../../popup/index.less";
|
|
10
14
|
import "../../popover/index.less";
|
|
@@ -19,12 +23,15 @@ import "../../cell/index.less";
|
|
|
19
23
|
import "../../tree-select/index.less";
|
|
20
24
|
import "../../field/index.less";
|
|
21
25
|
import "../../search/index.less";
|
|
26
|
+
import "../../dialog/index.less";
|
|
22
27
|
import "../../divider/index.less";
|
|
23
28
|
import "../../blue-mark/index.less";
|
|
24
29
|
import "../../sticky/index.less";
|
|
25
30
|
import "../../swipe/index.less";
|
|
26
31
|
import "../../swipe-item/index.less";
|
|
32
|
+
import "../../material-detail/index.less";
|
|
27
33
|
import "../../tabs/index.less";
|
|
28
34
|
import "../../tab/index.less";
|
|
29
35
|
import "../../stepper/index.less";
|
|
36
|
+
import "../../material-action-bar/index.less";
|
|
30
37
|
import "../index.less";
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { type ExtractPropTypes, type PropType } from 'vue';
|
|
2
|
+
import { type Numeric } from '../utils';
|
|
3
|
+
import type { MaterialAddCategory, MaterialAddItem } from '../material-add/types';
|
|
4
|
+
export declare type MaterialDetailField = {
|
|
5
|
+
label: string;
|
|
6
|
+
content: Numeric;
|
|
7
|
+
type?: 'default' | 'link';
|
|
8
|
+
};
|
|
9
|
+
declare const materialDetailProps: {
|
|
10
|
+
show: BooleanConstructor;
|
|
11
|
+
item: PropType<MaterialAddItem>;
|
|
12
|
+
categories: {
|
|
13
|
+
type: PropType<MaterialAddCategory[]>;
|
|
14
|
+
default: () => never[];
|
|
15
|
+
};
|
|
16
|
+
fields: {
|
|
17
|
+
type: PropType<MaterialDetailField[]>;
|
|
18
|
+
default: () => never[];
|
|
19
|
+
};
|
|
20
|
+
images: {
|
|
21
|
+
type: PropType<string[]>;
|
|
22
|
+
default: () => never[];
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
export declare type MaterialDetailProps = ExtractPropTypes<typeof materialDetailProps>;
|
|
26
|
+
declare const _default: import("vue").DefineComponent<{
|
|
27
|
+
show: BooleanConstructor;
|
|
28
|
+
item: PropType<MaterialAddItem>;
|
|
29
|
+
categories: {
|
|
30
|
+
type: PropType<MaterialAddCategory[]>;
|
|
31
|
+
default: () => never[];
|
|
32
|
+
};
|
|
33
|
+
fields: {
|
|
34
|
+
type: PropType<MaterialDetailField[]>;
|
|
35
|
+
default: () => never[];
|
|
36
|
+
};
|
|
37
|
+
images: {
|
|
38
|
+
type: PropType<string[]>;
|
|
39
|
+
default: () => never[];
|
|
40
|
+
};
|
|
41
|
+
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:show"[], "update:show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
|
|
42
|
+
show: BooleanConstructor;
|
|
43
|
+
item: PropType<MaterialAddItem>;
|
|
44
|
+
categories: {
|
|
45
|
+
type: PropType<MaterialAddCategory[]>;
|
|
46
|
+
default: () => never[];
|
|
47
|
+
};
|
|
48
|
+
fields: {
|
|
49
|
+
type: PropType<MaterialDetailField[]>;
|
|
50
|
+
default: () => never[];
|
|
51
|
+
};
|
|
52
|
+
images: {
|
|
53
|
+
type: PropType<string[]>;
|
|
54
|
+
default: () => never[];
|
|
55
|
+
};
|
|
56
|
+
}>> & {
|
|
57
|
+
"onUpdate:show"?: ((...args: any[]) => any) | undefined;
|
|
58
|
+
}, {
|
|
59
|
+
show: boolean;
|
|
60
|
+
fields: MaterialDetailField[];
|
|
61
|
+
images: string[];
|
|
62
|
+
categories: MaterialAddCategory[];
|
|
63
|
+
}>;
|
|
64
|
+
export default _default;
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
import { Transition, computed, defineComponent, ref, createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
|
|
2
|
+
import { BlueMarkHeader } from "../blue-mark/index.mjs";
|
|
3
|
+
import { Icon } from "../icon/index.mjs";
|
|
4
|
+
import { Label } from "../label/index.mjs";
|
|
5
|
+
import { Swipe } from "../swipe/index.mjs";
|
|
6
|
+
import { SwipeItem } from "../swipe-item/index.mjs";
|
|
7
|
+
import { createNamespace, makeArrayProp } from "../utils/index.mjs";
|
|
8
|
+
import { Image } from "../image/index.mjs";
|
|
9
|
+
const [name, bem] = createNamespace("material-detail");
|
|
10
|
+
const defaultImages = ["/dog1.jpg", "/dog2.jpg", "/dog3.jpg"];
|
|
11
|
+
const materialDetailProps = {
|
|
12
|
+
show: Boolean,
|
|
13
|
+
item: Object,
|
|
14
|
+
categories: makeArrayProp(),
|
|
15
|
+
fields: makeArrayProp(),
|
|
16
|
+
images: makeArrayProp()
|
|
17
|
+
};
|
|
18
|
+
var stdin_default = defineComponent({
|
|
19
|
+
name,
|
|
20
|
+
props: materialDetailProps,
|
|
21
|
+
emits: ["update:show"],
|
|
22
|
+
setup(props, {
|
|
23
|
+
emit,
|
|
24
|
+
slots
|
|
25
|
+
}) {
|
|
26
|
+
const infoExpanded = ref(true);
|
|
27
|
+
const usageExpanded = ref(true);
|
|
28
|
+
const noticeExpanded = ref(true);
|
|
29
|
+
const bannerIndex = ref(0);
|
|
30
|
+
const item = computed(() => props.item);
|
|
31
|
+
const close = () => emit("update:show", false);
|
|
32
|
+
const infoRows = computed(() => {
|
|
33
|
+
if (props.fields.length) {
|
|
34
|
+
return props.fields;
|
|
35
|
+
}
|
|
36
|
+
if (!item.value)
|
|
37
|
+
return [];
|
|
38
|
+
const [brand = "-", specification = "-", warehouse = "-"] = item.value.detail.split("\uFF5C");
|
|
39
|
+
const group = props.categories.find((entry) => entry.categories.some((category2) => {
|
|
40
|
+
var _a;
|
|
41
|
+
return category2.value === ((_a = item.value) == null ? void 0 : _a.category);
|
|
42
|
+
}));
|
|
43
|
+
const category = group == null ? void 0 : group.categories.find((entry) => {
|
|
44
|
+
var _a;
|
|
45
|
+
return entry.value === ((_a = item.value) == null ? void 0 : _a.category);
|
|
46
|
+
});
|
|
47
|
+
return [{
|
|
48
|
+
label: "\u7269\u6599\u540D\u79F0",
|
|
49
|
+
content: item.value.name
|
|
50
|
+
}, {
|
|
51
|
+
label: "\u53EF\u7533\u8BF7",
|
|
52
|
+
content: item.value.available || 0
|
|
53
|
+
}, {
|
|
54
|
+
label: "\u5F85\u5165\u5E93",
|
|
55
|
+
content: "12"
|
|
56
|
+
}, {
|
|
57
|
+
label: "\u6240\u5C5E\u5206\u7C7B",
|
|
58
|
+
content: category && group ? `${group.text}/${category.text}` : item.value.category
|
|
59
|
+
}, {
|
|
60
|
+
label: "\u54C1\u724C",
|
|
61
|
+
content: brand
|
|
62
|
+
}, {
|
|
63
|
+
label: "\u89C4\u683C",
|
|
64
|
+
content: specification
|
|
65
|
+
}, {
|
|
66
|
+
label: "\u5355\u4F4D",
|
|
67
|
+
content: item.value.unit
|
|
68
|
+
}, {
|
|
69
|
+
label: "\u4F9B\u5E94\u5546",
|
|
70
|
+
content: "\u6DF1\u5733\u96C6\u5B89"
|
|
71
|
+
}, {
|
|
72
|
+
label: "\u4ED3\u5E93\u540D\u79F0",
|
|
73
|
+
content: warehouse
|
|
74
|
+
}, {
|
|
75
|
+
label: "\u4ED3\u5E93\u4F4D\u7F6E",
|
|
76
|
+
content: "A\u5EA7/B3/\u505C\u8F66\u573A\u5E93\u623F",
|
|
77
|
+
type: "link"
|
|
78
|
+
}, {
|
|
79
|
+
label: "\u5E93\u7BA1\u5458",
|
|
80
|
+
content: "\u674E\u590D\u6052 13880588688",
|
|
81
|
+
type: "link"
|
|
82
|
+
}];
|
|
83
|
+
});
|
|
84
|
+
const displayImages = computed(() => props.images.length ? props.images : defaultImages);
|
|
85
|
+
return () => _createVNode(Transition, {
|
|
86
|
+
"name": "van-material-detail"
|
|
87
|
+
}, {
|
|
88
|
+
default: () => [props.show && item.value ? _createVNode("div", {
|
|
89
|
+
"class": bem()
|
|
90
|
+
}, [_createVNode("div", {
|
|
91
|
+
"class": bem("banner")
|
|
92
|
+
}, [_createVNode(Swipe, {
|
|
93
|
+
"loop": false,
|
|
94
|
+
"showIndicators": false,
|
|
95
|
+
"class": bem("swipe"),
|
|
96
|
+
"onChange": (index) => {
|
|
97
|
+
bannerIndex.value = index;
|
|
98
|
+
}
|
|
99
|
+
}, {
|
|
100
|
+
default: () => [displayImages.value.map((image, index) => _createVNode(SwipeItem, {
|
|
101
|
+
"key": `${image}-${index}`
|
|
102
|
+
}, {
|
|
103
|
+
default: () => [_createVNode(Image, {
|
|
104
|
+
"class": bem("image"),
|
|
105
|
+
"src": image,
|
|
106
|
+
"fit": "cover",
|
|
107
|
+
"alt": `${item.value.name}\u56FE\u7247${index + 1}`
|
|
108
|
+
}, null)]
|
|
109
|
+
}))]
|
|
110
|
+
})]), _createVNode("div", {
|
|
111
|
+
"class": bem("dots"),
|
|
112
|
+
"aria-label": `\u7B2C ${bannerIndex.value + 1} \u5F20\uFF0C\u5171 ${displayImages.value.length} \u5F20`
|
|
113
|
+
}, [displayImages.value.map((_, index) => _createVNode("i", {
|
|
114
|
+
"key": index,
|
|
115
|
+
"class": {
|
|
116
|
+
"van-material-detail__dot--active": bannerIndex.value === index
|
|
117
|
+
}
|
|
118
|
+
}, null))]), _createVNode("button", {
|
|
119
|
+
"type": "button",
|
|
120
|
+
"class": bem("close"),
|
|
121
|
+
"aria-label": "\u5173\u95ED\u7269\u6599\u8BE6\u60C5",
|
|
122
|
+
"onClick": close
|
|
123
|
+
}, [_createVNode(Icon, {
|
|
124
|
+
"name": "cross",
|
|
125
|
+
"size": "16"
|
|
126
|
+
}, null)]), _createVNode("div", {
|
|
127
|
+
"class": bem("content")
|
|
128
|
+
}, [_createVNode("div", {
|
|
129
|
+
"class": bem("body")
|
|
130
|
+
}, [_createVNode("section", {
|
|
131
|
+
"class": bem("section")
|
|
132
|
+
}, [_createVNode(BlueMarkHeader, {
|
|
133
|
+
"title": "\u57FA\u672C\u4FE1\u606F",
|
|
134
|
+
"expandable": true,
|
|
135
|
+
"modelValue": infoExpanded.value,
|
|
136
|
+
"onUpdate:modelValue": (value) => {
|
|
137
|
+
infoExpanded.value = value;
|
|
138
|
+
}
|
|
139
|
+
}, null), _createVNode(Transition, {
|
|
140
|
+
"name": "van-material-detail-section"
|
|
141
|
+
}, {
|
|
142
|
+
default: () => {
|
|
143
|
+
var _a;
|
|
144
|
+
return [infoExpanded.value && _createVNode("div", {
|
|
145
|
+
"class": bem("card")
|
|
146
|
+
}, [((_a = slots["basic-info"]) == null ? void 0 : _a.call(slots)) || _createVNode("div", {
|
|
147
|
+
"class": bem("info-rows")
|
|
148
|
+
}, [infoRows.value.map((field) => _createVNode(Label, {
|
|
149
|
+
"key": field.label,
|
|
150
|
+
"label": field.label,
|
|
151
|
+
"content": String(field.content),
|
|
152
|
+
"contentAlign": "right",
|
|
153
|
+
"type": field.type || "default"
|
|
154
|
+
}, null))])])];
|
|
155
|
+
}
|
|
156
|
+
})]), _createVNode("section", {
|
|
157
|
+
"class": bem("section")
|
|
158
|
+
}, [_createVNode(BlueMarkHeader, {
|
|
159
|
+
"title": "\u4F7F\u7528\u8BF4\u660E",
|
|
160
|
+
"expandable": true,
|
|
161
|
+
"modelValue": usageExpanded.value,
|
|
162
|
+
"onUpdate:modelValue": (value) => {
|
|
163
|
+
usageExpanded.value = value;
|
|
164
|
+
}
|
|
165
|
+
}, null), _createVNode(Transition, {
|
|
166
|
+
"name": "van-material-detail-section"
|
|
167
|
+
}, {
|
|
168
|
+
default: () => [usageExpanded.value && _createVNode("div", {
|
|
169
|
+
"class": bem("card")
|
|
170
|
+
}, [_createTextVNode("\u9002\u7528\u4E8E\u8D85\u5E02\u548C\u5546\u4E1A\u5EFA\u7B51\u7684\u98CE\u51B7\u548C\u6C34\u51B7\u5F0F\u51B7\u6C34\u673A\u7EC4\uFF0C\u4EE5\u53CA\u5176\u4ED6\u4E2D\u6E29\u5E94\u7528\u3002\u5B89\u88C5\u65F6\u8981\u786E\u4FDD\u7CFB\u7EDF\u7684\u5BC6\u5C01\u6027\u826F\u597D\uFF0C\u9632\u6B62\u5236\u51B7\u5242\u6CC4\u6F0F\uFF0C\u5E76\u6309\u7167\u76F8\u5173\u8BBE\u5907\u7684\u5B89\u88C5\u624B\u518C\u8FDB\u884C\u7BA1\u9053\u8FDE\u63A5\u3001\u5145\u6CE8\u7B49\u64CD\u4F5C\u3002")])]
|
|
171
|
+
})]), _createVNode("section", {
|
|
172
|
+
"class": bem("section")
|
|
173
|
+
}, [_createVNode(BlueMarkHeader, {
|
|
174
|
+
"title": "\u6CE8\u610F\u4E8B\u9879",
|
|
175
|
+
"expandable": true,
|
|
176
|
+
"modelValue": noticeExpanded.value,
|
|
177
|
+
"onUpdate:modelValue": (value) => {
|
|
178
|
+
noticeExpanded.value = value;
|
|
179
|
+
}
|
|
180
|
+
}, null), _createVNode(Transition, {
|
|
181
|
+
"name": "van-material-detail-section"
|
|
182
|
+
}, {
|
|
183
|
+
default: () => [noticeExpanded.value && _createVNode("div", {
|
|
184
|
+
"class": bem("card")
|
|
185
|
+
}, [_createTextVNode("\u4F7F\u7528\u8FC7\u7A0B\u4E2D\u8981\u5B9A\u671F\u68C0\u67E5\u7CFB\u7EDF\u7684\u538B\u529B\u3001\u6E29\u5EA6\u7B49\u53C2\u6570\uFF0C\u786E\u4FDD\u7CFB\u7EDF\u6B63\u5E38\u8FD0\u884C\u3002\u5982\u51FA\u73B0\u6CC4\u6F0F\u7B49\u95EE\u9898\uFF0C\u8BF7\u53CA\u65F6\u8FDB\u884C\u7EF4\u4FEE\u5904\u7406\u3002")])]
|
|
186
|
+
})])])])]) : null]
|
|
187
|
+
});
|
|
188
|
+
}
|
|
189
|
+
});
|
|
190
|
+
export {
|
|
191
|
+
stdin_default as default
|
|
192
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.van-material-detail{position:fixed;z-index:3000;inset:0;display:flex;flex-direction:column;overflow:hidden;background:var(--van-gray-2)}.van-material-detail__banner{position:absolute;top:0;right:0;left:0;height:320px;overflow:hidden;background:var(--van-gray-8)}.van-material-detail__swipe{height:320px;touch-action:pan-y}.van-material-detail__image{width:100%;height:310px}.van-material-detail__dots{position:absolute;z-index:2;top:226px;left:50%;display:flex;gap:6px;transform:translate(-50%)}.van-material-detail__dots>i{width:6px;height:6px;background:rgba(255,255,255,.55);border-radius:50%}.van-material-detail__dot--active{background:var(--van-white)!important}.van-material-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-detail__content{position:relative;z-index:1;display:flex;flex:1;flex-direction:column;box-sizing:border-box;min-height:0;margin-top:246px;padding-top:var(--van-padding-sm);overflow:hidden;background:var(--van-white);border-radius:16px 16px 0 0}.van-material-detail__body{flex:1;min-height:0;padding:var(--van-padding-md) var(--van-padding-md) 24px;overflow-y:auto}.van-material-detail__section+.van-material-detail__section{margin-top:24px}.van-material-detail__section .van-blue-mark-header{margin-bottom:8px;padding:0}.van-material-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-detail__info-rows{display:flex;flex-direction:column;gap:8px}.van-material-detail-enter-active{transition:transform var(--van-animation-duration-fast) var(--van-animation-timing-function-enter);will-change:transform}.van-material-detail-leave-active{transition:transform var(--van-animation-duration-fast) var(--van-animation-timing-function-leave);will-change:transform}.van-material-detail-enter-from,.van-material-detail-leave-to{transform:translateY(100%)}.van-material-detail-section-enter-active,.van-material-detail-section-leave-active{overflow:hidden;transition:max-height .2s ease,opacity .2s ease}.van-material-detail-section-enter-from,.van-material-detail-section-leave-to{max-height:0;opacity:0}.van-material-detail-section-enter-to,.van-material-detail-section-leave-from{max-height:480px;opacity:1}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
export declare const MaterialDetail: import("../utils").WithInstall<import("vue").DefineComponent<{
|
|
2
|
+
show: BooleanConstructor;
|
|
3
|
+
item: import("vue").PropType<import("..").MaterialAddItem>;
|
|
4
|
+
categories: {
|
|
5
|
+
type: import("vue").PropType<import("..").MaterialAddCategory[]>;
|
|
6
|
+
default: () => never[];
|
|
7
|
+
};
|
|
8
|
+
fields: {
|
|
9
|
+
type: import("vue").PropType<import("./MaterialDetail").MaterialDetailField[]>;
|
|
10
|
+
default: () => never[];
|
|
11
|
+
};
|
|
12
|
+
images: {
|
|
13
|
+
type: import("vue").PropType<string[]>;
|
|
14
|
+
default: () => never[];
|
|
15
|
+
};
|
|
16
|
+
}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:show"[], "update:show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
17
|
+
show: BooleanConstructor;
|
|
18
|
+
item: import("vue").PropType<import("..").MaterialAddItem>;
|
|
19
|
+
categories: {
|
|
20
|
+
type: import("vue").PropType<import("..").MaterialAddCategory[]>;
|
|
21
|
+
default: () => never[];
|
|
22
|
+
};
|
|
23
|
+
fields: {
|
|
24
|
+
type: import("vue").PropType<import("./MaterialDetail").MaterialDetailField[]>;
|
|
25
|
+
default: () => never[];
|
|
26
|
+
};
|
|
27
|
+
images: {
|
|
28
|
+
type: import("vue").PropType<string[]>;
|
|
29
|
+
default: () => never[];
|
|
30
|
+
};
|
|
31
|
+
}>> & {
|
|
32
|
+
"onUpdate:show"?: ((...args: any[]) => any) | undefined;
|
|
33
|
+
}, {
|
|
34
|
+
show: boolean;
|
|
35
|
+
fields: import("./MaterialDetail").MaterialDetailField[];
|
|
36
|
+
images: string[];
|
|
37
|
+
categories: import("..").MaterialAddCategory[];
|
|
38
|
+
}>>;
|
|
39
|
+
export default MaterialDetail;
|
|
40
|
+
export type { MaterialDetailProps } from './MaterialDetail';
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
.van-material-detail { position: fixed; z-index: 3000; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--van-gray-2); }
|
|
2
|
+
.van-material-detail__banner { position: absolute; top: 0; right: 0; left: 0; height: 320px; overflow: hidden; background: var(--van-gray-8); }
|
|
3
|
+
.van-material-detail__swipe { height: 320px; touch-action: pan-y; }
|
|
4
|
+
.van-material-detail__image { width: 100%; height: 310px; }
|
|
5
|
+
.van-material-detail__dots { position: absolute; z-index: 2; top: 226px; left: 50%; display: flex; gap: 6px; transform: translateX(-50%); }
|
|
6
|
+
.van-material-detail__dots > i { width: 6px; height: 6px; background: rgb(255 255 255 / 55%); border-radius: 50%; }
|
|
7
|
+
.van-material-detail__dot--active { background: var(--van-white) !important; }
|
|
8
|
+
.van-material-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%); }
|
|
9
|
+
.van-material-detail__content { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; box-sizing: border-box; min-height: 0; margin-top: 246px; padding-top: var(--van-padding-sm); overflow: hidden; background: var(--van-white); border-radius: 16px 16px 0 0; }
|
|
10
|
+
.van-material-detail__body { flex: 1; min-height: 0; padding: var(--van-padding-md) var(--van-padding-md) 24px; overflow-y: auto; }
|
|
11
|
+
.van-material-detail__section + .van-material-detail__section { margin-top: 24px; }
|
|
12
|
+
.van-material-detail__section .van-blue-mark-header { margin-bottom: 8px; padding: 0; }
|
|
13
|
+
.van-material-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), rgb(241 244 246 / 20%)); border-radius: 8px; }
|
|
14
|
+
.van-material-detail__info-rows { display: flex; flex-direction: column; gap: 8px; }
|
|
15
|
+
.van-material-detail-enter-active { transition: transform var(--van-animation-duration-fast) var(--van-animation-timing-function-enter); will-change: transform; }
|
|
16
|
+
.van-material-detail-leave-active { transition: transform var(--van-animation-duration-fast) var(--van-animation-timing-function-leave); will-change: transform; }
|
|
17
|
+
.van-material-detail-enter-from, .van-material-detail-leave-to { transform: translateY(100%); }
|
|
18
|
+
.van-material-detail-section-enter-active, .van-material-detail-section-leave-active { overflow: hidden; transition: max-height .2s ease, opacity .2s ease; }
|
|
19
|
+
.van-material-detail-section-enter-from, .van-material-detail-section-leave-to { max-height: 0; opacity: 0; }
|
|
20
|
+
.van-material-detail-section-enter-to, .van-material-detail-section-leave-from { max-height: 480px; opacity: 1; }
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import "../../style/base.css";
|
|
2
|
+
import "../../badge/index.css";
|
|
3
|
+
import "../../icon/index.css";
|
|
4
|
+
import "../../image/index.css";
|
|
5
|
+
import "../../tag/index.css";
|
|
6
|
+
import "../../label/index.css";
|
|
7
|
+
import "../../divider/index.css";
|
|
8
|
+
import "../../blue-mark/index.css";
|
|
9
|
+
import "../../swipe/index.css";
|
|
10
|
+
import "../../swipe-item/index.css";
|
|
11
|
+
import "../index.css";
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import "../../style/base.less";
|
|
2
|
+
import "../../badge/index.less";
|
|
3
|
+
import "../../icon/index.less";
|
|
4
|
+
import "../../image/index.less";
|
|
5
|
+
import "../../tag/index.less";
|
|
6
|
+
import "../../label/index.less";
|
|
7
|
+
import "../../divider/index.less";
|
|
8
|
+
import "../../blue-mark/index.less";
|
|
9
|
+
import "../../swipe/index.less";
|
|
10
|
+
import "../../swipe-item/index.less";
|
|
11
|
+
import "../index.less";
|