sard-uniapp 1.20.1 → 1.21.0

package/components/waterfall/waterfall.vue

@@ -0,0 +1,182 @@
+<template>
+  <view :class="waterfallClass" :style="waterfallStyle">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
+import {
+  computed,
+  getCurrentInstance,
+  nextTick,
+  onMounted,
+  provide,
+  reactive,
+  ref,
+  watch
+} from "vue";
+import {
+  classNames,
+  stringifyStyle,
+  createBem,
+  getBoundingClientRect,
+  uniqid,
+  throttle
+} from "../../utils";
+import {
+  defaultWaterfallProps,
+  waterfallContextKey
+} from "./common";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {number} columns 自定义列数，默认值：2。
+ * @property {number} columnGap 列间距，单位px，默认值：16。
+ * @property {number} rowGap 行间距，单位px，默认值：16。
+ * @event {() => void} load 加载完时触发，无论是正常加载完，还是超时
+ * @event {() => void} loadstart 瀑布流项项开始加载时触发
+ */
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "waterfall",
+  props:  _mergeDefaults({
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    columns: { type: Number, required: false },
+    columnGap: { type: Number, required: false },
+    rowGap: { type: Number, required: false }
+  }, defaultWaterfallProps),
+  emits: ["load", "loadstart"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const bem = createBem("waterfall");
+    const containerId = uniqid();
+    const instance = getCurrentInstance();
+    const containerWidth = ref(0);
+    const containerHeight = ref(0);
+    const columnWidth = computed(() => {
+      return (containerWidth.value - (props.columns - 1) * props.columnGap) / props.columns;
+    });
+    onMounted(async () => {
+      containerWidth.value = (await getBoundingClientRect(`.${containerId}`, instance)).width;
+    });
+    let loadStatus = "idle";
+    let loadedHandlers = [];
+    const onLoad = (handler) => {
+      nextTick(() => {
+        if (loadStatus === "idle") {
+          handler();
+        } else {
+          if (!loadedHandlers.includes(handler)) {
+            loadedHandlers.push(handler);
+          }
+        }
+      });
+    };
+    const updateLoadStatus = () => {
+      const includeLoading = items.some((item) => !item.loaded);
+      if (includeLoading) {
+        if (loadStatus === "idle") {
+          loadStatus = "busy";
+          emit("loadstart");
+        }
+      } else {
+        if (loadStatus === "busy") {
+          loadedHandlers.forEach((handler) => handler());
+          loadedHandlers = [];
+          loadStatus = "idle";
+          emit("load");
+        }
+      }
+    };
+    const items = [];
+    const addItem = (item) => {
+      if (!items.includes(item)) {
+        items.push(item);
+        reflow();
+        updateLoadStatus();
+      }
+    };
+    const removeItem = (item) => {
+      if (items.includes(item)) {
+        items.splice(items.indexOf(item), 1);
+        reflow();
+        updateLoadStatus();
+      }
+    };
+    const reflow = throttle(async () => {
+      const columns = Array(props.columns).fill(0).map((_, index) => {
+        return { colIndex: index, height: 0 };
+      });
+      for (const item of items) {
+        if (!item.loaded) {
+          break;
+        }
+        columns.sort((a, b) => a.height - b.height);
+        const minColumn = columns[0];
+        if (!minColumn) break;
+        await item.beforeReflow();
+        item.top = minColumn.height === 0 ? 0 : minColumn.height + props.rowGap;
+        item.left = (props.columnGap + columnWidth.value) * minColumn.colIndex;
+        item.visible = true;
+        minColumn.height = item.top + item.height;
+      }
+      containerHeight.value = columns.sort((a, b) => b.height - a.height)[0].height;
+    }, 50);
+    const onItemLoad = () => {
+      reflow();
+      updateLoadStatus();
+    };
+    watch([() => props.columns, () => props.columnGap, () => props.rowGap], () => {
+      setTimeout(() => {
+        reflow();
+      }, 50);
+    });
+    provide(
+      waterfallContextKey,
+      reactive({
+        addItem,
+        removeItem,
+        onItemLoad,
+        columnWidth
+      })
+    );
+    __expose({
+      reflow,
+      onLoad
+    });
+    const waterfallClass = computed(() => {
+      return classNames(bem.b(), containerId, props.rootClass);
+    });
+    const waterfallStyle = computed(() => {
+      return stringifyStyle(
+        {
+          height: containerHeight.value + "px"
+        },
+        props.rootStyle
+      );
+    });
+    const __returned__ = { props, emit, bem, containerId, instance, containerWidth, containerHeight, columnWidth, get loadStatus() {
+      return loadStatus;
+    }, set loadStatus(v) {
+      loadStatus = v;
+    }, get loadedHandlers() {
+      return loadedHandlers;
+    }, set loadedHandlers(v) {
+      loadedHandlers = v;
+    }, onLoad, updateLoadStatus, items, addItem, removeItem, reflow, onItemLoad, waterfallClass, waterfallStyle };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/waterfall-item/common.d.ts

@@ -0,0 +1,23 @@
+import { type StyleValue } from 'vue';
+export interface WaterfallItemProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+}
+export interface WaterfallItemSlots {
+    default?(props: {
+        onLoad: () => void;
+        columnWidth: number;
+    }): any;
+}
+export interface WaterfallItemEmits {
+}
+export interface WaterfallItemExpose {
+}
+export interface WaterfallItemInfo {
+    height: number;
+    loaded: boolean;
+    visible: boolean;
+    top: number;
+    left: number;
+    beforeReflow: () => Promise<void>;
+}

