vue-devui 1.0.0-rc.9 → 1.0.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 (208) hide show
  1. package/README.md +189 -149
  2. package/alert/index.es.js +12 -7
  3. package/alert/index.umd.js +1 -1
  4. package/alert/style.css +1 -1
  5. package/auto-complete/index.es.js +8036 -260
  6. package/auto-complete/index.umd.js +29 -3
  7. package/auto-complete/style.css +1 -1
  8. package/badge/index.es.js +8 -2
  9. package/badge/index.umd.js +1 -1
  10. package/badge/style.css +1 -1
  11. package/button/index.es.js +110 -45
  12. package/button/index.umd.js +15 -15
  13. package/button/style.css +1 -1
  14. package/card/index.es.js +5 -1
  15. package/card/index.umd.js +1 -1
  16. package/card/style.css +1 -1
  17. package/checkbox/index.es.js +7778 -81
  18. package/checkbox/index.umd.js +27 -1
  19. package/checkbox/style.css +1 -1
  20. package/{date-picker → collapse}/index.d.ts +0 -0
  21. package/collapse/index.es.js +213 -0
  22. package/collapse/index.umd.js +1 -0
  23. package/{date-picker → collapse}/package.json +1 -1
  24. package/collapse/style.css +1 -0
  25. package/countdown/index.es.js +56 -13
  26. package/countdown/index.umd.js +1 -1
  27. package/date-picker-pro/index.d.ts +7 -0
  28. package/date-picker-pro/index.es.js +12022 -0
  29. package/date-picker-pro/index.umd.js +27 -0
  30. package/date-picker-pro/package.json +7 -0
  31. package/date-picker-pro/style.css +1 -0
  32. package/drawer/index.es.js +22 -5
  33. package/drawer/index.umd.js +1 -1
  34. package/drawer/style.css +1 -1
  35. package/dropdown/index.es.js +92 -123
  36. package/dropdown/index.umd.js +1 -1
  37. package/dropdown/style.css +1 -1
  38. package/editable-select/index.es.js +374 -149
  39. package/editable-select/index.umd.js +1 -1
  40. package/editable-select/style.css +1 -1
  41. package/form/index.es.js +102 -123
  42. package/form/index.umd.js +14 -14
  43. package/form/style.css +1 -1
  44. package/icon/index.es.js +107 -41
  45. package/icon/index.umd.js +1 -1
  46. package/icon/style.css +1 -1
  47. package/image-preview/style.css +1 -1
  48. package/input/index.es.js +8097 -170
  49. package/input/index.umd.js +27 -1
  50. package/input/style.css +1 -1
  51. package/input-number/index.es.js +34 -32
  52. package/input-number/index.umd.js +1 -1
  53. package/input-number/style.css +1 -1
  54. package/layout/index.es.js +1 -1
  55. package/layout/index.umd.js +1 -1
  56. package/loading/index.es.js +51 -51
  57. package/loading/index.umd.js +1 -1
  58. package/loading/style.css +1 -1
  59. package/mention/index.d.ts +7 -0
  60. package/mention/index.es.js +8326 -0
  61. package/mention/index.umd.js +36 -0
  62. package/mention/package.json +7 -0
  63. package/mention/style.css +1 -0
  64. package/menu/index.d.ts +7 -0
  65. package/menu/index.es.js +921 -0
  66. package/menu/index.umd.js +1 -0
  67. package/menu/package.json +7 -0
  68. package/menu/style.css +1 -0
  69. package/message/index.d.ts +7 -0
  70. package/message/index.es.js +539 -0
  71. package/message/index.umd.js +1 -0
  72. package/message/package.json +7 -0
  73. package/message/style.css +1 -0
  74. package/modal/index.es.js +390 -185
  75. package/modal/index.umd.js +1 -1
  76. package/modal/style.css +1 -1
  77. package/notification/index.es.js +148 -79
  78. package/notification/index.umd.js +1 -1
  79. package/notification/style.css +1 -1
  80. package/nuxt/components/Collapse.js +3 -0
  81. package/nuxt/components/CollapseItem.js +3 -0
  82. package/nuxt/components/DRangeDatePickerPro.js +3 -0
  83. package/nuxt/components/DatePickerPro.js +3 -0
  84. package/nuxt/components/IconGroup.js +3 -0
  85. package/nuxt/components/Mention.js +3 -0
  86. package/nuxt/components/Menu.js +3 -0
  87. package/nuxt/components/MenuItem.js +3 -0
  88. package/nuxt/components/Message.js +3 -0
  89. package/nuxt/components/OptionGroup.js +3 -0
  90. package/nuxt/components/RadioButton.js +3 -0
  91. package/nuxt/components/Step.js +3 -0
  92. package/nuxt/components/Steps.js +3 -0
  93. package/nuxt/components/SubMenu.js +3 -0
  94. package/nuxt/components/TABLE_TOKEN.js +3 -0
  95. package/nuxt/components/TimePicker.js +3 -0
  96. package/nuxt/components/TimeSelect.js +3 -0
  97. package/nuxt/components/animationInjectionKey.js +3 -0
  98. package/nuxt/components/collapseItemProps.js +3 -0
  99. package/nuxt/components/collapseProps.js +3 -0
  100. package/nuxt/components/datePickerProCommonProps.js +3 -0
  101. package/nuxt/components/datePickerProPanelProps.js +3 -0
  102. package/nuxt/components/datePickerProProps.js +3 -0
  103. package/nuxt/components/mentionProps.js +3 -0
  104. package/nuxt/components/messageProps.js +3 -0
  105. package/nuxt/components/paginationInjectionKey.js +3 -0
  106. package/nuxt/components/roundInjectionKey.js +3 -0
  107. package/nuxt/components/skeletonItemProps.js +3 -0
  108. package/nuxt/components/stepProps.js +3 -0
  109. package/nuxt/components/stepsProps.js +3 -0
  110. package/nuxt/components/tableProps.js +3 -0
  111. package/nuxt/components/timerPickerPanelProps.js +3 -0
  112. package/nuxt/components/treeNodeProps.js +3 -0
  113. package/overlay/index.es.js +87 -140
  114. package/overlay/index.umd.js +1 -1
  115. package/overlay/style.css +1 -1
  116. package/package.json +7 -4
  117. package/pagination/index.es.js +10180 -129
  118. package/pagination/index.umd.js +27 -1
  119. package/pagination/style.css +1 -1
  120. package/panel/index.es.js +4 -0
  121. package/panel/index.umd.js +1 -1
  122. package/panel/style.css +1 -1
  123. package/popover/index.es.js +111 -164
  124. package/popover/index.umd.js +16 -16
  125. package/popover/style.css +1 -1
  126. package/progress/style.css +1 -1
  127. package/radio/index.es.js +7860 -58
  128. package/radio/index.umd.js +27 -1
  129. package/radio/style.css +1 -1
  130. package/rate/style.css +1 -1
  131. package/result/index.es.js +93 -41
  132. package/result/index.umd.js +1 -1
  133. package/result/style.css +1 -1
  134. package/search/index.es.js +3737 -1206
  135. package/search/index.umd.js +18 -18
  136. package/search/style.css +1 -1
  137. package/select/index.es.js +4446 -2499
  138. package/select/index.umd.js +17 -17
  139. package/select/style.css +1 -1
  140. package/skeleton/index.es.js +87 -261
  141. package/skeleton/index.umd.js +1 -1
  142. package/skeleton/style.css +1 -1
  143. package/slider/index.es.js +116 -143
  144. package/slider/index.umd.js +1 -1
  145. package/slider/style.css +1 -1
  146. package/splitter/index.es.js +284 -152
  147. package/splitter/index.umd.js +16 -16
  148. package/splitter/style.css +1 -1
  149. package/statistic/index.es.js +34 -16
  150. package/statistic/index.umd.js +1 -1
  151. package/statistic/style.css +1 -1
  152. package/status/index.es.js +4 -0
  153. package/status/index.umd.js +1 -1
  154. package/status/style.css +1 -1
  155. package/steps/index.d.ts +7 -0
  156. package/steps/index.es.js +387 -0
  157. package/steps/index.umd.js +1 -0
  158. package/steps/package.json +7 -0
  159. package/steps/style.css +1 -0
  160. package/style.css +1 -1
  161. package/switch/index.es.js +7785 -60
  162. package/switch/index.umd.js +27 -1
  163. package/switch/style.css +1 -1
  164. package/table/index.es.js +4224 -1502
  165. package/table/index.umd.js +17 -17
  166. package/table/style.css +1 -1
  167. package/tabs/index.es.js +281 -83
  168. package/tabs/index.umd.js +1 -1
  169. package/tabs/style.css +1 -1
  170. package/tag/index.es.js +5 -1
  171. package/tag/index.umd.js +1 -1
  172. package/tag/style.css +1 -1
  173. package/textarea/index.es.js +3362 -1061
  174. package/textarea/index.umd.js +19 -19
  175. package/textarea/style.css +1 -1
  176. package/time-picker/index.d.ts +7 -0
  177. package/time-picker/index.es.js +9549 -0
  178. package/time-picker/index.umd.js +27 -0
  179. package/time-picker/package.json +7 -0
  180. package/time-picker/style.css +1 -0
  181. package/time-select/index.d.ts +7 -0
  182. package/time-select/index.es.js +9610 -0
  183. package/time-select/index.umd.js +27 -0
  184. package/time-select/package.json +7 -0
  185. package/time-select/style.css +1 -0
  186. package/timeline/index.es.js +93 -41
  187. package/timeline/index.umd.js +1 -1
  188. package/timeline/style.css +1 -1
  189. package/tooltip/index.es.js +127 -168
  190. package/tooltip/index.umd.js +16 -16
  191. package/tooltip/style.css +1 -1
  192. package/tree/index.es.js +11045 -607
  193. package/tree/index.umd.js +27 -1
  194. package/tree/style.css +1 -1
  195. package/upload/index.es.js +394 -111
  196. package/upload/index.umd.js +1 -1
  197. package/upload/style.css +1 -1
  198. package/vue-devui.es.js +19687 -11762
  199. package/vue-devui.umd.js +24 -23
  200. package/date-picker/index.es.js +0 -1298
  201. package/date-picker/index.umd.js +0 -1
  202. package/date-picker/style.css +0 -1
  203. package/nuxt/components/DatePicker.js +0 -3
  204. package/nuxt/components/Loading.js +0 -3
  205. package/nuxt/components/StickSlider.js +0 -3
  206. package/nuxt/components/formControlProps.js +0 -3
  207. package/nuxt/components/overlayEmits.js +0 -3
  208. package/nuxt/components/overlayProps.js +0 -3
