@opentiny/vue-renderless 3.13.1 → 3.14.0

package/autocomplete/index.js

@@ -1,10 +1,16 @@
 import "../chunk-G2ADBYYC.js";
-const getData = ({ props, state, updatePopper, nextTick }) => (queryString) => {
+const getData = ({
+  props,
+  state,
+  updatePopper,
+  nextTick
+}) => (queryString) => {
+  var _a;
   if (state.suggestionDisabled) {
     return;
   }
   state.loading = true;
-  props.fetchSuggestions(queryString, (suggestions) => {
+  (_a = props == null ? void 0 : props.fetchSuggestions) == null ? void 0 : _a.call(props, queryString, (suggestions) => {
     state.loading = false;
     if (state.suggestionDisabled) {
       return;
@@ -18,7 +24,12 @@ const getData = ({ props, state, updatePopper, nextTick }) => (queryString) => {
     nextTick(updatePopper);
   });
 };
-const handleChange = ({ api, emit, state, props }) => (value) => {
+const handleChange = ({
+  api,
+  emit,
+  state,
+  props
+}) => (value) => {
   state.activated = true;
   emit("update:modelValue", value);
   state.suggestionDisabled = false;
@@ -29,10 +40,17 @@ const handleChange = ({ api, emit, state, props }) => (value) => {
   }
   api.debouncedGetData(value);
 };
-const handleFocus = ({ api, emit, props, state }) => (event) => {
+const handleFocus = ({
+  api,
+  emit,
+  props,
+  state
+}) => (event) => {
   state.activated = true;
   emit("focus", event);
   if (props.triggerOnFocus) {
+    state.suggestions = [];
+    state.highlightedIndex = -1;
     state.suggestionDisabled = false;
     api.debouncedGetData(props.modelValue);
   }
@@ -48,7 +66,16 @@ const handleClear = ({ emit, state }) => () => {
 const close = (state) => () => {
   state.activated = false;
 };
-const handleKeyEnter = ({ api, emit, nextTick, props, state }) => (event) => {
+const open = (api) => () => {
+  api.handleFocus();
+};
+const handleKeyEnter = ({
+  api,
+  emit,
+  nextTick,
+  props,
+  state
+}) => (event) => {
   if (state.suggestionVisible && state.highlightedIndex >= 0 && state.highlightedIndex < state.suggestions.length) {
     event.preventDefault();
     api.select(state.suggestions[state.highlightedIndex]);
@@ -60,7 +87,12 @@ const handleKeyEnter = ({ api, emit, nextTick, props, state }) => (event) => {
     });
   }
 };
-const select = ({ emit, nextTick, props, state }) => (item) => {
+const select = ({
+  emit,
+  nextTick,
+  props,
+  state
+}) => (item) => {
   emit("update:modelValue", item[props.valueKey]);
   emit("select", item);
   nextTick(() => {
@@ -69,7 +101,11 @@ const select = ({ emit, nextTick, props, state }) => (item) => {
     state.highlightedIndex = -1;
   });
 };
-const highlight = ({ constants, refs, state }) => (index) => {
+const highlight = ({
+  constants,
+  vm,
+  state
+}) => (index) => {
   if (!state.suggestionVisible || state.loading) {
     return;
   }
@@ -80,7 +116,7 @@ const highlight = ({ constants, refs, state }) => (index) => {
   if (index >= state.suggestions.length) {
     index = state.suggestions.length - 1;
   }
-  const suggestion = refs.popper.querySelector(constants.WARP_CLS);
+  const suggestion = vm.$refs.popper.querySelector(constants.WARP_CLS);
   const suggestionList = suggestion.querySelectorAll(constants.ITEM_CLS);
   let highlightItem = suggestionList[index];
   let scrollTop = suggestion.scrollTop;
@@ -92,7 +128,7 @@ const highlight = ({ constants, refs, state }) => (index) => {
     suggestion.scrollTop -= highlightItem.scrollHeight;
   }
   state.highlightedIndex = index;
-  let $input = refs.input.getInput();
+  let $input = vm.$refs.input.getInput();
   $input.setAttribute("aria-activedescendant", `${state.id}-item-${state.highlightedIndex}`);
 };
 const computedVisible = (state) => {
@@ -100,17 +136,24 @@ const computedVisible = (state) => {
   let isValidData = Array.isArray(suggestions) && suggestions.length > 0;
   return (isValidData || state.loading) && state.activated;
 };
-const watchVisible = ({ suggestionState, refs }) => (val) => {
-  let $input = refs.input.getInput();
+const watchVisible = ({
+  suggestionState,
+  vm
+}) => (val) => {
+  let $input = vm.$refs.input.getInput();
   if ($input) {
     suggestionState.dropdownWidth = $input.offsetWidth + "px";
     suggestionState.showPopper = val;
   }
 };
-const mounted = ({ refs, state, suggestionState }) => () => {
-  const input = refs.input;
+const mounted = ({
+  vm,
+  state,
+  suggestionState
+}) => () => {
+  const input = vm.$refs.input;
   const $input = input.getInput();
-  suggestionState.popperElm = refs.popper;
+  suggestionState.popperElm = state.popperElm = vm.$refs.popper;
   suggestionState.referenceElm = $input;
   $input.setAttribute("role", "textbox");
   $input.setAttribute("aria-autocomplete", "list");
@@ -128,6 +171,7 @@ export {
   handleKeyEnter,
   highlight,
   mounted,
+  open,
   select,
   watchVisible
 };

package/autocomplete/vue.js

@@ -12,6 +12,7 @@ import {
   handleBlur,
   handleClear,
   close,
+  open,
   handleKeyEnter,
   select,
   highlight
@@ -23,6 +24,7 @@ const api = [
   "getInput",
   "handleChange",
   "close",
+  "open",
   "handleFocus",
   "handleBlur",
   "handleClear",
@@ -31,8 +33,15 @@ const api = [
   "select",
   "doDestroy"
 ];
-const initState = ({ reactive, $prefix, computed }) => {
+const initState = ({
+  reactive,
+  $prefix,
+  computed,
+  inject
+}) => {
   const state = reactive({
+    showAutoWidth: inject("showAutoWidth", null),
+    popperElm: null,
     activated: false,
     suggestions: [],
     loading: false,
@@ -43,39 +52,57 @@ const initState = ({ reactive, $prefix, computed }) => {
   });
   return state;
 };
-const initSuggestionState = ({ reactive, parent, showPopper, popperElm, referenceElm }) => reactive({
+const initSuggestionState = ({
+  reactive,
   parent,
-  dropdownWidth: "",
   showPopper,
   popperElm,
   referenceElm
-});
-const initApi = ({ api: api2, state, doDestroy, suggestionState, emit, refs, props, updatePopper, nextTick, constants }) => {
+}) => {
+  return reactive({
+    parent,
+    dropdownWidth: "",
+    showPopper,
+    popperElm,
+    referenceElm
+  });
+};
+const initApi = ({ api: api2, state, doDestroy, suggestionState, emit, vm, props, updatePopper, nextTick, constants }) => {
   api2.getData = getData({ props, state, updatePopper, nextTick });
   Object.assign(api2, {
     state,
     doDestroy,
     suggestionState,
     close: close(state),
+    open: open(api2),
     handleBlur: handleBlur({ emit, state }),
-    mounted: mounted({ refs, state, suggestionState }),
-    highlight: highlight({ constants, refs, state }),
+    mounted: mounted({ vm, state, suggestionState }),
+    highlight: highlight({ constants, vm, state }),
     handleClear: handleClear({ emit, state }),
     select: select({ emit, nextTick, props, state }),
-    watchVisible: watchVisible({ suggestionState, refs }),
+    watchVisible: watchVisible({ suggestionState, vm }),
     handleChange: handleChange({ api: api2, emit, state, props }),
     handleFocus: handleFocus({ api: api2, emit, props, state }),
     handleKeyEnter: handleKeyEnter({ api: api2, emit, nextTick, props, state }),
     debouncedGetData: debounce(props.debounce, api2.getData)
   });
 };
-const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, watch, toRefs, onDeactivated }, { $prefix, refs, parent, emit, constants, nextTick, slots }) => {
+const renderless = (props, {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  watch,
+  toRefs,
+  onDeactivated,
+  inject
+}, { $prefix, vm, parent, emit, constants, nextTick, slots }) => {
   const api2 = {};
-  const state = initState({ reactive, $prefix, computed });
+  const state = initState({ reactive, $prefix, computed, inject });
   const { showPopper, popperElm, referenceElm, doDestroy, updatePopper } = userPopper({
     reactive,
     watch,
-    refs,
+    vm,
     emit,
     slots,
     nextTick,
@@ -85,12 +112,13 @@ const renderless = (props, { computed, onBeforeUnmount, onMounted, reactive, wat
     onDeactivated
   });
   const suggestionState = initSuggestionState({ reactive, parent, showPopper, popperElm, referenceElm });
-  initApi({ api: api2, state, doDestroy, suggestionState, emit, refs, props, updatePopper, nextTick, constants });
+  initApi({ api: api2, state, doDestroy, suggestionState, emit, vm, props, updatePopper, nextTick, constants });
   watch(() => state.suggestionVisible, api2.watchVisible);
   onMounted(api2.mounted);
   return api2;
 };
 export {
   api,
+  initSuggestionState,
   renderless
 };

package/badge/index.js

@@ -6,7 +6,19 @@ const computedValueRef = ({ props }) => () => {
   }
   return typeof props.modelValue === "number" ? props.modelValue : void 0;
 };
+const computedTransform = ({ designConfig, props }) => () => {
+  if ((designConfig == null ? void 0 : designConfig.transform) === "unset") {
+    return null;
+  }
+  return {
+    transform: `translate(
+        ${props.offset[0]}${typeof props.offset[0] === "number" ? "px" : ""},
+        ${props.offset[1]}${typeof props.offset[1] === "number" ? "px" : ""}
+      )`
+  };
+};
 export {
   computedContent,
+  computedTransform,
   computedValueRef
 };

package/badge/vue.js

@@ -1,18 +1,20 @@
 import "../chunk-G2ADBYYC.js";
-import { computedContent, computedValueRef } from "./index";
+import { computedContent, computedValueRef, computedTransform } from "./index";
 import { xss } from "../common/xss";
 const api = ["state"];
-const renderless = (props, { computed, reactive }) => {
+const renderless = (props, { computed, reactive }, { designConfig }) => {
   const state = reactive({
     isOverstep: false,
     valueRef: computed(() => api2.computedValueRef()),
     content: computed(() => api2.computedContent()),
-    href: computed(() => xss.filterUrl(props.href))
+    href: computed(() => xss.filterUrl(props.href)),
+    transform: computed(() => api2.computedTransform())
   });
   const api2 = {
     state,
     computedValueRef: computedValueRef({ props }),
-    computedContent: computedContent({ props, state })
+    computedContent: computedContent({ props, state }),
+    computedTransform: computedTransform({ props, designConfig })
   };
   return api2;
 };

package/breadcrumb/vue.js

@@ -1,15 +1,17 @@
 import "../chunk-G2ADBYYC.js";
 import { breadcrumbItemSelect } from "./index";
-const api = ["breadcrumbItemSelect"];
+const api = ["breadcrumbItemSelect", "state"];
 const renderless = (props, { reactive, provide }, { emit, constants, emitter }) => {
   const state = reactive({
     breadcrumbEmitter: emitter(),
+    size: props.size,
     currentBreadcrumbItem: {}
   });
   const api2 = {
     state,
     breadcrumbItemSelect: () => breadcrumbItemSelect({ api: api2, emit, state, constants })
   };
+  provide("size", state.size);
   provide("breadcrumbEmitter", state.breadcrumbEmitter);
   api2.breadcrumbItemSelect();
   return api2;

package/breadcrumb-item/vue.js

@@ -1,11 +1,15 @@
 import "../chunk-G2ADBYYC.js";
 import { linkClick } from "./index";
-const api = ["linkClick"];
-const renderless = (props, { inject }, { refs, router, emit }) => {
+const api = ["linkClick", "state"];
+const renderless = (props, { reactive, inject }, { refs, router, emit }) => {
   const breadcrumbEmitter = inject("breadcrumbEmitter");
   const breadcrumb = inject("breadcrumb");
   const constants = breadcrumb._constants;
+  const state = reactive({
+    size: inject("size", null)
+  });
   const api2 = {
+    state,
     linkClick: linkClick({ props, refs, router, emit, breadcrumbEmitter, constants })
   };
   return api2;

package/button/index.js

@@ -1,6 +1,10 @@
 import "../chunk-G2ADBYYC.js";
+import { xss } from "../common";
 const handleClick = ({ emit, props, state }) => (event) => {
-  if (props.nativeType === "button" && props.resetTime > 0) {
+  const urlHref = xss.filterUrl(props.href);
+  if (urlHref) {
+    location.href = urlHref;
+  } else if (props.nativeType === "button" && props.resetTime > 0) {
     state.disabled = true;
     state.timer = window.setTimeout(() => {
       state.disabled = false;

package/calendar/index.js

@@ -1,83 +1,6 @@
 import "../chunk-G2ADBYYC.js";
-import { isLeapYear } from "../common/date";
 import { copyArray } from "../common/object";
-const getDays = (year, month) => [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month - 1];
-const getWeek = (year, month, day) => (/* @__PURE__ */ new Date(`${year}/${month}/${day}`)).getDay();
-const lastMonth = (year, month) => {
-  year = Number(year);
-  month = Number(month);
-  if (month === 1) {
-    year--;
-    month = 12;
-  } else {
-    month--;
-  }
-  return { year, month };
-};
-const nextMonth = (year, month) => {
-  year = Number(year);
-  month = Number(month);
-  if (month === 12) {
-    year++;
-    month = 1;
-  } else {
-    month++;
-  }
-  return { year, month };
-};
-const getCalendar = (year, month) => {
-  if (year && month && month <= 12) {
-    const days = getDays(year, month);
-    const firstWeek = getWeek(year, month, 1);
-    const lastWeek = getWeek(year, month, days);
-    const last = lastMonth(year, month);
-    const lastDays = getDays(last.year, last.month);
-    let remainDays = 0;
-    const totalDays = days + firstWeek + 7 - lastWeek - 1;
-    if (totalDays / 7 < 6 && totalDays / 7 >= 5) {
-      remainDays = 6 * 7 - totalDays;
-    }
-    return {
-      last: {
-        start: lastDays - (firstWeek - 1),
-        end: lastDays
-      },
-      current: {
-        start: 1,
-        end: days
-      },
-      next: {
-        start: 1,
-        end: 7 - lastWeek - 1 + remainDays
-      }
-    };
-  }
-};
-const transformArray = (array) => {
-  const result = [];
-  let index = 0;
-  if (array && array.length) {
-    const length = array.length / 7;
-    for (let i = 0; i < length; i++) {
-      result[i] = [];
-      for (let j = 0; j < 7; j++) {
-        result[i][j] = array[index++];
-      }
-    }
-  }
-  return result;
-};
-const parseDate = (time) => {
-  const date = new Date(time && typeof time === "number" ? time : 0);
-  return {
-    year: date.getFullYear(),
-    month: date.getMonth() + 1,
-    day: date.getDate(),
-    hours: date.getHours(),
-    minutes: date.getMinutes(),
-    seconds: date.getSeconds()
-  };
-};
+import { lastMonth, nextMonth, getCalendar, transformArray, parseDate } from "../common/calendar/calendar";
 const computedCalendar = ({ state }) => () => {
   const calendar = getCalendar(state.activeYear, state.activeMonth);
   const result = [];
@@ -223,22 +146,15 @@ export {
   computedCalendar,
   computedEventList,
   genMonths,
-  getCalendar,
   getCurrentDate,
-  getDays,
   getEventByDay,
   getEventByMonth,
   getTime,
-  getWeek,
   getYearList,
   isThisMonth,
   isToday,
-  lastMonth,
-  nextMonth,
-  parseDate,
   selectDay,
   selectMonth,
   toToday,
-  toggeModel,
-  transformArray
+  toggeModel
 };

package/calendar-bar/index.js

@@ -192,7 +192,7 @@ const getWeekOfDate = ({ api }) => (type, date) => {
 };
 const showWeekChange = ({ state }) => (value) => {
   if (value) {
-    state.weekDates = state.calendarDays.filter((day) => day.row === state.activeRow);
+    getWeekDatesByActiveRow(state);
   } else {
     state.calendarDays.forEach((date) => {
       if (state.activeDate === date.dateStr) {
@@ -207,6 +207,13 @@ const formatDate = (date) => {
   const newDate = new Date(date);
   return newDate.getFullYear() + "-" + pad0(newDate.getMonth() + 1) + "-" + pad0(newDate.getDate());
 };
+const getWeekDatesByActiveRow = (state) => {
+  state.weekDates = state.calendarDays.filter((day) => day.row === state.activeRow);
+  if (!state.weekDates.length) {
+    state.activeRow = 0;
+    state.weekDates = state.calendarDays.filter((day) => day.row === state.activeRow);
+  }
+};
 const computedCurrentRow = (state) => () => {
   const { calendarDays } = state;
   if (Array.isArray(calendarDays) && calendarDays.length) {
@@ -249,10 +256,17 @@ const handleClickDay = ({ api, emit, props, state }) => (day) => {
       api.getCalendarDays(day.dateStr, props.config, "next");
     }
     const showCalendarDays = [...state.calendarDays, ...state.weekDates];
-    showCalendarDays.forEach((date) => date.isCur = day.dateStr === date.dateStr);
+    state.activeRow = day.row;
+    showCalendarDays.forEach((date) => {
+      if (day.dateStr === date.dateStr) {
+        date.isCur = true;
+        state.activeRow = date.row;
+      } else {
+        date.isCur = false;
+      }
+    });
     state.activeDate = day.dateStr;
     state.currentDate = day.dateArr[2];
-    state.activeRow = day.row;
     emit("update:modelValue", day.dateStr);
   }
 };
@@ -368,7 +382,7 @@ const handleCascaderChange = ({ api, emit, props, state }) => (val) => {
   api.getCalendarDays(dateStr, props.config, "last");
   api.getCalendarDays(dateStr, props.config, "next");
   emit("update:modelValue", dateStr);
-  state.weekDates = state.calendarDays.filter((day) => day.row === state.activeRow);
+  getWeekDatesByActiveRow(state);
 };
 const computeCascaderOptions = (t) => () => [
   {

package/calendar-view/index.js

@@ -60,7 +60,7 @@ const isSelectedDate = ({ state }) => (day) => {
 const getDayBgColor = ({ props }) => (day) => {
   const date = day.year + "-" + day.month + "-" + day.value;
   const isFunction = props.setDayBgColor instanceof Function;
-  const bgColor = isFunction ? props.setDayBgColor(date) : "";
+  const bgColor = isFunction ? props.setDayBgColor(date) : "white";
   return bgColor;
 };
 const parseDate = (time) => {
@@ -195,7 +195,9 @@ const selectDay = ({ state, emit }) => (day, i) => {
     } else {
       state.selectedDates.push(date);
     }
+    emit("update:modelValue", state.selectedDates);
     emit("selected-date-change", state.selectedDates);
+    emit("date-click", date);
   } else {
     if (day.isNext) {
       const { year, month } = nextMonth(state.activeYear, state.activeMonth);
@@ -209,6 +211,8 @@ const selectDay = ({ state, emit }) => (day, i) => {
     }
     state.selectedDate = day.value.toString().length > 2 ? day.value : `${state.activeYear}-${state.activeMonth}-${day.value}`;
     state.showSelectedDateEvents = true;
+    emit("update:modelValue", state.selectedDate);
+    emit("date-click", state.selectedDate);
   }
 };
 const getEventByMonth = ({ state }) => (year, month) => {

package/calendar-view/vue.js

@@ -135,6 +135,19 @@ const initState = ({ reactive, props, computed, api: api2, images, modesIcon })
   return state;
 };
 const initWatch = ({ watch, props, state, emit, api: api2, nextTick }) => {
+  watch(
+    () => props.modelValue,
+    (value) => {
+      if (value) {
+        if (props.multiSelect && Array.isArray(value)) {
+          state.selectedDates = value;
+        } else {
+          state.selectedDate = value;
+        }
+      }
+    },
+    { immediate: true, deep: true }
+  );
   watch(
     () => props.mode,
     () => {
@@ -151,9 +164,6 @@ const initWatch = ({ watch, props, state, emit, api: api2, nextTick }) => {
   watch(
     () => state.selectedDate,
     () => {
-      if (state.mode === "month") {
-        api2.getEventByDate(state.selectedDate, state.selectedDateEvents);
-      }
       emit("selected-date-change", state.selectedDate);
     },
     { deep: true }
@@ -184,6 +194,9 @@ const initWatch = ({ watch, props, state, emit, api: api2, nextTick }) => {
       });
     }
   );
+  addWatch({ watch, props, state, emit, api: api2 });
+};
+const addWatch = ({ watch, props, state, emit, api: api2 }) => {
   watch(
     () => props.month,
     (val, oldVal) => {

package/card-group/vue.js

@@ -1,8 +1,10 @@
 import "../chunk-G2ADBYYC.js";
 const api = ["state"];
-const renderless = (props, { reactive }, { vm }) => {
+const renderless = (props, { reactive, computed }, { vm }) => {
   const api2 = {};
-  const state = reactive({});
+  const state = reactive({
+    size: computed(() => props.size)
+  });
   Object.assign(api2, {
     state
   });