xt-element-ui 2.2.1 → 2.2.3

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 (139) hide show
  1. package/README.md +1 -1
  2. package/docs/README.md +10 -3
  3. package/docs/components/base/xt-button.md +11 -4
  4. package/docs/components/base/xt-card.md +5 -11
  5. package/docs/components/base/xt-config-provider.md +2 -0
  6. package/docs/components/base/xt-date-picker.md +7 -26
  7. package/docs/components/base/xt-flow.md +404 -0
  8. package/docs/components/base/xt-grid-box.md +34 -34
  9. package/docs/components/base/xt-multi.md +5 -5
  10. package/docs/components/base/xt-tabs.md +51 -6
  11. package/docs/components/base/xt-text.md +20 -3
  12. package/docs/components/business/xt-chart.md +1 -0
  13. package/lib/css/1.87a493be.css +1 -0
  14. package/lib/index.common.1.js +294 -0
  15. package/lib/index.common.2.js +141 -0
  16. package/lib/index.common.js +12125 -118823
  17. package/lib/index.css +1 -1
  18. package/lib/index.umd.1.js +294 -0
  19. package/lib/index.umd.2.js +141 -0
  20. package/lib/index.umd.js +12131 -118828
  21. package/lib/index.umd.min.1.js +1 -0
  22. package/lib/index.umd.min.2.js +1 -0
  23. package/lib/index.umd.min.js +1 -1
  24. package/lib/xt-badge/xt-badge.common.js +1 -1
  25. package/lib/xt-badge/xt-badge.css +1 -1
  26. package/lib/xt-badge/xt-badge.umd.js +1 -1
  27. package/lib/xt-button/xt-button.common.js +13 -8
  28. package/lib/xt-button/xt-button.css +1 -1
  29. package/lib/xt-button/xt-button.umd.js +13 -8
  30. package/lib/xt-button/xt-button.umd.min.js +1 -1
  31. package/lib/xt-card/xt-card.common.js +5 -5
  32. package/lib/xt-card/xt-card.umd.js +5 -5
  33. package/lib/xt-card/xt-card.umd.min.js +1 -1
  34. package/lib/xt-card-item/xt-card-item.common.js +4 -4
  35. package/lib/xt-card-item/xt-card-item.umd.js +4 -4
  36. package/lib/xt-card-item/xt-card-item.umd.min.js +1 -1
  37. package/lib/xt-chart/xt-chart.common.js +1969 -108924
  38. package/lib/xt-chart/xt-chart.css +1 -1
  39. package/lib/xt-chart/xt-chart.umd.js +1975 -108929
  40. package/lib/xt-chart/xt-chart.umd.min.js +1 -1
  41. package/lib/xt-config-provider/xt-config-provider.common.js +561 -107504
  42. package/lib/xt-config-provider/xt-config-provider.css +1 -1
  43. package/lib/xt-config-provider/xt-config-provider.umd.js +567 -107509
  44. package/lib/xt-config-provider/xt-config-provider.umd.min.js +1 -1
  45. package/lib/xt-date-picker/css/1.87a493be.css +1 -0
  46. package/lib/xt-date-picker/xt-date-picker.common.1.js +294 -0
  47. package/lib/xt-date-picker/xt-date-picker.common.2.js +141 -0
  48. package/lib/xt-date-picker/xt-date-picker.common.js +201 -332
  49. package/lib/xt-date-picker/xt-date-picker.css +1 -1
  50. package/lib/xt-date-picker/xt-date-picker.umd.1.js +294 -0
  51. package/lib/xt-date-picker/xt-date-picker.umd.2.js +141 -0
  52. package/lib/xt-date-picker/xt-date-picker.umd.js +201 -332
  53. package/lib/xt-date-picker/xt-date-picker.umd.min.1.js +1 -0
  54. package/lib/xt-date-picker/xt-date-picker.umd.min.2.js +1 -0
  55. package/lib/xt-date-picker/xt-date-picker.umd.min.js +1 -1
  56. package/lib/xt-flex-box/xt-flex-box.common.js +1 -1
  57. package/lib/xt-flex-box/xt-flex-box.umd.js +1 -1
  58. package/lib/xt-flow/demo.html +10 -0
  59. package/lib/xt-flow/index.js +1 -0
  60. package/lib/xt-flow/xt-flow.common.js +638 -0
  61. package/lib/xt-flow/xt-flow.css +1 -0
  62. package/lib/xt-flow/xt-flow.umd.js +648 -0
  63. package/lib/xt-flow/xt-flow.umd.min.js +1 -0
  64. package/lib/xt-form-schema/xt-form-schema.common.js +1 -1
  65. package/lib/xt-form-schema/xt-form-schema.umd.js +1 -1
  66. package/lib/xt-grid-box/xt-grid-box.common.js +1 -1
  67. package/lib/xt-grid-box/xt-grid-box.umd.js +1 -1
  68. package/lib/xt-grid-item/xt-grid-item.common.js +1 -1
  69. package/lib/xt-grid-item/xt-grid-item.umd.js +1 -1
  70. package/lib/xt-icon/xt-icon.common.js +1 -1
  71. package/lib/xt-icon/xt-icon.umd.js +1 -1
  72. package/lib/xt-input/xt-input.common.js +1 -1
  73. package/lib/xt-input/xt-input.umd.js +1 -1
  74. package/lib/xt-list/xt-list.common.js +1 -1
  75. package/lib/xt-list/xt-list.umd.js +1 -1
  76. package/lib/xt-map/xt-map.common.js +1 -1
  77. package/lib/xt-map/xt-map.umd.js +1 -1
  78. package/lib/xt-map-provider/xt-map-provider.common.js +1 -1
  79. package/lib/xt-map-provider/xt-map-provider.umd.js +1 -1
  80. package/lib/xt-page/xt-page.common.js +1 -1
  81. package/lib/xt-page/xt-page.umd.js +1 -1
  82. package/lib/xt-progress/xt-progress.common.js +1 -1
  83. package/lib/xt-progress/xt-progress.umd.js +1 -1
  84. package/lib/xt-scroll-arrow/xt-scroll-arrow.common.js +1 -1
  85. package/lib/xt-scroll-arrow/xt-scroll-arrow.umd.js +1 -1
  86. package/lib/xt-select-tree/xt-select-tree.common.js +1 -1
  87. package/lib/xt-select-tree/xt-select-tree.umd.js +1 -1
  88. package/lib/xt-step-price/xt-step-price.common.js +2 -2
  89. package/lib/xt-step-price/xt-step-price.umd.js +2 -2
  90. package/lib/xt-step-price-item/xt-step-price-item.common.js +1 -1
  91. package/lib/xt-step-price-item/xt-step-price-item.umd.js +1 -1
  92. package/lib/xt-tab-pane/xt-tab-pane.common.js +1 -1
  93. package/lib/xt-tab-pane/xt-tab-pane.umd.js +1 -1
  94. package/lib/xt-table/xt-table.common.js +2 -2
  95. package/lib/xt-table/xt-table.umd.js +2 -2
  96. package/lib/xt-tabs/xt-tabs.common.js +5 -27
  97. package/lib/xt-tabs/xt-tabs.css +1 -1
  98. package/lib/xt-tabs/xt-tabs.umd.js +5 -27
  99. package/lib/xt-tabs/xt-tabs.umd.min.js +1 -1
  100. package/lib/xt-text/xt-text.common.js +7 -4
  101. package/lib/xt-text/xt-text.css +1 -1
  102. package/lib/xt-text/xt-text.umd.js +7 -4
  103. package/lib/xt-text/xt-text.umd.min.js +1 -1
  104. package/lib/xt-time/xt-time.common.js +1 -1
  105. package/lib/xt-time/xt-time.umd.js +1 -1
  106. package/lib/xt-transfer-tree/xt-transfer-tree.common.js +1 -1
  107. package/lib/xt-transfer-tree/xt-transfer-tree.umd.js +1 -1
  108. package/lib/xt-upload/xt-upload.common.js +11 -11
  109. package/lib/xt-upload/xt-upload.umd.js +12 -12
  110. package/lib/xt-upload/xt-upload.umd.min.js +1 -1
  111. package/package.json +5 -6
  112. package/src/components/index.scss +7 -1
  113. package/src/components/xt-badge/style/index.scss +6 -6
  114. package/src/components/xt-button/index.vue +11 -6
  115. package/src/components/xt-button/style/index.scss +7 -5
  116. package/src/components/xt-card/index.vue +3 -3
  117. package/src/components/xt-card-item/index.vue +2 -2
  118. package/src/components/xt-chart/XtMulti.vue +8 -18
  119. package/src/components/xt-chart/XtPie.vue +1 -0
  120. package/src/components/xt-chart/utils.js +84 -50
  121. package/src/components/xt-config-provider/index.vue +56 -54
  122. package/src/components/xt-date-picker/component/Picker.vue +2 -46
  123. package/src/components/xt-date-picker/component/RangeDate.vue +4 -4
  124. package/src/components/xt-date-picker/index.js +1 -0
  125. package/src/components/xt-date-picker/index.vue +3 -23
  126. package/src/components/xt-date-picker/style/index.scss +62 -0
  127. package/src/components/xt-flow/flowable-parser.js +244 -0
  128. package/src/components/xt-flow/index.js +8 -0
  129. package/src/components/xt-flow/index.vue +226 -0
  130. package/src/components/xt-flow/style/index.scss +359 -0
  131. package/src/components/xt-input/style/index.scss +1 -1
  132. package/src/components/xt-tabs/index.vue +3 -174
  133. package/src/components/xt-tabs/style/index.scss +131 -121
  134. package/src/components/xt-text/index.vue +5 -2
  135. package/src/components/xt-text/style/index.scss +6 -6
  136. package/src/index.js +8 -13
  137. package/src/styles/css-variables.scss +73 -1
  138. package/src/styles/theme/index.scss +0 -1
  139. package/src/styles/theme/dark-variables.scss +0 -0
