xt-element-ui 1.3.3 → 1.4.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 (124) 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 +4575 -4186
  31. package/lib/index.css +1 -1
  32. package/lib/index.umd.js +4475 -4085
  33. package/lib/index.umd.min.js +5 -5
  34. package/package.json +80 -81
  35. package/src/components/ex-button/index.js +7 -7
  36. package/src/components/ex-button/index.vue +66 -66
  37. package/src/components/ex-button/style/index.scss +67 -67
  38. package/src/components/ex-card/index.js +7 -7
  39. package/src/components/ex-card/index.vue +68 -68
  40. package/src/components/ex-card/style/index.scss +73 -73
  41. package/src/components/ex-chart/index.js +7 -7
  42. package/src/components/ex-chart/index.vue +136 -136
  43. package/src/components/ex-chart/theme/dark.js +4 -1
  44. package/src/components/ex-date-picker/index.js +7 -7
  45. package/src/components/ex-icon/index.js +7 -7
  46. package/src/components/ex-icon/index.vue +168 -168
  47. package/src/components/ex-icon/style/index.scss +7 -7
  48. package/src/components/ex-page/index.js +7 -7
  49. package/src/components/ex-select-tree/index.js +7 -7
  50. package/src/components/ex-table/ExTableCell.vue +22 -22
  51. package/src/components/ex-table/index.js +7 -7
  52. package/src/components/ex-table/virtualScrollData.js +35 -35
  53. package/src/components/ex-upload/index.js +7 -7
  54. package/src/components/index.scss +49 -40
  55. package/src/components/xt-badge/index.js +7 -0
  56. package/src/components/xt-badge/index.vue +71 -0
  57. package/src/components/xt-badge/style/index.scss +88 -0
  58. package/src/components/xt-button/index.js +7 -7
  59. package/src/components/xt-button/index.vue +97 -97
  60. package/src/components/xt-card/index.js +7 -7
  61. package/src/components/xt-card/style/index.scss +48 -48
  62. package/src/components/xt-card-item/index.js +7 -7
  63. package/src/components/xt-card-item/index.vue +5 -5
  64. package/src/components/xt-card-item/style/index copy.scss +71 -71
  65. package/src/components/xt-card-item/style/index.scss +82 -82
  66. package/src/components/xt-config-provider/index.js +7 -7
  67. package/src/components/xt-config-provider/index.vue +362 -362
  68. package/src/components/xt-config-provider/style/index.scss +11 -11
  69. package/src/components/xt-flex-box/index.js +7 -7
  70. package/src/components/xt-flex-box/style/index.scss +81 -81
  71. package/src/components/xt-grid-box/index.js +7 -7
  72. package/src/components/xt-grid-box/style/index.scss +92 -92
  73. package/src/components/xt-grid-item/index.js +7 -7
  74. package/src/components/xt-grid-item/index.vue +106 -106
  75. package/src/components/xt-input/index.js +7 -7
  76. package/src/components/xt-input/index.vue +66 -66
  77. package/src/components/xt-input/style/index.scss +84 -84
  78. package/src/components/xt-map/adapters/amap.js +235 -235
  79. package/src/components/xt-map/adapters/baidu.js +254 -254
  80. package/src/components/xt-map/adapters/base.js +267 -267
  81. package/src/components/xt-map/adapters/index.js +29 -29
  82. package/src/components/xt-map/adapters/tianditu.js +242 -242
  83. package/src/components/xt-map/config/xt-map-config.js +197 -197
  84. package/src/components/xt-map/index.js +8 -8
  85. package/src/components/xt-map/index.vue +351 -351
  86. package/src/components/xt-map/loaders/script-loader.js +114 -114
  87. package/src/components/xt-map/provider.vue +200 -200
  88. package/src/components/xt-map/style/index.scss +77 -77
  89. package/src/components/xt-map-provider/index.js +8 -8
  90. package/src/components/xt-progress/index.js +7 -0
  91. package/src/components/xt-progress/index.vue +103 -0
  92. package/src/components/xt-progress/style/index.scss +119 -0
  93. package/src/components/xt-step-price/index.js +10 -10
  94. package/src/components/xt-step-price/index.vue +272 -272
  95. package/src/components/xt-step-price/style/index.scss +123 -123
  96. package/src/components/xt-step-price-item/index.js +7 -7
  97. package/src/components/xt-step-price-item/index.vue +187 -187
  98. package/src/components/xt-tabs/TabPane.vue +36 -0
  99. package/src/components/xt-tabs/index.js +10 -0
  100. package/src/components/xt-tabs/index.vue +113 -0
  101. package/src/components/xt-tabs/style/index.scss +197 -0
  102. package/src/components/xt-text/index.js +7 -7
  103. package/src/components/xt-text/index.vue +16 -2
  104. package/src/components/xt-text/style/index.scss +110 -92
  105. package/src/components/xt-time/index.js +7 -7
  106. package/src/components/xt-time/index.vue +313 -313
  107. package/src/components/xt-time/style/index.scss +23 -23
  108. package/src/config/element-registry.js +135 -135
  109. package/src/index.js +169 -178
  110. package/src/styles/css-variables.scss +257 -257
  111. package/src/styles/theme/background.scss +5 -5
  112. package/src/styles/theme/border-radius.scss +3 -3
  113. package/src/styles/theme/borders.scss +3 -3
  114. package/src/styles/theme/colors.scss +101 -101
  115. package/src/styles/theme/component-variables.scss +69 -69
  116. package/src/styles/theme/dark-variables.scss +28 -28
  117. package/src/styles/theme/font.scss +12 -12
  118. package/src/styles/theme/index.scss +11 -11
  119. package/src/styles/theme/shadows.scss +2 -2
  120. package/src/styles/theme/spacing.scss +4 -4
  121. package/src/styles/theme/transitions.scss +2 -2
  122. package/src/styles/theme/typography.scss +4 -4
  123. package/src/styles/variables-export.scss +85 -85
  124. package/src/utils/index.js +191 -202
