sard-uniapp 1.24.6 → 1.24.7

package/components/tree/tree.vue

@@ -1,5 +1,18 @@
 <template>
   <view :class="treeClass" :style="treeStyle">
+    <view v-if="lazy && !!load" :class="bem.e('load-status')">
+      <sar-loading v-if="loadStatus === 'loading'" />
+      <text
+        v-else-if="loadStatus === 'error'"
+        :class="bem.e('error')"
+        @click="onErrorClick"
+      >
+        {{ t('error') }}
+      </text>
+      <text v-else-if="loadStatus === 'loaded' && treeData.length === 0">
+        {{ t('noData') }}
+      </text>
+    </view>
     <template v-for="(node, index) of treeData" :key="node.key">
       <sar-tree-node v-if="node.visible" :index="index" :node="node" />
     </template>
@@ -49,6 +62,7 @@ import {
 } from "./common";
 import SarTreeNode from "../tree-node/tree-node.vue";
 import SarPopover from "../popover/popover.vue";
+import SarLoading from "../loading/loading.vue";
 import { usePopover } from "../popover";
 import SarInput from "../input/input.vue";
 import SarDialog from "../dialog/dialog.vue";
@@ -73,6 +87,8 @@ import { recurAncestor, recurDescendant, recurNodes } from "./utils";
  * @property {boolean} editable 是否可编辑节点（增删改），默认值：false。
  * @property {'lenient' | 'strict'} filterMode 节点过滤模式，默认值：'lenient'。
  * @property {(value: string, node: TreeStateNode) => boolean} filterMethod 自定义过滤方法，默认值：-。
+ * @property {boolean} lazy 是否懒加载子节点，需与 load 方法结合使用，默认值：false。
+ * @property {(node?: TreeStateNode) => Promise<TreeNode[]> | TreeNode[]} load 加载子树数据的方法，仅当 lazy 属性为true 时生效，默认值：-。
  * @event {(key: string | number, node: TreeStateNode) => void} update 选择节点后触发（单选）
  * @event {(key: string | number, node: TreeStateNode) => void} select 选择节点后触发（单选）
  * @event {(event: {checked: boolean; node: TreeStateNode}) => void} check 点击树节点复选框时触发