@@ -6,12 +6,12 @@
6
6
  ```vue
7
7
  <template>
8
8
  <XtGridBox :columns="3" gap="16px">
9
- <div style="padding: 16px; background: #f0f0f0; border-radius: 8px;">项目1</div>
10
- <div style="padding: 16px; background: #f0f0f0; border-radius: 8px;">项目2</div>
11
- <div style="padding: 16px; background: #f0f0f0; border-radius: 8px;">项目3</div>
12
- <div style="padding: 16px; background: #f0f0f0; border-radius: 8px;">项目4</div>
13
- <div style="padding: 16px; background: #f0f0f0; border-radius: 8px;">项目5</div>
14
- <div style="padding: 16px; background: #f0f0f0; border-radius: 8px;">项目6</div>
9
+ <div style="padding: 16px; background: #1890ff; color: white; border-radius: 8px;">元素1</div>
10
+ <div style="padding: 16px; background: #52c41a; color: white; border-radius: 8px;">元素2</div>
11
+ <div style="padding: 16px; background: #faad14; color: white; border-radius: 8px;">元素3</div>
12
+ <div style="padding: 16px; background: #f56c6c; color: white; border-radius: 8px;">元素4</div>
13
+ <div style="padding: 16px; background: #9adbbe; color: white; border-radius: 8px;">元素5</div>
14
+ <div style="padding: 16px; background: #40ffef; color: white; border-radius: 8px;">元素6</div>
15
15
  </XtGridBox>
16
16
  </template>
17
17
  ```
