@mc-markets/ui 1.0.87 → 1.0.90

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 (65) hide show
  1. package/README.md +39 -54
  2. package/dist/404.html +22 -22
  3. package/dist/components/TabCard/TabCardItem.vue.d.ts.map +1 -1
  4. package/dist/components/Tag/Tag.vue.d.ts +2 -0
  5. package/dist/components/Tag/Tag.vue.d.ts.map +1 -1
  6. package/dist/index.cjs +1 -1
  7. package/dist/index.cjs.map +1 -1
  8. package/dist/index.mjs +119 -110
  9. package/dist/index.mjs.map +1 -1
  10. package/dist/style.css +1 -1
  11. package/package.json +1 -1
  12. package/packages/components/Alert/Alert.vue +139 -139
  13. package/packages/components/Banner/Banner.vue +299 -299
  14. package/packages/components/Breadcrumb/Breadcrumb.vue +113 -113
  15. package/packages/components/Breadcrumb/BreadcrumbSeparator.vue +31 -31
  16. package/packages/components/Button/Button.vue +17 -17
  17. package/packages/components/DatePicker/DatePicker.vue +85 -85
  18. package/packages/components/Dialog/Dialog.vue +61 -61
  19. package/packages/components/Empty/Empty.vue +73 -73
  20. package/packages/components/Form/Form.vue +30 -30
  21. package/packages/components/FormItem/FormItem.vue +19 -19
  22. package/packages/components/Icon/Icon.vue +210 -210
  23. package/packages/components/Input/Input.vue +15 -15
  24. package/packages/components/Message/Message.vue +503 -503
  25. package/packages/components/NotifiMessage/NotifiMessage.vue +293 -293
  26. package/packages/components/Notification/Notification.vue +19 -19
  27. package/packages/components/Option/Option.vue +13 -13
  28. package/packages/components/OptionGroup/OptionGroup.vue +13 -13
  29. package/packages/components/Pagination/Pagination.vue +61 -61
  30. package/packages/components/Radio/Radio.vue +67 -67
  31. package/packages/components/RadioButton/RadioButton.vue +110 -110
  32. package/packages/components/RadioGroup/RadioGroup.vue +155 -155
  33. package/packages/components/Select/Select.vue +22 -22
  34. package/packages/components/Switch/Switch.vue +47 -47
  35. package/packages/components/TabCard/TabCard.vue +107 -117
  36. package/packages/components/TabCard/TabCardItem.vue +105 -119
  37. package/packages/components/Table/Table.vue +17 -17
  38. package/packages/components/Table/TableColumn.vue +20 -20
  39. package/packages/components/Tabs/TabPane.vue +79 -79
  40. package/packages/components/Tabs/Tabs.vue +267 -267
  41. package/packages/components/Tag/Tag.vue +211 -164
  42. package/packages/components/Tooltip/Tooltip.vue +58 -58
  43. package/packages/hooks/useClassName.js +23 -23
  44. package/packages/styles/README.md +129 -129
  45. package/packages/styles/components/button.scss +121 -121
  46. package/packages/styles/components/checkbox.scss +18 -18
  47. package/packages/styles/components/dialog.scss +47 -47
  48. package/packages/styles/components/form.scss +18 -18
  49. package/packages/styles/components/input.scss +14 -14
  50. package/packages/styles/components/select.scss +62 -62
  51. package/packages/styles/components/table.scss +37 -37
  52. package/packages/styles/components/tabs.scss +76 -76
  53. package/packages/styles/components/tag.scss +142 -142
  54. package/packages/styles/font/iconfont.scss +363 -363
  55. package/packages/styles/index.scss +94 -94
  56. package/packages/styles/variables/border-mode.css +6 -6
  57. package/packages/styles/variables/color-modes-dark.css +143 -143
  58. package/packages/styles/variables/index.scss +5 -5
  59. package/packages/styles/variables/primitives-style.css +112 -112
  60. package/packages/styles/variables/radius-mode.css +14 -14
  61. package/packages/styles/variables/spacing-mode.css +20 -20
  62. package/packages/styles/variables/typography-desktop.css +40 -40
  63. package/packages/styles/variables/typography-mobile.css +40 -40
  64. package/packages/utils/classNames.js +23 -23
  65. package/packages/utils/styleUtils.js +105 -105
