sard-uniapp 1.21.1 → 1.22.0

package/components/dnd/README.md

@@ -0,0 +1,120 @@
+---
+nav: 组件
+title: Dnd
+subtitle: 拖放
+group: 反馈组件
+version: 1.22+
+---
+
+## 介绍
+
+`Dnd (Drag and Drop)` 拖放组件用于列表的拖放排序。
+
+`Dnd` 组件用于提供上下文；`DndItem` 组件用于展示拖放样式以及作为列表项容器；`DndHandle` 需放置在 `DndItem` 中，控制着拖拽区域，短按可进入拖拽状态，样式和内容可自定义。
+
+@warning
+
+暂不支持支付宝。
+
+@endwarning
+
+## 引入
+
+```ts
+import Dnd from 'sard-uniapp/components/dnd/dnd.vue'
+import DndItem from 'sard-uniapp/components/dnd-item/dnd-item.vue'
+import DndHandle from 'sard-uniapp/components/dnd-handle/dnd-handle.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+通过 `v-model:list` 双向绑定列表，可在拖放时修改绑定数组的元素顺序；使用默认插槽的 `list` 参数渲染列表，需绑定 `itemInfo` 和 `key` 到 `DndItem` 组件；`key` 和数组元素的引用一一对应，无需自行处理循环组件时的唯一性问题；`data` 是原始数组的元素项。
+
+下面演示了拖拽组件和列表组件的组合使用。因每个列表项被拖拽项包围分割，没了边框，因此需使用 `Divider` 组件添加边框。
+
+@code('${DEMO_PATH}/dnd/demo/Basic.vue')
+
+### 表单列表
+
+下面演示了拖放组件组合表单组件实现的表单列表增删改以及拖放排序的效果。
+
+@code('${DEMO_PATH}/dnd/demo/FormList.vue')
+
+## API
+
+### DndProps\<T>
+
+| 属性       | 描述           | 类型       | 默认值 |
+| ---------- | -------------- | ---------- | ------ |
+| root-class | 组件根元素类名 | string     | -      |
+| root-style | 组件根元素样式 | StyleValue | -      |
+| list       | 组件根元素样式 | T[]        | -      |
+
+### DndSlots\<T>
+
+| 插槽    | 描述           | 属性                       |
+| ------- | -------------- | -------------------------- |
+| default | 自定义默认内容 | {list: DndListItem\<T>[] } |
+
+### DndEmits\<T>
+
+| 事件            | 描述                         | 类型                                                        |
+| --------------- | ---------------------------- | ----------------------------------------------------------- |
+| item-drag-start | 拖拽开始时触发               | (event: { itemIndex: number }) => void                      |
+| item-drag-move  | 拖拽项在拖拽范围内移动时触发 | (event: { itemIndex: number; insertIndex: number }) => void |
+| item-drop       | 拖拽被释放时触发             | (event: { itemIndex: number; insertIndex: number }) => void |
+| update:list     | 拖拽被释放时触发             | (list: T[]) => void                                         |
+
+### DndItemProps
+
+| 属性       | 描述           | 类型        | 默认值 |
+| ---------- | -------------- | ----------- | ------ |
+| root-class | 组件根元素类名 | string      | -      |
+| root-style | 组件根元素样式 | StyleValue  | -      |
+| item-info  | 组件根元素样式 | DndItemInfo | -      |
+
+### DndItemSlots
+
+| 插槽    | 描述           | 属性 |
+| ------- | -------------- | ---- |
+| default | 自定义默认内容 | -    |
+
+### DndHandleProps
+
+| 属性       | 描述           | 类型       | 默认值 |
+| ---------- | -------------- | ---------- | ------ |
+| root-class | 组件根元素类名 | string     | -      |
+| root-style | 组件根元素样式 | StyleValue | -      |
+
+### DndHandleSlots
+
+| 插槽    | 描述           | 属性 |
+| ------- | -------------- | ---- |
+| default | 自定义默认内容 | -    |
+
+### DndListItem\<T>
+
+```ts
+export interface DndListItem<T> {
+  data: UnwrapRef<T>
+  itemInfo: DndItemInfo
+  key: string
+}
+```
+
+### DndItemInfo
+
+```ts
+export interface DndItemInfo {
+  offset: number
+  dragging: boolean
+}
+```
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/dnd/common.d.ts

@@ -0,0 +1,49 @@
+import { type NodeRect } from '../../utils';
+import { type UnwrapRef, type InjectionKey, type StyleValue } from 'vue';
+export interface DndProps<T> {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    list?: T[];
+}
+export interface DndSlots<T> {
+    default?(props: {
+        list: DndListItem<T>[];
+    }): any;
+}
+export interface DndEmits<T> {
+    'item-drag-start': [event: {
+        itemIndex: number;
+    }];
+    'item-drag-move': [event: {
+        itemIndex: number;
+        insertIndex: number;
+    }];
+    'item-drop': [event: {
+        itemIndex: number;
+        insertIndex: number;
+    }];
+    'update:list': [list: T[]];
+}
+export interface DndExpose {
+}
+export interface DndListItem<T> {
+    data: UnwrapRef<T>;
+    itemInfo: DndItemInfo;
+    key: string;
+}
+export interface DndItemInfo {
+    offset: number;
+    dragging: boolean;
+}
+export interface DndContext<T> {
+    list: DndListItem<T>[];
+    dragging: boolean;
+    currentHeight: number;
+    dragStart: (itemIndex: number) => void;
+    dragMove: (itemIndex: number, insertIndex: number) => void;
+    drop: (itemIndex: number, insertIndex: number) => void;
+    rectItems: (() => Promise<NodeRect>)[];
+    addRectItem: (getRect: () => Promise<NodeRect>) => void;
+    removeRectItem: (getRect: () => Promise<NodeRect>) => void;
+}
+export declare const dndContextKey: InjectionKey<DndContext<any>>;

package/components/dnd/common.js

@@ -0,0 +1 @@
+export const dndContextKey = Symbol('dnd-context');

package/components/dnd/dnd.d.ts

@@ -0,0 +1,37 @@
+import { type DndProps, type DndSlots, type DndExpose } from './common';
+declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_Prettify<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_Prettify<Pick<Partial<{}> & Omit<{
+        readonly "onItem-drag-start"?: ((event: {
+            itemIndex: number;
+        }) => any) | undefined;
+        readonly "onItem-drag-move"?: ((event: {
+            itemIndex: number;
+            insertIndex: number;
+        }) => any) | undefined;
+        readonly "onItem-drop"?: ((event: {
+            itemIndex: number;
+            insertIndex: number;
+        }) => any) | undefined;
+        readonly "onUpdate:list"?: ((list: T[]) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onItem-drag-start" | "onItem-drag-move" | "onItem-drop" | "onUpdate:list"> & DndProps<T>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<DndExpose>): void;
+    attrs: any;
+    slots: ReturnType<() => Readonly<DndSlots<T>> & DndSlots<T>>;
+    emit: (((evt: "item-drag-start", event: {
+        itemIndex: number;
+    }) => void) & ((evt: "item-drag-move", event: {
+        itemIndex: number;
+        insertIndex: number;
+    }) => void) & ((evt: "item-drop", event: {
+        itemIndex: number;
+        insertIndex: number;
+    }) => void) & ((evt: "update:list", list: T[]) => void)) & {};
+}>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/components/dnd/dnd.vue

@@ -0,0 +1,136 @@
+<template>
+  <view :class="dndClass" :style="dndStyle">
+    <slot :list="dndList"></slot>
+
+    <!-- #ifdef MP-ALIPAY -->
+    <view
+      :class="
+        classNames(
+          bem.e('disable-scroll'),
+          bem.em('disable-scroll', 'dragging', dragging),
+        )
+      "
+    ></view>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { computed, provide, reactive, ref, unref, watch } from "vue";
+import {
+  classNames,
+  stringifyStyle,
+  createBem,
+  uniqid,
+  arrayMove
+} from "../../utils";
+import {
+  dndContextKey
+} from "./common";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {T[]} list 组件根元素样式，默认值：-。
+ * @event {(event: { itemIndex: number }) => void} item-drag-start 拖拽开始时触发
+ * @event {(event: { itemIndex: number; insertIndex: number }) => void} item-drag-move 拖拽项在拖拽范围内移动时触发
+ * @event {(event: { itemIndex: number; insertIndex: number }) => void} item-drop 拖拽被释放时触发
+ * @event {(list: T[]) => void} update 拖拽被释放时触发
+ */
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "dnd",
+  props: {
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    list: { type: Array, required: false }
+  },
+  emits: ["item-drag-start", "item-drag-move", "item-drop", "update:list"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const bem = createBem("dnd");
+    const keyMap =  new WeakMap();
+    const innerList = ref(props.list || []);
+    watch(
+      () => props.list,
+      () => {
+        innerList.value = props.list || [];
+      }
+    );
+    const dndList = computed(() => {
+      return unref(innerList.value).map((item) => {
+        const key = keyMap.get(item) || uniqid();
+        keyMap.set(item, key);
+        return reactive({
+          data: item,
+          itemInfo: reactive({
+            offset: 0,
+            dragging: false
+          }),
+          key
+        });
+      });
+    });
+    const dragStart = (itemIndex) => {
+      emit("item-drag-start", { itemIndex });
+    };
+    const dragMove = (itemIndex, insertIndex) => {
+      emit("item-drag-move", { itemIndex, insertIndex });
+    };
+    const drop = (itemIndex, insertIndex) => {
+      if (itemIndex !== insertIndex) {
+        innerList.value = arrayMove(props.list || [], itemIndex, insertIndex);
+        emit("update:list", innerList.value);
+      }
+      emit("item-drop", { itemIndex, insertIndex });
+    };
+    const dragging = ref(false);
+    const rectItems = [];
+    const addRectItem = (getRect) => {
+      if (!rectItems.includes(getRect)) {
+        rectItems.push(getRect);
+      }
+    };
+    const removeRectItem = (getRect) => {
+      if (rectItems.includes(getRect)) {
+        rectItems.splice(rectItems.indexOf(getRect), 1);
+      }
+    };
+    provide(
+      dndContextKey,
+      reactive({
+        list: dndList,
+        dragging,
+        currentHeight: 0,
+        dragStart,
+        dragMove,
+        drop,
+        rectItems,
+        addRectItem,
+        removeRectItem
+      })
+    );
+    __expose({});
+    const dndClass = computed(() => {
+      return classNames(bem.b(), props.rootClass);
+    });
+    const dndStyle = computed(() => {
+      return stringifyStyle(props.rootStyle);
+    });
+    const __returned__ = { props, emit, bem, keyMap, innerList, dndList, dragStart, dragMove, drop, dragging, rectItems, addRectItem, removeRectItem, dndClass, dndStyle, get classNames() {
+      return classNames;
+    } };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/dnd/index.d.ts

@@ -0,0 +1 @@
+export type { DndProps, DndSlots, DndEmits, DndExpose } from './common';

package/components/dnd/index.js

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

package/components/dnd/index.scss

@@ -0,0 +1,11 @@
+@use '../style/base' as *;
+
+@include bem(dnd) {
+  @include b() {
+    @include universal;
+  }
+
+  /* #ifdef MP-ALIPAY */
+  @include disable-scroll;
+  /* #endif */
+}

package/components/dnd/variables.scss

@@ -0,0 +1,7 @@
+// #variables
+page,
+.sar-portal {
+  --sar-dnd-duration: var(--sar-duration);
+  --sar-dnd-dragging-shadow: var(--sar-shadow-dragging);
+}
+// #endvariables

package/components/dnd-handle/common.d.ts

@@ -0,0 +1,12 @@
+import { type StyleValue } from 'vue';
+export interface DndHandleProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+}
+export interface DndHandleSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface DndHandleEmits {
+}
+export interface DndHandleExpose {
+}

package/components/dnd-handle/common.js

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

package/components/dnd-handle/dnd-handle.d.ts

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

@@ -0,0 +1,89 @@
+<template>
+  <view
+    :class="dndHandleClass"
+    :style="dndHandleStyle"
+    @touchstart.stop.prevent="onDragTouchStart"
+    @touchmove.stop.prevent="onDragTouchMove"
+    @touchend="onDragTouchEnd"
+    @touchcancel="onDragTouchEnd"
+    @mousedown.stop="onDragMouseDown"
+  >
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { computed, inject, ref } from "vue";
+import { classNames, stringifyStyle, createBem } from "../../utils";
+import { useMouseDown, useSimulatedPress } from "../../use";
+import { dndItemContextKey } from "../dnd-item/common";
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "dnd-handle",
+  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("dnd-handle");
+    const itemContext = inject(dndItemContextKey);
+    if (!itemContext) {
+      throw new Error("DndHandle must be included in DndItem.");
+    }
+    const dragging = ref(false);
+    const onDragTouchStart = (event) => {
+      itemContext.immediateStart();
+      onDragSimulatedPressTouchStart(event);
+    };
+    const onDragTouchMove = (event) => {
+      onDragSimulatedPressTouchMove(event);
+    };
+    const onDragTouchEnd = () => {
+      dragging.value = false;
+      onDragSimulatedPressTouchEnd();
+    };
+    const [
+      onDragSimulatedPressTouchStart,
+      onDragSimulatedPressTouchMove,
+      onDragSimulatedPressTouchEnd
+    ] = useSimulatedPress({
+      start: () => {
+        dragging.value = true;
+        itemContext.start();
+      },
+      move: (_, { delta }) => {
+        itemContext.move(delta.y);
+      },
+      end: () => {
+        itemContext.end();
+      },
+      duration: 150
+    });
+    const onDragMouseDown = useMouseDown(
+      onDragTouchStart,
+      onDragTouchMove,
+      onDragTouchEnd
+    );
+    __expose({});
+    const dndHandleClass = computed(() => {
+      return classNames(bem.b(), bem.m("dragging", dragging), props.rootClass);
+    });
+    const dndHandleStyle = computed(() => {
+      return stringifyStyle(props.rootStyle);
+    });
+    const __returned__ = { props, bem, itemContext, dragging, onDragTouchStart, onDragTouchMove, onDragTouchEnd, onDragSimulatedPressTouchStart, onDragSimulatedPressTouchMove, onDragSimulatedPressTouchEnd, onDragMouseDown, dndHandleClass, dndHandleStyle };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/dnd-handle/index.d.ts

@@ -0,0 +1 @@
+export type { DndHandleProps, DndHandleSlots, DndHandleEmits, DndHandleExpose, } from './common';

package/components/dnd-handle/index.js

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

package/components/dnd-handle/index.scss

@@ -0,0 +1,13 @@
+@use '../style/base' as *;
+
+@include bem(dnd-handle) {
+  @include b() {
+    @include universal;
+    cursor: pointer;
+    touch-action: none;
+  }
+
+  @include m(dragging) {
+    touch-action: none;
+  }
+}

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

@@ -0,0 +1,21 @@
+import { InjectionKey, type StyleValue } from 'vue';
+import { DndItemInfo } from '../dnd/common';
+export interface DndItemProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    itemInfo: DndItemInfo;
+}
+export interface DndItemSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface DndItemEmits {
+}
+export interface DndItemExpose {
+}
+export interface DndItemContext {
+    immediateStart: () => void;
+    start: () => void;
+    move: (delta: number) => void;
+    end: () => void;
+}
+export declare const dndItemContextKey: InjectionKey<DndItemContext>;

package/components/dnd-item/common.js

@@ -0,0 +1 @@
+export const dndItemContextKey = Symbol('dnd-item-context');

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

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