sard-uniapp 1.22.1 → 1.22.2

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/CHANGELOG.md CHANGED
@@ -1,3 +1,19 @@
1
+ ## [1.22.2](https://github.com/sutras/sard-uniapp/compare/v1.22.1...v1.22.2) (2025-07-24)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * 优化支付宝端拖拽体验 ([351db34](https://github.com/sutras/sard-uniapp/commit/351db340ec343c95cb37015e03375113b43a6840))
7
+ * 修复支付宝端获取元素尺寸可能存在失败的问题 ([12c2dfb](https://github.com/sutras/sard-uniapp/commit/12c2dfb59e17a9811600b11d23c093d6c0c56bf6))
8
+ * 隐藏 list-item 单独使用时的上下文警告 ([18fe6bb](https://github.com/sutras/sard-uniapp/commit/18fe6bb645c383282723ad29c4636ac775cbadf2))
9
+
10
+
11
+ ### Features
12
+
13
+ * upload 新增默认插槽 ([73f3658](https://github.com/sutras/sard-uniapp/commit/73f3658c94cc7b04c036a577a959c1385665e6f7))
14
+
15
+
16
+
1
17
  ## [1.22.1](https://github.com/sutras/sard-uniapp/compare/v1.22.0...v1.22.1) (2025-07-19)
2
18
 
3
19
 
@@ -12,12 +12,6 @@ version: 1.22+
12
12
 
13
13
  `Dnd` 组件用于提供上下文;`DndItem` 组件用于展示拖放样式以及作为列表项容器;`DndHandle` 需放置在 `DndItem` 中,控制着拖拽区域,短按可进入拖拽状态,样式和内容可自定义。
14
14
 
15
- @warning
16
-
17
- 暂不支持支付宝。
18
-
19
- @endwarning
20
-
21
15
  ## 引入
22
16
 
23
17
  ```ts
@@ -1,17 +1,6 @@
1
1
  <template>
2
2
  <view :class="dndClass" :style="dndStyle">
3
3
  <slot :list="dndList"></slot>
4
-
5
- <!-- #ifdef MP-ALIPAY -->
6
- <view
7
- :class="
8
- classNames(
9
- bem.e('disable-scroll'),
10
- bem.em('disable-scroll', 'dragging', dragging),
11
- )
12
- "
13
- ></view>
14
- <!-- #endif -->
15
4
  </view>
16
5
  </template>
17
6
 
@@ -123,9 +112,7 @@ export default _defineComponent({
123
112
  const dndStyle = computed(() => {
124
113
  return stringifyStyle(props.rootStyle);
125
114
  });
126
- const __returned__ = { props, emit, bem, keyMap, innerList, dndList, dragStart, dragMove, drop, dragging, rectItems, addRectItem, removeRectItem, dndClass, dndStyle, get classNames() {
127
- return classNames;
128
- } };
115
+ const __returned__ = { props, emit, bem, keyMap, innerList, dndList, dragStart, dragMove, drop, dragging, rectItems, addRectItem, removeRectItem, dndClass, dndStyle };
129
116
  return __returned__;
130
117
  }
131
118
  });
@@ -4,8 +4,4 @@
4
4
  @include b() {
5
5
  @include universal;
6
6
  }
7
-
8
- /* #ifdef MP-ALIPAY */
9
- @include disable-scroll;
10
- /* #endif */
11
7
  }
@@ -4,7 +4,6 @@
4
4
  @include b() {
5
5
  @include universal;
6
6
  cursor: pointer;
7
- touch-action: none;
8
7
  }
9
8
 
10
9
  @include m(dragging) {
@@ -13,3 +13,6 @@ export declare const defaultIconProps: {
13
13
  family: string;
14
14
  separate: IconProps["separate"];
15
15
  };
16
+ export interface IconEmits {
17
+ (e: 'click', event: any): void;
18
+ }
@@ -1,5 +1,9 @@
1
1
  import { type IconProps } from './common';
2
- declare const _default: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {
2
+ declare const _default: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
3
+ click: (event: any) => any;
4
+ }, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{
5
+ onClick?: ((event: any) => any) | undefined;
6
+ }>, {
3
7
  name: string;
4
8
  separate: boolean;
5
9
  family: string;
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <view :class="iconClass" :style="iconStyle">
2
+ <view :class="iconClass" :style="iconStyle" @click="onClick">
3
3
  <image v-if="isImg" :class="bem.e('image')" :src="name" />
4
4
  </view>
5
5
  </template>
@@ -35,13 +35,18 @@ export default _defineComponent({
35
35
  color: { type: String, required: false },
36
36
  separate: { type: Boolean, required: false }
37
37
  }, defaultIconProps),
38
- setup(__props, { expose: __expose }) {
38
+ emits: ["click"],
39
+ setup(__props, { expose: __expose, emit: __emit }) {
39
40
  __expose();
40
41
  const props = __props;
42
+ const emit = __emit;
41
43
  const bem = createBem("icon");
42
44
  const isImg = computed(() => {
43
45
  return isFileUrl(props.name);
44
46
  });
47
+ const onClick = (event) => {
48
+ emit("click", event);
49
+ };
45
50
  const iconClass = computed(() => {
46
51
  if (isImg.value) {
47
52
  return classNames(bem.b(), props.rootClass);
@@ -71,7 +76,7 @@ export default _defineComponent({
71
76
  props.rootStyle
72
77
  );
73
78
  });
74
- const __returned__ = { props, bem, isImg, iconClass, iconStyle };
79
+ const __returned__ = { props, emit, bem, isImg, onClick, iconClass, iconStyle };
75
80
  return __returned__;
76
81
  }
77
82
  });
@@ -1 +1 @@
1
- export type { IconProps } from './common';
1
+ export type { IconProps, IconEmits } from './common';
@@ -56,7 +56,7 @@ import ListItem from 'sard-uniapp/components/list-item/list-item.vue'
56
56
 
57
57
  @code('${DEMO_PATH}/list/demo/Card.vue')
58
58
 
59
- ### 隐藏边框 <sup>1.21.0+</sup>
59
+ ### 隐藏边框 <sup>1.21+</sup>
60
60
 
61
61
  可以使用 `hide-border` 属性隐藏边框。
62
62
 
@@ -66,15 +66,15 @@ import ListItem from 'sard-uniapp/components/list-item/list-item.vue'
66
66
 
67
67
  ### ListProps
68
68
 
69
- | 属性 | 描述 | 类型 | 默认值 |
70
- | ------------------------------ | -------------- | ---------------- | ------ |
71
- | root-class | 组件根元素类名 | string | - |
72
- | root-style | 组件根元素样式 | StyleValue | - |
73
- | title | 列表顶部标题 | string \| number | - |
74
- | description | 列表底部描述 | string \| number | - |
75
- | card | 卡片风格 | boolean | false |
76
- | inlaid | 嵌入式列表 | boolean | false |
77
- | hide-border <sup>1.21.0+</sup> | 是否隐藏边框 | boolean | false |
69
+ | 属性 | 描述 | 类型 | 默认值 |
70
+ | ---------------------------- | -------------- | ---------------- | ------ |
71
+ | root-class | 组件根元素类名 | string | - |
72
+ | root-style | 组件根元素样式 | StyleValue | - |
73
+ | title | 列表顶部标题 | string \| number | - |
74
+ | description | 列表底部描述 | string \| number | - |
75
+ | card | 卡片风格 | boolean | false |
76
+ | inlaid | 嵌入式列表 | boolean | false |
77
+ | hide-border <sup>1.21+</sup> | 是否隐藏边框 | boolean | false |
78
78
 
79
79
  ### ListSlots
80
80
 
@@ -101,7 +101,7 @@ export default _defineComponent({
101
101
  const slots = _useSlots();
102
102
  const emit = __emit;
103
103
  const bem = createBem("list-item");
104
- const context = inject(listContextKey);
104
+ const context = inject(listContextKey, null);
105
105
  const onClick = (event) => {
106
106
  emit("click", event);
107
107
  };
@@ -7,4 +7,3 @@
7
7
  @forward './mixins/universal';
8
8
  @forward './mixins/bem';
9
9
  @forward './mixins/scroll-shadow';
10
- @forward './mixins/disable-scroll';
@@ -211,7 +211,5 @@ page,
211
211
  --sar-duration-slow: 500ms;
212
212
  --sar-duration: 300ms;
213
213
  --sar-duration-fast: 150ms;
214
-
215
- --sar-disable-scroll-z-index: 999999;
216
214
  }
217
215
  // #endvariables
@@ -100,6 +100,5 @@ export interface TreeContext {
100
100
  drop: (dropOriginNode: TreeStateNode, dropTargetNode: TreeStateNode, position: number) => void;
101
101
  currentKey: string | number | undefined;
102
102
  singleSelect: (node: TreeStateNode) => void;
103
- dragging: boolean;
104
103
  }
105
104
  export declare const treeContextSymbol: unique symbol;
@@ -10,8 +10,4 @@
10
10
  @include e(input-wrapper) {
11
11
  padding: var(--sar-dialog-body-padding-y) var(--sar-dialog-body-padding-x);
12
12
  }
13
-
14
- /* #ifdef MP-ALIPAY */
15
- @include disable-scroll;
16
- /* #endif */
17
13
  }
@@ -31,17 +31,6 @@
31
31
  </sar-dialog>
32
32
 
33
33
  <sar-toast v-model:visible="toastVisible" :title="t('please')" />
34
-
35
- <!-- #ifdef MP-ALIPAY -->
36
- <view
37
- :class="
38
- classNames(
39
- bem.e('disable-scroll'),
40
- bem.em('disable-scroll', 'dragging', context.dragging),
41
- )
42
- "
43
- ></view>
44
- <!-- #endif -->
45
34
  </template>
46
35
 
47
36
  <script>
@@ -572,8 +561,7 @@ export default _defineComponent({
572
561
  drop,
573
562
  edit,
574
563
  currentKey,
575
- singleSelect,
576
- dragging: false
564
+ singleSelect
577
565
  });
578
566
  provide(treeContextSymbol, context);
579
567
  __expose({
@@ -608,9 +596,7 @@ export default _defineComponent({
608
596
  return currentEditNode;
609
597
  }, set currentEditNode(v) {
610
598
  currentEditNode = v;
611
- }, currentEditType, currentEditValue, mapEditTypeTitle, currentEditTitle, dialogVisible, toastVisible, onPopoverSelect, beforeClose, edit, focused, onVisibleHook, defaultFilterMethod, filter, currentKey, singleSelect, context, treeClass, treeStyle, get classNames() {
612
- return classNames;
613
- }, SarTreeNode, SarPopover, SarInput, SarDialog, SarToast };
599
+ }, currentEditType, currentEditValue, mapEditTypeTitle, currentEditTitle, dialogVisible, toastVisible, onPopoverSelect, beforeClose, edit, focused, onVisibleHook, defaultFilterMethod, filter, currentKey, singleSelect, context, treeClass, treeStyle, SarTreeNode, SarPopover, SarInput, SarDialog, SarToast };
614
600
  return __returned__;
615
601
  }
616
602
  });
@@ -94,6 +94,7 @@
94
94
  line-height: var(--sar-leading-none);
95
95
  color: var(--sar-tree-drag-color);
96
96
  cursor: pointer;
97
+ touch-action: none;
97
98
 
98
99
  &:active {
99
100
  opacity: var(--sar-tree-drag-active-opacity);
@@ -207,7 +207,6 @@ export default _defineComponent({
207
207
  onDragSimulatedPressTouchEnd
208
208
  ] = useSimulatedPress({
209
209
  start: () => {
210
- treeContext.dragging = true;
211
210
  dragging.value = true;
212
211
  treeContext.setExpandedByNode(props.node, false);
213
212
  onDragStart();
@@ -218,7 +217,6 @@ export default _defineComponent({
218
217
  }
219
218
  },
220
219
  end: () => {
221
- treeContext.dragging = false;
222
220
  dragging.value = false;
223
221
  onDragEnd();
224
222
  },
@@ -83,6 +83,14 @@ import Upload from 'sard-uniapp/components/upload/upload.vue'
83
83
 
84
84
  @code('${DEMO_PATH}/upload/demo/CustomSelect.vue')
85
85
 
86
+ ### 自定义渲染 <sup>1.22.2+</sup>
87
+
88
+ 使用默认插槽自定义渲染内容。
89
+
90
+ `list` 参数用于渲染文件列表;`onSelect` 用于选择文件;`onRemove` 用于删除文件;`onImageClick` 用于预览图片。
91
+
92
+ @code('${DEMO_PATH}/upload/demo/Custom.vue')
93
+
86
94
  ## API
87
95
 
88
96
  ### UploadProps
@@ -110,7 +118,7 @@ import Upload from 'sard-uniapp/components/upload/upload.vue'
110
118
  | before-remove | 文件删除前的回调,返回 false 可终止文件删除,支持返回 Promise | (index: number, fileItem: UploadFileItem) => boolean \| Promise\<any> | - |
111
119
  | validate-event | 是否触发表单验证 | boolean | true |
112
120
 
113
- ### UploadSelectOptions <sup>1.21.0+</sup>
121
+ ### UploadSelectOptions <sup>1.21+</sup>
114
122
 
115
123
  ```ts
116
124
  interface UploadSelectOptions {
@@ -120,9 +128,10 @@ interface UploadSelectOptions {
120
128
 
121
129
  ### UploadSlots
122
130
 
123
- | 插槽 | 描述 | 属性 |
124
- | ------ | -------------- | ---- |
125
- | select | 自定义选取内容 | - |
131
+ | 插槽 | 描述 | 属性 |
132
+ | -------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
133
+ | default <sup>1.22.2+</sup> | 自定义渲染 | { list: UploadFileItem[]; onSelect: () => void; onRemove: (index: number, item: UploadFileItem) => void; onImageClick: (index: number) => void} |
134
+ | select | 自定义选取内容 | - |
126
135
 
127
136
  ### UploadEmits
128
137
 
@@ -47,6 +47,12 @@ export interface UploadProps {
47
47
  }
48
48
  export declare const defaultUploadProps: Omit<typeof defaultConfig.upload, "sourceType" | "sizeType">;
49
49
  export interface UploadSlots {
50
+ default?(props: {
51
+ list: UploadFileItem[];
52
+ onSelect: () => void;
53
+ onRemove: (index: number, item: UploadFileItem) => void;
54
+ onImageClick: (index: number) => void;
55
+ }): any;
50
56
  select?(props: Record<string, never>): any;
51
57
  }
52
58
  export interface UploadEmits {
@@ -1,36 +1,43 @@
1
1
  <template>
2
2
  <view :class="uploadClass" :style="uploadStyle">
3
- <view :class="bem.e('wrapper')">
4
- <sar-upload-preview
5
- v-for="(item, index) in innerValue"
6
- :key="index"
7
- :file="item.file"
8
- :url="item.url"
9
- :is-image="item.isImage"
10
- :is-video="item.isVideo"
11
- :status="item.status"
12
- :name="item.name"
13
- :message="item.message"
14
- :removable="removable"
15
- :index="index"
16
- :disabled="isDisabled"
17
- :readonly="isReadonly"
18
- @remove="onRemove(index, item)"
19
- @image-click="onImageClick(index)"
20
- @click="onItemClick(index, item)"
21
- />
22
- <view
23
- v-if="innerValue.length < maxCount && !isReadonly"
24
- :class="bem.e('select')"
25
- @click="onSelect"
26
- >
27
- <slot name="select">
28
- <view :class="bem.e('select-icon')">
29
- <sar-icon family="sari" name="plus" />
30
- </view>
31
- </slot>
3
+ <slot
4
+ :list="innerValue"
5
+ :on-select="onSelect"
6
+ :on-remove="onRemove"
7
+ :on-image-click="onImageClick"
8
+ >
9
+ <view :class="bem.e('wrapper')">
10
+ <sar-upload-preview
11
+ v-for="(item, index) in innerValue"
12
+ :key="index"
13
+ :file="item.file"
14
+ :url="item.url"
15
+ :is-image="item.isImage"
16
+ :is-video="item.isVideo"
17
+ :status="item.status"
18
+ :name="item.name"
19
+ :message="item.message"
20
+ :removable="removable"
21
+ :index="index"
22
+ :disabled="isDisabled"
23
+ :readonly="isReadonly"
24
+ @remove="onRemove(index, item)"
25
+ @image-click="onImageClick(index)"
26
+ @click="onItemClick(index, item)"
27
+ />
28
+ <view
29
+ v-if="innerValue.length < maxCount && !isReadonly"
30
+ :class="bem.e('select')"
31
+ @click="onSelect"
32
+ >
33
+ <slot name="select">
34
+ <view :class="bem.e('select-icon')">
35
+ <sar-icon family="sari" name="plus" />
36
+ </view>
37
+ </slot>
38
+ </view>
32
39
  </view>
33
- </view>
40
+ </slot>
34
41
  </view>
35
42
  </template>
36
43
 
@@ -3,7 +3,7 @@ nav: 组件
3
3
  title: Waterfall
4
4
  subtitle: 瀑布流
5
5
  group: 布局
6
- version: 1.21.0+
6
+ version: 1.21+
7
7
  ---
8
8
 
9
9
  ## 介绍
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "id": "sard-uniapp",
3
3
  "name": "sard-uniapp",
4
4
  "displayName": "sard-uniapp",
5
- "version": "1.22.1",
5
+ "version": "1.22.2",
6
6
  "description": "sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库",
7
7
  "main": "index.js",
8
8
  "scripts": {
@@ -123,7 +123,7 @@
123
123
  "lodash-es": "^4.17.21",
124
124
  "prettier": "^3.5.3",
125
125
  "region-data": "^1.2.3",
126
- "sard-cli": "^1.3.5",
126
+ "sard-cli": "^1.3.6",
127
127
  "sass": "^1.69.7",
128
128
  "tailwindcss": "^3.4.17",
129
129
  "tel-area-code": "^1.1.0",
package/utils/dom.js CHANGED
@@ -8,7 +8,9 @@ export function getBoundingClientRect(selector, instance) {
8
8
  return new Promise((resolve) => {
9
9
  uni
10
10
  .createSelectorQuery()
11
+ // #ifndef MP-ALIPAY
11
12
  .in(instance?.proxy)
13
+ // #endif
12
14
  .select(selector)
13
15
  .boundingClientRect((data) => {
14
16
  resolve(data);
@@ -1,14 +0,0 @@
1
- @use './bem' as *;
2
-
3
- @mixin disable-scroll {
4
- position: fixed;
5
- inset: 0;
6
- z-index: var(--sar-disable-scroll-z-index);
7
- display: none;
8
- background-color: transparent;
9
- touch-action: none;
10
-
11
- @include m(dragging) {
12
- display: block;
13
- }
14
- }