sard-uniapp 1.8.2 → 1.9.0
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/README.md +38 -14
- package/changelog.md +11 -2
- package/components/config/index.d.ts +4 -0
- package/components/config/index.js +4 -0
- package/components/fab/fab.vue +2 -2
- package/components/style/mixins/border.scss +5 -3
- package/components/table/common.d.ts +52 -0
- package/components/table/common.js +3 -0
- package/components/table/index.d.ts +1 -0
- package/components/table/index.js +1 -0
- package/components/table/index.scss +10 -0
- package/components/table/table.d.ts +13 -0
- package/components/table/table.vue +101 -0
- package/components/table/variables-dark.scss +8 -0
- package/components/table/variables.scss +12 -0
- package/components/table-cell/index.scss +90 -0
- package/components/table-cell/table-cell.d.ts +10 -0
- package/components/table-cell/table-cell.vue +57 -0
- package/components/table-fixation/index.scss +21 -0
- package/components/table-fixation/table-fixation.d.ts +14 -0
- package/components/table-fixation/table-fixation.vue +112 -0
- package/components/table-row/index.scss +15 -0
- package/components/table-row/table-row.d.ts +10 -0
- package/components/table-row/table-row.vue +46 -0
- package/dark.scss +1 -0
- package/global.d.ts +3 -0
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/index.scss +1 -0
- package/package.json +3 -3
- package/utils/bem.d.ts +1 -1
- package/utils/dom.js +1 -1
package/README.md
CHANGED
|
@@ -44,35 +44,59 @@
|
|
|
44
44
|
git clone https://github.com/sutras/sard-uniapp.git
|
|
45
45
|
```
|
|
46
46
|
|
|
47
|
-
###
|
|
47
|
+
### 安装依赖
|
|
48
48
|
|
|
49
49
|
```bash
|
|
50
|
-
npm install
|
|
50
|
+
npm install
|
|
51
51
|
```
|
|
52
52
|
|
|
53
|
-
###
|
|
53
|
+
### 运行开发环境
|
|
54
54
|
|
|
55
55
|
```bash
|
|
56
|
-
|
|
56
|
+
npm run dev
|
|
57
57
|
```
|
|
58
58
|
|
|
59
|
-
|
|
59
|
+
运行上面命令后会生成四个链接:
|
|
60
60
|
|
|
61
|
-
|
|
61
|
+
```bash
|
|
62
|
+
Local: http://localhost:5173/sard-uniapp-docs/mobile/ (演示)
|
|
63
|
+
Network: http://192.168.1.121:5173/sard-uniapp-docs/mobile/ (局域网演示)
|
|
64
|
+
Local: http://localhost:7761/sard-uniapp-docs/ (文档)
|
|
65
|
+
Network: http://192.168.1.121:7761/sard-uniapp-docs/ (局域网文档)
|
|
66
|
+
```
|
|
62
67
|
|
|
63
|
-
|
|
68
|
+
### 测试
|
|
64
69
|
|
|
65
|
-
|
|
70
|
+
```bash
|
|
71
|
+
npm run test
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### 构建文档站点
|
|
66
75
|
|
|
67
76
|
```bash
|
|
68
|
-
|
|
77
|
+
npm run build:site
|
|
69
78
|
```
|
|
70
79
|
|
|
71
|
-
|
|
80
|
+
### 预览构建的文档站点
|
|
72
81
|
|
|
73
82
|
```bash
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
83
|
+
npm run preview
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### 构建组件库
|
|
87
|
+
|
|
88
|
+
```bash
|
|
89
|
+
npm run build
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### 部署文档站点到 github pages
|
|
93
|
+
|
|
94
|
+
```bash
|
|
95
|
+
npm run deploy
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### 发布组件库到 npm
|
|
99
|
+
|
|
100
|
+
```bash
|
|
101
|
+
npm run release
|
|
78
102
|
```
|
package/changelog.md
CHANGED
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
# [1.9.0](https://github.com/sutras/sard-uniapp/compare/v1.8.2...v1.9.0) (2024-12-22)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* 新增表格组件 ([f2d0db6](https://github.com/sutras/sard-uniapp/commit/f2d0db61ab595a281590f9b840c25beea6dd4fe7))
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
1
10
|
## [1.8.2](https://github.com/sutras/sard-uniapp/compare/v1.8.1...v1.8.2) (2024-12-06)
|
|
2
11
|
|
|
3
12
|
|
|
@@ -103,8 +112,8 @@
|
|
|
103
112
|
|
|
104
113
|
### Bug Fixes
|
|
105
114
|
|
|
106
|
-
* 修复pnpm非扁平化依赖包下lwa依赖问题 close [#32](https://github.com/sutras/sard-uniapp/issues/32) ([5868e16](https://github.com/sutras/sard-uniapp/commit/5868e16587e8664705789e2e791c264f2a7d22f5))
|
|
107
115
|
* lwa copy ([7dc350a](https://github.com/sutras/sard-uniapp/commit/7dc350a09f3d10e4bf9f08733e70e1ec73d15b26))
|
|
116
|
+
* 修复pnpm非扁平化依赖包下lwa依赖问题 close [#32](https://github.com/sutras/sard-uniapp/issues/32) ([5868e16](https://github.com/sutras/sard-uniapp/commit/5868e16587e8664705789e2e791c264f2a7d22f5))
|
|
108
117
|
|
|
109
118
|
|
|
110
119
|
|
|
@@ -240,8 +249,8 @@
|
|
|
240
249
|
|
|
241
250
|
### Features
|
|
242
251
|
|
|
243
|
-
* 新增基础组件 ([8e6385e](https://github.com/sutras/sard-uniapp/commit/8e6385edfd0406aba96920eb1ee68432f1c714f9))
|
|
244
252
|
* **global:** 新增组件 ([5c65aab](https://github.com/sutras/sard-uniapp/commit/5c65aab0860885324b93cac83817905f3a0df66c))
|
|
253
|
+
* 新增基础组件 ([8e6385e](https://github.com/sutras/sard-uniapp/commit/8e6385edfd0406aba96920eb1ee68432f1c714f9))
|
|
245
254
|
|
|
246
255
|
|
|
247
256
|
|
package/components/fab/fab.vue
CHANGED
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
|
|
42
42
|
<script>
|
|
43
43
|
import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
|
|
44
|
-
import { computed, reactive, ref } from "vue";
|
|
44
|
+
import { computed, reactive, ref, toRef } from "vue";
|
|
45
45
|
import { classNames, stringifyStyle, createBem, isNullish } from "../../utils";
|
|
46
46
|
import {
|
|
47
47
|
defaultFabProps
|
|
@@ -88,7 +88,7 @@ export default _defineComponent({
|
|
|
88
88
|
const { realVisible, transitionClass, onTransitionEnd } = useTransition(
|
|
89
89
|
reactive({
|
|
90
90
|
visible,
|
|
91
|
-
duration: props.duration,
|
|
91
|
+
duration: toRef(() => props.duration),
|
|
92
92
|
prefix: bem.m("zoom-")
|
|
93
93
|
})
|
|
94
94
|
);
|
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
@mixin border-base
|
|
1
|
+
@mixin border-base {
|
|
2
2
|
position: absolute;
|
|
3
3
|
z-index: 1;
|
|
4
4
|
pointer-events: none;
|
|
5
|
+
touch-action: none;
|
|
5
6
|
opacity: 1;
|
|
6
7
|
content: '';
|
|
7
8
|
@content;
|
|
8
9
|
}
|
|
9
10
|
|
|
10
11
|
@mixin border-vertical-base($color) {
|
|
11
|
-
@include border-base
|
|
12
|
+
@include border-base {
|
|
12
13
|
left: 0;
|
|
13
14
|
right: 0;
|
|
14
15
|
transform: scaleY(0.5);
|
|
@@ -17,7 +18,7 @@
|
|
|
17
18
|
}
|
|
18
19
|
|
|
19
20
|
@mixin border-horizontal-base($color) {
|
|
20
|
-
@include border-base
|
|
21
|
+
@include border-base {
|
|
21
22
|
top: 0;
|
|
22
23
|
bottom: 0;
|
|
23
24
|
transform: scaleX(0.5);
|
|
@@ -72,6 +73,7 @@
|
|
|
72
73
|
transform: scale(0.5);
|
|
73
74
|
transform-origin: center;
|
|
74
75
|
pointer-events: none;
|
|
76
|
+
touch-action: none;
|
|
75
77
|
content: '';
|
|
76
78
|
@content;
|
|
77
79
|
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { type StyleValue } from 'vue';
|
|
2
|
+
export interface TableProps {
|
|
3
|
+
rootStyle?: StyleValue;
|
|
4
|
+
rootClass?: string;
|
|
5
|
+
bordered?: boolean;
|
|
6
|
+
underline?: boolean;
|
|
7
|
+
height?: string;
|
|
8
|
+
}
|
|
9
|
+
export declare const defaultTableProps: {
|
|
10
|
+
bordered: boolean;
|
|
11
|
+
underline: boolean;
|
|
12
|
+
};
|
|
13
|
+
export interface TableSlots {
|
|
14
|
+
default?(props: Record<string, never>): any;
|
|
15
|
+
}
|
|
16
|
+
export interface TableContext {
|
|
17
|
+
}
|
|
18
|
+
export declare const tableContextSymbol: unique symbol;
|
|
19
|
+
export interface TableRowProps {
|
|
20
|
+
rootStyle?: StyleValue;
|
|
21
|
+
rootClass?: string;
|
|
22
|
+
fixed?: boolean;
|
|
23
|
+
}
|
|
24
|
+
export interface TableRowSlots {
|
|
25
|
+
default?(props: Record<string, never>): any;
|
|
26
|
+
}
|
|
27
|
+
export interface TableCellProps {
|
|
28
|
+
rootStyle?: StyleValue;
|
|
29
|
+
rootClass?: string;
|
|
30
|
+
width?: string;
|
|
31
|
+
bold?: boolean;
|
|
32
|
+
fixed?: boolean | 'left' | 'right';
|
|
33
|
+
}
|
|
34
|
+
export interface TableCellSlots {
|
|
35
|
+
default?(props: Record<string, never>): any;
|
|
36
|
+
}
|
|
37
|
+
export interface TableFixationProps {
|
|
38
|
+
rootStyle?: StyleValue;
|
|
39
|
+
rootClass?: string;
|
|
40
|
+
tableWidth?: number;
|
|
41
|
+
scrollY?: boolean;
|
|
42
|
+
height?: string;
|
|
43
|
+
bordered?: boolean;
|
|
44
|
+
underline?: boolean;
|
|
45
|
+
}
|
|
46
|
+
export interface TableFixationSlots {
|
|
47
|
+
default?(props: Record<string, never>): any;
|
|
48
|
+
}
|
|
49
|
+
export type TableScrollSide = 'left' | 'middle' | 'right';
|
|
50
|
+
export interface TableFixationEmits {
|
|
51
|
+
(e: 'scroll-side', side: TableScrollSide | null): void;
|
|
52
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export type { TableProps, TableSlots, TableCellProps, TableCellSlots, TableRowProps, TableRowSlots, } from './common';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { type TableProps, type TableSlots } from './common';
|
|
2
|
+
declare function __VLS_template(): Readonly<TableSlots> & TableSlots;
|
|
3
|
+
declare const __VLS_component: import("vue").DefineComponent<TableProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TableProps> & Readonly<{}>, {
|
|
4
|
+
underline: boolean;
|
|
5
|
+
bordered: boolean;
|
|
6
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
7
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
|
|
8
|
+
export default _default;
|
|
9
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
10
|
+
new (): {
|
|
11
|
+
$slots: S;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<sar-table-fixation
|
|
3
|
+
:table-width="tableWidth"
|
|
4
|
+
:scroll-y="fixedRow"
|
|
5
|
+
:height="height"
|
|
6
|
+
:bordered="bordered"
|
|
7
|
+
:underline="underline"
|
|
8
|
+
@scroll-side="onScrollSide"
|
|
9
|
+
>
|
|
10
|
+
<view :id="tableId" :class="tableClass" :style="tableStyle">
|
|
11
|
+
<slot></slot>
|
|
12
|
+
</view>
|
|
13
|
+
</sar-table-fixation>
|
|
14
|
+
</template>
|
|
15
|
+
|
|
16
|
+
<script>
|
|
17
|
+
import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
|
|
18
|
+
import {
|
|
19
|
+
computed,
|
|
20
|
+
getCurrentInstance,
|
|
21
|
+
nextTick,
|
|
22
|
+
onMounted,
|
|
23
|
+
provide,
|
|
24
|
+
reactive,
|
|
25
|
+
ref
|
|
26
|
+
} from "vue";
|
|
27
|
+
import {
|
|
28
|
+
classNames,
|
|
29
|
+
stringifyStyle,
|
|
30
|
+
createBem,
|
|
31
|
+
uniqid,
|
|
32
|
+
getBoundingClientRect,
|
|
33
|
+
isNullish
|
|
34
|
+
} from "../../utils";
|
|
35
|
+
import {
|
|
36
|
+
tableContextSymbol,
|
|
37
|
+
defaultTableProps
|
|
38
|
+
} from "./common";
|
|
39
|
+
import SarTableFixation from "../table-fixation/table-fixation.vue";
|
|
40
|
+
export default _defineComponent({
|
|
41
|
+
components: {
|
|
42
|
+
SarTableFixation,
|
|
43
|
+
},
|
|
44
|
+
...{
|
|
45
|
+
options: {
|
|
46
|
+
virtualHost: true,
|
|
47
|
+
styleIsolation: "shared"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
__name: "table",
|
|
51
|
+
props: _mergeDefaults({
|
|
52
|
+
rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
|
|
53
|
+
rootClass: { type: String, required: false },
|
|
54
|
+
bordered: { type: Boolean, required: false },
|
|
55
|
+
underline: { type: Boolean, required: false },
|
|
56
|
+
height: { type: String, required: false }
|
|
57
|
+
}, defaultTableProps),
|
|
58
|
+
setup(__props, { expose: __expose }) {
|
|
59
|
+
__expose();
|
|
60
|
+
const props = __props;
|
|
61
|
+
const bem = createBem("table");
|
|
62
|
+
const tableId = uniqid();
|
|
63
|
+
const instance = getCurrentInstance();
|
|
64
|
+
const tableWidth = ref(0);
|
|
65
|
+
const setTableRect = async () => {
|
|
66
|
+
const tableRect = await getBoundingClientRect(`#${tableId}`, instance);
|
|
67
|
+
tableWidth.value = tableRect.width;
|
|
68
|
+
};
|
|
69
|
+
onMounted(() => {
|
|
70
|
+
nextTick(setTableRect);
|
|
71
|
+
});
|
|
72
|
+
uni.onWindowResize(setTableRect);
|
|
73
|
+
const fixedRow = computed(() => {
|
|
74
|
+
return !isNullish(props.height);
|
|
75
|
+
});
|
|
76
|
+
const scrollSide = ref(null);
|
|
77
|
+
const onScrollSide = (side) => {
|
|
78
|
+
scrollSide.value = side;
|
|
79
|
+
};
|
|
80
|
+
provide(tableContextSymbol, reactive({}));
|
|
81
|
+
const tableClass = computed(() => {
|
|
82
|
+
return classNames(
|
|
83
|
+
bem.b(),
|
|
84
|
+
bem.m("bordered", props.bordered),
|
|
85
|
+
bem.m("underline", props.underline),
|
|
86
|
+
bem.m("scroll-" + scrollSide.value, scrollSide.value),
|
|
87
|
+
props.rootClass
|
|
88
|
+
);
|
|
89
|
+
});
|
|
90
|
+
const tableStyle = computed(() => {
|
|
91
|
+
return stringifyStyle(props.rootStyle);
|
|
92
|
+
});
|
|
93
|
+
const __returned__ = { props, bem, tableId, instance, tableWidth, setTableRect, fixedRow, scrollSide, onScrollSide, tableClass, tableStyle, SarTableFixation };
|
|
94
|
+
return __returned__;
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
</script>
|
|
98
|
+
|
|
99
|
+
<style lang="scss">
|
|
100
|
+
@import './index.scss';
|
|
101
|
+
</style>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
// #variables
|
|
2
|
+
page {
|
|
3
|
+
--sar-table-border-color: var(--sar-border-color);
|
|
4
|
+
--sar-table-bg: var(--sar-emphasis-bg);
|
|
5
|
+
|
|
6
|
+
--sar-table-row-fixed-bg: var(--sar-emphasis-bg);
|
|
7
|
+
|
|
8
|
+
--sar-table-cell-fixed-bg: var(--sar-emphasis-bg);
|
|
9
|
+
--sar-table-fixed-left-shadow: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
|
|
10
|
+
--sar-table-fixed-right-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
|
|
11
|
+
}
|
|
12
|
+
// #endvariables
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
@use '../style/base' as *;
|
|
2
|
+
|
|
3
|
+
@include bem(table) {
|
|
4
|
+
@include e(cell) {
|
|
5
|
+
@include universal;
|
|
6
|
+
flex: 1;
|
|
7
|
+
min-width: 0;
|
|
8
|
+
justify-content: center;
|
|
9
|
+
|
|
10
|
+
@include m(bold) {
|
|
11
|
+
font-weight: var(--sar-font-bold);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@include m(fixed-left, fixed-right) {
|
|
15
|
+
position: sticky;
|
|
16
|
+
z-index: 2;
|
|
17
|
+
background-color: var(--sar-table-cell-fixed-bg);
|
|
18
|
+
|
|
19
|
+
&::before {
|
|
20
|
+
content: '';
|
|
21
|
+
position: absolute;
|
|
22
|
+
top: 0;
|
|
23
|
+
bottom: 0;
|
|
24
|
+
width: 20rpx;
|
|
25
|
+
overflow-x: hidden;
|
|
26
|
+
overflow-y: hidden;
|
|
27
|
+
box-shadow: none;
|
|
28
|
+
touch-action: none;
|
|
29
|
+
pointer-events: none;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@include m(fixed-left) {
|
|
34
|
+
left: 0;
|
|
35
|
+
|
|
36
|
+
&::before {
|
|
37
|
+
right: -20rpx;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@include m(fixed-right) {
|
|
42
|
+
right: 0;
|
|
43
|
+
|
|
44
|
+
&::before {
|
|
45
|
+
left: -20rpx;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@include m(bordered) {
|
|
51
|
+
@include e(cell) {
|
|
52
|
+
&::after {
|
|
53
|
+
@include border-bottom-right(var(--sar-table-border-color));
|
|
54
|
+
right: 0;
|
|
55
|
+
bottom: 0;
|
|
56
|
+
left: -100%;
|
|
57
|
+
top: -100%;
|
|
58
|
+
transform-origin: right bottom;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@include m(underline) {
|
|
64
|
+
@include e(cell) {
|
|
65
|
+
&::after {
|
|
66
|
+
@include border-bottom(var(--sar-table-border-color));
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
@include m(scroll-middle, scroll-right) {
|
|
72
|
+
@include e(cell) {
|
|
73
|
+
@include m(fixed-left) {
|
|
74
|
+
&::before {
|
|
75
|
+
box-shadow: var(--sar-table-fixed-left-shadow);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
@include m(scroll-middle, scroll-left) {
|
|
82
|
+
@include e(cell) {
|
|
83
|
+
@include m(fixed-right) {
|
|
84
|
+
&::before {
|
|
85
|
+
box-shadow: var(--sar-table-fixed-right-shadow);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { type TableCellProps, type TableCellSlots } from '../table/common';
|
|
2
|
+
declare function __VLS_template(): Readonly<TableCellSlots> & TableCellSlots;
|
|
3
|
+
declare const __VLS_component: import("vue").DefineComponent<TableCellProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TableCellProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
4
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
|
|
5
|
+
export default _default;
|
|
6
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
7
|
+
new (): {
|
|
8
|
+
$slots: S;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view :class="cellClass" :style="cellStyle">
|
|
3
|
+
<slot></slot>
|
|
4
|
+
</view>
|
|
5
|
+
</template>
|
|
6
|
+
|
|
7
|
+
<script>
|
|
8
|
+
import { defineComponent as _defineComponent } from "vue";
|
|
9
|
+
import { computed } from "vue";
|
|
10
|
+
import { classNames, stringifyStyle, createBem, isNullish } from "../../utils";
|
|
11
|
+
export default _defineComponent({
|
|
12
|
+
...{
|
|
13
|
+
options: {
|
|
14
|
+
virtualHost: true,
|
|
15
|
+
styleIsolation: "shared"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
__name: "table-cell",
|
|
19
|
+
props: {
|
|
20
|
+
rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
|
|
21
|
+
rootClass: { type: String, required: false },
|
|
22
|
+
width: { type: String, required: false },
|
|
23
|
+
bold: { type: Boolean, required: false },
|
|
24
|
+
fixed: { type: [Boolean, String], required: false }
|
|
25
|
+
},
|
|
26
|
+
setup(__props, { expose: __expose }) {
|
|
27
|
+
__expose();
|
|
28
|
+
const props = __props;
|
|
29
|
+
const bem = createBem("table");
|
|
30
|
+
const cellClass = computed(() => {
|
|
31
|
+
const fixedSide = props.fixed === true ? "left" : props.fixed;
|
|
32
|
+
return classNames(
|
|
33
|
+
bem.e("cell"),
|
|
34
|
+
bem.em("cell", "bold", props.bold),
|
|
35
|
+
bem.em("cell", "fixed-" + fixedSide, props.fixed),
|
|
36
|
+
props.rootClass
|
|
37
|
+
);
|
|
38
|
+
});
|
|
39
|
+
const cellStyle = computed(() => {
|
|
40
|
+
const isFlexGrow = !isNaN(Number(props.width));
|
|
41
|
+
return stringifyStyle(
|
|
42
|
+
{
|
|
43
|
+
width: isNullish(props.width) || isFlexGrow ? void 0 : props.width,
|
|
44
|
+
flex: isNullish(props.width) ? void 0 : isFlexGrow ? props.width : `${parseFloat(props.width)} 0 ${props.width}`
|
|
45
|
+
},
|
|
46
|
+
props.rootStyle
|
|
47
|
+
);
|
|
48
|
+
});
|
|
49
|
+
const __returned__ = { props, bem, cellClass, cellStyle };
|
|
50
|
+
return __returned__;
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
</script>
|
|
54
|
+
|
|
55
|
+
<style lang="scss">
|
|
56
|
+
@import './index.scss';
|
|
57
|
+
</style>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
@use '../style/base' as *;
|
|
2
|
+
|
|
3
|
+
@include bem(table) {
|
|
4
|
+
@include e(fixation) {
|
|
5
|
+
@include universal;
|
|
6
|
+
|
|
7
|
+
@include m(bordered) {
|
|
8
|
+
&::after {
|
|
9
|
+
@include border-surround(var(--sar-table-border-color));
|
|
10
|
+
z-index: 4;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@include m(underline) {
|
|
15
|
+
&::after {
|
|
16
|
+
@include border-bottom(var(--sar-table-border-color));
|
|
17
|
+
z-index: 4;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { type TableFixationProps, type TableFixationSlots, type TableScrollSide } from '../table/common';
|
|
2
|
+
declare function __VLS_template(): Readonly<TableFixationSlots> & TableFixationSlots;
|
|
3
|
+
declare const __VLS_component: import("vue").DefineComponent<TableFixationProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
4
|
+
"scroll-side": (side: TableScrollSide | null) => any;
|
|
5
|
+
}, string, import("vue").PublicProps, Readonly<TableFixationProps> & Readonly<{
|
|
6
|
+
"onScroll-side"?: ((side: TableScrollSide | null) => any) | undefined;
|
|
7
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
8
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
|
|
9
|
+
export default _default;
|
|
10
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
11
|
+
new (): {
|
|
12
|
+
$slots: S;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<scroll-view
|
|
3
|
+
:id="fixationId"
|
|
4
|
+
:class="fixationClass"
|
|
5
|
+
:style="fixationStyle"
|
|
6
|
+
:scroll-y="scrollY"
|
|
7
|
+
scroll-x
|
|
8
|
+
:upper-threshold="0"
|
|
9
|
+
:lower-threshold="0"
|
|
10
|
+
:throttle="false"
|
|
11
|
+
@scroll="onScroll"
|
|
12
|
+
@scrolltoupper="onScrolltoupper"
|
|
13
|
+
@scrolltolower="onScrolltolower"
|
|
14
|
+
>
|
|
15
|
+
<slot></slot>
|
|
16
|
+
</scroll-view>
|
|
17
|
+
</template>
|
|
18
|
+
|
|
19
|
+
<script>
|
|
20
|
+
import { defineComponent as _defineComponent } from "vue";
|
|
21
|
+
import { computed, getCurrentInstance, onMounted, ref, watch } from "vue";
|
|
22
|
+
import {
|
|
23
|
+
classNames,
|
|
24
|
+
stringifyStyle,
|
|
25
|
+
createBem,
|
|
26
|
+
getBoundingClientRect,
|
|
27
|
+
uniqid
|
|
28
|
+
} from "../../utils";
|
|
29
|
+
import { nextTick } from "vue";
|
|
30
|
+
export default _defineComponent({
|
|
31
|
+
...{
|
|
32
|
+
options: {
|
|
33
|
+
virtualHost: true,
|
|
34
|
+
styleIsolation: "shared"
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
__name: "table-fixation",
|
|
38
|
+
props: {
|
|
39
|
+
rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
|
|
40
|
+
rootClass: { type: String, required: false },
|
|
41
|
+
tableWidth: { type: Number, required: false },
|
|
42
|
+
scrollY: { type: Boolean, required: false },
|
|
43
|
+
height: { type: String, required: false },
|
|
44
|
+
bordered: { type: Boolean, required: false },
|
|
45
|
+
underline: { type: Boolean, required: false }
|
|
46
|
+
},
|
|
47
|
+
emits: ["scroll-side"],
|
|
48
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
49
|
+
__expose();
|
|
50
|
+
const props = __props;
|
|
51
|
+
const emit = __emit;
|
|
52
|
+
const bem = createBem("table");
|
|
53
|
+
const scrollSide = ref(null);
|
|
54
|
+
const onScroll = (event) => {
|
|
55
|
+
if (event.detail.scrollLeft !== 0) {
|
|
56
|
+
scrollSide.value = "middle";
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
const onScrolltoupper = (event) => {
|
|
60
|
+
if (event.detail.direction === "left") {
|
|
61
|
+
scrollSide.value = "left";
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
const onScrolltolower = (event) => {
|
|
65
|
+
if (event.detail.direction === "right") {
|
|
66
|
+
scrollSide.value = "right";
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
const fixationId = uniqid();
|
|
70
|
+
const instance = getCurrentInstance();
|
|
71
|
+
const fixationRect = ref(null);
|
|
72
|
+
watch([() => props.tableWidth, fixationRect], () => {
|
|
73
|
+
scrollSide.value = props.tableWidth && fixationRect.value && props.tableWidth > fixationRect.value.width ? "left" : null;
|
|
74
|
+
});
|
|
75
|
+
onMounted(() => {
|
|
76
|
+
nextTick(setFixationRect);
|
|
77
|
+
});
|
|
78
|
+
const setFixationRect = async () => {
|
|
79
|
+
fixationRect.value = await getBoundingClientRect(`#${fixationId}`, instance);
|
|
80
|
+
};
|
|
81
|
+
uni.onWindowResize(setFixationRect);
|
|
82
|
+
watch(
|
|
83
|
+
scrollSide,
|
|
84
|
+
() => {
|
|
85
|
+
emit("scroll-side", scrollSide.value);
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
immediate: true
|
|
89
|
+
}
|
|
90
|
+
);
|
|
91
|
+
const fixationClass = computed(() => {
|
|
92
|
+
return classNames(
|
|
93
|
+
bem.e("fixation"),
|
|
94
|
+
bem.em("fixation", "bordered", props.bordered),
|
|
95
|
+
bem.em("fixation", "underline", props.underline),
|
|
96
|
+
props.rootClass
|
|
97
|
+
);
|
|
98
|
+
});
|
|
99
|
+
const fixationStyle = computed(() => {
|
|
100
|
+
return stringifyStyle(props.rootStyle, {
|
|
101
|
+
height: props.height
|
|
102
|
+
});
|
|
103
|
+
});
|
|
104
|
+
const __returned__ = { props, emit, bem, scrollSide, onScroll, onScrolltoupper, onScrolltolower, fixationId, instance, fixationRect, setFixationRect, fixationClass, fixationStyle };
|
|
105
|
+
return __returned__;
|
|
106
|
+
}
|
|
107
|
+
});
|
|
108
|
+
</script>
|
|
109
|
+
|
|
110
|
+
<style lang="scss">
|
|
111
|
+
@import './index.scss';
|
|
112
|
+
</style>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
@use '../style/base' as *;
|
|
2
|
+
|
|
3
|
+
@include bem(table) {
|
|
4
|
+
@include e(row) {
|
|
5
|
+
@include universal;
|
|
6
|
+
flex-direction: row;
|
|
7
|
+
|
|
8
|
+
@include m(fixed) {
|
|
9
|
+
position: sticky;
|
|
10
|
+
top: 0;
|
|
11
|
+
z-index: 3;
|
|
12
|
+
background-color: var(--sar-table-row-fixed-bg);
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { type TableRowProps, type TableRowSlots } from '../table/common';
|
|
2
|
+
declare function __VLS_template(): Readonly<TableRowSlots> & TableRowSlots;
|
|
3
|
+
declare const __VLS_component: import("vue").DefineComponent<TableRowProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TableRowProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
4
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
|
|
5
|
+
export default _default;
|
|
6
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
7
|
+
new (): {
|
|
8
|
+
$slots: S;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view :class="rowClass" :style="rowStyle">
|
|
3
|
+
<slot></slot>
|
|
4
|
+
</view>
|
|
5
|
+
</template>
|
|
6
|
+
|
|
7
|
+
<script>
|
|
8
|
+
import { defineComponent as _defineComponent } from "vue";
|
|
9
|
+
import { computed } from "vue";
|
|
10
|
+
import { classNames, stringifyStyle, createBem } from "../../utils";
|
|
11
|
+
export default _defineComponent({
|
|
12
|
+
...{
|
|
13
|
+
options: {
|
|
14
|
+
virtualHost: true,
|
|
15
|
+
styleIsolation: "shared"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
__name: "table-row",
|
|
19
|
+
props: {
|
|
20
|
+
rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
|
|
21
|
+
rootClass: { type: String, required: false },
|
|
22
|
+
fixed: { type: Boolean, required: false }
|
|
23
|
+
},
|
|
24
|
+
setup(__props, { expose: __expose }) {
|
|
25
|
+
__expose();
|
|
26
|
+
const props = __props;
|
|
27
|
+
const bem = createBem("table");
|
|
28
|
+
const rowClass = computed(() => {
|
|
29
|
+
return classNames(
|
|
30
|
+
bem.e("row"),
|
|
31
|
+
bem.em("row", "fixed", props.fixed),
|
|
32
|
+
props.rootClass
|
|
33
|
+
);
|
|
34
|
+
});
|
|
35
|
+
const rowStyle = computed(() => {
|
|
36
|
+
return stringifyStyle(props.rootStyle);
|
|
37
|
+
});
|
|
38
|
+
const __returned__ = { props, bem, rowClass, rowStyle };
|
|
39
|
+
return __returned__;
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
</script>
|
|
43
|
+
|
|
44
|
+
<style lang="scss">
|
|
45
|
+
@import './index.scss';
|
|
46
|
+
</style>
|
package/dark.scss
CHANGED
package/global.d.ts
CHANGED
|
@@ -84,6 +84,9 @@ declare module 'vue' {
|
|
|
84
84
|
SarTab: typeof import('./components/tab/tab').default
|
|
85
85
|
SarTabbar: typeof import('./components/tabbar/tabbar').default
|
|
86
86
|
SarTabbarItem: typeof import('./components/tabbar-item/tabbar-item').default
|
|
87
|
+
SarTable: typeof import('./components/table/table').default
|
|
88
|
+
SarTableRow: typeof import('./components/table-row/table-row').default
|
|
89
|
+
SarTableCell: typeof import('./components/table-cell/table-cell').default
|
|
87
90
|
SarTabs: typeof import('./components/tabs/tabs').default
|
|
88
91
|
SarTag: typeof import('./components/tag/tag').default
|
|
89
92
|
SarTimeline: typeof import('./components/timeline/timeline').default
|
package/index.d.ts
CHANGED
|
@@ -68,6 +68,7 @@ export * from './components/steps';
|
|
|
68
68
|
export * from './components/swiper-dot';
|
|
69
69
|
export * from './components/switch';
|
|
70
70
|
export * from './components/tabbar';
|
|
71
|
+
export * from './components/table';
|
|
71
72
|
export * from './components/tabs';
|
|
72
73
|
export * from './components/tag';
|
|
73
74
|
export * from './components/timeline';
|
package/index.js
CHANGED
|
@@ -68,6 +68,7 @@ export * from './components/steps';
|
|
|
68
68
|
export * from './components/swiper-dot';
|
|
69
69
|
export * from './components/switch';
|
|
70
70
|
export * from './components/tabbar';
|
|
71
|
+
export * from './components/table';
|
|
71
72
|
export * from './components/tabs';
|
|
72
73
|
export * from './components/tag';
|
|
73
74
|
export * from './components/timeline';
|
package/index.scss
CHANGED
|
@@ -59,6 +59,7 @@
|
|
|
59
59
|
@use './components/swiper-dot/variables.scss' as *;
|
|
60
60
|
@use './components/switch/variables.scss' as *;
|
|
61
61
|
@use './components/tabbar/variables.scss' as *;
|
|
62
|
+
@use './components/table/variables.scss' as *;
|
|
62
63
|
@use './components/tabs/variables.scss' as *;
|
|
63
64
|
@use './components/tag/variables.scss' as *;
|
|
64
65
|
@use './components/timeline/variables.scss' as *;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"id": "sard-uniapp",
|
|
3
3
|
"name": "sard-uniapp",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.9.0",
|
|
5
5
|
"description": "sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库",
|
|
6
6
|
"main": "index.js",
|
|
7
7
|
"scripts": {
|
|
@@ -109,13 +109,13 @@
|
|
|
109
109
|
"eslint-plugin-vue": "^9.32.0",
|
|
110
110
|
"glob": "^11.0.0",
|
|
111
111
|
"globals": "^15.13.0",
|
|
112
|
-
"husky": "^
|
|
112
|
+
"husky": "^9.1.7",
|
|
113
113
|
"inquirer": "^9.3.7",
|
|
114
114
|
"lint-staged": "^13.3.0",
|
|
115
115
|
"lodash-es": "^4.17.21",
|
|
116
116
|
"prettier": "^2.8.8",
|
|
117
117
|
"region-data": "^1.2.3",
|
|
118
|
-
"sard-cli": "^1.0.
|
|
118
|
+
"sard-cli": "^1.0.3",
|
|
119
119
|
"sass": "^1.43.4",
|
|
120
120
|
"tel-area-code": "^1.0.1",
|
|
121
121
|
"ts-custom-error": "^3.3.1",
|
package/utils/bem.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ export interface BemConfig {
|
|
|
4
4
|
elementSeparator: string;
|
|
5
5
|
modifierSeparator: string;
|
|
6
6
|
}
|
|
7
|
-
type IsType = boolean | number | string | null;
|
|
7
|
+
type IsType = boolean | number | string | null | undefined | object;
|
|
8
8
|
export declare function createBemStruct(config: BemConfig): (block: string | number) => {
|
|
9
9
|
b(): string;
|
|
10
10
|
e(element: string | number | undefined, is?: IsType): string;
|
package/utils/dom.js
CHANGED