@hbdlzy/ui-core 0.1.6 → 0.1.8
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 +34 -2
- package/components.manifest.json +31 -2
- package/dist/components/BaseTable/BaseTable.types.d.ts +17 -2
- package/dist/components/BaseTable/BaseTable.vue.d.ts +4 -4
- package/dist/components/BaseTable/index.d.ts +1 -1
- package/dist/components/OutlinedTreeSelect/OutlinedTreeSelect.vue.d.ts +1 -1
- package/dist/components/SvgIcon/SvgIcon.types.d.ts +6 -0
- package/dist/components/SvgIcon/SvgIcon.vue.d.ts +32 -0
- package/dist/components/SvgIcon/index.d.ts +3 -0
- package/dist/index.cjs +5 -5
- package/dist/index.d.ts +51 -12
- package/dist/index.js +1014 -147
- package/dist/ripple/index.cjs +42 -0
- package/dist/ripple/index.d.ts +8 -1
- package/dist/ripple/index.js +171 -0
- package/dist/style.css +1 -1
- package/package.json +17 -2
- package/src/components/BaseCard/BaseCard.types.d.ts +36 -0
- package/src/components/BaseCard/BaseCard.vue.d.ts +122 -0
- package/src/components/BaseCard/README.md +33 -0
- package/src/components/BaseCard/index.d.ts +3 -0
- package/src/components/BaseEChart/BaseEChart.types.d.ts +26 -0
- package/src/components/BaseEChart/BaseEChart.vue.d.ts +66 -0
- package/src/components/BaseEChart/README.md +33 -0
- package/src/components/BaseEChart/index.d.ts +3 -0
- package/src/components/BaseExportButton/BaseExportButton.types.d.ts +21 -0
- package/src/components/BaseExportButton/BaseExportButton.utils.d.ts +4 -0
- package/src/components/BaseExportButton/BaseExportButton.vue.d.ts +128 -0
- package/src/components/BaseExportButton/README.md +34 -0
- package/src/components/BaseExportButton/index.d.ts +5 -0
- package/src/components/BaseTable/BaseTable.types.d.ts +178 -0
- package/src/components/BaseTable/BaseTable.types.ts +19 -2
- package/src/components/BaseTable/BaseTable.vue +1105 -118
- package/src/components/BaseTable/BaseTable.vue.d.ts +157 -0
- package/src/components/BaseTable/README.md +133 -5
- package/src/components/BaseTable/index.d.ts +3 -0
- package/src/components/BaseTable/index.ts +5 -0
- package/src/components/OutlinedCascader/OutlinedCascader.types.d.ts +28 -0
- package/src/components/OutlinedCascader/OutlinedCascader.vue.d.ts +94 -0
- package/src/components/OutlinedCascader/README.md +34 -0
- package/src/components/OutlinedCascader/index.d.ts +3 -0
- package/src/components/OutlinedDatePicker/OutlinedDatePicker.types.d.ts +30 -0
- package/src/components/OutlinedDatePicker/OutlinedDatePicker.vue.d.ts +97 -0
- package/src/components/OutlinedDatePicker/README.md +34 -0
- package/src/components/OutlinedDatePicker/index.d.ts +3 -0
- package/src/components/OutlinedDateTimePicker/OutlinedDateTimePicker.types.d.ts +29 -0
- package/src/components/OutlinedDateTimePicker/OutlinedDateTimePicker.vue.d.ts +106 -0
- package/src/components/OutlinedDateTimePicker/README.md +33 -0
- package/src/components/OutlinedDateTimePicker/index.d.ts +3 -0
- package/src/components/OutlinedInput/OutlinedInput.types.d.ts +32 -0
- package/src/components/OutlinedInput/OutlinedInput.vue.d.ts +106 -0
- package/src/components/OutlinedInput/README.md +34 -0
- package/src/components/OutlinedInput/index.d.ts +3 -0
- package/src/components/OutlinedSelect/OutlinedSelect.types.d.ts +41 -0
- package/src/components/OutlinedSelect/OutlinedSelect.vue.d.ts +125 -0
- package/src/components/OutlinedSelect/README.md +34 -0
- package/src/components/OutlinedSelect/index.d.ts +3 -0
- package/src/components/OutlinedTimePicker/OutlinedTimePicker.types.d.ts +31 -0
- package/src/components/OutlinedTimePicker/OutlinedTimePicker.vue.d.ts +103 -0
- package/src/components/OutlinedTimePicker/README.md +33 -0
- package/src/components/OutlinedTimePicker/index.d.ts +3 -0
- package/src/components/OutlinedTreeSelect/OutlinedTreeSelect.types.d.ts +49 -0
- package/src/components/OutlinedTreeSelect/OutlinedTreeSelect.vue.d.ts +146 -0
- package/src/components/OutlinedTreeSelect/README.md +34 -0
- package/src/components/OutlinedTreeSelect/index.d.ts +3 -0
- package/src/components/SvgIcon/README.md +86 -0
- package/src/components/SvgIcon/SvgIcon.types.d.ts +6 -0
- package/src/components/SvgIcon/SvgIcon.types.ts +6 -0
- package/src/components/SvgIcon/SvgIcon.vue +68 -0
- package/src/components/SvgIcon/SvgIcon.vue.d.ts +32 -0
- package/src/components/SvgIcon/index.d.ts +3 -0
- package/src/components/SvgIcon/index.ts +5 -0
- package/src/echarts/index.d.ts +9 -0
- package/src/excel/exportExcel.d.ts +18 -0
- package/src/index.d.ts +30 -0
- package/src/index.ts +79 -12
- package/src/ripple/README.md +160 -0
- package/src/ripple/index.d.ts +9 -0
- package/src/ripple/index.ts +15 -1
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import type { OutlinedTimePickerCssValue, OutlinedTimePickerProps, OutlinedTimePickerValue } from './OutlinedTimePicker.types';
|
|
2
|
+
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OutlinedTimePickerProps>, {
|
|
3
|
+
value: string;
|
|
4
|
+
placeholder: string;
|
|
5
|
+
label: string;
|
|
6
|
+
disabled: boolean;
|
|
7
|
+
clearable: boolean;
|
|
8
|
+
isRange: boolean;
|
|
9
|
+
startPlaceholder: string;
|
|
10
|
+
endPlaceholder: string;
|
|
11
|
+
rangeSeparator: string;
|
|
12
|
+
format: string;
|
|
13
|
+
valueFormat: string;
|
|
14
|
+
arrowControl: boolean;
|
|
15
|
+
inputHeight: number;
|
|
16
|
+
isBorder: boolean;
|
|
17
|
+
marginBottom: number;
|
|
18
|
+
paddingTop: number;
|
|
19
|
+
required: boolean;
|
|
20
|
+
error: boolean;
|
|
21
|
+
errorMessage: string;
|
|
22
|
+
}>>, {
|
|
23
|
+
focus: () => void;
|
|
24
|
+
blur: () => void;
|
|
25
|
+
handleOpen: () => void;
|
|
26
|
+
handleClose: () => void;
|
|
27
|
+
clear: () => void;
|
|
28
|
+
getPickerRef: () => unknown;
|
|
29
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
30
|
+
input: (value: OutlinedTimePickerValue) => void;
|
|
31
|
+
"update:value": (value: OutlinedTimePickerValue) => void;
|
|
32
|
+
change: (value: OutlinedTimePickerValue) => void;
|
|
33
|
+
focus: (value: FocusEvent) => void;
|
|
34
|
+
blur: (value: FocusEvent) => void;
|
|
35
|
+
"visible-change": (value: boolean) => void;
|
|
36
|
+
clear: () => void;
|
|
37
|
+
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OutlinedTimePickerProps>, {
|
|
38
|
+
value: string;
|
|
39
|
+
placeholder: string;
|
|
40
|
+
label: string;
|
|
41
|
+
disabled: boolean;
|
|
42
|
+
clearable: boolean;
|
|
43
|
+
isRange: boolean;
|
|
44
|
+
startPlaceholder: string;
|
|
45
|
+
endPlaceholder: string;
|
|
46
|
+
rangeSeparator: string;
|
|
47
|
+
format: string;
|
|
48
|
+
valueFormat: string;
|
|
49
|
+
arrowControl: boolean;
|
|
50
|
+
inputHeight: number;
|
|
51
|
+
isBorder: boolean;
|
|
52
|
+
marginBottom: number;
|
|
53
|
+
paddingTop: number;
|
|
54
|
+
required: boolean;
|
|
55
|
+
error: boolean;
|
|
56
|
+
errorMessage: string;
|
|
57
|
+
}>>> & Readonly<{
|
|
58
|
+
onBlur?: ((value: FocusEvent) => any) | undefined;
|
|
59
|
+
onChange?: ((value: OutlinedTimePickerValue) => any) | undefined;
|
|
60
|
+
onFocus?: ((value: FocusEvent) => any) | undefined;
|
|
61
|
+
onInput?: ((value: OutlinedTimePickerValue) => any) | undefined;
|
|
62
|
+
onClear?: (() => any) | undefined;
|
|
63
|
+
"onUpdate:value"?: ((value: OutlinedTimePickerValue) => any) | undefined;
|
|
64
|
+
"onVisible-change"?: ((value: boolean) => any) | undefined;
|
|
65
|
+
}>, {
|
|
66
|
+
error: boolean;
|
|
67
|
+
label: string;
|
|
68
|
+
disabled: boolean;
|
|
69
|
+
required: boolean;
|
|
70
|
+
value: OutlinedTimePickerValue;
|
|
71
|
+
placeholder: string;
|
|
72
|
+
errorMessage: string;
|
|
73
|
+
inputHeight: number;
|
|
74
|
+
isBorder: boolean;
|
|
75
|
+
clearable: boolean;
|
|
76
|
+
marginBottom: OutlinedTimePickerCssValue;
|
|
77
|
+
paddingTop: OutlinedTimePickerCssValue;
|
|
78
|
+
format: string;
|
|
79
|
+
valueFormat: string;
|
|
80
|
+
isRange: boolean;
|
|
81
|
+
startPlaceholder: string;
|
|
82
|
+
endPlaceholder: string;
|
|
83
|
+
rangeSeparator: string;
|
|
84
|
+
arrowControl: boolean;
|
|
85
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
86
|
+
export default _default;
|
|
87
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
88
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
89
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
90
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
91
|
+
} : {
|
|
92
|
+
type: import('vue').PropType<T[K]>;
|
|
93
|
+
required: true;
|
|
94
|
+
};
|
|
95
|
+
};
|
|
96
|
+
type __VLS_WithDefaults<P, D> = {
|
|
97
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
98
|
+
default: D[K];
|
|
99
|
+
}> : P[K];
|
|
100
|
+
};
|
|
101
|
+
type __VLS_Prettify<T> = {
|
|
102
|
+
[K in keyof T]: T[K];
|
|
103
|
+
} & {};
|
|
@@ -94,3 +94,36 @@ const periodRange = ref<string[]>([])
|
|
|
94
94
|
- 组件只负责通用时间选择壳子,不直接耦合业务时段规则、起止合法性判断或接口结构
|
|
95
95
|
- 更复杂的业务约束,比如“结束时间必须晚于开始时间”,应由页面层或业务组件负责
|
|
96
96
|
- 如果后续某个业务强依赖固定时段模板,建议在业务包里再封一层,不要反向污染 `ui-core`
|
|
97
|
+
|
|
98
|
+
## AI 使用指引
|
|
99
|
+
|
|
100
|
+
AI 在生成时间选择项时,如果页面需要浮动标签、单时间点或时间范围输入,应优先使用 `OutlinedTimePicker`。
|
|
101
|
+
|
|
102
|
+
推荐优先从统一入口导入:
|
|
103
|
+
|
|
104
|
+
```ts
|
|
105
|
+
import { OutlinedTimePicker, type OutlinedTimePickerExpose } from '@hbdlzy/ui'
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
如果当前只安装了核心包,也可以从 `@hbdlzy/ui-core` 导入。
|
|
109
|
+
|
|
110
|
+
AI 生成代码时按下面顺序判断:
|
|
111
|
+
|
|
112
|
+
1. 单时间点使用默认单值模式
|
|
113
|
+
2. 起止时间使用 `isRange`,并传 `startPlaceholder`、`endPlaceholder`
|
|
114
|
+
3. 展示格式用 `format`,提交格式用 `valueFormat`
|
|
115
|
+
4. 需要下边框风格,传 `:is-border="true"`
|
|
116
|
+
5. 需要手动打开、关闭、清空时,使用 `ref<OutlinedTimePickerExpose>`
|
|
117
|
+
|
|
118
|
+
AI 不应该做这些事:
|
|
119
|
+
|
|
120
|
+
- 不要用两个普通 `el-time-picker` 重复拼时间范围样式
|
|
121
|
+
- 不要在基础组件里写“结束时间必须晚于开始时间”等业务判断
|
|
122
|
+
- 不要把固定时段模板写进 `ui-core`
|
|
123
|
+
- 不要用它处理日期时间组合,日期时间组合用 `OutlinedDateTimePicker`
|
|
124
|
+
|
|
125
|
+
生成代码前建议同时读取:
|
|
126
|
+
|
|
127
|
+
- `packages/ui-core/components.manifest.json`
|
|
128
|
+
- `packages/ui-core/src/components/OutlinedTimePicker/OutlinedTimePicker.types.ts`
|
|
129
|
+
- 本 README 的 `Props / Emits / Expose` 部分
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
export type OutlinedTreeSelectCssValue = string | number;
|
|
2
|
+
export type OutlinedTreeSelectOptionValue = string | number | boolean | Record<string, unknown> | null;
|
|
3
|
+
export type OutlinedTreeSelectValue = OutlinedTreeSelectOptionValue | OutlinedTreeSelectOptionValue[];
|
|
4
|
+
export interface OutlinedTreeSelectNode {
|
|
5
|
+
label?: string;
|
|
6
|
+
value?: OutlinedTreeSelectOptionValue;
|
|
7
|
+
children?: OutlinedTreeSelectNode[];
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
[key: string]: unknown;
|
|
10
|
+
}
|
|
11
|
+
export interface OutlinedTreeSelectProps {
|
|
12
|
+
value?: OutlinedTreeSelectValue;
|
|
13
|
+
data?: OutlinedTreeSelectNode[];
|
|
14
|
+
propsValue?: Record<string, unknown>;
|
|
15
|
+
placeholder?: string;
|
|
16
|
+
label?: string;
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
clearable?: boolean;
|
|
19
|
+
filterable?: boolean;
|
|
20
|
+
multiple?: boolean;
|
|
21
|
+
showCheckbox?: boolean;
|
|
22
|
+
checkStrictly?: boolean;
|
|
23
|
+
checkOnClickNode?: boolean;
|
|
24
|
+
defaultExpandAll?: boolean;
|
|
25
|
+
expandOnClickNode?: boolean;
|
|
26
|
+
renderAfterExpand?: boolean;
|
|
27
|
+
collapseTags?: boolean;
|
|
28
|
+
collapseTagsTooltip?: boolean;
|
|
29
|
+
maxCollapseTags?: number;
|
|
30
|
+
popperClass?: string;
|
|
31
|
+
nodeKey?: string;
|
|
32
|
+
keyValue?: string;
|
|
33
|
+
labelValue?: string;
|
|
34
|
+
childrenValue?: string;
|
|
35
|
+
disabledValue?: string;
|
|
36
|
+
inputHeight?: number;
|
|
37
|
+
isBorder?: boolean;
|
|
38
|
+
marginBottom?: OutlinedTreeSelectCssValue;
|
|
39
|
+
paddingTop?: OutlinedTreeSelectCssValue;
|
|
40
|
+
required?: boolean;
|
|
41
|
+
error?: boolean;
|
|
42
|
+
errorMessage?: string;
|
|
43
|
+
}
|
|
44
|
+
export interface OutlinedTreeSelectExpose {
|
|
45
|
+
focus: () => void;
|
|
46
|
+
blur: () => void;
|
|
47
|
+
clear: () => void;
|
|
48
|
+
getTreeSelectRef: () => unknown | null;
|
|
49
|
+
}
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
import type { OutlinedTreeSelectCssValue, OutlinedTreeSelectProps, OutlinedTreeSelectValue } from './OutlinedTreeSelect.types';
|
|
2
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OutlinedTreeSelectProps>, {
|
|
3
|
+
value: undefined;
|
|
4
|
+
data: () => never[];
|
|
5
|
+
propsValue: undefined;
|
|
6
|
+
placeholder: string;
|
|
7
|
+
label: string;
|
|
8
|
+
disabled: boolean;
|
|
9
|
+
clearable: boolean;
|
|
10
|
+
filterable: boolean;
|
|
11
|
+
multiple: boolean;
|
|
12
|
+
showCheckbox: boolean;
|
|
13
|
+
checkStrictly: boolean;
|
|
14
|
+
checkOnClickNode: boolean;
|
|
15
|
+
defaultExpandAll: boolean;
|
|
16
|
+
expandOnClickNode: boolean;
|
|
17
|
+
renderAfterExpand: boolean;
|
|
18
|
+
collapseTags: boolean;
|
|
19
|
+
collapseTagsTooltip: boolean;
|
|
20
|
+
maxCollapseTags: number;
|
|
21
|
+
popperClass: string;
|
|
22
|
+
nodeKey: string;
|
|
23
|
+
keyValue: string;
|
|
24
|
+
labelValue: string;
|
|
25
|
+
childrenValue: string;
|
|
26
|
+
disabledValue: string;
|
|
27
|
+
inputHeight: number;
|
|
28
|
+
isBorder: boolean;
|
|
29
|
+
marginBottom: number;
|
|
30
|
+
paddingTop: number;
|
|
31
|
+
required: boolean;
|
|
32
|
+
error: boolean;
|
|
33
|
+
errorMessage: string;
|
|
34
|
+
}>>, {
|
|
35
|
+
focus: () => void;
|
|
36
|
+
blur: () => void;
|
|
37
|
+
clear: () => void;
|
|
38
|
+
getTreeSelectRef: () => unknown;
|
|
39
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
40
|
+
input: (value: OutlinedTreeSelectValue) => void;
|
|
41
|
+
"update:value": (value: OutlinedTreeSelectValue) => void;
|
|
42
|
+
change: (value: OutlinedTreeSelectValue) => void;
|
|
43
|
+
focus: (value: FocusEvent) => void;
|
|
44
|
+
blur: (value: FocusEvent) => void;
|
|
45
|
+
"visible-change": (value: boolean) => void;
|
|
46
|
+
clear: () => void;
|
|
47
|
+
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OutlinedTreeSelectProps>, {
|
|
48
|
+
value: undefined;
|
|
49
|
+
data: () => never[];
|
|
50
|
+
propsValue: undefined;
|
|
51
|
+
placeholder: string;
|
|
52
|
+
label: string;
|
|
53
|
+
disabled: boolean;
|
|
54
|
+
clearable: boolean;
|
|
55
|
+
filterable: boolean;
|
|
56
|
+
multiple: boolean;
|
|
57
|
+
showCheckbox: boolean;
|
|
58
|
+
checkStrictly: boolean;
|
|
59
|
+
checkOnClickNode: boolean;
|
|
60
|
+
defaultExpandAll: boolean;
|
|
61
|
+
expandOnClickNode: boolean;
|
|
62
|
+
renderAfterExpand: boolean;
|
|
63
|
+
collapseTags: boolean;
|
|
64
|
+
collapseTagsTooltip: boolean;
|
|
65
|
+
maxCollapseTags: number;
|
|
66
|
+
popperClass: string;
|
|
67
|
+
nodeKey: string;
|
|
68
|
+
keyValue: string;
|
|
69
|
+
labelValue: string;
|
|
70
|
+
childrenValue: string;
|
|
71
|
+
disabledValue: string;
|
|
72
|
+
inputHeight: number;
|
|
73
|
+
isBorder: boolean;
|
|
74
|
+
marginBottom: number;
|
|
75
|
+
paddingTop: number;
|
|
76
|
+
required: boolean;
|
|
77
|
+
error: boolean;
|
|
78
|
+
errorMessage: string;
|
|
79
|
+
}>>> & Readonly<{
|
|
80
|
+
onBlur?: ((value: FocusEvent) => any) | undefined;
|
|
81
|
+
onChange?: ((value: OutlinedTreeSelectValue) => any) | undefined;
|
|
82
|
+
onFocus?: ((value: FocusEvent) => any) | undefined;
|
|
83
|
+
onInput?: ((value: OutlinedTreeSelectValue) => any) | undefined;
|
|
84
|
+
onClear?: (() => any) | undefined;
|
|
85
|
+
"onUpdate:value"?: ((value: OutlinedTreeSelectValue) => any) | undefined;
|
|
86
|
+
"onVisible-change"?: ((value: boolean) => any) | undefined;
|
|
87
|
+
}>, {
|
|
88
|
+
error: boolean;
|
|
89
|
+
data: import("./OutlinedTreeSelect.types").OutlinedTreeSelectNode[];
|
|
90
|
+
label: string;
|
|
91
|
+
disabled: boolean;
|
|
92
|
+
required: boolean;
|
|
93
|
+
defaultExpandAll: boolean;
|
|
94
|
+
popperClass: string;
|
|
95
|
+
value: OutlinedTreeSelectValue;
|
|
96
|
+
placeholder: string;
|
|
97
|
+
errorMessage: string;
|
|
98
|
+
inputHeight: number;
|
|
99
|
+
isBorder: boolean;
|
|
100
|
+
clearable: boolean;
|
|
101
|
+
marginBottom: OutlinedTreeSelectCssValue;
|
|
102
|
+
paddingTop: OutlinedTreeSelectCssValue;
|
|
103
|
+
multiple: boolean;
|
|
104
|
+
collapseTags: boolean;
|
|
105
|
+
collapseTagsTooltip: boolean;
|
|
106
|
+
filterable: boolean;
|
|
107
|
+
keyValue: string;
|
|
108
|
+
labelValue: string;
|
|
109
|
+
maxCollapseTags: number;
|
|
110
|
+
propsValue: Record<string, unknown>;
|
|
111
|
+
showCheckbox: boolean;
|
|
112
|
+
checkStrictly: boolean;
|
|
113
|
+
checkOnClickNode: boolean;
|
|
114
|
+
expandOnClickNode: boolean;
|
|
115
|
+
renderAfterExpand: boolean;
|
|
116
|
+
nodeKey: string;
|
|
117
|
+
childrenValue: string;
|
|
118
|
+
disabledValue: string;
|
|
119
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
|
|
120
|
+
empty?(_: {}): any;
|
|
121
|
+
header?(_: {}): any;
|
|
122
|
+
footer?(_: {}): any;
|
|
123
|
+
}>;
|
|
124
|
+
export default _default;
|
|
125
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
126
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
127
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
128
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
129
|
+
} : {
|
|
130
|
+
type: import('vue').PropType<T[K]>;
|
|
131
|
+
required: true;
|
|
132
|
+
};
|
|
133
|
+
};
|
|
134
|
+
type __VLS_WithDefaults<P, D> = {
|
|
135
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
136
|
+
default: D[K];
|
|
137
|
+
}> : P[K];
|
|
138
|
+
};
|
|
139
|
+
type __VLS_Prettify<T> = {
|
|
140
|
+
[K in keyof T]: T[K];
|
|
141
|
+
} & {};
|
|
142
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
143
|
+
new (): {
|
|
144
|
+
$slots: S;
|
|
145
|
+
};
|
|
146
|
+
};
|
|
@@ -108,3 +108,37 @@ const treeData = [
|
|
|
108
108
|
- 组件只处理通用树选择壳子和交互状态,不直接耦合组织树接口、区域树接口等业务数据源
|
|
109
109
|
- 如果业务已经有固定的树字段协议,优先传 `propsValue`,不要在页面层二次转一份树数据
|
|
110
110
|
- 如果后续要支持领域级树选择行为,比如自动拼接父路径、限定层级,只建议在业务包里再封一层
|
|
111
|
+
|
|
112
|
+
## AI 使用指引
|
|
113
|
+
|
|
114
|
+
AI 在生成组织树、区域树、父节点、资源树等下拉树选择项时,应优先使用 `OutlinedTreeSelect`,不要重复封装 `el-tree-select` 的浮动标签和字段映射逻辑。
|
|
115
|
+
|
|
116
|
+
推荐优先从统一入口导入:
|
|
117
|
+
|
|
118
|
+
```ts
|
|
119
|
+
import { OutlinedTreeSelect, type OutlinedTreeSelectExpose } from '@hbdlzy/ui'
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
如果当前只安装了核心包,也可以从 `@hbdlzy/ui-core` 导入。
|
|
123
|
+
|
|
124
|
+
AI 生成代码时按下面顺序判断:
|
|
125
|
+
|
|
126
|
+
1. 标准树数据直接传 `data`
|
|
127
|
+
2. 后端字段不是 `value/label/children` 时,优先使用 `propsValue`
|
|
128
|
+
3. 单选父节点场景常用 `checkStrictly`
|
|
129
|
+
4. 多选或勾选场景使用 `multiple`、`showCheckbox`
|
|
130
|
+
5. 需要搜索时传 `filterable`
|
|
131
|
+
6. 需要手动聚焦或清空时,使用 `ref<OutlinedTreeSelectExpose>`
|
|
132
|
+
|
|
133
|
+
AI 不应该做这些事:
|
|
134
|
+
|
|
135
|
+
- 不要为普通树下拉重复写 `el-tree-select` 外壳
|
|
136
|
+
- 不要在页面层二次转换整棵树来适配字段名,优先用 `propsValue`
|
|
137
|
+
- 不要把组织树接口、区域接口请求写进基础组件
|
|
138
|
+
- 不要把层级限制、自动拼父路径等领域规则塞进 `ui-core`
|
|
139
|
+
|
|
140
|
+
生成代码前建议同时读取:
|
|
141
|
+
|
|
142
|
+
- `packages/ui-core/components.manifest.json`
|
|
143
|
+
- `packages/ui-core/src/components/OutlinedTreeSelect/OutlinedTreeSelect.types.ts`
|
|
144
|
+
- 本 README 的 `Props / Emits / Expose` 部分
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import OutlinedTreeSelect from './OutlinedTreeSelect.vue';
|
|
2
|
+
export default OutlinedTreeSelect;
|
|
3
|
+
export type { OutlinedTreeSelectCssValue, OutlinedTreeSelectExpose, OutlinedTreeSelectNode, OutlinedTreeSelectOptionValue, OutlinedTreeSelectProps, OutlinedTreeSelectValue } from './OutlinedTreeSelect.types';
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
# SvgIcon
|
|
2
|
+
|
|
3
|
+
`SvgIcon` 用来展示 SVG symbol sprite 或外链 SVG,兼容旧项目里 `<svg-icon icon-class="xxx" class-name="xxx" />` 的写法。
|
|
4
|
+
|
|
5
|
+
## 解决的问题
|
|
6
|
+
|
|
7
|
+
- 统一 SVG 图标展示入口
|
|
8
|
+
- 支持 `#icon-xxx` 形式的 symbol 引用
|
|
9
|
+
- 支持 http、data、blob 等外链 SVG 通过 mask 渲染为 `currentColor`
|
|
10
|
+
- 自动去掉 `iconClass` 首尾空格,兼容旧模板里误带空格的图标名
|
|
11
|
+
|
|
12
|
+
## 基础用法
|
|
13
|
+
|
|
14
|
+
```vue
|
|
15
|
+
<template>
|
|
16
|
+
<SvgIcon
|
|
17
|
+
icon-class="filter"
|
|
18
|
+
class-name="table-search-icon"
|
|
19
|
+
/>
|
|
20
|
+
</template>
|
|
21
|
+
|
|
22
|
+
<script setup lang="ts">
|
|
23
|
+
import { SvgIcon } from '@hbdlzy/ui-core'
|
|
24
|
+
</script>
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
上面的写法会渲染 `<use href="#icon-filter" />`。页面或项目需要自行通过 SVG sprite 注入 `symbol id="icon-filter"`。
|
|
28
|
+
|
|
29
|
+
## 外链 SVG
|
|
30
|
+
|
|
31
|
+
```vue
|
|
32
|
+
<template>
|
|
33
|
+
<SvgIcon
|
|
34
|
+
:icon-class="externalSvgUrl"
|
|
35
|
+
class-name="status-icon"
|
|
36
|
+
/>
|
|
37
|
+
</template>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
外链模式会使用 CSS mask 渲染,图标颜色继承父级 `color`。
|
|
41
|
+
|
|
42
|
+
## Props
|
|
43
|
+
|
|
44
|
+
- `iconClass`: 图标名或外链 SVG 地址,必填
|
|
45
|
+
- `className`: 追加到根节点的类名
|
|
46
|
+
- `prefix`: symbol 前缀,默认 `icon`,最终引用为 `#${prefix}-${iconClass}`
|
|
47
|
+
- `ariaLabel`: 无障碍标签,未传时图标默认 `aria-hidden="true"`
|
|
48
|
+
|
|
49
|
+
## 推荐约定
|
|
50
|
+
|
|
51
|
+
- symbol sprite 的 id 统一使用 `icon-xxx`
|
|
52
|
+
- 需要调色时通过父级或 `className` 设置 `color`
|
|
53
|
+
- 业务项目如果已经有 `svg-sprite-loader` 或 Vite SVG sprite 插件,可继续复用原有注入方式
|
|
54
|
+
|
|
55
|
+
## AI 使用指引
|
|
56
|
+
|
|
57
|
+
AI 在生成图标展示时,如果项目已使用 `@hbdlzy/ui`,应优先使用 `SvgIcon`,不要重复写一套 `svg use` 或外链 SVG mask 组件。
|
|
58
|
+
|
|
59
|
+
推荐优先从统一入口导入:
|
|
60
|
+
|
|
61
|
+
```ts
|
|
62
|
+
import { SvgIcon } from '@hbdlzy/ui'
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
如果当前只安装了核心包,也可以从 `@hbdlzy/ui-core` 导入。
|
|
66
|
+
|
|
67
|
+
AI 生成代码时按下面顺序判断:
|
|
68
|
+
|
|
69
|
+
1. 图标来自 symbol sprite 时,传 `icon-class="xxx"`,默认会引用 `#icon-xxx`
|
|
70
|
+
2. 图标前缀不是 `icon` 时,传 `prefix`
|
|
71
|
+
3. 图标来自 http、data、blob 等外链时,直接把地址传给 `iconClass`
|
|
72
|
+
4. 需要控制大小和颜色时,使用 `className` 或父级 CSS
|
|
73
|
+
5. 作为有语义图标时传 `ariaLabel`,纯装饰图标可不传
|
|
74
|
+
|
|
75
|
+
AI 不应该做这些事:
|
|
76
|
+
|
|
77
|
+
- 不要在业务页面重复写 `<svg><use /></svg>` 壳子
|
|
78
|
+
- 不要为了外链 SVG 再手写 CSS mask 逻辑
|
|
79
|
+
- 不要在 `iconClass` 中拼 `#icon-`,组件会根据 `prefix` 自动生成
|
|
80
|
+
- 不要把图标颜色写死在组件内,优先通过 CSS `color` 控制
|
|
81
|
+
|
|
82
|
+
生成代码前建议同时读取:
|
|
83
|
+
|
|
84
|
+
- `packages/ui-core/components.manifest.json`
|
|
85
|
+
- `packages/ui-core/src/components/SvgIcon/SvgIcon.types.ts`
|
|
86
|
+
- 本 README 的 `Props / 推荐约定` 部分
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<span
|
|
3
|
+
v-if="isExternal"
|
|
4
|
+
class="svg-external-icon svg-icon"
|
|
5
|
+
:class="className"
|
|
6
|
+
:style="externalIconStyle"
|
|
7
|
+
:aria-hidden="ariaHidden"
|
|
8
|
+
:aria-label="ariaLabel"
|
|
9
|
+
role="img"
|
|
10
|
+
/>
|
|
11
|
+
<svg
|
|
12
|
+
v-else
|
|
13
|
+
class="svg-icon"
|
|
14
|
+
:class="className"
|
|
15
|
+
:aria-hidden="ariaHidden"
|
|
16
|
+
:aria-label="ariaLabel"
|
|
17
|
+
role="img"
|
|
18
|
+
>
|
|
19
|
+
<use
|
|
20
|
+
:href="iconName"
|
|
21
|
+
:xlink:href="iconName"
|
|
22
|
+
/>
|
|
23
|
+
</svg>
|
|
24
|
+
</template>
|
|
25
|
+
|
|
26
|
+
<script setup lang="ts">
|
|
27
|
+
import { computed } from 'vue'
|
|
28
|
+
import type { CSSProperties } from 'vue'
|
|
29
|
+
import type { SvgIconProps } from './SvgIcon.types'
|
|
30
|
+
|
|
31
|
+
defineOptions({
|
|
32
|
+
name: 'SvgIcon'
|
|
33
|
+
})
|
|
34
|
+
|
|
35
|
+
const props = withDefaults(defineProps<SvgIconProps>(), {
|
|
36
|
+
className: '',
|
|
37
|
+
prefix: 'icon',
|
|
38
|
+
ariaLabel: ''
|
|
39
|
+
})
|
|
40
|
+
|
|
41
|
+
const normalizedIconClass = computed(() => props.iconClass.trim())
|
|
42
|
+
const normalizedPrefix = computed(() => props.prefix.trim() || 'icon')
|
|
43
|
+
const isExternal = computed(() => /^(https?:|mailto:|tel:|data:|blob:)/.test(normalizedIconClass.value))
|
|
44
|
+
const iconName = computed(() => `#${normalizedPrefix.value}-${normalizedIconClass.value}`)
|
|
45
|
+
const ariaHidden = computed(() => props.ariaLabel ? undefined : 'true')
|
|
46
|
+
|
|
47
|
+
const externalIconStyle = computed<CSSProperties>(() => ({
|
|
48
|
+
mask: `url(${normalizedIconClass.value}) no-repeat 50% 50%`,
|
|
49
|
+
WebkitMask: `url(${normalizedIconClass.value}) no-repeat 50% 50%`
|
|
50
|
+
}))
|
|
51
|
+
</script>
|
|
52
|
+
|
|
53
|
+
<style scoped>
|
|
54
|
+
.svg-icon {
|
|
55
|
+
width: 1em;
|
|
56
|
+
height: 1em;
|
|
57
|
+
vertical-align: -0.15em;
|
|
58
|
+
fill: currentColor;
|
|
59
|
+
overflow: hidden;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.svg-external-icon {
|
|
63
|
+
display: inline-block;
|
|
64
|
+
background-color: currentColor;
|
|
65
|
+
mask-size: cover !important;
|
|
66
|
+
-webkit-mask-size: cover !important;
|
|
67
|
+
}
|
|
68
|
+
</style>
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import type { SvgIconProps } from './SvgIcon.types';
|
|
2
|
+
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SvgIconProps>, {
|
|
3
|
+
className: string;
|
|
4
|
+
prefix: string;
|
|
5
|
+
ariaLabel: string;
|
|
6
|
+
}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SvgIconProps>, {
|
|
7
|
+
className: string;
|
|
8
|
+
prefix: string;
|
|
9
|
+
ariaLabel: string;
|
|
10
|
+
}>>> & Readonly<{}>, {
|
|
11
|
+
className: string;
|
|
12
|
+
prefix: string;
|
|
13
|
+
ariaLabel: string;
|
|
14
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
15
|
+
export default _default;
|
|
16
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
17
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
18
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
19
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
20
|
+
} : {
|
|
21
|
+
type: import('vue').PropType<T[K]>;
|
|
22
|
+
required: true;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
type __VLS_WithDefaults<P, D> = {
|
|
26
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
27
|
+
default: D[K];
|
|
28
|
+
}> : P[K];
|
|
29
|
+
};
|
|
30
|
+
type __VLS_Prettify<T> = {
|
|
31
|
+
[K in keyof T]: T[K];
|
|
32
|
+
} & {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as echarts from 'echarts';
|
|
2
|
+
import type { ECharts, EChartsInitOpts, EChartsOption, ResizeOpts, SetOptionOpts } from 'echarts';
|
|
3
|
+
export type EChartInstance = ECharts;
|
|
4
|
+
export type EChartOption = EChartsOption;
|
|
5
|
+
export type EChartInitOptions = EChartsInitOpts;
|
|
6
|
+
export type EChartLoadingOptions = Parameters<ECharts['showLoading']>[1];
|
|
7
|
+
export type EChartResizeOptions = ResizeOpts;
|
|
8
|
+
export type EChartSetOptionOptions = SetOptionOpts;
|
|
9
|
+
export { echarts };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export type ExcelCellValue = string | number | boolean | null | undefined | Date;
|
|
2
|
+
export interface ExcelExportColumn<Row = Record<string, any>> {
|
|
3
|
+
label: string;
|
|
4
|
+
key?: string;
|
|
5
|
+
width?: number;
|
|
6
|
+
formatter?: (row: Row, rowIndex: number, column: ExcelExportColumn<Row>) => ExcelCellValue;
|
|
7
|
+
children?: Array<ExcelExportColumn<Row>>;
|
|
8
|
+
}
|
|
9
|
+
export interface ExcelExportOptions<Row = Record<string, any>> {
|
|
10
|
+
fileName: string;
|
|
11
|
+
sheetName?: string;
|
|
12
|
+
columns: Array<ExcelExportColumn<Row>>;
|
|
13
|
+
data: Array<Row>;
|
|
14
|
+
autoWidth?: boolean;
|
|
15
|
+
defaultColumnWidth?: number;
|
|
16
|
+
}
|
|
17
|
+
export declare function exportExcel<Row = Record<string, any>>(options: ExcelExportOptions<Row>): Promise<void>;
|
|
18
|
+
export default exportExcel;
|
package/src/index.d.ts
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
export { echarts } from './echarts';
|
|
2
|
+
export type { EChartInitOptions, EChartInstance, EChartLoadingOptions, EChartOption, EChartResizeOptions, EChartSetOptionOptions } from './echarts';
|
|
3
|
+
export { default as BaseCard } from './components/BaseCard';
|
|
4
|
+
export * from './components/BaseCard';
|
|
5
|
+
export { default as BaseTable } from './components/BaseTable';
|
|
6
|
+
export * from './components/BaseTable';
|
|
7
|
+
export { default as BaseEChart } from './components/BaseEChart';
|
|
8
|
+
export * from './components/BaseEChart';
|
|
9
|
+
export { default as BaseExportButton } from './components/BaseExportButton';
|
|
10
|
+
export * from './components/BaseExportButton';
|
|
11
|
+
export { default as SvgIcon } from './components/SvgIcon';
|
|
12
|
+
export * from './components/SvgIcon';
|
|
13
|
+
export { default as OutlinedInput } from './components/OutlinedInput';
|
|
14
|
+
export * from './components/OutlinedInput';
|
|
15
|
+
export { default as OutlinedSelect } from './components/OutlinedSelect';
|
|
16
|
+
export * from './components/OutlinedSelect';
|
|
17
|
+
export { default as OutlinedDatePicker } from './components/OutlinedDatePicker';
|
|
18
|
+
export * from './components/OutlinedDatePicker';
|
|
19
|
+
export { default as OutlinedDateTimePicker } from './components/OutlinedDateTimePicker';
|
|
20
|
+
export * from './components/OutlinedDateTimePicker';
|
|
21
|
+
export { default as OutlinedTimePicker } from './components/OutlinedTimePicker';
|
|
22
|
+
export * from './components/OutlinedTimePicker';
|
|
23
|
+
export { default as OutlinedCascader } from './components/OutlinedCascader';
|
|
24
|
+
export * from './components/OutlinedCascader';
|
|
25
|
+
export { default as OutlinedTreeSelect } from './components/OutlinedTreeSelect';
|
|
26
|
+
export * from './components/OutlinedTreeSelect';
|
|
27
|
+
export { exportExcel } from './excel/exportExcel';
|
|
28
|
+
export type { ExcelCellValue, ExcelExportColumn, ExcelExportOptions } from './excel/exportExcel';
|
|
29
|
+
export { Ripple, installRipple, uninstallRipple } from './ripple';
|
|
30
|
+
export type { RipplePlugin, RippleTeardown } from './ripple';
|