@@ -1,1298 +0,0 @@
1
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
2
- var __hasOwnProp = Object.prototype.hasOwnProperty;
3
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
4
- var __objRest = (source, exclude) => {
5
- var target = {};
6
- for (var prop in source)
7
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
8
- target[prop] = source[prop];
9
- if (source != null && __getOwnPropSymbols)
10
- for (var prop of __getOwnPropSymbols(source)) {
11
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
12
- target[prop] = source[prop];
13
- }
14
- return target;
15
- };
16
- import { inject, computed, ref, toRefs, defineComponent, createVNode, resolveDynamicComponent, mergeProps, shallowRef, watch, createTextVNode, reactive, onMounted, onUnmounted } from "vue";
17
- const getDateTime = (d) => {
18
- const year = d.getFullYear();
19
- const month = d.getMonth() + 1;
20
- const date = d.getDate();
21
- const day = d.getDay();
22
- const hour = d.getHours();
23
- const minute = d.getMinutes();
24
- const second = d.getSeconds();
25
- const ms = d.getMilliseconds();
26
- return [year, month, date, day, hour, minute, second, ms];
27
- };
28
- const fixStart = (n, m, max = 2, ch = "0") => {
29
- return (n + "").padStart(Math.min(m.length, max), ch);
30
- };
31
- const formatDate = (fmt, d) => {
32
- const usage = getDateTime(d);
33
- let res = fmt;
34
- res = res.replace(/y+/g, (m) => {
35
- const year = usage[0] + "";
36
- if (m.length === 2) {
37
- return year.substring(2);
38
- }
39
- return year;
40
- });
41
- res = res.replace(/M+/g, (m) => fixStart(usage[1], m));
42
- res = res.replace(/d+/g, (m) => fixStart(usage[2], m));
43
- res = res.replace(/h+/g, (m) => fixStart(usage[4], m));
44
- res = res.replace(/m+/g, (m) => fixStart(usage[5], m));
45
- res = res.replace(/s+/g, (m) => fixStart(usage[6], m));
46
- return res;
47
- };
48
- const formatRange$1 = (fmt, a, b, conn = "-") => {
49
- const ab = [a, b];
50
- if (a.getTime() > b.getTime()) {
51
- ab.reverse();
52
- }
53
- return `${formatDate(fmt, ab[0])} ${conn} ${formatDate(fmt, ab[1])}`;
54
- };
55
- const isIn = (a, b) => {
56
- if (!b) {
57
- return false;
58
- }
59
- while (a) {
60
- if (a === b) {
61
- return true;
62
- }
63
- a = a.parentNode;
64
- }
65
- return false;
66
- };
67
- const invokeFunction = (fn, ...args) => {
68
- if (typeof fn === "function") {
69
- fn(...args);
70
- }
71
- };
72
- const getHumanDate = (d) => {
73
- const year = d.getFullYear();
74
- const month = d.getMonth() + 1;
75
- const date = d.getDate();
76
- const day = d.getDay();
77
- const hour = d.getHours();
78
- const minute = d.getMinutes();
79
- const second = d.getSeconds();
80
- const ms = d.getMilliseconds();
81
- return {
82
- year,
83
- y: year,
84
- month,
85
- M: month,
86
- date,
87
- d: date,
88
- day,
89
- hour,
90
- H: hour,
91
- h: hour,
92
- minute,
93
- m: minute,
94
- second,
95
- s: second,
96
- ms
97
- };
98
- };
99
- const getMonthDays = (year, month) => {
100
- const first = new Date(year, month - 1, 1);
101
- const last = new Date(year, month, 0);
102
- const dates = [];
103
- let day = first.getDay();
104
- while (day > 0) {
105
- day -= 1;
106
- dates.push({ date: new Date(year, month - 1, -day), current: -1 });
107
- }
108
- day = last.getDate() - first.getDate();
109
- for (let i = 0; i <= day; i++) {
110
- const date = new Date(first);
111
- date.setDate(i + 1);
112
- dates.push({ date, current: 0 });
113
- }
114
- day = last.getDay();
115
- let tail = last;
116
- for (let i = day; i < 6; i++) {
117
- tail = new Date(year, month, i - day + 1);
118
- dates.push({ date: tail, current: 1 });
119
- }
120
- if (dates.length < 42) {
121
- day = tail.getDate();
122
- for (let i = 1; i <= 7; i++) {
123
- tail = new Date(year, month, day + i);
124
- dates.push({ date: tail, current: 1 });
125
- }
126
- }
127
- return dates;
128
- };
129
- const getMonthWeeklyDays = (date = new Date()) => {
130
- if (!(date instanceof Date)) {
131
- date = new Date();
132
- }
133
- const { year, month } = getHumanDate(date);
134
- const days = getMonthDays(year, month);
135
- const dayRows = [];
136
- while (days.length > 0) {
137
- dayRows.push(days.splice(0, 7));
138
- }
139
- return dayRows;
140
- };
141
- const WEEK_DAYS = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
142
- const invokeCallback = (cb, ...args) => {
143
- typeof cb === "function" && cb(...args);
144
- };
145
- const subDateMonth = (a, b) => {
146
- const am = a.getFullYear() * 12 + a.getMonth();
147
- const bm = b.getFullYear() * 12 + b.getMonth();
148
- return am - bm;
149
- };
150
- const ONE_DAY = 1e3 * 60 * 60 * 24;
151
- const subDateDay = (a, b) => {
152
- const ad = new Date(a.getFullYear(), a.getMonth(), a.getDate()).getTime();
153
- const bd = new Date(b.getFullYear(), b.getMonth(), b.getDate()).getTime();
154
- return (ad - bd) / ONE_DAY;
155
- };
156
- const compareDate = (small, big, mode, min) => {
157
- if (!small || !big) {
158
- return true;
159
- }
160
- if (mode === "year") {
161
- return big.getFullYear() - small.getFullYear() > min;
162
- } else {
163
- return subDateMonth(big, small) > min;
164
- }
165
- };
166
- const parseDate = (str) => {
167
- if (!str || typeof str !== "string") {
168
- return null;
169
- }
170
- const [dateStr = "", timeStr = ""] = str.split(/([ ]|T)+/);
171
- if (!dateStr) {
172
- return null;
173
- }
174
- const [y, m, d] = dateStr.split(/[^\d]+/);
175
- const year = _parseInt(y), month = _parseInt(m), date = _parseInt(d) || 1;
176
- if (!year || !month) {
177
- return null;
178
- }
179
- const time = parseTime(timeStr);
180
- return new Date(year, month - 1, date, ...time);
181
- };
182
- const _parseInt = (str, dftVal) => {
183
- if (!str || typeof str !== "string") {
184
- return dftVal;
185
- }
186
- const n = parseInt(str);
187
- if (isNaN(n)) {
188
- return dftVal;
189
- }
190
- return n;
191
- };
192
- const parseTime = (str) => {
193
- const [h, m, s, ms] = str.split(/[\:\.]+/);
194
- return [_parseInt(h, 0), _parseInt(m, 0), _parseInt(s, 0), _parseInt(ms, 0)];
195
- };
196
- const compareDateSort = (d1, d2, type = "d") => {
197
- const t1 = dateCounter(d1, type), t2 = dateCounter(d2, type);
198
- return t1 < t2 ? -1 : t1 > t2 ? 1 : 0;
199
- };
200
- const dateCounter = (date, type) => {
201
- switch (type) {
202
- case "y":
203
- return date.getFullYear();
204
- case "m":
205
- return date.getFullYear() * 12 + date.getMonth();
206
- }
207
- return date.getTime() / ONE_DAY >> 0;
208
- };
209
- const betweenDate = (date, left, right) => {
210
- if (left instanceof Date && compareDateSort(left, date, "d") > 0) {
211
- return false;
212
- }
213
- if (right instanceof Date && compareDateSort(date, right, "d") > 0) {
214
- return false;
215
- }
216
- return true;
217
- };
218
- const inputProps = {
219
- modelValue: {
220
- type: String,
221
- default: ""
222
- },
223
- disabled: {
224
- type: Boolean,
225
- default: false
226
- },
227
- error: {
228
- type: Boolean,
229
- default: false
230
- },
231
- size: {
232
- type: String,
233
- default: "md"
234
- },
235
- validateEvent: {
236
- type: Boolean,
237
- default: true
238
- },
239
- prefix: {
240
- type: String,
241
- default: ""
242
- },
243
- suffix: {
244
- type: String,
245
- default: ""
246
- },
247
- showPassword: {
248
- type: Boolean,
249
- default: false
250
- },
251
- clearable: {
252
- type: Boolean,
253
- default: false
254
- }
255
- };
256
- const FORM_ITEM_TOKEN = Symbol("dFormItem");
257
- function createBem(namespace, element, modifier) {
258
- let cls = namespace;
259
- if (element) {
260
- cls += `__${element}`;
261
- }
262
- if (modifier) {
263
- cls += `--${modifier}`;
264
- }
265
- return cls;
266
- }
267
- function useNamespace(block, needDot = false) {
268
- const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
269
- const b = () => createBem(namespace);
270
- const e = (element) => element ? createBem(namespace, element) : "";
271
- const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
272
- const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
273
- return {
274
- b,
275
- e,
276
- m,
277
- em
278
- };
279
- }
280
- function useInputRender(props, ctx) {
281
- const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
282
- const isValidateError = computed(() => (formItemContext == null ? void 0 : formItemContext.validateState) === "error");
283
- const ns = useNamespace("input");
284
- const slotNs = useNamespace("input-slot");
285
- const isFocus = ref(false);
286
- const { error, size, disabled } = toRefs(props);
287
- const slots = ctx.slots;
288
- const _a = ctx.attrs, { style, class: customClass } = _a, otherAttrs = __objRest(_a, ["style", "class"]);
289
- const customStyle = { style };
290
- const wrapClasses = computed(() => ({
291
- [ns.e("wrapper")]: true,
292
- [ns.m("focus")]: isFocus.value,
293
- [ns.m("disabled")]: disabled.value,
294
- [ns.m("error")]: error.value || isValidateError.value,
295
- [ns.m("feedback")]: formItemContext == null ? void 0 : formItemContext.showFeedback
296
- }));
297
- const inputClasses = computed(() => [
298
- {
299
- [ns.b()]: true,
300
- [ns.m(size.value)]: true,
301
- [slotNs.b()]: slots.prepend || slots.append,
302
- [ns.m("append")]: slots.append,
303
- [ns.m("prepend")]: slots.prepend
304
- },
305
- customClass
306
- ]);
307
- return { isFocus, wrapClasses, inputClasses, customStyle, otherAttrs };
308
- }
309
- function useInputEvent(isFocus, props, ctx) {
310
- const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
311
- const onFocus = (e) => {
312
- isFocus.value = true;
313
- ctx.emit("focus", e);
314
- };
315
- const onBlur = (e) => {
316
- isFocus.value = false;
317
- ctx.emit("blur", e);
318
- if (props.validateEvent) {
319
- formItemContext == null ? void 0 : formItemContext.validate("blur").catch((err) => console.warn(err));
320
- }
321
- };
322
- const onInput = (e) => {
323
- ctx.emit("update:modelValue", e.target.value);
324
- };
325
- const onChange = (e) => {
326
- ctx.emit("change", e.target.value);
327
- };
328
- const onKeydown = (e) => {
329
- ctx.emit("keydown", e);
330
- };
331
- const onClear = () => {
332
- ctx.emit("update:modelValue", "");
333
- ctx.emit("clear");
334
- };
335
- return { onFocus, onBlur, onInput, onChange, onKeydown, onClear };
336
- }
337
- function useInputFunction(input2) {
338
- const refInput = computed(() => input2.value);
339
- const select = () => {
340
- var _a;
341
- (_a = refInput.value) == null ? void 0 : _a.select();
342
- };
343
- const focus = () => {
344
- var _a;
345
- (_a = refInput.value) == null ? void 0 : _a.focus();
346
- };
347
- const blur = () => {
348
- var _a;
349
- (_a = refInput.value) == null ? void 0 : _a.blur();
350
- };
351
- return { select, focus, blur };
352
- }
353
- var input = "";
354
- function isUrl(value) {
355
- return /^((http|https):)?\/\//.test(value);
356
- }
357
- const DEFAULT_PREFIX = "icon";
358
- const iconProps = {
359
- name: {
360
- type: String,
361
- default: "",
362
- required: true
363
- },
364
- size: {
365
- type: [Number, String],
366
- default: "inherit"
367
- },
368
- color: {
369
- type: String,
370
- default: "inherit"
371
- },
372
- component: {
373
- type: Object,
374
- default: null
375
- },
376
- classPrefix: {
377
- type: String,
378
- default: DEFAULT_PREFIX
379
- }
380
- };
381
- const svgIconProps = {
382
- name: {
383
- type: String,
384
- default: "",
385
- required: true
386
- },
387
- color: {
388
- type: String,
389
- default: "inherit"
390
- },
391
- size: {
392
- type: [Number, String],
393
- default: "inherit"
394
- }
395
- };
396
- var icon = "";
397
- var svgIcon = defineComponent({
398
- name: "DSvgIcon",
399
- props: svgIconProps,
400
- setup(props) {
401
- const {
402
- name,
403
- color,
404
- size
405
- } = toRefs(props);
406
- const ns = useNamespace("svg-icon");
407
- const iconName = computed(() => `#icon-${name.value}`);
408
- const iconSize = computed(() => {
409
- return typeof size.value === "number" ? `${size.value}px` : size.value;
410
- });
411
- const styles = {
412
- width: iconSize.value,
413
- height: iconSize.value
414
- };
415
- return () => {
416
- return createVNode("svg", {
417
- "class": ns.b(),
418
- "style": styles
419
- }, [createVNode("use", {
420
- "xlink:href": iconName.value,
421
- "fill": color.value
422
- }, null)]);
423
- };
424
- }
425
- });
426
- var Icon = defineComponent({
427
- name: "DIcon",
428
- props: iconProps,
429
- setup(props, {
430
- attrs
431
- }) {
432
- const {
433
- component,
434
- name,
435
- size,
436
- color,
437
- classPrefix
438
- } = toRefs(props);
439
- const IconComponent = component.value ? resolveDynamicComponent(component.value) : resolveDynamicComponent(svgIcon);
440
- const iconSize = computed(() => {
441
- return typeof size.value === "number" ? `${size.value}px` : size.value;
442
- });
443
- const svgIconDom = () => {
444
- return createVNode(IconComponent, mergeProps({
445
- "name": name.value,
446
- "color": color.value,
447
- "size": iconSize.value
448
- }, attrs), null);
449
- };
450
- const imgIconDom = () => {
451
- return createVNode("img", mergeProps({
452
- "src": name.value,
453
- "alt": name.value.split("/")[name.value.split("/").length - 1],
454
- "style": {
455
- width: iconSize.value || ""
456
- }
457
- }, attrs), null);
458
- };
459
- const fontIconDom = () => {
460
- const fontIconClass = /^icon-/.test(name.value) ? name.value : `${classPrefix.value}-${name.value}`;
461
- return createVNode("i", mergeProps({
462
- "class": [classPrefix.value, fontIconClass],
463
- "style": {
464
- fontSize: iconSize.value,
465
- color: color.value
466
- }
467
- }, attrs), null);
468
- };
469
- return () => {
470
- return component.value ? svgIconDom() : isUrl(name.value) ? imgIconDom() : fontIconDom();
471
- };
472
- }
473
- });
474
- var Input = defineComponent({
475
- name: "DInput",
476
- inheritAttrs: false,
477
- props: inputProps,
478
- emits: ["update:modelValue", "focus", "blur", "input", "change", "keydown", "clear"],
479
- setup(props, ctx) {
480
- const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
481
- const {
482
- modelValue,
483
- disabled
484
- } = toRefs(props);
485
- const ns = useNamespace("input");
486
- const slotNs = useNamespace("input-slot");
487
- const {
488
- isFocus,
489
- wrapClasses,
490
- inputClasses,
491
- customStyle,
492
- otherAttrs
493
- } = useInputRender(props, ctx);
494
- const {
495
- onFocus,
496
- onBlur,
497
- onInput,
498
- onChange,
499
- onKeydown,
500
- onClear
501
- } = useInputEvent(isFocus, props, ctx);
502
- const input2 = shallowRef();
503
- const {
504
- select,
505
- focus,
506
- blur
507
- } = useInputFunction(input2);
508
- const passwordVisible = ref(false);
509
- const clickPasswordIcon = () => {
510
- passwordVisible.value = !passwordVisible.value;
511
- focus();
512
- };
513
- const prefixVisiable = ctx.slots.prefix || props.prefix;
514
- const suffixVisiable = ctx.slots.suffix || props.suffix || props.showPassword || props.clearable;
515
- const showPwdVisible = computed(() => props.showPassword && !props.disabled);
516
- const showClearable = computed(() => props.clearable && !props.disabled);
517
- watch(() => props.modelValue, () => {
518
- if (props.validateEvent) {
519
- formItemContext == null ? void 0 : formItemContext.validate("change").catch((err) => console.warn(err));
520
- }
521
- });
522
- ctx.expose({
523
- select,
524
- focus,
525
- blur
526
- });
527
- return () => {
528
- var _a, _b, _c, _d, _e, _f, _g, _h;
529
- return createVNode("div", mergeProps({
530
- "class": inputClasses.value
531
- }, customStyle), [ctx.slots.prepend && createVNode("div", {
532
- "class": slotNs.e("prepend")
533
- }, [(_b = (_a = ctx.slots).prepend) == null ? void 0 : _b.call(_a)]), createVNode("div", {
534
- "class": wrapClasses.value
535
- }, [prefixVisiable && createVNode("span", {
536
- "class": slotNs.e("prefix")
537
- }, [ctx.slots.prefix && createVNode("div", null, [(_d = (_c = ctx.slots).prefix) == null ? void 0 : _d.call(_c)]), props.prefix && createVNode(Icon, {
538
- "size": props.size,
539
- "name": props.prefix
540
- }, null)]), createVNode("input", mergeProps({
541
- "ref": input2,
542
- "value": modelValue.value,
543
- "disabled": disabled.value,
544
- "class": ns.e("inner")
545
- }, otherAttrs, {
546
- "type": props.showPassword ? passwordVisible.value ? "text" : "password" : "text",
547
- "onInput": onInput,
548
- "onFocus": onFocus,
549
- "onBlur": onBlur,
550
- "onChange": onChange,
551
- "onKeydown": onKeydown
552
- }), null), suffixVisiable && createVNode("span", {
553
- "class": slotNs.e("suffix")
554
- }, [props.suffix && createVNode(Icon, {
555
- "size": props.size,
556
- "name": props.suffix
557
- }, null), ctx.slots.suffix && createVNode("div", null, [(_f = (_e = ctx.slots).suffix) == null ? void 0 : _f.call(_e)]), showPwdVisible.value && createVNode(Icon, {
558
- "size": props.size,
559
- "class": ns.em("password", "icon"),
560
- "name": passwordVisible.value ? "preview" : "preview-forbidden",
561
- "onClick": clickPasswordIcon
562
- }, null), showClearable.value && createVNode(Icon, {
563
- "size": props.size,
564
- "class": ns.em("clear", "icon"),
565
- "name": "close",
566
- "onClick": onClear
567
- }, null)])]), ctx.slots.append && createVNode("div", {
568
- "class": slotNs.e("append")
569
- }, [(_h = (_g = ctx.slots).append) == null ? void 0 : _h.call(_g)])]);
570
- };
571
- }
572
- });
573
- const handleCalendarSwitchState = (state, index2, pos, date) => {
574
- switch (index2) {
575
- case 0:
576
- const preYear = new Date(date);
577
- preYear.setFullYear(preYear.getFullYear() - 1);
578
- pos === 0 ? state.current = preYear : state.next = preYear;
579
- break;
580
- case 1:
581
- const preMonth = new Date(date);
582
- preMonth.setMonth(preMonth.getMonth() - 1);
583
- pos === 0 ? state.current = preMonth : state.next = preMonth;
584
- break;
585
- case 2:
586
- const nextMonth = new Date(date);
587
- nextMonth.setMonth(nextMonth.getMonth() + 1);
588
- pos === 0 ? state.current = nextMonth : state.next = nextMonth;
589
- break;
590
- case 3:
591
- const nextYear = new Date(date);
592
- nextYear.setFullYear(nextYear.getFullYear() + 1);
593
- pos === 0 ? state.current = nextYear : state.next = nextYear;
594
- break;
595
- }
596
- };
597
- const formatValue = (state, props) => {
598
- const { format = "y/MM/dd", range, rangeSpliter = "-" } = props || {};
599
- if (range) {
600
- if (!state.start) {
601
- return "";
602
- } else if (!state.end) {
603
- return formatDate(format, state.start);
604
- }
605
- if (state.end < state.start) {
606
- const end = state.end;
607
- state.end = state.start;
608
- state.start = end;
609
- }
610
- return formatRange$1(format, state.start, state.end, rangeSpliter);
611
- } else {
612
- if (!state.start) {
613
- return "";
614
- }
615
- return formatDate(format, state.start);
616
- }
617
- };
618
- const formatPlaceholder = (props) => {
619
- if (!props) {
620
- return "";
621
- }
622
- const format = props.format || `y/MM/dd`;
623
- const sp = props.rangeSpliter || "-";
624
- return props.range ? `${format} ${sp} ${format}` : format;
625
- };
626
- const getDateKey = (date) => {
627
- return date.toDateString();
628
- };
629
- const cellClassName = (props, day, base = "cell") => {
630
- if (!betweenDate(day.date, props.dateMin, props.dateMax)) {
631
- return `${base} disabled`;
632
- } else if (day.current !== 0) {
633
- return `${base} not-current`;
634
- }
635
- const key = getDateKey(day.date);
636
- if (props.type === "range") {
637
- if (props.dateStart) {
638
- if (getDateKey(props.dateStart) === key) {
639
- return `${base} selected`;
640
- }
641
- if (props.dateEnd && getDateKey(props.dateEnd) === key) {
642
- return `${base} selected`;
643
- }
644
- const innerEnd = props.dateEnd || props.dateHover;
645
- if (innerEnd) {
646
- const range = innerEnd > props.dateStart ? [props.dateStart, innerEnd] : [innerEnd, props.dateStart];
647
- if (day.date > range[0] && day.date < range[1]) {
648
- return `${base} innerday`;
649
- }
650
- }
651
- }
652
- return base;
653
- } else {
654
- return props.dateStart && getDateKey(props.dateStart) === key ? `${base} selected` : base;
655
- }
656
- };
657
- const trigEvent = (props, day) => {
658
- if (!betweenDate(day.date, props.dateMin, props.dateMax)) {
659
- return;
660
- }
661
- if (props.type === "range") {
662
- if (!props.dateStart) {
663
- invokeCallback(props.onSelectStart, day.date);
664
- } else if (!props.dateEnd) {
665
- if (subDateDay(props.dateStart, day.date) !== 0) {
666
- invokeCallback(props.onSelectEnd, day.date);
667
- typeof props.onChange === "function" && props.onChange(props.type, props);
668
- }
669
- } else {
670
- invokeCallback(props.onReset, day.date);
671
- }
672
- } else {
673
- invokeCallback(props.onSelected, day.date);
674
- typeof props.onChange === "function" && props.onChange(props.type, props);
675
- }
676
- };
677
- const handleDateEnter = (props, day) => {
678
- if (day.current !== 0) {
679
- return;
680
- }
681
- const { dateMin, dateMax } = props;
682
- if (dateMin && subDateDay(day.date, dateMin) < 0) {
683
- return;
684
- }
685
- if (dateMax && subDateDay(dateMax, day.date) < 0) {
686
- return;
687
- }
688
- if (props.type === "range") {
689
- const key = getDateKey(day.date);
690
- if (!props.dateStart || getDateKey(props.dateStart) === key || props.dateEnd) {
691
- return;
692
- }
693
- invokeCallback(props.onSelecting, day.date);
694
- }
695
- };
696
- const Year = (props) => {
697
- const {
698
- color = "#585d6b",
699
- rotate = 0
700
- } = props;
701
- return createVNode("svg", {
702
- "style": {
703
- transform: `rotate(${rotate}deg)`
704
- },
705
- "width": "10px",
706
- "height": "10px",
707
- "viewBox": "0 0 10 10",
708
- "version": "1.1",
709
- "xmlns": "http://www.w3.org/2000/svg"
710
- }, [createVNode("g", {
711
- "fill": color,
712
- "transform": "translate(-1.000000, -1.000000)"
713
- }, [createVNode("path", {
714
- "d": "M11,1.83333333 L11,10.1666667 L7,7.38833333 L7,10.1666667 L1,6 L7,1.83333333 L7,4.61033333 L11,1.83333333 Z"
715
- }, null)])]);
716
- };
717
- const Month = (props) => {
718
- const {
719
- color = "#585d6b",
720
- rotate = 0
721
- } = props;
722
- return createVNode("svg", {
723
- "style": {
724
- transform: `rotate(${rotate}deg)`
725
- },
726
- "width": "6px",
727
- "height": "10px",
728
- "viewBox": "0 0 6 10",
729
- "version": "1.1",
730
- "xmlns": "http://www.w3.org/2000/svg"
731
- }, [createVNode("g", {
732
- "fill": color,
733
- "transform": "translate(-3.000000, -1.000000)"
734
- }, [createVNode("polygon", {
735
- "points": "6 3 10.1666667 9 1.83333333 9"
736
- }, null)])]);
737
- };
738
- var index$6 = "";
739
- const Item = (props) => {
740
- const {
741
- button: Btn,
742
- disabled = false,
743
- rotate = 0,
744
- date,
745
- pos
746
- } = props;
747
- const color = disabled ? "#cfd0d3" : "#585d6b";
748
- const className = `${disabled ? "disabled" : ""}`;
749
- const handleClick = disabled ? void 0 : () => invokeCallback(props.cb, date, pos);
750
- return createVNode("a", {
751
- "class": className,
752
- "onClick": handleClick
753
- }, [createVNode(Btn, {
754
- "color": color,
755
- "rotate": rotate
756
- }, null)]);
757
- };
758
- const Title = (props) => {
759
- const {
760
- date
761
- } = props;
762
- return createVNode("a", {
763
- "class": "title"
764
- }, [`${date.getFullYear()}\u5E74${(date.getMonth() + 1 + "").padStart(2, "0")}\u6708`]);
765
- };
766
- const CalendarToolbar = (props) => {
767
- const {
768
- type,
769
- current,
770
- compare,
771
- pos,
772
- dateMax,
773
- dateMin,
774
- onPreviousYear,
775
- onPreviousMonth,
776
- onNextMonth,
777
- onNextYear
778
- } = props;
779
- const dis = [false, false, false, false];
780
- if (type === "range") {
781
- if (pos === 1) {
782
- dis[0] = !compareDate(compare, current, "year", 1);
783
- dis[1] = !compareDate(compare, current, "month", 1);
784
- dis[2] = !compareDate(current, dateMax, "month", 0);
785
- dis[3] = !compareDate(current, dateMax, "year", 0);
786
- } else {
787
- dis[0] = !compareDate(dateMin, current, "year", 0);
788
- dis[1] = !compareDate(dateMin, current, "month", 0);
789
- dis[2] = !compareDate(current, compare, "month", 1);
790
- dis[3] = !compareDate(current, compare, "year", 1);
791
- }
792
- } else {
793
- dis[0] = !compareDate(dateMin, current, "year", 0);
794
- dis[1] = !compareDate(dateMin, current, "month", 0);
795
- dis[2] = !compareDate(current, dateMax, "month", 0);
796
- dis[3] = !compareDate(current, dateMax, "year", 0);
797
- }
798
- return createVNode("div", {
799
- "class": "devui-calendar-toolbar"
800
- }, [createVNode(Item, {
801
- "disabled": dis[0],
802
- "date": current,
803
- "pos": pos,
804
- "button": Year,
805
- "cb": onPreviousYear
806
- }, null), createVNode(Item, {
807
- "disabled": dis[1],
808
- "date": current,
809
- "pos": pos,
810
- "button": Month,
811
- "rotate": -90,
812
- "cb": onPreviousMonth
813
- }, null), createVNode(Title, {
814
- "date": current
815
- }, null), createVNode(Item, {
816
- "disabled": dis[2],
817
- "date": current,
818
- "pos": pos,
819
- "button": Month,
820
- "rotate": 90,
821
- "cb": onNextMonth
822
- }, null), createVNode(Item, {
823
- "disabled": dis[3],
824
- "date": current,
825
- "pos": pos,
826
- "button": Year,
827
- "rotate": 180,
828
- "cb": onNextYear
829
- }, null)]);
830
- };
831
- const TodayDefault = (props) => {
832
- const {
833
- onSelected = () => 0,
834
- disabled = false
835
- } = props;
836
- return createVNode("div", {
837
- "class": `today-container ${disabled ? "disabled" : ""}`
838
- }, [createVNode("button", {
839
- "class": "today-button",
840
- "disabled": disabled,
841
- "onClick": disabled ? void 0 : () => onSelected(new Date())
842
- }, [createTextVNode("\u4ECA\u5929")])]);
843
- };
844
- var index$5 = "";
845
- const CalendarDatePanel = (props) => {
846
- const today = new Date();
847
- return createVNode("div", {
848
- "class": "devui-calendar-panel"
849
- }, [createVNode(CalendarToolbar, {
850
- "current": props.current,
851
- "compare": props.compare,
852
- "pos": props.pos,
853
- "type": props.type,
854
- "showTime": props.showTime,
855
- "onPreviousYear": props.onPreviousYear,
856
- "onPreviousMonth": props.onPreviousMonth,
857
- "onNextMonth": props.onNextMonth,
858
- "onNextYear": props.onNextYear,
859
- "dateMax": props.dateMax,
860
- "dateMin": props.dateMin
861
- }, null), createVNode("ol", {
862
- "class": "head row"
863
- }, [WEEK_DAYS.map((day) => createVNode("li", {
864
- "class": "cell"
865
- }, [day]))]), createVNode("ul", {
866
- "class": "body"
867
- }, [getMonthWeeklyDays(props.current).map((row) => createVNode("li", {
868
- "class": "row"
869
- }, [row.map((day) => {
870
- return createVNode("span", {
871
- "class": cellClassName(props, day),
872
- "onClick": () => trigEvent(props, day),
873
- "onMouseenter": () => handleDateEnter(props, day)
874
- }, [day.date.getDate()]);
875
- })]))]), props.type !== "range" ? createVNode(TodayDefault, {
876
- "disabled": !betweenDate(today, props.dateMin, props.dateMax),
877
- "onSelected": (today2) => {
878
- typeof props.onToday === "function" && props.onToday(today2, 0);
879
- }
880
- }, null) : null]);
881
- };
882
- var index$4 = "";
883
- const VerticalSlider = defineComponent({
884
- props: {
885
- size: {
886
- type: Number,
887
- default: 26
888
- },
889
- items: {
890
- type: Array
891
- },
892
- selectedIndex: {
893
- type: Number
894
- },
895
- className: {
896
- type: String
897
- },
898
- itemClassNormal: {
899
- type: String
900
- },
901
- itemClassSelected: {
902
- type: String
903
- },
904
- onChange: {
905
- type: Function
906
- }
907
- },
908
- setup(props) {
909
- const {
910
- items = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
911
- selectedIndex = 0,
912
- size = 26,
913
- className = "",
914
- itemClassNormal = "",
915
- itemClassSelected = "selected",
916
- onChange
917
- } = props || {};
918
- let max_y = 0, min_y = 0;
919
- const container = ref();
920
- const movbar = ref();
921
- let pos_start = null;
922
- let pos_cache = null;
923
- const state = reactive({
924
- selectedIndex,
925
- barOpacity: 0,
926
- x: 0,
927
- y: 0,
928
- transition: "none"
929
- });
930
- const handleMouseDown = (e) => {
931
- e.stopPropagation();
932
- e.preventDefault();
933
- pos_start = [e.clientX, e.clientY];
934
- state.transition = "none";
935
- };
936
- const handleMouseMove = (e) => {
937
- e.stopPropagation();
938
- e.preventDefault();
939
- if (!pos_start || !pos_cache) {
940
- return;
941
- }
942
- state.x = pos_cache[0] + e.clientX - pos_start[0];
943
- state.y = Math.min(max_y, Math.max(min_y, pos_cache[1] + e.clientY - pos_start[1]));
944
- state.selectedIndex = (max_y - state.y + size / 2) / size >> 0;
945
- };
946
- const handleMouseUp = (e) => {
947
- e.stopPropagation();
948
- e.preventDefault();
949
- pos_start = null;
950
- state.y = max_y - state.selectedIndex * size;
951
- state.transition = "transform 0.1s";
952
- pos_cache[0] = state.x;
953
- pos_cache[1] = state.y;
954
- if (typeof onChange === "function") {
955
- const idx = state.selectedIndex;
956
- const val = items[idx];
957
- onChange(val, idx);
958
- }
959
- };
960
- onMounted(() => {
961
- const {
962
- height: ch
963
- } = container.value.getBoundingClientRect();
964
- const {
965
- height: mh
966
- } = movbar.value.getBoundingClientRect();
967
- max_y = (ch - size) / 2;
968
- min_y = (ch + size) / 2 - mh;
969
- pos_cache = [0, max_y - state.selectedIndex * size];
970
- state.x = pos_cache[0];
971
- state.y = pos_cache[1];
972
- state.barOpacity = 1;
973
- state.transition = "transform 0.1s";
974
- });
975
- return () => {
976
- return createVNode("div", {
977
- "ref": container,
978
- "class": `devui-vertical-slider ${className}`
979
- }, [createVNode("div", {
980
- "ref": movbar,
981
- "class": "movable-bar",
982
- "style": {
983
- opacity: state.barOpacity,
984
- transform: `translateY(${state.y}px)`,
985
- transition: state.transition
986
- }
987
- }, [items.map((c, i) => {
988
- const className2 = i === state.selectedIndex ? itemClassSelected : itemClassNormal;
989
- return createVNode("span", {
990
- "class": `slider-item ${className2}`,
991
- "style": {
992
- height: `${size}px`,
993
- lineHeight: `${size}px`
994
- }
995
- }, [c]);
996
- })]), createVNode("div", {
997
- "class": "slider-mask",
998
- "onMousedown": handleMouseDown,
999
- "onMousemove": handleMouseMove,
1000
- "onMouseup": handleMouseUp,
1001
- "onMouseout": handleMouseUp
1002
- }, null)]);
1003
- };
1004
- }
1005
- });
1006
- var index$3 = "";
1007
- const TimePicker = defineComponent({
1008
- props: {
1009
- time: {
1010
- type: Date
1011
- }
1012
- },
1013
- setup(props) {
1014
- const {
1015
- time = new Date()
1016
- } = props || {};
1017
- const state = reactive({
1018
- hour: time.getHours(),
1019
- minute: time.getMinutes(),
1020
- second: time.getSeconds()
1021
- });
1022
- const hours = Array(24).fill(0).map((_, i) => `${i}`.padStart(2, "0"));
1023
- const minutes = Array(60).fill(0).map((_, i) => `${i}`.padStart(2, "0"));
1024
- return () => {
1025
- return createVNode("div", {
1026
- "class": "devui-calendar-timepicker"
1027
- }, [createVNode("div", {
1028
- "class": "head"
1029
- }, [createVNode("div", {
1030
- "class": "chars"
1031
- }, [createVNode("span", null, [state.hour.toString().padStart(2, "0"), createTextVNode(":"), state.minute.toString().padStart(2, "0"), createTextVNode(":"), state.second.toString().padStart(2, "0")])])]), createVNode("div", {
1032
- "class": "select"
1033
- }, [createVNode(VerticalSlider, {
1034
- "items": hours,
1035
- "selectedIndex": state.hour,
1036
- "onChange": (_, idx) => state.hour = idx
1037
- }, null), createVNode(VerticalSlider, {
1038
- "items": minutes,
1039
- "selectedIndex": state.minute,
1040
- "onChange": (_, idx) => state.minute = idx
1041
- }, null), createVNode(VerticalSlider, {
1042
- "items": minutes,
1043
- "selectedIndex": state.second,
1044
- "onChange": (_, idx) => state.second = idx
1045
- }, null)])]);
1046
- };
1047
- }
1048
- });
1049
- var index$2 = "";
1050
- const Calendar = (props) => {
1051
- const {
1052
- showTime = false
1053
- } = props;
1054
- let {
1055
- current
1056
- } = props;
1057
- if (!(current instanceof Date)) {
1058
- current = new Date();
1059
- }
1060
- if (props.type === "range") {
1061
- let {
1062
- next
1063
- } = props;
1064
- if (!(next instanceof Date)) {
1065
- next = new Date(current.getFullYear(), current.getMonth() + 1, 1);
1066
- }
1067
- return createVNode("div", {
1068
- "class": "devui-calendar-container"
1069
- }, [createVNode(CalendarDatePanel, mergeProps(props, {
1070
- "pos": 0,
1071
- "current": current,
1072
- "compare": next
1073
- }), null), showTime ? createVNode(TimePicker, {
1074
- "time": current
1075
- }, null) : null, createVNode(CalendarDatePanel, mergeProps(props, {
1076
- "pos": 1,
1077
- "current": next,
1078
- "compare": current
1079
- }), null), showTime ? createVNode(TimePicker, {
1080
- "time": next
1081
- }, null) : null]);
1082
- } else {
1083
- return createVNode("div", {
1084
- "class": "devui-calendar-container"
1085
- }, [createVNode(CalendarDatePanel, mergeProps(props, {
1086
- "pos": 0,
1087
- "current": current
1088
- }), null), showTime ? createVNode(TimePicker, {
1089
- "time": current
1090
- }, null) : null]);
1091
- }
1092
- };
1093
- var datePicker = "";
1094
- const formatRange = (state) => {
1095
- const [start, end] = [state.start, state.end].sort((a, b) => a.getTime() - b.getTime());
1096
- state.start = start;
1097
- state.end = end;
1098
- if (compareDateSort(start, end, "m") !== 0) {
1099
- state.current = start;
1100
- state.next = end;
1101
- } else {
1102
- if (compareDateSort(start, state.current) < 0) {
1103
- state.current = start;
1104
- }
1105
- if (compareDateSort(state.next, end) < 0) {
1106
- state.next = end;
1107
- }
1108
- }
1109
- };
1110
- var DatePicker = defineComponent({
1111
- name: "DDatepicker",
1112
- props: {
1113
- selectedDateChange: {
1114
- type: Function
1115
- },
1116
- autoClose: {
1117
- type: Boolean,
1118
- default: false
1119
- },
1120
- range: {
1121
- type: Boolean,
1122
- default: false
1123
- },
1124
- showTime: {
1125
- type: Boolean,
1126
- default: false
1127
- },
1128
- format: {
1129
- type: String,
1130
- default: "y/MM/dd"
1131
- },
1132
- rangeSpliter: {
1133
- type: String,
1134
- default: "-"
1135
- },
1136
- attachInputDom: {
1137
- type: String
1138
- },
1139
- dateMin: {
1140
- type: String
1141
- },
1142
- dateMax: {
1143
- type: String
1144
- }
1145
- },
1146
- setup(props) {
1147
- const panel = ref(null);
1148
- const input2 = ref(null);
1149
- const current = parseDate(props.dateMin) || new Date();
1150
- const next = new Date(current.getFullYear(), current.getMonth() + 1, 1);
1151
- const state = reactive({
1152
- show: false,
1153
- value: "",
1154
- placeholder: formatPlaceholder(props),
1155
- current,
1156
- next
1157
- });
1158
- state.value = formatValue(state, props);
1159
- state.placeholder = formatPlaceholder(props);
1160
- const documentClick = (e) => {
1161
- e.stopPropagation();
1162
- if (isIn(e.target, panel.value) || isIn(e.target, input2.value)) {
1163
- return;
1164
- }
1165
- state.show = false;
1166
- };
1167
- onMounted(() => {
1168
- document.addEventListener("click", documentClick);
1169
- });
1170
- onUnmounted(() => {
1171
- document.removeEventListener("click", documentClick);
1172
- });
1173
- return () => {
1174
- return createVNode("div", {
1175
- "class": "devui-datepicker-container"
1176
- }, [createVNode("div", {
1177
- "class": "input-container",
1178
- "ref": input2
1179
- }, [createVNode(Input, {
1180
- "ref": input2,
1181
- "class": "datepicker-input",
1182
- "modelValue": state.value,
1183
- "placeholder": state.placeholder,
1184
- "onFocus": () => state.show = true
1185
- }, null), createVNode(Icon, {
1186
- "size": "small",
1187
- "name": "calendar",
1188
- "class": "datepicker-input-icon"
1189
- }, null)]), createVNode("div", {
1190
- "class": "devui-datepicker-panel",
1191
- "ref": panel
1192
- }, [state.show ? createVNode(Calendar, {
1193
- "type": props.range ? "range" : "select",
1194
- "showTime": props.showTime,
1195
- "current": state.current,
1196
- "next": state.next,
1197
- "dateMin": parseDate(props.dateMin),
1198
- "dateMax": parseDate(props.dateMax),
1199
- "dateStart": state.start,
1200
- "dateEnd": state.end,
1201
- "dateHover": state.hover,
1202
- "onReset": (date) => {
1203
- state.end = state.hover = void 0;
1204
- state.start = date;
1205
- },
1206
- "onChange": () => {
1207
- state.value = formatValue(state, props);
1208
- state.placeholder = formatPlaceholder(props);
1209
- invokeFunction(props.selectedDateChange, state.value);
1210
- if (props.autoClose) {
1211
- state.show = false;
1212
- }
1213
- },
1214
- "onToday": (date) => {
1215
- state.current = date;
1216
- state.start = date;
1217
- state.value = formatValue(state, props);
1218
- state.placeholder = formatPlaceholder(props);
1219
- invokeFunction(props.selectedDateChange, state.value);
1220
- if (props.autoClose) {
1221
- state.show = false;
1222
- }
1223
- },
1224
- "onSelected": (date) => {
1225
- state.start = date;
1226
- if (compareDateSort(state.current, date) !== 0) {
1227
- state.current = date;
1228
- }
1229
- },
1230
- "onSelectStart": (date) => state.start = date,
1231
- "onSelectEnd": (date) => {
1232
- state.end = date;
1233
- formatRange(state);
1234
- },
1235
- "onSelecting": (date) => state.hover = date,
1236
- "onPreviousYear": (date, pos) => handleCalendarSwitchState(state, 0, pos, date),
1237
- "onPreviousMonth": (date, pos) => handleCalendarSwitchState(state, 1, pos, date),
1238
- "onNextMonth": (date, pos) => handleCalendarSwitchState(state, 2, pos, date),
1239
- "onNextYear": (date, pos) => handleCalendarSwitchState(state, 3, pos, date)
1240
- }, null) : null])]);
1241
- };
1242
- }
1243
- });
1244
- var index$1 = "";
1245
- const StickSlider = defineComponent({
1246
- name: "DStickSlider",
1247
- props: {},
1248
- setup() {
1249
- const state = reactive({
1250
- showButtons: false,
1251
- selectedIndex: 0
1252
- });
1253
- const reset = () => {
1254
- state.showButtons = false;
1255
- };
1256
- const handleMainButtonMouseDown = (e) => {
1257
- e.stopPropagation();
1258
- state.showButtons = true;
1259
- };
1260
- const handleMainButtonMouseUp = (e) => {
1261
- e.stopPropagation();
1262
- reset();
1263
- };
1264
- return () => {
1265
- return createVNode("div", {
1266
- "class": "devui-stick-slider",
1267
- "onMousedown": handleMainButtonMouseDown,
1268
- "onMouseup": handleMainButtonMouseUp,
1269
- "onMouseleave": handleMainButtonMouseUp
1270
- }, [createVNode("div", {
1271
- "class": "sub-buttons",
1272
- "style": {
1273
- display: state.showButtons ? "" : "none"
1274
- }
1275
- }, [Array(16).fill(null).map((_, i) => {
1276
- return createVNode("div", {
1277
- "class": `button ${i === state.selectedIndex ? "selected" : ""}`,
1278
- "onMouseenter": () => state.selectedIndex = i
1279
- }, [i]);
1280
- })]), createVNode("div", {
1281
- "class": "main-button"
1282
- }, null)]);
1283
- };
1284
- }
1285
- });
1286
- DatePicker.install = function(app) {
1287
- app.component(DatePicker.name, DatePicker);
1288
- app.component(StickSlider.name, StickSlider);
1289
- };
1290
- var index = {
1291
- title: "DatePicker \u65E5\u671F\u9009\u62E9\u5668",
1292
- category: "\u6570\u636E\u5F55\u5165",
1293
- status: "50%",
1294
- install(app) {
1295
- app.use(DatePicker);
1296
- }
1297
- };
1298
- export { DatePicker, StickSlider, index as default };