xt-element-ui 1.3.3 → 1.3.4

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 (111) hide show
  1. package/CHANGELOG.md +72 -72
  2. package/LICENSE +21 -21
  3. package/README.md +240 -240
  4. package/docs/README.md +100 -100
  5. package/docs/components/base/xt-button.md +114 -114
  6. package/docs/components/base/xt-card-item.md +104 -104
  7. package/docs/components/base/xt-card.md +108 -108
  8. package/docs/components/base/xt-config-provider.md +199 -199
  9. package/docs/components/base/xt-flex-box.md +115 -115
  10. package/docs/components/base/xt-grid-box.md +302 -302
  11. package/docs/components/base/xt-input.md +150 -150
  12. package/docs/components/base/xt-map-provider.md +23 -23
  13. package/docs/components/base/xt-map.md +331 -331
  14. package/docs/components/base/xt-step-price.md +165 -165
  15. package/docs/components/base/xt-text.md +212 -212
  16. package/docs/components/base/xt-time.md +165 -165
  17. package/docs/components/extend/ex-bar.md +67 -67
  18. package/docs/components/extend/ex-button.md +62 -62
  19. package/docs/components/extend/ex-card.md +86 -86
  20. package/docs/components/extend/ex-chart.md +463 -463
  21. package/docs/components/extend/ex-icon.md +189 -189
  22. package/docs/components/extend/ex-line.md +70 -70
  23. package/docs/components/extend/ex-multi.md +155 -155
  24. package/docs/components/extend/ex-pie.md +69 -69
  25. package/docs/components/extend/ex-select-tree.md +210 -210
  26. package/docs/components/extend/ex-table.md +590 -590
  27. package/docs/components/extend/ex-upload.md +134 -134
  28. package/docs/components/utils/size.md +147 -147
  29. package/docs/components/utils/theme.md +182 -182
  30. package/lib/index.common.js +4112 -4122
  31. package/lib/index.umd.js +4072 -4081
  32. package/lib/index.umd.min.js +3 -3
  33. package/package.json +80 -81
  34. package/src/components/ex-button/index.js +7 -7
  35. package/src/components/ex-button/index.vue +66 -66
  36. package/src/components/ex-button/style/index.scss +67 -67
  37. package/src/components/ex-card/index.js +7 -7
  38. package/src/components/ex-card/index.vue +68 -68
  39. package/src/components/ex-card/style/index.scss +73 -73
  40. package/src/components/ex-chart/index.js +7 -7
  41. package/src/components/ex-chart/index.vue +136 -136
  42. package/src/components/ex-date-picker/index.js +7 -7
  43. package/src/components/ex-icon/index.js +7 -7
  44. package/src/components/ex-icon/index.vue +168 -168
  45. package/src/components/ex-icon/style/index.scss +7 -7
  46. package/src/components/ex-page/index.js +7 -7
  47. package/src/components/ex-select-tree/index.js +7 -7
  48. package/src/components/ex-table/ExTableCell.vue +22 -22
  49. package/src/components/ex-table/index.js +7 -7
  50. package/src/components/ex-table/virtualScrollData.js +35 -35
  51. package/src/components/ex-upload/index.js +7 -7
  52. package/src/components/index.scss +39 -39
  53. package/src/components/xt-button/index.js +7 -7
  54. package/src/components/xt-button/index.vue +97 -97
  55. package/src/components/xt-card/index.js +7 -7
  56. package/src/components/xt-card/style/index.scss +48 -48
  57. package/src/components/xt-card-item/index.js +7 -7
  58. package/src/components/xt-card-item/style/index copy.scss +71 -71
  59. package/src/components/xt-card-item/style/index.scss +82 -82
  60. package/src/components/xt-config-provider/index.js +7 -7
  61. package/src/components/xt-config-provider/index.vue +362 -362
  62. package/src/components/xt-config-provider/style/index.scss +11 -11
  63. package/src/components/xt-flex-box/index.js +7 -7
  64. package/src/components/xt-flex-box/style/index.scss +81 -81
  65. package/src/components/xt-grid-box/index.js +7 -7
  66. package/src/components/xt-grid-box/style/index.scss +92 -92
  67. package/src/components/xt-grid-item/index.js +7 -7
  68. package/src/components/xt-grid-item/index.vue +106 -106
  69. package/src/components/xt-input/index.js +7 -7
  70. package/src/components/xt-input/index.vue +66 -66
  71. package/src/components/xt-input/style/index.scss +84 -84
  72. package/src/components/xt-map/adapters/amap.js +235 -235
  73. package/src/components/xt-map/adapters/baidu.js +254 -254
  74. package/src/components/xt-map/adapters/base.js +267 -267
  75. package/src/components/xt-map/adapters/index.js +29 -29
  76. package/src/components/xt-map/adapters/tianditu.js +242 -242
  77. package/src/components/xt-map/config/xt-map-config.js +197 -197
  78. package/src/components/xt-map/index.js +8 -8
  79. package/src/components/xt-map/index.vue +351 -351
  80. package/src/components/xt-map/loaders/script-loader.js +114 -114
  81. package/src/components/xt-map/provider.vue +200 -200
  82. package/src/components/xt-map/style/index.scss +77 -77
  83. package/src/components/xt-map-provider/index.js +8 -8
  84. package/src/components/xt-step-price/index.js +10 -10
  85. package/src/components/xt-step-price/index.vue +272 -272
  86. package/src/components/xt-step-price/style/index.scss +123 -123
  87. package/src/components/xt-step-price-item/index.js +7 -7
  88. package/src/components/xt-step-price-item/index.vue +187 -187
  89. package/src/components/xt-text/index.js +7 -7
  90. package/src/components/xt-text/index.vue +1 -1
  91. package/src/components/xt-text/style/index.scss +92 -92
  92. package/src/components/xt-time/index.js +7 -7
  93. package/src/components/xt-time/index.vue +313 -313
  94. package/src/components/xt-time/style/index.scss +23 -23
  95. package/src/config/element-registry.js +135 -135
  96. package/src/index.js +162 -178
  97. package/src/styles/css-variables.scss +257 -257
  98. package/src/styles/theme/background.scss +5 -5
  99. package/src/styles/theme/border-radius.scss +3 -3
  100. package/src/styles/theme/borders.scss +3 -3
  101. package/src/styles/theme/colors.scss +101 -101
  102. package/src/styles/theme/component-variables.scss +69 -69
  103. package/src/styles/theme/dark-variables.scss +28 -28
  104. package/src/styles/theme/font.scss +12 -12
  105. package/src/styles/theme/index.scss +11 -11
  106. package/src/styles/theme/shadows.scss +2 -2
  107. package/src/styles/theme/spacing.scss +4 -4
  108. package/src/styles/theme/transitions.scss +2 -2
  109. package/src/styles/theme/typography.scss +4 -4
  110. package/src/styles/variables-export.scss +85 -85
  111. package/src/utils/index.js +191 -202