package/components/waterfall-item/common.js

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

package/components/waterfall-item/index.d.ts

@@ -0,0 +1 @@
+export type { WaterfallItemProps, WaterfallItemSlots, WaterfallItemEmits, WaterfallItemExpose, } from './common';

package/components/waterfall-item/index.js

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

package/components/waterfall-item/index.scss

@@ -0,0 +1,18 @@
+@use '../style/base' as *;
+
+@include bem(waterfall-item) {
+  @include b() {
+    @include universal;
+    position: absolute;
+    pointer-events: none;
+    opacity: 0;
+    transition:
+      opacity var(--sar-waterfall-duration),
+      transform var(--sar-waterfall-duration);
+  }
+
+  @include m(show) {
+    pointer-events: auto;
+    opacity: 1;
+  }
+}

package/components/waterfall-item/waterfall-item.d.ts

@@ -0,0 +1,10 @@
+import { type WaterfallItemProps, type WaterfallItemSlots } from './common';
+declare function __VLS_template(): Readonly<WaterfallItemSlots> & WaterfallItemSlots;
+declare const __VLS_component: import("vue").DefineComponent<WaterfallItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<WaterfallItemProps> & Readonly<{}>, {}, {}, {}, {}, 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;
+    };
+};

package/components/waterfall-item/waterfall-item.vue

@@ -0,0 +1,115 @@
+<template>
+  <view :class="waterfallItemClass" :style="waterfallItemStyle">
+    <slot :on-load="onLoad" :column-width="context.columnWidth"></slot>
+  </view>
+</template>
+
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import {
+  computed,
+  getCurrentInstance,
+  inject,
+  onMounted,
+  onBeforeUnmount,
+  reactive,
+  ref,
+  watch
+} from "vue";
+import {
+  classNames,
+  stringifyStyle,
+  createBem,
+  uniqid,
+  getBoundingClientRect
+} from "../../utils";
+import { waterfallContextKey } from "../waterfall/common";
+import { useTimeout } from "../../use";
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "waterfall-item",
+  props: {
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const bem = createBem("waterfall-item");
+    const instance = getCurrentInstance();
+    const itemId = uniqid();
+    const item = reactive({
+      loaded: false,
+      visible: false,
+      height: 0,
+      top: 0,
+      left: 0,
+      beforeReflow: async () => {
+        await updateHeight();
+      }
+    });
+    const updateHeight = async () => {
+      try {
+        item.height = (await getBoundingClientRect(`.${itemId}`, instance)).height;
+      } catch {
+      }
+    };
+    const context = inject(waterfallContextKey);
+    const onLoad = () => {
+      if (!item.loaded) {
+        item.loaded = true;
+        context.onItemLoad();
+      }
+    };
+    onMounted(() => {
+      context.addItem(item);
+    });
+    onBeforeUnmount(() => {
+      context.removeItem(item);
+    });
+    __expose({});
+    const waterfallItemClass = computed(() => {
+      return classNames(
+        bem.b(),
+        bem.m("show", item.visible),
+        itemId,
+        props.rootClass
+      );
+    });
+    const laterVisible = ref(false);
+    const { start } = useTimeout(() => {
+      laterVisible.value = true;
+    }, 100);
+    watch(
+      () => item.visible,
+      () => {
+        if (item.visible) {
+          start();
+        } else {
+          laterVisible.value = false;
+        }
+      }
+    );
+    const waterfallItemStyle = computed(() => {
+      return stringifyStyle(
+        {
+          width: context.columnWidth + "px",
+          transform: `translate3d(${item.left}px,${item.top}px,0px)`,
+          transition: laterVisible.value ? `opacity var(--sar-waterfall-duration),transform var(--sar-waterfall-duration)` : `opacity var(--sar-waterfall-duration)`
+        },
+        props.rootStyle
+      );
+    });
+    const __returned__ = { props, bem, instance, itemId, item, updateHeight, context, onLoad, waterfallItemClass, laterVisible, start, waterfallItemStyle };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/waterfall-load/common.d.ts

@@ -0,0 +1,19 @@
+import { type StyleValue } from 'vue';
+export interface WaterfallLoadProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    maxWait?: number;
+    width?: number;
+    height?: number;
+}
+export interface WaterfallLoadSlots {
+    default?(props: {
+        onLoad: (event: any) => void;
+        overtime: boolean;
+    }): any;
+}
+export interface WaterfallLoadEmits {
+    (e: 'load'): void;
+}
+export interface WaterfallLoadExpose {
+}

package/components/waterfall-load/common.js

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

package/components/waterfall-load/index.d.ts

