@ql-web/view-report 1.0.0 → 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.
- package/package.json +1 -1
- package/view-report.css +1 -1
- package/view-report.es.js +131 -131
- package/view-report.umd.js +1 -1
package/package.json
CHANGED
package/view-report.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.my-button[data-v-d19bd5c3]{border:none;padding:8px 16px;color:#fff;border-radius:4px;cursor:pointer}.my-button[data-v-d19bd5c3]:hover{opacity:.9}.view-date-picker-wrapper[data-v-
|
|
1
|
+
.my-button[data-v-d19bd5c3]{border:none;padding:8px 16px;color:#fff;border-radius:4px;cursor:pointer}.my-button[data-v-d19bd5c3]:hover{opacity:.9}.view-date-picker-wrapper[data-v-e6885493]{position:relative;width:100%;max-width:280px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.native-input-wrapper[data-v-e6885493]{position:relative;width:100%}.native-input[data-v-e6885493]{width:100%;height:36px;padding:0 12px 0 15px;border:1px solid #e6e6e6;border-radius:4px;font-size:14px;color:#333;-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;cursor:pointer}.native-input[data-v-e6885493]::-webkit-input-placeholder{color:#999}.native-input[data-v-e6885493]::-moz-placeholder{color:#999}.native-input[data-v-e6885493]:-ms-input-placeholder{color:#999}.native-input[data-v-e6885493]::-ms-input-placeholder{color:#999}.native-input[data-v-e6885493]::placeholder{color:#999}.native-input[data-v-e6885493]:hover{border-color:#c0c4cc}.native-input[data-v-e6885493]:focus{border-color:#409eff}.date-icon[data-v-e6885493]{position:absolute;right:12px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:16px;color:#999;cursor:pointer}.date-picker-dropdown[data-v-e6885493]{background:#fff;border:1px solid #e6e6e6;border-radius:4px;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px #0000001a;-webkit-box-sizing:border-box;box-sizing:border-box}.bod-mb[data-v-e6885493]{margin:15px}.picker-header[data-v-e6885493]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:12px;padding:0 4px}.toggle-btn[data-v-e6885493]{border:none;background:transparent;cursor:pointer;font-size:14px;color:#666;width:28px;height:28px;line-height:28px;text-align:center;border-radius:4px;padding:0}.toggle-btn[data-v-e6885493]:hover{background-color:#f5f5f5}.year-btn[data-v-e6885493]{font-size:12px}.current-month[data-v-e6885493]{font-size:14px;font-weight:500;color:#303133}.clickable-year[data-v-e6885493],.clickable-month[data-v-e6885493]{cursor:pointer;padding:2px 4px;border-radius:2px}.clickable-year[data-v-e6885493]:hover,.clickable-month[data-v-e6885493]:hover{color:#409eff;background-color:#ecf5ff}.picker-week-header[data-v-e6885493]{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:4px}.week-item[data-v-e6885493]{-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:center;font-size:12px;color:#909399;height:28px;line-height:28px}.picker-panel[data-v-e6885493]{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.date-item[data-v-e6885493]{width:calc(100% / 7);height:32px;line-height:32px;text-align:center;font-size:14px;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;margin:2px 0}.not-current-month[data-v-e6885493]{color:#c0c4cc}.selected[data-v-e6885493]{color:#fff!important;background-color:#409eff!important}.hover[data-v-e6885493]{background-color:#ecf5ff}.year-item[data-v-e6885493]{display:inline-block;width:calc(20% - 4px);height:32px;line-height:32px;text-align:center;font-size:14px;cursor:pointer;border-radius:4px;color:#303133;margin:2px;-webkit-box-sizing:border-box;box-sizing:border-box}.year-item[data-v-e6885493]:hover{background-color:#ecf5ff}.year-item.selected[data-v-e6885493]{background-color:#409eff;color:#fff}.month-item[data-v-e6885493]{display:inline-block;width:calc(25% - 4px);height:32px;line-height:32px;text-align:center;font-size:14px;cursor:pointer;border-radius:4px;color:#303133;margin:2px;-webkit-box-sizing:border-box;box-sizing:border-box}.month-item[data-v-e6885493]:hover{background-color:#ecf5ff}.month-item.selected[data-v-e6885493]{background-color:#409eff;color:#fff}
|
package/view-report.es.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
function
|
|
3
|
-
var
|
|
4
|
-
return e && (
|
|
1
|
+
import { defineComponent as M, ref as h, computed as w, watch as U, onMounted as j, onUnmounted as q, isVue2 as C } from "vue-demi";
|
|
2
|
+
function b(r, e, t, a, p, u, g, c) {
|
|
3
|
+
var s = typeof r == "function" ? r.options : r;
|
|
4
|
+
return e && (s.render = e, s.staticRenderFns = t, s._compiled = !0), u && (s._scopeId = "data-v-" + u), {
|
|
5
5
|
exports: r,
|
|
6
|
-
options:
|
|
6
|
+
options: s
|
|
7
7
|
};
|
|
8
8
|
}
|
|
9
|
-
const
|
|
9
|
+
const G = M({
|
|
10
10
|
name: "MyButton",
|
|
11
11
|
// 必须声明 name,用于全局注册
|
|
12
12
|
props: {
|
|
@@ -25,21 +25,21 @@ const J = b({
|
|
|
25
25
|
} };
|
|
26
26
|
}
|
|
27
27
|
});
|
|
28
|
-
var
|
|
28
|
+
var H = function() {
|
|
29
29
|
var e = this, t = e._self._c;
|
|
30
30
|
return e._self._setupProxy, t("button", { staticClass: "my-button", style: { background: e.color }, on: { click: e.handleClick } }, [e._t("default", function() {
|
|
31
31
|
return [e._v(e._s(e.text))];
|
|
32
32
|
})], 2);
|
|
33
|
-
},
|
|
33
|
+
}, J = [], K = /* @__PURE__ */ b(
|
|
34
|
+
G,
|
|
35
|
+
H,
|
|
34
36
|
J,
|
|
35
|
-
K,
|
|
36
|
-
Q,
|
|
37
37
|
!1,
|
|
38
38
|
null,
|
|
39
39
|
"d19bd5c3"
|
|
40
40
|
);
|
|
41
|
-
const
|
|
42
|
-
class
|
|
41
|
+
const Q = K.exports;
|
|
42
|
+
class v {
|
|
43
43
|
/**
|
|
44
44
|
* 格式化日期为 YYYY-MM-DD 格式
|
|
45
45
|
* @param {Date} date 日期对象
|
|
@@ -47,8 +47,8 @@ class c {
|
|
|
47
47
|
*/
|
|
48
48
|
static formatDate(e) {
|
|
49
49
|
if (!e || !(e instanceof Date) || isNaN(e.getTime())) return "";
|
|
50
|
-
const t = e.getFullYear(), a = String(e.getMonth() + 1).padStart(2, "0"),
|
|
51
|
-
return `${t}-${a}-${
|
|
50
|
+
const t = e.getFullYear(), a = String(e.getMonth() + 1).padStart(2, "0"), p = String(e.getDate()).padStart(2, "0");
|
|
51
|
+
return `${t}-${a}-${p}`;
|
|
52
52
|
}
|
|
53
53
|
/**
|
|
54
54
|
* 获取指定日期所在月份的第一天
|
|
@@ -108,34 +108,34 @@ class c {
|
|
|
108
108
|
* @returns {Array} 42个日期对象的数组(6*7)
|
|
109
109
|
*/
|
|
110
110
|
static generateMonthPanel(e, t = "") {
|
|
111
|
-
const a = [],
|
|
112
|
-
for (let
|
|
113
|
-
const
|
|
111
|
+
const a = [], p = this.getFirstDayOfMonth(e), u = this.getLastDayOfMonth(e), c = this.getDayOfWeek(p);
|
|
112
|
+
for (let o = c; o > 0; o--) {
|
|
113
|
+
const i = new Date(p.getTime() - o * 24 * 60 * 60 * 1e3);
|
|
114
114
|
a.push({
|
|
115
|
-
date:
|
|
116
|
-
formatDate: this.formatDate(
|
|
115
|
+
date: i,
|
|
116
|
+
formatDate: this.formatDate(i),
|
|
117
117
|
isCurrentMonth: !1,
|
|
118
|
-
isSelected: this.formatDate(
|
|
118
|
+
isSelected: this.formatDate(i) === t
|
|
119
119
|
});
|
|
120
120
|
}
|
|
121
|
-
const
|
|
122
|
-
for (let
|
|
123
|
-
const
|
|
121
|
+
const s = u.getDate();
|
|
122
|
+
for (let o = 1; o <= s; o++) {
|
|
123
|
+
const i = new Date(e.getFullYear(), e.getMonth(), o);
|
|
124
124
|
a.push({
|
|
125
|
-
date:
|
|
126
|
-
formatDate: this.formatDate(
|
|
125
|
+
date: i,
|
|
126
|
+
formatDate: this.formatDate(i),
|
|
127
127
|
isCurrentMonth: !0,
|
|
128
|
-
isSelected: this.formatDate(
|
|
128
|
+
isSelected: this.formatDate(i) === t
|
|
129
129
|
});
|
|
130
130
|
}
|
|
131
|
-
const
|
|
132
|
-
for (let
|
|
133
|
-
const
|
|
131
|
+
const D = 42 - a.length;
|
|
132
|
+
for (let o = 1; o <= D; o++) {
|
|
133
|
+
const i = new Date(u.getTime() + o * 24 * 60 * 60 * 1e3);
|
|
134
134
|
a.push({
|
|
135
|
-
date:
|
|
136
|
-
formatDate: this.formatDate(
|
|
135
|
+
date: i,
|
|
136
|
+
formatDate: this.formatDate(i),
|
|
137
137
|
isCurrentMonth: !1,
|
|
138
|
-
isSelected: this.formatDate(
|
|
138
|
+
isSelected: this.formatDate(i) === t
|
|
139
139
|
});
|
|
140
140
|
}
|
|
141
141
|
return a;
|
|
@@ -175,185 +175,185 @@ class c {
|
|
|
175
175
|
return Array.from({ length: 10 }, (t, a) => e + a);
|
|
176
176
|
}
|
|
177
177
|
}
|
|
178
|
-
const
|
|
178
|
+
const X = M({
|
|
179
179
|
name: "ViewDatePicker",
|
|
180
180
|
// Vue2兼容:props定义(vue-demi已适配)
|
|
181
181
|
props: {
|
|
182
182
|
value: {
|
|
183
183
|
// Vue2的v-model绑定值(兼容Vue3的modelValue)
|
|
184
184
|
type: String,
|
|
185
|
-
default: () =>
|
|
185
|
+
default: () => v.formatDate(/* @__PURE__ */ new Date())
|
|
186
186
|
},
|
|
187
187
|
modelValue: {
|
|
188
188
|
// Vue3的v-model绑定值
|
|
189
189
|
type: String,
|
|
190
|
-
default: () =>
|
|
190
|
+
default: () => v.formatDate(/* @__PURE__ */ new Date())
|
|
191
191
|
}
|
|
192
192
|
},
|
|
193
193
|
// Vue2/Vue3兼容:emits定义
|
|
194
194
|
emits: ["input", "update:modelValue", "change"],
|
|
195
195
|
setup(r, { emit: e }) {
|
|
196
|
-
const t =
|
|
197
|
-
const n =
|
|
196
|
+
const t = h(null), a = h(null), p = h(null), u = h(!1), g = h({}), c = h((/* @__PURE__ */ new Date()).getFullYear()), s = h((/* @__PURE__ */ new Date()).getMonth() + 1), D = h(""), o = h(""), i = h("date"), d = h(v.getDecadeStart(new Date(c.value, s.value - 1))), T = w(() => {
|
|
197
|
+
const n = v.generateDecadeYears(d.value);
|
|
198
198
|
return Array.isArray(n) ? n : [];
|
|
199
|
-
}),
|
|
200
|
-
const n =
|
|
199
|
+
}), x = w(() => {
|
|
200
|
+
const n = d.value, l = n + 9;
|
|
201
201
|
return `${n}年-${l}年`;
|
|
202
|
-
}),
|
|
203
|
-
const n = new Date(
|
|
202
|
+
}), P = w(() => {
|
|
203
|
+
const n = new Date(c.value, s.value - 1, 1), l = v.generateMonthPanel(n, o.value);
|
|
204
204
|
return Array.isArray(l) ? l : [];
|
|
205
|
-
}),
|
|
206
|
-
const n =
|
|
205
|
+
}), _ = () => {
|
|
206
|
+
const n = C ? r.value : r.modelValue;
|
|
207
207
|
if (n) {
|
|
208
|
-
|
|
208
|
+
o.value = n;
|
|
209
209
|
const l = new Date(n);
|
|
210
|
-
isNaN(l.getTime()) || (
|
|
210
|
+
isNaN(l.getTime()) || (c.value = l.getFullYear(), s.value = l.getMonth() + 1, d.value = v.getDecadeStart(l));
|
|
211
211
|
} else {
|
|
212
212
|
const l = /* @__PURE__ */ new Date();
|
|
213
|
-
|
|
213
|
+
o.value = v.formatDate(l), c.value = l.getFullYear(), s.value = l.getMonth() + 1, d.value = v.getDecadeStart(l);
|
|
214
214
|
}
|
|
215
215
|
};
|
|
216
|
-
|
|
216
|
+
U(
|
|
217
217
|
() => [r.value, r.modelValue],
|
|
218
218
|
() => {
|
|
219
|
-
|
|
219
|
+
_();
|
|
220
220
|
},
|
|
221
221
|
{ immediate: !0, deep: !0 }
|
|
222
222
|
);
|
|
223
|
-
const
|
|
224
|
-
if (!
|
|
225
|
-
const n =
|
|
226
|
-
|
|
223
|
+
const y = () => {
|
|
224
|
+
if (!a.value || !p.value) return;
|
|
225
|
+
const n = a.value.getBoundingClientRect(), l = t.value.getBoundingClientRect();
|
|
226
|
+
g.value = {
|
|
227
227
|
position: "absolute",
|
|
228
228
|
top: `${n.bottom - l.top + 4}px`,
|
|
229
229
|
left: `${n.left - l.left}px`,
|
|
230
230
|
zIndex: 9999,
|
|
231
231
|
width: "322px"
|
|
232
232
|
};
|
|
233
|
+
}, S = () => {
|
|
234
|
+
u.value = !u.value, u.value && (setTimeout(() => y(), 0), i.value = "date");
|
|
233
235
|
}, N = () => {
|
|
234
|
-
|
|
236
|
+
d.value = v.getDecadeStart(new Date(c.value, s.value - 1)), i.value = "year";
|
|
235
237
|
}, F = () => {
|
|
236
|
-
|
|
237
|
-
}, V = () => {
|
|
238
|
-
|
|
238
|
+
i.value = "month";
|
|
239
|
+
}, V = (n) => {
|
|
240
|
+
c.value = n, i.value = "month";
|
|
239
241
|
}, $ = (n) => {
|
|
240
|
-
|
|
242
|
+
s.value = n, i.value = "date";
|
|
241
243
|
}, E = (n) => {
|
|
242
|
-
|
|
243
|
-
}, L = (n) => {
|
|
244
|
-
g.value = n.formatDate, o.value = n.date.getFullYear(), s.value = n.date.getMonth() + 1, e(a ? "input" : "update:modelValue", g.value), e("change", {
|
|
244
|
+
o.value = n.formatDate, c.value = n.date.getFullYear(), s.value = n.date.getMonth() + 1, e(C ? "input" : "update:modelValue", o.value), e("change", {
|
|
245
245
|
date: n.date,
|
|
246
|
-
formatDate:
|
|
247
|
-
}),
|
|
246
|
+
formatDate: o.value
|
|
247
|
+
}), u.value = !1;
|
|
248
|
+
}, L = () => {
|
|
249
|
+
c.value -= 1, d.value = v.getDecadeStart(new Date(c.value, s.value - 1));
|
|
248
250
|
}, R = () => {
|
|
249
|
-
|
|
251
|
+
s.value === 1 ? (s.value = 12, c.value -= 1) : s.value -= 1, d.value = v.getDecadeStart(new Date(c.value, s.value - 1));
|
|
250
252
|
}, I = () => {
|
|
251
|
-
s.value ===
|
|
253
|
+
s.value === 12 ? (s.value = 1, c.value += 1) : s.value += 1, d.value = v.getDecadeStart(new Date(c.value, s.value - 1));
|
|
252
254
|
}, O = () => {
|
|
253
|
-
|
|
255
|
+
c.value += 1, d.value = v.getDecadeStart(new Date(c.value, s.value - 1));
|
|
254
256
|
}, A = () => {
|
|
255
|
-
|
|
257
|
+
d.value = v.getNextDecade(d.value);
|
|
256
258
|
}, W = () => {
|
|
257
|
-
|
|
258
|
-
}, z = () => {
|
|
259
|
-
|
|
260
|
-
}, B = (n) => {
|
|
261
|
-
g.value = n.target.value;
|
|
262
|
-
}, U = (n, l) => {
|
|
259
|
+
d.value = v.getPrevDecade(d.value);
|
|
260
|
+
}, z = (n) => {
|
|
261
|
+
o.value = n.target.value;
|
|
262
|
+
}, B = (n, l) => {
|
|
263
263
|
if (!n || !l) return !1;
|
|
264
264
|
if (l.contains(n) || n.classList.contains("year-item") || n.classList.contains("month-item")) return !0;
|
|
265
|
-
let
|
|
266
|
-
for (;
|
|
267
|
-
if (
|
|
265
|
+
let f = n;
|
|
266
|
+
for (; f.parentElement; ) {
|
|
267
|
+
if (f = f.parentElement, f === l)
|
|
268
268
|
return !0;
|
|
269
|
-
if (
|
|
269
|
+
if (f.tagName === "BODY") break;
|
|
270
270
|
}
|
|
271
271
|
return !1;
|
|
272
|
-
},
|
|
273
|
-
const l =
|
|
274
|
-
|
|
275
|
-
},
|
|
276
|
-
|
|
272
|
+
}, k = (n) => {
|
|
273
|
+
const l = B(n.target, t.value);
|
|
274
|
+
u.value && t.value && !l && (u.value = !1, i.value = "date");
|
|
275
|
+
}, m = () => {
|
|
276
|
+
u.value && y();
|
|
277
277
|
};
|
|
278
|
-
return
|
|
279
|
-
|
|
280
|
-
}),
|
|
281
|
-
document.removeEventListener("click",
|
|
278
|
+
return j(() => {
|
|
279
|
+
_(), document.addEventListener("click", k), window.addEventListener("scroll", m, !0), window.addEventListener("resize", m);
|
|
280
|
+
}), q(() => {
|
|
281
|
+
document.removeEventListener("click", k), window.removeEventListener("scroll", m, !0), window.removeEventListener("resize", m);
|
|
282
282
|
}), {
|
|
283
|
-
pickerWrapper:
|
|
284
|
-
dateInput:
|
|
285
|
-
datePanel:
|
|
286
|
-
panelVisible:
|
|
287
|
-
panelStyle:
|
|
288
|
-
currentYear:
|
|
283
|
+
pickerWrapper: t,
|
|
284
|
+
dateInput: a,
|
|
285
|
+
datePanel: p,
|
|
286
|
+
panelVisible: u,
|
|
287
|
+
panelStyle: g,
|
|
288
|
+
currentYear: c,
|
|
289
289
|
// 仅暴露currentYear/currentMonth
|
|
290
290
|
currentMonth: s,
|
|
291
|
-
hoverDate:
|
|
292
|
-
displayDate:
|
|
293
|
-
panelType:
|
|
294
|
-
decadeYears:
|
|
295
|
-
panelDates:
|
|
296
|
-
togglePanel:
|
|
297
|
-
openYearPanel:
|
|
298
|
-
openMonthPanel:
|
|
299
|
-
selectDecadeYear:
|
|
300
|
-
selectTargetMonth:
|
|
301
|
-
selectDate:
|
|
302
|
-
switchToPrevYear:
|
|
303
|
-
switchToPrevMonth:
|
|
304
|
-
switchToNextMonth:
|
|
305
|
-
switchToNextYear:
|
|
306
|
-
handleInput:
|
|
307
|
-
getDecadeStartAndEnd:
|
|
308
|
-
switchToPrevTenYears:
|
|
309
|
-
switchToNextTenYears:
|
|
291
|
+
hoverDate: D,
|
|
292
|
+
displayDate: o,
|
|
293
|
+
panelType: i,
|
|
294
|
+
decadeYears: T,
|
|
295
|
+
panelDates: P,
|
|
296
|
+
togglePanel: S,
|
|
297
|
+
openYearPanel: N,
|
|
298
|
+
openMonthPanel: F,
|
|
299
|
+
selectDecadeYear: V,
|
|
300
|
+
selectTargetMonth: $,
|
|
301
|
+
selectDate: E,
|
|
302
|
+
switchToPrevYear: L,
|
|
303
|
+
switchToPrevMonth: R,
|
|
304
|
+
switchToNextMonth: I,
|
|
305
|
+
switchToNextYear: O,
|
|
306
|
+
handleInput: z,
|
|
307
|
+
getDecadeStartAndEnd: x,
|
|
308
|
+
switchToPrevTenYears: W,
|
|
309
|
+
switchToNextTenYears: A
|
|
310
310
|
};
|
|
311
311
|
}
|
|
312
312
|
});
|
|
313
|
-
var
|
|
313
|
+
var Z = function() {
|
|
314
314
|
var e = this, t = e._self._c;
|
|
315
|
-
return e._self._setupProxy, t("div", { ref: "pickerWrapper", staticClass: "view-date-picker-wrapper" }, [t("div", { staticClass: "native-input-wrapper" }, [t("input", { ref: "dateInput", staticClass: "native-input", attrs: { type: "text", placeholder: "请选择日期", readonly: "" }, domProps: { value: e.displayDate }, on: { input: e.handleInput, click: e.togglePanel } }), t("span", { staticClass: "date-icon", on: { click: e.togglePanel } }, [e._v("📅")])]), t("div", { directives: [{ name: "show", rawName: "v-show", value: e.panelVisible, expression: "panelVisible" }], ref: "datePanel", staticClass: "date-picker-dropdown", style: e.panelStyle }, [t("div", { staticClass: "date-picker-panel" }, [t("div", { directives: [{ name: "show", rawName: "v-show", value: e.panelType == "date", expression: "panelType == 'date'" }], staticClass: "picker-header" }, [t("button", { staticClass: "toggle-btn year-btn prev-year", on: { click: e.switchToPrevYear } }, [e._v("«")]), t("button", { staticClass: "toggle-btn month-btn prev-month", on: { click: e.switchToPrevMonth } }, [e._v(" < ")]), t("div", { staticClass: "current-month" }, [t("span", { staticClass: "clickable-year", on: { click: e.openYearPanel } }, [e._v(e._s(e.currentYear) + "年")]), t("span", { staticClass: "clickable-month", on: { click: e.openMonthPanel } }, [e._v(e._s(e.currentMonth) + "月")])]), t("button", { staticClass: "toggle-btn month-btn next-month", on: { click: e.switchToNextMonth } }, [e._v(">")]), t("button", { staticClass: "toggle-btn year-btn next-year", on: { click: e.switchToNextYear } }, [e._v("»")])]), t("div", { directives: [{ name: "show", rawName: "v-show", value: e.panelType == "year", expression: "panelType == 'year'" }], staticClass: "picker-header" }, [t("button", { staticClass: "toggle-btn month-btn prev-month", on: { click: e.switchToPrevTenYears } }, [e._v(" < ")]), t("div", { staticClass: "current-month" }, [t("span", { staticClass: "clickable-year" }, [e._v(e._s(e.getDecadeStartAndEnd) + "年")])]), t("button", { staticClass: "toggle-btn month-btn next-month", on: { click: e.switchToNextTenYears } }, [e._v(">")])]), t("div", { directives: [{ name: "show", rawName: "v-show", value: e.panelType == "month", expression: "panelType == 'month'" }], staticClass: "picker-header" }, [t("button", { staticClass: "toggle-btn month-btn prev-month", on: { click: e.switchToPrevYear } }, [e._v(" < ")]), t("div", { staticClass: "current-month" }, [t("span", { staticClass: "clickable-year" }, [e._v(e._s(e.currentYear) + "年")])]), t("button", { staticClass: "toggle-btn month-btn next-month", on: { click: e.switchToNextYear } }, [e._v(">")])]), e.panelType === "date" ? t("div", { staticClass: "bod-mb" }, [e._m(0), t("div", { staticClass: "picker-panel" }, e._l(e.panelDates, function(a,
|
|
316
|
-
return t("div", { key:
|
|
315
|
+
return e._self._setupProxy, t("div", { ref: "pickerWrapper", staticClass: "view-date-picker-wrapper" }, [t("div", { staticClass: "native-input-wrapper" }, [t("input", { ref: "dateInput", staticClass: "native-input", attrs: { type: "text", placeholder: "请选择日期", readonly: "" }, domProps: { value: e.displayDate }, on: { input: e.handleInput, click: e.togglePanel } }), t("span", { staticClass: "date-icon", on: { click: e.togglePanel } }, [e._v("📅")])]), t("div", { directives: [{ name: "show", rawName: "v-show", value: e.panelVisible, expression: "panelVisible" }], ref: "datePanel", staticClass: "date-picker-dropdown", style: e.panelStyle }, [t("div", { staticClass: "date-picker-panel" }, [t("div", { directives: [{ name: "show", rawName: "v-show", value: e.panelType == "date", expression: "panelType == 'date'" }], staticClass: "picker-header" }, [t("button", { staticClass: "toggle-btn year-btn prev-year", on: { click: e.switchToPrevYear } }, [e._v("«")]), t("button", { staticClass: "toggle-btn month-btn prev-month", on: { click: e.switchToPrevMonth } }, [e._v(" < ")]), t("div", { staticClass: "current-month" }, [t("span", { staticClass: "clickable-year", on: { click: e.openYearPanel } }, [e._v(e._s(e.currentYear) + "年")]), t("span", { staticClass: "clickable-month", on: { click: e.openMonthPanel } }, [e._v(e._s(e.currentMonth) + "月")])]), t("button", { staticClass: "toggle-btn month-btn next-month", on: { click: e.switchToNextMonth } }, [e._v(">")]), t("button", { staticClass: "toggle-btn year-btn next-year", on: { click: e.switchToNextYear } }, [e._v("»")])]), t("div", { directives: [{ name: "show", rawName: "v-show", value: e.panelType == "year", expression: "panelType == 'year'" }], staticClass: "picker-header" }, [t("button", { staticClass: "toggle-btn month-btn prev-month", on: { click: e.switchToPrevTenYears } }, [e._v(" < ")]), t("div", { staticClass: "current-month" }, [t("span", { staticClass: "clickable-year" }, [e._v(e._s(e.getDecadeStartAndEnd) + "年")])]), t("button", { staticClass: "toggle-btn month-btn next-month", on: { click: e.switchToNextTenYears } }, [e._v(">")])]), t("div", { directives: [{ name: "show", rawName: "v-show", value: e.panelType == "month", expression: "panelType == 'month'" }], staticClass: "picker-header" }, [t("button", { staticClass: "toggle-btn month-btn prev-month", on: { click: e.switchToPrevYear } }, [e._v(" < ")]), t("div", { staticClass: "current-month" }, [t("span", { staticClass: "clickable-year" }, [e._v(e._s(e.currentYear) + "年")])]), t("button", { staticClass: "toggle-btn month-btn next-month", on: { click: e.switchToNextYear } }, [e._v(">")])]), e.panelType === "date" ? t("div", { staticClass: "bod-mb" }, [e._m(0), t("div", { staticClass: "picker-panel" }, e._l(e.panelDates, function(a, p) {
|
|
316
|
+
return t("div", { key: p, staticClass: "date-item", class: {
|
|
317
317
|
"not-current-month": !a.isCurrentMonth,
|
|
318
318
|
selected: a.formatDate === e.displayDate,
|
|
319
319
|
hover: e.hoverDate === a.formatDate && a.formatDate !== e.displayDate
|
|
320
|
-
}, on: { click: function(
|
|
320
|
+
}, on: { click: function(u) {
|
|
321
321
|
return e.selectDate(a);
|
|
322
|
-
}, mouseenter: function(
|
|
322
|
+
}, mouseenter: function(u) {
|
|
323
323
|
e.hoverDate = a.formatDate;
|
|
324
|
-
}, mouseleave: function(
|
|
324
|
+
}, mouseleave: function(u) {
|
|
325
325
|
e.hoverDate = "";
|
|
326
326
|
} } }, [e._v(" " + e._s(a.date.getDate()) + " ")]);
|
|
327
327
|
}), 0)]) : e.panelType === "year" ? t("div", { staticClass: "bod-mb" }, e._l(e.decadeYears, function(a) {
|
|
328
|
-
return t("div", { key: a, staticClass: "year-item", class: { selected: a === e.currentYear }, on: { click: function(
|
|
328
|
+
return t("div", { key: a, staticClass: "year-item", class: { selected: a === e.currentYear }, on: { click: function(p) {
|
|
329
329
|
return e.selectDecadeYear(a);
|
|
330
330
|
} } }, [e._v(" " + e._s(a) + "年 ")]);
|
|
331
331
|
}), 0) : e.panelType === "month" ? t("div", { staticClass: "bod-mb" }, e._l(12, function(a) {
|
|
332
|
-
return t("div", { key: a, staticClass: "month-item", class: { selected: a === e.currentMonth }, on: { click: function(
|
|
332
|
+
return t("div", { key: a, staticClass: "month-item", class: { selected: a === e.currentMonth }, on: { click: function(p) {
|
|
333
333
|
return e.selectTargetMonth(a);
|
|
334
334
|
} } }, [e._v(" " + e._s(a) + "月 ")]);
|
|
335
335
|
}), 0) : e._e()])])]);
|
|
336
|
-
},
|
|
336
|
+
}, ee = [function() {
|
|
337
337
|
var r = this, e = r._self._c;
|
|
338
338
|
return r._self._setupProxy, e("div", { staticClass: "picker-week-header" }, [e("div", { staticClass: "week-item" }, [r._v("日")]), e("div", { staticClass: "week-item" }, [r._v("一")]), e("div", { staticClass: "week-item" }, [r._v("二")]), e("div", { staticClass: "week-item" }, [r._v("三")]), e("div", { staticClass: "week-item" }, [r._v("四")]), e("div", { staticClass: "week-item" }, [r._v("五")]), e("div", { staticClass: "week-item" }, [r._v("六")])]);
|
|
339
|
-
}],
|
|
339
|
+
}], te = /* @__PURE__ */ b(
|
|
340
|
+
X,
|
|
341
|
+
Z,
|
|
340
342
|
ee,
|
|
341
|
-
te,
|
|
342
|
-
ae,
|
|
343
343
|
!1,
|
|
344
344
|
null,
|
|
345
|
-
"
|
|
345
|
+
"e6885493"
|
|
346
346
|
);
|
|
347
|
-
const
|
|
348
|
-
|
|
347
|
+
const ae = te.exports, ne = [Q, ae], Y = (r) => {
|
|
348
|
+
ne.forEach((e) => {
|
|
349
349
|
r.component(e.name, e);
|
|
350
350
|
});
|
|
351
351
|
};
|
|
352
|
-
typeof window < "u" && window.Vue &&
|
|
353
|
-
const
|
|
352
|
+
typeof window < "u" && window.Vue && Y(window.Vue);
|
|
353
|
+
const re = { install: Y };
|
|
354
354
|
export {
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
355
|
+
Q as MyButton,
|
|
356
|
+
ae as ViewDatePicker,
|
|
357
|
+
re as default,
|
|
358
|
+
Y as install
|
|
359
359
|
};
|
package/view-report.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(h,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue-demi")):typeof define=="function"&&define.amd?define(["exports","vue-demi"],o):(h=typeof globalThis<"u"?globalThis:h||self,o(h["view-report"]={},h.VueDemi))})(this,(function(h,o){"use strict";function C(r,e,t,a,u,p,y,f){var g=typeof r=="function"?r.options:r;return e&&(g.render=e,g.staticRenderFns=t,g._compiled=!0),p&&(g._scopeId="data-v-"+p),{exports:r,options:g}}const P=o.defineComponent({name:"MyButton",props:{text:{type:String,default:"默认按钮"},color:{type:String,default:"#409eff"}},setup(r,{emit:e}){return{handleClick:()=>{e("click","按钮被点击")}}}});var S=function(){var e=this,t=e._self._c;return e._self._setupProxy,t("button",{staticClass:"my-button",style:{background:e.color},on:{click:e.handleClick}},[e._t("default",function(){return[e._v(e._s(e.text))]})],2)},N=[],F=C(P,S,N,!1,null,"d19bd5c3");const M=F.exports;class i{static formatDate(e){if(!e||!(e instanceof Date)||isNaN(e.getTime()))return"";const t=e.getFullYear(),a=String(e.getMonth()+1).padStart(2,"0"),u=String(e.getDate()).padStart(2,"0");return`${t}-${a}-${u}`}static getFirstDayOfMonth(e){return new Date(e.getFullYear(),e.getMonth(),1)}static getLastDayOfMonth(e){return new Date(e.getFullYear(),e.getMonth()+1,0)}static getDayOfWeek(e){return e.getDay()}static getPrevMonth(e){const t=e.getMonth()===0?e.getFullYear()-1:e.getFullYear(),a=e.getMonth()===0?11:e.getMonth()-1;return new Date(t,a,1)}static getNextMonth(e){const t=e.getMonth()===11?e.getFullYear()+1:e.getFullYear(),a=e.getMonth()===11?0:e.getMonth()+1;return new Date(t,a,1)}static getPrevYear(e){return new Date(e.getFullYear()-1,e.getMonth(),1)}static getNextYear(e){return new Date(e.getFullYear()+1,e.getMonth(),1)}static generateMonthPanel(e,t=""){const a=[],u=this.getFirstDayOfMonth(e),p=this.getLastDayOfMonth(e),f=this.getDayOfWeek(u);for(let s=f;s>0;s--){const v=new Date(u.getTime()-s*24*60*60*1e3);a.push({date:v,formatDate:this.formatDate(v),isCurrentMonth:!1,isSelected:this.formatDate(v)===t})}const g=p.getDate();for(let s=1;s<=g;s++){const v=new Date(e.getFullYear(),e.getMonth(),s);a.push({date:v,formatDate:this.formatDate(v),isCurrentMonth:!0,isSelected:this.formatDate(v)===t})}const c=42-a.length;for(let s=1;s<=c;s++){const v=new Date(p.getTime()+s*24*60*60*1e3);a.push({date:v,formatDate:this.formatDate(v),isCurrentMonth:!1,isSelected:this.formatDate(v)===t})}return a}static getDecadeStart(e){const t=e.getFullYear();return Math.floor(t/10)*10}static getNextDecade(e){return e+10}static getPrevDecade(e){return e-10}static generateDecadeYears(e){return Array.from({length:10},(t,a)=>e+a)}}const V=o.defineComponent({name:"ViewDatePicker",props:{value:{type:String,default:()=>i.formatDate(new Date)},modelValue:{type:String,default:()=>i.formatDate(new Date)}},emits:["input","update:modelValue","change"],setup(r,{emit:e}){const t=o.getCurrentInstance(),a=!!t&&!!t.proxy&&!t.vnode,u=o.ref(null),p=o.ref(null),y=o.ref(null),f=o.ref(!1),g=o.ref({}),c=o.ref(new Date().getFullYear()),s=o.ref(new Date().getMonth()+1),v=o.ref(""),m=o.ref(""),w=o.ref("date"),d=o.ref(i.getDecadeStart(new Date(c.value,s.value-1))),O=o.computed(()=>{const n=i.generateDecadeYears(d.value);return Array.isArray(n)?n:[]}),A=o.computed(()=>{const n=d.value,l=n+9;return`${n}年-${l}年`}),W=o.computed(()=>{const n=new Date(c.value,s.value-1,1),l=i.generateMonthPanel(n,m.value);return Array.isArray(l)?l:[]}),T=()=>{const n=a?r.value:r.modelValue;if(n){m.value=n;const l=new Date(n);isNaN(l.getTime())||(c.value=l.getFullYear(),s.value=l.getMonth()+1,d.value=i.getDecadeStart(l))}else{const l=new Date;m.value=i.formatDate(l),c.value=l.getFullYear(),s.value=l.getMonth()+1,d.value=i.getDecadeStart(l)}};o.watch(()=>[r.value,r.modelValue],()=>{T()},{immediate:!0,deep:!0});const Y=()=>{if(!p.value||!y.value)return;const n=p.value.getBoundingClientRect(),l=u.value.getBoundingClientRect();g.value={position:"absolute",top:`${n.bottom-l.top+4}px`,left:`${n.left-l.left}px`,zIndex:9999,width:"322px"}},B=()=>{f.value=!f.value,f.value&&(setTimeout(()=>Y(),0),w.value="date")},z=()=>{d.value=i.getDecadeStart(new Date(c.value,s.value-1)),w.value="year"},j=()=>{w.value="month"},U=n=>{c.value=n,w.value="month"},q=n=>{s.value=n,w.value="date"},G=n=>{m.value=n.formatDate,c.value=n.date.getFullYear(),s.value=n.date.getMonth()+1,e(a?"input":"update:modelValue",m.value),e("change",{date:n.date,formatDate:m.value}),f.value=!1},H=()=>{c.value-=1,d.value=i.getDecadeStart(new Date(c.value,s.value-1))},J=()=>{s.value===1?(s.value=12,c.value-=1):s.value-=1,d.value=i.getDecadeStart(new Date(c.value,s.value-1))},K=()=>{s.value===12?(s.value=1,c.value+=1):s.value+=1,d.value=i.getDecadeStart(new Date(c.value,s.value-1))},Q=()=>{c.value+=1,d.value=i.getDecadeStart(new Date(c.value,s.value-1))},X=()=>{d.value=i.getNextDecade(d.value)},Z=()=>{d.value=i.getPrevDecade(d.value)},ee=n=>{m.value=n.target.value},te=(n,l)=>{if(!n||!l)return!1;if(l.contains(n)||n.classList.contains("year-item")||n.classList.contains("month-item"))return!0;let _=n;for(;_.parentElement;){if(_=_.parentElement,_===l)return!0;if(_.tagName==="BODY")break}return!1},x=n=>{const l=te(n.target,u.value);f.value&&u.value&&!l&&(f.value=!1,w.value="date")},D=()=>{f.value&&Y()};return o.onMounted(()=>{T(),document.addEventListener("click",x),window.addEventListener("scroll",D,!0),window.addEventListener("resize",D)}),o.onUnmounted(()=>{document.removeEventListener("click",x),window.removeEventListener("scroll",D,!0),window.removeEventListener("resize",D)}),{pickerWrapper:u,dateInput:p,datePanel:y,panelVisible:f,panelStyle:g,currentYear:c,currentMonth:s,hoverDate:v,displayDate:m,panelType:w,decadeYears:O,panelDates:W,togglePanel:B,openYearPanel:z,openMonthPanel:j,selectDecadeYear:U,selectTargetMonth:q,selectDate:G,switchToPrevYear:H,switchToPrevMonth:J,switchToNextMonth:K,switchToNextYear:Q,handleInput:ee,getDecadeStartAndEnd:A,switchToPrevTenYears:Z,switchToNextTenYears:X}}});var $=function(){var e=this,t=e._self._c;return e._self._setupProxy,t("div",{ref:"pickerWrapper",staticClass:"view-date-picker-wrapper"},[t("div",{staticClass:"native-input-wrapper"},[t("input",{ref:"dateInput",staticClass:"native-input",attrs:{type:"text",placeholder:"请选择日期",readonly:""},domProps:{value:e.displayDate},on:{input:e.handleInput,click:e.togglePanel}}),t("span",{staticClass:"date-icon",on:{click:e.togglePanel}},[e._v("📅")])]),t("div",{directives:[{name:"show",rawName:"v-show",value:e.panelVisible,expression:"panelVisible"}],ref:"datePanel",staticClass:"date-picker-dropdown",style:e.panelStyle},[t("div",{staticClass:"date-picker-panel"},[t("div",{directives:[{name:"show",rawName:"v-show",value:e.panelType=="date",expression:"panelType == 'date'"}],staticClass:"picker-header"},[t("button",{staticClass:"toggle-btn year-btn prev-year",on:{click:e.switchToPrevYear}},[e._v("«")]),t("button",{staticClass:"toggle-btn month-btn prev-month",on:{click:e.switchToPrevMonth}},[e._v(" < ")]),t("div",{staticClass:"current-month"},[t("span",{staticClass:"clickable-year",on:{click:e.openYearPanel}},[e._v(e._s(e.currentYear)+"年")]),t("span",{staticClass:"clickable-month",on:{click:e.openMonthPanel}},[e._v(e._s(e.currentMonth)+"月")])]),t("button",{staticClass:"toggle-btn month-btn next-month",on:{click:e.switchToNextMonth}},[e._v(">")]),t("button",{staticClass:"toggle-btn year-btn next-year",on:{click:e.switchToNextYear}},[e._v("»")])]),t("div",{directives:[{name:"show",rawName:"v-show",value:e.panelType=="year",expression:"panelType == 'year'"}],staticClass:"picker-header"},[t("button",{staticClass:"toggle-btn month-btn prev-month",on:{click:e.switchToPrevTenYears}},[e._v(" < ")]),t("div",{staticClass:"current-month"},[t("span",{staticClass:"clickable-year"},[e._v(e._s(e.getDecadeStartAndEnd)+"年")])]),t("button",{staticClass:"toggle-btn month-btn next-month",on:{click:e.switchToNextTenYears}},[e._v(">")])]),t("div",{directives:[{name:"show",rawName:"v-show",value:e.panelType=="month",expression:"panelType == 'month'"}],staticClass:"picker-header"},[t("button",{staticClass:"toggle-btn month-btn prev-month",on:{click:e.switchToPrevYear}},[e._v(" < ")]),t("div",{staticClass:"current-month"},[t("span",{staticClass:"clickable-year"},[e._v(e._s(e.currentYear)+"年")])]),t("button",{staticClass:"toggle-btn month-btn next-month",on:{click:e.switchToNextYear}},[e._v(">")])]),e.panelType==="date"?t("div",{staticClass:"bod-mb"},[e._m(0),t("div",{staticClass:"picker-panel"},e._l(e.panelDates,function(a,u){return t("div",{key:u,staticClass:"date-item",class:{"not-current-month":!a.isCurrentMonth,selected:a.formatDate===e.displayDate,hover:e.hoverDate===a.formatDate&&a.formatDate!==e.displayDate},on:{click:function(p){return e.selectDate(a)},mouseenter:function(p){e.hoverDate=a.formatDate},mouseleave:function(p){e.hoverDate=""}}},[e._v(" "+e._s(a.date.getDate())+" ")])}),0)]):e.panelType==="year"?t("div",{staticClass:"bod-mb"},e._l(e.decadeYears,function(a){return t("div",{key:a,staticClass:"year-item",class:{selected:a===e.currentYear},on:{click:function(u){return e.selectDecadeYear(a)}}},[e._v(" "+e._s(a)+"年 ")])}),0):e.panelType==="month"?t("div",{staticClass:"bod-mb"},e._l(12,function(a){return t("div",{key:a,staticClass:"month-item",class:{selected:a===e.currentMonth},on:{click:function(u){return e.selectTargetMonth(a)}}},[e._v(" "+e._s(a)+"月 ")])}),0):e._e()])])])},E=[function(){var r=this,e=r._self._c;return r._self._setupProxy,e("div",{staticClass:"picker-week-header"},[e("div",{staticClass:"week-item"},[r._v("日")]),e("div",{staticClass:"week-item"},[r._v("一")]),e("div",{staticClass:"week-item"},[r._v("二")]),e("div",{staticClass:"week-item"},[r._v("三")]),e("div",{staticClass:"week-item"},[r._v("四")]),e("div",{staticClass:"week-item"},[r._v("五")]),e("div",{staticClass:"week-item"},[r._v("六")])])}],L=C(V,$,E,!1,null,"a05e5b32");const b=L.exports,R=[M,b],k=r=>{R.forEach(e=>{r.component(e.name,e)})};typeof window<"u"&&window.Vue&&k(window.Vue);const I={install:k};h.MyButton=M,h.ViewDatePicker=b,h.default=I,h.install=k,Object.defineProperties(h,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|
|
1
|
+
(function(h,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("vue-demi")):typeof define=="function"&&define.amd?define(["exports","vue-demi"],r):(h=typeof globalThis<"u"?globalThis:h||self,r(h["view-report"]={},h.VueDemi))})(this,(function(h,r){"use strict";function D(l,e,t,a,f,v,m,i){var s=typeof l=="function"?l.options:l;return e&&(s.render=e,s.staticRenderFns=t,s._compiled=!0),v&&(s._scopeId="data-v-"+v),{exports:l,options:s}}const Y=r.defineComponent({name:"MyButton",props:{text:{type:String,default:"默认按钮"},color:{type:String,default:"#409eff"}},setup(l,{emit:e}){return{handleClick:()=>{e("click","按钮被点击")}}}});var P=function(){var e=this,t=e._self._c;return e._self._setupProxy,t("button",{staticClass:"my-button",style:{background:e.color},on:{click:e.handleClick}},[e._t("default",function(){return[e._v(e._s(e.text))]})],2)},x=[],S=D(Y,P,x,!1,null,"d19bd5c3");const k=S.exports;class d{static formatDate(e){if(!e||!(e instanceof Date)||isNaN(e.getTime()))return"";const t=e.getFullYear(),a=String(e.getMonth()+1).padStart(2,"0"),f=String(e.getDate()).padStart(2,"0");return`${t}-${a}-${f}`}static getFirstDayOfMonth(e){return new Date(e.getFullYear(),e.getMonth(),1)}static getLastDayOfMonth(e){return new Date(e.getFullYear(),e.getMonth()+1,0)}static getDayOfWeek(e){return e.getDay()}static getPrevMonth(e){const t=e.getMonth()===0?e.getFullYear()-1:e.getFullYear(),a=e.getMonth()===0?11:e.getMonth()-1;return new Date(t,a,1)}static getNextMonth(e){const t=e.getMonth()===11?e.getFullYear()+1:e.getFullYear(),a=e.getMonth()===11?0:e.getMonth()+1;return new Date(t,a,1)}static getPrevYear(e){return new Date(e.getFullYear()-1,e.getMonth(),1)}static getNextYear(e){return new Date(e.getFullYear()+1,e.getMonth(),1)}static generateMonthPanel(e,t=""){const a=[],f=this.getFirstDayOfMonth(e),v=this.getLastDayOfMonth(e),i=this.getDayOfWeek(f);for(let c=i;c>0;c--){const u=new Date(f.getTime()-c*24*60*60*1e3);a.push({date:u,formatDate:this.formatDate(u),isCurrentMonth:!1,isSelected:this.formatDate(u)===t})}const s=v.getDate();for(let c=1;c<=s;c++){const u=new Date(e.getFullYear(),e.getMonth(),c);a.push({date:u,formatDate:this.formatDate(u),isCurrentMonth:!0,isSelected:this.formatDate(u)===t})}const y=42-a.length;for(let c=1;c<=y;c++){const u=new Date(v.getTime()+c*24*60*60*1e3);a.push({date:u,formatDate:this.formatDate(u),isCurrentMonth:!1,isSelected:this.formatDate(u)===t})}return a}static getDecadeStart(e){const t=e.getFullYear();return Math.floor(t/10)*10}static getNextDecade(e){return e+10}static getPrevDecade(e){return e-10}static generateDecadeYears(e){return Array.from({length:10},(t,a)=>e+a)}}const N=r.defineComponent({name:"ViewDatePicker",props:{value:{type:String,default:()=>d.formatDate(new Date)},modelValue:{type:String,default:()=>d.formatDate(new Date)}},emits:["input","update:modelValue","change"],setup(l,{emit:e}){const t=r.ref(null),a=r.ref(null),f=r.ref(null),v=r.ref(!1),m=r.ref({}),i=r.ref(new Date().getFullYear()),s=r.ref(new Date().getMonth()+1),y=r.ref(""),c=r.ref(""),u=r.ref("date"),p=r.ref(d.getDecadeStart(new Date(i.value,s.value-1))),R=r.computed(()=>{const n=d.generateDecadeYears(p.value);return Array.isArray(n)?n:[]}),O=r.computed(()=>{const n=p.value,o=n+9;return`${n}年-${o}年`}),I=r.computed(()=>{const n=new Date(i.value,s.value-1,1),o=d.generateMonthPanel(n,c.value);return Array.isArray(o)?o:[]}),M=()=>{const n=r.isVue2?l.value:l.modelValue;if(n){c.value=n;const o=new Date(n);isNaN(o.getTime())||(i.value=o.getFullYear(),s.value=o.getMonth()+1,p.value=d.getDecadeStart(o))}else{const o=new Date;c.value=d.formatDate(o),i.value=o.getFullYear(),s.value=o.getMonth()+1,p.value=d.getDecadeStart(o)}};r.watch(()=>[l.value,l.modelValue],()=>{M()},{immediate:!0,deep:!0});const b=()=>{if(!a.value||!f.value)return;const n=a.value.getBoundingClientRect(),o=t.value.getBoundingClientRect();m.value={position:"absolute",top:`${n.bottom-o.top+4}px`,left:`${n.left-o.left}px`,zIndex:9999,width:"322px"}},A=()=>{v.value=!v.value,v.value&&(setTimeout(()=>b(),0),u.value="date")},W=()=>{p.value=d.getDecadeStart(new Date(i.value,s.value-1)),u.value="year"},B=()=>{u.value="month"},z=n=>{i.value=n,u.value="month"},j=n=>{s.value=n,u.value="date"},U=n=>{c.value=n.formatDate,i.value=n.date.getFullYear(),s.value=n.date.getMonth()+1,r.isVue2?e("input",c.value):e("update:modelValue",c.value),e("change",{date:n.date,formatDate:c.value}),v.value=!1},q=()=>{i.value-=1,p.value=d.getDecadeStart(new Date(i.value,s.value-1))},G=()=>{s.value===1?(s.value=12,i.value-=1):s.value-=1,p.value=d.getDecadeStart(new Date(i.value,s.value-1))},H=()=>{s.value===12?(s.value=1,i.value+=1):s.value+=1,p.value=d.getDecadeStart(new Date(i.value,s.value-1))},J=()=>{i.value+=1,p.value=d.getDecadeStart(new Date(i.value,s.value-1))},K=()=>{p.value=d.getNextDecade(p.value)},Q=()=>{p.value=d.getPrevDecade(p.value)},X=n=>{c.value=n.target.value},Z=(n,o)=>{if(!n||!o)return!1;if(o.contains(n)||n.classList.contains("year-item")||n.classList.contains("month-item"))return!0;let g=n;for(;g.parentElement;){if(g=g.parentElement,g===o)return!0;if(g.tagName==="BODY")break}return!1},T=n=>{const o=Z(n.target,t.value);v.value&&t.value&&!o&&(v.value=!1,u.value="date")},w=()=>{v.value&&b()};return r.onMounted(()=>{M(),document.addEventListener("click",T),window.addEventListener("scroll",w,!0),window.addEventListener("resize",w)}),r.onUnmounted(()=>{document.removeEventListener("click",T),window.removeEventListener("scroll",w,!0),window.removeEventListener("resize",w)}),{pickerWrapper:t,dateInput:a,datePanel:f,panelVisible:v,panelStyle:m,currentYear:i,currentMonth:s,hoverDate:y,displayDate:c,panelType:u,decadeYears:R,panelDates:I,togglePanel:A,openYearPanel:W,openMonthPanel:B,selectDecadeYear:z,selectTargetMonth:j,selectDate:U,switchToPrevYear:q,switchToPrevMonth:G,switchToNextMonth:H,switchToNextYear:J,handleInput:X,getDecadeStartAndEnd:O,switchToPrevTenYears:Q,switchToNextTenYears:K}}});var F=function(){var e=this,t=e._self._c;return e._self._setupProxy,t("div",{ref:"pickerWrapper",staticClass:"view-date-picker-wrapper"},[t("div",{staticClass:"native-input-wrapper"},[t("input",{ref:"dateInput",staticClass:"native-input",attrs:{type:"text",placeholder:"请选择日期",readonly:""},domProps:{value:e.displayDate},on:{input:e.handleInput,click:e.togglePanel}}),t("span",{staticClass:"date-icon",on:{click:e.togglePanel}},[e._v("📅")])]),t("div",{directives:[{name:"show",rawName:"v-show",value:e.panelVisible,expression:"panelVisible"}],ref:"datePanel",staticClass:"date-picker-dropdown",style:e.panelStyle},[t("div",{staticClass:"date-picker-panel"},[t("div",{directives:[{name:"show",rawName:"v-show",value:e.panelType=="date",expression:"panelType == 'date'"}],staticClass:"picker-header"},[t("button",{staticClass:"toggle-btn year-btn prev-year",on:{click:e.switchToPrevYear}},[e._v("«")]),t("button",{staticClass:"toggle-btn month-btn prev-month",on:{click:e.switchToPrevMonth}},[e._v(" < ")]),t("div",{staticClass:"current-month"},[t("span",{staticClass:"clickable-year",on:{click:e.openYearPanel}},[e._v(e._s(e.currentYear)+"年")]),t("span",{staticClass:"clickable-month",on:{click:e.openMonthPanel}},[e._v(e._s(e.currentMonth)+"月")])]),t("button",{staticClass:"toggle-btn month-btn next-month",on:{click:e.switchToNextMonth}},[e._v(">")]),t("button",{staticClass:"toggle-btn year-btn next-year",on:{click:e.switchToNextYear}},[e._v("»")])]),t("div",{directives:[{name:"show",rawName:"v-show",value:e.panelType=="year",expression:"panelType == 'year'"}],staticClass:"picker-header"},[t("button",{staticClass:"toggle-btn month-btn prev-month",on:{click:e.switchToPrevTenYears}},[e._v(" < ")]),t("div",{staticClass:"current-month"},[t("span",{staticClass:"clickable-year"},[e._v(e._s(e.getDecadeStartAndEnd)+"年")])]),t("button",{staticClass:"toggle-btn month-btn next-month",on:{click:e.switchToNextTenYears}},[e._v(">")])]),t("div",{directives:[{name:"show",rawName:"v-show",value:e.panelType=="month",expression:"panelType == 'month'"}],staticClass:"picker-header"},[t("button",{staticClass:"toggle-btn month-btn prev-month",on:{click:e.switchToPrevYear}},[e._v(" < ")]),t("div",{staticClass:"current-month"},[t("span",{staticClass:"clickable-year"},[e._v(e._s(e.currentYear)+"年")])]),t("button",{staticClass:"toggle-btn month-btn next-month",on:{click:e.switchToNextYear}},[e._v(">")])]),e.panelType==="date"?t("div",{staticClass:"bod-mb"},[e._m(0),t("div",{staticClass:"picker-panel"},e._l(e.panelDates,function(a,f){return t("div",{key:f,staticClass:"date-item",class:{"not-current-month":!a.isCurrentMonth,selected:a.formatDate===e.displayDate,hover:e.hoverDate===a.formatDate&&a.formatDate!==e.displayDate},on:{click:function(v){return e.selectDate(a)},mouseenter:function(v){e.hoverDate=a.formatDate},mouseleave:function(v){e.hoverDate=""}}},[e._v(" "+e._s(a.date.getDate())+" ")])}),0)]):e.panelType==="year"?t("div",{staticClass:"bod-mb"},e._l(e.decadeYears,function(a){return t("div",{key:a,staticClass:"year-item",class:{selected:a===e.currentYear},on:{click:function(f){return e.selectDecadeYear(a)}}},[e._v(" "+e._s(a)+"年 ")])}),0):e.panelType==="month"?t("div",{staticClass:"bod-mb"},e._l(12,function(a){return t("div",{key:a,staticClass:"month-item",class:{selected:a===e.currentMonth},on:{click:function(f){return e.selectTargetMonth(a)}}},[e._v(" "+e._s(a)+"月 ")])}),0):e._e()])])])},V=[function(){var l=this,e=l._self._c;return l._self._setupProxy,e("div",{staticClass:"picker-week-header"},[e("div",{staticClass:"week-item"},[l._v("日")]),e("div",{staticClass:"week-item"},[l._v("一")]),e("div",{staticClass:"week-item"},[l._v("二")]),e("div",{staticClass:"week-item"},[l._v("三")]),e("div",{staticClass:"week-item"},[l._v("四")]),e("div",{staticClass:"week-item"},[l._v("五")]),e("div",{staticClass:"week-item"},[l._v("六")])])}],$=D(N,F,V,!1,null,"e6885493");const C=$.exports,E=[k,C],_=l=>{E.forEach(e=>{l.component(e.name,e)})};typeof window<"u"&&window.Vue&&_(window.Vue);const L={install:_};h.MyButton=k,h.ViewDatePicker=C,h.default=L,h.install=_,Object.defineProperties(h,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|