@opentinyvue/vue-renderless 3.21.0

package/button/index.js

@@ -0,0 +1,27 @@
+import "../chunk-G2ADBYYC.js";
+import { xss } from "@opentiny/utils";
+const handleClick = ({ emit, props, state, designConfig }) => (event) => {
+  var _a, _b;
+  const urlHref = xss.filterUrl(props.href);
+  const DEFAULT_RESETTIME = 1e3;
+  let resetTime = DEFAULT_RESETTIME;
+  if (props.resetTime !== DEFAULT_RESETTIME) {
+    resetTime = props.resetTime;
+  } else {
+    resetTime = (_b = (_a = designConfig == null ? void 0 : designConfig.props) == null ? void 0 : _a.resetTime) != null ? _b : props.resetTime;
+  }
+  if (urlHref) {
+    location.href = urlHref;
+  } else if (props.nativeType === "button" && resetTime > 0) {
+    state.disabled = true;
+    state.timer = window.setTimeout(() => {
+      state.disabled = false;
+    }, resetTime);
+  }
+  emit("click", event);
+};
+const clearTimer = (state) => () => clearTimeout(state.timer);
+export {
+  clearTimer,
+  handleClick
+};

package/button/vue.js

@@ -0,0 +1,37 @@
+import "../chunk-G2ADBYYC.js";
+import { handleClick, clearTimer } from "./index";
+const api = ["state", "handleClick"];
+const renderless = (props, { computed, onBeforeUnmount, reactive, watch, inject }, { emit, parent, designConfig }) => {
+  parent.tinyForm = parent.tinyForm || inject("form", null);
+  const state = reactive({
+    timer: 0,
+    disabled: props.disabled,
+    plain: computed(() => props.plain || (parent.buttonGroup || {}).plain),
+    round: computed(() => {
+      var _a, _b, _c;
+      return (_c = (_b = props.round) != null ? _b : (_a = designConfig == null ? void 0 : designConfig.props) == null ? void 0 : _a.round) != null ? _c : false;
+    }),
+    formDisabled: computed(() => (parent.tinyForm || {}).disabled),
+    buttonDisabled: computed(
+      () => props.disabled || state.disabled || (parent.buttonGroup || {}).disabled || state.formDisabled
+    )
+  });
+  watch(
+    () => props.disabled,
+    (value) => {
+      state.disabled = value;
+    },
+    { immediate: true }
+  );
+  const api2 = {
+    state,
+    clearTimer: clearTimer(state),
+    handleClick: handleClick({ emit, props, state, designConfig })
+  };
+  onBeforeUnmount(api2.clearTimer);
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/button-group/index.js

@@ -0,0 +1,38 @@
+import "../chunk-G2ADBYYC.js";
+const handleChange = ({ emit, state }) => () => {
+  if (!state.disabled) {
+    emit("change", state.value);
+  }
+};
+const handleClick = ({ emit, props, state }) => (node) => {
+  if (!state.disabled && !node.disabled && state.value !== node[props.valueField]) {
+    state.value = node[props.valueField];
+    emit("update:modelValue", state.value);
+  }
+};
+const moreNodeClick = ({ emit, props, state }) => (node) => {
+  if (!state.disabled) {
+    const index = state.moreData.indexOf(node);
+    state.moreData.splice(index, 1, state.buttonData[state.buttonData.length - 1]);
+    state.buttonData.splice(state.buttonData.length - 1, 1, node);
+    state.value = node[props.valueField];
+    emit("update:modelValue", state.value);
+  }
+};
+const getItemClass = ({ props, state }) => (node) => {
+  if (state.disabled || node.disabled) {
+    return { disabled: true };
+  }
+  return props.plain ? {
+    plain: props.plain,
+    medium: props.size === "medium",
+    small: props.size === "small",
+    mini: props.size === "mini"
+  } : {};
+};
+export {
+  getItemClass,
+  handleChange,
+  handleClick,
+  moreNodeClick
+};

package/button-group/vue.js

@@ -0,0 +1,39 @@
+import "../chunk-G2ADBYYC.js";
+import { handleClick, moreNodeClick, handleChange, getItemClass } from "./index";
+const api = ["state", "handleClick", "moreNodeClick", "handleChange", "getItemClass"];
+const renderless = (props, { computed, reactive, watch, inject }, { emit, parent }) => {
+  var _a, _b;
+  parent.tinyForm = parent.tinyForm || inject("form", null);
+  const state = reactive({
+    value: props.modelValue,
+    buttonData: ((_a = props.data) == null ? void 0 : _a.slice(0, props.showMore)) || [],
+    moreData: ((_b = props.data) == null ? void 0 : _b.slice(props.showMore, props.data.length)) || [],
+    formDisabled: computed(() => (parent.tinyForm || {}).disabled),
+    disabled: computed(() => props.disabled || state.formDisabled)
+  });
+  watch(
+    () => props.modelValue,
+    (value) => {
+      if (!state.disabled && state.value !== value) {
+        state.value = value;
+      }
+    },
+    { immediate: true }
+  );
+  watch(
+    () => state.value,
+    () => api2.handleChange()
+  );
+  const api2 = {
+    state,
+    handleClick: handleClick({ emit, props, state }),
+    moreNodeClick: moreNodeClick({ emit, props, state }),
+    handleChange: handleChange({ emit, state }),
+    getItemClass: getItemClass({ props, state })
+  };
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/calendar/index.js

@@ -0,0 +1,160 @@
+import "../chunk-G2ADBYYC.js";
+import { copyArray } from "../common/object";
+import { lastMonth, nextMonth, getCalendar, transformArray, parseDate } from "../common/calendar/calendar";
+const computedCalendar = ({ state }) => () => {
+  const calendar = getCalendar(state.activeYear, state.activeMonth);
+  const result = [];
+  if (calendar) {
+    const { last, current, next } = calendar;
+    if (last && calendar.last.end >= calendar.last.start) {
+      for (let i = last.start; i <= last.end; i++) {
+        result.push({ value: i, isLast: true });
+      }
+    }
+    if (current) {
+      for (let i = current.start; i <= current.end; i++) {
+        result.push({ value: i });
+      }
+    }
+    if (next.end >= next.start) {
+      for (let i = next.start; i <= next.end; i++) {
+        result.push({ value: i, isNext: true });
+      }
+    }
+  }
+  return transformArray(result);
+};
+const computedEventList = ({ props, state }) => () => {
+  let result = [];
+  if (props.events && props.events.length) {
+    result = props.events.filter((item) => {
+      const { year, month } = parseDate(item.time);
+      return Number(state.activeYear) === year && Number(state.activeMonth) === month;
+    });
+  }
+  return result;
+};
+const toggeModel = (state) => (mode) => {
+  const isYearOrMonth = /^(year|month)$/.test(mode);
+  state.displayMode = isYearOrMonth ? mode : state.displayMode === "year" ? "month" : "year";
+};
+const selectMonth = (state) => (month) => {
+  if (month && typeof month === "number" && month <= 12) {
+    state.activeMonth = month;
+  }
+};
+const selectDay = (state) => (day) => {
+  if (day && day.value) {
+    if (day.isLast) {
+      const { year, month } = lastMonth(state.activeYear, state.activeMonth);
+      state.activeMonth = month;
+      state.activeYear = year;
+    }
+    if (day.isNext) {
+      const { year, month } = nextMonth(state.activeYear, state.activeMonth);
+      state.activeMonth = month;
+      state.activeYear = year;
+    }
+    state.selectedTip = `You selected date: ${state.activeYear}-${state.activeMonth}-${day.value}`;
+    state.selectedDate = Number(/* @__PURE__ */ new Date(`${state.activeYear}/${state.activeMonth}/${day.value}`));
+  }
+};
+const getEventByDay = (state) => (day) => {
+  let events = [];
+  if (state.eventList && state.eventList.length) {
+    events = copyArray(state.eventList).filter(({ time }) => {
+      const date = new Date(time);
+      return date.getDate() === day && date.getFullYear() === Number(state.activeYear) && date.getMonth() + 1 === Number(state.activeMonth);
+    }).map((event) => {
+      event.parseTime = parseDate(event.time);
+      return event;
+    });
+  }
+  return events;
+};
+const getEventByMonth = ({ props, state }) => (month) => {
+  let events = [];
+  if (props.events) {
+    events = copyArray(props.events).filter(({ time }) => {
+      const date = new Date(time);
+      return date.getFullYear() === Number(state.activeYear) && date.getMonth() + 1 === month;
+    }).map((event) => {
+      event.parseTime = parseDate(event.time);
+      return event;
+    });
+  }
+  return events;
+};
+const getTime = (state) => (day) => Number(/* @__PURE__ */ new Date(`${state.activeYear}/${state.activeMonth}/${day}`));
+const getYearList = () => () => {
+  const date = /* @__PURE__ */ new Date();
+  const year = date.getFullYear();
+  const yesrs = [];
+  for (let i = year - 10; i < year + 10; i++) {
+    yesrs.push(i);
+  }
+  return yesrs;
+};
+const isToday = (state) => (day) => {
+  const date = /* @__PURE__ */ new Date();
+  let year = Number(state.activeYear);
+  let month = Number(state.activeMonth);
+  if (day.isLast) {
+    const lastDate = lastMonth(state.activeYear, state.activeMonth);
+    year = lastDate.year;
+    month = lastDate.month;
+  }
+  if (day.isNext) {
+    const nextDate = nextMonth(state.activeYear, state.activeMonth);
+    year = nextDate.year;
+    month = nextDate.month;
+  }
+  return date.getDate() === day.value && date.getFullYear() === year && date.getMonth() + 1 === month;
+};
+const isThisMonth = (state) => (month) => {
+  const date = /* @__PURE__ */ new Date();
+  const year = Number(state.activeYear);
+  return date.getMonth() + 1 === month && date.getFullYear() === year;
+};
+const genMonths = () => {
+  const result = [];
+  let index = 1;
+  for (let i = 0; i < 3; i++) {
+    result[i] = [];
+    for (let j = 0; j < 4; j++) {
+      result[i][j] = index++;
+    }
+  }
+  return result;
+};
+const toToday = (state) => () => {
+  const year = (/* @__PURE__ */ new Date()).getFullYear();
+  const month = (/* @__PURE__ */ new Date()).getMonth() + 1;
+  const day = (/* @__PURE__ */ new Date()).getDate();
+  state.activeMonth = month;
+  state.activeYear = year;
+  state.selectedTip = `You selected date: ${year}-${month}-${day}`;
+  state.selectedDate = Number(/* @__PURE__ */ new Date(`${year}/${month}/${day}`));
+};
+const getCurrentDate = () => {
+  const day = (/* @__PURE__ */ new Date()).getDate();
+  const month = (/* @__PURE__ */ new Date()).getMonth() + 1;
+  const year = (/* @__PURE__ */ new Date()).getFullYear();
+  return Number(/* @__PURE__ */ new Date(`${year}/${month}/${day}`));
+};
+export {
+  computedCalendar,
+  computedEventList,
+  genMonths,
+  getCurrentDate,
+  getEventByDay,
+  getEventByMonth,
+  getTime,
+  getYearList,
+  isThisMonth,
+  isToday,
+  selectDay,
+  selectMonth,
+  toToday,
+  toggeModel
+};

package/calendar/vue.js

@@ -0,0 +1,113 @@
+import "../chunk-G2ADBYYC.js";
+import {
+  computedCalendar,
+  computedEventList,
+  toggeModel,
+  selectMonth,
+  selectDay,
+  getEventByDay,
+  getEventByMonth,
+  getTime,
+  getYearList,
+  isToday,
+  isThisMonth,
+  genMonths,
+  toToday,
+  getCurrentDate
+} from "./index";
+const api = [
+  "state",
+  "renderProxy",
+  "isToday",
+  "isThisMonth",
+  "getEventByMonth",
+  "getEventByDay",
+  "selectDay",
+  "selectMonth",
+  "toggeModel",
+  "getTime",
+  "genMonths",
+  "toToday"
+];
+const initState = ({ reactive, props, computed, api: api2 }) => {
+  const state = reactive({
+    index: 0,
+    selectedTip: "",
+    selectedDate: getCurrentDate(),
+    showYear: false,
+    showMonth: false,
+    activeYear: props.year,
+    displayMode: props.mode,
+    activeMonth: props.month,
+    dropdownYear: computed(() => api2.getYearList()),
+    calendar: computed(() => api2.computedCalendar()),
+    eventList: computed(() => api2.computedEventList())
+  });
+  return state;
+};
+const initWatch = ({ watch, props, state, emit }) => {
+  watch(
+    () => props.year,
+    (value, oldValue) => {
+      if (value !== oldValue) {
+        state.activeYear = value;
+      }
+    },
+    { immediate: true }
+  );
+  watch(
+    () => props.month,
+    (value, oldValue) => {
+      if (value !== oldValue) {
+        state.activeMonth = value;
+      }
+    },
+    { immediate: true }
+  );
+  watch(
+    () => state.activeYear,
+    (value, oldValue) => {
+      if (value !== oldValue) {
+        emit("year-change", value, oldValue);
+        emit("update:modelValue", value, oldValue);
+      }
+    }
+  );
+  watch(
+    () => state.activeMonth,
+    (value, oldValue) => {
+      if (value !== oldValue) {
+        emit("month-change", value, oldValue);
+      }
+    }
+  );
+};
+const initApi = ({ api: api2, state, t, props }) => {
+  Object.assign(api2, {
+    state,
+    genMonths,
+    computedCalendar: computedCalendar({ state }),
+    computedEventList: computedEventList({ props, state }),
+    getTime: getTime(state),
+    isToday: isToday(state),
+    selectDay: selectDay(state),
+    getYearList: getYearList(t),
+    toggeModel: toggeModel(state),
+    selectMonth: selectMonth(state),
+    isThisMonth: isThisMonth(state),
+    getEventByDay: getEventByDay(state),
+    getEventByMonth: getEventByMonth({ props, state }),
+    toToday: toToday(state)
+  });
+};
+const renderless = (props, { computed, reactive, watch }, { t, emit }) => {
+  const api2 = {};
+  const state = initState({ reactive, props, computed, api: api2 });
+  initWatch({ watch, props, state, emit });
+  initApi({ api: api2, state, t, props });
+  return api2;
+};
+export {
+  api,
+  renderless
+};