@opentiny/vue-renderless 3.13.1 → 3.14.0

package/tree/index.js

@@ -193,7 +193,7 @@ const afterLoadHandler = ({ state, emit, props, api }) => (params) => {
   }
 };
 const initTreeStore = ({ api, props, state, emit }) => () => {
-  const { nodeKey, data, lazy, load, afterLoad, currentNodeKey, checkStrictly, checkDescendants } = props;
+  const { nodeKey, data, lazy, load, currentNodeKey, checkStrictly, checkDescendants } = props;
   const { defaultCheckedKeys, defaultExpandedKeys, autoExpandParent, defaultExpandAll, filterNodeMethod } = props;
   state.store = new TreeStore({
     key: nodeKey,
@@ -213,7 +213,9 @@ const initTreeStore = ({ api, props, state, emit }) => () => {
   });
   state.root = state.store.root;
   api.initIsCurrent();
-  api.initPlainNodeStore();
+  if (props.willChangeView) {
+    api.initPlainNodeStore();
+  }
 };
 const created = ({ api, state }) => () => {
   state.isTree = true;
@@ -533,6 +535,10 @@ const saveNode = ({ state, emit, api }) => () => {
 };
 const addNode = ({ api }) => (node) => {
   const newNode = { label: "" };
+  const isLeafField = node.store && node.store.props.isLeaf;
+  if (isLeafField) {
+    newNode[isLeafField] = true;
+  }
   Object.defineProperty(newNode, "_isNewNode", {
     value: true,
     enumerable: false,
@@ -573,13 +579,22 @@ const deleteAction = ({ state, api, emit }) => () => {
   emit("delete-node", node);
   api.remove(state.action.node, isSaveChildNode, true);
 };
-const deleteConfirm = ({ state }) => (event2, node) => {
+const deleteConfirm = ({ state, props, api }) => (event2, node) => {
   state.action.type = "delete";
   state.action.node = node;
   state.action.isLeaf = !node.childNodes || !node.childNodes.length;
   state.action.referenceElm = event2.currentTarget;
   state.action.popoverVisible = false;
   state.action.isSaveChildNode = false;
+  if (typeof props.deleteNodeMethod === "function") {
+    const promise = props.deleteNodeMethod({ event: event2, node });
+    if (promise && typeof promise.then === "function") {
+      promise.then((bool) => bool && api.deleteAction());
+    } else if (promise) {
+      api.deleteAction();
+    }
+    return;
+  }
   setTimeout(() => {
     state.action.popoverVisible = true;
   }, 300);
@@ -650,7 +665,9 @@ const initPlainNodeStore = ({ props, state }) => () => {
   state.plainNodeStore = plainNodeStore;
 };
 const handleCheckPlainNode = ({ props, emit }) => (e, plainNode) => {
-  plainNode.node.setChecked(e, !props.checkStrictly);
+  if (props.showCheckbox) {
+    plainNode.node.setChecked(e, !props.checkStrictly);
+  }
   emit("check-plain", plainNode, e);
 };
 const handleClickPlainNode = (emit) => (e, plainNode) => {

package/tree/vue.js

@@ -119,7 +119,7 @@ const api = [
 ];
 const initState = ({ reactive, emitter, props, computed, api: api2 }) => {
   const state = reactive({
-    loaded: false,
+    loaded: !props.lazy,
     checkEasily: false,
     root: null,
     store: null,
@@ -164,7 +164,7 @@ const initState = ({ reactive, emitter, props, computed, api: api2 }) => {
   });
   return state;
 };
-const initApi = ({ state, dispatch, broadcast, props, vm, constants, t, emit, refs }) => ({
+const initApi = ({ state, dispatch, broadcast, props, vm, constants, t, emit }) => ({
   state,
   dispatch,
   broadcast,
@@ -208,11 +208,11 @@ const initApi = ({ state, dispatch, broadcast, props, vm, constants, t, emit, re
   initIsCurrent: debounce(20, initIsCurrent({ props, state })),
   setCheckedByNodeKey: setCheckedByNodeKey({ props, state })
 });
-const initWatcher = ({ watch, props, api: api2, state }) => {
+const initWatcher = ({ watch, props, api: api2, state, isVue2 }) => {
   watch(() => props.defaultCheckedKeys, api2.watchDefaultCheckedKeys);
   watch(() => props.defaultExpandedKeys, api2.watchDefaultExpandedKeys);
   watch(() => props.defaultExpandedKeysHighlight, api2.initIsCurrent);
-  watch(() => props.data, api2.watchData, { deep: true });
+  watch(() => props.data, api2.watchData, { deep: !isVue2 });
   watch(() => props.checkboxItems, api2.watchCheckboxItems);
   watch(() => props.checkStrictly, api2.watchCheckStrictly);
   watch(() => props.defaultCheckedKeys, api2.setCurrentRadio, { immediate: true });
@@ -231,9 +231,11 @@ const initWatcher = ({ watch, props, api: api2, state }) => {
     (value) => state.action.addDisabled = value || [],
     { immediate: true }
   );
-  watch(() => state.root, api2.initPlainNodeStore, { deep: true });
+  if (props.willChangeView) {
+    watch(() => state.root, api2.initPlainNodeStore, { deep: true });
+  }
 };
-const renderless = (props, { computed, onMounted, onUpdated, reactive, watch, provide, onBeforeUnmount }, { vm, t, emit, constants, broadcast, dispatch, service, emitter, nextTick }) => {
+const renderless = (props, { computed, onMounted, onUpdated, reactive, watch, provide, onBeforeUnmount }, { vm, t, emit, constants, broadcast, dispatch, service, emitter, nextTick }, { isVue2 }) => {
   const api2 = {};
   const state = initState({ reactive, emitter, props, computed, api: api2 });
   provide("parentEmitter", state.emitter);
@@ -247,7 +249,7 @@ const renderless = (props, { computed, onMounted, onUpdated, reactive, watch, pr
     wrapMounted: wrapMounted({ api: api2, props, service }),
     initTreeStore: initTreeStore({ api: api2, props, state, emit }),
     deleteAction: deleteAction({ state, api: api2, emit }),
-    deleteConfirm: deleteConfirm({ state }),
+    deleteConfirm: deleteConfirm({ state, props, api: api2 }),
     getSameDataIndex,
     loopGetTreeData,
     cancelDelete: cancelDelete({ state }),
@@ -267,7 +269,7 @@ const renderless = (props, { computed, onMounted, onUpdated, reactive, watch, pr
     handleClickPlainNode: handleClickPlainNode(emit)
   });
   api2.created();
-  initWatcher({ watch, props, api: api2, state });
+  initWatcher({ watch, props, api: api2, state, isVue2 });
   onMounted(api2.wrapMounted);
   onUpdated(api2.updated);
   onBeforeUnmount(api2.beforeUnmount);

package/tree-menu/index.js

@@ -1,13 +1,13 @@
 import {
   __spreadValues
 } from "../chunk-G2ADBYYC.js";
-const initData = ({ state, props, service, api }) => () => {
+const initData = ({ state, props, service, api }) => async () => {
   if (props.data) {
     state.data = props.data;
     return;
   }
   if (typeof service.getMenuDataSync === "function") {
-    const menuData = service.getMenuDataSync();
+    const menuData = await service.getMenuDataSync();
     state.data = api.setMenuKey({ newData: [], menuData });
   }
 };
@@ -38,11 +38,13 @@ const setMenuKey = (api) => ({ newData, menuData }) => {
   });
   return newData;
 };
-const filterNode = () => (value, data) => {
+const filterNode = (props) => (value, data) => {
+  var _a;
   if (!value) {
     return true;
   }
-  return data.label.includes(value);
+  const propsLabel = ((_a = props.props) == null ? void 0 : _a.label) || "label";
+  return data[propsLabel].includes(value);
 };
 const watchFilterText = ({ vm }) => (value) => {
   vm.$refs.tree.filter(value);
@@ -68,8 +70,11 @@ const nodeExpand = (emit) => (nodeData, node) => {
 const nodeCollapse = (emit) => (nodeData, node) => {
   emit("node-collapse", nodeData, node);
 };
-const nodeClick = (emit) => (nodeData, node) => {
+const nodeClick = ({ emit, props, state }) => (nodeData, node) => {
   emit("node-click", nodeData, node);
+  if (props.showExpand && state.isExpand) {
+    state.isExpand = false;
+  }
 };
 const checkChange = (emit) => (data, checked, indeterminate) => {
   emit("check-change", data, checked, indeterminate);
@@ -109,17 +114,38 @@ const setCurrentNode = ({ vm }) => (key) => {
 const getCurrentNode = ({ vm }) => () => {
   return vm.$refs.tree.getCurrentNode();
 };
+const handleToggleMenu = ({ state, vm }) => (type) => {
+  state.isExpand = !state.isExpand;
+  if (type === "expand") {
+    state.currentKey = state.nodeKey !== null ? [state.nodeKey] : [];
+  } else {
+    state.nodeKey = vm.$refs.tree.getCurrentKey();
+    vm.$refs.tree.expandAllNodes(false);
+  }
+};
+const computedTreeStyle = ({ props }) => () => {
+  let minusHeight = 0;
+  if (props.showExpand) {
+    minusHeight += 64;
+  }
+  if (props.showFilter) {
+    minusHeight += 42;
+  }
+  return { "height": `calc(100% - ${minusHeight}px)` };
+};
 export {
   check,
   checkChange,
   collapseChange,
   collapseMenu,
+  computedTreeStyle,
   currentChange,
   expandMenu,
   filterNode,
   getCurrentKey,
   getCurrentNode,
   getTitle,
+  handleToggleMenu,
   initData,
   nodeClick,
   nodeCollapse,

package/tree-menu/vue.js

@@ -22,7 +22,9 @@ import {
   setCurrentKey,
   getCurrentKey,
   setCurrentNode,
-  getCurrentNode
+  getCurrentNode,
+  handleToggleMenu,
+  computedTreeStyle
 } from "./index";
 const api = [
   "state",
@@ -48,23 +50,32 @@ const api = [
   "setCurrentKey",
   "getCurrentKey",
   "setCurrentNode",
-  "getCurrentNode"
+  "getCurrentNode",
+  "handleToggleMenu"
 ];
-const renderless = (props, { watch, reactive, onMounted }, { t, service, emit, vm }) => {
+const renderless = (props, { computed, watch, reactive, onMounted }, { t, service, emit, vm }) => {
   service = service || { base: {} };
   service = { getMenuDataSync: props.getMenuDataSync || service.base.getMenuDataSync };
+  const api2 = {};
   const state = reactive({
     data: [],
     filterText: "",
-    isCollapsed: false
+    isExpand: false,
+    isCollapsed: false,
+    nodeKey: null,
+    currentKey: [],
+    treeStyle: computed(() => api2.computedTreeStyle()),
+    defaultExpandedKeys: computed(
+      () => props.defaultExpandedKeys && props.defaultExpandedKeys.length ? props.defaultExpandedKeys : state.currentKey
+    )
   });
-  Object.assign(api, {
+  Object.assign(api2, {
     t,
     state,
     check: check(emit),
-    filterNode: filterNode(),
+    filterNode: filterNode(props),
     nodeDrop: nodeDrop(emit),
-    nodeClick: nodeClick(emit),
+    nodeClick: nodeClick({ emit, props, state }),
     nodeExpand: nodeExpand(emit),
     nodeDragEnd: nodeDragEnd(emit),
     checkChange: checkChange(emit),
@@ -75,24 +86,26 @@ const renderless = (props, { watch, reactive, onMounted }, { t, service, emit, v
     currentChange: currentChange(emit),
     watchFilterText: watchFilterText({ vm }),
     getTitle: getTitle(props),
-    setMenuKey: setMenuKey(api),
-    initData: initData({ state, props, service, api }),
+    setMenuKey: setMenuKey(api2),
+    initData: initData({ state, props, service, api: api2 }),
     collapseChange: collapseChange({ state, props, emit }),
-    collapseMenu: collapseMenu({ state, props, api }),
-    expandMenu: expandMenu({ state, props, api }),
+    collapseMenu: collapseMenu({ state, props, api: api2 }),
+    expandMenu: expandMenu({ state, props, api: api2 }),
     setCurrentKey: setCurrentKey({ vm }),
     getCurrentKey: getCurrentKey({ vm }),
     setCurrentNode: setCurrentNode({ vm }),
-    getCurrentNode: getCurrentNode({ vm })
+    getCurrentNode: getCurrentNode({ vm }),
+    handleToggleMenu: handleToggleMenu({ state, vm }),
+    computedTreeStyle: computedTreeStyle({ props })
   });
   watch(
     () => props.data,
     (value) => state.data = value,
     { immediate: true }
   );
-  watch(() => state.filterText, api.watchFilterText, { deep: true });
-  onMounted(api.initData);
-  return api;
+  watch(() => state.filterText, api2.watchFilterText, { deep: true });
+  onMounted(api2.initData);
+  return api2;
 };
 export {
   api,

package/tree-node/index.js

@@ -47,7 +47,7 @@ const handleSelectChange = ({ props, state }) => (checked, indeterminate) => {
   state.oldChecked = checked;
   state.indeterminate = indeterminate;
 };
-const handleClick = ({ api, vm, props, state }) => (e) => {
+const handleClick = ({ api, vm, props, state }) => (e, trigger) => {
   const store = state.tree.state.store;
   state.tree.clearCurrentStore(props.node);
   if (!state.tree.onlyCheckChildren) {
@@ -58,7 +58,7 @@ const handleClick = ({ api, vm, props, state }) => (e) => {
     state.tree.$emit("current-change", store.currentNode ? store.currentNode.data : null, store.currentNode);
   }
   state.tree.currentNode = vm;
-  if (state.tree.checkOnClickNode && !props.node.disabled) {
+  if (state.tree.checkOnClickNode && !props.node.disabled && trigger !== "checkbox") {
     e.target.checked = !props.node.checked;
     api.handleCheckChange(null, e);
   }
@@ -68,18 +68,15 @@ const handleClick = ({ api, vm, props, state }) => (e) => {
       state.tree.$emit("node-click", props.node.data, props.node, vm);
       return;
     }
+    api.handleExpandClick(false);
   } else {
     if (!state.tree.collapsible || !state.tree.expandOnClickNode) {
       !props.node.disabled && state.tree.$emit("node-click", props.node.data, props.node, vm);
       return;
     }
-  }
-  if (!state.tree.onlyCheckChildren) {
     if (state.tree.expandOnClickNode && isCheck) {
       api.handleExpandClick(isCheck);
     }
-  } else {
-    api.handleExpandClick(false);
   }
 };
 const closeMenu = (state) => () => {
@@ -202,10 +199,12 @@ const onSiblingToggleExpand = ({ state, props }) => ({ isExpand, sibling }) => {
   }
 };
 const watchExpandedChange = ({ state, props }) => () => {
-  state.parentEmitter.emit("sibling-node-toggle-expand", {
-    isExpand: props.node.expanded,
-    sibling: props.node
-  });
+  if (state.tree.accordion) {
+    state.parentEmitter.emit("sibling-node-toggle-expand", {
+      isExpand: props.node.expanded,
+      sibling: props.node
+    });
+  }
 };
 const openEdit = ({ state, vm }) => (node) => {
   state.tree.state.emitter.emit("tree-node-edit", node);
@@ -229,16 +228,17 @@ const addNode = ({ state, props, api }) => (event, node) => {
   api.openEdit();
   state.tree.state.emitter.emit("tree-node-add", event, node);
 };
-const computedExpandIcon = ({ designConfig }) => ({ showLine }, { tree, expanded, isSaaSTheme }) => {
-  if (tree.icon) {
-    return tree.icon;
+const computedExpandIcon = ({ designConfig }) => (treeRoot, state) => {
+  var _a, _b;
+  if (state.tree.icon) {
+    return state.tree.icon;
   }
-  if (showLine) {
-    const expandIcon = (designConfig == null ? void 0 : designConfig.icons.expanded) || "icon-minus-square";
-    const collapseIcon = (designConfig == null ? void 0 : designConfig.icons.collapse) || "icon-plus-square";
-    return expanded ? expandIcon : collapseIcon;
+  if (treeRoot.showLine) {
+    const expandIcon = ((_a = designConfig == null ? void 0 : designConfig.icons) == null ? void 0 : _a.expanded) || "icon-minus-square";
+    const collapseIcon = ((_b = designConfig == null ? void 0 : designConfig.icons) == null ? void 0 : _b.collapse) || "icon-plus-square";
+    return state.expanded ? expandIcon : collapseIcon;
   }
-  return isSaaSTheme ? "icon-arrow-bottom" : "icon-chevron-right";
+  return "icon-chevron-right";
 };
 const computedIndent = () => ({ node, showLine }, { tree }) => {
   return (node.level > 1 ? 1 : 0) * (parseInt(tree.indent) + (showLine ? 8 : 0)) + parseInt(tree.baseIndent) + "px";

package/tree-node/vue.js

@@ -70,7 +70,7 @@ const initState = ({ reactive, treeRoot, props, emitter, $parentEmitter, vm, api
   });
   return state;
 };
-const initApi = ({ api: api2, state, dispatch, broadcast, vm, props, parent, treeRoot, nextTick, emit, designConfig }) => {
+const initApi = ({ api: api2, state, dispatch, broadcast, vm, props, treeRoot, nextTick, emit, designConfig }) => {
   Object.assign(api2, {
     state,
     dispatch,
@@ -109,15 +109,16 @@ const initWatcher = ({ watch, state, api: api2, props }) => {
   watch(() => props.node.checked, api2.watchChecked, { deep: true });
   watch(() => props.node.expanded, api2.watchExpanded, { deep: true });
 };
-const renderless = (props, { reactive, watch, inject, provide, computed }, { parent: parentVm, vm, nextTick, emit, broadcast, dispatch, emitter, designConfig }, { isVue2 }) => {
+const renderless = (props, { reactive, watch, inject, provide, computed }, { vm, nextTick, emit, broadcast, dispatch, emitter, designConfig }, { isVue2 }) => {
   const api2 = {};
-  const parent = inject("parentTree") || parentVm;
   const treeRoot = inject("TreeRoot");
   const $parentEmitter = inject("parentEmitter");
   const state = initState({ reactive, treeRoot, props, emitter, $parentEmitter, vm, api: api2, computed });
-  state.parentEmitter.on("sibling-node-toggle-expand", (event) => api2.onSiblingToggleExpand(event));
+  if (state.tree.accordion) {
+    state.parentEmitter.on("sibling-node-toggle-expand", (event) => api2.onSiblingToggleExpand(event));
+  }
   provide("parentEmitter", state.emitter);
-  initApi({ api: api2, state, dispatch, broadcast, vm, props, parent, treeRoot, nextTick, emit, designConfig });
+  initApi({ api: api2, state, dispatch, broadcast, vm, props, treeRoot, nextTick, emit, designConfig });
   initWatcher({ watch, state, api: api2, props });
   api2.created((childrenKey) => {
     watch(

package/types/action-sheet.type.d.ts

@@ -1,2 +1,119 @@
+import { CSSProperties, ExtractPropTypes } from 'vue';
+import { ISharedRenderlessParamUtils } from './shared.type.js';
 
-export { }
+declare const actionSheetProps: {
+    menus: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    modelValue: (ArrayConstructor | StringConstructor | NumberConstructor)[];
+    beforeClose: FunctionConstructor;
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    ellipsis: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueField: {
+        type: StringConstructor;
+        default: string;
+    };
+    textField: {
+        type: StringConstructor;
+        default: string;
+    };
+    title: StringConstructor;
+    showHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showFooter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClose: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
+    fullscreen: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
+    customClass: (ArrayConstructor | StringConstructor | ObjectConstructor)[];
+    contentClass: StringConstructor;
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    mask: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maskClosable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    lockScroll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flex: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    contentPosition: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    contentStyle: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    tiny_mode: StringConstructor;
+    tiny_mode_root: BooleanConstructor;
+    tiny_template: (FunctionConstructor | ObjectConstructor)[];
+    tiny_renderless: FunctionConstructor;
+    tiny_theme: StringConstructor;
+    tiny_chart_theme: ObjectConstructor;
+};
+
+interface IActionSheetState {
+    toggle: boolean;
+    sheetMaskStyle: CSSProperties;
+    sheetContentStyle: CSSProperties;
+    scroll: null | object;
+}
+type IActionSheetProps = ExtractPropTypes<typeof actionSheetProps>;
+type IActionSheetRenderlessParamUtils = ISharedRenderlessParamUtils<null>;
+interface IActionSheetApi {
+    state: IActionSheetState;
+    setSheetStyle: ({ state, props }: {
+        state: IActionSheetState;
+        props: IActionSheetProps;
+    }) => void;
+    initScrollMenu: ({ state, nextTick, refs, BScroll }: {
+        state: IActionSheetState;
+        nextTick: IActionSheetRenderlessParamUtils['nextTick'];
+        refs: IActionSheetRenderlessParamUtils['refs'];
+        BScroll: object;
+    }) => void;
+    visibleHandle: ({ emit, state }: {
+        emit: IActionSheetRenderlessParamUtils['emit'];
+        state: IActionSheetState;
+    }) => void;
+    watchVisible: (value: boolean) => void;
+    menuHandle: (item: any) => void;
+    confirm: () => void;
+    selectOption: (option: any) => void;
+    actionSelectOption: (option: any, index: any) => void;
+    close: () => void;
+    hide: () => void;
+}
+
+export { IActionSheetApi, IActionSheetProps, IActionSheetRenderlessParamUtils, IActionSheetState };

package/types/alert.type.d.ts

@@ -76,7 +76,7 @@ declare const alertProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    customClass: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+    customClass: (ArrayConstructor | StringConstructor | ObjectConstructor)[];
     offset: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;