xt-element-ui 1.3.2 → 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 (112) 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 -0
  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 +4131 -4162
  31. package/lib/index.css +1 -1
  32. package/lib/index.umd.js +4099 -4129
  33. package/lib/index.umd.min.js +3 -3
  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-date-picker/index.js +7 -7
  44. package/src/components/ex-icon/index.js +7 -7
  45. package/src/components/ex-icon/index.vue +168 -168
  46. package/src/components/ex-icon/style/index.scss +7 -7
  47. package/src/components/ex-page/index.js +7 -7
  48. package/src/components/ex-select-tree/index.js +7 -7
  49. package/src/components/ex-table/ExTableCell.vue +22 -22
  50. package/src/components/ex-table/index.js +7 -7
  51. package/src/components/ex-table/virtualScrollData.js +35 -35
  52. package/src/components/ex-upload/index.js +7 -7
  53. package/src/components/index.scss +39 -39
  54. package/src/components/xt-button/index.js +7 -7
  55. package/src/components/xt-button/index.vue +97 -97
  56. package/src/components/xt-card/index.js +7 -7
  57. package/src/components/xt-card/style/index.scss +48 -48
  58. package/src/components/xt-card-item/index.js +7 -7
  59. package/src/components/xt-card-item/style/index copy.scss +71 -71
  60. package/src/components/xt-card-item/style/index.scss +82 -82
  61. package/src/components/xt-config-provider/index.js +7 -7
  62. package/src/components/xt-config-provider/index.vue +362 -362
  63. package/src/components/xt-config-provider/style/index.scss +11 -11
  64. package/src/components/xt-flex-box/index.js +7 -7
  65. package/src/components/xt-flex-box/style/index.scss +81 -81
  66. package/src/components/xt-grid-box/index.js +7 -7
  67. package/src/components/xt-grid-box/style/index.scss +92 -92
  68. package/src/components/xt-grid-item/index.js +7 -7
  69. package/src/components/xt-grid-item/index.vue +106 -106
  70. package/src/components/xt-input/index.js +7 -7
  71. package/src/components/xt-input/index.vue +66 -66
  72. package/src/components/xt-input/style/index.scss +84 -84
  73. package/src/components/xt-map/adapters/amap.js +235 -235
  74. package/src/components/xt-map/adapters/baidu.js +254 -254
  75. package/src/components/xt-map/adapters/base.js +267 -267
  76. package/src/components/xt-map/adapters/index.js +29 -29
  77. package/src/components/xt-map/adapters/tianditu.js +242 -242
  78. package/src/components/xt-map/config/xt-map-config.js +197 -197
  79. package/src/components/xt-map/index.js +8 -30
  80. package/src/components/xt-map/index.vue +351 -351
  81. package/src/components/xt-map/loaders/script-loader.js +114 -114
  82. package/src/components/xt-map/provider.vue +200 -200
  83. package/src/components/xt-map/style/index.scss +77 -77
  84. package/src/components/xt-map-provider/index.js +8 -0
  85. package/src/components/xt-step-price/index.js +10 -10
  86. package/src/components/xt-step-price/index.vue +272 -272
  87. package/src/components/xt-step-price/style/index.scss +123 -123
  88. package/src/components/xt-step-price-item/index.js +7 -7
  89. package/src/components/xt-step-price-item/index.vue +187 -187
  90. package/src/components/xt-text/index.js +7 -7
  91. package/src/components/xt-text/index.vue +1 -1
  92. package/src/components/xt-text/style/index.scss +92 -92
  93. package/src/components/xt-time/index.js +7 -7
  94. package/src/components/xt-time/index.vue +313 -313
  95. package/src/components/xt-time/style/index.scss +23 -23
  96. package/src/config/element-registry.js +135 -135
  97. package/src/index.js +162 -178
  98. package/src/styles/css-variables.scss +257 -257
  99. package/src/styles/theme/background.scss +5 -5
  100. package/src/styles/theme/border-radius.scss +3 -3
  101. package/src/styles/theme/borders.scss +3 -3
  102. package/src/styles/theme/colors.scss +101 -101
  103. package/src/styles/theme/component-variables.scss +69 -69
  104. package/src/styles/theme/dark-variables.scss +28 -28
  105. package/src/styles/theme/font.scss +12 -12
  106. package/src/styles/theme/index.scss +11 -11
  107. package/src/styles/theme/shadows.scss +2 -2
  108. package/src/styles/theme/spacing.scss +4 -4
  109. package/src/styles/theme/transitions.scss +2 -2
  110. package/src/styles/theme/typography.scss +4 -4
  111. package/src/styles/variables-export.scss +85 -85
  112. 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
+ :::