@@ -82,6 +98,7 @@ export default  _defineComponent({
   components: {
     SarTreeNode,
     SarPopover,
+    SarLoading,
     SarInput,
     SarDialog,
     SarToast,
@@ -110,7 +127,9 @@ export default  _defineComponent({
     draggable: { type: Boolean, required: false },
     editable: { type: Boolean, required: false },
     filterMode: { type: String, required: false },
-    filterMethod: { type: Function, required: false }
+    filterMethod: { type: Function, required: false },
+    lazy: { type: Boolean, required: false },
+    load: { type: Function, required: false }
   }, defaultTreeProps()),
   emits: ["update:current", "select", "check", "node-click"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -124,7 +143,7 @@ export default  _defineComponent({
     const treeData = ref([]);
     let treeMap = {};
     const totalLevel = ref(0);
-    const recurRawNode = (nodes, parent) => {
+    const toTreeStateNodes = (nodes, parent) => {
       return nodes.map((node) => {
         const key = node[fieldKeys.value.key] ?? uniqid();
         const stateNode = reactive({
@@ -137,10 +156,13 @@ export default  _defineComponent({
           level: 0,
           offsetLevel: 0,
           visible: true,
-          disabled: !!node.disabled
+          disabled: !!node.disabled,
+          isLeaf: node[fieldKeys.value.isLeaf],
+          loadStatus: "idle",
+          depth: parent ? parent.depth + 1 : 0
         });
         if (node.children && node.children.length) {
-          stateNode.children = recurRawNode(node.children, stateNode);
+          stateNode.children = toTreeStateNodes(node.children, stateNode);
         }
         treeMap[key] = stateNode;
         return stateNode;
@@ -388,17 +410,18 @@ export default  _defineComponent({
     };
     const setRenderPosition = () => {
       let count = 0;
-      function recur(nodes) {
+      function recur(nodes, parent) {
         nodes.forEach((node) => {
+          node.depth = parent ? parent.depth + 1 : 0;
           if (node.visible) {
             node.level = count++;
           }
           if (node.children && node.expanded) {
-            recur(node.children);
+            recur(node.children, node);
           }
         });
       }
-      recur(treeData.value);
+      recur(treeData.value, null);
       totalLevel.value = count;
     };
     const toggleCheck = (node, checked) => {
@@ -408,22 +431,41 @@ export default  _defineComponent({
         node
       });
     };
+    const loadStatus = ref("loaded");
+    const initialize = async () => {
+      if (props.lazy && props.load) {
+        try {
+          loadStatus.value = "loading";
+          const data = await props.load();
+          loadStatus.value = "loaded";
+          initializeTree(data);
+        } catch {
+          loadStatus.value = "error";
+        }
+      } else {
+        initializeTree(props.data);
+      }
+    };
+    const initializeTree = (data) => {
+      treeData.value = toTreeStateNodes(data, null);
+      if (props.defaultCheckedKeys && props.defaultCheckedKeys.length > 0) {
+        setCheckedKeys(props.defaultCheckedKeys);
+      }
+      if (props.defaultExpandedKeys && props.defaultExpandedKeys.length > 0) {
+        setExpandedKeys(props.defaultExpandedKeys);
+      }
+      setRenderPosition();
+    };
+    const onErrorClick = () => {
+      initialize();
+    };
     watch(
       () => props.data,
       () => {
-        treeData.value = recurRawNode(props.data, null);
-        if (props.defaultCheckedKeys && props.defaultCheckedKeys.length > 0) {
-          setCheckedKeys(props.defaultCheckedKeys);
-        }
-        if (props.defaultExpandedKeys && props.defaultExpandedKeys.length > 0) {
-          setExpandedKeys(props.defaultExpandedKeys);
-        }
-        setRenderPosition();
-      },
-      {
-        immediate: true
+        initializeTree(props.data);
       }
     );
+    initialize();
     const popoverOptions = [
       { id: "sibling", icon: "plus", text: t("addSibling") },
       { id: "child", icon: "plus", text: t("addChild") },
@@ -482,7 +524,10 @@ export default  _defineComponent({
               level: 0,
               offsetLevel: 0,
               visible: true,
-              disabled: false
+              disabled: false,
+              isLeaf: false,
+              loadStatus: "idle",
+              depth: 0
             });
             switch (currentEditType.value) {
               case "sibling":
@@ -568,6 +613,8 @@ export default  _defineComponent({
       singleSelectable: toRef(() => props.singleSelectable),
       leafOnly: toRef(() => props.leafOnly),
       treeData: toRef(() => treeData.value),
+      load: toRef(() => props.load),
+      lazy: toRef(() => props.lazy),
       setExpandedByNode,
       toggleExpandedByNode,
       setCheckedByNode,
@@ -578,7 +625,9 @@ export default  _defineComponent({
       edit,
       currentKey,
       singleSelect,
-      nodeClick
+      nodeClick,
+      toTreeStateNodes,
+      setRenderPosition
     });
     provide(treeContextSymbol, context);
     __expose({
@@ -609,11 +658,11 @@ export default  _defineComponent({
       return treeMap;
     }, set treeMap(v) {
       treeMap = v;
-    }, totalLevel, recurRawNode, setExpandedByNode, toggleExpandedByNode, setExpanded, toggleExpanded, setExpandedKeys, getExpandedKeys, setCheckedByNode, updateAncestorChecked, setCheckedKeys, setChecked, getCheckedKeys, getHalfCheckedKeys, prepend, append, appendRoot, before, after, remove, levelup, leveldown, drop, addRootNode, getCleanTreeData, setRenderPosition, toggleCheck, popoverOptions, popover, get currentEditNode() {
+    }, totalLevel, toTreeStateNodes, setExpandedByNode, toggleExpandedByNode, setExpanded, toggleExpanded, setExpandedKeys, getExpandedKeys, setCheckedByNode, updateAncestorChecked, setCheckedKeys, setChecked, getCheckedKeys, getHalfCheckedKeys, prepend, append, appendRoot, before, after, remove, levelup, leveldown, drop, addRootNode, getCleanTreeData, setRenderPosition, toggleCheck, loadStatus, initialize, initializeTree, onErrorClick, popoverOptions, popover, get currentEditNode() {
       return currentEditNode;
     }, set currentEditNode(v) {
       currentEditNode = v;
-    }, currentEditType, currentEditValue, mapEditTypeTitle, currentEditTitle, dialogVisible, toastVisible, onPopoverSelect, beforeClose, edit, focused, onVisibleHook, defaultFilterMethod, filter, currentKey, singleSelect, nodeClick, context, treeClass, treeStyle, SarTreeNode, SarPopover, SarInput, SarDialog, SarToast };
+    }, currentEditType, currentEditValue, mapEditTypeTitle, currentEditTitle, dialogVisible, toastVisible, onPopoverSelect, beforeClose, edit, focused, onVisibleHook, defaultFilterMethod, filter, currentKey, singleSelect, nodeClick, context, treeClass, treeStyle, SarTreeNode, SarPopover, SarLoading, SarInput, SarDialog, SarToast };
     return __returned__;
   }
 });

package/components/tree/variables.scss

@@ -4,6 +4,9 @@ page,
   --sar-tree-border-color: var(--sar-border-color);
   --sar-tree-bg: var(--sar-emphasis-bg);
   --sar-tree-duration: var(--sar-duration);
+  --sar-tree-loading-size: var(--sar-text-base);
+  --sar-tree-loading-color: var(--sar-fourth-color);
+  --sar-tree-loading-margin-y: 20rpx;
 
   --sar-tree-node-height: 80rpx;
   --sar-tree-node-padding-x: 32rpx;
@@ -12,6 +15,7 @@ page,
   --sar-tree-node-active-bg: var(--sar-active-bg);
   --sar-tree-node-dragging-bg: var(--sar-mask-white-legible);
   --sar-tree-node-dragging-shadow: var(--sar-shadow-dragging);
+  --sar-tree-node-loading-margin-right: 16rpx;
 
   --sar-tree-toolbar-margin-right: -24rpx;
 

package/components/tree-node/index.scss

@@ -52,6 +52,12 @@
     }
   }
 
+  @include e(loading) {
+    margin-right: var(--sar-tree-node-loading-margin-right);
+    font-size: var(--sar-tree-loading-size);
+    color: var(--sar-tree-loading-color);
+  }
+
   @include e(selection) {
     @include universal;
     margin: calc(var(--sar-tree-node-padding-y) * -1) 0

package/components/tree-node/tree-node.vue

@@ -12,6 +12,10 @@
     <view :class="arrowClass">
       <sar-icon family="sari" name="right" />
     </view>
+    <sar-loading
+      v-if="node.loadStatus === 'loading'"
+      :class="bem.e('loading')"
+    />
     <view
       v-if="treeContext.selectable || canSingleSelectable"
       :class="selectionClass"
@@ -75,7 +79,12 @@
   </view>
 
   <template
-    v-if="!isLeaf && node.expanded && node.children && node.children.length > 0"
+    v-if="
+      !isMergedLeaf &&
+      node.expanded &&
+      node.children &&
+      node.children.length > 0
+    "
   >
     <template v-for="(node, index) of node.children" :key="node.key">
       <sar-tree-node v-if="node.visible" :index="index" :node="node" />
@@ -265,21 +274,46 @@ export default  _defineComponent({
           break;
       }
     };
-    const isLeaf = computed(() => {
-      return !props.node.children || props.node.children.length === 0;
+    const isMergedLeaf = computed(() => {
+      const { children, isLeaf } = props.node;
+      return treeContext.lazy && treeContext.load ? isLeaf : !children || children.length === 0;
     });
-    const onNodeClick = (event) => {
-      if (!isLeaf.value) {
-        treeContext.toggleExpandedByNode(props.node);
+    const onNodeClick = async (event) => {
+      const node = props.node;
+      const { loadStatus, isLeaf } = node;
+      if (loadStatus === "loading") {
+        return;
+      }
+      if (treeContext.lazy && treeContext.load && !isLeaf && loadStatus === "idle") {
+        try {
+          node.loadStatus = "loading";
+          const treeNodes = await treeContext.load(node) || [];
+          node.loadStatus = "loaded";
+          node.children = treeContext.toTreeStateNodes(treeNodes, node);
+          if (node.children.length === 0) {
+            node.isLeaf = true;
+          } else {
+            treeContext.setRenderPosition();
+            if (node.checked) {
+              treeContext.setCheckedByNode(props.node, true);
+            }
+          }
+        } catch {
+          node.loadStatus = "idle";
+          return;
+        }
+      }
+      if (!isMergedLeaf.value) {
+        treeContext.toggleExpandedByNode(node);
       }
       if (canSingleSelectable.value && treeContext.leafOnly) {
-        treeContext.singleSelect(props.node);
+        treeContext.singleSelect(node);
       }
-      treeContext.nodeClick(props.node, event);
+      treeContext.nodeClick(node, event);
     };
     const nodeActive = ref(false);
     const onNodeTouchStart = () => {
-      if (!isLeaf.value || canSingleSelectable.value && treeContext.leafOnly) {
+      if (!isMergedLeaf.value || canSingleSelectable.value && treeContext.leafOnly) {
         nodeActive.value = true;
       }
     };
@@ -292,7 +326,7 @@ export default  _defineComponent({
       onNodeTouchEnd
     );
     const canSingleSelectable = computed(() => {
-      return treeContext.singleSelectable && (!treeContext.leafOnly || isLeaf.value);
+      return treeContext.singleSelectable && (!treeContext.leafOnly || isMergedLeaf.value);
     });
     const isSingleChecked = computed(
       () => props.node.key === treeContext.currentKey
@@ -353,7 +387,7 @@ export default  _defineComponent({
       return classNames(
         bem.e("arrow"),
         bem.em("arrow", "expanded", props.node.expanded),
-        bem.em("arrow", "is-leaf", isLeaf.value)
+        bem.em("arrow", "is-leaf", isMergedLeaf.value)
       );
     });
     const selectionClass = computed(() => {
@@ -378,7 +412,7 @@ export default  _defineComponent({
       return obviousNodes;
     }, set obviousNodes(v) {
       obviousNodes = v;
-    }, onDragStart, onDragMove, onDragEnd, onDragSimulatedClickTouchStart, onDragSimulatedClickTouchEnd, onDragSimulatedPressTouchStart, onDragSimulatedPressTouchMove, onDragSimulatedPressTouchEnd, onDragTouchStart, onDragTouchMove, onDragTouchEnd, onDragMouseDown, dragId, popover, isLastNode, popoverOptions, onPopoverSelect, isLeaf, onNodeClick, nodeActive, onNodeTouchStart, onNodeTouchEnd, onNodeMouseDown, canSingleSelectable, isSingleChecked, onSelectionTouchStart, onSelectionTouchEnd, onSelectionMouseDown, editId, getEditRect, onEditTouchStart, onEditTouchEnd, onEditMouseDown, nodeClass, nodeStyle, editClass, indentStyle, arrowClass, selectionClass, SarIcon, SarCheckbox, SarRadio, SarPopover };
+    }, onDragStart, onDragMove, onDragEnd, onDragSimulatedClickTouchStart, onDragSimulatedClickTouchEnd, onDragSimulatedPressTouchStart, onDragSimulatedPressTouchMove, onDragSimulatedPressTouchEnd, onDragTouchStart, onDragTouchMove, onDragTouchEnd, onDragMouseDown, dragId, popover, isLastNode, popoverOptions, onPopoverSelect, isMergedLeaf, onNodeClick, nodeActive, onNodeTouchStart, onNodeTouchEnd, onNodeMouseDown, canSingleSelectable, isSingleChecked, onSelectionTouchStart, onSelectionTouchEnd, onSelectionMouseDown, editId, getEditRect, onEditTouchStart, onEditTouchEnd, onEditMouseDown, nodeClass, nodeStyle, editClass, indentStyle, arrowClass, selectionClass, SarIcon, SarCheckbox, SarRadio, SarPopover };
     return __returned__;
   }
 });

package/components/upload/common.d.ts

@@ -80,7 +80,201 @@ export interface UploadPreviewProps {
     readonly?: boolean;
 }
 export declare const defaultUploadPreviewProps: {
-    status: UploadPreviewProps["status"];
+    rootStyle?: (string | false | ((props: {
+        rootStyle: StyleValue;
+        rootClass: string;
+        file: UploadFile;
+        url: string;
+        isImage: boolean;
+        isVideo: boolean;
+        status: UploadStatus;
+        name: string;
+        message: string;
+        removable: boolean;
+        index: number;
+        disabled: boolean;
+        readonly: boolean;
+    }) => string | false | import("vue").CSSProperties | StyleValue[]) | null) | undefined;
+    rootClass?: (string | ((props: {
+        rootStyle: StyleValue;
+        rootClass: string;
+        file: UploadFile;
+        url: string;
+        isImage: boolean;
+        isVideo: boolean;
+        status: UploadStatus;
+        name: string;
+        message: string;
+        removable: boolean;
+        index: number;
+        disabled: boolean;
+        readonly: boolean;
+    }) => string)) | undefined;
+    file?: ((props: {
+        rootStyle: StyleValue;
+        rootClass: string;
+        file: UploadFile;
+        url: string;
+        isImage: boolean;
+        isVideo: boolean;
+        status: UploadStatus;
+        name: string;
+        message: string;
+        removable: boolean;
+        index: number;
+        disabled: boolean;
+        readonly: boolean;
+    }) => UploadFile) | undefined;
+    url?: (string | ((props: {
+        rootStyle: StyleValue;
+        rootClass: string;
+        file: UploadFile;
+        url: string;
+        isImage: boolean;
+        isVideo: boolean;
+        status: UploadStatus;
+        name: string;
+        message: string;
+        removable: boolean;
+        index: number;
+        disabled: boolean;
+        readonly: boolean;
+    }) => string)) | undefined;
+    isImage?: (boolean | ((props: {
+        rootStyle: StyleValue;
+        rootClass: string;
+        file: UploadFile;
+        url: string;
+        isImage: boolean;
+        isVideo: boolean;
+        status: UploadStatus;
+        name: string;
+        message: string;
+        removable: boolean;
+        index: number;
+        disabled: boolean;
+        readonly: boolean;
+    }) => boolean)) | undefined;
+    isVideo?: (boolean | ((props: {
+        rootStyle: StyleValue;
+        rootClass: string;
+        file: UploadFile;
+        url: string;
+        isImage: boolean;
+        isVideo: boolean;
+        status: UploadStatus;
+        name: string;
+        message: string;
+        removable: boolean;
+        index: number;
+        disabled: boolean;
+        readonly: boolean;
+    }) => boolean)) | undefined;
+    status?: (UploadStatus | ((props: {
+        rootStyle: StyleValue;
+        rootClass: string;
+        file: UploadFile;
+        url: string;
+        isImage: boolean;
+        isVideo: boolean;
+        status: UploadStatus;
+        name: string;
+        message: string;
+        removable: boolean;
+        index: number;
+        disabled: boolean;
+        readonly: boolean;
+    }) => "done" | "pending" | "uploading" | "failed")) | undefined;
+    name?: (string | ((props: {
+        rootStyle: StyleValue;
+        rootClass: string;
+        file: UploadFile;
+        url: string;
+        isImage: boolean;
+        isVideo: boolean;
+        status: UploadStatus;
+        name: string;
+        message: string;
+        removable: boolean;
+        index: number;
+        disabled: boolean;
+        readonly: boolean;
+    }) => string)) | undefined;
+    message?: (string | ((props: {
+        rootStyle: StyleValue;
+        rootClass: string;
+        file: UploadFile;
+        url: string;
+        isImage: boolean;
+        isVideo: boolean;
+        status: UploadStatus;
+        name: string;
+        message: string;
+        removable: boolean;
+        index: number;
+        disabled: boolean;
+        readonly: boolean;
+    }) => string)) | undefined;
+    removable?: (boolean | ((props: {
+        rootStyle: StyleValue;
+        rootClass: string;
+        file: UploadFile;
+        url: string;
+        isImage: boolean;
+        isVideo: boolean;
+        status: UploadStatus;
+        name: string;
+        message: string;
+        removable: boolean;
+        index: number;
+        disabled: boolean;
+        readonly: boolean;
+    }) => boolean)) | undefined;
+    index?: (number | ((props: {
+        rootStyle: StyleValue;
+        rootClass: string;
+        file: UploadFile;
+        url: string;
+        isImage: boolean;
+        isVideo: boolean;
+        status: UploadStatus;
+        name: string;
+        message: string;
+        removable: boolean;
+        index: number;
+        disabled: boolean;
+        readonly: boolean;
+    }) => number)) | undefined;
+    disabled?: (boolean | ((props: {
+        rootStyle: StyleValue;
+        rootClass: string;
+        file: UploadFile;
+        url: string;
+        isImage: boolean;
+        isVideo: boolean;
+        status: UploadStatus;
+        name: string;
+        message: string;
+        removable: boolean;
+        index: number;
+        disabled: boolean;
+        readonly: boolean;
+    }) => boolean)) | undefined;
+    readonly?: (boolean | ((props: {
+        rootStyle: StyleValue;
+        rootClass: string;
+        file: UploadFile;
+        url: string;
+        isImage: boolean;
+        isVideo: boolean;
+        status: UploadStatus;
+        name: string;
+        message: string;
+        removable: boolean;
+        index: number;
+        disabled: boolean;
+        readonly: boolean;
+    }) => boolean)) | undefined;
 };
 export interface UploadPreviewEmits {
     (e: 'image-click'): void;

package/components/upload/upload.d.ts

@@ -1,4 +1,4 @@
-import { type UploadProps, type UploadSlots, type UploadFile, type UploadFileItem } from './common';
+import { type UploadProps, type UploadSlots, type UploadFile, type UploadFileItem, type UploadSelectOptions } from './common';
 declare function __VLS_template(): Readonly<UploadSlots> & UploadSlots;
 declare const __VLS_component: import("vue").DefineComponent<UploadProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:model-value": (value: UploadFileItem[]) => any;
@@ -11,11 +11,23 @@ declare const __VLS_component: import("vue").DefineComponent<UploadProps, {}, {}
     onRemove?: ((index: number, item: UploadFileItem) => any) | undefined;
     "onItem-click"?: ((item: UploadFileItem, index: number) => any) | undefined;
 }>, {
+    multiple: boolean;
+    rootStyle: string | false | import("vue").CSSProperties | import("vue").StyleValue[] | null;
+    rootClass: string;
+    modelValue: UploadFileItem[];
+    disabled: boolean;
+    readonly: boolean;
     validateEvent: boolean;
+    camera: "back" | "front";
     maxDuration: number;
     maxCount: number;
     maxSize: number | ((file: UploadFile) => boolean);
+    overSize: (fileItem: UploadFileItem[]) => void;
+    beforeChoose: (fileList: UploadFileItem[], next: (allowed: boolean | UploadSelectOptions) => void) => void;
+    beforeRead: (file: UploadFile) => boolean | Promise<UploadFile>;
+    afterRead: (fileItem: UploadFileItem) => void;
     removable: boolean;
+    beforeRemove: (index: number, fileItem: UploadFileItem) => boolean | Promise<void>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/components/upload-preview/upload-preview.d.ts

@@ -8,6 +8,18 @@ declare const _default: import("vue").DefineComponent<UploadPreviewProps, {}, {}
     onRemove?: (() => any) | undefined;
     "onImage-click"?: (() => any) | undefined;
 }>, {
+    file: import("../upload/common").UploadFile;
+    name: string;
+    url: string;
+    rootStyle: string | false | import("vue").CSSProperties | import("vue").StyleValue[] | null;
+    rootClass: string;
+    message: string;
     status: import("../upload/common").UploadStatus;
+    disabled: boolean;
+    readonly: boolean;
+    index: number;
+    isImage: boolean;
+    isVideo: boolean;
+    removable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/components/waterfall/common.d.ts

@@ -8,9 +8,41 @@ export interface WaterfallProps {
     rowGap?: number;
 }
 export declare const defaultWaterfallProps: {
-    columns: number;
-    columnGap: number;
-    rowGap: number;
+    rootStyle?: (string | false | ((props: {
+        rootStyle: StyleValue;
+        rootClass: string;
+        columns: number;
+        columnGap: number;
+        rowGap: number;
+    }) => string | false | import("vue").CSSProperties | StyleValue[]) | null) | undefined;
+    rootClass?: (string | ((props: {
+        rootStyle: StyleValue;
+        rootClass: string;
+        columns: number;
+        columnGap: number;
+        rowGap: number;
+    }) => string)) | undefined;
+    columns?: (number | ((props: {
+        rootStyle: StyleValue;
+        rootClass: string;
+        columns: number;
+        columnGap: number;
+        rowGap: number;
+    }) => number)) | undefined;
+    columnGap?: (number | ((props: {
+        rootStyle: StyleValue;
+        rootClass: string;
+        columns: number;
+        columnGap: number;
+        rowGap: number;
+    }) => number)) | undefined;
+    rowGap?: (number | ((props: {
+        rootStyle: StyleValue;
+        rootClass: string;
+        columns: number;
+        columnGap: number;
+        rowGap: number;
+    }) => number)) | undefined;
 };
 export interface WaterfallSlots {
     default?(props: Record<string, never>): any;

package/components/waterfall/waterfall.d.ts

@@ -10,6 +10,8 @@ declare const __VLS_component: import("vue").DefineComponent<WaterfallProps, {
     onLoad?: (() => any) | undefined;
     onLoadstart?: (() => any) | undefined;
 }>, {
+    rootStyle: string | false | import("vue").CSSProperties | import("vue").StyleValue[] | null;
+    rootClass: string;
     columns: number;
     columnGap: number;
     rowGap: number;