@@ -1,14 +1,14 @@
1
- .mc-ui-override {
2
- .el-input {
3
- &.solid {
4
- --el-border-color: var(--bg-tertiary-hover);
5
-
6
- .el-input__wrapper {
7
- background: var(--all-alphe-white-6);
8
- }
9
- }
10
- }
11
- .el-input__wrapper {
12
- padding: 1px 16px;
13
- }
14
- }
1
+ .mc-ui-override {
2
+ .el-input {
3
+ &.solid {
4
+ --el-border-color: var(--bg-tertiary-hover);
5
+
6
+ .el-input__wrapper {
7
+ background: var(--all-alphe-white-6);
8
+ }
9
+ }
10
+ }
11
+ .el-input__wrapper {
12
+ padding: 1px 16px;
13
+ }
14
+ }
@@ -1,62 +1,62 @@
1
- .mc-ui-override {
2
- .el-select {
3
- &.solid {
4
- --el-border-color: var(--bg-tertiary-hover);
5
-
6
- .el-select__wrapper {
7
- background: var(--bg-tertiary-hover);
8
- }
9
- .el-select__caret {
10
- color: var(--all-base-white);
11
- }
12
- }
13
- }
14
-
15
- .el-select__wrapper {
16
- box-sizing: border-box;
17
- padding: 4px 16px;
18
- height: 40px;
19
- &.is-disabled {
20
- background: var(--bg-tertiary-hover);
21
- }
22
- }
23
-
24
- .el-select--small {
25
- .el-select__wrapper {
26
- padding: 8px 16px;
27
- font-size: var(--font-size-text-sm);
28
- }
29
- }
30
-
31
- // 下拉菜单样式 - 全局样式(仅在组件未定义时生效)
32
- .el-select-dropdown {
33
- padding: 12px;
34
- }
35
-
36
- .el-select-dropdown__list {
37
- padding: 0;
38
- }
39
-
40
- .el-select-dropdown__item {
41
- padding: 0px 12px;
42
- height: 36px;
43
- line-height: 36px;
44
- border-radius: 6px;
45
- font-size: var(--font-size-text-sm);
46
- color: var(--text-primary);
47
-
48
- &:hover,
49
- &.is-hovering {
50
- background: var(--all-alphe-white-6, #ffffff0f);
51
- }
52
- &.is-selected{
53
- color: var(--text-brand);
54
- }
55
- }
56
-
57
- .el-select-dropdown__header {
58
- border: none;
59
- padding: 0px;
60
- padding-bottom: 4px;
61
- }
62
- }
1
+ .mc-ui-override {
2
+ .el-select {
3
+ &.solid {
4
+ --el-border-color: var(--bg-tertiary-hover);
5
+
6
+ .el-select__wrapper {
7
+ background: var(--bg-tertiary-hover);
8
+ }
9
+ .el-select__caret {
10
+ color: var(--all-base-white);
11
+ }
12
+ }
13
+ }
14
+
15
+ .el-select__wrapper {
16
+ box-sizing: border-box;
17
+ padding: 4px 16px;
18
+ height: 40px;
19
+ &.is-disabled {
20
+ background: var(--bg-tertiary-hover);
21
+ }
22
+ }
23
+
24
+ .el-select--small {
25
+ .el-select__wrapper {
26
+ padding: 8px 16px;
27
+ font-size: var(--font-size-text-sm);
28
+ }
29
+ }
30
+
31
+ // 下拉菜单样式 - 全局样式(仅在组件未定义时生效)
32
+ .el-select-dropdown {
33
+ padding: 12px;
34
+ }
35
+
36
+ .el-select-dropdown__list {
37
+ padding: 0;
38
+ }
39
+
40
+ .el-select-dropdown__item {
41
+ padding: 0px 12px;
42
+ height: 36px;
43
+ line-height: 36px;
44
+ border-radius: 6px;
45
+ font-size: var(--font-size-text-sm);
46
+ color: var(--text-primary);
47
+
48
+ &:hover,
49
+ &.is-hovering {
50
+ background: var(--all-alphe-white-6, #ffffff0f);
51
+ }
52
+ &.is-selected{
53
+ color: var(--text-brand);
54
+ }
55
+ }
56
+
57
+ .el-select-dropdown__header {
58
+ border: none;
59
+ padding: 0px;
60
+ padding-bottom: 4px;
61
+ }
62
+ }
@@ -1,37 +1,37 @@
1
- .mc-ui-override {
2
- .el-table {
3
- --el-table-header-bg-color: var(--bg-quaternary);
4
- --el-table-row-hover-bg-color: var(--bg-tertiary-hover);
5
- --el-table-border-color: transparent;
6
- --el-table-header-text-color: var(--text-tertiary);
7
- --el-table-tr-bg-color: #161518;
8
- --el-table-fixed-left-column:inset 10px 0 10px -10px #000;
9
- --el-table-fixed-right-column:inset -10px 0 10px -10px #000;
10
-
11
- border: none;
12
- border-radius: 8px;
13
-
14
- thead {
15
- th {
16
- font-weight: 500;
17
- }
18
- .cell {
19
- line-height: 28px;
20
- }
21
- .el-table__cell {
22
- padding: 8px 0px;
23
- border: none;
24
- }
25
- }
26
-
27
- .el-table__cell {
28
- padding: 18px 0px;
29
- // border: none;
30
- }
31
-
32
- .cell {
33
- line-height: 20px;
34
- padding: 0 16px;
35
- }
36
- }
37
- }
1
+ .mc-ui-override {
2
+ .el-table {
3
+ --el-table-header-bg-color: var(--bg-quaternary);
4
+ --el-table-row-hover-bg-color: var(--bg-tertiary-hover);
5
+ --el-table-border-color: transparent;
6
+ --el-table-header-text-color: var(--text-tertiary);
7
+ --el-table-tr-bg-color: #161518;
8
+ --el-table-fixed-left-column:inset 10px 0 10px -10px #000;
9
+ --el-table-fixed-right-column:inset -10px 0 10px -10px #000;
10
+
11
+ border: none;
12
+ border-radius: 8px;
13
+
14
+ thead {
15
+ th {
16
+ font-weight: 500;
17
+ }
18
+ .cell {
19
+ line-height: 28px;
20
+ }
21
+ .el-table__cell {
22
+ padding: 8px 0px;
23
+ border: none;
24
+ }
25
+ }
26
+
27
+ .el-table__cell {
28
+ padding: 18px 0px;
29
+ // border: none;
30
+ }
31
+
32
+ .cell {
33
+ line-height: 20px;
34
+ padding: 0 16px;
35
+ }
36
+ }
37
+ }
@@ -1,77 +1,77 @@
1
- // MC UI Tabs 原生样式
2
- .m-tabs {
3
- &__header {
4
- position: relative;
5
- }
6
-
7
- &__nav {
8
- position: relative;
9
- display: flex;
10
- border-bottom: 1px solid var(--border-primary, #e4e7ed);
11
- }
12
-
13
- &__item {
14
- position: relative;
15
- padding: 12px 20px;
16
- margin-right: 20px;
17
- cursor: pointer;
18
- color: var(--text-regular, #606266);
19
- font-size: 14px;
20
- transition: color 0.3s;
21
- user-select: none;
22
-
23
- &:hover {
24
- color: var(--color-primary, #409eff);
25
- }
26
-
27
- &.is-active {
28
- color: var(--color-primary, #409eff);
29
- }
30
-
31
- &.is-disabled {
32
- color: var(--text-disabled, #c0c4cc);
33
- cursor: not-allowed;
34
-
35
- &:hover {
36
- color: var(--text-disabled, #c0c4cc);
37
- }
38
- }
39
-
40
- &:last-child {
41
- margin-right: 0;
42
- }
43
- }
44
-
45
- &__active-bar {
46
- position: absolute;
47
- bottom: 0;
48
- height: 3px;
49
- background-color: var(--color-primary, #409eff);
50
- transition: all 0.3s;
51
- z-index: 1;
52
- }
53
-
54
- &__content {
55
- padding: 20px 0;
56
- }
57
-
58
- // 可关闭标签样式
59
- &__close {
60
- margin-left: 8px;
61
- font-size: 12px;
62
- cursor: pointer;
63
- color: var(--text-regular, #606266);
64
-
65
- &:hover {
66
- color: var(--color-danger, #f56c6c);
67
- }
68
- }
69
- }
70
-
71
- .m-tab-pane {
72
- display: none;
73
-
74
- &.is-active {
75
- display: block;
76
- }
1
+ // MC UI Tabs 原生样式
2
+ .m-tabs {
3
+ &__header {
4
+ position: relative;
5
+ }
6
+
7
+ &__nav {
8
+ position: relative;
9
+ display: flex;
10
+ border-bottom: 1px solid var(--border-primary, #e4e7ed);
11
+ }
12
+
13
+ &__item {
14
+ position: relative;
15
+ padding: 12px 20px;
16
+ margin-right: 20px;
17
+ cursor: pointer;
18
+ color: var(--text-regular, #606266);
19
+ font-size: 14px;
20
+ transition: color 0.3s;
21
+ user-select: none;
22
+
23
+ &:hover {
24
+ color: var(--color-primary, #409eff);
25
+ }
26
+
27
+ &.is-active {
28
+ color: var(--color-primary, #409eff);
29
+ }
30
+
31
+ &.is-disabled {
32
+ color: var(--text-disabled, #c0c4cc);
33
+ cursor: not-allowed;
34
+
35
+ &:hover {
36
+ color: var(--text-disabled, #c0c4cc);
37
+ }
38
+ }
39
+
40
+ &:last-child {
41
+ margin-right: 0;
42
+ }
43
+ }
44
+
45
+ &__active-bar {
46
+ position: absolute;
47
+ bottom: 0;
48
+ height: 3px;
49
+ background-color: var(--color-primary, #409eff);
50
+ transition: all 0.3s;
51
+ z-index: 1;
52
+ }
53
+
54
+ &__content {
55
+ padding: 20px 0;
56
+ }
57
+
58
+ // 可关闭标签样式
59
+ &__close {
60
+ margin-left: 8px;
61
+ font-size: 12px;
62
+ cursor: pointer;
63
+ color: var(--text-regular, #606266);
64
+
65
+ &:hover {
66
+ color: var(--color-danger, #f56c6c);
67
+ }
68
+ }
69
+ }
70
+
71
+ .m-tab-pane {
72
+ display: none;
73
+
74
+ &.is-active {
75
+ display: block;
76
+ }
77
77
  }
@@ -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
  }