@sdata/web-vue 3.2.1 → 3.3.1
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 +2 -2
- package/dist/sd.css +91 -17
- package/dist/sd.min.css +1 -1
- package/es/_components/select-view/style/index.css +5 -6
- package/es/_components/virtual-list-v2/hooks/use-size.d.ts +17 -0
- package/es/_components/virtual-list-v2/hooks/use-size.js +95 -0
- package/es/_components/virtual-list-v2/index.d.ts +2 -0
- package/es/_components/virtual-list-v2/index.js +5 -0
- package/es/_components/virtual-list-v2/interface.d.ts +44 -0
- package/es/_components/virtual-list-v2/virtual-list-item.d.ts +22 -0
- package/es/_components/virtual-list-v2/virtual-list-item.js +37 -0
- package/es/_components/virtual-list-v2/virtual-list.js +47 -0
- package/es/_components/virtual-list-v2/virtual-list.vue.d.ts +749 -0
- package/es/_components/virtual-list-v2/virtual-list.vue_vue_type_script_lang.js +179 -0
- package/es/_hooks/use-config-provider-prop.d.ts +1 -1
- package/es/_virtual/_plugin-vue_export-helper.js +8 -0
- package/es/color-picker/hooks/use-control-block.js +4 -1
- package/es/components.d.ts +1 -0
- package/es/config-provider/config-provider.vue.d.ts +7 -1
- package/es/config-provider/config-provider.vue_vue_type_script_setup_true_lang.js +7 -1
- package/es/config-provider/context.d.ts +14 -0
- package/es/config-provider/index.d.ts +9 -0
- package/es/index.css +91 -17
- package/es/index.d.ts +2 -0
- package/es/index.js +2 -1
- package/es/index.scss +1 -0
- package/es/input-tag/style/index.css +5 -6
- package/es/input-tag/style/input-tag.scss +30 -10
- package/es/message/message.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/pagination/pagination.js +101 -19
- package/es/sd-vue.js +2 -0
- package/es/table/context.d.ts +1 -1
- package/es/table/hooks/use-column-resize.d.ts +3 -2
- package/es/table/hooks/use-column-resize.js +21 -48
- package/es/table/hooks/use-drag.d.ts +1 -3
- package/es/table/hooks/use-drag.js +2 -18
- package/es/table/index.d.ts +21 -36
- package/es/table/style/index.css +12 -5
- package/es/table/style/index.scss +16 -6
- package/es/table/table-operation-td.js +15 -12
- package/es/table/table-operation-th.js +2 -2
- package/es/table/table-tbody.js +3 -1
- package/es/table/table-td.js +3 -4
- package/es/table/table-th.js +24 -40
- package/es/table/table-thead.js +3 -1
- package/es/table/table.d.ts +13 -19
- package/es/table/table.js +205 -424
- package/es/table/utils.d.ts +2 -0
- package/es/table/utils.js +11 -1
- package/es/tag/index.d.ts +3 -3
- package/es/tag/tag.vue.d.ts +2 -2
- package/es/tag/tag.vue_vue_type_script_setup_true_lang.js +16 -5
- package/es/toolbar/index.d.ts +72 -0
- package/es/toolbar/index.js +10 -0
- package/es/toolbar/style/css.js +2 -0
- package/es/toolbar/style/index.css +85 -0
- package/es/toolbar/style/index.d.ts +2 -0
- package/es/toolbar/style/index.js +2 -0
- package/es/toolbar/style/index.scss +97 -0
- package/es/toolbar/style/token.scss +25 -0
- package/es/toolbar/toolbar.js +5 -0
- package/es/toolbar/toolbar.vue.d.ts +44 -0
- package/es/toolbar/toolbar.vue_vue_type_script_setup_true_lang.js +197 -0
- package/es/toolbar/types.d.ts +26 -0
- package/es/trigger/trigger.js +5 -1
- package/json/vetur-attributes.json +76 -1
- package/json/vetur-tags.json +24 -0
- package/json/web-types.json +163 -7
- package/package.json +1 -1
- package/es/table/table-col-group.vue.d.ts +0 -29
package/es/table/utils.d.ts
CHANGED
|
@@ -21,6 +21,8 @@ export declare const getOperationStyle: (column: TableOperationColumn, operation
|
|
|
21
21
|
} | {
|
|
22
22
|
left?: undefined;
|
|
23
23
|
};
|
|
24
|
+
export declare const getTableGridTemplate: (dataColumns: TableColumnData[], operations: TableOperationColumn[], columnWidth?: Record<string, number>) => string;
|
|
25
|
+
export declare const getGridSpanStyle: (rowSpan?: number, colSpan?: number) => CSSProperties;
|
|
24
26
|
export declare const getColumnsFromSlot: (vns: VNode[]) => TableColumnData[];
|
|
25
27
|
export declare function mapArrayWithChildren<T extends Array<{
|
|
26
28
|
[key: string]: any;
|
package/es/table/utils.js
CHANGED
|
@@ -149,6 +149,16 @@ var getOperationStyle = (column, operations) => {
|
|
|
149
149
|
if (column.fixed) return { left: `${getOperationFixedNumber(column, operations)}px` };
|
|
150
150
|
return {};
|
|
151
151
|
};
|
|
152
|
+
var getColumnTrack = (width, minWidth) => {
|
|
153
|
+
if (width) return `${Math.max(width, minWidth || 0)}px`;
|
|
154
|
+
if (minWidth) return `minmax(${minWidth}px, 1fr)`;
|
|
155
|
+
return "minmax(0, 1fr)";
|
|
156
|
+
};
|
|
157
|
+
var getTableGridTemplate = (dataColumns, operations, columnWidth) => operations.map((item) => {
|
|
158
|
+
var _item$width3;
|
|
159
|
+
return `${(_item$width3 = item.width) !== null && _item$width3 !== void 0 ? _item$width3 : 40}px`;
|
|
160
|
+
}).concat(dataColumns.map((item) => getColumnTrack(item.dataIndex && (columnWidth === null || columnWidth === void 0 ? void 0 : columnWidth[item.dataIndex]) || item.width, item.minWidth))).join(" ");
|
|
161
|
+
var getGridSpanStyle = (rowSpan = 1, colSpan = 1) => _objectSpread2(_objectSpread2({}, rowSpan > 1 ? { gridRow: `span ${rowSpan}` } : {}), colSpan > 1 ? { gridColumn: `span ${colSpan}` } : {});
|
|
152
162
|
function mapArrayWithChildren(arr) {
|
|
153
163
|
return arr.map((item) => {
|
|
154
164
|
const newItem = _objectSpread2({}, item);
|
|
@@ -181,4 +191,4 @@ var getSelectionStatus = (selectedRowKeys, leafKeys) => {
|
|
|
181
191
|
};
|
|
182
192
|
};
|
|
183
193
|
//#endregion
|
|
184
|
-
export { getFixedCls, getGroupColumns, getLeafKeys, getOperationFixedCls, getOperationStyle, getSelectionStatus, getStyle, mapArrayWithChildren, mapRawTableData };
|
|
194
|
+
export { getFixedCls, getGridSpanStyle, getGroupColumns, getLeafKeys, getOperationFixedCls, getOperationStyle, getSelectionStatus, getStyle, getTableGridTemplate, mapArrayWithChildren, mapRawTableData };
|
package/es/tag/index.d.ts
CHANGED
|
@@ -71,7 +71,7 @@ declare const Tag: {
|
|
|
71
71
|
};
|
|
72
72
|
backgroundAlpha: {
|
|
73
73
|
type: NumberConstructor;
|
|
74
|
-
default:
|
|
74
|
+
default: undefined;
|
|
75
75
|
};
|
|
76
76
|
}>> & Readonly<{
|
|
77
77
|
onClose?: ((_ev: MouseEvent | KeyboardEvent) => any) | undefined;
|
|
@@ -176,7 +176,7 @@ declare const Tag: {
|
|
|
176
176
|
};
|
|
177
177
|
backgroundAlpha: {
|
|
178
178
|
type: NumberConstructor;
|
|
179
|
-
default:
|
|
179
|
+
default: undefined;
|
|
180
180
|
};
|
|
181
181
|
}>> & Readonly<{
|
|
182
182
|
onClose?: ((_ev: MouseEvent | KeyboardEvent) => any) | undefined;
|
|
@@ -273,7 +273,7 @@ declare const Tag: {
|
|
|
273
273
|
};
|
|
274
274
|
backgroundAlpha: {
|
|
275
275
|
type: NumberConstructor;
|
|
276
|
-
default:
|
|
276
|
+
default: undefined;
|
|
277
277
|
};
|
|
278
278
|
}>> & Readonly<{
|
|
279
279
|
onClose?: ((_ev: MouseEvent | KeyboardEvent) => any) | undefined;
|
package/es/tag/tag.vue.d.ts
CHANGED
|
@@ -81,7 +81,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
|
|
|
81
81
|
};
|
|
82
82
|
backgroundAlpha: {
|
|
83
83
|
type: NumberConstructor;
|
|
84
|
-
default:
|
|
84
|
+
default: undefined;
|
|
85
85
|
};
|
|
86
86
|
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
87
87
|
close: (_ev: MouseEvent | KeyboardEvent) => any;
|
|
@@ -157,7 +157,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
|
|
|
157
157
|
};
|
|
158
158
|
backgroundAlpha: {
|
|
159
159
|
type: NumberConstructor;
|
|
160
|
-
default:
|
|
160
|
+
default: undefined;
|
|
161
161
|
};
|
|
162
162
|
}>> & Readonly<{
|
|
163
163
|
onClose?: ((_ev: MouseEvent | KeyboardEvent) => any) | undefined;
|
|
@@ -156,12 +156,12 @@ var tag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompon
|
|
|
156
156
|
default: void 0
|
|
157
157
|
},
|
|
158
158
|
/**
|
|
159
|
-
* @zh
|
|
160
|
-
* @en Background opacity for custom color tags, only effective when using a custom color,
|
|
159
|
+
* @zh 自定义颜色的背景透明度,仅在自定义颜色时生效。未显式传入时:若颜色自带透明度则使用该透明度,否则为 0.8
|
|
160
|
+
* @en Background opacity for custom color tags, only effective when using a custom color. When not explicitly set, uses the color's own opacity if it has one, otherwise 0.8
|
|
161
161
|
*/
|
|
162
162
|
backgroundAlpha: {
|
|
163
163
|
type: Number,
|
|
164
|
-
default:
|
|
164
|
+
default: void 0
|
|
165
165
|
}
|
|
166
166
|
},
|
|
167
167
|
emits: [
|
|
@@ -236,8 +236,19 @@ var tag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompon
|
|
|
236
236
|
var _props$textColor;
|
|
237
237
|
return (_props$textColor = props.textColor) !== null && _props$textColor !== void 0 ? _props$textColor : autoTextColor.value;
|
|
238
238
|
});
|
|
239
|
+
const colorAlpha = computed(() => {
|
|
240
|
+
if (!isCustomColor.value || !resolvedColor.value || isGradientColor.value) return;
|
|
241
|
+
try {
|
|
242
|
+
const alpha = chroma(resolvedColor.value).alpha();
|
|
243
|
+
return alpha < 1 ? alpha : void 0;
|
|
244
|
+
} catch (_unused3) {
|
|
245
|
+
return;
|
|
246
|
+
}
|
|
247
|
+
});
|
|
239
248
|
const finalBackgroundAlpha = computed(() => {
|
|
240
|
-
|
|
249
|
+
if (isNil(props.bordered)) return 1;
|
|
250
|
+
if (!isNil(props.backgroundAlpha)) return props.backgroundAlpha;
|
|
251
|
+
return isNil(colorAlpha.value) ? .8 : colorAlpha.value;
|
|
241
252
|
});
|
|
242
253
|
const computedVisible = computed(() => {
|
|
243
254
|
var _props$visible;
|
|
@@ -286,7 +297,7 @@ var tag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompon
|
|
|
286
297
|
if (finalTextColor.value) styleObj["--sd-tag-color"] = finalTextColor.value;
|
|
287
298
|
try {
|
|
288
299
|
styleObj["--sd-tag-bg-color"] = (isGradientColor.value ? chroma.average(extractColorsFromGradient(resolvedColor.value), "rgb") : chroma(resolvedColor.value)).alpha(finalBackgroundAlpha.value).css();
|
|
289
|
-
} catch (
|
|
300
|
+
} catch (_unused4) {
|
|
290
301
|
styleObj["--sd-tag-bg-color"] = resolvedColor.value;
|
|
291
302
|
}
|
|
292
303
|
if (!isNil(props.bordered)) styleObj["--sd-tag-border-color"] = resolvedBackgroundColor.value;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import type { App } from 'vue';
|
|
2
|
+
import type { SDOptions } from '../_utils/types';
|
|
3
|
+
import _Toolbar from './toolbar.vue';
|
|
4
|
+
declare const Toolbar: {
|
|
5
|
+
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./types").ToolbarProps & {
|
|
6
|
+
modelValue?: import("./types").ToolbarModelValue;
|
|
7
|
+
}> & Readonly<{
|
|
8
|
+
onSearch?: ((params: import("./types").ToolbarModelValue) => any) | undefined;
|
|
9
|
+
onReset?: (() => any) | undefined;
|
|
10
|
+
"onUpdate:modelValue"?: ((value: import("./types").ToolbarModelValue) => any) | undefined;
|
|
11
|
+
}>, {
|
|
12
|
+
search: () => void;
|
|
13
|
+
reset: () => void;
|
|
14
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
15
|
+
search: (params: import("./types").ToolbarModelValue) => any;
|
|
16
|
+
reset: () => any;
|
|
17
|
+
"update:modelValue": (value: import("./types").ToolbarModelValue) => any;
|
|
18
|
+
}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
|
19
|
+
P: {};
|
|
20
|
+
B: {};
|
|
21
|
+
D: {};
|
|
22
|
+
C: {};
|
|
23
|
+
M: {};
|
|
24
|
+
Defaults: {};
|
|
25
|
+
}, Readonly<import("./types").ToolbarProps & {
|
|
26
|
+
modelValue?: import("./types").ToolbarModelValue;
|
|
27
|
+
}> & Readonly<{
|
|
28
|
+
onSearch?: ((params: import("./types").ToolbarModelValue) => any) | undefined;
|
|
29
|
+
onReset?: (() => any) | undefined;
|
|
30
|
+
"onUpdate:modelValue"?: ((value: import("./types").ToolbarModelValue) => any) | undefined;
|
|
31
|
+
}>, {
|
|
32
|
+
search: () => void;
|
|
33
|
+
reset: () => void;
|
|
34
|
+
}, {}, {}, {}, {}>;
|
|
35
|
+
__isFragment?: never;
|
|
36
|
+
__isTeleport?: never;
|
|
37
|
+
__isSuspense?: never;
|
|
38
|
+
} & import("vue").ComponentOptionsBase<Readonly<import("./types").ToolbarProps & {
|
|
39
|
+
modelValue?: import("./types").ToolbarModelValue;
|
|
40
|
+
}> & Readonly<{
|
|
41
|
+
onSearch?: ((params: import("./types").ToolbarModelValue) => any) | undefined;
|
|
42
|
+
onReset?: (() => any) | undefined;
|
|
43
|
+
"onUpdate:modelValue"?: ((value: import("./types").ToolbarModelValue) => any) | undefined;
|
|
44
|
+
}>, {
|
|
45
|
+
search: () => void;
|
|
46
|
+
reset: () => void;
|
|
47
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
48
|
+
search: (params: import("./types").ToolbarModelValue) => any;
|
|
49
|
+
reset: () => any;
|
|
50
|
+
"update:modelValue": (value: import("./types").ToolbarModelValue) => any;
|
|
51
|
+
}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
|
|
52
|
+
$slots: {
|
|
53
|
+
[x: string]: ((props: {
|
|
54
|
+
[x: string]: unknown;
|
|
55
|
+
}) => any) | undefined;
|
|
56
|
+
} & {
|
|
57
|
+
default?: (props: {}) => any;
|
|
58
|
+
} & {
|
|
59
|
+
'expand-icon'?: (props: {}) => any;
|
|
60
|
+
} & {
|
|
61
|
+
extra?: (props: {}) => any;
|
|
62
|
+
} & {
|
|
63
|
+
'action-prepend'?: (props: {}) => any;
|
|
64
|
+
} & {
|
|
65
|
+
'action-append'?: (props: {}) => any;
|
|
66
|
+
};
|
|
67
|
+
}) & {
|
|
68
|
+
install: (app: App, options?: SDOptions) => void;
|
|
69
|
+
};
|
|
70
|
+
export type ToolbarInstance = InstanceType<typeof _Toolbar>;
|
|
71
|
+
export type { ToolbarEmits, ToolbarModelValue, ToolbarProps, ToolbarResetEventHandler, ToolbarSearchEventHandler, } from './types';
|
|
72
|
+
export default Toolbar;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { getComponentPrefix, setGlobalConfig } from "../_utils/global-config.js";
|
|
2
|
+
import toolbar_default from "./toolbar.js";
|
|
3
|
+
//#region components/toolbar/index.ts
|
|
4
|
+
var Toolbar = Object.assign(toolbar_default, { install: (app, options) => {
|
|
5
|
+
setGlobalConfig(app, options);
|
|
6
|
+
const componentPrefix = getComponentPrefix(options);
|
|
7
|
+
app.component(componentPrefix + toolbar_default.name, toolbar_default);
|
|
8
|
+
} });
|
|
9
|
+
//#endregion
|
|
10
|
+
export { Toolbar as default };
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
/******** borderSize *******/
|
|
2
|
+
/******** borderStyle *******/
|
|
3
|
+
/******** radius *******/
|
|
4
|
+
/******** shadow distance *******/
|
|
5
|
+
/******** size *******/
|
|
6
|
+
/******** spacing *******/
|
|
7
|
+
/******** shadow *******/
|
|
8
|
+
/******** opacity *******/
|
|
9
|
+
/******** fontSize *******/
|
|
10
|
+
/******** fontWeight ********/
|
|
11
|
+
/******** Primary *******/
|
|
12
|
+
/******** success *******/
|
|
13
|
+
/******** warning *******/
|
|
14
|
+
/******** danger *******/
|
|
15
|
+
/******** link *******/
|
|
16
|
+
/******** radius *******/
|
|
17
|
+
/********* icon hover *********/
|
|
18
|
+
.sd-toolbar {
|
|
19
|
+
width: 100%;
|
|
20
|
+
}
|
|
21
|
+
.sd-toolbar-inner {
|
|
22
|
+
display: flex;
|
|
23
|
+
flex-wrap: wrap;
|
|
24
|
+
gap: 12px;
|
|
25
|
+
align-items: flex-start;
|
|
26
|
+
width: 100%;
|
|
27
|
+
}
|
|
28
|
+
.sd-toolbar-with-border .sd-toolbar-inner {
|
|
29
|
+
padding-bottom: 8px;
|
|
30
|
+
border-bottom: 1px solid var(--sd-color-neutral-3);
|
|
31
|
+
}
|
|
32
|
+
.sd-toolbar-body {
|
|
33
|
+
flex: 1 1 0;
|
|
34
|
+
min-width: 0;
|
|
35
|
+
max-height: var(--toolbar-body-max-height);
|
|
36
|
+
overflow: hidden;
|
|
37
|
+
transition: max-height 0.3s ease;
|
|
38
|
+
}
|
|
39
|
+
.sd-toolbar-body--schema .sd-form {
|
|
40
|
+
display: grid;
|
|
41
|
+
flex: 1;
|
|
42
|
+
grid-template-columns: repeat(auto-fill, minmax(var(--toolbar-span-width), 1fr));
|
|
43
|
+
gap: 8px;
|
|
44
|
+
width: 100%;
|
|
45
|
+
background-color: var(--sd-color-bg-2);
|
|
46
|
+
}
|
|
47
|
+
.sd-toolbar-body--schema .sd-form > * {
|
|
48
|
+
max-width: var(--toolbar-item-max-width);
|
|
49
|
+
}
|
|
50
|
+
.sd-toolbar-body--schema .sd-form-item {
|
|
51
|
+
margin-bottom: 0;
|
|
52
|
+
}
|
|
53
|
+
.sd-toolbar-body--schema .sd-form-item-content {
|
|
54
|
+
min-height: var(--toolbar-item-height);
|
|
55
|
+
}
|
|
56
|
+
.sd-toolbar-body--max-width .sd-form {
|
|
57
|
+
grid-template-columns: repeat(auto-fill, minmax(min(var(--toolbar-item-max-width), var(--toolbar-span-width)), var(--toolbar-item-max-width)));
|
|
58
|
+
}
|
|
59
|
+
.sd-toolbar-actions {
|
|
60
|
+
display: flex;
|
|
61
|
+
flex-shrink: 0;
|
|
62
|
+
gap: 8px;
|
|
63
|
+
align-items: center;
|
|
64
|
+
align-self: flex-end;
|
|
65
|
+
white-space: nowrap;
|
|
66
|
+
}
|
|
67
|
+
.sd-toolbar-expand {
|
|
68
|
+
display: inline-flex;
|
|
69
|
+
gap: 4px;
|
|
70
|
+
align-items: center;
|
|
71
|
+
}
|
|
72
|
+
.sd-toolbar-expand-icon {
|
|
73
|
+
transition: transform 0.3s ease;
|
|
74
|
+
}
|
|
75
|
+
.sd-toolbar-expand-icon--up {
|
|
76
|
+
transform: rotate(180deg);
|
|
77
|
+
}
|
|
78
|
+
@media screen and (width <= 640px) {
|
|
79
|
+
.sd-toolbar-body--schema .sd-form {
|
|
80
|
+
grid-template-columns: minmax(0, 1fr) !important;
|
|
81
|
+
}
|
|
82
|
+
.sd-toolbar-body--schema .sd-form-item {
|
|
83
|
+
grid-column: span 1 !important;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
@use '@style/theme/index.scss' as theme;
|
|
2
|
+
@use 'sass:string';
|
|
3
|
+
@use '@components/toolbar/style/token.scss' as *;
|
|
4
|
+
|
|
5
|
+
$toolbar-prefix-cls: string.unquote('#{theme.$prefix}-toolbar');
|
|
6
|
+
|
|
7
|
+
.#{$toolbar-prefix-cls} {
|
|
8
|
+
width: 100%;
|
|
9
|
+
|
|
10
|
+
&-inner {
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-wrap: wrap;
|
|
13
|
+
gap: $toolbar-gap;
|
|
14
|
+
align-items: flex-start;
|
|
15
|
+
width: 100%;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&-with-border &-inner {
|
|
19
|
+
padding-bottom: $toolbar-padding-bottom;
|
|
20
|
+
border-bottom: $toolbar-border-width $toolbar-border-style $toolbar-color-border;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&-body {
|
|
24
|
+
flex: 1 1 0;
|
|
25
|
+
min-width: 0;
|
|
26
|
+
max-height: var(--toolbar-body-max-height);
|
|
27
|
+
overflow: hidden;
|
|
28
|
+
transition: max-height 0.3s ease;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
// Schema mode turns the underlying form into a responsive CSS grid so that
|
|
32
|
+
// filter items flow into shared rows instead of stacking one per line.
|
|
33
|
+
&-body--schema .sd-form {
|
|
34
|
+
display: grid;
|
|
35
|
+
flex: 1;
|
|
36
|
+
grid-template-columns: repeat(auto-fill, minmax(var(--toolbar-span-width), 1fr));
|
|
37
|
+
gap: $toolbar-body-gap;
|
|
38
|
+
width: 100%;
|
|
39
|
+
background-color: $toolbar-color-bg;
|
|
40
|
+
|
|
41
|
+
> * {
|
|
42
|
+
max-width: var(--toolbar-item-max-width);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
&-body--schema .sd-form-item {
|
|
47
|
+
margin-bottom: 0;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&-body--schema .sd-form-item-content {
|
|
51
|
+
min-height: var(--toolbar-item-height);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// When an explicit max item width is provided, cap each column to it.
|
|
55
|
+
&-body--max-width .sd-form {
|
|
56
|
+
grid-template-columns: repeat(
|
|
57
|
+
auto-fill,
|
|
58
|
+
minmax(
|
|
59
|
+
min(var(--toolbar-item-max-width), var(--toolbar-span-width)),
|
|
60
|
+
var(--toolbar-item-max-width)
|
|
61
|
+
)
|
|
62
|
+
);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
&-actions {
|
|
66
|
+
display: flex;
|
|
67
|
+
flex-shrink: 0;
|
|
68
|
+
gap: $toolbar-actions-gap;
|
|
69
|
+
align-items: center;
|
|
70
|
+
align-self: flex-end;
|
|
71
|
+
white-space: nowrap;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&-expand {
|
|
75
|
+
display: inline-flex;
|
|
76
|
+
gap: $toolbar-expand-gap;
|
|
77
|
+
align-items: center;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&-expand-icon {
|
|
81
|
+
transition: transform 0.3s ease;
|
|
82
|
+
|
|
83
|
+
&--up {
|
|
84
|
+
transform: rotate(180deg);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
@media screen and (width <= 640px) {
|
|
89
|
+
&-body--schema .sd-form {
|
|
90
|
+
grid-template-columns: minmax(0, 1fr) !important;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
&-body--schema .sd-form-item {
|
|
94
|
+
grid-column: span 1 !important;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
@use '@style/theme/index.scss' as global;
|
|
2
|
+
|
|
3
|
+
@forward '@style/theme/index.scss';
|
|
4
|
+
@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;
|
|
5
|
+
|
|
6
|
+
@use 'sass:string';
|
|
7
|
+
@use '@style/theme/index.scss' as *;
|
|
8
|
+
|
|
9
|
+
$toolbar-gap: global.$spacing-6;
|
|
10
|
+
|
|
11
|
+
$toolbar-body-gap: global.$spacing-4;
|
|
12
|
+
|
|
13
|
+
$toolbar-actions-gap: global.$spacing-4;
|
|
14
|
+
|
|
15
|
+
$toolbar-expand-gap: global.$spacing-2;
|
|
16
|
+
|
|
17
|
+
$toolbar-padding-bottom: global.$spacing-4;
|
|
18
|
+
|
|
19
|
+
$toolbar-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
|
|
20
|
+
|
|
21
|
+
$toolbar-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
|
|
22
|
+
|
|
23
|
+
$toolbar-border-width: global.$border-1;
|
|
24
|
+
|
|
25
|
+
$toolbar-border-style: global.$border-solid;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import toolbar_vue_vue_type_script_setup_true_lang_default from "./toolbar.vue_vue_type_script_setup_true_lang.js";
|
|
2
|
+
//#region components/toolbar/toolbar.vue
|
|
3
|
+
var toolbar_default = toolbar_vue_vue_type_script_setup_true_lang_default;
|
|
4
|
+
//#endregion
|
|
5
|
+
export { toolbar_default as default };
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import type { ToolbarModelValue, ToolbarProps } from './types';
|
|
2
|
+
type __VLS_Props = ToolbarProps;
|
|
3
|
+
declare function handleSearch(): void;
|
|
4
|
+
declare function handleReset(): void;
|
|
5
|
+
type __VLS_ModelProps = {
|
|
6
|
+
modelValue?: ToolbarModelValue;
|
|
7
|
+
};
|
|
8
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
9
|
+
declare var __VLS_7: {}, __VLS_19: string, __VLS_20: {
|
|
10
|
+
[x: string]: unknown;
|
|
11
|
+
}, __VLS_30: {}, __VLS_37: {}, __VLS_39: {}, __VLS_57: {};
|
|
12
|
+
type __VLS_Slots = {} & {
|
|
13
|
+
[K in NonNullable<typeof __VLS_19>]?: (props: typeof __VLS_20) => any;
|
|
14
|
+
} & {
|
|
15
|
+
default?: (props: typeof __VLS_7) => any;
|
|
16
|
+
} & {
|
|
17
|
+
'expand-icon'?: (props: typeof __VLS_30) => any;
|
|
18
|
+
} & {
|
|
19
|
+
extra?: (props: typeof __VLS_37) => any;
|
|
20
|
+
} & {
|
|
21
|
+
'action-prepend'?: (props: typeof __VLS_39) => any;
|
|
22
|
+
} & {
|
|
23
|
+
'action-append'?: (props: typeof __VLS_57) => any;
|
|
24
|
+
};
|
|
25
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
26
|
+
search: typeof handleSearch;
|
|
27
|
+
reset: typeof handleReset;
|
|
28
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
29
|
+
search: (params: ToolbarModelValue) => any;
|
|
30
|
+
reset: () => any;
|
|
31
|
+
"update:modelValue": (value: ToolbarModelValue) => any;
|
|
32
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
33
|
+
onSearch?: ((params: ToolbarModelValue) => any) | undefined;
|
|
34
|
+
onReset?: (() => any) | undefined;
|
|
35
|
+
"onUpdate:modelValue"?: ((value: ToolbarModelValue) => any) | undefined;
|
|
36
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
37
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
38
|
+
declare const _default: typeof __VLS_export;
|
|
39
|
+
export default _default;
|
|
40
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
41
|
+
new (): {
|
|
42
|
+
$slots: S;
|
|
43
|
+
};
|
|
44
|
+
};
|
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
|
|
2
|
+
import { getPrefixCls } from "../_utils/global-config.js";
|
|
3
|
+
import Button from "../button/index.js";
|
|
4
|
+
import Spin from "../spin/index.js";
|
|
5
|
+
import { useResizeObserver } from "../_hooks/use-resize-observer.js";
|
|
6
|
+
import IconDown from "../icon/icon-down/index.js";
|
|
7
|
+
import Link from "../link/index.js";
|
|
8
|
+
import JsonForm from "../json-form/index.js";
|
|
9
|
+
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useModel, withCtx, withKeys } from "vue";
|
|
10
|
+
import { cloneDeep, omit } from "es-toolkit";
|
|
11
|
+
//#region components/toolbar/toolbar.vue?vue&type=script&setup=true&lang.ts
|
|
12
|
+
var toolbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "Toolbar" }), {}, {
|
|
13
|
+
__name: "toolbar",
|
|
14
|
+
props: /*@__PURE__*/ mergeModels({
|
|
15
|
+
schemas: { default: () => [] },
|
|
16
|
+
loading: {
|
|
17
|
+
type: Boolean,
|
|
18
|
+
default: false
|
|
19
|
+
},
|
|
20
|
+
showSearch: {
|
|
21
|
+
type: Boolean,
|
|
22
|
+
default: true
|
|
23
|
+
},
|
|
24
|
+
showReset: {
|
|
25
|
+
type: Boolean,
|
|
26
|
+
default: true
|
|
27
|
+
},
|
|
28
|
+
showActions: {
|
|
29
|
+
type: Boolean,
|
|
30
|
+
default: true
|
|
31
|
+
},
|
|
32
|
+
searchText: { default: "查询" },
|
|
33
|
+
resetText: { default: "重置" },
|
|
34
|
+
expandText: { default: "展开" },
|
|
35
|
+
collapseText: { default: "收起" },
|
|
36
|
+
allowExpand: {
|
|
37
|
+
type: Boolean,
|
|
38
|
+
default: false
|
|
39
|
+
},
|
|
40
|
+
defaultExpand: {
|
|
41
|
+
type: Boolean,
|
|
42
|
+
default: false
|
|
43
|
+
},
|
|
44
|
+
itemHeight: { default: 32 },
|
|
45
|
+
spanWidth: { default: 230 },
|
|
46
|
+
itemMaxWidth: { default: "unset" },
|
|
47
|
+
showBorderBottom: {
|
|
48
|
+
type: Boolean,
|
|
49
|
+
default: true
|
|
50
|
+
},
|
|
51
|
+
resetSkipKeys: { default: () => [] }
|
|
52
|
+
}, {
|
|
53
|
+
"modelValue": { default: () => ({}) },
|
|
54
|
+
"modelModifiers": {}
|
|
55
|
+
}),
|
|
56
|
+
emits: /*@__PURE__*/ mergeModels(["search", "reset"], ["update:modelValue"]),
|
|
57
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
58
|
+
var _modelValue$value;
|
|
59
|
+
const emit = __emit;
|
|
60
|
+
/**
|
|
61
|
+
* @zh 表单数据对象(v-model)
|
|
62
|
+
* @en Form data object (v-model)
|
|
63
|
+
*/
|
|
64
|
+
const modelValue = useModel(__props, "modelValue");
|
|
65
|
+
const prefixCls = getPrefixCls("toolbar");
|
|
66
|
+
const bodyRef = ref();
|
|
67
|
+
const formRef = ref();
|
|
68
|
+
const isExpand = ref(__props.defaultExpand);
|
|
69
|
+
const isOverflow = ref(false);
|
|
70
|
+
const bodyHeight = ref(0);
|
|
71
|
+
const initModel = cloneDeep((_modelValue$value = modelValue.value) !== null && _modelValue$value !== void 0 ? _modelValue$value : {});
|
|
72
|
+
const { createResizeObserver, destroyResizeObserver } = useResizeObserver({
|
|
73
|
+
elementRef: bodyRef,
|
|
74
|
+
onResize: (entry) => {
|
|
75
|
+
const fullHeight = entry.target.scrollHeight;
|
|
76
|
+
bodyHeight.value = fullHeight;
|
|
77
|
+
isOverflow.value = fullHeight > __props.itemHeight;
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
onMounted(createResizeObserver);
|
|
81
|
+
onBeforeUnmount(destroyResizeObserver);
|
|
82
|
+
const resolvedSchemas = computed(() => __props.schemas.map((schema) => {
|
|
83
|
+
var _schema$formItemProps, _schema$formItemProps2;
|
|
84
|
+
const span = typeof schema.span === "number" && schema.span > 0 ? schema.span : 1;
|
|
85
|
+
const baseStyle = (_schema$formItemProps = (_schema$formItemProps2 = schema.formItemProps) === null || _schema$formItemProps2 === void 0 ? void 0 : _schema$formItemProps2.style) !== null && _schema$formItemProps !== void 0 ? _schema$formItemProps : {};
|
|
86
|
+
return _objectSpread2(_objectSpread2({}, schema), {}, { formItemProps: _objectSpread2(_objectSpread2({}, schema.formItemProps), {}, { style: _objectSpread2({ gridColumn: `span ${span}` }, baseStyle) }) });
|
|
87
|
+
}));
|
|
88
|
+
const schemaSlotNames = computed(() => {
|
|
89
|
+
const names = /* @__PURE__ */ new Set();
|
|
90
|
+
const walk = (list) => {
|
|
91
|
+
for (const item of list) {
|
|
92
|
+
var _item$children;
|
|
93
|
+
if (typeof item.slotName === "string") names.add(item.slotName);
|
|
94
|
+
if ((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) walk(item.children);
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
walk(__props.schemas);
|
|
98
|
+
return [...names];
|
|
99
|
+
});
|
|
100
|
+
const bodyMaxHeight = computed(() => {
|
|
101
|
+
if (!__props.allowExpand) return "none";
|
|
102
|
+
return isExpand.value ? `${bodyHeight.value}px` : `${__props.itemHeight}px`;
|
|
103
|
+
});
|
|
104
|
+
const styleVars = computed(() => ({
|
|
105
|
+
"--toolbar-item-height": `${__props.itemHeight}px`,
|
|
106
|
+
"--toolbar-span-width": `${__props.spanWidth}px`,
|
|
107
|
+
"--toolbar-item-max-width": __props.itemMaxWidth,
|
|
108
|
+
"--toolbar-body-max-height": bodyMaxHeight.value
|
|
109
|
+
}));
|
|
110
|
+
const cls = computed(() => [prefixCls, { [`${prefixCls}-with-border`]: __props.showBorderBottom }]);
|
|
111
|
+
const bodyCls = computed(() => [`${prefixCls}-body`, {
|
|
112
|
+
[`${prefixCls}-body--schema`]: resolvedSchemas.value.length > 0,
|
|
113
|
+
[`${prefixCls}-body--max-width`]: __props.itemMaxWidth !== "unset"
|
|
114
|
+
}]);
|
|
115
|
+
function handleSearch() {
|
|
116
|
+
emit("search", modelValue.value);
|
|
117
|
+
}
|
|
118
|
+
function handleReset() {
|
|
119
|
+
var _formRef$value;
|
|
120
|
+
const initMinusSkip = omit(initModel, __props.resetSkipKeys);
|
|
121
|
+
const next = {};
|
|
122
|
+
for (const key of __props.resetSkipKeys) if (Object.hasOwn(modelValue.value, key)) next[key] = modelValue.value[key];
|
|
123
|
+
for (const key of Object.keys(initMinusSkip)) next[key] = initMinusSkip[key];
|
|
124
|
+
modelValue.value = next;
|
|
125
|
+
(_formRef$value = formRef.value) === null || _formRef$value === void 0 || _formRef$value.clearValidate();
|
|
126
|
+
emit("reset");
|
|
127
|
+
}
|
|
128
|
+
function toggleExpand() {
|
|
129
|
+
isExpand.value = !isExpand.value;
|
|
130
|
+
}
|
|
131
|
+
__expose({
|
|
132
|
+
search: handleSearch,
|
|
133
|
+
reset: handleReset
|
|
134
|
+
});
|
|
135
|
+
return (_ctx, _cache) => {
|
|
136
|
+
return openBlock(), createElementBlock("div", {
|
|
137
|
+
class: normalizeClass(cls.value),
|
|
138
|
+
style: normalizeStyle(styleVars.value),
|
|
139
|
+
onKeydown: withKeys(handleSearch, ["enter"])
|
|
140
|
+
}, [createVNode(unref(Spin), {
|
|
141
|
+
loading: __props.loading,
|
|
142
|
+
class: normalizeClass(`${unref(prefixCls)}-inner`)
|
|
143
|
+
}, {
|
|
144
|
+
default: withCtx(() => [createElementVNode("div", {
|
|
145
|
+
ref_key: "bodyRef",
|
|
146
|
+
ref: bodyRef,
|
|
147
|
+
class: normalizeClass(bodyCls.value)
|
|
148
|
+
}, [_ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : resolvedSchemas.value.length ? (openBlock(), createBlock(unref(JsonForm), {
|
|
149
|
+
key: 1,
|
|
150
|
+
ref_key: "formRef",
|
|
151
|
+
ref: formRef,
|
|
152
|
+
modelValue: modelValue.value,
|
|
153
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
|
|
154
|
+
schemas: resolvedSchemas.value,
|
|
155
|
+
"hide-label": "",
|
|
156
|
+
"hide-asterisk": ""
|
|
157
|
+
}, createSlots({ _: 2 }, [renderList(schemaSlotNames.value, (name) => {
|
|
158
|
+
return {
|
|
159
|
+
name,
|
|
160
|
+
fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps)))])
|
|
161
|
+
};
|
|
162
|
+
})]), 1032, ["modelValue", "schemas"])) : createCommentVNode("", true)], 2), __props.showActions ? (openBlock(), createElementBlock("div", {
|
|
163
|
+
key: 0,
|
|
164
|
+
class: normalizeClass(`${unref(prefixCls)}-actions`)
|
|
165
|
+
}, [__props.allowExpand && isOverflow.value ? (openBlock(), createBlock(unref(Link), {
|
|
166
|
+
key: 0,
|
|
167
|
+
class: normalizeClass(`${unref(prefixCls)}-expand`),
|
|
168
|
+
onClick: toggleExpand
|
|
169
|
+
}, {
|
|
170
|
+
default: withCtx(() => [createElementVNode("span", { class: normalizeClass(`${unref(prefixCls)}-expand-text`) }, toDisplayString(isExpand.value ? __props.collapseText : __props.expandText), 3), renderSlot(_ctx.$slots, "expand-icon", {}, () => [createVNode(unref(IconDown), { class: normalizeClass([`${unref(prefixCls)}-expand-icon`, { [`${unref(prefixCls)}-expand-icon--up`]: isExpand.value }]) }, null, 8, ["class"])])]),
|
|
171
|
+
_: 3
|
|
172
|
+
}, 8, ["class"])) : createCommentVNode("", true), _ctx.$slots.extra ? renderSlot(_ctx.$slots, "extra", { key: 1 }) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
|
|
173
|
+
renderSlot(_ctx.$slots, "action-prepend"),
|
|
174
|
+
__props.showSearch ? (openBlock(), createBlock(unref(Button), {
|
|
175
|
+
key: 0,
|
|
176
|
+
type: "primary",
|
|
177
|
+
onClick: handleSearch
|
|
178
|
+
}, {
|
|
179
|
+
default: withCtx(() => [createTextVNode(toDisplayString(__props.searchText), 1)]),
|
|
180
|
+
_: 1
|
|
181
|
+
})) : createCommentVNode("", true),
|
|
182
|
+
__props.showReset ? (openBlock(), createBlock(unref(Button), {
|
|
183
|
+
key: 1,
|
|
184
|
+
onClick: handleReset
|
|
185
|
+
}, {
|
|
186
|
+
default: withCtx(() => [createTextVNode(toDisplayString(__props.resetText), 1)]),
|
|
187
|
+
_: 1
|
|
188
|
+
})) : createCommentVNode("", true),
|
|
189
|
+
renderSlot(_ctx.$slots, "action-append")
|
|
190
|
+
], 64))], 2)) : createCommentVNode("", true)]),
|
|
191
|
+
_: 3
|
|
192
|
+
}, 8, ["loading", "class"])], 38);
|
|
193
|
+
};
|
|
194
|
+
}
|
|
195
|
+
}));
|
|
196
|
+
//#endregion
|
|
197
|
+
export { toolbar_vue_vue_type_script_setup_true_lang_default as default };
|