@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.
Files changed (62) hide show
  1. package/dist/sd.css +189 -0
  2. package/dist/sd.min.css +2 -2
  3. package/es/badge/badge.vue.d.ts +2 -0
  4. package/es/badge/badge.vue_vue_type_script_setup_true_lang.js +19 -4
  5. package/es/badge/index.d.ts +3 -0
  6. package/es/bloom-menu/bloom-menu.js +5 -0
  7. package/es/bloom-menu/bloom-menu.vue.d.ts +52 -0
  8. package/es/bloom-menu/bloom-menu.vue_vue_type_script_setup_true_lang.js +380 -0
  9. package/es/bloom-menu/index.d.ts +6 -0
  10. package/es/bloom-menu/index.js +10 -0
  11. package/es/bloom-menu/style/css.js +2 -0
  12. package/es/bloom-menu/style/index.css +135 -0
  13. package/es/bloom-menu/style/index.d.ts +2 -0
  14. package/es/bloom-menu/style/index.js +2 -0
  15. package/es/bloom-menu/style/index.scss +153 -0
  16. package/es/bloom-menu/style/token.scss +24 -0
  17. package/es/bloom-menu/types.d.ts +11 -0
  18. package/es/components.d.ts +3 -0
  19. package/es/index.css +189 -0
  20. package/es/index.d.ts +4 -0
  21. package/es/index.js +5 -1
  22. package/es/index.scss +2 -0
  23. package/es/locale/interface.d.ts +2 -0
  24. package/es/locale/lang/en-us.js +2 -0
  25. package/es/locale/lang/zh-cn.js +2 -0
  26. package/es/number-flow/continuous.d.ts +2 -0
  27. package/es/number-flow/continuous.js +7 -0
  28. package/es/number-flow/formatter.d.ts +15 -0
  29. package/es/number-flow/formatter.js +54 -0
  30. package/es/number-flow/group-key.d.ts +11 -0
  31. package/es/number-flow/group-key.js +4 -0
  32. package/es/number-flow/index.d.ts +63 -0
  33. package/es/number-flow/index.js +15 -0
  34. package/es/number-flow/number-flow-group.js +5 -0
  35. package/es/number-flow/number-flow-group.vue.d.ts +12 -0
  36. package/es/number-flow/number-flow-group.vue_vue_type_script_setup_true_lang.js +58 -0
  37. package/es/number-flow/number-flow.js +5 -0
  38. package/es/number-flow/number-flow.vue.d.ts +20 -0
  39. package/es/number-flow/number-flow.vue_vue_type_script_setup_true_lang.js +284 -0
  40. package/es/number-flow/style/css.js +2 -0
  41. package/es/number-flow/style/index.css +85 -0
  42. package/es/number-flow/style/index.d.ts +2 -0
  43. package/es/number-flow/style/index.js +2 -0
  44. package/es/number-flow/style/index.scss +93 -0
  45. package/es/number-flow/style/token.scss +5 -0
  46. package/es/number-flow/types.d.ts +46 -0
  47. package/es/number-flow/use-can-animate.d.ts +4 -0
  48. package/es/number-flow/use-can-animate.js +30 -0
  49. package/es/rich-text-editor/index.d.ts +3 -3
  50. package/es/rich-text-editor/rich-text-editor.vue.d.ts +1 -1
  51. package/es/sd-vue.js +5 -0
  52. package/es/statistic/countdown.vue.d.ts +9 -0
  53. package/es/statistic/countdown.vue_vue_type_script_setup_true_lang.js +29 -2
  54. package/es/statistic/index.d.ts +15 -0
  55. package/es/statistic/statistic.vue.d.ts +3 -3
  56. package/es/statistic/statistic.vue_vue_type_script_setup_true_lang.js +31 -62
  57. package/es/statistic/style/index.css +3 -0
  58. package/es/statistic/style/index.scss +5 -0
  59. package/json/vetur-attributes.json +8 -0
  60. package/json/vetur-tags.json +12 -1
  61. package/json/web-types.json +35 -1
  62. 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,2 @@
1
+ import '../../style/index.scss';
2
+ import './index.scss';
@@ -0,0 +1,2 @@
1
+ import "../../style/index.scss";
2
+ import "./index.scss";
@@ -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;
@@ -0,0 +1,11 @@
1
+ import type { Component } from 'vue';
2
+ export interface BloomMenuOffset {
3
+ left?: number;
4
+ top?: number;
5
+ }
6
+ export interface BloomMenuItem {
7
+ value: string | number;
8
+ label: string;
9
+ icon?: Component;
10
+ disabled?: boolean;
11
+ }
@@ -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 *;
@@ -151,6 +151,8 @@ export interface SdA11yLang {
151
151
  goToSlide: string;
152
152
  characterOf: string;
153
153
  qrCode: string;
154
+ bloomMenuClose: string;
155
+ bloomMenuEmpty: string;
154
156
  thinkingOrb: {
155
157
  working: string;
156
158
  searching: string;
@@ -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…",
@@ -247,6 +247,8 @@ var lang = {
247
247
  goToSlide: "跳转到第 {0} 张",
248
248
  characterOf: "第 {0} 个字符,共 {1} 个",
249
249
  qrCode: "二维码:{0}",
250
+ bloomMenuClose: "关闭菜单",
251
+ bloomMenuEmpty: "暂无可用选项",
250
252
  thinkingOrb: {
251
253
  working: "正在工作",
252
254
  searching: "正在搜索",
@@ -0,0 +1,2 @@
1
+ import type { NumberFlowPlugin } from './types';
2
+ export declare const continuous: NumberFlowPlugin;
@@ -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 };