@@ -56,7 +56,7 @@
56
56
  ```vue
57
57
  <template>
58
58
  <XtGridBox :columns="4" gap="12px">
59
- <div v-for="i in 8" :key="i" style="padding: 12px; background: #e6f7ff; border-radius: 4px; text-align: center;">{{ i }}</div>
59
+ <div v-for="i in 8" :key="i" style="padding: 12px; background: #1890ff; border-radius: 4px; text-align: center;">{{ i }}</div>
60
60
  </XtGridBox>
61
61
  </template>
62
62
  ```
@@ -70,21 +70,21 @@
70
70
  <div>
71
71
  <!-- 数字方式:自动 repeat -->
72
72
  <XtGridBox :columns="3" gap="8px" style="margin-bottom: 16px;">
73
- <div v-for="i in 3" :key="i" style="padding: 12px; background: #f0f0f0;">{{ i }}</div>
73
+ <div v-for="i in 3" :key="i" style="padding: 12px; background: #1890ff;">{{ i }}</div>
74
74
  </XtGridBox>
75
75
 
76
76
  <!-- 字符串方式 -->
77
77
  <XtGridBox columns="200px 1fr 1fr" gap="8px" style="margin-bottom: 16px;">
78
- <div style="padding: 12px; background: #e6f7ff;">固定宽度</div>
79
- <div style="padding: 12px; background: #f6ffed;">弹性1</div>
80
- <div style="padding: 12px; background: #fff7e6;">弹性2</div>
78
+ <div style="padding: 12px; background: #52c41a;">固定宽度</div>
79
+ <div style="padding: 12px; background: #faad14;">弹性1</div>
80
+ <div style="padding: 12px; background: #f5222d;">弹性2</div>
81
81
  </XtGridBox>
82
82
 
83
83
  <!-- 数组方式 -->
84
84
  <XtGridBox :columns="['100px', '1fr', '2fr']" gap="8px">
85
- <div style="padding: 12px; background: #f9f0ff;">固定</div>
86
- <div style="padding: 12px; background: #e6fffb;">1份</div>
87
- <div style="padding: 12px; background: #fff7e6;">2份</div>
85
+ <div style="padding: 12px; background: #52c41a;">固定</div>
86
+ <div style="padding: 12px; background: #faad14;">1份</div>
87
+ <div style="padding: 12px; background: #f5222d;">2份</div>
88
88
  </XtGridBox>
89
89
  </div>
90
90
  </template>
@@ -97,13 +97,13 @@
97
97
  ```vue
98
98
  <template>
99
99
  <XtGridBox :columns="4" gap="12px">
100
- <XtGridItem :span="2" style="padding: 24px; background: #1890ff; color: white; border-radius: 8px;">跨2列</XtGridItem>
100
+ <XtGridItem :span="2" style="padding: 24px; background: #52c41a; color: white; border-radius: 8px;">跨2列</XtGridItem>
101
101
  <XtGridItem style="padding: 24px; background: #52c41a; color: white; border-radius: 8px;">普通</XtGridItem>
102
102
  <XtGridItem style="padding: 24px; background: #52c41a; color: white; border-radius: 8px;">普通</XtGridItem>
103
103
  <XtGridItem :rowSpan="2" style="padding: 48px 16px; background: #faad14; color: white; border-radius: 8px;">跨2行</XtGridItem>
104
- <XtGridItem style="padding: 24px; background: #f5222d; color: white; border-radius: 8px;">普通</XtGridItem>
105
- <XtGridItem style="padding: 24px; background: #f5222d; color: white; border-radius: 8px;">普通</XtGridItem>
106
- <XtGridItem style="padding: 24px; background: #f5222d; color: white; border-radius: 8px;">普通</XtGridItem>
104
+ <XtGridItem style="padding: 24px; background: #52c41a; color: white; border-radius: 8px;">普通</XtGridItem>
105
+ <XtGridItem style="padding: 24px; background: #52c41a; color: white; border-radius: 8px;">普通</XtGridItem>
106
+ <XtGridItem style="padding: 24px; background: #52c41a; color: white; border-radius: 8px;">普通</XtGridItem>
107
107
  </XtGridBox>
108
108
  </template>
109
109
  ```