package/docs/components/base/xt-flex-box.md CHANGED
@@ -1,115 +1,115 @@
1
- ## XtFlexBox 弹性布局组件
2
-
3
- 弹性布局组件，基于 CSS Flexbox 实现，提供便捷的布局能力。
4
-
5
- ## 基本用法
6
-
7
- ::: demo 基本用法
8
- ```vue
9
- <template>
10
- <XtFlexBox gap="16px">
11
- <div style="width: 80px; height: 40px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;">子元素1</div>
12
- <div style="width: 80px; height: 40px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;">子元素2</div>
13
- <div style="width: 80px; height: 40px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;">子元素3</div>
14
- </XtFlexBox>
15
- </template>
16
- ```
17
- :::
18
-
19
- ## 属性说明
20
- | 属性 | 类型 | 默认值 | 可选值 | 说明 |
21
- |------|------|--------|--------|------|
22
- | `type` | String | flex | - | 布局类型 |
23
- | `align` | String | center | `start`、`center`、`end`、`stretch`、`baseline` | 交叉轴对齐方式 |
24
- | `content` | String | start | `start`、`center`、`end`、`between`、`around`、`evenly` | 主轴对齐方式 |
25
- | `direction` | String | row | `row`、`row-reverse`、`column`、`column-reverse` | 排列方向 |
26
- | `wrap` | String | unset | `wrap`、`nowrap`、`wrap-reverse` | 是否换行 |
27
- | `gap` | String | - | - | 子元素间距 |
28
-
29
- ## 示例
30
-
31
- ### 水平居中且两端对齐
32
- ::: demo 水平居中且两端对齐
33
- ```vue
34
- <template>
35
- <XtFlexBox content="space-between" align="center">
36
- <span>左侧内容</span>
37
- <span>右侧内容</span>
38
- </XtFlexBox>
39
- </template>
40
- ```
41
- :::
42
-
43
- ### 垂直布局
44
-
45
- ::: demo 垂直布局
46
- ```vue
47
- <template>
48
- <XtFlexBox direction="column" gap="12px">
49
- <div style="background: #1890ff; color: white; padding: 8px;">顶部</div>
50
- <div style="background: #52c41a; color: white; padding: 8px;">中部</div>
51
- <div style="background: #faad14; color: white; padding: 8px;">底部</div>
52
- </XtFlexBox>
53
- </template>
54
- ```
55
- :::
56
-
57
- ### 均匀分布
58
-
59
- ::: demo 均匀分布
60
- ```vue
61
- <template>
62
- <XtFlexBox content="space-around">
63
- <div style="width: 60px; height: 60px; background: #e6f7ff; border-radius: 8px; display: flex; align-items: center; justify-content: center;">1</div>
64
- <div style="width: 60px; height: 60px; background: #e6f7ff; border-radius: 8px; display: flex; align-items: center; justify-content: center;">2</div>
65
- <div style="width: 60px; height: 60px; background: #e6f7ff; border-radius: 8px; display: flex; align-items: center; justify-content: center;">3</div>
66
- <div style="width: 60px; height: 60px; background: #e6f7ff; border-radius: 8px; display: flex; align-items: center; justify-content: center;">4</div>
67
- </XtFlexBox>
68
- </template>
69
- ```
70
- :::
71
-
72
- ### 自动换行
73
-
74
- ::: demo 自动换行
75
- ```vue
76
- <template>
77
- <XtFlexBox wrap="wrap" gap="8px">
78
- <div v-for="i in 10" :key="i" style="width: 80px; height: 80px; background: #f0f0f0; border-radius: 8px; display: flex; align-items: center; justify-content: center;">{{ i }}</div>
79
- </XtFlexBox>
80
- </template>
81
- ```
82
- :::
83
-
84
- ### 反向排列
85
-
86
- ::: demo 反向排列
87
- ```vue
88
- <template>
89
- <XtFlexBox direction="row-reverse">
90
- <span style="padding: 8px; background: #f5f5f5;">第一</span>
91
- <span style="padding: 8px; background: #f5f5f5;">第二</span>
92
- <span style="padding: 8px; background: #f5f5f5;">第三</span>
93
- </XtFlexBox>
94
- </template>
95
- ```
96
- :::
97
-
98
- ### 嵌套使用
99
-
100
- ::: demo 嵌套使用
101
- ```vue
102
- <template>
103
- <XtFlexBox direction="column" gap="16px">
104
- <XtFlexBox content="space-between">
105
- <span>头部左侧</span>
106
- <span>头部右侧</span>
107
- </XtFlexBox>
108
- <XtFlexBox>
109
- <div style="flex: 1; background: #e6f7ff; padding: 16px;">主内容区</div>
110
- <div style="width: 200px; background: #f6ffed; padding: 16px;">侧边栏</div>
111
- </XtFlexBox>
112
- </XtFlexBox>
113
- </template>
114
- ```
115
- :::
1
+ ## XtFlexBox 弹性布局组件
2
+
3
+ 弹性布局组件，基于 CSS Flexbox 实现，提供便捷的布局能力。
4
+
5
+ ## 基本用法
6
+
7
+ ::: demo 基本用法
8
+ ```vue
9
+ <template>
10
+ <XtFlexBox gap="16px">
11
+ <div style="width: 80px; height: 40px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;">子元素1</div>
12
+ <div style="width: 80px; height: 40px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;">子元素2</div>
13
+ <div style="width: 80px; height: 40px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;">子元素3</div>
14
+ </XtFlexBox>
15
+ </template>
16
+ ```
17
+ :::
18
+
19
+ ## 属性说明
20
+ | 属性 | 类型 | 默认值 | 可选值 | 说明 |
21
+ |------|------|--------|--------|------|
22
+ | `type` | String | flex | - | 布局类型 |
23
+ | `align` | String | center | `start`、`center`、`end`、`stretch`、`baseline` | 交叉轴对齐方式 |
24
+ | `content` | String | start | `start`、`center`、`end`、`between`、`around`、`evenly` | 主轴对齐方式 |
25
+ | `direction` | String | row | `row`、`row-reverse`、`column`、`column-reverse` | 排列方向 |
26
+ | `wrap` | String | unset | `wrap`、`nowrap`、`wrap-reverse` | 是否换行 |
27
+ | `gap` | String | - | - | 子元素间距 |
28
+
29
+ ## 示例
30
+
31
+ ### 水平居中且两端对齐
32
+ ::: demo 水平居中且两端对齐
33
+ ```vue
34
+ <template>
35
+ <XtFlexBox content="space-between" align="center">
36
+ <span>左侧内容</span>
37
+ <span>右侧内容</span>
38
+ </XtFlexBox>
39
+ </template>
40
+ ```
41
+ :::
42
+
43
+ ### 垂直布局
44
+
45
+ ::: demo 垂直布局
46
+ ```vue
47
+ <template>
48
+ <XtFlexBox direction="column" gap="12px">
49
+ <div style="background: #1890ff; color: white; padding: 8px;">顶部</div>
50
+ <div style="background: #52c41a; color: white; padding: 8px;">中部</div>
51
+ <div style="background: #faad14; color: white; padding: 8px;">底部</div>
52
+ </XtFlexBox>
53
+ </template>
54
+ ```
55
+ :::
56
+
57
+ ### 均匀分布
58
+
59
+ ::: demo 均匀分布
60
+ ```vue
61
+ <template>
62
+ <XtFlexBox content="space-around">
63
+ <div style="width: 60px; height: 60px; background: #e6f7ff; border-radius: 8px; display: flex; align-items: center; justify-content: center;">1</div>
64
+ <div style="width: 60px; height: 60px; background: #e6f7ff; border-radius: 8px; display: flex; align-items: center; justify-content: center;">2</div>
65
+ <div style="width: 60px; height: 60px; background: #e6f7ff; border-radius: 8px; display: flex; align-items: center; justify-content: center;">3</div>
66
+ <div style="width: 60px; height: 60px; background: #e6f7ff; border-radius: 8px; display: flex; align-items: center; justify-content: center;">4</div>
67
+ </XtFlexBox>
68
+ </template>
69
+ ```
70
+ :::
71
+
72
+ ### 自动换行
73
+
74
+ ::: demo 自动换行
75
+ ```vue
76
+ <template>
77
+ <XtFlexBox wrap="wrap" gap="8px">
78
+ <div v-for="i in 10" :key="i" style="width: 80px; height: 80px; background: #f0f0f0; border-radius: 8px; display: flex; align-items: center; justify-content: center;">{{ i }}</div>
79
+ </XtFlexBox>
80
+ </template>
81
+ ```
82
+ :::
83
+
84
+ ### 反向排列
85
+
86
+ ::: demo 反向排列
87
+ ```vue
88
+ <template>
89
+ <XtFlexBox direction="row-reverse">
90
+ <span style="padding: 8px; background: #f5f5f5;">第一</span>
91
+ <span style="padding: 8px; background: #f5f5f5;">第二</span>
92
+ <span style="padding: 8px; background: #f5f5f5;">第三</span>
93
+ </XtFlexBox>
94
+ </template>
95
+ ```
96
+ :::
97
+
98
+ ### 嵌套使用
99
+
100
+ ::: demo 嵌套使用
101
+ ```vue
102
+ <template>
103
+ <XtFlexBox direction="column" gap="16px">
104
+ <XtFlexBox content="space-between">
105
+ <span>头部左侧</span>
106
+ <span>头部右侧</span>
107
+ </XtFlexBox>
108
+ <XtFlexBox>
109
+ <div style="flex: 1; background: #e6f7ff; padding: 16px;">主内容区</div>
110
+ <div style="width: 200px; background: #f6ffed; padding: 16px;">侧边栏</div>
111
+ </XtFlexBox>
112
+ </XtFlexBox>
113
+ </template>
114
+ ```
115
+ :::