@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
@@ -1,18 +1,18 @@
1
- .mc-ui-override {
2
- .el-checkbox {
3
- --el-checkbox-checked-icon-color: #000;
4
- --el-checkbox-input-height: 16px;
5
- --el-checkbox-input-width: 16px;
6
- --el-checkbox-input-border: 2px solid var(--icon-tertiary);
7
- --el-checkbox-disabled-checked-input-border-color: var(--icon-tertiary);
8
- --el-checkbox-disabled-input-fill:var(--all-alphe-white-20);
9
- &.el-checkbox--large{
10
- --el-checkbox-input-height: 20px;
11
- --el-checkbox-input-width: 20px;
12
- .el-checkbox__inner{
13
- height: var(--el-checkbox-input-height);
14
- width: var(--el-checkbox-input-width);
15
- }
16
- }
17
- }
18
- }
1
+ .mc-ui-override {
2
+ .el-checkbox {
3
+ --el-checkbox-checked-icon-color: #000;
4
+ --el-checkbox-input-height: 16px;
5
+ --el-checkbox-input-width: 16px;
6
+ --el-checkbox-input-border: 2px solid var(--icon-tertiary);
7
+ --el-checkbox-disabled-checked-input-border-color: var(--icon-tertiary);
8
+ --el-checkbox-disabled-input-fill:var(--all-alphe-white-20);
9
+ &.el-checkbox--large{
10
+ --el-checkbox-input-height: 20px;
11
+ --el-checkbox-input-width: 20px;
12
+ .el-checkbox__inner{
13
+ height: var(--el-checkbox-input-height);
14
+ width: var(--el-checkbox-input-width);
15
+ }
16
+ }
17
+ }
18
+ }
@@ -1,47 +1,47 @@
1
- .mc-ui-override {
2
- .el-dialog {
3
- --el-dialog-padding-primary: 24px;
4
- --el-dialog-title-font-size: 24px;
5
- --el-dialog-border-radius: 16px;
6
- --el-dialog-bg-color: var(--bg-tertiary);
7
- }
8
-
9
- .el-dialog__header {
10
- padding-bottom: 24px;
11
- padding-right: 0;
12
-
13
- .el-dialog__title {
14
- line-height: 32px;
15
- font-weight: 600;
16
- color: var(--text-primary);
17
- }
18
-
19
- .el-dialog__headerbtn {
20
- width: 24px;
21
- height: 24px;
22
- right: 22px;
23
- top: 22px;
24
- display: flex;
25
- justify-content: center;
26
- align-items: center;
27
-
28
- .el-dialog__close {
29
- font-size: 20px;
30
- color: var(--icon-tertiary);
31
- }
32
-
33
- &:hover {
34
- .el-dialog__close {
35
- color: var(--bg-brand-hover);
36
- }
37
- }
38
- }
39
- }
40
-
41
- .el-dialog__footer {
42
- display: flex;
43
- > .el-button {
44
- flex: 1;
45
- }
46
- }
47
- }
1
+ .mc-ui-override {
2
+ .el-dialog {
3
+ --el-dialog-padding-primary: 24px;
4
+ --el-dialog-title-font-size: 24px;
5
+ --el-dialog-border-radius: 16px;
6
+ --el-dialog-bg-color: var(--bg-tertiary);
7
+ }
8
+
9
+ .el-dialog__header {
10
+ padding-bottom: 24px;
11
+ padding-right: 0;
12
+
13
+ .el-dialog__title {
14
+ line-height: 32px;
15
+ font-weight: 600;
16
+ color: var(--text-primary);
17
+ }
18
+
19
+ .el-dialog__headerbtn {
20
+ width: 24px;
21
+ height: 24px;
22
+ right: 22px;
23
+ top: 22px;
24
+ display: flex;
25
+ justify-content: center;
26
+ align-items: center;
27
+
28
+ .el-dialog__close {
29
+ font-size: 20px;
30
+ color: var(--icon-tertiary);
31
+ }
32
+
33
+ &:hover {
34
+ .el-dialog__close {
35
+ color: var(--bg-brand-hover);
36
+ }
37
+ }
38
+ }
39
+ }
40
+
41
+ .el-dialog__footer {
42
+ display: flex;
43
+ > .el-button {
44
+ flex: 1;
45
+ }
46
+ }
47
+ }
@@ -1,18 +1,18 @@
1
- .mc-ui-override {
2
- .el-form {
3
- .el-form-item__label {
4
- height: var(--el-component-size);
5
- line-height: var(--el-component-size);
6
- color: var(--text-primary);
7
- }
8
-
9
- .el-form-item--label-top .el-form-item__label {
10
- line-height: 20px;
11
- height: 20px;
12
- }
13
-
14
- .el-form-item {
15
- margin-bottom: 20px;
16
- }
17
- }
18
- }
1
+ .mc-ui-override {
2
+ .el-form {
3
+ .el-form-item__label {
4
+ height: var(--el-component-size);
5
+ line-height: var(--el-component-size);
6
+ color: var(--text-primary);
7
+ }
8
+
9
+ .el-form-item--label-top .el-form-item__label {
10
+ line-height: 20px;
11
+ height: 20px;
12
+ }
13
+
14
+ .el-form-item {
15
+ margin-bottom: 20px;
16
+ }
17
+ }
18
+ }
@@ -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
  }