@@ -1,73 +1,73 @@
1
- // ExCard 组件样式
2
- @import '../../../styles/element-theme.scss';
3
- @import '../../../styles/variables.scss';
4
-
5
- .ex-card {
6
- border-radius: 8px;
7
- transition: all 0.3s;
8
- font-size: var(--ex-card-font-size, 14px);
9
- background-color: var(--el-bg-color-block, #ffffff);
10
- color: var(--el-text-color-primary, #303133);
11
- border-color: var(--el-border-color, #303133);
12
-
13
- .el-card__header {
14
- padding: var(--ex-card-header-padding, 16px 20px);
15
- border-bottom: 1px solid var(--el-border-color, #ebeef5);
16
- background-color: var(--el-bg-color-block-head, #ffffff);
17
- font-weight: 600;
18
- }
19
-
20
- .el-card__body {
21
- padding: var(--ex-card-body-padding, 20px);
22
- }
23
- }
24
-
25
- .ex-card-small {
26
- font-size: 12px;
27
-
28
- .el-card__header {
29
- font-size: 12px;
30
- }
31
- }
32
-
33
- .ex-card-medium {
34
- font-size: 14px;
35
-
36
- .el-card__header {
37
- font-size: 14px;
38
- }
39
- }
40
-
41
- .ex-card-large {
42
- font-size: 16px;
43
-
44
- .el-card__header {
45
- font-size: 16px;
46
- }
47
- }
48
-
49
- .ex-card-always {
50
- box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
51
- }
52
-
53
- .ex-card-hover {
54
- box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
55
-
56
- &:hover {
57
- box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
58
- }
59
- }
60
-
61
- .ex-card-never {
62
- box-shadow: none;
63
- border: 1px solid var(--el-border-color, #ebeef5);
64
- }
65
-
66
- .ex-card-no-border {
67
- border: none;
68
-
69
- .el-card__header {
70
- border-bottom: none;
71
- }
72
- }
73
-
1
+ // ExCard 组件样式
2
+ @import '../../../styles/element-theme.scss';
3
+ @import '../../../styles/variables.scss';
4
+
5
+ .ex-card {
6
+ border-radius: 8px;
7
+ transition: all 0.3s;
8
+ font-size: var(--ex-card-font-size, 14px);
9
+ background-color: var(--el-bg-color-block, #ffffff);
10
+ color: var(--el-text-color-primary, #303133);
11
+ border-color: var(--el-border-color, #303133);
12
+
13
+ .el-card__header {
14
+ padding: var(--ex-card-header-padding, 16px 20px);
15
+ border-bottom: 1px solid var(--el-border-color, #ebeef5);
16
+ background-color: var(--el-bg-color-block-head, #ffffff);
17
+ font-weight: 600;
18
+ }
19
+
20
+ .el-card__body {
21
+ padding: var(--ex-card-body-padding, 20px);
22
+ }
23
+ }
24
+
25
+ .ex-card-small {
26
+ font-size: 12px;
27
+
28
+ .el-card__header {
29
+ font-size: 12px;
30
+ }
31
+ }
32
+
33
+ .ex-card-medium {
34
+ font-size: 14px;
35
+
36
+ .el-card__header {
37
+ font-size: 14px;
38
+ }
39
+ }
40
+
41
+ .ex-card-large {
42
+ font-size: 16px;
43
+
44
+ .el-card__header {
45
+ font-size: 16px;
46
+ }
47
+ }
48
+
49
+ .ex-card-always {
50
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
51
+ }
52
+
53
+ .ex-card-hover {
54
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
55
+
56
+ &:hover {
57
+ box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
58
+ }
59
+ }
60
+
61
+ .ex-card-never {
62
+ box-shadow: none;
63
+ border: 1px solid var(--el-border-color, #ebeef5);
64
+ }
65
+
66
+ .ex-card-no-border {
67
+ border: none;
68
+
69
+ .el-card__header {
70
+ border-bottom: none;
71
+ }
72
+ }
73
+
@@ -1,8 +1,8 @@
1
- import ExChart from './index.vue'
2
-
3
- ExChart.install = function (Vue) {
4
- Vue.component(ExChart.name, ExChart)
5
- }
6
-
7
- export default ExChart
1
+ import ExChart from './index.vue'
2
+
3
+ ExChart.install = function (Vue) {
4
+ Vue.component(ExChart.name, ExChart)
5
+ }
6
+
7
+ export default ExChart
8
8
  export { ExChart }
@@ -1,137 +1,137 @@
1
- <template>
2
- <ex-bar v-if="type=='bar'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-bar>
3
- <ex-line v-else-if="type=='line'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-line>
4
- <ex-pie v-else-if="type=='pie'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-pie>
5
- <ex-multi v-else-if="type=='multi'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-multi>
6
- </template>
7
- <script>
8
- import ExBar from "./ExBar.vue"
9
- import ExLine from "./ExLine.vue"
10
- import ExPie from "./ExPie.vue"
11
- import ExMulti from "./ExMulti.vue"
12
-
13
- export default {
14
- name: "ExChart",
15
- components: {
16
- ExBar,
17
- ExLine,
18
- ExPie,
19
- ExMulti
20
- },
21
- props: {
22
- theme: {
23
- type: String,
24
- default: ""
25
- },
26
- size: {
27
- type: String,
28
- default: "medium",
29
- validator: (value) => {
30
- return ['small', 'medium', 'large'].includes(value)
31
- }
32
- },
33
- type: {
34
- type: String,
35
- required: true,
36
- default: "bar"
37
- }
38
- },
39
- data() {
40
- return {
41
- myTheme: this.theme,
42
- mySize: this.size,
43
- observer: null
44
- };
45
- },
46
- mounted() {
47
- // 初始化时检测父元素的 data-theme
48
- this.detectParentTheme();
49
-
50
- // 监听父元素的 data-theme 属性变化
51
- this.observeThemeChange();
52
- },
53
- beforeUnmount() {
54
- // 清理观察器
55
- if (this.observer) {
56
- this.observer.disconnect();
57
- }
58
- },
59
- watch: {
60
- theme(newVal) {
61
- this.myTheme = newVal;
62
- },
63
- size(newVal) {
64
- this.mySize = newVal;
65
- }
66
- },
67
- methods: {
68
- // 检测父元素的 data-theme 属性
69
- detectParentTheme() {
70
- if (this.theme) {
71
- // 如果用户显式传入了 theme prop,使用传入的值
72
- this.myTheme = this.theme;
73
- return;
74
- }
75
-
76
- // 查找最近的带有 data-theme 属性的父元素
77
- let parent = this.$el ? this.$el.parentElement : null;
78
- while (parent) {
79
- const parentTheme = parent.getAttribute('data-theme');
80
- if (parentTheme) {
81
- this.myTheme = parentTheme === 'dark' ? 'dark' : 'default';
82
- return;
83
- }
84
- parent = parent.parentElement;
85
- }
86
-
87
- // 如果没有找到,检查 document.body 或 document.documentElement
88
- const bodyTheme = document.body.getAttribute('data-theme');
89
- const htmlTheme = document.documentElement.getAttribute('data-theme');
90
- if (bodyTheme === 'dark' || htmlTheme === 'dark') {
91
- this.myTheme = 'dark';
92
- } else {
93
- this.myTheme = 'default';
94
- }
95
- },
96
-
97
- // 监听主题变化
98
- observeThemeChange() {
99
- if (!this.$el) return;
100
-
101
- // 创建 MutationObserver 监听父元素的属性变化
102
- this.observer = new MutationObserver((mutations) => {
103
- mutations.forEach((mutation) => {
104
- if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
105
- const newTheme = mutation.target.getAttribute('data-theme');
106
- if (newTheme === 'dark') {
107
- this.myTheme = 'dark';
108
- } else if (newTheme === 'light') {
109
- this.myTheme = 'default';
110
- }
111
- }
112
- });
113
- });
114
-
115
- // 监听当前元素和所有父元素的属性变化
116
- let parent = this.$el.parentElement;
117
- while (parent) {
118
- this.observer.observe(parent, {
119
- attributes: true,
120
- attributeFilter: ['data-theme']
121
- });
122
- parent = parent.parentElement;
123
- }
124
-
125
- // 同时监听 body 和 html 的变化
126
- this.observer.observe(document.body, {
127
- attributes: true,
128
- attributeFilter: ['data-theme']
129
- });
130
- this.observer.observe(document.documentElement, {
131
- attributes: true,
132
- attributeFilter: ['data-theme']
133
- });
134
- }
135
- }
136
- };
1
+ <template>
2
+ <ex-bar v-if="type=='bar'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-bar>
3
+ <ex-line v-else-if="type=='line'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-line>
4
+ <ex-pie v-else-if="type=='pie'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-pie>
5
+ <ex-multi v-else-if="type=='multi'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-multi>
6
+ </template>
7
+ <script>
8
+ import ExBar from "./ExBar.vue"
9
+ import ExLine from "./ExLine.vue"
10
+ import ExPie from "./ExPie.vue"
11
+ import ExMulti from "./ExMulti.vue"
12
+
13
+ export default {
14
+ name: "ExChart",
15
+ components: {
16
+ ExBar,
17
+ ExLine,
18
+ ExPie,
19
+ ExMulti
20
+ },
21
+ props: {
22
+ theme: {
23
+ type: String,
24
+ default: ""
25
+ },
26
+ size: {
27
+ type: String,
28
+ default: "medium",
29
+ validator: (value) => {
30
+ return ['small', 'medium', 'large'].includes(value)
31
+ }
32
+ },
33
+ type: {
34
+ type: String,
35
+ required: true,
36
+ default: "bar"
37
+ }
38
+ },
39
+ data() {
40
+ return {
41
+ myTheme: this.theme,
42
+ mySize: this.size,
43
+ observer: null
44
+ };
45
+ },
46
+ mounted() {
47
+ // 初始化时检测父元素的 data-theme
48
+ this.detectParentTheme();
49
+
50
+ // 监听父元素的 data-theme 属性变化
51
+ this.observeThemeChange();
52
+ },
53
+ beforeUnmount() {
54
+ // 清理观察器
55
+ if (this.observer) {
56
+ this.observer.disconnect();
57
+ }
58
+ },
59
+ watch: {
60
+ theme(newVal) {
61
+ this.myTheme = newVal;
62
+ },
63
+ size(newVal) {
64
+ this.mySize = newVal;
65
+ }
66
+ },
67
+ methods: {
68
+ // 检测父元素的 data-theme 属性
69
+ detectParentTheme() {
70
+ if (this.theme) {
71
+ // 如果用户显式传入了 theme prop,使用传入的值
72
+ this.myTheme = this.theme;
73
+ return;
74
+ }
75
+
76
+ // 查找最近的带有 data-theme 属性的父元素
77
+ let parent = this.$el ? this.$el.parentElement : null;
78
+ while (parent) {
79
+ const parentTheme = parent.getAttribute('data-theme');
80
+ if (parentTheme) {
81
+ this.myTheme = parentTheme === 'dark' ? 'dark' : 'default';
82
+ return;
83
+ }
84
+ parent = parent.parentElement;
85
+ }
86
+
87
+ // 如果没有找到,检查 document.body 或 document.documentElement
88
+ const bodyTheme = document.body.getAttribute('data-theme');
89
+ const htmlTheme = document.documentElement.getAttribute('data-theme');
90
+ if (bodyTheme === 'dark' || htmlTheme === 'dark') {
91
+ this.myTheme = 'dark';
92
+ } else {
93
+ this.myTheme = 'default';
94
+ }
95
+ },
96
+
97
+ // 监听主题变化
98
+ observeThemeChange() {
99
+ if (!this.$el) return;
100
+
101
+ // 创建 MutationObserver 监听父元素的属性变化
102
+ this.observer = new MutationObserver((mutations) => {
103
+ mutations.forEach((mutation) => {
104
+ if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
105
+ const newTheme = mutation.target.getAttribute('data-theme');
106
+ if (newTheme === 'dark') {
107
+ this.myTheme = 'dark';
108
+ } else if (newTheme === 'light') {
109
+ this.myTheme = 'default';
110
+ }
111
+ }
112
+ });
113
+ });
114
+
115
+ // 监听当前元素和所有父元素的属性变化
116
+ let parent = this.$el.parentElement;
117
+ while (parent) {
118
+ this.observer.observe(parent, {
119
+ attributes: true,
120
+ attributeFilter: ['data-theme']
121
+ });
122
+ parent = parent.parentElement;
123
+ }
124
+
125
+ // 同时监听 body 和 html 的变化
126
+ this.observer.observe(document.body, {
127
+ attributes: true,
128
+ attributeFilter: ['data-theme']
129
+ });
130
+ this.observer.observe(document.documentElement, {
131
+ attributes: true,
132
+ attributeFilter: ['data-theme']
133
+ });
134
+ }
135
+ }
136
+ };
137
137
  </script>
@@ -1,8 +1,8 @@
1
- import ExDatePicker from './index.vue'
2
-
3
- ExDatePicker.install = function (Vue) {
4
- Vue.component(ExDatePicker.name, ExDatePicker)
5
- }
6
-
7
- export default ExDatePicker
1
+ import ExDatePicker from './index.vue'
2
+
3
+ ExDatePicker.install = function (Vue) {
4
+ Vue.component(ExDatePicker.name, ExDatePicker)
5
+ }
6
+
7
+ export default ExDatePicker
8
8
  export { ExDatePicker }
@@ -1,8 +1,8 @@
1
- import ExIcon from './index.vue'
2
-
3
- ExIcon.install = function (Vue) {
4
- Vue.component(ExIcon.name, ExIcon)
5
- }
6
-
7
- export default ExIcon
1
+ import ExIcon from './index.vue'
2
+
3
+ ExIcon.install = function (Vue) {
4
+ Vue.component(ExIcon.name, ExIcon)
5
+ }
6
+
7
+ export default ExIcon
8
8
  export { ExIcon }