@@ -139,16 +139,16 @@
139
139
  <div>
140
140
  <!-- 子项居中对齐 -->
141
141
  <XtGridBox :columns="3" gap="8px" align="center" style="height: 120px; background: #f0f0f0; margin-bottom: 16px;">
142
- <div style="padding: 8px 16px; background: white;">居中</div>
143
- <div style="padding: 8px 16px; background: white;">居中</div>
144
- <div style="padding: 8px 16px; background: white;">居中</div>
142
+ <div style="padding: 8px 16px; background: #1890ff; color: white;">居中</div>
143
+ <div style="padding: 8px 16px; background: #1890ff; color: white;">居中</div>
144
+ <div style="padding: 8px 16px; background: #1890ff; color: white;">居中</div>
145
145
  </XtGridBox>
146
146
 
147
147
  <!-- 内容两端对齐 -->
148
148
  <XtGridBox :columns="3" gap="8px" justify="space-between" style="background: #f0f0f0;">
149
- <div style="padding: 8px 16px; background: white;">左</div>
150
- <div style="padding: 8px 16px; background: white;">中</div>
151
- <div style="padding: 8px 16px; background: white;">右</div>
149
+ <div style="padding: 8px 16px;background: #1890ff; color: white;">左</div>
150
+ <div style="padding: 8px 16px;background: #1890ff; color: white;">中</div>
151
+ <div style="padding: 8px 16px;background: #1890ff; color: white;">右</div>
152
152
  </XtGridBox>
153
153
  </div>
154
154
  </template>
@@ -161,7 +161,7 @@
161
161
  ```vue
162
162
  <template>
163
163
  <XtGridBox :columns="3" rowGap="24px" colGap="8px">
164
- <div v-for="i in 6" :key="i" style="padding: 12px; background: #e6f7ff; text-align: center;">{{ i }}</div>
164
+ <div v-for="i in 6" :key="i" style="padding: 12px; background: #1890ff; text-align: center;">{{ i }}</div>
165
165
  </XtGridBox>
166
166
  </template>
167
167
  ```
@@ -173,7 +173,7 @@
173
173
  ```vue
174
174
  <template>
175
175
  <XtGridBox columns="repeat(auto-fill, minmax(150px, 1fr))" gap="12px">
176
- <div v-for="i in 8" :key="i" style="padding: 16px; background: #f0f0f0; text-align: center;">项目{{ i }}</div>
176
+ <div v-for="i in 8" :key="i" style="padding: 16px; background: #1890ff; text-align: center;">项目{{ i }}</div>
177
177
  </XtGridBox>
178
178
  </template>
179
179
  ```
@@ -186,22 +186,22 @@
186
186
  <template>
187
187
  <XtGridBox :columns="2" gap="16px">
188
188
  <!-- 左侧 -->
189
- <div style="padding: 16px; background: #e6f7ff;">
189
+ <div style="padding: 16px; background: #f5222d;">
190
190
  <h4>左侧面板</h4>
191
191
  <XtGridBox :columns="1" gap="8px">
192
- <div style="padding: 8px; background: white;">子项1</div>
193
- <div style="padding: 8px; background: white;">子项2</div>
192
+ <div style="padding: 8px; background: #1890ff;">子项1</div>
193
+ <div style="padding: 8px; background: #1890ff;">子项2</div>
194
194
  </XtGridBox>
195
195
  </div>
196
196
 
197
197
  <!-- 右侧 -->
198
- <div style="padding: 16px; background: #f6ffed;">
198
+ <div style="padding: 16px; background: #faad14;">
199
199
  <h4>右侧面板</h4>
200
200
  <XtGridBox :columns="2" gap="8px">
201
- <div style="padding: 8px; background: white;">A</div>
202
- <div style="padding: 8px; background: white;">B</div>
203
- <div style="padding: 8px; background: white;">C</div>
204
- <div style="padding: 8px; background: white;">D</div>
201
+ <div style="padding: 8px; background: #1890ff;">A</div>
202
+ <div style="padding: 8px; background: #1890ff;">B</div>
203
+ <div style="padding: 8px; background: #1890ff;">C</div>
204
+ <div style="padding: 8px; background: #1890ff;">D</div>
205
205
  </XtGridBox>
206
206
  </div>
207
207
  </XtGridBox>
