@opentiny/vue-renderless 3.9.3 → 3.10.1

package/action-sheet/vue.js

@@ -1,6 +1,29 @@
 import "../chunk-PKUHTIDK.js";
-import { setSheetStyle, initScrollMenu, visibleHandle, watchVisible, menuHandle, close, selectOption, confirm, actionSelectOption, hide } from "./index";
-const api = ["state", "setSheetStyle", "initScrollMenu", "visibleHandle", "watchVisible", "menuHandle", "close", "selectOption", "confirm", "actionSelectOption", "hide"];
+import {
+  setSheetStyle,
+  initScrollMenu,
+  visibleHandle,
+  watchVisible,
+  menuHandle,
+  close,
+  selectOption,
+  confirm,
+  actionSelectOption,
+  hide
+} from "./index";
+const api = [
+  "state",
+  "setSheetStyle",
+  "initScrollMenu",
+  "visibleHandle",
+  "watchVisible",
+  "menuHandle",
+  "close",
+  "selectOption",
+  "confirm",
+  "actionSelectOption",
+  "hide"
+];
 const renderless = (props, { reactive, watch }, { emit, nextTick, refs, vm }, { BScroll }) => {
   const api2 = {};
   const state = reactive({

package/anchor/index.js

@@ -40,10 +40,10 @@ const updateSkidPosition = ({ vm, state, emit }) => {
   const offsetTop = linkTitleClientTop - anchorClientTop;
   const offsetLeft = linkTitleClientLeft - anchorClientLeft;
   addClass(skidRef, "tiny-anchor-orbit-skid--active");
-  skidRef.style.top = `${offsetTop}px`;
+  skidRef.style.transform = `translateY(${offsetTop}px)`;
   skidRef.style.height = `${offsetHeight}px`;
   if (maskRef) {
-    maskRef.style.top = `${offsetTop}px`;
+    maskRef.style.transform = `translateY(${offsetTop}px)`;
     maskRef.style.height = `${offsetHeight}px`;
     maskRef.style.maxWidth = `${offsetWidth + offsetLeft}px`;
   }
@@ -83,7 +83,7 @@ const handleScroll = (state) => {
   state.scrollTimer = setTimeout(() => {
     state.isScroll = false;
     clearTimeout(state.scrollTimer);
-  }, 500);
+  }, 2e3);
 };
 const setChildOffsetTop = ({ state, props }) => {
   var _a;

package/anchor/vue.js

@@ -1,7 +1,7 @@
 import "../chunk-PKUHTIDK.js";
 import { mounted, updated, unmounted, getContainer, linkClick, onItersectionObserver } from "./index";
 const api = ["state", "getContainer", "linkClick", "onItersectionObserver"];
-const renderless = (props, { onMounted, onUnmounted, onUpdated, reactive }, { vm, emit }) => {
+const renderless = (props, { onMounted, onUnmounted, onUpdated, reactive, watch }, { vm, emit }) => {
   const api2 = {};
   const state = reactive({
     currentLink: "",
@@ -26,6 +26,12 @@ const renderless = (props, { onMounted, onUnmounted, onUpdated, reactive }, { vm
   onMounted(api2.mounted);
   onUpdated(api2.updated);
   onUnmounted(api2.unmounted);
+  watch(
+    () => props.links,
+    () => {
+      api2.mounted();
+    }
+  );
   return api2;
 };
 export {

package/area/index.js

@@ -9,7 +9,7 @@ const fetchDefaultData = ({ emit, fetchArea, nextTick, props, refs, state }) =>
     promise = props.fetchJcr();
   } else {
     if (typeof fetchArea !== "function") {
-      throw new TypeError("[TINY Error][Area] Prop fetchJcr is not configured");
+      throw new TypeError("[TINY Error][Area] Prop fetchJcr is mandatory when the framework service is not used");
     }
     promise = fetchArea({ label: "JCR", parent });
   }
@@ -30,7 +30,7 @@ const getRegion = ({ emit, fetchArea, nextTick, props, refs, state }) => (value)
     promise = props.fetchRegion();
   } else {
     if (typeof fetchArea !== "function") {
-      throw new TypeError("[TINY Error][Area] Prop fetchRegion is not configured");
+      throw new TypeError("[TINY Error][Area] Prop fetchRegion is mandatory when the framework service is not used");
     }
     promise = fetchArea({ label: "Region", parent: value });
   }
@@ -50,7 +50,7 @@ const getRep = ({ emit, fetchArea, nextTick, props, refs, state }) => (value) =>
     promise = props.fetchRep();
   } else {
     if (typeof fetchArea !== "function") {
-      throw new TypeError("[TINY Error][Area] Prop fetchRep is not configured");
+      throw new TypeError("[TINY Error][Area] Prop fetchRep is mandatory when the framework service is not used");
     }
     promise = fetchArea({ label: "Rep. Office", parent: value });
   }
@@ -69,7 +69,7 @@ const getOffice = ({ emit, fetchArea, nextTick, props, refs, state }) => (value)
     promise = props.fetchOffice();
   } else {
     if (typeof fetchArea !== "function") {
-      throw new TypeError("[TINY Error][Area] Prop fetchOffice is not configured");
+      throw new TypeError("[TINY Error][Area] Prop fetchOffice is mandatory when the framework service is not used");
     }
     promise = fetchArea({ label: "Office", parent: value });
   }

package/button/vue.js

@@ -4,11 +4,13 @@ const api = ["state", "handleClick"];
 const renderless = (props, { computed, onBeforeUnmount, reactive, watch, inject }, { emit, parent }) => {
   parent.tinyForm = parent.tinyForm || inject("form", null);
   const state = reactive({
-    timer: null,
+    timer: void 0,
     disabled: props.disabled,
     plain: computed(() => props.plain || (parent.buttonGroup || {}).plain),
     formDisabled: computed(() => (parent.tinyForm || {}).disabled),
-    buttonDisabled: computed(() => props.disabled || state.disabled || (parent.buttonGroup || {}).disabled || state.formDisabled)
+    buttonDisabled: computed(
+      () => props.disabled || state.disabled || (parent.buttonGroup || {}).disabled || state.formDisabled
+    )
   });
   watch(
     () => props.disabled,

package/button-group/index.js

@@ -5,7 +5,7 @@ const handleChange = ({ emit, state }) => () => {
   }
 };
 const handleClick = ({ emit, props, state }) => (node) => {
-  if (!state.disabled) {
+  if (!state.disabled && !node.disabled) {
     state.value = node[props.valueField];
     emit("update:modelValue", state.value);
   }
@@ -19,7 +19,14 @@ const moreNodeClick = ({ emit, props, state }) => (node) => {
     emit("update:modelValue", state.value);
   }
 };
+const getItemClass = ({ props, state }) => (node) => {
+  if (state.disabled || node.disabled) {
+    return { disabled: true };
+  }
+  return props.plain ? { plain: props.plain } : "";
+};
 export {
+  getItemClass,
   handleChange,
   handleClick,
   moreNodeClick

package/button-group/vue.js

@@ -1,6 +1,6 @@
 import "../chunk-PKUHTIDK.js";
-import { handleClick, moreNodeClick, handleChange } from "./index";
-const api = ["state", "handleClick", "moreNodeClick", "handleChange"];
+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);
@@ -9,13 +9,7 @@ const renderless = (props, { computed, reactive, watch, inject }, { emit, parent
     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),
-    attributeValue: computed(() => {
-      if (state.disabled) {
-        return { disabled: state.disabled };
-      }
-      return props.plain ? { plain: props.plain } : "";
-    })
+    disabled: computed(() => props.disabled || state.formDisabled)
   });
   watch(
     () => props.modelValue,
@@ -34,7 +28,8 @@ const renderless = (props, { computed, reactive, watch, inject }, { emit, parent
     state,
     handleClick: handleClick({ emit, props, state }),
     moreNodeClick: moreNodeClick({ emit, props, state }),
-    handleChange: handleChange({ emit, state })
+    handleChange: handleChange({ emit, state }),
+    getItemClass: getItemClass({ props, state })
   };
   return api2;
 };

package/calendar/index.js

@@ -2,7 +2,7 @@ import "../chunk-PKUHTIDK.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 getWeek = (year, month, day) => new Date(`${year}/${month}/${day}`).getDay();
 const lastMonth = (year, month) => {
   year = Number(year);
   month = Number(month);
@@ -133,7 +133,7 @@ const selectDay = (state) => (day) => {
       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}`));
+    state.selectedDate = Number(new Date(`${state.activeYear}/${state.activeMonth}/${day.value}`));
   }
 };
 const getEventByDay = (state) => (day) => {
@@ -162,9 +162,9 @@ const getEventByMonth = ({ props, state }) => (month) => {
   }
   return events;
 };
-const getTime = (state) => (day) => Number(/* @__PURE__ */ new Date(`${state.activeYear}/${state.activeMonth}/${day}`));
+const getTime = (state) => (day) => Number(new Date(`${state.activeYear}/${state.activeMonth}/${day}`));
 const getYearList = () => () => {
-  const date = /* @__PURE__ */ new Date();
+  const date = new Date();
   const year = date.getFullYear();
   const yesrs = [];
   for (let i = year - 10; i < year + 10; i++) {
@@ -173,7 +173,7 @@ const getYearList = () => () => {
   return yesrs;
 };
 const isToday = (state) => (day) => {
-  const date = /* @__PURE__ */ new Date();
+  const date = new Date();
   let year = Number(state.activeYear);
   let month = Number(state.activeMonth);
   if (day.isLast) {
@@ -189,7 +189,7 @@ const isToday = (state) => (day) => {
   return date.getDate() === day.value && date.getFullYear() === year && date.getMonth() + 1 === month;
 };
 const isThisMonth = (state) => (month) => {
-  const date = /* @__PURE__ */ new Date();
+  const date = new Date();
   const year = Number(state.activeYear);
   return date.getMonth() + 1 === month && date.getFullYear() === year;
 };
@@ -205,19 +205,19 @@ const genMonths = () => {
   return result;
 };
 const toToday = (state) => () => {
-  const year = (/* @__PURE__ */ new Date()).getFullYear();
-  const month = (/* @__PURE__ */ new Date()).getMonth() + 1;
-  const day = (/* @__PURE__ */ new Date()).getDate();
+  const year = new Date().getFullYear();
+  const month = new Date().getMonth() + 1;
+  const day = 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}`));
+  state.selectedDate = Number(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}`));
+  const day = new Date().getDate();
+  const month = new Date().getMonth() + 1;
+  const year = new Date().getFullYear();
+  return Number(new Date(`${year}/${month}/${day}`));
 };
 export {
   computedCalendar,

package/calendar-bar/index.js

@@ -11,12 +11,12 @@ const normalConfig = (config, state) => {
   return { weekFirst, disabled, holiday, workday, mark };
 };
 const normalDate = (date) => {
-  date = !date ? /* @__PURE__ */ new Date() : !(date instanceof Date) ? new Date(date) : date;
-  date = date.toString() === "Invalid Date" ? /* @__PURE__ */ new Date() : date;
+  date = !date ? new Date() : !(date instanceof Date) ? new Date(date) : date;
+  date = date.toString() === "Invalid Date" ? new Date() : date;
   return date;
 };
 const splitDate = (date) => {
-  const today = /* @__PURE__ */ new Date();
+  const today = new Date();
   const todayFullYear = today.getFullYear();
   const todayMonth = today.getMonth() + 1;
   const todayDate = today.getDate();

package/carousel-item/index.js

@@ -28,7 +28,7 @@ const translateItem = ({ api, CARD_SCALE, parent, state }) => ({ activeIndex, in
   if (vnode.type !== TYPE_CARD && oldIndex !== void 0) {
     state.animating = index === activeIndex || index === oldIndex;
   }
-  state.animatingMf = [activeIndex, oldIndex].indexOf(index) < 0;
+  state.animatingMf = ![activeIndex, oldIndex].includes(index);
   if (index !== activeIndex && length > 2 && vnode.loop) {
     index = api.processIndex({ index, activeIndex, length });
   }

package/cascader/vue.js

@@ -78,7 +78,7 @@ const initState = ({ reactive, props, computed, parent, api: api2, t, constants,
     disabled: computed(() => props.disabled || state.isDisplayOnly || state.formDisabled),
     tagSize: computed(() => ~["small", "mini"].indexOf(state.realSize) ? "mini" : "small"),
     isDisabled: computed(() => state.disabled),
-    isDisplayOnly: computed(() => state.displayOnly || (parent.auiForm || {}).displayOnly),
+    isDisplayOnly: computed(() => state.displayOnly || (parent.tinyForm || {}).displayOnly),
     config: computed(() => api2.getConfig()),
     multiple: computed(() => state.config.multiple),
     leafOnly: computed(() => !state.config.checkStrictly),

package/cascader-mobile/index.js

@@ -0,0 +1,299 @@
+import "../chunk-PKUHTIDK.js";
+import TreeStore from "../common/deps/tree-model/tree-store";
+const close = ({ state, emit }) => () => {
+  state.search.show = false;
+  emit("update:visible", false);
+  emit("close", false);
+};
+const syncCheckStatus = ({ state, props, api }) => (value) => {
+  const { valueField, textField, modelValue: propsModelValue, visible } = props;
+  const { lazy, isLeaf: leafField } = api.getNodeConfig();
+  let currentData, navList = [], modelValue = value || propsModelValue || [], len = modelValue.length, isLeaf;
+  if (!visible) {
+    return;
+  }
+  for (let i = 0; i < len; i++) {
+    const id = modelValue[i];
+    currentData = state.store.getNode(id);
+    if (currentData) {
+      navList.push(currentData);
+    } else {
+      isLeaf = i === len - 1;
+      navList.push({
+        data: { [valueField]: id, [textField]: id, [leafField]: isLeaf },
+        loaded: false,
+        isLeaf,
+        childNodes: [],
+        level: i,
+        loading: false,
+        selfWaitLoad: true
+      });
+    }
+  }
+  state.isLeaf = !hasChildren(navList[len - 1]);
+  state.navList = navList;
+  state.level = lazy && state.waitLoadList.length ? 0 : Math.max(len - 1, 0);
+};
+const watchVisible = ({ emit, state, props, api }) => (visible) => {
+  const { modelValue } = props;
+  if (visible) {
+    api.watchModelValue(modelValue);
+    api.initTreeStore();
+  }
+  setTimeout(() => {
+    state.toggle = visible;
+  }, 0);
+  emit("update:visible", visible);
+};
+const watchModelValue = ({ props, state, emit }) => () => {
+  const { textSplit } = props;
+  emit("update:text", state.checkLabels.join(textSplit));
+};
+const hasChildren = (option) => option && !option.isLeaf;
+const selectOption = ({ emit, state, props, api }) => (option) => {
+  const { valueField } = props;
+  const { lazy, load } = api.getNodeConfig();
+  const { navList, level, waitLoadList } = state;
+  const len = navList.length;
+  const appendNavList = () => {
+    const isSame = level < len && navList[level] === option;
+    if (!isSame) {
+      state.navList = [...navList.slice(0, level), option];
+    }
+    if (hasChildren(option)) {
+      state.level += 1;
+    }
+    state.isLeaf = !hasChildren(state.navList[state.navList.length - 1]);
+    emit("node-expand", option);
+  };
+  if (lazy && load && (option.selfWaitLoad || !option.loaded && !option.isLeaf)) {
+    option.loading = true;
+    state.loading = true;
+    load(option, (nodes) => {
+      let index, node;
+      option.loading = false;
+      state.loading = false;
+      option.loaded = true;
+      nodes.map((data) => {
+        state.store.append(data, option.data);
+        index = waitLoadList.indexOf(data[valueField]);
+        if (index !== -1) {
+          node = state.store.getNode(data);
+          state.navList = state.navList.map((option2) => {
+            if (node && option2.data[valueField] === data[valueField]) {
+              option2 = node;
+            }
+            return option2;
+          });
+        }
+      });
+      appendNavList();
+    });
+  } else {
+    appendNavList();
+  }
+  emit("click", option);
+};
+const confirm = ({ emit, state, api }) => () => {
+  if (state.search.show) {
+    api.searchBoxToggle(false);
+  } else {
+    emit("confirm", state);
+    emit("update:visible", false);
+    emit("update:modelValue", state.checkIds);
+  }
+};
+const loopSearchOption = ({
+  options,
+  input,
+  childrenField,
+  valueField,
+  textField,
+  prefixValue,
+  prefixText,
+  textSplit = "/"
+}) => {
+  const list = [];
+  options.forEach((item) => {
+    const text = item[textField];
+    const textNavStr = prefixText ? prefixText + textSplit + text : text;
+    const value = [...prefixValue, item[valueField]];
+    const children = item[childrenField];
+    if (text.includes(input)) {
+      list.push({
+        [valueField]: value,
+        [textField]: textNavStr
+      });
+    }
+    if (children && children.length) {
+      const arr = loopSearchOption({
+        options: children,
+        input,
+        childrenField,
+        valueField,
+        textField,
+        prefixValue: value,
+        prefixText: textNavStr,
+        textSplit
+      });
+      list.push(...arr);
+    }
+  });
+  return list;
+};
+const searchMethod = ({ state, props, api }) => () => {
+  const { searchConfig, valueField, textField } = props;
+  const { children: childrenField } = api.getNodeConfig();
+  const { input, options } = state.search;
+  let list = [];
+  if (searchConfig && searchConfig.searchMethod) {
+    list = searchConfig.searchMethod({ input, options, state }) || [];
+  } else if (input) {
+    list = loopSearchOption({
+      options,
+      input,
+      childrenField,
+      valueField,
+      textField,
+      prefixValue: [],
+      prefixText: ""
+    });
+  }
+  if (typeof list.then === "function") {
+    list.then((data) => state.search.filterOptions = data);
+  } else {
+    state.search.filterOptions = list;
+  }
+};
+const searchBoxToggle = ({ state, props, api }) => (bool) => {
+  const { searchConfig = {} } = props;
+  const { lazy } = api.getNodeConfig();
+  state.search.show = bool;
+  state.search.input = "";
+  if (bool) {
+    state.search.options = !lazy && searchConfig.options && searchConfig.options.length ? searchConfig.options : state.store.getAllData();
+    api.searchMethod();
+  }
+};
+const searchSelectHandler = ({ emit, api, props }) => (option) => {
+  const { valueField } = props;
+  api.searchBoxToggle(false);
+  api.syncCheckStatus(option[valueField]);
+  emit("search-click", option);
+};
+const isSelected = ({ state }) => (option) => {
+  const { navList } = state;
+  return navList.includes(option);
+};
+const setLevel = ({ state, api }) => (level, option) => {
+  if (!api.disabledNavOption(level, option)) {
+    state.level = level;
+  }
+};
+const created = ({ api }) => () => {
+  api.initTreeStore();
+};
+const loadData = ({ props, state }) => (data) => {
+  const { visible } = props;
+  if (!visible) {
+    return;
+  }
+  state.store.setData(data);
+};
+const renderSearchOption = ({ state }) => (text) => {
+  return (text || "").split(state.search.input);
+};
+const computedNavListHandler = ({ state, props }) => () => {
+  const { textField, placeholder } = props;
+  const { isLeaf, navList } = state;
+  const placeholderArr = [];
+  const len = navList.length;
+  if (!Array.isArray(placeholder)) {
+    placeholderArr.push({ data: { [textField]: placeholder }, selfWaitLoad: true });
+  } else if (len < placeholder.length) {
+    for (let i = len; i < placeholder.length; i++) {
+      placeholderArr.push({ data: { [textField]: placeholder[i] }, selfWaitLoad: true });
+    }
+  }
+  return isLeaf && len ? state.navList : [...state.navList, ...placeholderArr];
+};
+const disabledNavOption = ({ state }) => (level, option) => {
+  const node = state.navList[level - 1];
+  return option.selfWaitLoad && (!node || !node.childNodes.length);
+};
+const getNodeConfig = ({ constants, props }) => () => {
+  const { nodeConfig, valueField } = props;
+  return Object.assign({ nodeKey: valueField }, constants.defaultNodeConfig, nodeConfig);
+};
+const initTreeStore = ({ props, state, api }) => () => {
+  const { data, textField, visible } = props;
+  const {
+    nodeKey,
+    lazy,
+    load,
+    afterLoad,
+    children,
+    isLeaf,
+    checkStrictly,
+    currentNodeKey,
+    checkDescendants,
+    defaultCheckedKeys,
+    defaultExpandedKeys,
+    autoExpandParent,
+    defaultExpandAll,
+    filterNodeMethod
+  } = api.getNodeConfig();
+  if (!visible || state.store) {
+    api.syncCheckStatus();
+    return;
+  }
+  state.store = new TreeStore({
+    key: nodeKey,
+    data,
+    lazy,
+    props: {
+      children,
+      label: textField,
+      isLeaf
+    },
+    load,
+    afterLoad: () => {
+      state.rootData = state.root.childNodes || [];
+      api.syncCheckStatus();
+      afterLoad && afterLoad();
+    },
+    currentNodeKey,
+    checkStrictly,
+    checkDescendants,
+    defaultCheckedKeys,
+    defaultExpandedKeys,
+    autoExpandParent,
+    defaultExpandAll,
+    filterNodeMethod
+  });
+  state.root = state.store.root;
+  if (!lazy) {
+    state.rootData = state.root.childNodes || [];
+    api.syncCheckStatus();
+  }
+};
+export {
+  close,
+  computedNavListHandler,
+  confirm,
+  created,
+  disabledNavOption,
+  getNodeConfig,
+  initTreeStore,
+  isSelected,
+  loadData,
+  renderSearchOption,
+  searchBoxToggle,
+  searchMethod,
+  searchSelectHandler,
+  selectOption,
+  setLevel,
+  syncCheckStatus,
+  watchModelValue,
+  watchVisible
+};