@mc-markets/ui 1.0.90 → 1.0.92

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 (68) hide show
  1. package/README.md +243 -40
  2. package/USAGE_GUIDE.md +339 -0
  3. package/dist/404.html +22 -22
  4. package/dist/components/Tag/Tag.vue.d.ts.map +1 -1
  5. package/dist/index.cjs +1 -1
  6. package/dist/index.cjs.map +1 -1
  7. package/dist/index.mjs +10 -11
  8. package/dist/index.mjs.map +1 -1
  9. package/dist/resolver.d.ts +26 -0
  10. package/dist/resolver.d.ts.map +1 -0
  11. package/dist/style.css +1 -1
  12. package/package.json +8 -5
  13. package/packages/components/Alert/Alert.vue +139 -139
  14. package/packages/components/Banner/Banner.vue +299 -299
  15. package/packages/components/Breadcrumb/Breadcrumb.vue +113 -113
  16. package/packages/components/Breadcrumb/BreadcrumbSeparator.vue +31 -31
  17. package/packages/components/Button/Button.vue +17 -17
  18. package/packages/components/DatePicker/DatePicker.vue +85 -85
  19. package/packages/components/Dialog/Dialog.vue +61 -61
  20. package/packages/components/Empty/Empty.vue +73 -73
  21. package/packages/components/Form/Form.vue +30 -30
  22. package/packages/components/FormItem/FormItem.vue +19 -19
  23. package/packages/components/Icon/Icon.vue +210 -210
  24. package/packages/components/Input/Input.vue +15 -15
  25. package/packages/components/Message/Message.vue +503 -503
  26. package/packages/components/NotifiMessage/NotifiMessage.vue +293 -293
  27. package/packages/components/Notification/Notification.vue +19 -19
  28. package/packages/components/Option/Option.vue +13 -13
  29. package/packages/components/OptionGroup/OptionGroup.vue +13 -13
  30. package/packages/components/Pagination/Pagination.vue +61 -61
  31. package/packages/components/Radio/Radio.vue +67 -67
  32. package/packages/components/RadioButton/RadioButton.vue +110 -110
  33. package/packages/components/RadioGroup/RadioGroup.vue +155 -155
  34. package/packages/components/Select/Select.vue +22 -22
  35. package/packages/components/Switch/Switch.vue +47 -47
  36. package/packages/components/TabCard/TabCard.vue +107 -107
  37. package/packages/components/TabCard/TabCardItem.vue +105 -105
  38. package/packages/components/Table/Table.vue +17 -17
  39. package/packages/components/Table/TableColumn.vue +20 -20
  40. package/packages/components/Tabs/TabPane.vue +79 -79
  41. package/packages/components/Tabs/Tabs.vue +267 -267
  42. package/packages/components/Tag/Tag.vue +208 -211
  43. package/packages/components/Tooltip/Tooltip.vue +58 -58
  44. package/packages/hooks/useClassName.js +23 -23
  45. package/packages/resolver.js +179 -0
  46. package/packages/styles/README.md +129 -129
  47. package/packages/styles/colorfont/iconfont.css +1 -0
  48. package/packages/styles/components/button.scss +121 -121
  49. package/packages/styles/components/checkbox.scss +18 -18
  50. package/packages/styles/components/dialog.scss +47 -47
  51. package/packages/styles/components/form.scss +18 -18
  52. package/packages/styles/components/input.scss +14 -14
  53. package/packages/styles/components/select.scss +62 -62
  54. package/packages/styles/components/table.scss +37 -37
  55. package/packages/styles/components/tabs.scss +76 -76
  56. package/packages/styles/components/tag.scss +142 -142
  57. package/packages/styles/font/iconfont.scss +363 -363
  58. package/packages/styles/index.scss +94 -94
  59. package/packages/styles/variables/border-mode.css +6 -6
  60. package/packages/styles/variables/color-modes-dark.css +143 -143
  61. package/packages/styles/variables/index.scss +5 -5
  62. package/packages/styles/variables/primitives-style.css +112 -112
  63. package/packages/styles/variables/radius-mode.css +14 -14
  64. package/packages/styles/variables/spacing-mode.css +20 -20
  65. package/packages/styles/variables/typography-desktop.css +40 -40
  66. package/packages/styles/variables/typography-mobile.css +40 -40
  67. package/packages/utils/classNames.js +23 -23
  68. package/packages/utils/styleUtils.js +105 -105