@@ -52,14 +52,13 @@ export default {
52
52
  | `highlightKey` | String | - | 高亮系列的 label |
53
53
  | `config` | Object | - | 配置对象 |
54
54
 
55
- ## config 配置说明
55
+ ## 配置说明
56
56
 
57
57
  | 属性 | 类型 | 默认值 | 说明 |
58
58
  |------|------|--------|------|
59
- | `interval` | Number | `0` | X 轴标签间隔 |
60
- | `rotate` | Number | `0` | X 轴标签旋转角度 |
61
- | `gridbottom` | Number | `40` | 底部网格间距 |
62
- | `isShowthreshold` | Boolean | `false` | 是否显示阈值线 |
59
+ | `type` | Number | `40` | 底部网格间距 |
60
+ | `areaStyle` | Number | `0` | X 轴标签旋转角度 |
61
+ | `smooth` | Number | `0` | X 轴标签间隔 |
63
62
 
64
63
  ## 示例
65
64
 
@@ -138,6 +137,7 @@ export default {
138
137
  label: "增长率",
139
138
  unit: "%",
140
139
  type: "line",
140
+ areaStyle: true,
141
141
  data: [
142
142
  { label: "1月", value: 10 },
143
143
  { label: "2月", value: 20 },
@@ -61,7 +61,7 @@ export default {
61
61
  ```vue
62
62
  <template>
63
63
  <div style="display: flex; flex-direction: column; gap: 16px;">
64
- <XtTabs v-model="activeName">
64
+ <XtTabs v-model="activeName" type="card">
65
65
  <XtTabPane label="卡片式" name="first">卡片式标签页</XtTabPane>
66
66
  <XtTabPane label="配置管理" name="second">配置管理内容</XtTabPane>
67
67
  </XtTabs>
@@ -89,10 +89,15 @@ export default {
89
89
  ::: demo 标签位置
90
90
  ```vue
91
91
  <template>
92
- <XtTabs v-model="activeName" tab-position="left">
93
- <XtTabPane label="用户管理" name="first">用户管理内容</XtTabPane>
94
- <XtTabPane label="配置管理" name="second">配置管理内容</XtTabPane>
95
- <XtTabPane label="角色管理" name="third">角色管理内容</XtTabPane>
92
+ <XtTabs v-model="activeName" tab-position="top" closable addable @edit="handleTabsEdit">
93
+ <XtTabPane
94
+ :key="item.name"
95
+ v-for="(item, index) in editableTabs"
96
+ :label="item.title"
97
+ :name="item.name"
98
+ >
99
+ {{item.content}}
100
+ </XtTabPane>
96
101
  </XtTabs>
97
102
  </template>
98
103
 
@@ -100,7 +105,47 @@ export default {
100
105
  export default {
101
106
  data() {
102
107
  return {
103
- activeName: 'first'
108
+ editableTabsValue: '2',
109
+ editableTabs: [{
110
+ title: 'Tab 1',
111
+ name: '1',
112
+ content: 'Tab 1 content'
113
+ }, {
114
+ title: 'Tab 2',
115
+ name: '2',
116
+ content: 'Tab 2 content'
117
+ }],
118
+ tabIndex: 2
119
+ }
120
+ },
121
+ methods: {
122
+ handleTabsEdit(targetName, action) {
123
+ if (action === 'add') {
124
+ let newTabName = ++this.tabIndex + '';
125
+ this.editableTabs.push({
126
+ title: 'New Tab',
127
+ name: newTabName,
128
+ content: 'New Tab content'
129
+ });
130
+ this.editableTabsValue = newTabName;
131
+ }
132
+ if (action === 'remove') {
133
+ let tabs = this.editableTabs;
134
+ let activeName = this.editableTabsValue;
135
+ if (activeName === targetName) {
136
+ tabs.forEach((tab, index) => {
137
+ if (tab.name === targetName) {
138
+ let nextTab = tabs[index + 1] || tabs[index - 1];
139
+ if (nextTab) {
140
+ activeName = nextTab.name;
141
+ }
142
+ }
143
+ });
144
+ }
145
+
146
+ this.editableTabsValue = activeName;
147
+ this.editableTabs = tabs.filter(tab => tab.name !== targetName);
148
+ }
104
149
  }
105
150
  }
106
151
  }
@@ -6,7 +6,6 @@
6
6
  ```vue
7
7
  <template>
8
8
  <XtText type="primary">主要文本</XtText>
9
- <div style="width: 80px;"><XtText ellipsis>溢出隐藏文本溢出隐藏文本</XtText></div>
10
9
  </template>
11
10
  ```
12
11
  :::
@@ -17,8 +16,12 @@
17
16
  | `type` | String | - | `primary`、`success`、`warning`、`danger` | 文本颜色类型 |
18
17
  | `size` | String | base | `extra-large`、`large`、`medium`、`base`、`small`、`extra-small` | 字体大小 |
19
18
  | `bold` | Boolean | false | - | 是否加粗 |
20
- | `letterSpacing` | String / Number | - | - | 字间距 |
21
- | `money` | Boolean | false | - | 是否启用金额格式化 |
19
+ | `ellipsis` | Boolean | false | - | 是否显示省略号 |
20
+ | `ellipsisRows` | Number | 1 | 1至10 | 省略行数 |
21
+ | `showTooltip` | Boolean | true | - | 当文字溢出隐藏时,是否显示悬浮提示 |
22
+ | `tooltipPlacement` | String | `top` | - | 悬浮窗提示位置 |
23
+ | `format` | String | normal | 'normal', 'thousand', 'money' |- | 格式化模式 |
24
+ | `money` | Boolean | false | - | 是否启用金额格式化(使用format替代) |
22
25
  | `value` | Number / String | - | - | 金额数值 |
23
26
  | `currency` | String | CNY | `CNY`、`USD`、`EUR`、`JPY`、`GBP`、`AUD`、`CAD` | 货币类型 |
24
27
  | `decimals` | Number | 2 | 0-10 | 小数位数 |
@@ -85,6 +88,20 @@
85
88
  ```
86
89
  :::
87
90
 
91
+
92
+ ### 溢出隐藏
93
+ ::: demo 溢出隐藏
94
+ ```vue
95
+ <template>
96
+ <div style="display: flex; flex-direction: column; gap: 8px;width: 80px;">
97
+ <XtText ellipsis>溢出隐藏文本溢出隐藏文本</XtText>
98
+ <XtText ellipsis :ellipsisRows="5">溢出隐藏文本显示5行,溢出隐藏文本显示5行,溢出隐藏文本显示5行,溢出隐藏文本显示5行,</XtText>
99
+ <XtText ellipsis :showTooltip="false">不显示浮窗提示信息</XtText>
100
+ </div>
101
+ </template>
102
+ ```
103
+ :::
104
+
88
105
  ### 组合使用
89
106
 
90
107
  ::: demo 组合使用
@@ -0,0 +1 @@
1
+ # chart
@@ -0,0 +1 @@
1
+ .range-picker[data-v-32b85e82]{display:flex;align-items:center;flex-wrap:wrap;gap:8px;width:100%}.range-picker .el-date-editor[data-v-32b85e82]{flex:1;min-width:130px}.split[data-v-32b85e82]{flex-shrink:0;padding:0 4px}@media (max-width:360px){.range-picker[data-v-32b85e82]{flex-direction:column;align-items:stretch}.split[data-v-32b85e82]{text-align:center;margin:4px 0}}
@@ -0,0 +1,294 @@
1
+ ((typeof self !== 'undefined' ? self : this)["webpackJsonpindex"] = (typeof self !== 'undefined' ? self : this)["webpackJsonpindex"] || []).push([[1,2],{
2
+
3
+ /***/ "0e3e":
4
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
5
+
6
+ "use strict";
7
+ /* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_RangeDate_vue_vue_type_style_index_0_id_32b85e82_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("16dd");
8
+ /* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_RangeDate_vue_vue_type_style_index_0_id_32b85e82_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_RangeDate_vue_vue_type_style_index_0_id_32b85e82_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__);
9
+ /* unused harmony reexport * */
10
+
11
+
12
+ /***/ }),
13
+
14
+ /***/ "16dd":
15
+ /***/ (function(module, exports, __webpack_require__) {
16
+
17
+ // extracted by mini-css-extract-plugin
18
+
19
+ /***/ }),
20
+
21
+ /***/ "1db3":
22
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
23
+
24
+ "use strict";
25
+ // ESM COMPAT FLAG
26
+ __webpack_require__.r(__webpack_exports__);
27
+
28
+ // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"d8e97dbc-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/xt-date-picker/component/RangeDate.vue?vue&type=template&id=32b85e82&scoped=true
29
+ var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:"range-picker"},[_c('Picker',{attrs:{"type":_vm.type,"size":"small","placeholder":_vm.startPlaceholder,"disabled":_vm.disabled,"disabled-date":_vm.disabledStart},on:{"change":_vm.handleChange},model:{value:(_vm.startVal),callback:function ($$v) {_vm.startVal=$$v},expression:"startVal"}}),_c('span',{staticClass:"split"},[_vm._v(_vm._s(_vm.separator))]),_c('Picker',{attrs:{"type":_vm.type,"size":"small","placeholder":_vm.endPlaceholder,"disabled":_vm.disabled,"disabled-date":_vm.disabledEnd},on:{"change":_vm.handleChange},model:{value:(_vm.endVal),callback:function ($$v) {_vm.endVal=$$v},expression:"endVal"}})],1)
30
+ }
31
+ var staticRenderFns = []
32
+
33
+
34
+ // CONCATENATED MODULE: ./src/components/xt-date-picker/component/RangeDate.vue?vue&type=template&id=32b85e82&scoped=true
35
+
36
+ // EXTERNAL MODULE: ./src/components/xt-date-picker/component/Picker.vue + 4 modules
37
+ var Picker = __webpack_require__("b0ea");
38
+
39
+ // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/xt-date-picker/component/RangeDate.vue?vue&type=script&lang=js
40
+
41
+
42
+ /* harmony default export */ var RangeDatevue_type_script_lang_js = ({
43
+ name: 'RangeDate',
44
+ components: { Picker: Picker["default"] },
45
+ props: {
46
+ // 父组件v-model绑定数组 [startStr, endStr]
47
+ value: {
48
+ type: Array,
49
+ default: () => [null, null]
50
+ },
51
+ type: {
52
+ type: String,
53
+ default: 'date'
54
+ },
55
+ separator: {
56
+ type: String,
57
+ default: '至'
58
+ },
59
+ disabled: { type: Boolean, default: false }
60
+ },
61
+ data() {
62
+ return {
63
+ startVal: '',
64
+ endVal: ''
65
+ }
66
+ },
67
+ watch: {
68
+ // 外部回填回显
69
+ value: {
70
+ handler(val) {
71
+ const [s, e] = val || []
72
+ this.startVal = s || ''
73
+ this.endVal = e || ''
74
+ },
75
+ immediate: true
76
+ }
77
+ },
78
+ computed: {
79
+ startDate() {
80
+ return this.startVal ? new Date(this.startVal) : null
81
+ },
82
+ endDate() {
83
+ return this.endVal ? new Date(this.endVal) : null
84
+ },
85
+ startPlaceholder() {
86
+ const map = {
87
+ date: '开始日期',
88
+ month: '开始月份',
89
+ year: '开始年份',
90
+ quarter: '开始季度',
91
+ week: '开始周'
92
+ }
93
+ return map[this.type] || '开始日期'
94
+ },
95
+ endPlaceholder() {
96
+ const map = {
97
+ date: '结束日期',
98
+ month: '结束月份',
99
+ year: '结束年份',
100
+ quarter: '结束季度',
101
+ week: '结束周'
102
+ }
103
+ return map[this.type] || '结束日期'
104
+ }
105
+ },
106
+ methods: {
107
+ // 禁用开始:不能晚于已选结束
108
+ disabledStart(time) {
109
+ if (!this.endDate) return false
110
+ return time.getTime() > this.endDate.getTime()
111
+ },
112
+ // 禁用结束:不能早于已选开始
113
+ disabledEnd(time) {
114
+ if (!this.startDate) return false
115
+ return time.getTime() < this.startDate.getTime()
116
+ },
117
+ // 任意日期变更同步抛出数组给父组件
118
+ handleChange() {
119
+ this.$emit('input', [this.startVal, this.endVal])
120
+ }
121
+ }
122
+ });
123
+
124
+ // CONCATENATED MODULE: ./src/components/xt-date-picker/component/RangeDate.vue?vue&type=script&lang=js
125
+ /* harmony default export */ var component_RangeDatevue_type_script_lang_js = (RangeDatevue_type_script_lang_js);
126
+ // EXTERNAL MODULE: ./src/components/xt-date-picker/component/RangeDate.vue?vue&type=style&index=0&id=32b85e82&prod&scoped=true&lang=css
127
+ var RangeDatevue_type_style_index_0_id_32b85e82_prod_scoped_true_lang_css = __webpack_require__("0e3e");
128
+
129
+ // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
130
+ var componentNormalizer = __webpack_require__("2877");
131
+
132
+ // CONCATENATED MODULE: ./src/components/xt-date-picker/component/RangeDate.vue
133
+
134
+
135
+
136
+
137
+
138
+
139
+ /* normalize component */
140
+
141
+ var component = Object(componentNormalizer["a" /* default */])(
142
+ component_RangeDatevue_type_script_lang_js,
143
+ render,
144
+ staticRenderFns,
145
+ false,
146
+ null,
147
+ "32b85e82",
148
+ null
149
+
150
+ )
151
+
152
+ /* harmony default export */ var RangeDate = __webpack_exports__["default"] = (component.exports);
153
+
154
+ /***/ }),
155
+
156
+ /***/ "b0ea":
157
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
158
+
159
+ "use strict";
160
+ // ESM COMPAT FLAG
161
+ __webpack_require__.r(__webpack_exports__);
162
+
163
+ // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"d8e97dbc-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/xt-date-picker/component/Picker.vue?vue&type=template&id=4a866a03
164
+ var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:"date-picker"},[(_vm.type !== 'quarter')?_c('el-date-picker',_vm._g(_vm._b({attrs:{"type":_vm.pickerType,"value-format":_vm.valueFormat,"disabled":_vm.disabled,"placeholder":_vm.placeholder,"popper-append-to-body":"","popper-class":"base-date-popper"},model:{value:(_vm.innerValue),callback:function ($$v) {_vm.innerValue=$$v},expression:"innerValue"}},'el-date-picker',_vm.$attrs,false),_vm.$listeners)):_c('el-popover',{attrs:{"trigger":"manual","placement":"bottom-start","width":"240"},model:{value:(_vm.quarterPopVisible),callback:function ($$v) {_vm.quarterPopVisible=$$v},expression:"quarterPopVisible"}},[_c('div',{staticClass:"quarter-panel"},[_c('div',{staticClass:"quarter-header"},[_c('el-button',{attrs:{"icon":"el-icon-d-arrow-left"},on:{"click":function($event){_vm.year--}}}),_c('span',[_vm._v(_vm._s(_vm.year)+" 年")]),_c('el-button',{attrs:{"icon":"el-icon-d-arrow-right"},on:{"click":function($event){_vm.year++}}})],1),_c('div',{staticClass:"quarter-list"},_vm._l((4),function(q){return _c('div',{key:q,staticClass:"quarter-item",class:{ active: _vm.quarterNum === q },on:{"click":function($event){return _vm.selectQuarter(q)}}},[_vm._v(" Q"+_vm._s(q)+" ")])}),0)]),_c('el-input',{ref:"quarterInput",attrs:{"slot":"reference","size":"small","readonly":"","placeholder":_vm.placeholder,"disabled":_vm.disabled,"clearable":""},on:{"clear":_vm.handleClearQuarter},slot:"reference",model:{value:(_vm.quarterShowText),callback:function ($$v) {_vm.quarterShowText=$$v},expression:"quarterShowText"}},[_c('i',{staticClass:"el-icon-date",attrs:{"slot":"affix"},slot:"affix"})])],1)],1)
165
+ }
166
+ var staticRenderFns = []
167
+
168
+
169
+ // CONCATENATED MODULE: ./src/components/xt-date-picker/component/Picker.vue?vue&type=template&id=4a866a03
170
+
171
+ // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/xt-date-picker/component/Picker.vue?vue&type=script&lang=js
172
+
173
+ /* harmony default export */ var Pickervue_type_script_lang_js = ({
174
+ name: 'BaseDatePicker',
175
+ inheritAttrs: false,
176
+ props: {
177
+ value: {
178
+ type: [String, null],
179
+ default: null
180
+ },
181
+ type: {
182
+ type: String,
183
+ default: 'date',
184
+ validator: val => ['date', 'month', 'year', 'quarter', 'week'].includes(val)
185
+ },
186
+ disabled: {
187
+ type: Boolean,
188
+ default: false
189
+ }
190
+ },
191
+ data() {
192
+ return {
193
+ quarterPopVisible: false,
194
+ year: new Date().getFullYear(),
195
+ quarterNum: null
196
+ }
197
+ },
198
+ computed: {
199
+ pickerType() {
200
+ return this.type === 'quarter' ? null : this.type
201
+ },
202
+ placeholder() {
203
+ const map = {
204
+ date: '请选择日期',
205
+ month: '请选择月份',
206
+ year: '请选择年份',
207
+ quarter: '请选择季度',
208
+ week: '请选择周'
209
+ }
210
+ return map[this.type] || '请选择日期'
211
+ },
212
+ valueFormat() {
213
+ const map = {
214
+ date: 'yyyy-MM-dd',
215
+ month: 'yyyy-MM',
216
+ year: 'yyyy',
217
+ quarter: 'yyyy-Qq',
218
+ week: 'yyyy-WW'
219
+ }
220
+ return map[this.type] || 'yyyy-MM-dd'
221
+ },
222
+ innerValue: {
223
+ get() { return this.value },
224
+ set(val) { this.$emit('input', val) }
225
+ },
226
+ quarterShowText() {
227
+ if (!this.value) return ''
228
+ return `${this.year}-Q${this.quarterNum}`
229
+ }
230
+ },
231
+ watch: {
232
+ value: {
233
+ handler(val) {
234
+ if (this.type !== 'quarter' || !val) {
235
+ this.quarterNum = null
236
+ return
237
+ }
238
+ const [y, q] = val.split('-Q')
239
+ this.year = Number(y)
240
+ this.quarterNum = Number(q)
241
+ },
242
+ immediate: true
243
+ }
244
+ },
245
+ methods: {
246
+ selectQuarter(q) {
247
+ this.quarterNum = q
248
+ const val = `${this.year}-Q${q}`
249
+ this.$emit('input', val)
250
+ this.quarterPopVisible = false
251
+ },
252
+ handleClearQuarter() {
253
+ this.quarterNum = null
254
+ this.$emit('input', null)
255
+ }
256
+ },
257
+ mounted() {
258
+ if (this.type === 'quarter' && this.$refs.quarterInput) {
259
+ this.$refs.quarterInput.$el.addEventListener('click', () => {
260
+ if (!this.disabled) this.quarterPopVisible = true
261
+ })
262
+ }
263
+ }
264
+ });
265
+
266
+ // CONCATENATED MODULE: ./src/components/xt-date-picker/component/Picker.vue?vue&type=script&lang=js
267
+ /* harmony default export */ var component_Pickervue_type_script_lang_js = (Pickervue_type_script_lang_js);
268
+ // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
269
+ var componentNormalizer = __webpack_require__("2877");
270
+
271
+ // CONCATENATED MODULE: ./src/components/xt-date-picker/component/Picker.vue
272
+
273
+
274
+
275
+
276
+
277
+ /* normalize component */
278
+
279
+ var component = Object(componentNormalizer["a" /* default */])(
280
+ component_Pickervue_type_script_lang_js,
281
+ render,
282
+ staticRenderFns,
283
+ false,
284
+ null,
285
+ null,
286
+ null
287
+
288
+ )
289
+
290
+ /* harmony default export */ var Picker = __webpack_exports__["default"] = (component.exports);
291
+
292
+ /***/ })
293
+
294
+ }]);