vue-devui 1.0.0-pre.0 → 1.0.0-rc.2

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 (264) hide show
  1. package/README.md +126 -187
  2. package/alert/index.es.js +28 -30
  3. package/alert/index.umd.js +1 -1
  4. package/auto-complete/index.es.js +67 -82
  5. package/auto-complete/index.umd.js +3 -1
  6. package/auto-complete/style.css +1 -1
  7. package/badge/index.es.js +1 -1
  8. package/badge/index.umd.js +1 -1
  9. package/badge/style.css +1 -1
  10. package/button/index.es.js +39 -40
  11. package/button/index.umd.js +1 -1
  12. package/countdown/index.es.js +2 -1
  13. package/editable-select/index.es.js +122 -163
  14. package/editable-select/index.umd.js +1 -1
  15. package/fullscreen/index.es.js +13 -16
  16. package/fullscreen/index.umd.js +1 -1
  17. package/icon/index.es.js +39 -57
  18. package/icon/index.umd.js +1 -1
  19. package/image-preview/index.es.js +2 -1
  20. package/modal/index.es.js +81 -76
  21. package/modal/index.umd.js +1 -1
  22. package/modal/style.css +1 -1
  23. package/notification/index.es.js +38 -40
  24. package/notification/index.umd.js +1 -1
  25. package/nuxt/components/PanelBody.js +3 -0
  26. package/nuxt/components/PanelFooter.js +3 -0
  27. package/nuxt/components/PanelHeader.js +3 -0
  28. package/nuxt/components/Timeline.js +3 -0
  29. package/nuxt/components/TimelineItem.js +3 -0
  30. package/nuxt/components/alertProps.js +3 -0
  31. package/nuxt/components/fullscreenProps.js +3 -0
  32. package/nuxt/components/iconProps.js +2 -0
  33. package/nuxt/components/paginationProps.js +3 -0
  34. package/nuxt/components/panelProps.js +3 -0
  35. package/nuxt/components/searchProps.js +3 -0
  36. package/nuxt/components/tagProps.js +3 -0
  37. package/overlay/index.es.js +44 -37
  38. package/overlay/index.umd.js +1 -1
  39. package/overlay/style.css +1 -1
  40. package/package.json +8 -43
  41. package/pagination/index.es.js +10 -12
  42. package/pagination/index.umd.js +1 -1
  43. package/panel/index.es.js +45 -32
  44. package/panel/index.umd.js +1 -1
  45. package/popover/index.es.js +46 -39
  46. package/popover/index.umd.js +6 -6
  47. package/popover/style.css +1 -1
  48. package/progress/index.es.js +1 -1
  49. package/progress/index.umd.js +1 -1
  50. package/progress/style.css +1 -1
  51. package/radio/index.es.js +11 -11
  52. package/radio/index.umd.js +1 -1
  53. package/radio/style.css +1 -1
  54. package/read-tip/index.es.js +6 -3
  55. package/result/index.es.js +38 -53
  56. package/result/index.umd.js +1 -1
  57. package/ripple/index.es.js +47 -42
  58. package/ripple/index.umd.js +1 -1
  59. package/search/index.es.js +2 -5
  60. package/search/index.umd.js +4 -4
  61. package/skeleton/index.es.js +17 -17
  62. package/skeleton/index.umd.js +1 -1
  63. package/slider/index.es.js +60 -59
  64. package/slider/index.umd.js +1 -1
  65. package/splitter/index.es.js +215 -160
  66. package/splitter/index.umd.js +11 -11
  67. package/splitter/style.css +1 -1
  68. package/status/index.es.js +1 -4
  69. package/status/index.umd.js +1 -1
  70. package/status/style.css +1 -1
  71. package/style.css +1 -1
  72. package/tag/index.es.js +15 -18
  73. package/tag/index.umd.js +1 -1
  74. package/tag/style.css +1 -1
  75. package/tag-input/index.es.js +4 -2
  76. package/{accordion → timeline}/index.d.ts +0 -0
  77. package/{time-axis → timeline}/index.es.js +65 -78
  78. package/timeline/index.umd.js +1 -0
  79. package/{anchor → timeline}/package.json +1 -1
  80. package/timeline/style.css +1 -0
  81. package/upload/index.es.js +38 -40
  82. package/upload/index.umd.js +1 -1
  83. package/vue-devui.es.js +1478 -1196
  84. package/vue-devui.umd.js +19 -17
  85. package/accordion/index.es.js +0 -720
  86. package/accordion/index.umd.js +0 -1
  87. package/accordion/package.json +0 -7
  88. package/accordion/style.css +0 -1
  89. package/anchor/index.d.ts +0 -7
  90. package/anchor/index.es.js +0 -263
  91. package/anchor/index.umd.js +0 -1
  92. package/anchor/style.css +0 -1
  93. package/back-top/index.d.ts +0 -7
  94. package/back-top/index.es.js +0 -128
  95. package/back-top/index.umd.js +0 -1
  96. package/back-top/package.json +0 -7
  97. package/back-top/style.css +0 -1
  98. package/breadcrumb/index.d.ts +0 -7
  99. package/breadcrumb/index.es.js +0 -127
  100. package/breadcrumb/index.umd.js +0 -1
  101. package/breadcrumb/package.json +0 -7
  102. package/breadcrumb/style.css +0 -1
  103. package/carousel/index.d.ts +0 -7
  104. package/carousel/index.es.js +0 -329
  105. package/carousel/index.umd.js +0 -1
  106. package/carousel/package.json +0 -7
  107. package/carousel/style.css +0 -1
  108. package/cascader/index.d.ts +0 -7
  109. package/cascader/index.es.js +0 -5963
  110. package/cascader/index.umd.js +0 -27
  111. package/cascader/package.json +0 -7
  112. package/cascader/style.css +0 -1
  113. package/color-picker/index.d.ts +0 -7
  114. package/color-picker/index.es.js +0 -8187
  115. package/color-picker/index.umd.js +0 -27
  116. package/color-picker/package.json +0 -7
  117. package/color-picker/style.css +0 -1
  118. package/date-picker/index.d.ts +0 -7
  119. package/date-picker/index.es.js +0 -1171
  120. package/date-picker/index.umd.js +0 -1
  121. package/date-picker/package.json +0 -7
  122. package/date-picker/style.css +0 -1
  123. package/dragdrop/index.d.ts +0 -7
  124. package/dragdrop/index.es.js +0 -157
  125. package/dragdrop/index.umd.js +0 -1
  126. package/dragdrop/package.json +0 -7
  127. package/drawer/index.d.ts +0 -7
  128. package/drawer/index.es.js +0 -234
  129. package/drawer/index.umd.js +0 -1
  130. package/drawer/package.json +0 -7
  131. package/drawer/style.css +0 -1
  132. package/dropdown/index.d.ts +0 -7
  133. package/dropdown/index.es.js +0 -638
  134. package/dropdown/index.umd.js +0 -1
  135. package/dropdown/package.json +0 -7
  136. package/dropdown/style.css +0 -1
  137. package/form/index.d.ts +0 -7
  138. package/form/index.es.js +0 -7865
  139. package/form/index.umd.js +0 -27
  140. package/form/package.json +0 -7
  141. package/form/style.css +0 -1
  142. package/gantt/index.d.ts +0 -7
  143. package/gantt/index.es.js +0 -523
  144. package/gantt/index.umd.js +0 -1
  145. package/gantt/package.json +0 -7
  146. package/gantt/style.css +0 -1
  147. package/input-icon/index.d.ts +0 -7
  148. package/input-icon/index.es.js +0 -331
  149. package/input-icon/index.umd.js +0 -1
  150. package/input-icon/package.json +0 -7
  151. package/input-icon/style.css +0 -1
  152. package/input-number/index.d.ts +0 -7
  153. package/input-number/index.es.js +0 -240
  154. package/input-number/index.umd.js +0 -1
  155. package/input-number/package.json +0 -7
  156. package/input-number/style.css +0 -1
  157. package/list/index.d.ts +0 -7
  158. package/list/index.es.js +0 -39
  159. package/list/index.umd.js +0 -1
  160. package/list/package.json +0 -7
  161. package/list/style.css +0 -1
  162. package/nav-sprite/index.d.ts +0 -7
  163. package/nav-sprite/index.es.js +0 -68
  164. package/nav-sprite/index.umd.js +0 -1
  165. package/nav-sprite/package.json +0 -7
  166. package/nuxt/components/Accordion.js +0 -3
  167. package/nuxt/components/Anchor.js +0 -3
  168. package/nuxt/components/BackTop.js +0 -3
  169. package/nuxt/components/Breadcrumb.js +0 -3
  170. package/nuxt/components/Carousel.js +0 -3
  171. package/nuxt/components/CarouselItem.js +0 -3
  172. package/nuxt/components/Cascader.js +0 -3
  173. package/nuxt/components/ColorPicker.js +0 -3
  174. package/nuxt/components/Column.js +0 -3
  175. package/nuxt/components/DatePicker.js +0 -3
  176. package/nuxt/components/Drawer.js +0 -3
  177. package/nuxt/components/DrawerService.js +0 -3
  178. package/nuxt/components/Dropdown.js +0 -3
  179. package/nuxt/components/DropdownMenu.js +0 -3
  180. package/nuxt/components/Form.js +0 -3
  181. package/nuxt/components/FormControl.js +0 -3
  182. package/nuxt/components/FormItem.js +0 -3
  183. package/nuxt/components/FormLabel.js +0 -3
  184. package/nuxt/components/FormOperation.js +0 -3
  185. package/nuxt/components/Gantt.js +0 -3
  186. package/nuxt/components/InputIcon.js +0 -3
  187. package/nuxt/components/InputNumber.js +0 -3
  188. package/nuxt/components/List.js +0 -3
  189. package/nuxt/components/ListItem.js +0 -3
  190. package/nuxt/components/NavSprite.js +0 -2
  191. package/nuxt/components/QuadrantDiagram.js +0 -3
  192. package/nuxt/components/Select.js +0 -3
  193. package/nuxt/components/StepsGuide.js +0 -3
  194. package/nuxt/components/StickSlider.js +0 -3
  195. package/nuxt/components/Sticky.js +0 -2
  196. package/nuxt/components/Table.js +0 -3
  197. package/nuxt/components/Tabs.js +0 -3
  198. package/nuxt/components/TimeAxis.js +0 -3
  199. package/nuxt/components/TimeAxisItem.js +0 -3
  200. package/nuxt/components/TimePicker.js +0 -3
  201. package/nuxt/components/Tooltip.js +0 -3
  202. package/nuxt/components/Transfer.js +0 -3
  203. package/nuxt/components/Tree.js +0 -3
  204. package/nuxt/components/TreeSelect.js +0 -3
  205. package/nuxt/components/dropdownMenuProps.js +0 -3
  206. package/nuxt/components/tooltipProps.js +0 -3
  207. package/quadrant-diagram/index.d.ts +0 -7
  208. package/quadrant-diagram/index.es.js +0 -5728
  209. package/quadrant-diagram/index.umd.js +0 -27
  210. package/quadrant-diagram/package.json +0 -7
  211. package/quadrant-diagram/style.css +0 -1
  212. package/select/index.d.ts +0 -7
  213. package/select/index.es.js +0 -706
  214. package/select/index.umd.js +0 -1
  215. package/select/package.json +0 -7
  216. package/select/style.css +0 -1
  217. package/steps-guide/index.d.ts +0 -7
  218. package/steps-guide/index.es.js +0 -239
  219. package/steps-guide/index.umd.js +0 -1
  220. package/steps-guide/package.json +0 -7
  221. package/steps-guide/style.css +0 -1
  222. package/sticky/index.d.ts +0 -7
  223. package/sticky/index.es.js +0 -197
  224. package/sticky/index.umd.js +0 -1
  225. package/sticky/package.json +0 -7
  226. package/table/index.d.ts +0 -7
  227. package/table/index.es.js +0 -1969
  228. package/table/index.umd.js +0 -1
  229. package/table/package.json +0 -7
  230. package/table/style.css +0 -1
  231. package/tabs/index.d.ts +0 -7
  232. package/tabs/index.es.js +0 -194
  233. package/tabs/index.umd.js +0 -1
  234. package/tabs/package.json +0 -7
  235. package/tabs/style.css +0 -1
  236. package/time-axis/index.d.ts +0 -7
  237. package/time-axis/index.umd.js +0 -1
  238. package/time-axis/package.json +0 -7
  239. package/time-axis/style.css +0 -1
  240. package/time-picker/index.d.ts +0 -7
  241. package/time-picker/index.es.js +0 -1237
  242. package/time-picker/index.umd.js +0 -1
  243. package/time-picker/package.json +0 -7
  244. package/time-picker/style.css +0 -1
  245. package/tooltip/index.d.ts +0 -7
  246. package/tooltip/index.es.js +0 -5828
  247. package/tooltip/index.umd.js +0 -27
  248. package/tooltip/package.json +0 -7
  249. package/tooltip/style.css +0 -1
  250. package/transfer/index.d.ts +0 -7
  251. package/transfer/index.es.js +0 -7608
  252. package/transfer/index.umd.js +0 -27
  253. package/transfer/package.json +0 -7
  254. package/transfer/style.css +0 -1
  255. package/tree/index.d.ts +0 -7
  256. package/tree/index.es.js +0 -6490
  257. package/tree/index.umd.js +0 -27
  258. package/tree/package.json +0 -7
  259. package/tree/style.css +0 -1
  260. package/tree-select/index.d.ts +0 -7
  261. package/tree-select/index.es.js +0 -623
  262. package/tree-select/index.umd.js +0 -1
  263. package/tree-select/package.json +0 -7
  264. package/tree-select/style.css +0 -1
