@sdata/web-vue 4.0.0 → 4.2.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/dist/sd.css +189 -0
- package/dist/sd.min.css +2 -2
- package/es/badge/badge.vue.d.ts +2 -0
- package/es/badge/badge.vue_vue_type_script_setup_true_lang.js +19 -4
- package/es/badge/index.d.ts +3 -0
- package/es/bloom-menu/bloom-menu.js +5 -0
- package/es/bloom-menu/bloom-menu.vue.d.ts +52 -0
- package/es/bloom-menu/bloom-menu.vue_vue_type_script_setup_true_lang.js +380 -0
- package/es/bloom-menu/index.d.ts +6 -0
- package/es/bloom-menu/index.js +10 -0
- package/es/bloom-menu/style/css.js +2 -0
- package/es/bloom-menu/style/index.css +135 -0
- package/es/bloom-menu/style/index.d.ts +2 -0
- package/es/bloom-menu/style/index.js +2 -0
- package/es/bloom-menu/style/index.scss +153 -0
- package/es/bloom-menu/style/token.scss +24 -0
- package/es/bloom-menu/types.d.ts +11 -0
- package/es/components.d.ts +3 -0
- package/es/index.css +189 -0
- package/es/index.d.ts +4 -0
- package/es/index.js +5 -1
- package/es/index.scss +2 -0
- package/es/locale/interface.d.ts +2 -0
- package/es/locale/lang/en-us.js +2 -0
- package/es/locale/lang/zh-cn.js +2 -0
- package/es/number-flow/continuous.d.ts +2 -0
- package/es/number-flow/continuous.js +7 -0
- package/es/number-flow/formatter.d.ts +15 -0
- package/es/number-flow/formatter.js +54 -0
- package/es/number-flow/group-key.d.ts +11 -0
- package/es/number-flow/group-key.js +4 -0
- package/es/number-flow/index.d.ts +63 -0
- package/es/number-flow/index.js +15 -0
- package/es/number-flow/number-flow-group.js +5 -0
- package/es/number-flow/number-flow-group.vue.d.ts +12 -0
- package/es/number-flow/number-flow-group.vue_vue_type_script_setup_true_lang.js +58 -0
- package/es/number-flow/number-flow.js +5 -0
- package/es/number-flow/number-flow.vue.d.ts +20 -0
- package/es/number-flow/number-flow.vue_vue_type_script_setup_true_lang.js +284 -0
- package/es/number-flow/style/css.js +2 -0
- package/es/number-flow/style/index.css +85 -0
- package/es/number-flow/style/index.d.ts +2 -0
- package/es/number-flow/style/index.js +2 -0
- package/es/number-flow/style/index.scss +93 -0
- package/es/number-flow/style/token.scss +5 -0
- package/es/number-flow/types.d.ts +46 -0
- package/es/number-flow/use-can-animate.d.ts +4 -0
- package/es/number-flow/use-can-animate.js +30 -0
- package/es/rich-text-editor/index.d.ts +3 -3
- package/es/rich-text-editor/rich-text-editor.vue.d.ts +1 -1
- package/es/sd-vue.js +5 -0
- package/es/statistic/countdown.vue.d.ts +9 -0
- package/es/statistic/countdown.vue_vue_type_script_setup_true_lang.js +29 -2
- package/es/statistic/index.d.ts +15 -0
- package/es/statistic/statistic.vue.d.ts +3 -3
- package/es/statistic/statistic.vue_vue_type_script_setup_true_lang.js +31 -62
- package/es/statistic/style/index.css +3 -0
- package/es/statistic/style/index.scss +5 -0
- package/json/vetur-attributes.json +8 -0
- package/json/vetur-tags.json +12 -1
- package/json/web-types.json +35 -1
- package/package.json +1 -1
|
@@ -0,0 +1,135 @@
|
|
|
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-bloom-menu {
|
|
19
|
+
display: inline-flex;
|
|
20
|
+
font-family: inter, "-apple-system", blinkmacsystemfont, "PingFang SC", "Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue", helvetica, arial, sans-serif;
|
|
21
|
+
}
|
|
22
|
+
.sd-bloom-menu-trigger-content {
|
|
23
|
+
display: inline-flex;
|
|
24
|
+
gap: 8px;
|
|
25
|
+
align-items: center;
|
|
26
|
+
white-space: nowrap;
|
|
27
|
+
}
|
|
28
|
+
.sd-bloom-menu-trigger-content svg {
|
|
29
|
+
width: 16px;
|
|
30
|
+
height: 16px;
|
|
31
|
+
}
|
|
32
|
+
.sd-bloom-menu-panel {
|
|
33
|
+
--bloom-menu-panel-width: min(86vw, 420px);
|
|
34
|
+
--bloom-menu-panel-color: var(--sd-color-text-1);
|
|
35
|
+
--bloom-menu-panel-background: var(--sd-color-bg-2);
|
|
36
|
+
--bloom-menu-panel-border-color: var(--sd-color-neutral-3);
|
|
37
|
+
--bloom-menu-panel-border-radius: var(--sd-border-radius-medium);
|
|
38
|
+
--bloom-menu-panel-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
39
|
+
overflow: hidden;
|
|
40
|
+
border: 1px solid var(--sd-color-neutral-3);
|
|
41
|
+
}
|
|
42
|
+
.sd-bloom-menu-popup {
|
|
43
|
+
padding: 0;
|
|
44
|
+
}
|
|
45
|
+
.sd-bloom-menu-content {
|
|
46
|
+
width: 100%;
|
|
47
|
+
}
|
|
48
|
+
.sd-bloom-menu-header {
|
|
49
|
+
display: flex;
|
|
50
|
+
align-items: center;
|
|
51
|
+
justify-content: space-between;
|
|
52
|
+
padding: 12px 16px;
|
|
53
|
+
color: var(--sd-color-text-2);
|
|
54
|
+
border-bottom: 1px solid var(--sd-color-neutral-3);
|
|
55
|
+
}
|
|
56
|
+
.sd-bloom-menu-title {
|
|
57
|
+
font-weight: 500;
|
|
58
|
+
font-size: 14px;
|
|
59
|
+
}
|
|
60
|
+
.sd-bloom-menu-close {
|
|
61
|
+
color: inherit;
|
|
62
|
+
}
|
|
63
|
+
.sd-bloom-menu-close:hover {
|
|
64
|
+
color: var(--sd-color-text-1);
|
|
65
|
+
}
|
|
66
|
+
.sd-bloom-menu-close svg {
|
|
67
|
+
width: 16px;
|
|
68
|
+
height: 16px;
|
|
69
|
+
}
|
|
70
|
+
.sd-bloom-menu-grid {
|
|
71
|
+
display: grid;
|
|
72
|
+
grid-template-columns: repeat(var(--bloom-menu-columns), minmax(0, 1fr));
|
|
73
|
+
}
|
|
74
|
+
.sd-bloom-menu-item {
|
|
75
|
+
min-width: 0;
|
|
76
|
+
height: auto;
|
|
77
|
+
padding: 24px 12px;
|
|
78
|
+
color: var(--sd-color-text-2);
|
|
79
|
+
border-radius: 0;
|
|
80
|
+
}
|
|
81
|
+
.sd-bloom-menu-item:hover:not(:disabled) {
|
|
82
|
+
color: var(--sd-color-text-1);
|
|
83
|
+
background: var(--sd-color-fill-2);
|
|
84
|
+
}
|
|
85
|
+
.sd-bloom-menu-item:focus-visible {
|
|
86
|
+
position: relative;
|
|
87
|
+
z-index: 1;
|
|
88
|
+
outline: 2px solid rgb(var(--sd-primary-6));
|
|
89
|
+
outline-offset: -2px;
|
|
90
|
+
}
|
|
91
|
+
.sd-bloom-menu-item-border-right {
|
|
92
|
+
border-right: 1px solid var(--sd-color-neutral-3);
|
|
93
|
+
}
|
|
94
|
+
.sd-bloom-menu-item-border-bottom {
|
|
95
|
+
border-bottom: 1px solid var(--sd-color-neutral-3);
|
|
96
|
+
}
|
|
97
|
+
.sd-bloom-menu-item-disabled, .sd-bloom-menu-item:disabled {
|
|
98
|
+
color: var(--sd-color-text-4);
|
|
99
|
+
cursor: not-allowed;
|
|
100
|
+
}
|
|
101
|
+
.sd-bloom-menu-item-content {
|
|
102
|
+
display: flex;
|
|
103
|
+
flex-direction: column;
|
|
104
|
+
gap: 8px;
|
|
105
|
+
align-items: center;
|
|
106
|
+
min-width: 0;
|
|
107
|
+
}
|
|
108
|
+
.sd-bloom-menu-item-icon {
|
|
109
|
+
display: inline-flex;
|
|
110
|
+
font-size: 20px;
|
|
111
|
+
}
|
|
112
|
+
.sd-bloom-menu-item-icon svg {
|
|
113
|
+
width: 20px;
|
|
114
|
+
height: 20px;
|
|
115
|
+
}
|
|
116
|
+
.sd-bloom-menu-item-label {
|
|
117
|
+
max-width: 100%;
|
|
118
|
+
overflow: hidden;
|
|
119
|
+
font-weight: 500;
|
|
120
|
+
font-size: 14px;
|
|
121
|
+
white-space: nowrap;
|
|
122
|
+
text-overflow: ellipsis;
|
|
123
|
+
}
|
|
124
|
+
.sd-bloom-menu-empty {
|
|
125
|
+
padding: 24px 16px;
|
|
126
|
+
color: var(--sd-color-text-2);
|
|
127
|
+
font-size: 14px;
|
|
128
|
+
text-align: center;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
@media (prefers-reduced-motion: reduce) {
|
|
132
|
+
.sd-bloom-menu-item, .sd-bloom-menu-close {
|
|
133
|
+
transition: none;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
@use '@style/theme/index.scss' as theme;
|
|
2
|
+
@use 'sass:string';
|
|
3
|
+
@use '@components/bloom-menu/style/token.scss' as *;
|
|
4
|
+
|
|
5
|
+
$bloom-menu-prefix-cls: string.unquote('#{theme.$prefix}-bloom-menu');
|
|
6
|
+
|
|
7
|
+
.#{$bloom-menu-prefix-cls} {
|
|
8
|
+
display: inline-flex;
|
|
9
|
+
font-family: theme.$font-family;
|
|
10
|
+
|
|
11
|
+
// 触发按钮的默认尺寸与字重由组件以 buttonProps 默认值(行内样式)提供,
|
|
12
|
+
// 避免 class 硬编码压过用户传入的 size/shape 等尺寸类
|
|
13
|
+
&-trigger-content {
|
|
14
|
+
display: inline-flex;
|
|
15
|
+
gap: $bloom-menu-item-gap;
|
|
16
|
+
align-items: center;
|
|
17
|
+
white-space: nowrap;
|
|
18
|
+
|
|
19
|
+
svg {
|
|
20
|
+
width: theme.$size-4;
|
|
21
|
+
height: theme.$size-4;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&-panel {
|
|
26
|
+
--bloom-menu-panel-width: #{$bloom-menu-panel-width};
|
|
27
|
+
--bloom-menu-panel-color: #{$bloom-menu-text-color};
|
|
28
|
+
--bloom-menu-panel-background: #{$bloom-menu-background};
|
|
29
|
+
--bloom-menu-panel-border-color: #{$bloom-menu-border-color};
|
|
30
|
+
--bloom-menu-panel-border-radius: #{theme.$radius-medium};
|
|
31
|
+
--bloom-menu-panel-shadow: #{$bloom-menu-shadow};
|
|
32
|
+
|
|
33
|
+
overflow: hidden;
|
|
34
|
+
border: $bloom-menu-border-width $bloom-menu-border-style $bloom-menu-border-color;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&-popup {
|
|
38
|
+
padding: 0;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&-content {
|
|
42
|
+
width: 100%;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&-header {
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
justify-content: space-between;
|
|
49
|
+
padding: $bloom-menu-header-padding-block $bloom-menu-header-padding-inline;
|
|
50
|
+
color: $bloom-menu-muted-color;
|
|
51
|
+
border-bottom: $bloom-menu-border-width $bloom-menu-border-style $bloom-menu-border-color;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&-title {
|
|
55
|
+
font-weight: $bloom-menu-font-weight;
|
|
56
|
+
font-size: $bloom-menu-font-size;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&-close {
|
|
60
|
+
color: inherit;
|
|
61
|
+
|
|
62
|
+
&:hover {
|
|
63
|
+
color: $bloom-menu-text-color;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
svg {
|
|
67
|
+
width: theme.$size-4;
|
|
68
|
+
height: theme.$size-4;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&-grid {
|
|
73
|
+
display: grid;
|
|
74
|
+
grid-template-columns: repeat(var(--bloom-menu-columns), minmax(0, 1fr));
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
&-item {
|
|
78
|
+
min-width: 0;
|
|
79
|
+
height: auto;
|
|
80
|
+
padding: $bloom-menu-item-padding-block $bloom-menu-item-padding-inline;
|
|
81
|
+
color: $bloom-menu-muted-color;
|
|
82
|
+
border-radius: 0;
|
|
83
|
+
|
|
84
|
+
&:hover:not(:disabled) {
|
|
85
|
+
color: $bloom-menu-text-color;
|
|
86
|
+
background: $bloom-menu-hover-background;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
&:focus-visible {
|
|
90
|
+
position: relative;
|
|
91
|
+
z-index: 1;
|
|
92
|
+
outline: 2px solid theme.$color-primary-6;
|
|
93
|
+
outline-offset: -2px;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
&-border-right {
|
|
97
|
+
border-right: $bloom-menu-border-width $bloom-menu-border-style $bloom-menu-border-color;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&-border-bottom {
|
|
101
|
+
border-bottom: $bloom-menu-border-width $bloom-menu-border-style $bloom-menu-border-color;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
&-disabled,
|
|
105
|
+
&:disabled {
|
|
106
|
+
color: $bloom-menu-disabled-color;
|
|
107
|
+
cursor: not-allowed;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
&-item-content {
|
|
112
|
+
display: flex;
|
|
113
|
+
flex-direction: column;
|
|
114
|
+
gap: $bloom-menu-item-gap;
|
|
115
|
+
align-items: center;
|
|
116
|
+
min-width: 0;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
&-item-icon {
|
|
120
|
+
display: inline-flex;
|
|
121
|
+
font-size: $bloom-menu-icon-size;
|
|
122
|
+
|
|
123
|
+
svg {
|
|
124
|
+
width: $bloom-menu-icon-size;
|
|
125
|
+
height: $bloom-menu-icon-size;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
&-item-label {
|
|
130
|
+
max-width: 100%;
|
|
131
|
+
overflow: hidden;
|
|
132
|
+
font-weight: $bloom-menu-font-weight;
|
|
133
|
+
font-size: $bloom-menu-font-size;
|
|
134
|
+
white-space: nowrap;
|
|
135
|
+
text-overflow: ellipsis;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
&-empty {
|
|
139
|
+
padding: $bloom-menu-item-padding-block $bloom-menu-header-padding-inline;
|
|
140
|
+
color: $bloom-menu-muted-color;
|
|
141
|
+
font-size: $bloom-menu-font-size;
|
|
142
|
+
text-align: center;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
@media (prefers-reduced-motion: reduce) {
|
|
147
|
+
.#{$bloom-menu-prefix-cls} {
|
|
148
|
+
&-item,
|
|
149
|
+
&-close {
|
|
150
|
+
transition: none;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
@use '@style/theme/index.scss' as global;
|
|
2
|
+
@use 'sass:string';
|
|
3
|
+
|
|
4
|
+
@forward '@style/theme/index.scss';
|
|
5
|
+
@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;
|
|
6
|
+
|
|
7
|
+
$bloom-menu-panel-width: min(86vw, 420px);
|
|
8
|
+
$bloom-menu-border-width: global.$border-1;
|
|
9
|
+
$bloom-menu-border-style: global.$border-solid;
|
|
10
|
+
$bloom-menu-border-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
|
|
11
|
+
$bloom-menu-background: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
|
|
12
|
+
$bloom-menu-text-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
|
|
13
|
+
$bloom-menu-muted-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
|
|
14
|
+
$bloom-menu-hover-background: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
|
|
15
|
+
$bloom-menu-disabled-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
|
|
16
|
+
$bloom-menu-header-padding-block: global.$spacing-6;
|
|
17
|
+
$bloom-menu-header-padding-inline: global.$spacing-7;
|
|
18
|
+
$bloom-menu-item-padding-block: global.$spacing-9;
|
|
19
|
+
$bloom-menu-item-padding-inline: global.$spacing-6;
|
|
20
|
+
$bloom-menu-item-gap: global.$spacing-4;
|
|
21
|
+
$bloom-menu-font-size: global.$font-size-body-3;
|
|
22
|
+
$bloom-menu-font-weight: global.$font-weight-500;
|
|
23
|
+
$bloom-menu-icon-size: global.$size-5;
|
|
24
|
+
$bloom-menu-shadow: global.$shadow2-down;
|
package/es/components.d.ts
CHANGED
|
@@ -14,6 +14,7 @@ declare module 'vue' {
|
|
|
14
14
|
SdAvatarGroup: SDVue['AvatarGroup'];
|
|
15
15
|
SdBackTop: SDVue['BackTop'];
|
|
16
16
|
SdBorderBeam: SDVue['BorderBeam'];
|
|
17
|
+
SdBloomMenu: SDVue['BloomMenu'];
|
|
17
18
|
SdBadge: SDVue['Badge'];
|
|
18
19
|
SdBasicCrudTable: SDVue['BasicCrudTable'];
|
|
19
20
|
SdBreadcrumb: SDVue['Breadcrumb'];
|
|
@@ -104,6 +105,8 @@ declare module 'vue' {
|
|
|
104
105
|
SdModelSelectorSeparator: SDVue['ModelSelectorSeparator'];
|
|
105
106
|
SdModelSelectorShortcut: SDVue['ModelSelectorShortcut'];
|
|
106
107
|
SdModelSelectorTrigger: SDVue['ModelSelectorTrigger'];
|
|
108
|
+
SdNumberFlow: SDVue['NumberFlow'];
|
|
109
|
+
SdNumberFlowGroup: SDVue['NumberFlowGroup'];
|
|
107
110
|
SdPageHeader: SDVue['PageHeader'];
|
|
108
111
|
SdPagination: SDVue['Pagination'];
|
|
109
112
|
SdPopconfirm: SDVue['Popconfirm'];
|
package/es/index.css
CHANGED
|
@@ -7938,6 +7938,9 @@ body.sd-tour-active .sd-tour-popover * {
|
|
|
7938
7938
|
font-size: inherit;
|
|
7939
7939
|
white-space: nowrap;
|
|
7940
7940
|
}
|
|
7941
|
+
.sd-statistic-content .sd-statistic-value .sd-number-flow-fraction {
|
|
7942
|
+
font-size: inherit;
|
|
7943
|
+
}
|
|
7941
7944
|
.sd-statistic-content .sd-statistic-value-decimal {
|
|
7942
7945
|
display: inline-block;
|
|
7943
7946
|
font-size: inherit;
|
|
@@ -10515,6 +10518,74 @@ body.sd-tour-active .sd-tour-popover * {
|
|
|
10515
10518
|
transition: height 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), margin 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), padding 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), opacity 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
|
|
10516
10519
|
}
|
|
10517
10520
|
|
|
10521
|
+
.sd-number-flow {
|
|
10522
|
+
display: inline-flex;
|
|
10523
|
+
align-items: baseline;
|
|
10524
|
+
line-height: 1;
|
|
10525
|
+
direction: ltr;
|
|
10526
|
+
white-space: nowrap;
|
|
10527
|
+
isolation: isolate;
|
|
10528
|
+
}
|
|
10529
|
+
.sd-number-flow-content, .sd-number-flow-part, .sd-number-flow-digit-track, .sd-number-flow-digit-value, .sd-number-flow-symbol {
|
|
10530
|
+
display: inline-block;
|
|
10531
|
+
}
|
|
10532
|
+
.sd-number-flow-content {
|
|
10533
|
+
margin: -0.25em -0.2em;
|
|
10534
|
+
padding: 0.25em 0.2em;
|
|
10535
|
+
overflow: hidden;
|
|
10536
|
+
}
|
|
10537
|
+
.sd-number-flow-part {
|
|
10538
|
+
position: relative;
|
|
10539
|
+
vertical-align: bottom;
|
|
10540
|
+
}
|
|
10541
|
+
.sd-number-flow-digit {
|
|
10542
|
+
height: 1em;
|
|
10543
|
+
overflow: hidden;
|
|
10544
|
+
}
|
|
10545
|
+
.sd-number-flow-digit-track {
|
|
10546
|
+
display: flex;
|
|
10547
|
+
flex-direction: column;
|
|
10548
|
+
height: 1em;
|
|
10549
|
+
transform: translateY(calc(1em * var(--sd-number-flow-start)));
|
|
10550
|
+
}
|
|
10551
|
+
.sd-number-flow-digit-value {
|
|
10552
|
+
flex: 0 0 1em;
|
|
10553
|
+
height: 1em;
|
|
10554
|
+
line-height: 1;
|
|
10555
|
+
text-align: center;
|
|
10556
|
+
font-variant-numeric: tabular-nums;
|
|
10557
|
+
}
|
|
10558
|
+
.sd-number-flow-prepared .sd-number-flow-digit-track {
|
|
10559
|
+
transition: none;
|
|
10560
|
+
}
|
|
10561
|
+
.sd-number-flow-animating .sd-number-flow-digit-track {
|
|
10562
|
+
transform: translateY(calc(1em * var(--sd-number-flow-end)));
|
|
10563
|
+
transition: transform var(--sd-number-flow-spin-duration, var(--sd-number-flow-duration)) var(--sd-number-flow-spin-easing, var(--sd-number-flow-easing)), opacity var(--sd-number-flow-opacity-duration) ease-out;
|
|
10564
|
+
}
|
|
10565
|
+
.sd-number-flow-symbol {
|
|
10566
|
+
white-space: pre;
|
|
10567
|
+
}
|
|
10568
|
+
.sd-number-flow-will-change :is(.sd-number-flow-content, .sd-number-flow-part, .sd-number-flow-digit-track, .sd-number-flow-symbol) {
|
|
10569
|
+
will-change: transform;
|
|
10570
|
+
}
|
|
10571
|
+
.sd-number-flow-custom-prefix {
|
|
10572
|
+
margin-right: 4px;
|
|
10573
|
+
}
|
|
10574
|
+
.sd-number-flow-custom-suffix {
|
|
10575
|
+
margin-left: 4px;
|
|
10576
|
+
}
|
|
10577
|
+
|
|
10578
|
+
.sd-number-flow-group {
|
|
10579
|
+
display: inline-flex;
|
|
10580
|
+
gap: 4px;
|
|
10581
|
+
align-items: baseline;
|
|
10582
|
+
}
|
|
10583
|
+
|
|
10584
|
+
@media (prefers-reduced-motion: reduce) {
|
|
10585
|
+
.sd-number-flow-digit-track {
|
|
10586
|
+
transition: none;
|
|
10587
|
+
}
|
|
10588
|
+
}
|
|
10518
10589
|
.sd-modal-container {
|
|
10519
10590
|
position: fixed;
|
|
10520
10591
|
inset: 0;
|
|
@@ -21932,6 +22003,124 @@ body.sd-tour-active .sd-tour-popover * {
|
|
|
21932
22003
|
display: inline-flex;
|
|
21933
22004
|
}
|
|
21934
22005
|
|
|
22006
|
+
.sd-bloom-menu {
|
|
22007
|
+
display: inline-flex;
|
|
22008
|
+
font-family: inter, "-apple-system", blinkmacsystemfont, "PingFang SC", "Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue", helvetica, arial, sans-serif;
|
|
22009
|
+
}
|
|
22010
|
+
.sd-bloom-menu-trigger-content {
|
|
22011
|
+
display: inline-flex;
|
|
22012
|
+
gap: 8px;
|
|
22013
|
+
align-items: center;
|
|
22014
|
+
white-space: nowrap;
|
|
22015
|
+
}
|
|
22016
|
+
.sd-bloom-menu-trigger-content svg {
|
|
22017
|
+
width: 16px;
|
|
22018
|
+
height: 16px;
|
|
22019
|
+
}
|
|
22020
|
+
.sd-bloom-menu-panel {
|
|
22021
|
+
--bloom-menu-panel-width: min(86vw, 420px);
|
|
22022
|
+
--bloom-menu-panel-color: var(--sd-color-text-1);
|
|
22023
|
+
--bloom-menu-panel-background: var(--sd-color-bg-2);
|
|
22024
|
+
--bloom-menu-panel-border-color: var(--sd-color-neutral-3);
|
|
22025
|
+
--bloom-menu-panel-border-radius: var(--sd-border-radius-medium);
|
|
22026
|
+
--bloom-menu-panel-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
22027
|
+
overflow: hidden;
|
|
22028
|
+
border: 1px solid var(--sd-color-neutral-3);
|
|
22029
|
+
}
|
|
22030
|
+
.sd-bloom-menu-popup {
|
|
22031
|
+
padding: 0;
|
|
22032
|
+
}
|
|
22033
|
+
.sd-bloom-menu-content {
|
|
22034
|
+
width: 100%;
|
|
22035
|
+
}
|
|
22036
|
+
.sd-bloom-menu-header {
|
|
22037
|
+
display: flex;
|
|
22038
|
+
align-items: center;
|
|
22039
|
+
justify-content: space-between;
|
|
22040
|
+
padding: 12px 16px;
|
|
22041
|
+
color: var(--sd-color-text-2);
|
|
22042
|
+
border-bottom: 1px solid var(--sd-color-neutral-3);
|
|
22043
|
+
}
|
|
22044
|
+
.sd-bloom-menu-title {
|
|
22045
|
+
font-weight: 500;
|
|
22046
|
+
font-size: 14px;
|
|
22047
|
+
}
|
|
22048
|
+
.sd-bloom-menu-close {
|
|
22049
|
+
color: inherit;
|
|
22050
|
+
}
|
|
22051
|
+
.sd-bloom-menu-close:hover {
|
|
22052
|
+
color: var(--sd-color-text-1);
|
|
22053
|
+
}
|
|
22054
|
+
.sd-bloom-menu-close svg {
|
|
22055
|
+
width: 16px;
|
|
22056
|
+
height: 16px;
|
|
22057
|
+
}
|
|
22058
|
+
.sd-bloom-menu-grid {
|
|
22059
|
+
display: grid;
|
|
22060
|
+
grid-template-columns: repeat(var(--bloom-menu-columns), minmax(0, 1fr));
|
|
22061
|
+
}
|
|
22062
|
+
.sd-bloom-menu-item {
|
|
22063
|
+
min-width: 0;
|
|
22064
|
+
height: auto;
|
|
22065
|
+
padding: 24px 12px;
|
|
22066
|
+
color: var(--sd-color-text-2);
|
|
22067
|
+
border-radius: 0;
|
|
22068
|
+
}
|
|
22069
|
+
.sd-bloom-menu-item:hover:not(:disabled) {
|
|
22070
|
+
color: var(--sd-color-text-1);
|
|
22071
|
+
background: var(--sd-color-fill-2);
|
|
22072
|
+
}
|
|
22073
|
+
.sd-bloom-menu-item:focus-visible {
|
|
22074
|
+
position: relative;
|
|
22075
|
+
z-index: 1;
|
|
22076
|
+
outline: 2px solid rgb(var(--sd-primary-6));
|
|
22077
|
+
outline-offset: -2px;
|
|
22078
|
+
}
|
|
22079
|
+
.sd-bloom-menu-item-border-right {
|
|
22080
|
+
border-right: 1px solid var(--sd-color-neutral-3);
|
|
22081
|
+
}
|
|
22082
|
+
.sd-bloom-menu-item-border-bottom {
|
|
22083
|
+
border-bottom: 1px solid var(--sd-color-neutral-3);
|
|
22084
|
+
}
|
|
22085
|
+
.sd-bloom-menu-item-disabled, .sd-bloom-menu-item:disabled {
|
|
22086
|
+
color: var(--sd-color-text-4);
|
|
22087
|
+
cursor: not-allowed;
|
|
22088
|
+
}
|
|
22089
|
+
.sd-bloom-menu-item-content {
|
|
22090
|
+
display: flex;
|
|
22091
|
+
flex-direction: column;
|
|
22092
|
+
gap: 8px;
|
|
22093
|
+
align-items: center;
|
|
22094
|
+
min-width: 0;
|
|
22095
|
+
}
|
|
22096
|
+
.sd-bloom-menu-item-icon {
|
|
22097
|
+
display: inline-flex;
|
|
22098
|
+
font-size: 20px;
|
|
22099
|
+
}
|
|
22100
|
+
.sd-bloom-menu-item-icon svg {
|
|
22101
|
+
width: 20px;
|
|
22102
|
+
height: 20px;
|
|
22103
|
+
}
|
|
22104
|
+
.sd-bloom-menu-item-label {
|
|
22105
|
+
max-width: 100%;
|
|
22106
|
+
overflow: hidden;
|
|
22107
|
+
font-weight: 500;
|
|
22108
|
+
font-size: 14px;
|
|
22109
|
+
white-space: nowrap;
|
|
22110
|
+
text-overflow: ellipsis;
|
|
22111
|
+
}
|
|
22112
|
+
.sd-bloom-menu-empty {
|
|
22113
|
+
padding: 24px 16px;
|
|
22114
|
+
color: var(--sd-color-text-2);
|
|
22115
|
+
font-size: 14px;
|
|
22116
|
+
text-align: center;
|
|
22117
|
+
}
|
|
22118
|
+
|
|
22119
|
+
@media (prefers-reduced-motion: reduce) {
|
|
22120
|
+
.sd-bloom-menu-item, .sd-bloom-menu-close {
|
|
22121
|
+
transition: none;
|
|
22122
|
+
}
|
|
22123
|
+
}
|
|
21935
22124
|
.sd-avatar {
|
|
21936
22125
|
position: relative;
|
|
21937
22126
|
display: inline-flex;
|
package/es/index.d.ts
CHANGED
|
@@ -16,6 +16,8 @@ export { default as BackTop } from './back-top';
|
|
|
16
16
|
export type { BackTopInstance } from './back-top';
|
|
17
17
|
export { default as BorderBeam } from './border-beam';
|
|
18
18
|
export type { BorderBeamInstance, BorderBeamSize, BorderBeamTheme, BorderBeamColorVariant, BorderBeamFlowPreset, BorderBeamFlowPoint, BorderBeamFlowCoordinate, BorderBeamExposed, } from './border-beam';
|
|
19
|
+
export { default as BloomMenu } from './bloom-menu';
|
|
20
|
+
export type { BloomMenuInstance, BloomMenuItem, BloomMenuOffset } from './bloom-menu';
|
|
19
21
|
export { default as Badge } from './badge';
|
|
20
22
|
export type { BadgeInstance } from './badge';
|
|
21
23
|
export { default as BasicCrudTable } from './basic-crud-table';
|
|
@@ -106,6 +108,8 @@ export { default as ModelSelector, ModelSelectorContent, ModelSelectorDialog, Mo
|
|
|
106
108
|
export type { ModelSelectorContentInstance, ModelSelectorDialogInstance, ModelSelectorEmptyInstance, ModelSelectorGroupInstance, ModelSelectorInputInstance, ModelSelectorInstance, ModelSelectorItemData, ModelSelectorItemInstance, ModelSelectorKnownProvider, ModelSelectorListInstance, ModelSelectorLogoGroupInstance, ModelSelectorLogoInstance, ModelSelectorNameInstance, ModelSelectorProvider, ModelSelectorSeparatorInstance, ModelSelectorShortcutInstance, ModelSelectorTriggerInstance, } from './model-selector';
|
|
107
109
|
export { default as Notification } from './notification';
|
|
108
110
|
export type { NotificationMethod, NotificationConfig, NotificationReturn } from './notification';
|
|
111
|
+
export { default as NumberFlow, NumberFlowGroup, continuous, useCanAnimate } from './number-flow';
|
|
112
|
+
export type { NumberFlowDigitContext, NumberFlowDigitOptions, NumberFlowDigits, NumberFlowExposed, NumberFlowFormat, NumberFlowGroupInstance, NumberFlowInstance, NumberFlowPlugin, NumberFlowPluginContext, NumberFlowProps, NumberFlowStyle, NumberFlowTrend, NumberFlowValue, } from './number-flow';
|
|
109
113
|
export { default as PageHeader } from './page-header';
|
|
110
114
|
export type { PageHeaderInstance } from './page-header';
|
|
111
115
|
export { default as Pagination } from './pagination';
|
package/es/index.js
CHANGED
|
@@ -22,6 +22,9 @@ import Popover from "./popover/index.js";
|
|
|
22
22
|
import avatar_group_default from "./avatar/avatar-group.js";
|
|
23
23
|
import Avatar from "./avatar/index.js";
|
|
24
24
|
import BackTop from "./back-top/index.js";
|
|
25
|
+
import { continuous } from "./number-flow/continuous.js";
|
|
26
|
+
import { useCanAnimate } from "./number-flow/use-can-animate.js";
|
|
27
|
+
import NumberFlow, { NumberFlowGroup } from "./number-flow/index.js";
|
|
25
28
|
import Badge from "./badge/index.js";
|
|
26
29
|
import Ellipsis, { PerformantEllipsis } from "./ellipsis/index.js";
|
|
27
30
|
import Link from "./link/index.js";
|
|
@@ -78,6 +81,7 @@ import JsonForm from "./json-form/index.js";
|
|
|
78
81
|
import Toolbar from "./toolbar/index.js";
|
|
79
82
|
import Modal from "./modal/index.js";
|
|
80
83
|
import BasicCrudTable from "./basic-crud-table/index.js";
|
|
84
|
+
import BloomMenu from "./bloom-menu/index.js";
|
|
81
85
|
import BorderBeam from "./border-beam/index.js";
|
|
82
86
|
import dropdown_button_default from "./dropdown/dropdown-button.js";
|
|
83
87
|
import dropdown_group_default from "./dropdown/dropdown-group.js";
|
|
@@ -171,4 +175,4 @@ import Typography from "./typography/index.js";
|
|
|
171
175
|
import Upload from "./upload/index.js";
|
|
172
176
|
import Watermark from "./watermark/index.js";
|
|
173
177
|
import SDVue from "./sd-vue.js";
|
|
174
|
-
export { $createInlineComponentNode, $isInlineComponentNode, A2UI_0_9_1, Affix, Alert, Anchor, anchor_link_default as AnchorLink, AutoComplete, Avatar, avatar_group_default as AvatarGroup, BackTop, Badge, BasicCrudTable, BorderBeam, Breadcrumb, breadcrumb_item_default as BreadcrumbItem, Button, button_group_default as ButtonGroup, Calendar, Card, card_grid_default as CardGrid, card_meta_default as CardMeta, Carousel, carousel_item_default as CarouselItem, Cascader, cascader_panel_default as CascaderPanel, Checkbox, checkbox_group_default as CheckboxGroup, grid_col_default as Col, Collapse, collapse_item_default as CollapseItem, ColorPicker, Comment, ConfigProvider, Copy, countdown_default as Countdown, Cropper, DEFAULT_LOCALE, DEFAULT_LOCALE_KEY, DatePicker, Descriptions, descriptions_item_default as DescriptionsItem, dropdown_group_default as Dgroup, Divider, dropdown_option_default as Doption, Drawer, Dropdown, dropdown_button_default as DropdownButton, dropdown_submenu_default as Dsubmenu, Ellipsis, Empty, FilePreviewer, Form, form_item_default as FormItem, Grid, grid_item_default as GridItem, Icon, Image, preview_default as ImagePreview, preview_action_default as ImagePreviewAction, preview_group_default as ImagePreviewGroup, InlineComponentNode, Input, input_group_default as InputGroup, InputMask, InputNumber, input_password_default as InputPassword, input_search_default as InputSearch, InputTag, JsonForm, KvList, Layout, content_default as LayoutContent, footer_default as LayoutFooter, header_default as LayoutHeader, sider_default as LayoutSider, Link, List, list_item_default as ListItem, list_item_meta_default as ListItemMeta, MODEL_SELECTOR_PROVIDERS, Mention, Menu, item_default as MenuItem, item_group_default as MenuItemGroup, Message, Modal, ModelSelector, model_selector_content_default as ModelSelectorContent, model_selector_dialog_default as ModelSelectorDialog, model_selector_empty_default as ModelSelectorEmpty, model_selector_group_default as ModelSelectorGroup, model_selector_input_default as ModelSelectorInput, model_selector_item_default as ModelSelectorItem, model_selector_list_default as ModelSelectorList, model_selector_logo_default as ModelSelectorLogo, model_selector_logo_group_default as ModelSelectorLogoGroup, model_selector_name_default as ModelSelectorName, model_selector_separator_default as ModelSelectorSeparator, model_selector_shortcut_default as ModelSelectorShortcut, model_selector_trigger_default as ModelSelectorTrigger, month_picker_default as MonthPicker, Notification, PageHeader, Pagination, PerformantEllipsis, Popconfirm, Popover, Progress, QrCode, quarter_picker_default as QuarterPicker, RICH_TEXT_EDITOR_BUILT_IN_NODE_NAMES, RICH_TEXT_EDITOR_JSON_FORM_NODE_NAMES, Radio, radio_group_default as RadioGroup, range_picker_default as RangePicker, Rate, recorder_core_default as RecorderCore, ResizeBox, Result, RichTextEditor, grid_row_default as Row, Scrollbar, Secret, Select, SelectableCard, Sender, SenderHeader, SenderSwitch, Skeleton, line_default as SkeletonLine, shape_default as SkeletonShape, Slider, Space, Spin, Split, Statistic, step_default as Step, Steps, sub_menu_default as SubMenu, Switch, tab_pane_default as TabPane, Table, table_column_default as TableColumn, Tabs, Tag, TagGroup, table_tbody_default as Tbody, table_td_default as Td, Textarea, table_th_default as Th, table_thead_default as Thead, ThemeProvider, ThinkingOrb, TimePicker, Timeline, item_default$1 as TimelineItem, Toolbar, Tooltip, Tour, table_tr_default as Tr, Transfer, Tree, TreeSelect, Trigger, Typography, paragraph_default as TypographyParagraph, text_default as TypographyText, title_default as TypographyTitle, Upload, VerificationCode, Watermark, week_picker_default as WeekPicker, year_picker_default as YearPicker, addI18nMessages, SDVue as default, defaultInputMaskFormatChars, defineJsonFormComponents, defineJsonFormSchemas, formatInputMask, getCssVarToken, getLocale, inputMaskPresets, useFormItem, useLocale };
|
|
178
|
+
export { $createInlineComponentNode, $isInlineComponentNode, A2UI_0_9_1, Affix, Alert, Anchor, anchor_link_default as AnchorLink, AutoComplete, Avatar, avatar_group_default as AvatarGroup, BackTop, Badge, BasicCrudTable, BloomMenu, BorderBeam, Breadcrumb, breadcrumb_item_default as BreadcrumbItem, Button, button_group_default as ButtonGroup, Calendar, Card, card_grid_default as CardGrid, card_meta_default as CardMeta, Carousel, carousel_item_default as CarouselItem, Cascader, cascader_panel_default as CascaderPanel, Checkbox, checkbox_group_default as CheckboxGroup, grid_col_default as Col, Collapse, collapse_item_default as CollapseItem, ColorPicker, Comment, ConfigProvider, Copy, countdown_default as Countdown, Cropper, DEFAULT_LOCALE, DEFAULT_LOCALE_KEY, DatePicker, Descriptions, descriptions_item_default as DescriptionsItem, dropdown_group_default as Dgroup, Divider, dropdown_option_default as Doption, Drawer, Dropdown, dropdown_button_default as DropdownButton, dropdown_submenu_default as Dsubmenu, Ellipsis, Empty, FilePreviewer, Form, form_item_default as FormItem, Grid, grid_item_default as GridItem, Icon, Image, preview_default as ImagePreview, preview_action_default as ImagePreviewAction, preview_group_default as ImagePreviewGroup, InlineComponentNode, Input, input_group_default as InputGroup, InputMask, InputNumber, input_password_default as InputPassword, input_search_default as InputSearch, InputTag, JsonForm, KvList, Layout, content_default as LayoutContent, footer_default as LayoutFooter, header_default as LayoutHeader, sider_default as LayoutSider, Link, List, list_item_default as ListItem, list_item_meta_default as ListItemMeta, MODEL_SELECTOR_PROVIDERS, Mention, Menu, item_default as MenuItem, item_group_default as MenuItemGroup, Message, Modal, ModelSelector, model_selector_content_default as ModelSelectorContent, model_selector_dialog_default as ModelSelectorDialog, model_selector_empty_default as ModelSelectorEmpty, model_selector_group_default as ModelSelectorGroup, model_selector_input_default as ModelSelectorInput, model_selector_item_default as ModelSelectorItem, model_selector_list_default as ModelSelectorList, model_selector_logo_default as ModelSelectorLogo, model_selector_logo_group_default as ModelSelectorLogoGroup, model_selector_name_default as ModelSelectorName, model_selector_separator_default as ModelSelectorSeparator, model_selector_shortcut_default as ModelSelectorShortcut, model_selector_trigger_default as ModelSelectorTrigger, month_picker_default as MonthPicker, Notification, NumberFlow, NumberFlowGroup, PageHeader, Pagination, PerformantEllipsis, Popconfirm, Popover, Progress, QrCode, quarter_picker_default as QuarterPicker, RICH_TEXT_EDITOR_BUILT_IN_NODE_NAMES, RICH_TEXT_EDITOR_JSON_FORM_NODE_NAMES, Radio, radio_group_default as RadioGroup, range_picker_default as RangePicker, Rate, recorder_core_default as RecorderCore, ResizeBox, Result, RichTextEditor, grid_row_default as Row, Scrollbar, Secret, Select, SelectableCard, Sender, SenderHeader, SenderSwitch, Skeleton, line_default as SkeletonLine, shape_default as SkeletonShape, Slider, Space, Spin, Split, Statistic, step_default as Step, Steps, sub_menu_default as SubMenu, Switch, tab_pane_default as TabPane, Table, table_column_default as TableColumn, Tabs, Tag, TagGroup, table_tbody_default as Tbody, table_td_default as Td, Textarea, table_th_default as Th, table_thead_default as Thead, ThemeProvider, ThinkingOrb, TimePicker, Timeline, item_default$1 as TimelineItem, Toolbar, Tooltip, Tour, table_tr_default as Tr, Transfer, Tree, TreeSelect, Trigger, Typography, paragraph_default as TypographyParagraph, text_default as TypographyText, title_default as TypographyTitle, Upload, VerificationCode, Watermark, week_picker_default as WeekPicker, year_picker_default as YearPicker, addI18nMessages, continuous, SDVue as default, defaultInputMaskFormatChars, defineJsonFormComponents, defineJsonFormSchemas, formatInputMask, getCssVarToken, getLocale, inputMaskPresets, useCanAnimate, useFormItem, useLocale };
|
package/es/index.scss
CHANGED
|
@@ -46,6 +46,7 @@
|
|
|
46
46
|
@use '@components/pagination/style/index.scss' as *;
|
|
47
47
|
@use '@components/page-header/style/index.scss' as *;
|
|
48
48
|
@use '@components/notification/style/index.scss' as *;
|
|
49
|
+
@use '@components/number-flow/style/index.scss' as *;
|
|
49
50
|
@use '@components/modal/style/index.scss' as *;
|
|
50
51
|
@use '@components/model-selector/style/index.scss' as *;
|
|
51
52
|
@use '@components/message/style/index.scss' as *;
|
|
@@ -88,6 +89,7 @@
|
|
|
88
89
|
@use '@components/basic-crud-table/style/index.scss' as *;
|
|
89
90
|
@use '@components/back-top/style/index.scss' as *;
|
|
90
91
|
@use '@components/border-beam/style/index.scss' as *;
|
|
92
|
+
@use '@components/bloom-menu/style/index.scss' as *;
|
|
91
93
|
@use '@components/avatar/style/index.scss' as *;
|
|
92
94
|
@use '@components/auto-complete/style/index.scss' as *;
|
|
93
95
|
@use '@components/anchor/style/index.scss' as *;
|
package/es/locale/interface.d.ts
CHANGED
package/es/locale/lang/en-us.js
CHANGED
|
@@ -193,6 +193,8 @@ var lang = {
|
|
|
193
193
|
goToSlide: "Go to slide {0}",
|
|
194
194
|
characterOf: "Character {0} of {1}",
|
|
195
195
|
qrCode: "QR code: {0}",
|
|
196
|
+
bloomMenuClose: "Close menu",
|
|
197
|
+
bloomMenuEmpty: "No options available",
|
|
196
198
|
thinkingOrb: {
|
|
197
199
|
working: "Working…",
|
|
198
200
|
searching: "Searching…",
|
package/es/locale/lang/zh-cn.js
CHANGED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
//#region components/number-flow/continuous.ts
|
|
2
|
+
/** 让最高变化位以下的未变化数字连续滚动。 */
|
|
3
|
+
var continuous = { getDelta(value, previousValue, context) {
|
|
4
|
+
if (value === previousValue && context.trend !== 0 && context.highestChangedPosition !== void 0 && context.highestChangedPosition >= context.position) return context.length * context.trend;
|
|
5
|
+
} };
|
|
6
|
+
//#endregion
|
|
7
|
+
export { continuous };
|