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