package/table/index.es.js DELETED
@@ -1,1969 +0,0 @@
1
- var __defProp = Object.defineProperty;
2
- var __defProps = Object.defineProperties;
3
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
- var __spreadValues = (a, b) => {
9
- for (var prop in b || (b = {}))
10
- if (__hasOwnProp.call(b, prop))
11
- __defNormalProp(a, prop, b[prop]);
12
- if (__getOwnPropSymbols)
13
- for (var prop of __getOwnPropSymbols(b)) {
14
- if (__propIsEnum.call(b, prop))
15
- __defNormalProp(a, prop, b[prop]);
16
- }
17
- return a;
18
- };
19
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
- var __publicField = (obj, key, value) => {
21
- __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
22
- return value;
23
- };
24
- import { computed, ref, watch, defineComponent, inject, createVNode, mergeProps, toRef, provide, toRefs, onMounted, onUnmounted, Teleport, Transition, renderSlot, isVNode, nextTick, unref, Fragment, shallowRef, getCurrentInstance, withDirectives, createTextVNode, resolveDirective, reactive, onBeforeMount, h, onBeforeUnmount, render } from "vue";
25
- import { offset, autoPlacement, arrow, computePosition } from "@floating-ui/dom";
26
- import { onClickOutside } from "@vueuse/core";
27
- const TableProps = {
28
- data: {
29
- type: Array,
30
- default: []
31
- },
32
- striped: {
33
- type: Boolean,
34
- default: false
35
- },
36
- scrollable: {
37
- type: Boolean,
38
- default: false
39
- },
40
- maxWidth: {
41
- type: String
42
- },
43
- maxHeight: {
44
- type: String
45
- },
46
- tableWidth: {
47
- type: String
48
- },
49
- tableHeight: {
50
- type: String
51
- },
52
- size: {
53
- type: String,
54
- validator(value) {
55
- return value === "sm" || value === "md" || value === "lg";
56
- }
57
- },
58
- rowHoveredHighlight: {
59
- type: Boolean,
60
- default: true
61
- },
62
- fixHeader: {
63
- type: Boolean,
64
- default: false
65
- },
66
- checkable: {
67
- type: Boolean,
68
- default: true
69
- },
70
- tableLayout: {
71
- type: String,
72
- default: "auto",
73
- validator(v) {
74
- return v === "fixed" || v === "auto";
75
- }
76
- },
77
- showLoading: {
78
- type: Boolean,
79
- default: false
80
- },
81
- headerBg: {
82
- type: Boolean,
83
- default: false
84
- }
85
- };
86
- const TABLE_TOKEN = Symbol();
87
- function useTable(props) {
88
- const classes = computed(() => ({
89
- "devui-table": true,
90
- "devui-table-striped": props.striped,
91
- "header-bg": props.headerBg,
92
- "table-layout-auto": props.tableLayout === "auto"
93
- }));
94
- const style = computed(() => ({
95
- maxHeight: props.maxHeight,
96
- maxWidth: props.maxWidth,
97
- height: props.tableHeight,
98
- width: props.tableWidth
99
- }));
100
- return { classes, style };
101
- }
102
- const useFixedColumn = (column) => {
103
- const stickyCell = computed(() => {
104
- const col = column.value;
105
- if (col.fixedLeft) {
106
- return `devui-sticky-cell left`;
107
- }
108
- if (col.fixedRight) {
109
- return `devui-sticky-cell right`;
110
- }
111
- return void 0;
112
- });
113
- const offsetStyle = computed(() => {
114
- const col = column.value;
115
- if (col.fixedLeft) {
116
- return `left:${col.fixedLeft}`;
117
- }
118
- if (col.fixedRight) {
119
- return `right:${col.fixedRight}`;
120
- }
121
- return void 0;
122
- });
123
- return {
124
- stickyCell,
125
- offsetStyle
126
- };
127
- };
128
- function createStore(dataSource) {
129
- const _data = ref([]);
130
- watch(dataSource, (value) => {
131
- _data.value = [...value];
132
- }, { deep: true, immediate: true });
133
- const { _columns, insertColumn, removeColumn, sortColumn } = createColumnGenerator();
134
- const { _checkAll, _checkList, _halfChecked, getCheckedRows } = createSelection(dataSource, _data);
135
- const { sortData } = createSorter(dataSource, _data);
136
- const { filterData, resetFilterData } = createFilter(dataSource, _data);
137
- const { isFixedLeft } = createFixedLogic(_columns);
138
- return {
139
- states: {
140
- _data,
141
- _columns,
142
- _checkList,
143
- _checkAll,
144
- _halfChecked,
145
- isFixedLeft
146
- },
147
- insertColumn,
148
- sortColumn,
149
- removeColumn,
150
- getCheckedRows,
151
- sortData,
152
- filterData,
153
- resetFilterData
154
- };
155
- }
156
- const createColumnGenerator = () => {
157
- const _columns = ref([]);
158
- const insertColumn = (column) => {
159
- _columns.value.push(column);
160
- _columns.value.sort((a, b) => a.order - b.order);
161
- };
162
- const sortColumn = () => {
163
- _columns.value.sort((a, b) => a.order > b.order ? 1 : -1);
164
- };
165
- const removeColumn = (column) => {
166
- const i = _columns.value.findIndex((v) => v === column);
167
- if (i === -1) {
168
- return;
169
- }
170
- _columns.value.splice(i, 1);
171
- };
172
- return { _columns, insertColumn, removeColumn, sortColumn };
173
- };
174
- const createSelection = (dataSource, _data) => {
175
- const _checkList = ref([]);
176
- const _checkAllRecord = ref(false);
177
- const _checkAll = computed({
178
- get: () => _checkAllRecord.value,
179
- set: (val) => {
180
- _checkAllRecord.value = val;
181
- for (let i = 0; i < _checkList.value.length; i++) {
182
- _checkList.value[i] = val;
183
- }
184
- }
185
- });
186
- const _halfChecked = ref(false);
187
- watch(dataSource, (value) => {
188
- _checkList.value = new Array(value.length).fill(false);
189
- }, { deep: true, immediate: true });
190
- watch(_checkList, (list) => {
191
- if (list.length === 0) {
192
- return;
193
- }
194
- let allTrue = true;
195
- let allFalse = true;
196
- for (let i = 0; i < list.length; i++) {
197
- allTrue && (allTrue = list[i]);
198
- allFalse && (allFalse = !list[i]);
199
- }
200
- _checkAllRecord.value = allTrue;
201
- _halfChecked.value = !(allFalse || allTrue);
202
- }, { immediate: true, deep: true });
203
- const getCheckedRows = () => {
204
- return _data.value.filter((_, index2) => _checkList.value[index2]);
205
- };
206
- return {
207
- _checkList,
208
- _checkAll,
209
- _halfChecked,
210
- getCheckedRows
211
- };
212
- };
213
- const createSorter = (dataSource, _data) => {
214
- const sortData = (field, direction, compareFn = (fieldKey, a, b) => a[fieldKey] > b[fieldKey]) => {
215
- if (direction === "ASC") {
216
- _data.value = _data.value.sort((a, b) => compareFn(field, a, b) ? 1 : -1);
217
- } else if (direction === "DESC") {
218
- _data.value = _data.value.sort((a, b) => !compareFn(field, a, b) ? 1 : -1);
219
- } else {
220
- _data.value = [...dataSource.value];
221
- }
222
- };
223
- return { sortData };
224
- };
225
- const createFilter = (dataSource, _data) => {
226
- const fieldSet = /* @__PURE__ */ new Set();
227
- const filterData = (field, results) => {
228
- fieldSet.add(field);
229
- const fields = [...fieldSet];
230
- _data.value = dataSource.value.filter((item) => {
231
- return fields.reduce((prev, fieldKey) => {
232
- return prev && results.indexOf(item[fieldKey]) !== -1;
233
- }, true);
234
- });
235
- };
236
- const resetFilterData = () => {
237
- fieldSet.clear();
238
- _data.value = [...dataSource.value];
239
- };
240
- return { filterData, resetFilterData };
241
- };
242
- const createFixedLogic = (columns) => {
243
- const isFixedLeft = computed(() => {
244
- return columns.value.reduce((prev, current) => prev || !!current.fixedLeft, false);
245
- });
246
- return { isFixedLeft };
247
- };
248
- var ColGroup = defineComponent({
249
- name: "DColGroup",
250
- setup() {
251
- const parent = inject(TABLE_TOKEN);
252
- const columns = parent.store.states._columns;
253
- return () => parent.props.tableLayout === "fixed" ? createVNode("colgroup", null, [parent.props.checkable ? createVNode("col", {
254
- "width": 36
255
- }, null) : null, columns.value.map((column, index2) => {
256
- return createVNode("col", {
257
- "key": index2,
258
- "width": column.realWidth
259
- }, null);
260
- })]) : null;
261
- }
262
- });
263
- var checkbox = "";
264
- const commonProps = {
265
- name: {
266
- type: String,
267
- default: void 0
268
- },
269
- halfchecked: {
270
- type: Boolean,
271
- default: false
272
- },
273
- isShowTitle: {
274
- type: Boolean,
275
- default: true
276
- },
277
- title: {
278
- type: String
279
- },
280
- color: {
281
- type: String,
282
- default: void 0
283
- },
284
- showAnimation: {
285
- type: Boolean,
286
- default: true
287
- },
288
- disabled: {
289
- type: Boolean,
290
- default: false
291
- },
292
- beforeChange: {
293
- type: Function,
294
- default: void 0
295
- }
296
- };
297
- const checkboxProps = __spreadProps(__spreadValues({}, commonProps), {
298
- halfchecked: {
299
- type: Boolean,
300
- default: false
301
- },
302
- checked: {
303
- type: Boolean,
304
- default: false
305
- },
306
- value: {
307
- type: String
308
- },
309
- label: {
310
- type: String,
311
- default: void 0
312
- },
313
- title: {
314
- type: String,
315
- default: void 0
316
- },
317
- "onUpdate:checked": {
318
- type: Function,
319
- default: void 0
320
- },
321
- onChange: {
322
- type: Function,
323
- default: void 0
324
- },
325
- modelValue: {
326
- type: Boolean
327
- },
328
- "onUpdate:modelValue": {
329
- type: Function
330
- }
331
- });
332
- const checkboxGroupProps = __spreadProps(__spreadValues({}, commonProps), {
333
- modelValue: {
334
- type: Array,
335
- required: true
336
- },
337
- direction: {
338
- type: String,
339
- default: "column"
340
- },
341
- itemWidth: {
342
- type: Number,
343
- default: void 0
344
- },
345
- options: {
346
- type: Array,
347
- default: () => []
348
- },
349
- onChange: {
350
- type: Function,
351
- default: void 0
352
- },
353
- "onUpdate:modelValue": {
354
- type: Function,
355
- default: void 0
356
- }
357
- });
358
- const checkboxGroupInjectionKey = Symbol("d-checkbox-group");
359
- var Checkbox = defineComponent({
360
- name: "DCheckbox",
361
- props: checkboxProps,
362
- emits: ["change", "update:checked", "update:modelValue"],
363
- setup(props, ctx) {
364
- const checkboxGroupConf = inject(checkboxGroupInjectionKey, null);
365
- const isChecked = computed(() => props.checked || props.modelValue);
366
- const mergedDisabled = computed(() => {
367
- return (checkboxGroupConf == null ? void 0 : checkboxGroupConf.disabled.value) || props.disabled;
368
- });
369
- const mergedChecked = computed(() => {
370
- var _a, _b;
371
- return (_b = (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.isItemChecked) == null ? void 0 : _a.call(checkboxGroupConf, props.value)) != null ? _b : isChecked.value;
372
- });
373
- const mergedIsShowTitle = computed(() => {
374
- var _a;
375
- return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.isShowTitle.value) != null ? _a : props.isShowTitle;
376
- });
377
- const mergedShowAnimation = computed(() => {
378
- var _a;
379
- return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.showAnimation.value) != null ? _a : props.showAnimation;
380
- });
381
- const mergedColor = computed(() => {
382
- var _a;
383
- return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.color.value) != null ? _a : props.color;
384
- });
385
- const itemWidth = checkboxGroupConf == null ? void 0 : checkboxGroupConf.itemWidth.value;
386
- const direction = checkboxGroupConf == null ? void 0 : checkboxGroupConf.direction.value;
387
- const canChange = (isChecked2, val) => {
388
- var _a;
389
- if (mergedDisabled.value) {
390
- return Promise.resolve(false);
391
- }
392
- const beforeChange = (_a = props.beforeChange) != null ? _a : checkboxGroupConf == null ? void 0 : checkboxGroupConf.beforeChange;
393
- if (beforeChange) {
394
- const res = beforeChange(isChecked2, val);
395
- if (typeof res === "boolean") {
396
- return Promise.resolve(res);
397
- }
398
- return res;
399
- }
400
- return Promise.resolve(true);
401
- };
402
- const toggle = () => {
403
- const current = !isChecked.value;
404
- checkboxGroupConf == null ? void 0 : checkboxGroupConf.toggleGroupVal(props.value);
405
- ctx.emit("update:checked", current);
406
- ctx.emit("update:modelValue", current);
407
- ctx.emit("change", current);
408
- };
409
- const handleClick = () => {
410
- canChange(!isChecked.value, props.label).then((res) => res && toggle());
411
- };
412
- return {
413
- itemWidth,
414
- direction,
415
- mergedColor,
416
- mergedDisabled,
417
- mergedIsShowTitle,
418
- mergedChecked,
419
- mergedShowAnimation,
420
- handleClick
421
- };
422
- },
423
- render() {
424
- var _a;
425
- const {
426
- itemWidth,
427
- direction,
428
- mergedChecked,
429
- mergedDisabled,
430
- mergedIsShowTitle,
431
- mergedShowAnimation,
432
- halfchecked,
433
- title,
434
- label,
435
- handleClick,
436
- name,
437
- value,
438
- mergedColor,
439
- $slots
440
- } = this;
441
- const wrapperCls = {
442
- "devui-checkbox-column-margin": direction === "column",
443
- "devui-checkbox-wrap": typeof itemWidth !== "undefined"
444
- };
445
- const wrapperStyle = itemWidth ? [`width: ${itemWidth}px`] : [];
446
- const checkboxCls = {
447
- "devui-checkbox": true,
448
- active: mergedChecked,
449
- halfchecked,
450
- disabled: mergedDisabled,
451
- unchecked: !mergedChecked
452
- };
453
- const labelTitle = mergedIsShowTitle ? title || label : "";
454
- const bgImgStyle = mergedColor && halfchecked || mergedColor ? `linear-gradient(${mergedColor}, ${mergedColor})` : "";
455
- const spanStyle = [`border-color:${(mergedChecked || halfchecked) && mergedColor ? mergedColor : ""}`, `background-image:${bgImgStyle}`, `background-color:${mergedColor && halfchecked ? mergedColor : ""}`];
456
- const spanCls = {
457
- "devui-checkbox-material": true,
458
- "custom-color": mergedColor,
459
- "devui-checkbox-no-label": !label && !$slots.default,
460
- "devui-no-animation": !mergedShowAnimation,
461
- "devui-checkbox-default-background": !halfchecked
462
- };
463
- const polygonCls = {
464
- "devui-tick": true,
465
- "devui-no-animation": !mergedShowAnimation
466
- };
467
- const stopPropagation = ($event) => $event.stopPropagation();
468
- const inputProps = {
469
- indeterminate: halfchecked
470
- };
471
- return createVNode("div", {
472
- "class": wrapperCls,
473
- "style": wrapperStyle
474
- }, [createVNode("div", {
475
- "class": checkboxCls
476
- }, [createVNode("label", {
477
- "title": labelTitle,
478
- "onClick": handleClick
479
- }, [createVNode("input", mergeProps({
480
- "name": name || value,
481
- "class": "devui-checkbox-input",
482
- "type": "checkbox"
483
- }, inputProps, {
484
- "checked": mergedChecked,
485
- "disabled": mergedDisabled,
486
- "onClick": stopPropagation,
487
- "onChange": stopPropagation
488
- }), null), createVNode("span", {
489
- "style": spanStyle,
490
- "class": spanCls
491
- }, [createVNode("span", {
492
- "class": "devui-checkbox-halfchecked-bg"
493
- }, null), createVNode("svg", {
494
- "viewBox": "0 0 16 16",
495
- "version": "1.1",
496
- "xmlns": "http://www.w3.org/2000/svg",
497
- "class": "devui-checkbox-tick"
498
- }, [createVNode("g", {
499
- "stroke": "none",
500
- "stroke-width": "1",
501
- "fill": "none",
502
- "fill-rule": "evenodd"
503
- }, [createVNode("polygon", {
504
- "fill-rule": "nonzero",
505
- "points": "5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043",
506
- "class": polygonCls
507
- }, null)])])]), label || ((_a = $slots.default) == null ? void 0 : _a.call($slots))])])]);
508
- }
509
- });
510
- var checkboxGroup = "";
511
- var CheckboxGroup = defineComponent({
512
- name: "DCheckboxGroup",
513
- props: checkboxGroupProps,
514
- emits: ["change", "update:modelValue"],
515
- setup(props, ctx) {
516
- const valList = toRef(props, "modelValue");
517
- const defaultOpt = {
518
- checked: false,
519
- isShowTitle: true,
520
- halfchecked: false,
521
- showAnimation: true,
522
- disabled: false
523
- };
524
- const toggleGroupVal = (val) => {
525
- let index2 = -1;
526
- if (typeof valList.value[0] === "string") {
527
- index2 = valList.value.findIndex((item) => item === val);
528
- } else if (typeof valList.value[0] === "object") {
529
- index2 = valList.value.findIndex((item) => item.value === val);
530
- }
531
- if (index2 === -1) {
532
- if (typeof props.options[0] === "object") {
533
- const newOne = props.options.find((item) => item.value === val);
534
- const res2 = [...valList.value, newOne];
535
- ctx.emit("update:modelValue", res2);
536
- ctx.emit("change", res2);
537
- return;
538
- }
539
- const res = [...valList.value, val];
540
- ctx.emit("update:modelValue", res);
541
- ctx.emit("change", res);
542
- return;
543
- }
544
- valList.value.splice(index2, 1);
545
- ctx.emit("update:modelValue", valList.value);
546
- ctx.emit("change", valList.value);
547
- };
548
- const isItemChecked = (itemVal) => {
549
- if (typeof valList.value[0] === "string") {
550
- return valList.value.includes(itemVal);
551
- } else if (typeof valList.value[0] === "object") {
552
- return valList.value.some((item) => item.value === itemVal);
553
- }
554
- };
555
- provide(checkboxGroupInjectionKey, {
556
- disabled: toRef(props, "disabled"),
557
- isShowTitle: toRef(props, "isShowTitle"),
558
- color: toRef(props, "color"),
559
- showAnimation: toRef(props, "showAnimation"),
560
- beforeChange: props.beforeChange,
561
- isItemChecked,
562
- toggleGroupVal,
563
- itemWidth: toRef(props, "itemWidth"),
564
- direction: toRef(props, "direction")
565
- });
566
- return {
567
- defaultOpt
568
- };
569
- },
570
- render() {
571
- var _a;
572
- const {
573
- direction,
574
- $slots,
575
- defaultOpt,
576
- options
577
- } = this;
578
- let children = (_a = $slots.default) == null ? void 0 : _a.call($slots);
579
- if ((options == null ? void 0 : options.length) > 0) {
580
- children = options.map((opt) => {
581
- let mergedOpt = null;
582
- if (typeof opt === "string") {
583
- mergedOpt = Object.assign({}, defaultOpt, {
584
- label: opt,
585
- value: opt
586
- });
587
- } else if (typeof opt === "object") {
588
- mergedOpt = Object.assign({}, defaultOpt, __spreadProps(__spreadValues({}, opt), {
589
- label: opt.name
590
- }));
591
- }
592
- return createVNode(Checkbox, mergedOpt, null);
593
- });
594
- }
595
- return createVNode("div", {
596
- "class": "devui-checkbox-group"
597
- }, [createVNode("div", {
598
- "class": {
599
- "devui-checkbox-list-inline": direction === "row"
600
- }
601
- }, [children])]);
602
- }
603
- });
604
- Checkbox.install = function(app) {
605
- app.component(Checkbox.name, Checkbox);
606
- };
607
- CheckboxGroup.install = function(app) {
608
- app.component(CheckboxGroup.name, CheckboxGroup);
609
- };
610
- var sort = "";
611
- const Sort = defineComponent({
612
- props: {
613
- modelValue: {
614
- type: String,
615
- default: ""
616
- },
617
- "onUpdate:modelValue": {
618
- type: Function
619
- }
620
- },
621
- emits: ["update:modelValue"],
622
- setup(props, ctx) {
623
- const changeDirection = () => {
624
- let direction = "";
625
- if (props.modelValue === "ASC") {
626
- direction = "DESC";
627
- } else if (props.modelValue === "DESC") {
628
- direction = "";
629
- } else {
630
- direction = "ASC";
631
- }
632
- ctx.emit("update:modelValue", direction);
633
- };
634
- return () => createVNode("span", {
635
- "onClick": changeDirection,
636
- "class": "sort-clickable"
637
- }, [createVNode("i", {
638
- "class": ["datatable-svg", {
639
- "sort-icon-default": !props.modelValue,
640
- "sort-icon-asc": props.modelValue === "ASC",
641
- "sort-icon-desc": props.modelValue === "DESC"
642
- }]
643
- }, [createVNode("svg", {
644
- "width": "16px",
645
- "height": "16px",
646
- "viewBox": "0 0 16 16",
647
- "version": "1.1",
648
- "xmlns": "http://www.w3.org/2000/svg",
649
- "xmlns:xlink": "http://www.w3.org/1999/xlink"
650
- }, [createVNode("defs", null, [createVNode("circle", {
651
- "id": "sort-svg-path-1",
652
- "cx": "8",
653
- "cy": "8",
654
- "r": "8"
655
- }, null), createVNode("filter", {
656
- "x": "-34.4%",
657
- "y": "-21.9%",
658
- "width": "168.8%",
659
- "height": "168.8%",
660
- "filterUnits": "objectBoundingBox",
661
- "id": "filter-2"
662
- }, [createVNode("feOffset", {
663
- "dx": "0",
664
- "dy": "2",
665
- "in": "SourceAlpha",
666
- "result": "shadowOffsetOuter1"
667
- }, null), createVNode("feGaussianBlur", {
668
- "stdDeviation": "1.5",
669
- "in": "shadowOffsetOuter1",
670
- "result": "shadowBlurOuter1"
671
- }, null), createVNode("feColorMatrix", {
672
- "values": "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.085309222 0",
673
- "type": "matrix",
674
- "in": "shadowBlurOuter1"
675
- }, null)])]), createVNode("g", {
676
- "stroke": "none",
677
- "stroke-width": "1",
678
- "fill": "none",
679
- "fill-rule": "evenodd"
680
- }, [createVNode("use", {
681
- "fill-rule": "evenodd",
682
- "xlink:href": "#sort-svg-path-1"
683
- }, null), createVNode("polygon", {
684
- "points": "8 4 11 7 5 7"
685
- }, null), createVNode("polygon", {
686
- "points": "8 12 5 9 11 9"
687
- }, null)])])])]);
688
- }
689
- });
690
- const dropdownProps = {
691
- visible: {
692
- type: Boolean,
693
- default: false
694
- },
695
- trigger: {
696
- type: String,
697
- default: "click"
698
- },
699
- closeScope: {
700
- type: String,
701
- default: "all"
702
- },
703
- position: {
704
- type: Array,
705
- default: ["bottom"]
706
- },
707
- align: {
708
- type: String,
709
- default: null
710
- },
711
- offset: {
712
- type: [Number, Object],
713
- default: 4
714
- },
715
- closeOnMouseLeaveMenu: {
716
- type: Boolean,
717
- default: false
718
- }
719
- };
720
- function getElement(element) {
721
- if (element instanceof Element) {
722
- return element;
723
- }
724
- if (element && typeof element === "object" && element.$el instanceof Element) {
725
- return element.$el;
726
- }
727
- return null;
728
- }
729
- const dropdownMap = /* @__PURE__ */ new Map();
730
- function subscribeEvent(dom, type, callback) {
731
- dom == null ? void 0 : dom.addEventListener(type, callback);
732
- return () => {
733
- dom == null ? void 0 : dom.removeEventListener(type, callback);
734
- };
735
- }
736
- const useDropdownEvent = ({ id, isOpen, origin, dropdownRef, props, emit }) => {
737
- let overlayEnter = false;
738
- let originEnter = false;
739
- const { trigger, closeScope, closeOnMouseLeaveMenu } = toRefs(props);
740
- const toggle = (status) => {
741
- isOpen.value = status;
742
- emit("toggle", isOpen.value);
743
- };
744
- const handleLeave = async (elementType, e) => {
745
- await new Promise((resolve) => setTimeout(resolve, 50));
746
- if (elementType === "origin" && overlayEnter || elementType === "dropdown" && originEnter) {
747
- return;
748
- }
749
- if (e) {
750
- [...dropdownMap.values()].reverse().forEach((item) => {
751
- setTimeout(() => {
752
- var _a;
753
- (_a = item.toggle) == null ? void 0 : _a.call(item);
754
- }, 0);
755
- });
756
- }
757
- toggle(false);
758
- };
759
- watch([trigger, origin, dropdownRef], ([triggerVal, originVal, dropdownEl], ov, onInvalidate) => {
760
- const originEl = getElement(originVal);
761
- const subscriptions = [];
762
- setTimeout(() => {
763
- subscriptions.push(subscribeEvent(document, "click", (e) => {
764
- const dropdownValues = [...dropdownMap.values()];
765
- if (!isOpen.value || closeScope.value === "none" || dropdownEl.contains(e.target) && closeScope.value === "blank" || dropdownValues.some((item) => {
766
- var _a;
767
- return (_a = item.toggleEl) == null ? void 0 : _a.contains(e.target);
768
- }) && dropdownValues.some((item) => {
769
- var _a;
770
- return (_a = item.menuEl) == null ? void 0 : _a.contains(e.target);
771
- })) {
772
- return;
773
- }
774
- [...dropdownMap.values()].reverse().forEach((item) => {
775
- setTimeout(() => {
776
- var _a, _b;
777
- if (!((_a = item.toggleEl) == null ? void 0 : _a.contains(e.target))) {
778
- (_b = item.toggle) == null ? void 0 : _b.call(item);
779
- }
780
- }, 0);
781
- });
782
- overlayEnter = false;
783
- }));
784
- }, 0);
785
- if (triggerVal === "click") {
786
- subscriptions.push(subscribeEvent(originEl, "click", () => toggle(!isOpen.value)), subscribeEvent(dropdownEl, "mouseleave", (e) => {
787
- var _a;
788
- if (closeOnMouseLeaveMenu.value && !((_a = dropdownMap.get(id).child) == null ? void 0 : _a.contains(e.relatedTarget))) {
789
- handleLeave("dropdown", e);
790
- }
791
- }));
792
- } else if (triggerVal === "hover") {
793
- subscriptions.push(subscribeEvent(originEl, "mouseenter", () => {
794
- originEnter = true;
795
- toggle(true);
796
- }), subscribeEvent(originEl, "mouseleave", () => {
797
- originEnter = false;
798
- handleLeave("origin");
799
- }), subscribeEvent(dropdownEl, "mouseenter", () => {
800
- overlayEnter = true;
801
- isOpen.value = true;
802
- }), subscribeEvent(dropdownEl, "mouseleave", (e) => {
803
- var _a;
804
- overlayEnter = false;
805
- if (e.relatedTarget && ((originEl == null ? void 0 : originEl.contains(e.relatedTarget)) || ((_a = dropdownMap.get(id).child) == null ? void 0 : _a.contains(e.relatedTarget)))) {
806
- return;
807
- }
808
- handleLeave("dropdown", e);
809
- }));
810
- }
811
- onInvalidate(() => subscriptions.forEach((v) => v()));
812
- });
813
- };
814
- function useDropdown(id, visible, isOpen, origin, dropdownRef, popDirection, emit) {
815
- const calcPopDirection = (dropdownEl) => {
816
- const elementHeight = dropdownEl.offsetHeight;
817
- const bottomDistance = window.innerHeight - origin.value.getBoundingClientRect().bottom;
818
- const isBottomEnough = bottomDistance >= elementHeight;
819
- if (!isBottomEnough) {
820
- popDirection.value = "top";
821
- } else {
822
- popDirection.value = "bottom";
823
- }
824
- };
825
- watch(visible, (newVal, oldVal) => {
826
- if (oldVal === void 0) {
827
- return;
828
- }
829
- isOpen.value = newVal;
830
- emit("toggle", isOpen.value);
831
- }, { immediate: true });
832
- watch([isOpen, dropdownRef], ([isOpenVal, dropdownEl]) => {
833
- var _a;
834
- if (isOpenVal) {
835
- dropdownMap.set(id, __spreadProps(__spreadValues({}, dropdownMap.get(id)), {
836
- menuEl: dropdownEl,
837
- toggle: () => {
838
- isOpen.value = false;
839
- emit("toggle", isOpen.value);
840
- }
841
- }));
842
- for (const value of dropdownMap.values()) {
843
- if ((_a = value.menuEl) == null ? void 0 : _a.contains(origin.value)) {
844
- value.child = dropdownEl;
845
- }
846
- }
847
- }
848
- if (dropdownEl) {
849
- calcPopDirection(dropdownEl);
850
- }
851
- });
852
- onMounted(() => {
853
- dropdownMap.set(id, { toggleEl: origin.value });
854
- });
855
- onUnmounted(() => {
856
- dropdownMap.delete(id);
857
- });
858
- }
859
- var overlay = "";
860
- function _isSlot(s) {
861
- return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
862
- }
863
- const CommonOverlay = defineComponent({
864
- setup(props, ctx) {
865
- return () => {
866
- let _slot;
867
- return createVNode(Teleport, {
868
- "to": "#d-overlay-anchor"
869
- }, {
870
- default: () => [createVNode(Transition, {
871
- "name": "devui-overlay-fade"
872
- }, _isSlot(_slot = renderSlot(ctx.slots, "default")) ? _slot : {
873
- default: () => [_slot]
874
- })]
875
- });
876
- };
877
- }
878
- });
879
- const overlayProps = {
880
- visible: {
881
- type: Boolean
882
- },
883
- backgroundBlock: {
884
- type: Boolean,
885
- default: false
886
- },
887
- backgroundClass: {
888
- type: String,
889
- default: ""
890
- },
891
- backgroundStyle: {
892
- type: [String, Object]
893
- },
894
- onBackdropClick: {
895
- type: Function
896
- },
897
- backdropClose: {
898
- type: Boolean,
899
- default: true
900
- },
901
- hasBackdrop: {
902
- type: Boolean,
903
- default: true
904
- }
905
- };
906
- const overlayEmits = ["update:visible", "backdropClick"];
907
- const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
908
- overlayStyle: {
909
- type: [String, Object],
910
- default: void 0
911
- }
912
- });
913
- const flexibleOverlayProps = {
914
- modelValue: {
915
- type: Boolean,
916
- default: false
917
- },
918
- origin: {
919
- type: Object,
920
- require: true
921
- },
922
- position: {
923
- type: Array,
924
- default: ["bottom"]
925
- },
926
- offset: {
927
- type: [Number, Object],
928
- default: 8
929
- },
930
- align: {
931
- type: String,
932
- default: null
933
- },
934
- showArrow: {
935
- type: Boolean,
936
- default: false
937
- },
938
- isArrowCenter: {
939
- type: Boolean,
940
- default: true
941
- }
942
- };
943
- function useOverlayLogic(props, ctx) {
944
- const backgroundClass = computed(() => {
945
- return [
946
- "devui-overlay-background",
947
- props.backgroundClass,
948
- !props.hasBackdrop ? "devui-overlay-background__disabled" : "devui-overlay-background__color"
949
- ];
950
- });
951
- const overlayClass = computed(() => {
952
- return "devui-overlay";
953
- });
954
- const handleBackdropClick = (event) => {
955
- var _a;
956
- event.preventDefault();
957
- (_a = props.onBackdropClick) == null ? void 0 : _a.call(props);
958
- if (props.backdropClose) {
959
- ctx.emit("update:visible", false);
960
- }
961
- };
962
- const handleOverlayBubbleCancel = (event) => event.cancelBubble = true;
963
- onMounted(() => {
964
- const body2 = document.body;
965
- const originOverflow = body2.style.overflow;
966
- const originPosition = body2.style.position;
967
- watch([() => props.visible, () => props.backgroundBlock], ([visible, backgroundBlock]) => {
968
- if (backgroundBlock) {
969
- const top = body2.getBoundingClientRect().y;
970
- if (visible) {
971
- body2.style.overflowY = "scroll";
972
- body2.style.position = visible ? "fixed" : "";
973
- body2.style.top = `${top}px`;
974
- } else {
975
- body2.style.overflowY = originOverflow;
976
- body2.style.position = originPosition;
977
- body2.style.top = "";
978
- window.scrollTo(0, -top);
979
- }
980
- }
981
- });
982
- onUnmounted(() => {
983
- document.body.style.overflow = originOverflow;
984
- });
985
- });
986
- return {
987
- backgroundClass,
988
- overlayClass,
989
- handleBackdropClick,
990
- handleOverlayBubbleCancel
991
- };
992
- }
993
- defineComponent({
994
- name: "DFixedOverlay",
995
- props: fixedOverlayProps,
996
- emits: overlayEmits,
997
- setup(props, ctx) {
998
- const {
999
- backgroundClass,
1000
- overlayClass,
1001
- handleBackdropClick,
1002
- handleOverlayBubbleCancel
1003
- } = useOverlayLogic(props, ctx);
1004
- return () => createVNode(CommonOverlay, null, {
1005
- default: () => [props.visible && createVNode("div", {
1006
- "class": backgroundClass.value,
1007
- "style": props.backgroundStyle,
1008
- "onClick": handleBackdropClick
1009
- }, [createVNode("div", {
1010
- "class": overlayClass.value,
1011
- "style": props.overlayStyle,
1012
- "onClick": handleOverlayBubbleCancel
1013
- }, [renderSlot(ctx.slots, "default")])])]
1014
- });
1015
- }
1016
- });
1017
- function getScrollParent(element) {
1018
- const overflowRegex = /(auto|scroll|hidden)/;
1019
- for (let parent = element; parent = parent.parentElement; parent.parentElement !== document.body) {
1020
- const style = window.getComputedStyle(parent);
1021
- if (overflowRegex.test(style.overflow + style.overflowX + style.overflowY)) {
1022
- return parent;
1023
- }
1024
- }
1025
- return window;
1026
- }
1027
- function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
1028
- let { x, y } = point;
1029
- if (!isArrowCenter) {
1030
- const { width, height } = originRect;
1031
- if (x && placement.includes("start")) {
1032
- x = 12;
1033
- }
1034
- if (x && placement.includes("end")) {
1035
- x = Math.round(width - 24);
1036
- }
1037
- if (y && placement.includes("start")) {
1038
- y = 10;
1039
- }
1040
- if (y && placement.includes("end")) {
1041
- y = height - 14;
1042
- }
1043
- }
1044
- return { x, y };
1045
- }
1046
- function useOverlay(props, emit) {
1047
- const overlayRef = ref();
1048
- const arrowRef = ref();
1049
- const updateArrowPosition = (arrowEl, placement, point, overlayEl) => {
1050
- const { x, y } = adjustArrowPosition(props.isArrowCenter, point, placement, overlayEl.getBoundingClientRect());
1051
- const staticSide = {
1052
- top: "bottom",
1053
- right: "left",
1054
- bottom: "top",
1055
- left: "right"
1056
- }[placement.split("-")[0]];
1057
- Object.assign(arrowEl.style, {
1058
- left: x ? `${x}px` : "",
1059
- top: y ? `${y}px` : "",
1060
- right: "",
1061
- bottom: "",
1062
- [staticSide]: "-4px"
1063
- });
1064
- };
1065
- const updatePosition = async () => {
1066
- const hostEl = props.origin;
1067
- const overlayEl = unref(overlayRef.value);
1068
- const arrowEl = unref(arrowRef.value);
1069
- const middleware = [
1070
- offset(props.offset),
1071
- autoPlacement({
1072
- alignment: props.align,
1073
- allowedPlacements: props.position
1074
- })
1075
- ];
1076
- props.showArrow && middleware.push(arrow({ element: arrowEl }));
1077
- const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
1078
- strategy: "fixed",
1079
- middleware
1080
- });
1081
- emit("positionChange", placement);
1082
- Object.assign(overlayEl.style, { top: `${y}px`, left: `${x}px` });
1083
- props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
1084
- };
1085
- watch(() => props.modelValue, () => {
1086
- const originParent = getScrollParent(props.origin);
1087
- if (props.modelValue && props.origin) {
1088
- nextTick(updatePosition);
1089
- originParent.addEventListener("scroll", updatePosition);
1090
- originParent !== window && window.addEventListener("scroll", updatePosition);
1091
- window.addEventListener("resize", updatePosition);
1092
- } else {
1093
- originParent.removeEventListener("scroll", updatePosition);
1094
- originParent !== window && window.removeEventListener("scroll", updatePosition);
1095
- window.removeEventListener("resize", updatePosition);
1096
- }
1097
- });
1098
- onUnmounted(() => {
1099
- const originParent = getScrollParent(props.origin);
1100
- originParent.removeEventListener("scroll", updatePosition);
1101
- originParent !== window && window.removeEventListener("scroll", updatePosition);
1102
- window.removeEventListener("resize", updatePosition);
1103
- });
1104
- return { arrowRef, overlayRef };
1105
- }
1106
- var flexibleOverlay = "";
1107
- const FlexibleOverlay = defineComponent({
1108
- name: "DFlexibleOverlay",
1109
- inheritAttrs: false,
1110
- props: flexibleOverlayProps,
1111
- emits: ["update:modelValue", "positionChange"],
1112
- setup(props, {
1113
- slots,
1114
- attrs,
1115
- emit
1116
- }) {
1117
- const {
1118
- arrowRef,
1119
- overlayRef
1120
- } = useOverlay(props, emit);
1121
- return () => {
1122
- var _a;
1123
- return props.modelValue && createVNode("div", mergeProps({
1124
- "ref": overlayRef,
1125
- "class": "devui-flexible-overlay"
1126
- }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
1127
- "ref": arrowRef,
1128
- "class": "devui-flexible-overlay-arrow"
1129
- }, null)]);
1130
- };
1131
- }
1132
- });
1133
- var dropdown = "";
1134
- let dropdownId = 1;
1135
- var Dropdown = defineComponent({
1136
- name: "DDropdown",
1137
- inheritAttrs: false,
1138
- props: dropdownProps,
1139
- emits: ["toggle"],
1140
- setup(props, {
1141
- slots,
1142
- attrs,
1143
- emit
1144
- }) {
1145
- const {
1146
- visible,
1147
- position,
1148
- align,
1149
- offset: offset2
1150
- } = toRefs(props);
1151
- const origin = ref();
1152
- const dropdownRef = ref();
1153
- const id = `dropdown_${dropdownId++}`;
1154
- const isOpen = ref(false);
1155
- const currentPosition = ref("bottom");
1156
- const handlePositionChange = (pos) => {
1157
- currentPosition.value = pos.includes("top") || pos.includes("end") ? "top" : "bottom";
1158
- };
1159
- const styles = computed(() => ({
1160
- transformOrigin: currentPosition.value === "top" ? "0% 100%" : "0% 0%"
1161
- }));
1162
- const classes = computed(() => ({
1163
- "fade-in-bottom": isOpen.value && currentPosition.value === "bottom",
1164
- "fade-in-top": isOpen.value && currentPosition.value === "top"
1165
- }));
1166
- useDropdownEvent({
1167
- id,
1168
- isOpen,
1169
- origin,
1170
- dropdownRef,
1171
- props,
1172
- emit
1173
- });
1174
- useDropdown(id, visible, isOpen, origin, dropdownRef, currentPosition, emit);
1175
- return () => {
1176
- var _a;
1177
- return createVNode(Fragment, null, [createVNode("div", {
1178
- "ref": origin,
1179
- "class": "devui-dropdown-toggle"
1180
- }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), createVNode(Teleport, {
1181
- "to": "body"
1182
- }, {
1183
- default: () => [createVNode(Transition, {
1184
- "name": `devui-dropdown-fade-${currentPosition.value}`
1185
- }, {
1186
- default: () => [createVNode(FlexibleOverlay, {
1187
- "modelValue": isOpen.value,
1188
- "onUpdate:modelValue": ($event) => isOpen.value = $event,
1189
- "origin": origin.value,
1190
- "position": position.value,
1191
- "align": align.value,
1192
- "offset": offset2.value,
1193
- "onPositionChange": handlePositionChange,
1194
- "class": classes.value,
1195
- "style": styles.value
1196
- }, {
1197
- default: () => {
1198
- var _a2;
1199
- return [createVNode("div", mergeProps({
1200
- "ref": dropdownRef,
1201
- "class": "devui-dropdown-menu-wrap"
1202
- }, attrs), [(_a2 = slots.menu) == null ? void 0 : _a2.call(slots)])];
1203
- }
1204
- })]
1205
- })]
1206
- })]);
1207
- };
1208
- }
1209
- });
1210
- const dropdownMenuProps = {
1211
- modelValue: {
1212
- type: Boolean,
1213
- default: false
1214
- },
1215
- origin: {
1216
- type: Object,
1217
- require: true
1218
- },
1219
- position: {
1220
- type: Array,
1221
- default: ["bottom"]
1222
- },
1223
- align: {
1224
- type: String,
1225
- default: null
1226
- },
1227
- offset: {
1228
- type: [Number, Object],
1229
- default: 4
1230
- },
1231
- clickOutside: {
1232
- type: Function,
1233
- default: () => true
1234
- }
1235
- };
1236
- defineComponent({
1237
- name: "DDropdownMenu",
1238
- inheritAttrs: false,
1239
- props: dropdownMenuProps,
1240
- emits: ["update:modelValue"],
1241
- setup(props, {
1242
- slots,
1243
- attrs,
1244
- emit
1245
- }) {
1246
- const {
1247
- modelValue,
1248
- origin,
1249
- position,
1250
- align,
1251
- offset: offset2,
1252
- clickOutside
1253
- } = toRefs(props);
1254
- const dropdownMenuRef = ref(null);
1255
- onClickOutside(dropdownMenuRef, (value) => {
1256
- var _a;
1257
- if (((_a = clickOutside.value) == null ? void 0 : _a.call(clickOutside)) && !origin.value.contains(value.target)) {
1258
- emit("update:modelValue", false);
1259
- }
1260
- });
1261
- const currentPosition = ref("bottom");
1262
- const handlePositionChange = (pos) => {
1263
- currentPosition.value = pos.split("-")[0] === "top" ? "top" : "bottom";
1264
- };
1265
- const styles = computed(() => ({
1266
- transformOrigin: currentPosition.value === "top" ? "0% 100%" : "0% 0%"
1267
- }));
1268
- return () => createVNode(Teleport, {
1269
- "to": "body"
1270
- }, {
1271
- default: () => [createVNode(Transition, {
1272
- "name": `devui-dropdown-fade-${currentPosition.value}`
1273
- }, {
1274
- default: () => [createVNode(FlexibleOverlay, {
1275
- "modelValue": modelValue.value,
1276
- "onUpdate:modelValue": ($event) => modelValue.value = $event,
1277
- "origin": origin == null ? void 0 : origin.value,
1278
- "position": position.value,
1279
- "align": align.value,
1280
- "offset": offset2.value,
1281
- "onPositionChange": handlePositionChange,
1282
- "style": styles.value
1283
- }, {
1284
- default: () => {
1285
- var _a;
1286
- return [createVNode("div", mergeProps({
1287
- "ref": dropdownMenuRef,
1288
- "class": "devui-dropdown-menu-wrap"
1289
- }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots)])];
1290
- }
1291
- })]
1292
- })]
1293
- });
1294
- }
1295
- });
1296
- var filter = "";
1297
- const Filter = defineComponent({
1298
- props: {
1299
- modelValue: {
1300
- type: Array,
1301
- default: []
1302
- },
1303
- "onUpdate:modelValue": {
1304
- type: Function
1305
- },
1306
- customTemplate: {
1307
- type: Function
1308
- },
1309
- filterList: {
1310
- type: Array,
1311
- required: true
1312
- },
1313
- filterMultiple: {
1314
- type: Boolean,
1315
- default: true
1316
- }
1317
- },
1318
- emits: ["update:modelValue"],
1319
- setup(props) {
1320
- const filterOrigin = ref(null);
1321
- const onUpdateChecked = (config, value) => {
1322
- const checkedList = props.modelValue;
1323
- const update = props["onUpdate:modelValue"];
1324
- const contained = !!checkedList.find((item) => item === config.value);
1325
- if (value && !contained) {
1326
- update == null ? void 0 : update([...checkedList, config.value]);
1327
- } else if (!value && contained) {
1328
- update == null ? void 0 : update(checkedList.filter((item) => config.value !== item));
1329
- }
1330
- };
1331
- const updateSingleChecked = (config) => {
1332
- var _a;
1333
- (_a = props["onUpdate:modelValue"]) == null ? void 0 : _a.call(props, [config.value]);
1334
- };
1335
- const dropdownContent = computed(() => {
1336
- const checkedList = props.modelValue;
1337
- const isContained = (config) => !!checkedList.find((item) => item === config.value);
1338
- return () => createVNode("ul", {
1339
- "class": "devui-dropdown-menu data-table-column-filter-content",
1340
- "style": "padding:10px"
1341
- }, [props.filterList.map((item, index2) => {
1342
- return createVNode("li", {
1343
- "style": index2 > 0 ? "margin-top:10px" : ""
1344
- }, [props.filterMultiple ? createVNode(Checkbox, {
1345
- "modelValue": isContained(item),
1346
- "onUpdate:modelValue": (value) => onUpdateChecked(item, value)
1347
- }, {
1348
- default: () => [item.name]
1349
- }) : createVNode("span", {
1350
- "onClick": () => updateSingleChecked(item)
1351
- }, [item.name])]);
1352
- })]);
1353
- });
1354
- return () => createVNode(Fragment, null, [createVNode("span", {
1355
- "ref": filterOrigin
1356
- }, [createVNode("i", {
1357
- "class": ["filter-icon", {
1358
- "filter-icon-active": true
1359
- }]
1360
- }, [createVNode("svg", {
1361
- "width": "16px",
1362
- "height": "16px",
1363
- "viewBox": "0 0 16 16",
1364
- "version": "1.1",
1365
- "xmlns": "http://www.w3.org/2000/svg",
1366
- "xmlns:xlink": "http://www.w3.org/1999/xlink"
1367
- }, [createVNode("g", {
1368
- "stroke": "none",
1369
- "stroke-width": "1",
1370
- "fill": "none",
1371
- "fill-rule": "evenodd"
1372
- }, [createVNode("g", null, [createVNode("polygon", {
1373
- "points": "10.0085775 7 10.0085775 15 6 13 6 7 2 3 2 1 14 1 14 3"
1374
- }, null)])])])])]), createVNode(Dropdown, {
1375
- "origin": filterOrigin.value,
1376
- "closeScope": "blank"
1377
- }, {
1378
- default: () => {
1379
- var _a, _b;
1380
- return [(_b = (_a = props.customTemplate) == null ? void 0 : _a.call(props, {
1381
- value: props.modelValue,
1382
- onChange: props["onUpdate:modelValue"]
1383
- })) != null ? _b : dropdownContent.value()];
1384
- }
1385
- })]);
1386
- }
1387
- });
1388
- var header = "";
1389
- var body = "";
1390
- const useSort = (store, column) => {
1391
- const directionRef = ref("DESC");
1392
- watch([directionRef, column], ([direction, column2]) => {
1393
- if (column2.sortable) {
1394
- store.sortData(column2.field, direction, column2.compareFn);
1395
- }
1396
- }, { immediate: true });
1397
- return directionRef;
1398
- };
1399
- const useFliter = (store, column) => {
1400
- const filteredRef = shallowRef();
1401
- watch(filteredRef, (results) => {
1402
- store.filterData(column.value.field, results);
1403
- });
1404
- return filteredRef;
1405
- };
1406
- var TableHeader = defineComponent({
1407
- name: "DTableHeader",
1408
- setup() {
1409
- const table2 = inject(TABLE_TOKEN);
1410
- const {
1411
- _checkAll: checkAll,
1412
- _halfChecked: halfChecked,
1413
- _columns: columns,
1414
- isFixedLeft
1415
- } = table2.store.states;
1416
- const thAttrs = computed(() => isFixedLeft.value ? {
1417
- class: "devui-sticky-cell left",
1418
- style: "left:0;"
1419
- } : null);
1420
- const checkbox2 = computed(() => table2.props.checkable ? createVNode("th", thAttrs.value, [createVNode(Checkbox, {
1421
- "style": "padding:10px;",
1422
- "modelValue": checkAll.value,
1423
- "onUpdate:modelValue": ($event) => checkAll.value = $event,
1424
- "halfchecked": halfChecked.value
1425
- }, null)]) : null);
1426
- return () => {
1427
- return createVNode("thead", {
1428
- "class": "devui-thead"
1429
- }, [createVNode("tr", null, [checkbox2.value, columns.value.map((column, index2) => createVNode(Th, {
1430
- "key": index2,
1431
- "column": column
1432
- }, null))])]);
1433
- };
1434
- }
1435
- });
1436
- const Th = defineComponent({
1437
- props: {
1438
- column: {
1439
- type: Object,
1440
- required: true
1441
- }
1442
- },
1443
- setup(props) {
1444
- const table2 = inject(TABLE_TOKEN);
1445
- const {
1446
- column
1447
- } = toRefs(props);
1448
- const directionRef = useSort(table2.store, column);
1449
- const filteredRef = useFliter(table2.store, column);
1450
- const {
1451
- stickyCell,
1452
- offsetStyle
1453
- } = useFixedColumn(column);
1454
- return () => createVNode("th", {
1455
- "class": stickyCell.value,
1456
- "style": offsetStyle.value
1457
- }, [createVNode("div", {
1458
- "class": "header-container"
1459
- }, [props.column.renderHeader(), props.column.filterable && createVNode(Filter, {
1460
- "modelValue": filteredRef.value,
1461
- "onUpdate:modelValue": ($event) => filteredRef.value = $event,
1462
- "filterList": props.column.filterList,
1463
- "customTemplate": props.column.customFilterTemplate
1464
- }, null)]), props.column.sortable && createVNode(Sort, {
1465
- "modelValue": directionRef.value,
1466
- "onUpdate:modelValue": ($event) => directionRef.value = $event
1467
- }, null)]);
1468
- }
1469
- });
1470
- var TableBody = defineComponent({
1471
- name: "DTableBody",
1472
- setup() {
1473
- const table2 = inject(TABLE_TOKEN);
1474
- const {
1475
- _data: data,
1476
- _columns: columns,
1477
- _checkList: checkList,
1478
- isFixedLeft
1479
- } = table2.store.states;
1480
- const hoverEnabled = computed(() => table2.props.rowHoveredHighlight);
1481
- const tdAttrs = computed(() => isFixedLeft.value ? {
1482
- class: "devui-sticky-cell left",
1483
- style: "left:0;"
1484
- } : null);
1485
- const renderCheckbox = (index2) => table2.props.checkable ? createVNode("td", tdAttrs.value, [createVNode(Checkbox, {
1486
- "modelValue": checkList.value[index2],
1487
- "onUpdate:modelValue": ($event) => checkList.value[index2] = $event
1488
- }, null)]) : null;
1489
- return () => createVNode("tbody", {
1490
- "class": "devui-tbody"
1491
- }, [data.value.map((row, rowIndex) => {
1492
- return createVNode("tr", {
1493
- "key": rowIndex,
1494
- "class": {
1495
- "hover-enabled": hoverEnabled.value
1496
- }
1497
- }, [renderCheckbox(rowIndex), columns.value.map((column, index2) => createVNode(TD, {
1498
- "column": column,
1499
- "index": index2,
1500
- "row": row
1501
- }, null))]);
1502
- })]);
1503
- }
1504
- });
1505
- const TD = defineComponent({
1506
- props: {
1507
- column: {
1508
- type: Object
1509
- },
1510
- row: {
1511
- type: Object
1512
- },
1513
- index: {
1514
- type: Number
1515
- }
1516
- },
1517
- setup(props) {
1518
- const column = toRef(props, "column");
1519
- const {
1520
- stickyCell,
1521
- offsetStyle
1522
- } = useFixedColumn(column);
1523
- return () => createVNode("td", {
1524
- "class": stickyCell.value,
1525
- "style": offsetStyle.value
1526
- }, [column.value.renderCell(props.row, props.index)]);
1527
- }
1528
- });
1529
- var FixHeader = defineComponent({
1530
- props: {
1531
- classes: {
1532
- type: Object,
1533
- default: () => ({})
1534
- },
1535
- isEmpty: {
1536
- type: Boolean
1537
- }
1538
- },
1539
- setup(props) {
1540
- return () => {
1541
- return createVNode("div", {
1542
- "class": "devui-table-view"
1543
- }, [createVNode("div", {
1544
- "style": "overflow:hidden scroll;"
1545
- }, [createVNode("table", {
1546
- "class": props.classes,
1547
- "cellpadding": "0",
1548
- "cellspacing": "0"
1549
- }, [createVNode(ColGroup, null, null), createVNode(TableHeader, null, null)])]), createVNode("div", {
1550
- "class": "scroll-view"
1551
- }, [createVNode("table", {
1552
- "class": props.classes,
1553
- "cellpadding": "0",
1554
- "cellspacing": "0"
1555
- }, [createVNode(ColGroup, null, null), !props.isEmpty && createVNode(TableBody, {
1556
- "style": "flex: 1"
1557
- }, null)])])]);
1558
- };
1559
- }
1560
- });
1561
- var NormalHeader = defineComponent({
1562
- props: {
1563
- classes: {
1564
- type: Object,
1565
- default: () => ({})
1566
- },
1567
- isEmpty: {
1568
- type: Boolean
1569
- }
1570
- },
1571
- setup(props) {
1572
- return () => {
1573
- return createVNode("table", {
1574
- "class": props.classes,
1575
- "cellpadding": "0",
1576
- "cellspacing": "0"
1577
- }, [createVNode(ColGroup, null, null), createVNode(TableHeader, {
1578
- "style": "position:relative"
1579
- }, null), !props.isEmpty && createVNode(TableBody, null, null)]);
1580
- };
1581
- }
1582
- });
1583
- var table = "";
1584
- var Table = defineComponent({
1585
- name: "DTable",
1586
- props: TableProps,
1587
- setup(props, ctx) {
1588
- const table2 = getCurrentInstance();
1589
- const store = createStore(toRef(props, "data"));
1590
- table2.store = store;
1591
- provide(TABLE_TOKEN, table2);
1592
- const {
1593
- classes,
1594
- style
1595
- } = useTable(props);
1596
- const isEmpty2 = computed(() => props.data.length === 0);
1597
- ctx.expose({
1598
- getCheckedRows() {
1599
- return store.getCheckedRows();
1600
- }
1601
- });
1602
- return () => withDirectives(createVNode("div", {
1603
- "class": "devui-table-wrapper",
1604
- "style": style.value
1605
- }, [ctx.slots.default(), props.fixHeader ? createVNode(FixHeader, {
1606
- "classes": classes.value,
1607
- "is-empty": isEmpty2.value
1608
- }, null) : createVNode(NormalHeader, {
1609
- "classes": classes.value,
1610
- "is-empty": isEmpty2.value
1611
- }, null), isEmpty2.value && createVNode("div", {
1612
- "class": "devui-table-empty"
1613
- }, [createTextVNode("No Data")])]), [[resolveDirective("dLoading"), props.showLoading]]);
1614
- }
1615
- });
1616
- const TableColumnProps = {
1617
- header: {
1618
- type: String,
1619
- default: ""
1620
- },
1621
- field: {
1622
- type: String,
1623
- default: ""
1624
- },
1625
- width: {
1626
- type: [String, Number],
1627
- default: ""
1628
- },
1629
- minWidth: {
1630
- type: [String, Number],
1631
- default: 80
1632
- },
1633
- formatter: {
1634
- type: Function
1635
- },
1636
- order: {
1637
- type: Number,
1638
- default: 0
1639
- },
1640
- sortable: {
1641
- type: Boolean,
1642
- default: false
1643
- },
1644
- compareFn: {
1645
- type: Function,
1646
- default: (field, a, b) => a[field] < b[field]
1647
- },
1648
- filterable: {
1649
- type: Boolean,
1650
- default: false
1651
- },
1652
- filterMultiple: {
1653
- type: Boolean,
1654
- default: false
1655
- },
1656
- filterList: {
1657
- type: Array,
1658
- default: []
1659
- },
1660
- fixedLeft: {
1661
- type: String
1662
- },
1663
- fixedRight: {
1664
- type: String
1665
- }
1666
- };
1667
- function formatWidth(width) {
1668
- if (typeof width === "number") {
1669
- return width;
1670
- }
1671
- return parseInt(width, 10) || 0;
1672
- }
1673
- function formatMinWidth(minWidth) {
1674
- return formatWidth(minWidth) || 80;
1675
- }
1676
- function defaultRenderHeader() {
1677
- return h("span", { class: "title" }, this.header);
1678
- }
1679
- function createColumn(props, templates) {
1680
- const {
1681
- field,
1682
- header: header2,
1683
- sortable,
1684
- width,
1685
- minWidth,
1686
- formatter,
1687
- compareFn,
1688
- filterable,
1689
- filterList,
1690
- filterMultiple,
1691
- order,
1692
- fixedLeft,
1693
- fixedRight
1694
- } = props;
1695
- const column = reactive({});
1696
- function defaultRenderCell(rowData, index2) {
1697
- var _a, _b;
1698
- const value = rowData[this.field];
1699
- if (templates.default) {
1700
- return templates.default(rowData);
1701
- }
1702
- if (this.formatter) {
1703
- return this.formatter(rowData, value, index2);
1704
- }
1705
- return (_b = (_a = value == null ? void 0 : value.toString) == null ? void 0 : _a.call(value)) != null ? _b : "";
1706
- }
1707
- watch([field, header2, order], ([fieldVal, headerVal, orderVal]) => {
1708
- column.field = fieldVal;
1709
- column.header = headerVal;
1710
- column.order = orderVal;
1711
- }, { immediate: true });
1712
- watch([sortable, compareFn], ([sortableVal, compareFnVal]) => {
1713
- column.sortable = sortableVal;
1714
- column.compareFn = compareFnVal;
1715
- });
1716
- watch([filterable, filterList, filterMultiple], ([filterableVal, filterListVal, filterMultipleVal]) => {
1717
- column.filterable = filterableVal;
1718
- column.filterMultiple = filterMultipleVal;
1719
- column.filterList = filterListVal;
1720
- }, { immediate: true });
1721
- watch([fixedLeft, fixedRight], ([left, right]) => {
1722
- column.fixedLeft = left;
1723
- column.fixedRight = right;
1724
- }, { immediate: true });
1725
- watch([width, minWidth], ([widthVal, minWidthVal]) => {
1726
- column.width = formatWidth(widthVal);
1727
- column.minWidth = formatMinWidth(minWidthVal);
1728
- column.realWidth = column.width || column.minWidth;
1729
- });
1730
- onBeforeMount(() => {
1731
- column.renderHeader = defaultRenderHeader;
1732
- column.renderCell = defaultRenderCell;
1733
- column.formatter = formatter.value;
1734
- column.customFilterTemplate = templates.customFilterTemplate;
1735
- column.subColumns = templates.subColumns;
1736
- });
1737
- return column;
1738
- }
1739
- var Column = defineComponent({
1740
- name: "DColumn",
1741
- props: TableColumnProps,
1742
- setup(props, ctx) {
1743
- const column = createColumn(toRefs(props), ctx.slots);
1744
- const parent = inject(TABLE_TOKEN);
1745
- onMounted(() => {
1746
- parent.store.insertColumn(column);
1747
- watch(() => column.order, () => {
1748
- parent.store.sortColumn();
1749
- });
1750
- });
1751
- onBeforeUnmount(() => {
1752
- parent.store.removeColumn(column);
1753
- });
1754
- },
1755
- render() {
1756
- return null;
1757
- }
1758
- });
1759
- class View {
1760
- constructor() {
1761
- __publicField(this, "top", "50%");
1762
- __publicField(this, "left", "50%");
1763
- }
1764
- }
1765
- const componentProps = {
1766
- message: String,
1767
- backdrop: Boolean,
1768
- view: {
1769
- type: Object,
1770
- default: () => new View()
1771
- },
1772
- zIndex: Number,
1773
- isFull: {
1774
- type: Boolean,
1775
- default: false
1776
- }
1777
- };
1778
- class LoadingProps {
1779
- constructor() {
1780
- __publicField(this, "target");
1781
- __publicField(this, "message");
1782
- __publicField(this, "loadingTemplateRef");
1783
- __publicField(this, "backdrop", true);
1784
- __publicField(this, "positionType", "relative");
1785
- __publicField(this, "view", new View());
1786
- __publicField(this, "zIndex");
1787
- }
1788
- }
1789
- var loading = "";
1790
- var Loading = defineComponent({
1791
- name: "DLoading",
1792
- inheritAttrs: false,
1793
- props: componentProps,
1794
- setup(props) {
1795
- const style = {
1796
- top: props.view.top,
1797
- left: props.view.left,
1798
- zIndex: props.zIndex
1799
- };
1800
- if (!props.message) {
1801
- style.background = "none";
1802
- }
1803
- const isShow = ref(false);
1804
- const open = () => {
1805
- isShow.value = true;
1806
- };
1807
- const close = () => {
1808
- isShow.value = false;
1809
- };
1810
- return {
1811
- style,
1812
- isShow,
1813
- open,
1814
- close
1815
- };
1816
- },
1817
- render() {
1818
- var _a;
1819
- const {
1820
- isShow,
1821
- isFull,
1822
- backdrop,
1823
- style,
1824
- message,
1825
- $slots
1826
- } = this;
1827
- return isShow && createVNode("div", {
1828
- "class": ["devui-loading-contanier", isFull ? "devui-loading--full" : ""]
1829
- }, [((_a = $slots.default) == null ? void 0 : _a.call($slots)) || createVNode("div", {
1830
- "class": "devui-loading-wrapper"
1831
- }, [backdrop ? createVNode("div", {
1832
- "class": "devui-loading-mask"
1833
- }, null) : null, createVNode("div", {
1834
- "style": style,
1835
- "class": "devui-loading-area"
1836
- }, [createVNode("div", {
1837
- "class": "devui-busy-default-spinner"
1838
- }, [createVNode("div", {
1839
- "class": "devui-loading-bar1"
1840
- }, null), createVNode("div", {
1841
- "class": "devui-loading-bar2"
1842
- }, null), createVNode("div", {
1843
- "class": "devui-loading-bar3"
1844
- }, null), createVNode("div", {
1845
- "class": "devui-loading-bar4"
1846
- }, null)]), message ? createVNode("span", {
1847
- "class": "devui-loading-text"
1848
- }, [message]) : null])])]);
1849
- }
1850
- });
1851
- const COMPONENT_CONTAINER_SYMBOL = Symbol("dev_component_container");
1852
- function createComponent(Component, props, children = null) {
1853
- const vnode = h(Component, __spreadValues({}, props), children);
1854
- const container = document.createElement("div");
1855
- vnode[COMPONENT_CONTAINER_SYMBOL] = container;
1856
- render(vnode, container);
1857
- return vnode.component;
1858
- }
1859
- function unmountComponent(ComponnetInstance) {
1860
- render(null, ComponnetInstance == null ? void 0 : ComponnetInstance.vnode[COMPONENT_CONTAINER_SYMBOL]);
1861
- }
1862
- const loadingConstructor = defineComponent(Loading);
1863
- const cacheInstance = /* @__PURE__ */ new WeakSet();
1864
- const isEmpty = (val) => {
1865
- if (!val)
1866
- return true;
1867
- if (Array.isArray(val))
1868
- return val.length === 0;
1869
- if (val instanceof Set || val instanceof Map)
1870
- return val.size === 0;
1871
- if (val instanceof Promise)
1872
- return false;
1873
- if (typeof val === "object") {
1874
- try {
1875
- return Object.keys(val).length === 0;
1876
- } catch (e) {
1877
- return false;
1878
- }
1879
- }
1880
- return false;
1881
- };
1882
- const getType = (vari) => {
1883
- return Object.prototype.toString.call(vari).slice(8, -1).toLowerCase();
1884
- };
1885
- const isPromise = (value) => {
1886
- const type = getType(value);
1887
- switch (type) {
1888
- case "promise":
1889
- return [value];
1890
- case "array":
1891
- if (value.some((val) => getType(val) !== "promise")) {
1892
- console.error(new TypeError("Binding values should all be of type Promise"));
1893
- return "error";
1894
- }
1895
- return value;
1896
- default:
1897
- return false;
1898
- }
1899
- };
1900
- const unmount = (el) => {
1901
- cacheInstance.delete(el);
1902
- el.instance.proxy.close();
1903
- unmountComponent(el.instance);
1904
- };
1905
- const toggleLoading = (el, binding) => {
1906
- if (binding.value) {
1907
- const vals = isPromise(binding.value);
1908
- if (vals === "error")
1909
- return;
1910
- el.instance.proxy.open();
1911
- el.appendChild(el.mask);
1912
- cacheInstance.add(el);
1913
- if (vals) {
1914
- Promise.all(vals).catch((err) => {
1915
- console.error(new Error("Promise handling errors"), err);
1916
- }).finally(() => {
1917
- unmount(el);
1918
- });
1919
- }
1920
- } else {
1921
- unmount(el);
1922
- }
1923
- };
1924
- const removeAttribute = (el) => {
1925
- el.removeAttribute("zindex");
1926
- el.removeAttribute("positiontype");
1927
- el.removeAttribute("backdrop");
1928
- el.removeAttribute("message");
1929
- el.removeAttribute("view");
1930
- el.removeAttribute("loadingtemplateref");
1931
- };
1932
- const handleProps = (el, vprops) => {
1933
- const props = __spreadValues(__spreadValues({}, new LoadingProps()), vprops);
1934
- const loadingTemplateRef = props.loadingTemplateRef;
1935
- const loadingInstance = createComponent(loadingConstructor, __spreadValues({}, props), loadingTemplateRef ? () => loadingTemplateRef : null);
1936
- el.style.position = props.positionType;
1937
- el.options = props;
1938
- el.instance = loadingInstance;
1939
- el.mask = loadingInstance.proxy.$el;
1940
- };
1941
- const loadingDirective = {
1942
- mounted: function(el, binding, vnode) {
1943
- handleProps(el, vnode.props);
1944
- removeAttribute(el);
1945
- !isEmpty(binding.value) && toggleLoading(el, binding);
1946
- },
1947
- updated: function(el, binding, vnode) {
1948
- if (!isEmpty(binding.value) && cacheInstance.has(el) || isEmpty(binding.value) && !cacheInstance.has(el))
1949
- return;
1950
- !cacheInstance.has(el) && handleProps(el, vnode.props);
1951
- removeAttribute(el);
1952
- toggleLoading(el, binding);
1953
- }
1954
- };
1955
- defineComponent(Loading);
1956
- Table.install = function(app) {
1957
- app.directive("dLoading", loadingDirective);
1958
- app.component(Table.name, Table);
1959
- app.component(Column.name, Column);
1960
- };
1961
- var index = {
1962
- title: "Table \u8868\u683C",
1963
- category: "\u6570\u636E\u5C55\u793A",
1964
- status: "10%",
1965
- install(app) {
1966
- app.use(Table);
1967
- }
1968
- };
1969
- export { Column, Table, index as default };