persagy-vant 0.0.34 → 0.0.36

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.
Files changed (100) hide show
  1. package/es/index.d.ts +1 -1
  2. package/es/index.mjs +1 -1
  3. package/es/label/Label.d.ts +11 -1
  4. package/es/label/Label.mjs +34 -3
  5. package/es/label/index.css +1 -1
  6. package/es/label/index.d.ts +6 -2
  7. package/es/label/index.less +22 -0
  8. package/es/label/var.less +1 -0
  9. package/es/material-action-bar/MaterialActionBar.d.ts +15 -0
  10. package/es/material-action-bar/MaterialActionBar.mjs +107 -58
  11. package/es/material-action-bar/index.css +1 -1
  12. package/es/material-action-bar/index.d.ts +76 -2
  13. package/es/material-action-bar/index.less +9 -5
  14. package/es/material-action-bar/index.mjs +4 -2
  15. package/es/material-action-bar/style/index.mjs +1 -0
  16. package/es/material-action-bar/style/less.mjs +1 -0
  17. package/es/material-add/MaterialAdd.mjs +0 -1
  18. package/es/material-add/index.css +1 -1
  19. package/es/material-add/style/index.mjs +1 -0
  20. package/es/material-add/style/less.mjs +1 -0
  21. package/es/material-detail/MaterialDetail.mjs +7 -2
  22. package/es/material-display-bar/MaterialDisplayBar.d.ts +2 -1
  23. package/es/material-display-bar/MaterialDisplayBar.mjs +5 -3
  24. package/es/material-display-bar/index.css +1 -1
  25. package/es/material-display-bar/index.d.ts +205 -3
  26. package/es/material-display-bar/index.less +34 -1
  27. package/es/material-display-bar/index.mjs +6 -2
  28. package/es/material-display-bar/var.less +2 -1
  29. package/es/tag/Tag.d.ts +15 -2
  30. package/es/tag/Tag.mjs +20 -3
  31. package/es/tag/index.css +1 -1
  32. package/es/tag/index.d.ts +9 -0
  33. package/es/tag/index.less +45 -1
  34. package/es/tag/var.less +13 -0
  35. package/es/title-bar/TitleBar.d.ts +29 -11
  36. package/es/title-bar/TitleBar.mjs +38 -8
  37. package/es/title-bar/index.css +1 -1
  38. package/es/title-bar/index.d.ts +14 -1
  39. package/es/title-bar/index.less +10 -2
  40. package/es/title-bar/style/index.mjs +2 -0
  41. package/es/title-bar/style/less.mjs +2 -0
  42. package/es/title-bar/var.less +4 -0
  43. package/lib/index.css +1 -1
  44. package/lib/index.d.ts +1 -1
  45. package/lib/index.js +1 -1
  46. package/lib/index.less +1 -1
  47. package/lib/label/Label.d.ts +11 -1
  48. package/lib/label/Label.js +34 -3
  49. package/lib/label/index.css +1 -1
  50. package/lib/label/index.d.ts +6 -2
  51. package/lib/label/index.less +22 -0
  52. package/lib/label/var.less +1 -0
  53. package/lib/material-action-bar/MaterialActionBar.d.ts +15 -0
  54. package/lib/material-action-bar/MaterialActionBar.js +106 -57
  55. package/lib/material-action-bar/index.css +1 -1
  56. package/lib/material-action-bar/index.d.ts +76 -2
  57. package/lib/material-action-bar/index.js +4 -2
  58. package/lib/material-action-bar/index.less +9 -5
  59. package/lib/material-action-bar/style/index.js +1 -0
  60. package/lib/material-action-bar/style/less.js +1 -0
  61. package/lib/material-add/MaterialAdd.js +0 -1
  62. package/lib/material-add/index.css +1 -1
  63. package/lib/material-add/style/index.js +1 -0
  64. package/lib/material-add/style/less.js +1 -0
  65. package/lib/material-detail/MaterialDetail.js +7 -2
  66. package/lib/material-display-bar/MaterialDisplayBar.d.ts +2 -1
  67. package/lib/material-display-bar/MaterialDisplayBar.js +5 -3
  68. package/lib/material-display-bar/index.css +1 -1
  69. package/lib/material-display-bar/index.d.ts +205 -3
  70. package/lib/material-display-bar/index.js +6 -2
  71. package/lib/material-display-bar/index.less +34 -1
  72. package/lib/material-display-bar/var.less +2 -1
  73. package/lib/tag/Tag.d.ts +15 -2
  74. package/lib/tag/Tag.js +20 -3
  75. package/lib/tag/index.css +1 -1
  76. package/lib/tag/index.d.ts +9 -0
  77. package/lib/tag/index.less +45 -1
  78. package/lib/tag/var.less +13 -0
  79. package/lib/title-bar/TitleBar.d.ts +29 -11
  80. package/lib/title-bar/TitleBar.js +38 -8
  81. package/lib/title-bar/index.css +1 -1
  82. package/lib/title-bar/index.d.ts +14 -1
  83. package/lib/title-bar/index.less +10 -2
  84. package/lib/title-bar/style/index.js +2 -0
  85. package/lib/title-bar/style/less.js +2 -0
  86. package/lib/title-bar/var.less +4 -0
  87. package/lib/vant.cjs.js +218 -80
  88. package/lib/vant.es.js +218 -80
  89. package/lib/vant.js +218 -80
  90. package/lib/vant.min.js +1 -1
  91. package/lib/web-types.json +1 -1
  92. package/package.json +1 -1
  93. package/skills/use-persagy-vant/SKILL.md +2 -2
  94. package/skills/use-persagy-vant/references/component-catalog.md +3 -2
  95. package/skills/use-persagy-vant/references/component-documentation.md +1 -1
  96. package/skills/use-persagy-vant/references/component-gap-template.md +3 -0
  97. package/skills/use-persagy-vant/references/design-interaction-baseline.md +1 -0
  98. package/skills/use-persagy-vant/references/page-recipes.md +1 -1
  99. package/skills/use-persagy-vant/references/reuse-policy.md +27 -1
  100. package/skills/use-persagy-vant/references/usage-patterns.md +1 -1
