sard-uniapp 1.21.1 → 1.22.0

package/components/radio-input/radio-input.vue

@@ -7,9 +7,14 @@
     :clearable="clearable"
     :root-class="rootClass"
     :root-style="rootStyle"
+    :internal-arrow="$slots.arrow ? 1 : 0"
+    :input-props="inputProps"
     @clear="onClear"
     @click="show"
   >
+    <template v-if="$slots.arrow" #arrow>
+      <slot name="arrow"></slot>
+    </template>
     <sar-radio-popout
       v-model:visible="innerVisible"
       v-model="innerValue"
@@ -63,6 +68,9 @@ import { usePopoutInput } from "../../use";
  * @property {boolean} clearable 是否显示清空按钮，默认值：false。
  * @property {string} placeholder 输入框占位符内容，默认值：-。
  * @property {() => any} valueOnClear 设置点击清除按钮后的值，默认值：() => undefined。
+ * @property {string} arrow 自定义箭头图标名，默认值：'caret-right'。
+ * @property {string} arrowFamily 自定义箭头图标字体，默认值：'sari'。
+ * @property {InputProps} inputProps 自定义输入框组件属性，默认值：-。
  * @event {(visible: boolean) => void} update 弹出框显隐时触发
  * @event {(value: any | undefined) => void} change 单选输入组件值改变时触发
  */
