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
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
+ :::