vue-amazing-ui/es/datepicker/DatePicker.vue2.js

An Amazing Vue3 UI Components Library, Using TypeScript.

import { defineComponent as g, computed as r, ref as v, watch as b, createBlock as T, openBlock as z, unref as o, normalizeStyle as C, normalizeClass as R } from "vue";
import $ from "@vuepic/vue-datepicker";
/* empty css                                                                                                                                 */
import { useInject as B } from "../utils/index.js";
const x = /* @__PURE__ */ g({
  __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"), u = r(() => typeof a.width == "number" ? `${a.width}px` : a.width), d = r(() => a.mode === "time"), m = r(() => a.mode === "week"), c = r(() => a.mode === "month"), p = r(() => a.mode === "year"), t = v(null), f = r(() => (a.maxRange ?? 0) * 24 * 60 * 60 * 1e3);
    b(
      () => a.maxRange,
      () => {
        t.value = null;
      }
    );
    function k() {
      t.value = null;
    }
    function h() {
      t.value = null;
    }
    function y(e) {
      t.value = e.getTime();
    }
    function w(e) {
      const l = e.getTime();
      return !!(t.value && Math.abs(l - t.value) >= f.value);
    }
    return (e, l) => (z(), T(o($), {
      class: R(["m-datepicker", {
        "datepicker-small": e.size === "small",
        "datepicker-large": e.size === "large"
      }]),
      style: C(`
      --datepicker-width: ${u.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": d.value,
      "week-picker": m.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 ? w : [],
      onRangeStart: y,
      onCleared: k,
      onClosed: h
    }, null, 8, ["class", "style", "enable-time-picker", "time-picker", "week-picker", "month-picker", "year-picker", "range", "show-now-button", "model-type", "disabled-dates"]));
  }
});
export {
  x as default
};