@@ -101,7 +109,11 @@ export default  _defineComponent({
     placeholder: { type: String, required: false },
     clearable: { type: Boolean, required: false },
     loading: { type: Boolean, required: false },
-    multiline: { type: Boolean, required: false }
+    multiline: { type: Boolean, required: false },
+    arrow: { type: String, required: false },
+    arrowFamily: { type: String, required: false },
+    internalArrow: { type: Number, required: false },
+    inputProps: { type: Object, required: false }
   }, defaultRadioInputProps()),
   emits: ["update:visible", "update:model-value", "change"],
   setup(__props, { expose: __expose, emit: __emit }) {

package/components/share-sheet/share-sheet.vue

@@ -95,11 +95,11 @@ import {
  * @property {boolean} overlay 是否显示遮罩，默认值：true。
  * @property {string} background 遮罩背景色，默认值：-。
  * @property {boolean} transparent 透明遮罩，默认值：false。
+ * @property {boolean} overlayClosable 点击遮罩后是否关闭，默认值：true。
  * @property {ShareSheetItem[] | ShareSheetItem[][]} itemList 面板选项列表，默认值：[]。
  * @property {string} title 面板标题，默认值：-。
  * @property {string} description 面板描述，默认值：-。
  * @property {string} cancel 取消按钮内容，默认值：-。
- * @property {boolean} overlayClosable 点击遮罩后是否关闭，默认值：true。
  * @property {(type: 'close' | 'cancel' | 'select') => boolean | Promise\<any>} beforeClose 关闭前的回调，返回 `false` 或 `rejected` 状态的 `Promise` 可阻止关闭，默认值：-。
  * @event {(visible: boolean) => void} update 分享面板显隐时触发
  * @event {() => void} close 点击遮罩时触发

package/components/stepper/common.d.ts

@@ -2,7 +2,7 @@ import { type StyleValue } from 'vue';
 export interface StepperProps {
     rootStyle?: StyleValue;
     rootClass?: string;
-    modelValue?: number | string;
+    modelValue?: number | string | null;
     min?: number;
     max?: number;
     valueOnClear?: number | 'min' | 'max';

package/components/stepper/stepper.vue

@@ -102,7 +102,7 @@ export default  _defineComponent({
   props:  _mergeDefaults({
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
-    modelValue: { type: [Number, String], required: false },
+    modelValue: { type: [Number, String, null], required: false },
     min: { type: Number, required: false },
     max: { type: Number, required: false },
     valueOnClear: { type: [Number, String], required: false },

package/components/style/mixins/disable-scroll.scss

@@ -0,0 +1,14 @@
+@use './bem' as *;
+
+@mixin disable-scroll {
+  position: fixed;
+  inset: 0;
+  z-index: var(--sar-disable-scroll-z-index);
+  display: none;
+  background-color: transparent;
+  touch-action: none;
+
+  @include m(dragging) {
+    display: block;
+  }
+}

package/components/style/mixins.scss

@@ -7,3 +7,4 @@
 @forward './mixins/universal';
 @forward './mixins/bem';
 @forward './mixins/scroll-shadow';
+@forward './mixins/disable-scroll';

package/components/style/variables.scss

@@ -172,6 +172,8 @@ page,
     0 5px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --sar-shadow-2xl: 0 10px 50px -12px rgb(0 0 0 / 0.25);
   --sar-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --sar-shadow-dragging:
+    0 0 2px 0 rgb(0 0 0 / 0.1), 0 2px 12px rgb(0 0 0 / 0.2);
 
   --sar-scroll-shadow-start: inset 0 10px 10px -10px rgba(0, 0, 0, 0.1);
   --sar-scroll-shadow-end: inset 0 -10px 10px -10px rgba(0, 0, 0, 0.1);
@@ -209,5 +211,7 @@ page,
   --sar-duration-slow: 500ms;
   --sar-duration: 300ms;
   --sar-duration-fast: 150ms;
+
+  --sar-disable-scroll-z-index: 999999;
 }
 // #endvariables

package/components/tree/common.d.ts

@@ -100,5 +100,6 @@ export interface TreeContext {
     drop: (dropOriginNode: TreeStateNode, dropTargetNode: TreeStateNode, position: number) => void;
     currentKey: string | number | undefined;
     singleSelect: (node: TreeStateNode) => void;
+    dragging: boolean;
 }
 export declare const treeContextSymbol: unique symbol;

package/components/tree/index.scss

@@ -10,4 +10,8 @@
   @include e(input-wrapper) {
     padding: var(--sar-dialog-body-padding-y) var(--sar-dialog-body-padding-x);
   }
+
+  /* #ifdef MP-ALIPAY */
+  @include disable-scroll;
+  /* #endif */
 }

package/components/tree/tree.vue

@@ -31,6 +31,17 @@
   </sar-dialog>
 
   <sar-toast v-model:visible="toastVisible" :title="t('please')" />
+
+  <!-- #ifdef MP-ALIPAY -->
+  <view
+    :class="
+      classNames(
+        bem.e('disable-scroll'),
+        bem.em('disable-scroll', 'dragging', context.dragging),
+      )
+    "
+  ></view>
+  <!-- #endif -->
 </template>
 
 <script>
@@ -546,26 +557,25 @@ export default  _defineComponent({
         emit("select", node.key, node);
       }
     };
-    provide(
-      treeContextSymbol,
-      reactive({
-        selectable: toRef(() => props.selectable),
-        draggable: toRef(() => props.draggable),
-        editable: toRef(() => props.editable),
-        singleSelectable: toRef(() => props.singleSelectable),
-        leafOnly: toRef(() => props.leafOnly),
-        treeData: toRef(() => treeData.value),
-        setExpandedByNode,
-        toggleExpandedByNode,
-        setCheckedByNode,
-        levelup,
-        leveldown,
-        drop,
-        edit,
-        currentKey,
-        singleSelect
-      })
-    );
+    const context = reactive({
+      selectable: toRef(() => props.selectable),
+      draggable: toRef(() => props.draggable),
+      editable: toRef(() => props.editable),
+      singleSelectable: toRef(() => props.singleSelectable),
+      leafOnly: toRef(() => props.leafOnly),
+      treeData: toRef(() => treeData.value),
+      setExpandedByNode,
+      toggleExpandedByNode,
+      setCheckedByNode,
+      levelup,
+      leveldown,
+      drop,
+      edit,
+      currentKey,
+      singleSelect,
+      dragging: false
+    });
+    provide(treeContextSymbol, context);
     __expose({
       setExpanded,
       toggleExpanded,
@@ -598,7 +608,9 @@ export default  _defineComponent({
       return currentEditNode;
     }, set currentEditNode(v) {
       currentEditNode = v;
-    }, currentEditType, currentEditValue, mapEditTypeTitle, currentEditTitle, dialogVisible, toastVisible, onPopoverSelect, beforeClose, edit, focused, onVisibleHook, defaultFilterMethod, filter, currentKey, singleSelect, treeClass, treeStyle, SarTreeNode, SarPopover, SarInput, SarDialog, SarToast };
+    }, currentEditType, currentEditValue, mapEditTypeTitle, currentEditTitle, dialogVisible, toastVisible, onPopoverSelect, beforeClose, edit, focused, onVisibleHook, defaultFilterMethod, filter, currentKey, singleSelect, context, treeClass, treeStyle, get classNames() {
+      return classNames;
+    }, SarTreeNode, SarPopover, SarInput, SarDialog, SarToast };
     return __returned__;
   }
 });

package/components/tree/variables.scss

@@ -11,8 +11,7 @@ page,
   --sar-tree-node-bg: var(--sar-emphasis-bg);
   --sar-tree-node-active-bg: var(--sar-active-bg);
   --sar-tree-node-dragging-bg: var(--sar-mask-white-legible);
-  --sar-tree-node-dragging-shadow:
-    0 0 1px 1px rgb(0 0 0 / 0.2), 0 1px 10px rgb(0 0 0 / 0.2);
+  --sar-tree-node-dragging-shadow: var(--sar-shadow-dragging);
 
   --sar-tree-toolbar-margin-right: -24rpx;
 

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

@@ -207,6 +207,7 @@ export default  _defineComponent({
       onDragSimulatedPressTouchEnd
     ] = useSimulatedPress({
       start: () => {
+        treeContext.dragging = true;
         dragging.value = true;
         treeContext.setExpandedByNode(props.node, false);
         onDragStart();
@@ -217,6 +218,7 @@ export default  _defineComponent({
         }
       },
       end: () => {
+        treeContext.dragging = false;
         dragging.value = false;
         onDragEnd();
       },

package/global.d.ts

@@ -34,6 +34,9 @@ declare module 'vue' {
     SarDialog: typeof import('./components/dialog/dialog').default
     SarDialogAgent: typeof import('./components/dialog-agent/dialog-agent').default
     SarDivider: typeof import('./components/divider/divider').default
+    SarDnd: typeof import('./components/dnd/dnd').default
+    SarDndHandle: typeof import('./components/dnd-handle/dnd-handle').default
+    SarDndItem: typeof import('./components/dnd-item/dnd-item').default
     SarDropdown: typeof import('./components/dropdown/dropdown').default
     SarDropdownItem: typeof import('./components/dropdown-item/dropdown-item').default
     SarEmpty: typeof import('./components/empty/empty').default

package/index.d.ts

@@ -30,6 +30,9 @@ export * from './components/datetime-range-picker-popout';
 export * from './components/dialog';
 export * from './components/dialog-agent';
 export * from './components/divider';
+export * from './components/dnd';
+export * from './components/dnd-handle';
+export * from './components/dnd-item';
 export * from './components/dropdown';
 export * from './components/empty';
 export * from './components/fab';

package/index.js

@@ -30,6 +30,9 @@ export * from './components/datetime-range-picker-popout';
 export * from './components/dialog';
 export * from './components/dialog-agent';
 export * from './components/divider';
+export * from './components/dnd';
+export * from './components/dnd-handle';
+export * from './components/dnd-item';
 export * from './components/dropdown';
 export * from './components/empty';
 export * from './components/fab';

package/index.scss

@@ -16,6 +16,7 @@
 @use './components/datetime-range-picker/variables.scss' as *;
 @use './components/dialog/variables.scss' as *;
 @use './components/divider/variables.scss' as *;
+@use './components/dnd/variables.scss' as *;
 @use './components/dropdown/variables.scss' as *;
 @use './components/empty/variables.scss' as *;
 @use './components/fab/variables.scss' as *;

package/package.json

@@ -2,7 +2,7 @@
   "id": "sard-uniapp",
   "name": "sard-uniapp",
   "displayName": "sard-uniapp",
-  "version": "1.21.1",
+  "version": "1.22.0",
   "description": "sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库",
   "main": "index.js",
   "scripts": {
@@ -123,7 +123,7 @@
     "lodash-es": "^4.17.21",
     "prettier": "^3.5.3",
     "region-data": "^1.2.3",
-    "sard-cli": "^1.3.3",
+    "sard-cli": "^1.3.4",
     "sass": "^1.69.7",
     "tailwindcss": "^3.4.17",
     "tel-area-code": "^1.1.0",

package/use/index.d.ts

@@ -22,3 +22,4 @@ export * from './useIndeterminate';
 export * from './useWindowResize';
 export * from './useSingleTask';
 export * from './useIntersectionObserver';
+export * from './useKeyList';

package/use/index.js

@@ -22,3 +22,4 @@ export * from './useIndeterminate';
 export * from './useWindowResize';
 export * from './useSingleTask';
 export * from './useIntersectionObserver';
+export * from './useKeyList';

package/use/useKeyList.d.ts

@@ -0,0 +1,5 @@
+import { type MaybeRef } from 'vue';
+export declare function useKeyList<T>(list: MaybeRef<T[]>): import("vue").ComputedRef<{
+    data: import("vue").UnwrapRef<T>;
+    key: string;
+}[]>;

package/use/useKeyList.js

@@ -0,0 +1,15 @@
+import { computed, reactive, unref } from 'vue';
+import { uniqid } from '../utils';
+export function useKeyList(list) {
+    const keyMap = new WeakMap();
+    return computed(() => {
+        return unref(list).map((item) => {
+            const key = keyMap.get(item) || uniqid();
+            keyMap.set(item, key);
+            return reactive({
+                data: item,
+                key,
+            });
+        });
+    });
+}

package/utils/array.js

@@ -73,18 +73,18 @@ export function arrayMove(array, fromIndex, toIndex) {
     const fromValue = array[fromIndex];
     if (fromIndex > toIndex) {
         return [
-            ...array.slice(0, fromIndex),
-            ...array.slice(fromIndex + 1, toIndex + 1),
+            ...array.slice(0, toIndex),
             fromValue,
-            ...array.slice(toIndex + 1),
+            ...array.slice(toIndex, fromIndex),
+            ...array.slice(fromIndex + 1),
         ];
     }
     else {
         return [
-            ...array.slice(0, toIndex),
+            ...array.slice(0, fromIndex),
+            ...array.slice(fromIndex + 1, toIndex + 1),
             fromValue,
-            ...array.slice(toIndex, fromIndex),
-            ...array.slice(fromIndex + 1),
+            ...array.slice(toIndex + 1),
         ];
     }
 }