package/lib/index.d.ts CHANGED
@@ -116,4 +116,4 @@ declare namespace _default {
116
116
  }
117
117
  export default _default;
118
118
  export function install(app: any): void;
119
- export const version: "0.0.34";
119
+ export const version: "0.0.36";
package/lib/index.js CHANGED
@@ -246,7 +246,7 @@ __reExport(stdin_exports, require("./uploader"), module.exports);
246
246
  __reExport(stdin_exports, require("./video-preview"), module.exports);
247
247
  __reExport(stdin_exports, require("./work-order-card"), module.exports);
248
248
  __reExport(stdin_exports, require("./work-order-filter"), module.exports);
249
- const version = "0.0.34";
249
+ const version = "0.0.36";
250
250
  function install(app) {
251
251
  const components = [
252
252
  import_action_bar.ActionBar,
package/lib/index.less CHANGED
@@ -2,7 +2,6 @@
2
2
  @import "./action-bar/index.less";
3
3
  @import "./badge/index.less";
4
4
  @import "./icon/index.less";
5
- @import "./title-bar/index.less";
6
5
  @import "./notice-bar/index.less";
7
6
  @import "./image/index.less";
8
7
  @import "./filter-tag/index.less";
@@ -18,6 +17,7 @@
18
17
  @import "./picker/index.less";
19
18
  @import "./datetime-picker/index.less";
20
19
  @import "./button/index.less";
20
+ @import "./title-bar/index.less";
21
21
  @import "./submit-bar/index.less";
22
22
  @import "./action-bar-button/index.less";
23
23
  @import "./overlay/index.less";
@@ -3,6 +3,11 @@ export declare type LabelType = 'default' | 'bold' | 'link' | 'tag' | 'media';
3
3
  export declare type LabelSize = 'default' | 'mini';
4
4
  export declare type LabelContentAlign = 'follow' | 'right';
5
5
  export declare type LabelMediaType = 'image' | 'video';
6
+ export declare type LabelLongPressTarget = 'label' | 'content';
7
+ export declare type LabelLongPressEvent = {
8
+ target: LabelLongPressTarget;
9
+ text: string;
10
+ };
6
11
  export declare type LabelMedia = {
7
12
  url: string;
8
13
  type?: LabelMediaType;
@@ -43,6 +48,7 @@ declare const labelProps: {
43
48
  default: LabelContentAlign;
44
49
  };
45
50
  vertical: BooleanConstructor;
51
+ ellipsis: BooleanConstructor;
46
52
  href: StringConstructor;
47
53
  location: StringConstructor;
48
54
  tags: {
@@ -89,6 +95,7 @@ declare const _default: import("vue").DefineComponent<{
89
95
  default: LabelContentAlign;
90
96
  };
91
97
  vertical: BooleanConstructor;
98
+ ellipsis: BooleanConstructor;
92
99
  href: StringConstructor;
93
100
  location: StringConstructor;
94
101
  tags: {
@@ -99,7 +106,7 @@ declare const _default: import("vue").DefineComponent<{
99
106
  type: PropType<LabelMedia[]>;
100
107
  default: () => never[];
101
108
  };
102
- }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "click-media")[], "click" | "click-media", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
109
+ }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "click-media" | "long-press")[], "click" | "click-media" | "long-press", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
103
110
  label: {
104
111
  type: PropType<string>;
105
112
  default: string;
@@ -133,6 +140,7 @@ declare const _default: import("vue").DefineComponent<{
133
140
  default: LabelContentAlign;
134
141
  };
135
142
  vertical: BooleanConstructor;
143
+ ellipsis: BooleanConstructor;
136
144
  href: StringConstructor;
137
145
  location: StringConstructor;
138
146
  tags: {
@@ -146,6 +154,7 @@ declare const _default: import("vue").DefineComponent<{
146
154
  }>> & {
147
155
  onClick?: ((...args: any[]) => any) | undefined;
148
156
  "onClick-media"?: ((...args: any[]) => any) | undefined;
157
+ "onLong-press"?: ((...args: any[]) => any) | undefined;
149
158
  }, {
150
159
  type: LabelType;
151
160
  label: string;
@@ -154,6 +163,7 @@ declare const _default: import("vue").DefineComponent<{
154
163
  tags: string[];
155
164
  media: LabelMedia[];
156
165
  vertical: boolean;
166
+ ellipsis: boolean;
157
167
  showLabel: boolean;
158
168
  showContent: boolean;
159
169
  showColon: boolean | undefined;
@@ -39,6 +39,7 @@ const labelProps = {
39
39
  size: (0, import_utils.makeStringProp)("default"),
40
40
  contentAlign: (0, import_utils.makeStringProp)("follow"),
41
41
  vertical: Boolean,
42
+ ellipsis: Boolean,
42
43
  href: String,
43
44
  location: String,
44
45
  tags: {
@@ -53,12 +54,14 @@ const labelProps = {
53
54
  var stdin_default = (0, import_vue.defineComponent)({
54
55
  name,
55
56
  props: labelProps,
56
- emits: ["click", "click-media"],
57
+ emits: ["click", "click-media", "long-press"],
57
58
  setup(props, {
58
59
  slots,
59
60
  emit
60
61
  }) {
62
+ let longPressTimer;
61
63
  const vertical = (0, import_vue.computed)(() => props.vertical || props.type === "media");
64
+ const ellipsis = (0, import_vue.computed)(() => props.ellipsis && !vertical.value && !["tag", "media"].includes(props.type));
62
65
  const displayLabel = (0, import_vue.computed)(() => {
63
66
  var _a;
64
67
  const showColon = (_a = props.showColon) != null ? _a : !vertical.value && props.contentAlign !== "right";
@@ -68,6 +71,25 @@ var stdin_default = (0, import_vue.defineComponent)({
68
71
  return `${props.label}\uFF1A`;
69
72
  });
70
73
  const showLocation = (0, import_vue.computed)(() => props.vertical && (props.type === "bold" || props.type === "link") && !!props.location);
74
+ const clearLongPress = () => {
75
+ if (longPressTimer !== void 0) {
76
+ clearTimeout(longPressTimer);
77
+ longPressTimer = void 0;
78
+ }
79
+ };
80
+ const startLongPress = (target, text) => {
81
+ if (!ellipsis.value || !text)
82
+ return;
83
+ clearLongPress();
84
+ longPressTimer = setTimeout(() => {
85
+ longPressTimer = void 0;
86
+ const payload = {
87
+ target,
88
+ text
89
+ };
90
+ emit("long-press", payload);
91
+ }, 500);
92
+ };
71
93
  const renderText = () => {
72
94
  var _a;
73
95
  const content = ((_a = slots.default) == null ? void 0 : _a.call(slots)) || props.content;
@@ -120,13 +142,22 @@ var stdin_default = (0, import_vue.defineComponent)({
120
142
  "class": bem([props.type, {
121
143
  mini: props.size === "mini",
122
144
  vertical: vertical.value,
145
+ ellipsis: ellipsis.value,
123
146
  location: showLocation.value,
124
147
  "content-right": props.contentAlign === "right"
125
148
  }])
126
149
  }, [props.showLabel && (0, import_vue.createVNode)("span", {
127
- "class": bem("label")
150
+ "class": bem("label"),
151
+ "onPointerdown": () => startLongPress("label", displayLabel.value),
152
+ "onPointerup": clearLongPress,
153
+ "onPointercancel": clearLongPress,
154
+ "onPointerleave": clearLongPress
128
155
  }, [displayLabel.value]), props.showContent && (0, import_vue.createVNode)("div", {
129
- "class": bem("value")
156
+ "class": bem("value"),
157
+ "onPointerdown": () => startLongPress("content", props.content),
158
+ "onPointerup": clearLongPress,
159
+ "onPointercancel": clearLongPress,
160
+ "onPointerleave": clearLongPress
130
161
  }, [renderContent(), showLocation.value && (0, import_vue.createVNode)("div", {
131
162
  "class": bem("location")
132
163
  }, [(0, import_vue.createVNode)(import_icon.Icon, {
@@ -1 +1 @@
1
- :root{--van-label-font-size: var(--van-font-size-md);--van-label-line-height: var(--van-line-height-lg);--van-label-mini-font-size: var(--van-font-size-sm);--van-label-mini-line-height: var(--van-line-height-md);--van-label-label-color: var(--van-gray-6);--van-label-value-color: var(--van-black);--van-label-bold-color: var(--van-gray-8);--van-label-link-color: var(--van-primary-color);--van-label-gap: 2px;--van-label-tags-gap: 4px;--van-label-media-gap: 6px;--van-label-media-size: 64px;--van-label-mini-media-size: 48px;--van-label-media-radius: 4px;--van-label-location-color: var(--van-gray-7);--van-label-location-font-size: var(--van-font-size-sm);--van-label-location-line-height: var(--van-line-height-md);--van-label-location-icon-size: 12px;--van-label-location-gap: 2px}.van-label{display:flex;align-items:flex-start;gap:var(--van-label-gap);color:var(--van-label-value-color);font-size:var(--van-label-font-size);line-height:var(--van-label-line-height)}.van-label--vertical{flex-direction:column}.van-label--content-right .van-label__value{text-align:right}.van-label--mini{--van-label-font-size: var(--van-label-mini-font-size);--van-label-line-height: var(--van-label-mini-line-height);--van-label-media-size: var(--van-label-mini-media-size)}.van-label__label{flex:none;color:var(--van-label-label-color);white-space:nowrap}.van-label__value{flex:1;min-width:0;color:inherit;overflow-wrap:anywhere}.van-label__text{display:block}.van-label--location .van-label__value{display:flex;flex-direction:column;gap:var(--van-label-location-gap);width:100%}.van-label--location .van-label__link{align-self:flex-start;text-align:left}.van-label__location{display:inline-flex;gap:var(--van-label-location-gap);align-items:center;width:-moz-fit-content;width:fit-content;max-width:100%;color:var(--van-label-location-color);font-size:var(--van-label-location-font-size);font-weight:400;line-height:var(--van-label-location-line-height);overflow-wrap:anywhere}.van-label__location .van-icon{flex:none;font-size:var(--van-label-location-icon-size)}.van-label--bold .van-label__value{color:var(--van-label-bold-color);font-weight:var(--van-font-weight-bold)}.van-label__link{display:inline;padding:0;color:var(--van-label-link-color);font:inherit;font-weight:var(--van-font-weight-bold);text-decoration:none;background:transparent;border:0;cursor:pointer;transition:opacity var(--van-animation-duration-fast)}.van-label__link:active{opacity:var(--van-active-opacity)}.van-label__tags,.van-label__media{display:flex;flex-wrap:wrap;align-items:flex-start}.van-label__tags{gap:var(--van-label-tags-gap);min-height:var(--van-label-line-height);align-items:center}.van-label__media{gap:var(--van-label-media-gap);width:100%}.van-label__media-item{position:relative;flex:none;width:var(--van-label-media-size);height:var(--van-label-media-size);padding:0;overflow:hidden;background:transparent;border:0;border-radius:var(--van-label-media-radius);cursor:pointer;transition:opacity var(--van-animation-duration-fast)}.van-label__media-item:active{opacity:var(--van-active-opacity)}.van-label__media-item .van-image{display:block;width:100%;height:100%}.van-label__play{position:absolute;top:50%;left:50%;color:var(--van-white);font-size:24px;transform:translate(-50%,-50%);text-shadow:0 1px 2px rgba(0,0,0,.45)}
1
+ :root{--van-label-font-size: var(--van-font-size-md);--van-label-line-height: var(--van-line-height-lg);--van-label-mini-font-size: var(--van-font-size-sm);--van-label-mini-line-height: var(--van-line-height-md);--van-label-label-color: var(--van-gray-6);--van-label-value-color: var(--van-black);--van-label-bold-color: var(--van-gray-8);--van-label-link-color: var(--van-primary-color);--van-label-gap: 2px;--van-label-tags-gap: 4px;--van-label-media-gap: 6px;--van-label-media-size: 64px;--van-label-mini-media-size: 48px;--van-label-media-radius: 4px;--van-label-location-color: var(--van-gray-7);--van-label-location-font-size: var(--van-font-size-sm);--van-label-location-line-height: var(--van-line-height-md);--van-label-location-icon-size: 12px;--van-label-location-gap: 2px;--van-label-ellipsis-label-max-width: 120px}.van-label{display:flex;align-items:flex-start;gap:var(--van-label-gap);color:var(--van-label-value-color);font-size:var(--van-label-font-size);line-height:var(--van-label-line-height)}.van-label--vertical{flex-direction:column}.van-label--content-right .van-label__value{text-align:right}.van-label--mini{--van-label-font-size: var(--van-label-mini-font-size);--van-label-line-height: var(--van-label-mini-line-height);--van-label-media-size: var(--van-label-mini-media-size)}.van-label--ellipsis .van-label__label{flex:0 1 var(--van-label-ellipsis-label-max-width);max-width:var(--van-label-ellipsis-label-max-width);overflow:hidden;text-overflow:ellipsis}.van-label--ellipsis .van-label__value{overflow:hidden}.van-label--ellipsis .van-label__text,.van-label--ellipsis .van-label__link{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.van-label__label{flex:none;color:var(--van-label-label-color);white-space:nowrap}.van-label__value{flex:1;min-width:0;color:inherit;overflow-wrap:anywhere}.van-label__text{display:block}.van-label--location .van-label__value{display:flex;flex-direction:column;gap:var(--van-label-location-gap);width:100%}.van-label--location .van-label__link{align-self:flex-start;text-align:left}.van-label__location{display:inline-flex;gap:var(--van-label-location-gap);align-items:center;width:-moz-fit-content;width:fit-content;max-width:100%;color:var(--van-label-location-color);font-size:var(--van-label-location-font-size);font-weight:400;line-height:var(--van-label-location-line-height);overflow-wrap:anywhere}.van-label__location .van-icon{flex:none;font-size:var(--van-label-location-icon-size)}.van-label--bold .van-label__value{color:var(--van-label-bold-color);font-weight:var(--van-font-weight-bold)}.van-label__link{display:inline;padding:0;color:var(--van-label-link-color);font:inherit;font-weight:var(--van-font-weight-bold);text-decoration:none;background:transparent;border:0;cursor:pointer;transition:opacity var(--van-animation-duration-fast)}.van-label__link:active{opacity:var(--van-active-opacity)}.van-label__tags,.van-label__media{display:flex;flex-wrap:wrap;align-items:flex-start}.van-label__tags{gap:var(--van-label-tags-gap);min-height:var(--van-label-line-height);align-items:center}.van-label__media{gap:var(--van-label-media-gap);width:100%}.van-label__media-item{position:relative;flex:none;width:var(--van-label-media-size);height:var(--van-label-media-size);padding:0;overflow:hidden;background:transparent;border:0;border-radius:var(--van-label-media-radius);cursor:pointer;transition:opacity var(--van-animation-duration-fast)}.van-label__media-item:active{opacity:var(--van-active-opacity)}.van-label__media-item .van-image{display:block;width:100%;height:100%}.van-label__play{position:absolute;top:50%;left:50%;color:var(--van-white);font-size:24px;transform:translate(-50%,-50%);text-shadow:0 1px 2px rgba(0,0,0,.45)}
@@ -32,6 +32,7 @@ export declare const Label: import("../utils").WithInstall<import("vue").DefineC
32
32
  default: import("./Label").LabelContentAlign;
33
33
  };
34
34
  vertical: BooleanConstructor;
35
+ ellipsis: BooleanConstructor;
35
36
  href: StringConstructor;
36
37
  location: StringConstructor;
37
38
  tags: {
@@ -42,7 +43,7 @@ export declare const Label: import("../utils").WithInstall<import("vue").DefineC
42
43
  type: import("vue").PropType<import("./Label").LabelMedia[]>;
43
44
  default: () => never[];
44
45
  };
45
- }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "click-media")[], "click" | "click-media", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
46
+ }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "click-media" | "long-press")[], "click" | "click-media" | "long-press", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
46
47
  label: {
47
48
  type: import("vue").PropType<string>;
48
49
  default: string;
@@ -76,6 +77,7 @@ export declare const Label: import("../utils").WithInstall<import("vue").DefineC
76
77
  default: import("./Label").LabelContentAlign;
77
78
  };
78
79
  vertical: BooleanConstructor;
80
+ ellipsis: BooleanConstructor;
79
81
  href: StringConstructor;
80
82
  location: StringConstructor;
81
83
  tags: {
@@ -89,6 +91,7 @@ export declare const Label: import("../utils").WithInstall<import("vue").DefineC
89
91
  }>> & {
90
92
  onClick?: ((...args: any[]) => any) | undefined;
91
93
  "onClick-media"?: ((...args: any[]) => any) | undefined;
94
+ "onLong-press"?: ((...args: any[]) => any) | undefined;
92
95
  }, {
93
96
  type: import("./Label").LabelType;
94
97
  label: string;
@@ -97,13 +100,14 @@ export declare const Label: import("../utils").WithInstall<import("vue").DefineC
97
100
  tags: string[];
98
101
  media: import("./Label").LabelMedia[];
99
102
  vertical: boolean;
103
+ ellipsis: boolean;
100
104
  showLabel: boolean;
101
105
  showContent: boolean;
102
106
  showColon: boolean | undefined;
103
107
  contentAlign: import("./Label").LabelContentAlign;
104
108
  }>>;
105
109
  export default Label;
106
- export type { LabelMedia, LabelMediaType, LabelProps, LabelType } from './Label';
110
+ export type { LabelLongPressEvent, LabelLongPressTarget, LabelMedia, LabelMediaType, LabelProps, LabelType, } from './Label';
107
111
  declare module 'vue' {
108
112
  interface GlobalComponents {
109
113
  VanLabel: typeof Label;
@@ -20,6 +20,7 @@
20
20
  --van-label-location-line-height: @label-location-line-height;
21
21
  --van-label-location-icon-size: @label-location-icon-size;
22
22
  --van-label-location-gap: @label-location-gap;
23
+ --van-label-ellipsis-label-max-width: @label-ellipsis-label-max-width;
23
24
  }
24
25
 
25
26
  .van-label {
@@ -44,6 +45,27 @@
44
45
  --van-label-media-size: var(--van-label-mini-media-size);
45
46
  }
46
47
 
48
+ &--ellipsis {
49
+ .van-label__label {
50
+ flex: 0 1 var(--van-label-ellipsis-label-max-width);
51
+ max-width: var(--van-label-ellipsis-label-max-width);
52
+ overflow: hidden;
53
+ text-overflow: ellipsis;
54
+ }
55
+
56
+ .van-label__value {
57
+ overflow: hidden;
58
+ }
59
+
60
+ .van-label__text,
61
+ .van-label__link {
62
+ display: block;
63
+ overflow: hidden;
64
+ text-overflow: ellipsis;
65
+ white-space: nowrap;
66
+ }
67
+ }
68
+
47
69
  &__label {
48
70
  flex: none;
49
71
  color: var(--van-label-label-color);
@@ -17,3 +17,4 @@
17
17
  @label-location-line-height: var(--van-line-height-md);
18
18
  @label-location-icon-size: 12px;
19
19
  @label-location-gap: 2px;
20
+ @label-ellipsis-label-max-width: 120px;
@@ -7,6 +7,12 @@ export declare type MaterialActionBarItem = {
7
7
  unit: string;
8
8
  kind?: 'material' | 'tool';
9
9
  };
10
+ export declare type MaterialActionBarPicking = {
11
+ quantityLabel?: string;
12
+ outboundLabel?: string;
13
+ outboundValue?: Numeric;
14
+ outboundBold?: boolean;
15
+ };
10
16
  declare const _default: import("vue").DefineComponent<{
11
17
  item: {
12
18
  type: PropType<MaterialActionBarItem>;
@@ -30,6 +36,10 @@ declare const _default: import("vue").DefineComponent<{
30
36
  type: StringConstructor;
31
37
  default: string;
32
38
  };
39
+ picking: {
40
+ type: PropType<MaterialActionBarPicking>;
41
+ default: undefined;
42
+ };
33
43
  }, () => 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<{
34
44
  item: {
35
45
  type: PropType<MaterialActionBarItem>;
@@ -53,6 +63,10 @@ declare const _default: import("vue").DefineComponent<{
53
63
  type: StringConstructor;
54
64
  default: string;
55
65
  };
66
+ picking: {
67
+ type: PropType<MaterialActionBarPicking>;
68
+ default: undefined;
69
+ };
56
70
  }>> & {
57
71
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
58
72
  onDetail?: ((...args: any[]) => any) | undefined;
@@ -62,5 +76,6 @@ declare const _default: import("vue").DefineComponent<{
62
76
  keyword: string;
63
77
  enableInputDialog: boolean;
64
78
  showWarning: boolean;
79
+ picking: MaterialActionBarPicking;
65
80
  }>;
66
81
  export default _default;
@@ -25,6 +25,7 @@ var import_dialog = require("../dialog");
25
25
  var import_icon = require("../icon");
26
26
  var import_stepper = require("../stepper");
27
27
  var import_tag = require("../tag");
28
+ var import_toast = require("../toast");
28
29
  var import_utils = require("../utils");
29
30
  const [name, bem] = (0, import_utils.createNamespace)("material-action-bar");
30
31
  var stdin_default = (0, import_vue.defineComponent)({
@@ -48,14 +49,20 @@ var stdin_default = (0, import_vue.defineComponent)({
48
49
  warning: {
49
50
  type: String,
50
51
  default: ""
52
+ },
53
+ picking: {
54
+ type: Object,
55
+ default: void 0
51
56
  }
52
57
  },
53
58
  emits: ["update:modelValue", "detail"],
54
59
  setup(props, {
60
+ slots,
55
61
  emit
56
62
  }) {
57
63
  const showInputDialog = (0, import_vue.ref)(false);
58
64
  const inputValue = (0, import_vue.ref)("");
65
+ let detailLongPressTimer;
59
66
  const openInputDialog = () => {
60
67
  if (!props.enableInputDialog)
61
68
  return;
@@ -68,6 +75,25 @@ var stdin_default = (0, import_vue.defineComponent)({
68
75
  emit("update:modelValue", Math.max(0, value));
69
76
  }
70
77
  };
78
+ const clearDetailLongPress = () => {
79
+ if (detailLongPressTimer) {
80
+ clearTimeout(detailLongPressTimer);
81
+ detailLongPressTimer = void 0;
82
+ }
83
+ };
84
+ const onDetailLongPressStart = (event) => {
85
+ const target = event.currentTarget;
86
+ if (target.scrollWidth <= target.clientWidth) {
87
+ return;
88
+ }
89
+ clearDetailLongPress();
90
+ detailLongPressTimer = setTimeout(() => {
91
+ (0, import_toast.Toast)({
92
+ message: props.item.detail,
93
+ position: "middle"
94
+ });
95
+ }, 500);
96
+ };
71
97
  const highlight = (text) => {
72
98
  const query = props.keyword.trim();
73
99
  if (!query)
@@ -90,62 +116,85 @@ var stdin_default = (0, import_vue.defineComponent)({
90
116
  parts.push(text.slice(start));
91
117
  return parts;
92
118
  };
93
- return () => (0, import_vue.createVNode)("div", {
94
- "class": bem({
95
- selected: props.selected
96
- })
97
- }, [(0, import_vue.createVNode)("div", {
98
- "class": bem("main")
99
- }, [(0, import_vue.createVNode)("button", {
100
- "type": "button",
101
- "class": bem("detail"),
102
- "onClick": () => emit("detail", props.item)
103
- }, [(0, import_vue.createVNode)("span", null, [highlight(props.item.name)]), props.selected && props.item.kind && (0, import_vue.createVNode)(import_tag.Tag, {
104
- "class": bem("kind-tag"),
105
- "color": props.item.kind === "material" ? "#d9ebff" : "#d9f7f7",
106
- "textColor": props.item.kind === "material" ? "var(--van-primary-color)" : "#00aeb3"
107
- }, {
108
- default: () => [props.item.kind === "material" ? "\u7269\u8D44" : "\u5DE5\u5177"]
109
- }), (0, import_vue.createVNode)(import_icon.Icon, {
110
- "name": "arrow",
111
- "size": "12"
112
- }, null)]), (0, import_vue.createVNode)("div", {
113
- "class": bem("stepper-wrapper")
114
- }, [(0, import_vue.createVNode)(import_stepper.Stepper, {
115
- "class": bem("stepper"),
116
- "modelValue": props.modelValue,
117
- "min": 0,
118
- "theme": "round",
119
- "buttonSize": 18,
120
- "disableInput": true,
121
- "onUpdate:modelValue": (value) => emit("update:modelValue", Number(value))
122
- }, null), props.enableInputDialog && (0, import_vue.createVNode)("button", {
123
- "type": "button",
124
- "class": bem("number-trigger"),
125
- "aria-label": "\u8F93\u5165\u6570\u91CF",
126
- "onClick": openInputDialog
127
- }, null)]), (0, import_vue.createVNode)("span", {
128
- "class": bem("unit")
129
- }, [props.item.unit])]), (0, import_vue.createVNode)("p", {
130
- "class": bem("desc")
131
- }, [highlight(props.item.detail)]), props.showWarning && props.warning && (0, import_vue.createVNode)("p", {
132
- "class": bem("warning")
133
- }, [props.warning]), (0, import_vue.createVNode)(import_dialog.Dialog.Component, {
134
- "show": showInputDialog.value,
135
- "inputValue": inputValue.value,
136
- "inputAlign": "left",
137
- "title": "\u8F93\u5165\u6570\u91CF",
138
- "inputPlaceholder": "\u8BF7\u8F93\u5165\u6570\u91CF",
139
- "inputAutofocus": true,
140
- "showInput": true,
141
- "showCancelButton": true,
142
- "onUpdate:show": (value) => {
143
- showInputDialog.value = value;
144
- },
145
- "onUpdate:inputValue": (value) => {
146
- inputValue.value = value;
147
- },
148
- "onConfirm": confirmInputValue
149
- }, null)]);
119
+ (0, import_vue.onBeforeUnmount)(clearDetailLongPress);
120
+ return () => {
121
+ var _a, _b, _c, _d, _e;
122
+ return (0, import_vue.createVNode)("div", {
123
+ "class": bem({
124
+ selected: props.selected
125
+ })
126
+ }, [(0, import_vue.createVNode)("div", {
127
+ "class": bem("main")
128
+ }, [(0, import_vue.createVNode)("button", {
129
+ "type": "button",
130
+ "class": bem("detail"),
131
+ "onClick": () => emit("detail", props.item)
132
+ }, [(0, import_vue.createVNode)("span", null, [highlight(props.item.name)]), props.selected && props.item.kind && (0, import_vue.createVNode)(import_tag.Tag, {
133
+ "class": bem("kind-tag"),
134
+ "color": props.item.kind === "material" ? "#d9ebff" : "#d9f7f7",
135
+ "textColor": props.item.kind === "material" ? "var(--van-primary-color)" : "#00aeb3"
136
+ }, {
137
+ default: () => [props.item.kind === "material" ? "\u7269\u8D44" : "\u5DE5\u5177"]
138
+ }), (0, import_vue.createVNode)(import_icon.Icon, {
139
+ "name": "arrow",
140
+ "size": "12"
141
+ }, null)]), (((_a = props.picking) == null ? void 0 : _a.quantityLabel) || slots["stepper-prefix"]) && (0, import_vue.createVNode)("div", {
142
+ "class": bem("stepper-prefix")
143
+ }, [((_b = props.picking) == null ? void 0 : _b.quantityLabel) || ((_c = slots["stepper-prefix"]) == null ? void 0 : _c.call(slots))]), (0, import_vue.createVNode)("div", {
144
+ "class": bem("stepper-wrapper")
145
+ }, [(0, import_vue.createVNode)(import_stepper.Stepper, {
146
+ "class": bem("stepper"),
147
+ "modelValue": props.modelValue,
148
+ "min": 0,
149
+ "theme": "round",
150
+ "buttonSize": 18,
151
+ "disableInput": true,
152
+ "onUpdate:modelValue": (value) => emit("update:modelValue", Number(value))
153
+ }, null), props.enableInputDialog && (0, import_vue.createVNode)("button", {
154
+ "type": "button",
155
+ "class": bem("number-trigger"),
156
+ "aria-label": "\u8F93\u5165\u6570\u91CF",
157
+ "onClick": openInputDialog
158
+ }, null)]), (0, import_vue.createVNode)("span", {
159
+ "class": bem("unit")
160
+ }, [props.item.unit])]), (0, import_vue.createVNode)("p", {
161
+ "class": bem("desc"),
162
+ "onTouchstart": onDetailLongPressStart,
163
+ "onTouchmove": clearDetailLongPress,
164
+ "onTouchend": clearDetailLongPress,
165
+ "onTouchcancel": clearDetailLongPress,
166
+ "onMousedown": onDetailLongPressStart,
167
+ "onMousemove": clearDetailLongPress,
168
+ "onMouseup": clearDetailLongPress,
169
+ "onMouseleave": clearDetailLongPress
170
+ }, [highlight(props.item.detail)]), props.showWarning && props.warning && (0, import_vue.createVNode)("p", {
171
+ "class": bem("warning")
172
+ }, [props.warning]), ((_d = props.picking) == null ? void 0 : _d.outboundValue) !== void 0 && (0, import_vue.createVNode)("p", {
173
+ "class": bem("picking-outbound")
174
+ }, [(0, import_vue.createVNode)("span", {
175
+ "class": bem("picking-label")
176
+ }, [props.picking.outboundLabel || "\u5E94\u51FA\uFF1A"]), (0, import_vue.createVNode)("span", {
177
+ "class": bem("picking-value"),
178
+ "style": {
179
+ fontWeight: props.picking.outboundBold ? 600 : 400
180
+ }
181
+ }, [props.picking.outboundValue])]), (_e = slots.default) == null ? void 0 : _e.call(slots), (0, import_vue.createVNode)(import_dialog.Dialog.Component, {
182
+ "show": showInputDialog.value,
183
+ "inputValue": inputValue.value,
184
+ "inputAlign": "left",
185
+ "title": "\u8F93\u5165\u6570\u91CF",
186
+ "inputPlaceholder": "\u8BF7\u8F93\u5165\u6570\u91CF",
187
+ "inputAutofocus": true,
188
+ "showInput": true,
189
+ "showCancelButton": true,
190
+ "onUpdate:show": (value) => {
191
+ showInputDialog.value = value;
192
+ },
193
+ "onUpdate:inputValue": (value) => {
194
+ inputValue.value = value;
195
+ },
196
+ "onConfirm": confirmInputValue
197
+ }, null)]);
198
+ };
150
199
  }
151
200
  });
@@ -1 +1 @@
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)}
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:1 1 0;gap:2px;align-items:center;min-width:0;padding:0;overflow:hidden;color:var(--van-gray-9);font:inherit;font-size:var(--van-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-prefix{flex:none;margin:0 4px 0 8px;color:var(--van-text-color-2);font-size:var(--van-font-size-md);line-height:var(--van-line-height-lg)}.van-material-action-bar__stepper-wrapper{position:relative;flex:none;margin-left:4px}.van-material-action-bar__kind-tag{flex:none;margin-left:4px}.van-material-action-bar__stepper{flex:none;margin-left:0;--van-stepper-input-width: 24px;--van-stepper-input-height: 18px;--van-stepper-input-font-size: var(--van-font-size-md);--van-stepper-input-line-height: var(--van-line-height-lg)}.van-material-action-bar__number-trigger{position:absolute;z-index:1;top:0;left:18px;width:24px;height:18px;padding:0;background:transparent;border:0;cursor:pointer}.van-material-action-bar__unit{flex:none;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__picking-outbound{display:flex;gap:4px;margin:2px 0 0;color:var(--van-text-color);font-size:var(--van-font-size-sm);line-height:20px}.van-material-action-bar__picking-label{color:var(--van-gray-6)}.van-material-action-bar__picking-value{font-weight:600}.van-material-action-bar__keyword{color:var(--van-primary-color)}
@@ -1,3 +1,68 @@
1
+ export declare const MaterialActionList: import("../utils").WithInstall<import("vue").DefineComponent<{
2
+ item: {
3
+ type: import("vue").PropType<import("./MaterialActionBar").MaterialActionBarItem>;
4
+ required: true;
5
+ };
6
+ modelValue: {
7
+ type: NumberConstructor;
8
+ required: true;
9
+ };
10
+ keyword: {
11
+ type: StringConstructor;
12
+ default: string;
13
+ };
14
+ selected: BooleanConstructor;
15
+ enableInputDialog: {
16
+ type: BooleanConstructor;
17
+ default: true;
18
+ };
19
+ showWarning: BooleanConstructor;
20
+ warning: {
21
+ type: StringConstructor;
22
+ default: string;
23
+ };
24
+ picking: {
25
+ type: import("vue").PropType<import("./MaterialActionBar").MaterialActionBarPicking>;
26
+ default: undefined;
27
+ };
28
+ }, () => 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<{
29
+ item: {
30
+ type: import("vue").PropType<import("./MaterialActionBar").MaterialActionBarItem>;
31
+ required: true;
32
+ };
33
+ modelValue: {
34
+ type: NumberConstructor;
35
+ required: true;
36
+ };
37
+ keyword: {
38
+ type: StringConstructor;
39
+ default: string;
40
+ };
41
+ selected: BooleanConstructor;
42
+ enableInputDialog: {
43
+ type: BooleanConstructor;
44
+ default: true;
45
+ };
46
+ showWarning: BooleanConstructor;
47
+ warning: {
48
+ type: StringConstructor;
49
+ default: string;
50
+ };
51
+ picking: {
52
+ type: import("vue").PropType<import("./MaterialActionBar").MaterialActionBarPicking>;
53
+ default: undefined;
54
+ };
55
+ }>> & {
56
+ "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
57
+ onDetail?: ((...args: any[]) => any) | undefined;
58
+ }, {
59
+ selected: boolean;
60
+ warning: string;
61
+ keyword: string;
62
+ enableInputDialog: boolean;
63
+ showWarning: boolean;
64
+ picking: import("./MaterialActionBar").MaterialActionBarPicking;
65
+ }>>;
1
66
  export declare const MaterialActionBar: import("../utils").WithInstall<import("vue").DefineComponent<{
2
67
  item: {
3
68
  type: import("vue").PropType<import("./MaterialActionBar").MaterialActionBarItem>;
@@ -21,6 +86,10 @@ export declare const MaterialActionBar: import("../utils").WithInstall<import("v
21
86
  type: StringConstructor;
22
87
  default: string;
23
88
  };
89
+ picking: {
90
+ type: import("vue").PropType<import("./MaterialActionBar").MaterialActionBarPicking>;
91
+ default: undefined;
92
+ };
24
93
  }, () => 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<{
25
94
  item: {
26
95
  type: import("vue").PropType<import("./MaterialActionBar").MaterialActionBarItem>;
@@ -44,6 +113,10 @@ export declare const MaterialActionBar: import("../utils").WithInstall<import("v
44
113
  type: StringConstructor;
45
114
  default: string;
46
115
  };
116
+ picking: {
117
+ type: import("vue").PropType<import("./MaterialActionBar").MaterialActionBarPicking>;
118
+ default: undefined;
119
+ };
47
120
  }>> & {
48
121
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
49
122
  onDetail?: ((...args: any[]) => any) | undefined;
@@ -53,6 +126,7 @@ export declare const MaterialActionBar: import("../utils").WithInstall<import("v
53
126
  keyword: string;
54
127
  enableInputDialog: boolean;
55
128
  showWarning: boolean;
129
+ picking: import("./MaterialActionBar").MaterialActionBarPicking;
56
130
  }>>;
57
- export default MaterialActionBar;
58
- export type { MaterialActionBarItem } from './MaterialActionBar';
131
+ export default MaterialActionList;
132
+ export type { MaterialActionBarItem, MaterialActionBarItem as MaterialActionListItem, MaterialActionBarPicking, } from './MaterialActionBar';
@@ -28,10 +28,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
28
28
  var stdin_exports = {};
29
29
  __export(stdin_exports, {
30
30
  MaterialActionBar: () => MaterialActionBar,
31
+ MaterialActionList: () => MaterialActionList,
31
32
  default: () => stdin_default
32
33
  });
33
34
  module.exports = __toCommonJS(stdin_exports);
34
35
  var import_utils = require("../utils");
35
36
  var import_MaterialActionBar = __toESM(require("./MaterialActionBar"));
36
- const MaterialActionBar = (0, import_utils.withInstall)(import_MaterialActionBar.default);
37
- var stdin_default = MaterialActionBar;
37
+ const MaterialActionList = (0, import_utils.withInstall)(import_MaterialActionBar.default);
38
+ const MaterialActionBar = MaterialActionList;
39
+ var stdin_default = MaterialActionList;