package/packages/styles/components/tag.scss CHANGED
@@ -1,143 +1,143 @@
1
- .mc-ui-override {
2
- .el-tag {
3
- // 自定义样式可以在这里添加
4
- font-size: var(--font-size-text-sm);
5
- --el-tag-border-radius: 8px;
6
- padding: 0 8px;
7
-
8
- .iconfont,
9
- .colorfont {
10
- font-size: 16px;
11
- display: inline-block;
12
- }
13
-
14
- .colorfont {
15
- font-family: "colorfont" !important;
16
- }
17
- .prefixIcon{
18
- margin-right: 4px;
19
- }
20
- .suffixIcon{
21
- margin-left: 4px;
22
- }
23
-
24
- &.is-loading {
25
- .prefixIcon,
26
- .suffixIcon {
27
- animation: rotate 3s linear infinite;
28
- transform-origin: center center;
29
- display: inline-block;
30
- }
31
- }
32
-
33
- &.el-tag--primary {
34
- --el-tag-bg-color: color-mix(
35
- in srgb,
36
- var(--text-warning-primary) 10%,
37
- transparent
38
- );
39
- --el-tag-border-color: color-mix(
40
- in srgb,
41
- var(--text-warning-primary) 20%,
42
- transparent
43
- );
44
- --el-tag-text-color: var(--text-warning-primary);
45
- --el-tag-hover-color: var(--text-warning-primary);
46
- }
47
- &.el-tag--success {
48
- --el-tag-bg-color: color-mix(
49
- in srgb,
50
- var(--text-success-primary) 10%,
51
- transparent
52
- );
53
- --el-tag-border-color: color-mix(
54
- in srgb,
55
- var(--text-success-primary) 20%,
56
- transparent
57
- );
58
- --el-tag-text-color: var(--text-success-primary);
59
- }
60
- &.el-tag--danger {
61
- --el-tag-bg-color: color-mix(
62
- in srgb,
63
- var(--text-error-primary) 10%,
64
- transparent
65
- );
66
- --el-tag-border-color: color-mix(
67
- in srgb,
68
- var(--text-error-primary) 20%,
69
- transparent
70
- );
71
- --el-tag-text-color: var(--text-error-primary);
72
- }
73
- &.el-tag--info {
74
- --el-tag-bg-color: color-mix(
75
- in srgb,
76
- var(--text-primary) 10%,
77
- transparent
78
- );
79
- --el-tag-border-color: color-mix(
80
- in srgb,
81
- var(--text-primary) 20%,
82
- transparent
83
- );
84
- --el-tag-text-color: var(--text-primary);
85
- }
86
- &.el-tag--dark {
87
- &.el-tag--primary {
88
- --el-tag-bg-color: color-mix(
89
- in srgb,
90
- var(--text-warning-primary) 10%,
91
- transparent
92
- );;
93
- --el-tag-border-color: transparent;
94
- }
95
- &.el-tag--warning {
96
- --el-tag-bg-color: color-mix(
97
- in srgb,
98
- var(--text-warning-primary) 10%,
99
- transparent
100
- );
101
- --el-tag-border-color: transparent;
102
- }
103
- &.el-tag--success {
104
- --el-tag-bg-color: color-mix(
105
- in srgb,
106
- var(--text-success-primary) 10%,
107
- transparent
108
- );
109
- --el-tag-border-color: transparent;
110
- }
111
- &.el-tag--danger {
112
- --el-tag-bg-color: color-mix(
113
- in srgb,
114
- var(--text-error-primary) 10%,
115
- transparent
116
- );
117
- --el-tag-border-color: transparent;
118
- }
119
- &.el-tag--info {
120
- --el-tag-bg-color: var(--bg-tertiary-hover);
121
- --el-tag-border-color: transparent;
122
- }
123
- }
124
- }
125
-
126
- .el-tag--large{
127
- padding: 4px 10px;
128
- height: 28px;
129
- }
130
- .el-tag--small{
131
- height: 22px;
132
- padding: 0 6px;
133
- }
134
- }
135
-
136
- @keyframes rotate {
137
- from {
138
- transform: rotate(0deg);
139
- }
140
- to {
141
- transform: rotate(360deg);
142
- }
1
+ .mc-ui-override {
2
+ .el-tag {
3
+ // 自定义样式可以在这里添加
4
+ font-size: var(--font-size-text-sm);
5
+ --el-tag-border-radius: 8px;
6
+ padding: 0 8px;
7
+
8
+ .iconfont,
9
+ .colorfont {
10
+ font-size: 16px;
11
+ display: inline-block;
12
+ }
13
+
14
+ .colorfont {
15
+ font-family: "colorfont" !important;
16
+ }
17
+ .prefixIcon{
18
+ margin-right: 4px;
19
+ }
20
+ .suffixIcon{
21
+ margin-left: 4px;
22
+ }
23
+
24
+ &.is-loading {
25
+ .prefixIcon,
26
+ .suffixIcon {
27
+ animation: rotate 3s linear infinite;
28
+ transform-origin: center center;
29
+ display: inline-block;
30
+ }
31
+ }
32
+
33
+ &.el-tag--primary {
34
+ --el-tag-bg-color: color-mix(
35
+ in srgb,
36
+ var(--text-warning-primary) 10%,
37
+ transparent
38
+ );
39
+ --el-tag-border-color: color-mix(
40
+ in srgb,
41
+ var(--text-warning-primary) 20%,
42
+ transparent
43
+ );
44
+ --el-tag-text-color: var(--text-warning-primary);
45
+ --el-tag-hover-color: var(--text-warning-primary);
46
+ }
47
+ &.el-tag--success {
48
+ --el-tag-bg-color: color-mix(
49
+ in srgb,
50
+ var(--text-success-primary) 10%,
51
+ transparent
52
+ );
53
+ --el-tag-border-color: color-mix(
54
+ in srgb,
55
+ var(--text-success-primary) 20%,
56
+ transparent
57
+ );
58
+ --el-tag-text-color: var(--text-success-primary);
59
+ }
60
+ &.el-tag--danger {
61
+ --el-tag-bg-color: color-mix(
62
+ in srgb,
63
+ var(--text-error-primary) 10%,
64
+ transparent
65
+ );
66
+ --el-tag-border-color: color-mix(
67
+ in srgb,
68
+ var(--text-error-primary) 20%,
69
+ transparent
70
+ );
71
+ --el-tag-text-color: var(--text-error-primary);
72
+ }
73
+ &.el-tag--info {
74
+ --el-tag-bg-color: color-mix(
75
+ in srgb,
76
+ var(--text-primary) 10%,
77
+ transparent
78
+ );
79
+ --el-tag-border-color: color-mix(
80
+ in srgb,
81
+ var(--text-primary) 20%,
82
+ transparent
83
+ );
84
+ --el-tag-text-color: var(--text-primary);
85
+ }
86
+ &.el-tag--dark {
87
+ &.el-tag--primary {
88
+ --el-tag-bg-color: color-mix(
89
+ in srgb,
90
+ var(--text-warning-primary) 10%,
91
+ transparent
92
+ );;
93
+ --el-tag-border-color: transparent;
94
+ }
95
+ &.el-tag--warning {
96
+ --el-tag-bg-color: color-mix(
97
+ in srgb,
98
+ var(--text-warning-primary) 10%,
99
+ transparent
100
+ );
101
+ --el-tag-border-color: transparent;
102
+ }
103
+ &.el-tag--success {
104
+ --el-tag-bg-color: color-mix(
105
+ in srgb,
106
+ var(--text-success-primary) 10%,
107
+ transparent
108
+ );
109
+ --el-tag-border-color: transparent;
110
+ }
111
+ &.el-tag--danger {
112
+ --el-tag-bg-color: color-mix(
113
+ in srgb,
114
+ var(--text-error-primary) 10%,
115
+ transparent
116
+ );
117
+ --el-tag-border-color: transparent;
118
+ }
119
+ &.el-tag--info {
120
+ --el-tag-bg-color: var(--bg-tertiary-hover);
121
+ --el-tag-border-color: transparent;
122
+ }
123
+ }
124
+ }
125
+
126
+ .el-tag--large{
127
+ padding: 4px 10px;
128
+ height: 28px;
129
+ }
130
+ .el-tag--small{
131
+ height: 22px;
132
+ padding: 0 6px;
133
+ }
134
+ }
135
+
136
+ @keyframes rotate {
137
+ from {
138
+ transform: rotate(0deg);
139
+ }
140
+ to {
141
+ transform: rotate(360deg);
142
+ }
143
143
  }