@opentiny/vue-renderless 3.6.7 → 3.8.0

package/user-link/vue.js

@@ -1,8 +1,8 @@
 import "../chunk-PKUHTIDK.js";
-import { getUsers, cacheUser, saveCache, initService } from "@opentiny/vue-renderless/user";
-import { initUser, showCard, showDetail } from "./index";
+import { getUsers, cacheUser, saveCache, initService, syncCacheIds } from "../user";
+import { initUser, showCard, showDetail, computedTextField, computedValueField } from "./index";
 const api = ["state", "showCard", "showDetail"];
-const renderless = (props, { reactive, watch }, { service }) => {
+const renderless = (props, { reactive, watch, computed }, { service }) => {
   service = initService({ props, service });
   const api2 = {};
   const state = reactive({
@@ -14,19 +14,24 @@ const renderless = (props, { reactive, watch }, { service }) => {
     data: {},
     spinner: true,
     imgUrl: "",
-    batch: props.batch === false ? false : props.batch || service.batch
+    batch: props.batch === false ? false : props.batch || service.batch,
+    textField: computed(() => api2.computedTextField()),
+    valueField: computed(() => api2.computedValueField())
   });
   Object.assign(api2, {
     state,
     showDetail: showDetail(state),
     saveCache: saveCache({ props }),
-    cacheUser: cacheUser({ api: api2, props, service }),
+    syncCacheIds: syncCacheIds({ props, state }),
+    cacheUser: cacheUser({ api: api2, props, service, state }),
     initUser: initUser({ api: api2, props, state }),
     getUsers: getUsers({ api: api2, props, state }),
     showCard: showCard({ api: api2, service, state }),
     getUserImageUrl: service.getUserImageUrl,
     fetchW3Accounts: service.fetchW3Accounts,
-    fetchUserByUserId: service.fetchUserByUserId
+    fetchUserByUserId: service.fetchUserByUserId,
+    computedTextField: computedTextField({ service, props }),
+    computedValueField: computedValueField({ service, props })
   });
   watch(() => props.modelValue, api2.initUser, { immediate: true });
   return api2;

package/wheel/index.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import { cloneDeep } from "@opentiny/vue-renderless/chart-core/deps/utils";
+import { cloneDeep } from "../chart-core/deps/utils";
 const created = (api) => () => {
   api.loadPickerData();
   api.loadWheels();

package/wizard/index.js

@@ -1,7 +1,7 @@
 import "../chunk-PKUHTIDK.js";
-import { format } from "@opentiny/vue-renderless/common/date";
-import { copyArray, extend } from "@opentiny/vue-renderless/common/object";
-import { isObject } from "@opentiny/vue-renderless/common/type";
+import { format } from "../common/date";
+import { copyArray, extend } from "../common/object";
+import { isObject } from "../common/type";
 const lastStepHandle = ({ state, emit }) => () => {
   for (let i = 0; i < state.datas.length; i++) {
     if (state.datas[0].status === state.doing) {

package/year-range/index.js

@@ -0,0 +1,125 @@
+import "../chunk-PKUHTIDK.js";
+import { isDate, nextYear, nextMonth } from "../common/deps/date-util";
+import { DATEPICKER } from "../common";
+const calcDefaultValue = (value) => {
+  if (Array.isArray(value)) {
+    return [new Date(value[0]), new Date(value[1])];
+  } else if (value) {
+    return [new Date(value), nextMonth(new Date(value))];
+  }
+  return [/* @__PURE__ */ new Date(), nextMonth(/* @__PURE__ */ new Date())];
+};
+const watchValue = ({ state }) => (data) => {
+  if (!data) {
+    state.minDate = null;
+    state.maxDate = null;
+  } else if (Array.isArray(data)) {
+    if (isDate(data[1])) {
+      state.maxDate = new Date(data[1]);
+    } else {
+      state.maxDate = null;
+    }
+    if (isDate(data[0])) {
+      state.minDate = new Date(data[0]);
+    } else {
+      state.minDate = null;
+    }
+    if (!state.minDate) {
+      state.leftDate = calcDefaultValue(state.defaultValue)[0];
+      state.rightDate = nextYear(state.leftDate);
+    } else {
+      state.leftDate = state.minDate;
+      if (state.maxDate && state.unlinkPanels) {
+        const minDateYear = state.minDate.getFullYear();
+        const maxDateYear = state.maxDate.getFullYear();
+        state.rightDate = maxDateYear === minDateYear ? nextYear(state.maxDate) : state.maxDate;
+      } else {
+        state.rightDate = nextYear(state.leftDate);
+      }
+    }
+  }
+};
+const handleClear = ({ emit, state }) => () => {
+  state.maxDate = null;
+  state.minDate = null;
+  state.leftDate = calcDefaultValue(state.defaultValue)[0];
+  state.rightDate = nextYear(state.leftDate);
+  emit("pick", null);
+};
+const handleChangeRange = (state) => (val) => {
+  state.rangeState = val.rangeState;
+  state.minDate = val.minDate;
+  state.maxDate = val.maxDate;
+};
+const watchDefaultValue = ({ state }) => (data) => {
+  if (!Array.isArray(state.value)) {
+    const [left, right] = calcDefaultValue(data);
+    state.leftDate = left;
+    state.rightDate = data && data[1] && left.getFullYear() !== right.getFullYear() && state.unlinkPanels ? right : nextYear(state.leftDate);
+  }
+};
+const handleRangePick = ({ api, state }) => (val, close = true) => {
+  const maxDate = val.maxDate;
+  const minDate = val.minDate;
+  if (state.minDate === minDate && state.maxDate === maxDate) {
+    return;
+  }
+  if (state.onPick) {
+    state.onPick(val);
+  }
+  state.minDate = minDate;
+  state.maxDate = maxDate;
+  setTimeout(() => {
+    state.minDate = minDate;
+    state.maxDate = maxDate;
+  }, 10);
+  if (!close) {
+    return;
+  }
+  api.handleConfirm();
+};
+const handleShortcutClick = (api) => (shortcutEvent) => {
+  if (shortcutEvent.onClick) {
+    const choose = {
+      $emit: (type, [start, end]) => {
+        api.doPick(start, end);
+      }
+    };
+    shortcutEvent.onClick(choose);
+  }
+};
+const doPick = (emit) => (begin, end) => {
+  emit("pick", [begin, end], false);
+};
+const leftPrevYear = (state) => () => {
+  state.leftStartYear = state.leftStartYear - DATEPICKER.PanelYearNum * 2;
+};
+const rightNextYear = (state) => () => {
+  state.leftStartYear = state.leftStartYear + DATEPICKER.PanelYearNum * 2;
+};
+const handleConfirm = ({ api, emit, state }) => (show = false) => {
+  const { minDate, maxDate } = state;
+  api.isValidValue([minDate, maxDate]) && emit("pick", [new Date(minDate, 0, 2), new Date(maxDate, 0, 2)], show);
+};
+const isValidValue = (state) => (data) => {
+  return data && Array.isArray(data) && data[1] && data[0] && isDate(data[1]) && isDate(data[0]) && data[0] <= data[1] && (typeof state.disabledDate === "function" ? !state.disabledDate(data[1]) && !state.disabledDate(data[0]) : true);
+};
+const resetView = (state) => () => {
+  state.maxDate = state.value && isDate(state.value[0]) ? new Date(state.value[1]) : null;
+  state.minDate = state.value && isDate(state.value[0]) ? new Date(state.value[0]) : null;
+};
+export {
+  calcDefaultValue,
+  doPick,
+  handleChangeRange,
+  handleClear,
+  handleConfirm,
+  handleRangePick,
+  handleShortcutClick,
+  isValidValue,
+  leftPrevYear,
+  resetView,
+  rightNextYear,
+  watchDefaultValue,
+  watchValue
+};

package/year-range/vue.js

@@ -0,0 +1,88 @@
+import "../chunk-PKUHTIDK.js";
+import {
+  handleChangeRange,
+  resetView,
+  rightNextYear,
+  isValidValue,
+  handleConfirm,
+  leftPrevYear,
+  watchValue,
+  handleShortcutClick,
+  watchDefaultValue,
+  handleRangePick,
+  handleClear,
+  doPick
+} from "./index";
+import { DATEPICKER } from "../common";
+import { nextYear } from "../common/deps/date-util";
+const api = [
+  "state",
+  "rightNextYear",
+  "handleRangePick",
+  "handleShortcutClick",
+  "handleChangeRange",
+  "leftPrevYear"
+];
+const initState = ({ reactive, computed, api: api2, t }) => {
+  const state = reactive({
+    selectionMode: DATEPICKER.YearRange,
+    popperClass: "",
+    value: [],
+    defaultValue: null,
+    defaultTime: null,
+    minDate: "",
+    maxDate: "",
+    leftDate: /* @__PURE__ */ new Date(),
+    rightDate: nextYear(/* @__PURE__ */ new Date()),
+    rangeState: { startDate: null, endDate: null, selecting: false, row: null, column: null },
+    shortcuts: "",
+    visible: "",
+    disabledDate: "",
+    format: "",
+    arrowControl: false,
+    unlinkPanels: false,
+    leftStartYear: Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 10) * 10,
+    rightStartYear: computed(() => state.leftStartYear + DATEPICKER.PanelYearNum),
+    btnDisabled: computed(
+      () => !(state.minDate && state.maxDate && !state.selecting && api2.isValidValue([state.minDate, state.maxDate]))
+    ),
+    leftLabel: computed(
+      () => `${state.leftStartYear} ${t("ui.datepicker.year")} - ${state.leftStartYear + DATEPICKER.PanelYearNum - 1} ${t(
+        "ui.datepicker.year"
+      )}`
+    ),
+    rightLabel: computed(
+      () => `${state.rightStartYear} ${t("ui.datepicker.year")} - ${state.rightStartYear + DATEPICKER.PanelYearNum - 1} ${t(
+        "ui.datepicker.year"
+      )}`
+    )
+  });
+  return state;
+};
+const renderless = (props, { computed, reactive, watch }, { t, emit: $emit }) => {
+  const emit = props.emitter ? props.emitter.emit : $emit;
+  const api2 = {};
+  const state = initState({ reactive, computed, api: api2, t });
+  Object.assign(api2, {
+    state,
+    doPick: doPick(emit),
+    resetView: resetView(state),
+    watchValue: watchValue({ state }),
+    isValidValue: isValidValue(state),
+    leftPrevYear: leftPrevYear(state),
+    rightNextYear: rightNextYear(state),
+    handleClear: handleClear({ emit, state }),
+    handleChangeRange: handleChangeRange(state),
+    handleShortcutClick: handleShortcutClick(api2),
+    watchDefaultValue: watchDefaultValue({ state }),
+    handleConfirm: handleConfirm({ api: api2, emit, state }),
+    handleRangePick: handleRangePick({ api: api2, state, t })
+  });
+  watch(() => state.value, api2.watchValue);
+  watch(() => state.defaultValue, api2.watchDefaultValue);
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/year-table/index.js

@@ -1,34 +1,198 @@
 import "../chunk-PKUHTIDK.js";
-import { toDate } from "@opentiny/vue-renderless/common/date";
-import { hasClass } from "@opentiny/vue-renderless/common/deps/dom";
-import { range, nextDate, getDayCountOfYear } from "@opentiny/vue-renderless/common/deps/date-util";
-import { arrayFindIndex, coerceTruthyValueToArray } from "@opentiny/vue-renderless/date-table";
+import { toDate } from "../common/date";
+import { hasClass } from "../common/deps/dom";
+import { range, nextDate, getDayCountOfYear } from "../common/deps/date-util";
+import { arrayFindIndex, coerceTruthyValueToArray, arrayFind } from "../date-table";
+import { DATEPICKER } from "../common";
 const datesInYear = (year) => {
   const numOfDays = getDayCountOfYear(year);
   const firstDay = new Date(year, 0, 1);
   return range(numOfDays).map((n) => nextDate(firstDay, n));
 };
-const getCellStyle = ({ props }) => (year) => {
+const getCellStyle = ({ props }) => (cell) => {
+  const { defaultValue } = props;
+  const year = cell.text;
   const style = {};
   const today = /* @__PURE__ */ new Date();
   style.disabled = typeof props.disabledDate === "function" ? datesInYear(year).every(props.disabledDate) : false;
   const execDate = typeof props.value === "object" ? props.value : toDate(props.value);
   style.current = arrayFindIndex(coerceTruthyValueToArray(execDate), (date) => date.getFullYear() === year) >= 0;
   style.today = today.getFullYear() === year;
-  style.default = props.defaultValue && props.defaultValue.getFullYear() === year;
+  style.default = Array.isArray(defaultValue) ? defaultValue.some((v) => v && v.getFullYear() === year) : defaultValue && defaultValue.getFullYear() === year;
+  if (cell.inRange) {
+    style[DATEPICKER.InRange] = true;
+  }
+  if (cell.start) {
+    style[DATEPICKER.StartDate] = true;
+  }
+  if (cell.end) {
+    style[DATEPICKER.EndDate] = true;
+  }
   return style;
 };
-const handleYearTableClick = ({ emit }) => (event) => {
+const clearDate = (date) => {
+  return new Date(date.getFullYear(), date.getMonth());
+};
+const getMonthTimestamp = (time) => {
+  if (typeof time === "number" || typeof time === "string") {
+    return clearDate(new Date(time)).getTime();
+  }
+  if (time instanceof Date) {
+    return clearDate(time).getTime();
+  }
+  return NaN;
+};
+const getRows = ({ props, state, vm }) => () => {
+  const { tableRows } = state;
+  const { minDate, maxDate, disabledDate, startYear, selectionMode } = props;
+  const selectedDate = [];
+  const now = (/* @__PURE__ */ new Date()).getFullYear();
+  for (let i = 0; i < 3; i++) {
+    const row = tableRows[i];
+    for (let j = 0; j < 4; j++) {
+      let cell = row[j];
+      if (!cell) {
+        cell = {
+          type: DATEPICKER.Normal,
+          row: i,
+          column: j,
+          inRange: false,
+          start: false,
+          end: false
+        };
+      }
+      const year = startYear + (cell.row * 4 + cell.column);
+      const isToday = year === now;
+      cell.text = year;
+      cell.type = isToday ? DATEPICKER.Today : DATEPICKER.Normal;
+      cell.disabled = typeof disabledDate === "function" && disabledDate(new Date(year, 0, 1));
+      if (selectionMode === DATEPICKER.YearRange) {
+        const minYear = typeof minDate === "object" && minDate ? minDate.getFullYear() : minDate;
+        const maxYear = typeof maxDate === "object" && maxDate ? maxDate.getFullYear() : maxDate;
+        cell.start = minYear === year;
+        cell.end = maxYear === year;
+        cell.inRange = year > minYear && year < maxYear || [minYear, maxYear].includes(year);
+        cell.selected = arrayFind(
+          selectedDate,
+          (item) => (typeof item === "object" ? item.getFullYear() : item) === year
+        );
+      }
+      vm.$set(row, j, cell);
+    }
+  }
+  return tableRows;
+};
+const markRange = ({ props, state }) => (min, max) => {
+  const rows = state.rows;
+  const [minDate, maxDate] = [min, max].sort((a, b) => a && a < b ? -1 : 1);
+  const minYear = typeof minDate === "object" && minDate ? minDate.getFullYear() : minDate;
+  const maxYear = typeof maxDate === "object" && maxDate ? maxDate.getFullYear() : maxDate;
+  if (props.selectionMode === DATEPICKER.YearRange) {
+    for (let i = 0, len = rows.length; i < len; i++) {
+      const row = rows[i];
+      for (let j = 0, l = row.length; j < l; j++) {
+        const cell = row[j];
+        const year = cell.text;
+        cell.start = minYear && minYear === year;
+        cell.end = maxYear && maxYear === year;
+        cell.inRange = year > minYear && year < maxYear || cell.start || cell.end;
+        cell.selected = cell.inRange;
+      }
+    }
+  }
+};
+const watchDate = ({ api, props }) => (value, oldvalue) => {
+  if (value !== oldvalue) {
+    api.markRange(props.minDate, props.maxDate);
+  }
+};
+const handleYearTableClick = ({ emit, props }) => (event) => {
   const target = event.target;
+  const { selectionMode } = props;
   if (target.tagName === "A") {
-    if (hasClass(target.parentNode, "disabled")) {
+    if (hasClass(target.parentNode.parentNode, "disabled")) {
       return;
     }
-    const year = target.textContent || target.innerText;
-    emit("pick", Number(year));
+    const year = Number(target.textContent || target.innerText);
+    if (selectionMode === DATEPICKER.Years) {
+      const years = Array.isArray(props.value) ? props.value.map((v) => v.getFullYear()) : [];
+      const index = years.indexOf(year);
+      if (index === -1) {
+        years.push(year);
+      } else {
+        years.splice(index, 1);
+      }
+      emit("pick", years.slice());
+    } else if (selectionMode === DATEPICKER.YearRange) {
+      let { minDate, maxDate } = props;
+      if (props.rangeState.selecting) {
+        props.rangeState.selecting = false;
+        if (year < minDate) {
+          maxDate = minDate;
+          minDate = year;
+        } else {
+          maxDate = year;
+        }
+      } else {
+        props.rangeState.selecting = true;
+        minDate = year;
+        maxDate = null;
+      }
+      emit("pick", { minDate, maxDate });
+    } else {
+      emit("pick", year);
+    }
+  }
+};
+const getTarget = (evt) => {
+  let target = evt.target;
+  const tagName = target.tagName;
+  if (tagName === "A") {
+    target = target.parentNode.parentNode;
+  }
+  if (tagName === "DIV") {
+    target = target.parentNode;
+  }
+  if (tagName !== "TD") {
+    return;
+  }
+  return target;
+};
+const handleMouseMove = ({ emit, props, state }) => (event) => {
+  const { selectionMode, startYear, rangeState, minDate, maxDate } = props;
+  if (selectionMode !== DATEPICKER.YearRange || !rangeState.selecting) {
+    return;
+  }
+  const target = getTarget(event);
+  if (!target) {
+    return;
+  }
+  const row = target.parentNode.rowIndex;
+  const column = target.cellIndex;
+  if (state.rows[row][column].disabled || minDate === maxDate) {
+    return;
+  }
+  if (row !== state.lastRow || column !== state.lastColumn) {
+    state.lastColumn = column;
+    state.lastRow = row;
+    const year = startYear + row * 4 + column;
+    emit("changerange", {
+      minDate,
+      maxDate,
+      rangeState: {
+        selecting: true,
+        endDate: year
+      }
+    });
   }
 };
 export {
+  clearDate,
   getCellStyle,
-  handleYearTableClick
+  getMonthTimestamp,
+  getRows,
+  handleMouseMove,
+  handleYearTableClick,
+  markRange,
+  watchDate
 };

package/year-table/vue.js

@@ -1,16 +1,28 @@
 import "../chunk-PKUHTIDK.js";
-import { getCellStyle, handleYearTableClick } from "./index";
-const api = ["state", "handleYearTableClick", "getCellStyle"];
-const renderless = (props, { computed, reactive }, { emit }) => {
+import { getRows, getCellStyle, handleYearTableClick, watchDate, markRange, handleMouseMove } from "./index";
+const api = ["state", "handleYearTableClick", "getCellStyle", "handleMouseMove"];
+const renderless = (props, { computed, reactive, watch }, { emit, vm }) => {
   const api2 = {};
   const state = reactive({
-    startYear: computed(() => Math.floor(props.date.getFullYear() / 10) * 10)
+    tableRows: [[], [], []],
+    rows: computed(() => api2.getRows())
   });
   Object.assign(api2, {
     state,
     getCellStyle: getCellStyle({ props }),
-    handleYearTableClick: handleYearTableClick({ emit })
+    handleYearTableClick: handleYearTableClick({ emit, props, state }),
+    markRange: markRange({ props, state }),
+    watchDate: watchDate({ api: api2, props }),
+    getRows: getRows({ props, state, vm }),
+    handleMouseMove: handleMouseMove({ api: api2, emit, props, state })
   });
+  watch(
+    () => props.rangeState,
+    (value, oldValue) => value !== oldValue && api2.markRange(props.minDate, value.endDate),
+    { deep: true }
+  );
+  watch(() => props.minDate, api2.watchDate);
+  watch(() => props.maxDate, api2.watchDate);
   return api2;
 };
 export {