@@ -0,0 +1 @@
+export type { WaterfallLoadProps, WaterfallLoadSlots, WaterfallLoadEmits, WaterfallLoadExpose, } from './common';

package/components/waterfall-load/index.js

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

package/components/waterfall-load/index.scss

@@ -0,0 +1,12 @@
+@use '../style/base' as *;
+
+@include bem(waterfall-load) {
+  @include b() {
+    @include universal;
+  }
+
+  @include e(content) {
+    position: absolute;
+    inset: 0;
+  }
+}

package/components/waterfall-load/waterfall-load.d.ts

@@ -0,0 +1,14 @@
+import { type WaterfallLoadProps, type WaterfallLoadSlots } from './common';
+declare function __VLS_template(): Readonly<WaterfallLoadSlots> & WaterfallLoadSlots;
+declare const __VLS_component: import("vue").DefineComponent<WaterfallLoadProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    load: () => any;
+}, string, import("vue").PublicProps, Readonly<WaterfallLoadProps> & Readonly<{
+    onLoad?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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;
+    };
+};

package/components/waterfall-load/waterfall-load.vue

@@ -0,0 +1,87 @@
+<template>
+  <view :class="waterfallLoadClass" :style="waterfallLoadStyle">
+    <view :class="bem.e('content')">
+      <slot :on-load="onLoad" :overtime="overtime"></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { computed, onMounted, ref } from "vue";
+import { classNames, createBem, stringifyStyle } from "../../utils";
+import { useTimeout } from "../../use";
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "waterfall-load",
+  props: {
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    maxWait: { type: Number, required: false },
+    width: { type: Number, required: false },
+    height: { type: Number, required: false }
+  },
+  emits: ["load"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const bem = createBem("waterfall-load");
+    let loaded = false;
+    const overtime = ref(false);
+    const currWidth = ref(props.width || 320);
+    const currHeight = ref(props.height || 240);
+    const paddingTop = computed(
+      () => currHeight.value / currWidth.value * 100 + "%"
+    );
+    const { start } = useTimeout(
+      () => {
+        if (!loaded) {
+          overtime.value = true;
+          emit("load");
+        }
+      },
+      () => props.maxWait || 0
+    );
+    const onLoad = ({ detail }) => {
+      loaded = true;
+      if (!overtime.value) {
+        if (detail.width) {
+          currWidth.value = detail.width;
+          currHeight.value = detail.height;
+        }
+        emit("load");
+      }
+    };
+    onMounted(() => {
+      start();
+    });
+    __expose({});
+    const waterfallLoadClass = computed(() => {
+      return classNames(bem.b(), props.rootClass);
+    });
+    const waterfallLoadStyle = computed(() => {
+      return stringifyStyle(
+        {
+          paddingTop: paddingTop.value
+        },
+        props.rootStyle
+      );
+    });
+    const __returned__ = { props, emit, bem, get loaded() {
+      return loaded;
+    }, set loaded(v) {
+      loaded = v;
+    }, overtime, currWidth, currHeight, paddingTop, start, onLoad, waterfallLoadClass, waterfallLoadStyle };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/global.d.ts

@@ -125,6 +125,9 @@ declare module 'vue' {
     SarToastAgent: typeof import('./components/toast-agent/toast-agent').default
     SarTree: typeof import('./components/tree/tree').default
     SarUpload: typeof import('./components/upload/upload').default
+    SarWaterfall: typeof import('./components/waterfall/waterfall').default
+    SarWaterfallItem: typeof import('./components/waterfall-item/waterfall-item').default
+    SarWaterfallLoad: typeof import('./components/waterfall-load/waterfall-load').default
   }
 }
 

package/index.d.ts

@@ -106,5 +106,8 @@ export * from './components/toast';
 export * from './components/toast-agent';
 export * from './components/tree';
 export * from './components/upload';
+export * from './components/waterfall';
+export * from './components/waterfall-item';
+export * from './components/waterfall-load';
 export * from './use';
 export * from './utils';

package/index.js

@@ -106,5 +106,8 @@ export * from './components/toast';
 export * from './components/toast-agent';
 export * from './components/tree';
 export * from './components/upload';
+export * from './components/waterfall';
+export * from './components/waterfall-item';
+export * from './components/waterfall-load';
 export * from './use';
 export * from './utils';

package/index.scss

@@ -75,3 +75,4 @@
 @use './components/toast/variables.scss' as *;
 @use './components/tree/variables.scss' as *;
 @use './components/upload/variables.scss' as *;
+@use './components/waterfall/variables.scss' as *;

package/package.json

@@ -2,7 +2,7 @@
   "id": "sard-uniapp",
   "name": "sard-uniapp",
   "displayName": "sard-uniapp",
-  "version": "1.20.1",
+  "version": "1.21.0",
   "description": "sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库",
   "main": "index.js",
   "scripts": {

package/utils/utils.d.ts

@@ -57,4 +57,4 @@ export declare const noop: () => void;
 export declare function getMayPrimitiveOption(option: string | number | boolean | {
     [key: PropertyKey]: any;
 }, key: string): any;
-export declare function sleep(time: number): Promise<unknown>;
+export declare function sleep(time: number): Promise<void>;