vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
72 lines (71 loc) • 2.78 kB
JavaScript
import { defineComponent as w, computed as a, ref as g, watch as v, createBlock as b, openBlock as T, unref as o, normalizeStyle as x, normalizeClass as R } from "vue";
import { VueDatePicker as $ } from "@vuepic/vue-datepicker";
/* empty css */
import { useInject as z } from "../utils/index.js";
const S = /* @__PURE__ */ w({
__name: "DatePicker",
props: {
width: { default: 150 },
size: { default: "middle" },
mode: { default: "date" },
format: { type: [String, Function], default: void 0 },
showTime: { type: Boolean, default: !1 },
showToday: { type: Boolean, default: !1 },
range: { type: Boolean, default: !1 },
maxRange: { default: void 0 },
modelType: { default: "format" }
},
setup(e) {
const t = e, { colorPalettes: l, shadowColor: c } = z("DatePicker"), m = a(() => typeof t.width == "number" ? `${t.width}px` : t.width), u = a(() => t.mode === "time"), d = a(() => t.mode === "week"), s = a(() => t.mode === "month"), f = a(() => t.mode === "year"), r = g(null), p = a(() => (t.maxRange ?? 0) * 24 * 60 * 60 * 1e3);
v(
() => t.maxRange,
() => {
r.value = null;
}
);
function k() {
r.value = null;
}
function h(n) {
r.value = n.getTime();
}
function y(n) {
const i = n.getTime();
return !!(r.value && Math.abs(i - r.value) >= p.value);
}
return (n, i) => (T(), b(o($), {
class: R(["datepicker-wrap", {
"datepicker-small": e.size === "small",
"datepicker-large": e.size === "large"
}]),
style: x(`
--datepicker-width: ${m.value};
--datepicker-primary-color: ${o(l)[5]};
--datepicker-primary-color-hover: ${o(l)[4]};
--datepicker-primary-color-focus: ${o(l)[4]};
--datepicker-primary-shadow-color: ${o(c)};
`),
position: "left",
"month-change-on-scroll": !1,
"enable-time-picker": e.showTime,
"time-picker": u.value,
"week-picker": d.value,
"month-picker": s.value,
"year-picker": f.value,
range: e.range,
"now-button-label": "今天",
"show-now-button": e.showToday,
"auto-apply": "",
"text-input": "",
"model-type": e.modelType,
formats: { input: e.format },
"day-names": ["一", "二", "三", "四", "五", "六", "七"],
"disabled-dates": e.range && e.maxRange ? y : [],
onRangeStart: h,
onClosed: k
}, null, 8, ["class", "style", "enable-time-picker", "time-picker", "week-picker", "month-picker", "year-picker", "range", "show-now-button", "model-type", "formats", "disabled-dates"]));
}
});
export {
S as default
};