vft 0.0.374 → 0.0.375

package/es/components/date-picker/composables/use-panel-date-range.js

@@ -1,72 +1,106 @@
-import { ref as i, inject as O, computed as o, nextTick as Y } from "vue";
+import { ref, inject, computed, nextTick } from "vue";
 import "../../time-picker/index.js";
-import { getValidDateOfYear as _, getValidDateOfMonth as j } from "../utils.js";
-import { PICKER_BASE_INJECTION_KEY as x } from "../../time-picker/constants.js";
-const D = (R, $, c, u) => {
-  const l = i("date"), h = i(), s = i("date"), v = i(), p = O(x), { disabledDate: d } = p.props, m = i("zh-cn"), w = o(() => c.value.year()), C = o(() => c.value.month()), P = o(() => u.value.year()), L = o(() => u.value.month());
-  function g(e, a) {
-    const n = "年";
-    if (e.value === "year") {
-      const t = Math.floor(a.value / 10) * 10;
-      return n ? `${t} ${n} - ${t + 9} ${n}` : `${t} - ${t + 9}`;
+import { getValidDateOfYear, getValidDateOfMonth } from "../utils.js";
+import { PICKER_BASE_INJECTION_KEY } from "../../time-picker/constants.js";
+const usePanelDateRange = (props, emit, leftDate, rightDate) => {
+  const leftCurrentView = ref("date");
+  const leftCurrentViewRef = ref();
+  const rightCurrentView = ref("date");
+  const rightCurrentViewRef = ref();
+  const pickerBase = inject(PICKER_BASE_INJECTION_KEY);
+  const { disabledDate } = pickerBase.props;
+  const lang = ref("zh-cn");
+  const leftYear = computed(() => {
+    return leftDate.value.year();
+  });
+  const leftMonth = computed(() => {
+    return leftDate.value.month();
+  });
+  const rightYear = computed(() => {
+    return rightDate.value.year();
+  });
+  const rightMonth = computed(() => {
+    return rightDate.value.month();
+  });
+  function computedYearLabel(currentView, yearValue) {
+    const yearTranslation = "年";
+    if (currentView.value === "year") {
+      const startYear = Math.floor(yearValue.value / 10) * 10;
+      return yearTranslation ? `${startYear} ${yearTranslation} - ${startYear + 9} ${yearTranslation}` : `${startYear} - ${startYear + 9}`;
     }
-    return `${a.value} ${n}`;
+    return `${yearValue.value} ${yearTranslation}`;
   }
-  function y(e) {
-    e?.focus();
+  function focusPicker(currentViewRef) {
+    currentViewRef?.focus();
   }
-  async function k(e, a) {
-    const n = e === "left" ? l : s, t = e === "left" ? h : v;
-    n.value = a, await Y(), y(t.value);
+  async function showPicker(pickerType, view) {
+    const currentView = pickerType === "left" ? leftCurrentView : rightCurrentView;
+    const currentViewRef = pickerType === "left" ? leftCurrentViewRef : rightCurrentViewRef;
+    currentView.value = view;
+    await nextTick();
+    focusPicker(currentViewRef.value);
   }
-  async function f(e, a, n) {
-    const t = a === "left", r = t ? c : u, M = t ? u : c, E = t ? l : s, B = t ? h : v;
-    if (e === "year") {
-      const I = r.value.year(n);
-      r.value = _(I, m.value, d);
+  async function handlePick(mode, pickerType, value) {
+    const isLeftPicker = pickerType === "left";
+    const startDate = isLeftPicker ? leftDate : rightDate;
+    const endDate = isLeftPicker ? rightDate : leftDate;
+    const currentView = isLeftPicker ? leftCurrentView : rightCurrentView;
+    const currentViewRef = isLeftPicker ? leftCurrentViewRef : rightCurrentViewRef;
+    if (mode === "year") {
+      const data = startDate.value.year(value);
+      startDate.value = getValidDateOfYear(data, lang.value, disabledDate);
     }
-    e === "month" && (r.value = j(
-      r.value,
-      r.value.year(),
-      n,
-      m.value,
-      d
-    )), R.unlinkPanels || (M.value = a === "left" ? r.value.add(1, "month") : r.value.subtract(1, "month")), E.value = e === "year" ? "month" : "date", await Y(), y(B.value), V(e);
+    if (mode === "month") {
+      startDate.value = getValidDateOfMonth(
+        startDate.value,
+        startDate.value.year(),
+        value,
+        lang.value,
+        disabledDate
+      );
+    }
+    if (!props.unlinkPanels) {
+      endDate.value = pickerType === "left" ? startDate.value.add(1, "month") : startDate.value.subtract(1, "month");
+    }
+    currentView.value = mode === "year" ? "month" : "date";
+    await nextTick();
+    focusPicker(currentViewRef.value);
+    handlePanelChange(mode);
   }
-  function V(e) {
-    $(
+  function handlePanelChange(mode) {
+    emit(
       "panel-change",
-      [c.value.toDate(), u.value.toDate()],
-      e
+      [leftDate.value.toDate(), rightDate.value.toDate()],
+      mode
     );
   }
-  function b(e, a, n) {
-    const t = n ? "add" : "subtract";
-    return e === "year" ? a[t](10, "year") : a[t](1, "year");
+  function adjustDateByView(currentView, date, forward) {
+    const action = forward ? "add" : "subtract";
+    return currentView === "year" ? date[action](10, "year") : date[action](1, "year");
   }
   return {
-    leftCurrentView: l,
-    rightCurrentView: s,
-    leftCurrentViewRef: h,
-    rightCurrentViewRef: v,
-    leftYear: w,
-    rightYear: P,
-    leftMonth: C,
-    rightMonth: L,
-    leftYearLabel: o(() => g(l, w)),
-    rightYearLabel: o(
-      () => g(s, P)
+    leftCurrentView,
+    rightCurrentView,
+    leftCurrentViewRef,
+    rightCurrentViewRef,
+    leftYear,
+    rightYear,
+    leftMonth,
+    rightMonth,
+    leftYearLabel: computed(() => computedYearLabel(leftCurrentView, leftYear)),
+    rightYearLabel: computed(
+      () => computedYearLabel(rightCurrentView, rightYear)
     ),
-    showLeftPicker: (e) => k("left", e),
-    showRightPicker: (e) => k("right", e),
-    handleLeftYearPick: (e) => f("year", "left", e),
-    handleRightYearPick: (e) => f("year", "right", e),
-    handleLeftMonthPick: (e) => f("month", "left", e),
-    handleRightMonthPick: (e) => f("month", "right", e),
-    handlePanelChange: V,
-    adjustDateByView: b
+    showLeftPicker: (view) => showPicker("left", view),
+    showRightPicker: (view) => showPicker("right", view),
+    handleLeftYearPick: (year) => handlePick("year", "left", year),
+    handleRightYearPick: (year) => handlePick("year", "right", year),
+    handleLeftMonthPick: (month) => handlePick("month", "left", month),
+    handleRightMonthPick: (month) => handlePick("month", "right", month),
+    handlePanelChange,
+    adjustDateByView
   };
 };
 export {
-  D as usePanelDateRange
+  usePanelDateRange
 };

package/es/components/date-picker/composables/use-range-picker.js

@@ -1,82 +1,118 @@
-import { getCurrentInstance as b, ref as l, inject as w, watch as S, unref as a } from "vue";
-import k from "dayjs";
-import { isArray as D } from "@vft/utils";
+import { getCurrentInstance, ref, inject, watch, unref } from "vue";
+import dayjs from "dayjs";
+import { isArray } from "@vft/utils";
 import "@vueuse/core";
 import "../../config-provider/hooks/use-global-config.js";
 import "lodash-es";
-import { useNamespace as z } from "../../../hooks/use-namespace/index.js";
+import { useNamespace } from "../../../hooks/use-namespace/index.js";
 import "../../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../../hooks/use-z-index/index.js";
-import { getDefaultValue as A, isValidRange as J } from "../utils.js";
-import { ROOT_PICKER_INJECTION_KEY as Y } from "../constants.js";
-import { useShortcut as q } from "./use-shortcut.js";
-const tt = (d, {
-  defaultValue: p,
-  defaultTime: R,
-  leftDate: g,
-  rightDate: C,
-  step: N,
-  unit: O,
-  onParsedValueChanged: _
+import { getDefaultValue, isValidRange } from "../utils.js";
+import { ROOT_PICKER_INJECTION_KEY } from "../constants.js";
+import { useShortcut } from "./use-shortcut.js";
+const useRangePicker = (props, {
+  defaultValue,
+  defaultTime,
+  leftDate,
+  rightDate,
+  step,
+  unit,
+  onParsedValueChanged
 }) => {
-  const { emit: E } = b(), f = l("zh-cn"), { pickerNs: I } = w(Y), P = z("date-range-picker"), x = q(f), o = l(), r = l(), s = l({
+  const { emit } = getCurrentInstance();
+  const lang = ref("zh-cn");
+  const { pickerNs } = inject(ROOT_PICKER_INJECTION_KEY);
+  const drpNs = useNamespace("date-range-picker");
+  const handleShortcutClick = useShortcut(lang);
+  const minDate = ref();
+  const maxDate = ref();
+  const rangeState = ref({
     endDate: null,
-    selecting: !1
-  }), T = (t) => {
-    s.value = t;
-  }, j = (t = !1) => {
-    const e = a(o), n = a(r);
-    J([e, n]) && E("pick", [e, n], t);
-  }, y = (t) => {
-    s.value.selecting = t, t || (s.value.endDate = null);
-  }, h = (t) => {
-    if (D(t) && t.length === 2) {
-      const [e, n] = t;
-      o.value = e, g.value = e, r.value = n, _(a(o), a(r));
-    } else
-      v();
-  }, v = () => {
-    let [t, e] = A(a(p), {
-      lang: a(f),
-      step: N,
-      unit: O,
-      unlinkPanels: d.unlinkPanels
+    selecting: false
+  });
+  const handleChangeRange = (val) => {
+    rangeState.value = val;
+  };
+  const handleRangeConfirm = (visible = false) => {
+    const _minDate = unref(minDate);
+    const _maxDate = unref(maxDate);
+    if (isValidRange([_minDate, _maxDate])) {
+      emit("pick", [_minDate, _maxDate], visible);
+    }
+  };
+  const onSelect = (selecting) => {
+    rangeState.value.selecting = selecting;
+    if (!selecting) {
+      rangeState.value.endDate = null;
+    }
+  };
+  const onReset = (parsedValue) => {
+    if (isArray(parsedValue) && parsedValue.length === 2) {
+      const [start, end] = parsedValue;
+      minDate.value = start;
+      leftDate.value = start;
+      maxDate.value = end;
+      onParsedValueChanged(unref(minDate), unref(maxDate));
+    } else {
+      restoreDefault();
+    }
+  };
+  const restoreDefault = () => {
+    let [start, end] = getDefaultValue(unref(defaultValue), {
+      lang: unref(lang),
+      step,
+      unit,
+      unlinkPanels: props.unlinkPanels
     });
-    const n = (i) => i.diff(i.startOf("d"), "ms"), m = a(R);
-    if (m) {
-      let i = 0, u = 0;
-      if (D(m)) {
-        const [c, K] = m.map(k);
-        i = n(c), u = n(K);
+    const getShift = (day) => {
+      return day.diff(day.startOf("d"), "ms");
+    };
+    const maybeTimes = unref(defaultTime);
+    if (maybeTimes) {
+      let leftShift = 0;
+      let rightShift = 0;
+      if (isArray(maybeTimes)) {
+        const [timeStart, timeEnd] = maybeTimes.map(dayjs);
+        leftShift = getShift(timeStart);
+        rightShift = getShift(timeEnd);
       } else {
-        const c = n(k(m));
-        i = c, u = c;
+        const shift = getShift(dayjs(maybeTimes));
+        leftShift = shift;
+        rightShift = shift;
       }
-      t = t.startOf("d").add(i, "ms"), e = e.startOf("d").add(u, "ms");
+      start = start.startOf("d").add(leftShift, "ms");
+      end = end.startOf("d").add(rightShift, "ms");
     }
-    o.value = void 0, r.value = void 0, g.value = t, C.value = e;
+    minDate.value = void 0;
+    maxDate.value = void 0;
+    leftDate.value = start;
+    rightDate.value = end;
   };
-  return S(
-    p,
-    (t) => {
-      t && v();
+  watch(
+    defaultValue,
+    (val) => {
+      if (val) {
+        restoreDefault();
+      }
     },
-    { immediate: !0 }
-  ), S(() => d.parsedValue, h, { immediate: !0 }), {
-    minDate: o,
-    maxDate: r,
-    rangeState: s,
-    lang: f,
-    ppNs: I,
-    drpNs: P,
-    handleChangeRange: T,
-    handleRangeConfirm: j,
-    handleShortcutClick: x,
-    onSelect: y,
-    onReset: h
+    { immediate: true }
+  );
+  watch(() => props.parsedValue, onReset, { immediate: true });
+  return {
+    minDate,
+    maxDate,
+    rangeState,
+    lang,
+    ppNs: pickerNs,
+    drpNs,
+    handleChangeRange,
+    handleRangeConfirm,
+    handleShortcutClick,
+    onSelect,
+    onReset
   };
 };
 export {
-  tt as useRangePicker
+  useRangePicker
 };

package/es/components/date-picker/composables/use-shortcut.js

@@ -1,24 +1,29 @@
-import { getCurrentInstance as s, useAttrs as i, useSlots as u } from "vue";
-import n from "dayjs";
-import { isFunction as a } from "@vft/utils";
-const v = (o) => {
-  const { emit: l } = s(), c = i(), r = u();
-  return (t) => {
-    const e = a(t.value) ? t.value() : t.value;
-    if (e) {
-      l("pick", [
-        n(e[0]).locale(o.value),
-        n(e[1]).locale(o.value)
+import { getCurrentInstance, useAttrs, useSlots } from "vue";
+import dayjs from "dayjs";
+import { isFunction } from "@vft/utils";
+const useShortcut = (lang) => {
+  const { emit } = getCurrentInstance();
+  const attrs = useAttrs();
+  const slots = useSlots();
+  const handleShortcutClick = (shortcut) => {
+    const shortcutValues = isFunction(shortcut.value) ? shortcut.value() : shortcut.value;
+    if (shortcutValues) {
+      emit("pick", [
+        dayjs(shortcutValues[0]).locale(lang.value),
+        dayjs(shortcutValues[1]).locale(lang.value)
       ]);
       return;
     }
-    t.onClick && t.onClick({
-      attrs: c,
-      slots: r,
-      emit: l
-    });
+    if (shortcut.onClick) {
+      shortcut.onClick({
+        attrs,
+        slots,
+        emit
+      });
+    }
   };
+  return handleShortcutClick;
 };
 export {
-  v as useShortcut
+  useShortcut
 };

package/es/components/date-picker/composables/use-year-range-header.js

@@ -1,35 +1,54 @@
-import { computed as t } from "vue";
-const Y = ({
-  unlinkPanels: u,
-  leftDate: a,
-  rightDate: r
+import { computed } from "vue";
+const useYearRangeHeader = ({
+  unlinkPanels,
+  leftDate,
+  rightDate
 }) => {
-  const o = () => {
-    a.value = a.value.subtract(10, "year"), u.value || (r.value = r.value.subtract(10, "year"));
-  }, l = () => {
-    u.value || (a.value = a.value.add(10, "year")), r.value = r.value.add(10, "year");
-  }, v = () => {
-    a.value = a.value.add(10, "year");
-  }, n = () => {
-    r.value = r.value.subtract(10, "year");
-  }, c = t(() => {
-    const e = Math.floor(a.value.year() / 10) * 10;
-    return `${e}-${e + 9}`;
-  }), s = t(() => {
-    const e = Math.floor(r.value.year() / 10) * 10;
-    return `${e}-${e + 9}`;
-  }), d = t(() => Math.floor(a.value.year() / 10) * 10 + 9), y = t(() => Math.floor(r.value.year() / 10) * 10);
+  const leftPrevYear = () => {
+    leftDate.value = leftDate.value.subtract(10, "year");
+    if (!unlinkPanels.value) {
+      rightDate.value = rightDate.value.subtract(10, "year");
+    }
+  };
+  const rightNextYear = () => {
+    if (!unlinkPanels.value) {
+      leftDate.value = leftDate.value.add(10, "year");
+    }
+    rightDate.value = rightDate.value.add(10, "year");
+  };
+  const leftNextYear = () => {
+    leftDate.value = leftDate.value.add(10, "year");
+  };
+  const rightPrevYear = () => {
+    rightDate.value = rightDate.value.subtract(10, "year");
+  };
+  const leftLabel = computed(() => {
+    const leftStartDate = Math.floor(leftDate.value.year() / 10) * 10;
+    return `${leftStartDate}-${leftStartDate + 9}`;
+  });
+  const rightLabel = computed(() => {
+    const rightStartDate = Math.floor(rightDate.value.year() / 10) * 10;
+    return `${rightStartDate}-${rightStartDate + 9}`;
+  });
+  const leftYear = computed(() => {
+    const leftEndDate = Math.floor(leftDate.value.year() / 10) * 10 + 9;
+    return leftEndDate;
+  });
+  const rightYear = computed(() => {
+    const rightStartDate = Math.floor(rightDate.value.year() / 10) * 10;
+    return rightStartDate;
+  });
   return {
-    leftPrevYear: o,
-    rightNextYear: l,
-    leftNextYear: v,
-    rightPrevYear: n,
-    leftLabel: c,
-    rightLabel: s,
-    leftYear: d,
-    rightYear: y
+    leftPrevYear,
+    rightNextYear,
+    leftNextYear,
+    rightPrevYear,
+    leftLabel,
+    rightLabel,
+    leftYear,
+    rightYear
   };
 };
 export {
-  Y as useYearRangeHeader
+  useYearRangeHeader
 };

package/es/components/date-picker/constants.js

@@ -1,5 +1,6 @@
-const _ = Symbol(), E = "ElIsDefaultFormat";
+const ROOT_PICKER_INJECTION_KEY = Symbol();
+const ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY = "ElIsDefaultFormat";
 export {
-  _ as ROOT_PICKER_INJECTION_KEY,
-  E as ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY
+  ROOT_PICKER_INJECTION_KEY,
+  ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY
 };

package/es/components/date-picker/date-picker-com/basic-cell-render.js

@@ -1,35 +1,36 @@
-import { defineComponent as p, inject as s, renderSlot as m, createVNode as r } from "vue";
+import { defineComponent, inject, renderSlot, createVNode } from "vue";
 import "@vueuse/core";
 import "@vft/utils";
 import "../../config-provider/hooks/use-global-config.js";
 import "lodash-es";
-import { useNamespace as i } from "../../../hooks/use-namespace/index.js";
+import { useNamespace } from "../../../hooks/use-namespace/index.js";
 import "../../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../../hooks/use-z-index/index.js";
-import { ROOT_PICKER_INJECTION_KEY as a } from "../constants.js";
-import { basicCellProps as n } from "../props/basic-cell.js";
-const O = /* @__PURE__ */ p({
+import { ROOT_PICKER_INJECTION_KEY } from "../constants.js";
+import { basicCellProps } from "../props/basic-cell.js";
+const ElDatePickerCell = /* @__PURE__ */ defineComponent({
   name: "ElDatePickerCell",
-  props: n,
-  setup(o) {
-    const t = i("date-table-cell"), {
-      slots: l
-    } = s(a);
+  props: basicCellProps,
+  setup(props) {
+    const ns = useNamespace("date-table-cell");
+    const {
+      slots
+    } = inject(ROOT_PICKER_INJECTION_KEY);
     return () => {
       const {
-        cell: e
-      } = o;
-      return m(l, "default", {
-        ...e
-      }, () => [r("div", {
-        class: t.b()
-      }, [r("span", {
-        class: t.e("text")
-      }, [e?.renderText ?? e?.text])])]);
+        cell
+      } = props;
+      return renderSlot(slots, "default", {
+        ...cell
+      }, () => [createVNode("div", {
+        "class": ns.b()
+      }, [createVNode("span", {
+        "class": ns.e("text")
+      }, [cell?.renderText ?? cell?.text])])]);
     };
   }
 });
 export {
-  O as default
+  ElDatePickerCell as default
 };

package/es/components/date-picker/date-picker-com/basic-date-table.vue.js

@@ -1,4 +1,4 @@
-import f from "./basic-date-table.vue2.js";
+import _sfc_main from "./basic-date-table.vue2.js";
 export {
-  f as default
+  _sfc_main as default
 };