sard-uniapp 1.20.1 → 1.21.0

package/components/toast-agent/toast-agent.vue

@@ -1,7 +1,7 @@
 <template>
   <sar-toast
     ref="elRef"
-    v-model:visible="innerProps.visible"
+    :visible="innerProps.visible"
     :root-style="innerProps.rootStyle"
     :root-class="innerProps.rootClass"
     :type="innerProps.type"
@@ -11,6 +11,16 @@
     :transparent="innerProps.transparent"
     :timeout="innerProps.timeout"
     :duration="innerProps.duration"
+    @update:visible="onUpdateVisible"
+    @visible-hook="onVisibleHook"
+    @before-enter="onBeforeEnter"
+    @enter="onEnter"
+    @after-enter="onAfterEnter"
+    @enter-cancelled="onEnterCancelled"
+    @before-leave="onBeforeLeave"
+    @leave="onLeave"
+    @after-leave="onAfterLeave"
+    @leave-cancelled="onLeaveCancelled"
   />
 </template>
 
@@ -22,7 +32,7 @@ import {
   imperativeName,
   defaultToastAgentProps
 } from "./common";
-import { useImperative } from "../../use/useImperative";
+import { useImperative } from "../../use";
 /**
  * @property {'text' | 'loading' | 'success' | 'fail'} type 提示框类型，默认值：'text'。
  * @property {string | number} title 标题，默认值：-。
@@ -33,6 +43,25 @@ import { useImperative } from "../../use/useImperative";
  * @property {number} timeout 提示的延迟时间，单位 ms，默认值：1500。
  * @property {number} duration 显隐动画时长，单位 ms，默认值：300。
  * @property {string} id 提示组件的 id，默认值：'toast'。
+ * @property {(name: TransitionHookName) => void} onVisibleHook 入场/退场动画状态改变时调用，默认值：undefined。
+ * @property {() => void} onBeforeEnter 入场动画开始前调用，默认值：undefined。
+ * @property {() => void} onEnter 入场动画开始时调用，默认值：undefined。
+ * @property {() => void} onAfterEnter 入场动画结束时调用，默认值：undefined。
+ * @property {() => void} onEnterCancelled 入场动画取消时调用，默认值：undefined。
+ * @property {() => void} onBeforeLeave 退场动画开始前调用，默认值：undefined。
+ * @property {() => void} onLeave 退场动画开始时调用，默认值：undefined。
+ * @property {() => void} onAfterLeave 退场动画结束时调用，默认值：undefined。
+ * @property {() => void} onLeaveCancelled 退场动画取消时调用，默认值：undefined。
+ * @event {(visible: boolean) => void} update 提示框显隐时触发
+ * @event {(name: TransitionHookName) => void} visible-hook 入场/退场动画状态改变时触发
+ * @event {() => void} before-enter 入场动画开始前触发
+ * @event {() => void} enter 入场动画开始时触发
+ * @event {() => void} after-enter 入场动画结束时触发
+ * @event {() => void} enter-cancelled 入场动画取消时触发
+ * @event {() => void} before-leave 退场动画开始前触发
+ * @event {() => void} leave 退场动画开始时触发
+ * @event {() => void} after-leave 退场动画结束时触发
+ * @event {() => void} leave-cancelled 退场动画取消时触发
  */
 export default  _defineComponent({
   components: {
@@ -56,11 +85,22 @@ export default  _defineComponent({
     overlay: { type: Boolean, required: false },
     transparent: { type: Boolean, required: false },
     timeout: { type: Number, required: false },
-    duration: { type: Number, required: false }
+    duration: { type: Number, required: false },
+    onVisibleHook: { type: Function, required: false },
+    onBeforeEnter: { type: Function, required: false },
+    onEnter: { type: Function, required: false },
+    onAfterEnter: { type: Function, required: false },
+    onEnterCancelled: { type: Function, required: false },
+    onBeforeLeave: { type: Function, required: false },
+    onLeave: { type: Function, required: false },
+    onAfterLeave: { type: Function, required: false },
+    onLeaveCancelled: { type: Function, required: false }
   }, defaultToastAgentProps()),
-  setup(__props, { expose: __expose }) {
+  emits: ["update:visible", "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave", "leave", "after-leave", "leave-cancelled", "visible-hook"],
+  setup(__props, { expose: __expose, emit: __emit }) {
     __expose();
     const props = __props;
+    const emit = __emit;
     const innerProps = ref({ ...props });
     const elRef = ref();
     const imperative = {
@@ -80,12 +120,52 @@ export default  _defineComponent({
         elRef.value?.cancelHide();
       }
     };
+    const onUpdateVisible = (visible) => {
+      innerProps.value.visible = visible;
+      emit("update:visible", visible);
+    };
+    const onVisibleHook = (name) => {
+      emit("visible-hook", name);
+      innerProps.value.onVisibleHook?.(name);
+    };
+    const onBeforeEnter = () => {
+      emit("before-enter");
+      innerProps.value.onBeforeEnter?.();
+    };
+    const onEnter = () => {
+      emit("enter");
+      innerProps.value.onEnter?.();
+    };
+    const onAfterEnter = () => {
+      emit("after-enter");
+      innerProps.value.onAfterEnter?.();
+    };
+    const onEnterCancelled = () => {
+      emit("enter-cancelled");
+      innerProps.value.onEnterCancelled?.();
+    };
+    const onBeforeLeave = () => {
+      emit("before-leave");
+      innerProps.value.onBeforeLeave?.();
+    };
+    const onLeave = () => {
+      emit("leave");
+      innerProps.value.onLeave?.();
+    };
+    const onAfterLeave = () => {
+      emit("after-leave");
+      innerProps.value.onAfterLeave?.();
+    };
+    const onLeaveCancelled = () => {
+      emit("leave-cancelled");
+      innerProps.value.onLeaveCancelled?.();
+    };
     useImperative(
       imperativeName,
       imperative,
       computed(() => innerProps.value.id)
     );
-    const __returned__ = { props, innerProps, elRef, imperative, SarToast };
+    const __returned__ = { props, emit, innerProps, elRef, imperative, onUpdateVisible, onVisibleHook, onBeforeEnter, onEnter, onAfterEnter, onEnterCancelled, onBeforeLeave, onLeave, onAfterLeave, onLeaveCancelled, SarToast };
     return __returned__;
   }
 });

package/components/upload/README.md

@@ -43,7 +43,7 @@ import Upload from 'sard-uniapp/components/upload/upload.vue'
 
 ### 选择文件前置处理 <sup>1.19.2+</sup>
 
-通过传入 `beforeChoose` 函数可以在选择之前做处理，接受当前文件列表和 `next` 函数作参数，调用 `next(true)` 允许选择，调用 `next(false)` 不允许选择。
+通过传入 `beforeChoose` 函数可以在选择之前做处理，接受当前文件列表和 `next` 函数作参数，调用 `next(true)` 允许选择，调用 `next(false)` 不允许选择，也可传入一个配置对象自定义选择。
 
 @code('${DEMO_PATH}/upload/demo/BeforeChoose.vue')
 
@@ -87,28 +87,36 @@ import Upload from 'sard-uniapp/components/upload/upload.vue'
 
 ### UploadProps
 
-| 属性                             | 描述                                                                                                              | 类型                                                                   | 默认值                     |
-| -------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | -------------------------- |
-| root-class                       | 组件根元素类名                                                                                                    | string                                                                 | -                          |
-| root-style                       | 组件根元素样式                                                                                                    | StyleValue                                                             | -                          |
-| accept                           | 允许上传的文件类型                                                                                                | 'image' \| 'video'                                                     | 'image'                    |
-| multiple                         | 是否开启图片多选                                                                                                  | boolean                                                                | false                      |
-| source-type                      | 文件选择来源                                                                                                      | ('album' \| 'camera')[]                                                | ['album', 'camera']        |
-| size-type                        | 所选的图片的尺寸                                                                                                  | ('original' \| 'compressed')[]                                         | ['original', 'compressed'] |
-| max-duration                     | 拍摄视频最长拍摄时间，单位秒                                                                                      | number                                                                 | 60                         |
-| camera                           | 默认拉起的是前置或者后置摄像头。部分 Android 手机下由于系统 ROM 不支持无法生效                                    | 'back' \| 'front'                                                      | 'back'                     |
-| model-value (v-model)            | 已上传的文件列表                                                                                                  | UploadFileItem[]                                                       | -                          |
-| max-count                        | 文件上传数量限制                                                                                                  | number                                                                 | Number.MAX_SAFE_INTEGER    |
-| max-size                         | 文件大小限制，单位为 `byte`                                                                                       | number \| ((file: File) => boolean)                                    | Number.MAX_SAFE_INTEGER    |
-| over-size                        | 文件大小超过限制时触发                                                                                            | (fileItem: UploadFileItem \| UploadFileItem[]) => void                 | -                          |
-| disabled                         | 是否禁用文件上传                                                                                                  | boolean                                                                | false                      |
-| readonly                         | 是否将上传区域设置为只读状态                                                                                      | boolean                                                                | false                      |
-| before-choose <sup>1.19.2+</sup> | 文件选择前的回调，接受当前文件列表和 `next` 函数作参数，调用 `next(true)` 允许选择，调用 `next(false)` 不允许选择 | (fileList: UploadFileItem[], next: (allowed: boolean) => void) => void | -                          |
-| before-read                      | 文件读取前的回调，返回 false 可终止文件读取，支持返回 Promise                                                     | (file: File) => boolean \| Promise\<File>                              | -                          |
-| after-read                       | 文件读取完成后的回调                                                                                              | (fileItem: UploadFileItem \| UploadFileItem[]) => void                 | -                          |
-| removable                        | 是否可删除                                                                                                        | boolean                                                                | true                       |
-| before-remove                    | 文件删除前的回调，返回 false 可终止文件删除，支持返回 Promise                                                     | (index: number, fileItem: UploadFileItem) => boolean \| Promise\<any>  | -                          |
-| validate-event                   | 是否触发表单验证                                                                                                  | boolean                                                                | true                       |
+| 属性                             | 描述                                                                                                                                              | 类型                                                                                          | 默认值                     |
+| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | -------------------------- |
+| root-class                       | 组件根元素类名                                                                                                                                    | string                                                                                        | -                          |
+| root-style                       | 组件根元素样式                                                                                                                                    | StyleValue                                                                                    | -                          |
+| accept                           | 允许上传的文件类型                                                                                                                                | 'image' \| 'video'                                                                            | 'image'                    |
+| multiple                         | 是否开启图片多选                                                                                                                                  | boolean                                                                                       | false                      |
+| source-type                      | 文件选择来源                                                                                                                                      | ('album' \| 'camera')[]                                                                       | ['album', 'camera']        |
+| size-type                        | 所选的图片的尺寸                                                                                                                                  | ('original' \| 'compressed')[]                                                                | ['original', 'compressed'] |
+| max-duration                     | 拍摄视频最长拍摄时间，单位秒                                                                                                                      | number                                                                                        | 60                         |
+| camera                           | 默认拉起的是前置或者后置摄像头。部分 Android 手机下由于系统 ROM 不支持无法生效                                                                    | 'back' \| 'front'                                                                             | 'back'                     |
+| model-value (v-model)            | 已上传的文件列表                                                                                                                                  | UploadFileItem[]                                                                              | -                          |
+| max-count                        | 文件上传数量限制                                                                                                                                  | number                                                                                        | Number.MAX_SAFE_INTEGER    |
+| max-size                         | 文件大小限制，单位为 `byte`                                                                                                                       | number \| ((file: File) => boolean)                                                           | Number.MAX_SAFE_INTEGER    |
+| over-size                        | 文件大小超过限制时触发                                                                                                                            | (fileItem: UploadFileItem \| UploadFileItem[]) => void                                        | -                          |
+| disabled                         | 是否禁用文件上传                                                                                                                                  | boolean                                                                                       | false                      |
+| readonly                         | 是否将上传区域设置为只读状态                                                                                                                      | boolean                                                                                       | false                      |
+| before-choose <sup>1.19.2+</sup> | 文件选择前的回调，接受当前文件列表和 `next` 函数作参数，调用 `next(true)` 允许选择，调用 `next(false)` 不允许选择，或者传入一个配置对象自定义选择 | (fileList: UploadFileItem[], next: (allowed: boolean \| UploadSelectOptions) => void) => void | -                          |
+| before-read                      | 文件读取前的回调，返回 false 可终止文件读取，支持返回 Promise                                                                                     | (file: File) => boolean \| Promise\<File>                                                     | -                          |
+| after-read                       | 文件读取完成后的回调                                                                                                                              | (fileItem: UploadFileItem \| UploadFileItem[]) => void                                        | -                          |
+| removable                        | 是否可删除                                                                                                                                        | boolean                                                                                       | true                       |
+| before-remove                    | 文件删除前的回调，返回 false 可终止文件删除，支持返回 Promise                                                                                     | (index: number, fileItem: UploadFileItem) => boolean \| Promise\<any>                         | -                          |
+| validate-event                   | 是否触发表单验证                                                                                                                                  | boolean                                                                                       | true                       |
+
+### UploadSelectOptions <sup>1.21.0+</sup>
+
+```ts
+interface UploadSelectOptions {
+  sourceType?: ('album' | 'camera')[]
+}
+```
 
 ### UploadSlots
 

package/components/upload/common.d.ts

@@ -20,6 +20,9 @@ export interface UploadFileItem {
     message?: string;
     [key: PropertyKey]: any;
 }
+export interface UploadSelectOptions {
+    sourceType?: ('album' | 'camera')[];
+}
 export interface UploadProps {
     rootStyle?: StyleValue;
     rootClass?: string;
@@ -35,7 +38,7 @@ export interface UploadProps {
     overSize?: (fileItem: UploadFileItem[]) => void;
     disabled?: boolean;
     readonly?: boolean;
-    beforeChoose?: (fileList: UploadFileItem[], next: (allowed: boolean) => void) => void;
+    beforeChoose?: (fileList: UploadFileItem[], next: (allowed: boolean | UploadSelectOptions) => void) => void;
     beforeRead?: (file: UploadFile) => boolean | Promise<UploadFile>;
     afterRead?: (fileItem: UploadFileItem) => void;
     removable?: boolean;

package/components/upload/upload.vue

@@ -69,7 +69,7 @@ import { useFormContext, useFormItemContext } from "../form/common";
  * @property {(fileItem: UploadFileItem | UploadFileItem[]) => void} overSize 文件大小超过限制时触发，默认值：-。
  * @property {boolean} disabled 是否禁用文件上传，默认值：false。
  * @property {boolean} readonly 是否将上传区域设置为只读状态，默认值：false。
- * @property {(fileList: UploadFileItem[], next: (allowed: boolean) => void) => void} beforeChoose 文件选择前的回调，接受当前文件列表和 `next` 函数作参数，调用 `next(true)` 允许选择，调用 `next(false)` 不允许选择，默认值：-。
+ * @property {(fileList: UploadFileItem[], next: (allowed: boolean | UploadSelectOptions) => void) => void} beforeChoose 文件选择前的回调，接受当前文件列表和 `next` 函数作参数，调用 `next(true)` 允许选择，调用 `next(false)` 不允许选择，或者传入一个配置对象自定义选择，默认值：-。
  * @property {(file: File) => boolean | Promise\<File>} beforeRead 文件读取前的回调，返回 false 可终止文件读取，支持返回 Promise，默认值：-。
  * @property {(fileItem: UploadFileItem | UploadFileItem[]) => void} afterRead 文件读取完成后的回调，默认值：-。
  * @property {boolean} removable 是否可删除，默认值：true。
@@ -233,12 +233,12 @@ export default  _defineComponent({
       if (isSelectPending || isDisabled.value || isReadonly.value || innerValue.value.length >= props.maxCount) {
         return;
       }
-      const next = () => {
+      const next = (options = {}) => {
         chooseMedia({
           mediaType: props.accept,
           count: props.multiple ? 9999 : 1,
           sizeType: props.sizeType,
-          sourceType: props.sourceType,
+          sourceType: options.sourceType || props.sourceType,
           maxDuration: props.maxDuration,
           camera: props.camera,
           success(result) {
@@ -264,7 +264,7 @@ export default  _defineComponent({
         props.beforeChoose?.(innerValue.value, (allowed) => {
           isSelectPending = false;
           if (allowed) {
-            next();
+            next(typeof allowed === "object" ? allowed : void 0);
           }
         });
       } else {

package/components/waterfall/README.md

@@ -0,0 +1,162 @@
+---
+nav: 组件
+title: Waterfall
+subtitle: 瀑布流
+group: 布局
+version: 1.21.0+
+---
+
+## 介绍
+
+按照元素高度自适应排列，形成参差不齐的多列布局。
+
+## 引入
+
+```ts
+import Waterfall from 'sard-uniapp/components/waterfall/waterfall.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+瀑布流布局是使用绝对定位实现的，每一项内容需放置在 `WaterfallItem` 组件里面以便控制其位置；可放置任意内容，并不限定为具体模板。
+
+如果里面包含图片或其他使其在挂载后仍然不确定高度的组件时，需在加载完后调用瀑布流项的 `load` 插槽中的 `onLoad` 回调，以便计算其渲染后的高度并进行准确定位。
+
+瀑布流会按照渲染的顺序逐一将加载好的瀑布流项渲染出来；如果后面比前面要先加载完，也得等前面加载完才能渲染。因此，如果前面有一张很大的图片需要很久才能加载完，则会堵塞后面的渲染。
+
+因此，一次性不要加载太多图片，图片的尺寸也要有所限制。
+
+瀑布流组件的 `load` 事件会在所有项都加载完后触发，可以用来处理加载状态。
+
+@code('${DEMO_PATH}/waterfall/demo/Basic.vue')
+
+`SimulatedImage.vue`
+
+@code('${DEMO_PATH}/waterfall/demo/SimulatedImage.vue')
+
+### 已知宽高
+
+如果接口已将图片宽高信息返回，可以使用 `WaterfallLoad` 组件处理 `onLoad` 回调，会在挂载时调用，无需等待图片加载完即可渲染，可极大提高用户体验。
+
+`WaterfallLoad` 会根据 `width`、`height` 属性计算占用的空间。
+
+@code('${DEMO_PATH}/waterfall/demo/KnownSize.vue')
+
+### 真实案例
+
+需同时监听 `image` 组件的 `load` 和 `error` 事件，确保 `onLoad` 回调函数能调用，无论图片加载成功或失败。
+
+@code('${DEMO_PATH}/waterfall/demo/TrueCase.vue')
+
+### 最大等待时间
+
+为了避免因图片太大导致渲染阻塞，`WaterfallLoad` 组件提供了 `max-wait` 属性，在超过等待时间后取自定义的宽高进行渲染，无需等待图片加载完；加载时间小于等待时间时，则取图片实际的宽高进行渲染。
+
+宽高只用于计算比例来进行等比缩放，而不是最终的展示尺寸。
+
+@code('${DEMO_PATH}/waterfall/demo/MaxWait.vue')
+
+### 大图
+
+可使用 `column-gap` 和 `row-gap` 设置瀑布流项的间隔大小，单位为 px。
+
+@code('${DEMO_PATH}/waterfall/demo/BigImage.vue')
+
+### 自定义列数
+
+可使用 `columns` 属性设置任意的列数。
+
+@code('${DEMO_PATH}/waterfall/demo/Columns.vue')
+
+### 结合下拉刷新与触底加载
+
+可配合 `LoadMore` 和 `PullDownRefresh` 组件实现数据动态增减。
+
+因瀑布流在数据加载完后仍需等待图片加载，因此提供了 `onLoad` 方法，传递到此方法中的函数会在图片加载完后调用，可用于取消加载状态。
+
+@code('${DEMO_PATH}/waterfall/demo/Dynamic.vue')
+
+## API
+
+### WaterfallProps
+
+| 属性       | 描述           | 类型       | 默认值 |
+| ---------- | -------------- | ---------- | ------ |
+| root-class | 组件根元素类名 | string     | -      |
+| root-style | 组件根元素样式 | StyleValue | -      |
+| columns    | 自定义列数     | number     | 2      |
+| column-gap | 列间距，单位px | number     | 16     |
+| row-gap    | 行间距，单位px | number     | 16     |
+
+### WaterfallSlots
+
+| 插槽    | 描述           | 属性 |
+| ------- | -------------- | ---- |
+| default | 自定义默认内容 | -    |
+
+### WaterfallEmits
+
+| 事件      | 描述                     | 类型       |
+| --------- | ------------------------ | ---------- |
+| load      | 所有瀑布流项加载完时触发 | () => void |
+| loadstart | 瀑布流项项开始加载时触发 | () => void |
+
+### WaterfallExpose
+
+| 属性   | 描述                             | 类型                          |
+| ------ | -------------------------------- | ----------------------------- |
+| reflow | 重新排版                         | () => void                    |
+| onLoad | 添加回调，会在所有项加载完时调用 | (handler: () => void) => void |
+
+### WaterfallItemProps
+
+| 属性       | 描述           | 类型       | 默认值 |
+| ---------- | -------------- | ---------- | ------ |
+| root-class | 组件根元素类名 | string     | -      |
+| root-style | 组件根元素样式 | StyleValue | -      |
+
+### WaterfallItemSlots
+
+| 插槽    | 描述           | 属性                                        |
+| ------- | -------------- | ------------------------------------------- |
+| default | 自定义默认内容 | { onLoad: () => void; columnWidth: number } |
+
+default 插槽属性说明：
+
+- `onLoad`: 图片加载完后（无论成功或失败）需要调用此方法。
+- `columnWidth`: 列宽。
+
+### WaterfallLoadProps
+
+| 属性       | 描述                 | 类型       | 默认值 |
+| ---------- | -------------------- | ---------- | ------ |
+| root-class | 组件根元素类名       | string     | -      |
+| root-style | 组件根元素样式       | StyleValue | -      |
+| max-wait   | 最大等待时间，单位ms | number     | 0      |
+| width      | 自定义宽度           | number     | 320    |
+| height     | 自定义高度           | number     | 240    |
+
+### WaterfallLoadSlots
+
+| 插槽    | 描述           | 属性                                                |
+| ------- | -------------- | --------------------------------------------------- |
+| default | 自定义默认内容 | { onLoad: (event: any) => void; overtime: boolean } |
+
+default 插槽属性说明：
+
+- `onLoad`: 图片加载完后（成功和失败）可以调用此方法，加载完时间比 `max-wait` 要大则超时。
+- `overtime`: 是否超时。
+
+### WaterfallEmits
+
+| 事件 | 描述                                     | 类型       |
+| ---- | ---------------------------------------- | ---------- |
+| load | 加载完时触发，无论是正常加载完，还是超时 | () => void |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/waterfall/common.d.ts

@@ -0,0 +1,32 @@
+import { InjectionKey, type StyleValue } from 'vue';
+import { type WaterfallItemInfo } from '../waterfall-item/common';
+export interface WaterfallProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    columns?: number;
+    columnGap?: number;
+    rowGap?: number;
+}
+export declare const defaultWaterfallProps: {
+    columns: number;
+    columnGap: number;
+    rowGap: number;
+};
+export interface WaterfallSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface WaterfallEmits {
+    (e: 'load'): void;
+    (e: 'loadstart'): void;
+}
+export interface WaterfallExpose {
+    reflow: () => void;
+    onLoad: (handler: () => void) => void;
+}
+export interface WaterfallContext {
+    columnWidth: number;
+    addItem: (item: WaterfallItemInfo) => void;
+    removeItem: (item: WaterfallItemInfo) => void;
+    onItemLoad: () => void;
+}
+export declare const waterfallContextKey: InjectionKey<WaterfallContext>;

package/components/waterfall/common.js

@@ -0,0 +1,3 @@
+import { defaultConfig } from '../config';
+export const defaultWaterfallProps = defaultConfig.waterfall;
+export const waterfallContextKey = Symbol('waterfall-context');

package/components/waterfall/index.d.ts

@@ -0,0 +1 @@
+export type { WaterfallProps, WaterfallSlots, WaterfallEmits, WaterfallExpose, } from './common';

package/components/waterfall/index.js

@@ -0,0 +1 @@
+export {};

package/components/waterfall/index.scss

@@ -0,0 +1,7 @@
+@use '../style/base' as *;
+
+@include bem(waterfall) {
+  @include b() {
+    @include universal;
+  }
+}

package/components/waterfall/test/SimulatedImage.vue

@@ -0,0 +1,53 @@
+<template>
+  <view class="relative box-border" :style="{ paddingTop }">
+    <view class="absolute inset-0 flex justify-center items-center sbg-fourth">
+      <text>{{ meta.width }}</text>
+      <text>x</text>
+      <text>{{ meta.height }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { useTimeout } from "../../../use";
+import { random } from "../../../utils";
+import { computed, onMounted, ref } from "vue";
+export default  _defineComponent({
+  __name: "SimulatedImage",
+  props: {
+    meta: { type: Object, required: true }
+  },
+  emits: ["load"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const internalWidth = ref(320);
+    const internalHeight = ref(240);
+    const currWidth = computed(() => internalWidth.value);
+    const currHeight = computed(() => internalHeight.value);
+    const paddingTop = computed(
+      () => currHeight.value / currWidth.value * 100 + "%"
+    );
+    const { start } = useTimeout(
+      () => {
+        internalWidth.value = props.meta.width;
+        internalHeight.value = props.meta.height;
+        emit("load", {
+          detail: {
+            width: props.meta.width,
+            height: props.meta.height
+          }
+        });
+      },
+      random(50, 150)
+    );
+    onMounted(() => {
+      start();
+    });
+    const __returned__ = { props, emit, internalWidth, internalHeight, currWidth, currHeight, paddingTop, start };
+    return __returned__;
+  }
+});
+</script>

package/components/waterfall/variables.scss

@@ -0,0 +1,6 @@
+// #variables
+page,
+.sar-portal {
+  --sar-waterfall-duration: var(--sar-duration);
+}
+// #endvariables

package/components/waterfall/waterfall.d.ts

@@ -0,0 +1,23 @@
+import { type WaterfallProps, type WaterfallSlots } from './common';
+declare function __VLS_template(): Readonly<WaterfallSlots> & WaterfallSlots;
+declare const __VLS_component: import("vue").DefineComponent<WaterfallProps, {
+    reflow: () => void;
+    onLoad: (handler: () => void) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    load: () => any;
+    loadstart: () => any;
+}, string, import("vue").PublicProps, Readonly<WaterfallProps> & Readonly<{
+    onLoad?: (() => any) | undefined;
+    onLoadstart?: (() => any) | undefined;
+}>, {
+    columns: number;
+    columnGap: number;
+    rowGap: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};