sard-uniapp 1.24.0 → 1.24.2

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## [1.24.2](https://github.com/sutras/sard-uniapp/compare/v1.24.1...v1.24.2) (2025-09-06)
+
+
+### Bug Fixes
+
+* **count-down:** 修复行内嵌套块的问题 ([fd8112c](https://github.com/sutras/sard-uniapp/commit/fd8112c3885c0069b34f6709c7190a298d680726))
+* **popout:** 修正按钮插槽内容 ([7f29d80](https://github.com/sutras/sard-uniapp/commit/7f29d8059ac1dd342f85a5de54f42e867879ecfc))
+* **tag:** 阻止点击关闭时的事件冒泡 ([4220f31](https://github.com/sutras/sard-uniapp/commit/4220f311f0c5564ae095db6863f415f483f7f22e))
+
+
+### Features
+
+* **fab:** 添加拖拽功能 ([4d24318](https://github.com/sutras/sard-uniapp/commit/4d243186b4ba22ebe50722c67466eb702c88cbf5))
+
+
+
+## [1.24.1](https://github.com/sutras/sard-uniapp/compare/v1.24.0...v1.24.1) (2025-08-31)
+
+
+### Features
+
+* **form:** 新增content-position属性 ([b588249](https://github.com/sutras/sard-uniapp/commit/b5882493653491d6a03f0b04f898b6b9c31a06c5))
+* **keyboard:** 为车牌键盘模式添加双向绑定支持 ([740f7bf](https://github.com/sutras/sard-uniapp/commit/740f7bf074658d845d49ad5582663af639757260))
+* **tree:** 新增node-click事件 ([a70e5d7](https://github.com/sutras/sard-uniapp/commit/a70e5d786305e580cbac7eb8c897ed79cff54059))
+* 新增checkbox-popout和radio-popout新增icon-position属性 ([32f458a](https://github.com/sutras/sard-uniapp/commit/32f458aa46ceebdb4ed46f51733f3749e60461a0))
+* 新增阿拉伯语支持 ([b0b2c60](https://github.com/sutras/sard-uniapp/commit/b0b2c6050bad21f476e767659c8ac6802bfcadb6))
+
+
+
 # [1.24.0](https://github.com/sutras/sard-uniapp/compare/v1.23.5...v1.24.0) (2025-08-24)
 
 

package/components/checkbox-input/checkbox-input.d.ts

@@ -9,6 +9,7 @@ declare const __VLS_component: import("vue").DefineComponent<CheckboxInputProps,
 }>, {
     options: import("../checkbox/common").CheckboxGroupOption[];
     valueOnClear: () => any;
+    iconPosition: "left" | "right";
     validateEvent: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;

package/components/checkbox-input/checkbox-input.vue

@@ -34,6 +34,7 @@
       :searchable="searchable"
       :filter-placeholder="filterPlaceholder"
       :resettable="resettable"
+      :icon-position="iconPosition"
       @change="onChange"
       @visible-hook="onVisibleHook"
       @confirm="onConfirm"
@@ -74,6 +75,7 @@ import { usePopoutInput } from "../../use";
  * @property {boolean} searchable 是否可搜索，默认值：false。
  * @property {string} filterPlaceholder 搜索输入框占位符内容，默认值：-。
  * @property {boolean} resettable 关闭弹出框后，是否可复位弹出框值，默认值：false。
+ * @property {'left' | 'right'} iconPosition 可定义复选框的位置，默认值：'left'。
  * @property {boolean} clearable 是否显示清空按钮，默认值：false。
  * @property {string} placeholder 输入框占位符内容，默认值：-。
  * @property {() => any} valueOnClear 设置点击清除按钮后的值，默认值：() => undefined。
@@ -115,6 +117,7 @@ export default  _defineComponent({
     searchable: { type: Boolean, required: false },
     filterPlaceholder: { type: String, required: false },
     resettable: { type: Boolean, required: false },
+    iconPosition: { type: String, required: false },
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
     modelValue: { type: Array, required: false },

package/components/checkbox-input/common.d.ts

@@ -9,6 +9,7 @@ export declare const defaultCheckboxInputProps: () => {
     valueOnClear: CheckboxInputProps["valueOnClear"];
     options: () => never[];
     validateEvent: boolean;
+    iconPosition: CheckboxPopoutProps["iconPosition"];
 };
 export interface CheckboxInputSlots extends PopoutInputSlots {
 }

package/components/checkbox-popout/README.md

@@ -48,16 +48,17 @@ import CheckboxPopout from 'sard-uniapp/components/checkbox-popout/checkbox-popo
 
 继承 [`CheckboxGroupProps`](./checkbox#CheckboxGroupProps) 并有以下额外属性：
 
-| 属性                                | 描述                             | 类型       | 默认值 |
-| ----------------------------------- | -------------------------------- | ---------- | ------ |
-| popout-class                        | 弹窗框根元素类名                 | string     | -      |
-| popout-style                        | 弹窗框根元素样式                 | StyleValue | -      |
-| visible (v-model)                   | 是否显示弹出框                   | boolean    | -      |
-| title                               | 弹出框标题                       | string     | -      |
-| show-check-all <sup>1.20+</sup>     | 是否显示全选                     | boolean    | false  |
-| searchable <sup>1.20+</sup>         | 是否可搜索                       | boolean    | false  |
-| filter-placeholder <sup>1.20+</sup> | 搜索输入框占位符内容             | string     | -      |
-| resettable <sup>1.23.3+</sup>       | 关闭弹出框后，是否可复位弹出框值 | boolean    | false  |
+| 属性                                | 描述                             | 类型              | 默认值 |
+| ----------------------------------- | -------------------------------- | ----------------- | ------ |
+| popout-class                        | 弹窗框根元素类名                 | string            | -      |
+| popout-style                        | 弹窗框根元素样式                 | StyleValue        | -      |
+| visible (v-model)                   | 是否显示弹出框                   | boolean           | -      |
+| title                               | 弹出框标题                       | string            | -      |
+| show-check-all <sup>1.20+</sup>     | 是否显示全选                     | boolean           | false  |
+| searchable <sup>1.20+</sup>         | 是否可搜索                       | boolean           | false  |
+| filter-placeholder <sup>1.20+</sup> | 搜索输入框占位符内容             | string            | -      |
+| resettable <sup>1.23.3+</sup>       | 关闭弹出框后，是否可复位弹出框值 | boolean           | false  |
+| icon-position <sup>1.24.1+</sup>    | 可定义复选框的位置               | 'left' \| 'right' | 'left' |
 
 ### CheckboxPopoutEmits
 

package/components/checkbox-popout/checkbox-popout.d.ts

@@ -8,6 +8,7 @@ declare const __VLS_component: import("vue").DefineComponent<CheckboxPopoutProps
     [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
 }>, {
     options: import("../checkbox/common").CheckboxGroupOption[];
+    iconPosition: "left" | "right";
     validateEvent: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;

package/components/checkbox-popout/checkbox-popout.vue

@@ -61,7 +61,15 @@
                     :hover="!option.disabled"
                     @click="select(option, toggle)"
                   >
-                    <template #icon>
+                    <template v-if="iconPosition === 'left'" #icon>
+                      <sar-checkbox
+                        readonly
+                        :disabled="option.disabled"
+                        :value="option.value"
+                        :validate-event="false"
+                      />
+                    </template>
+                    <template v-if="iconPosition === 'right'" #value>
                       <sar-checkbox
                         readonly
                         :disabled="option.disabled"
@@ -116,6 +124,7 @@ import { defaultOptionKeys } from "../checkbox/common";
  * @property {boolean} searchable 是否可搜索，默认值：false。
  * @property {string} filterPlaceholder 搜索输入框占位符内容，默认值：-。
  * @property {boolean} resettable 关闭弹出框后，是否可复位弹出框值，默认值：false。
+ * @property {'left' | 'right'} iconPosition 可定义复选框的位置，默认值：'left'。
  * @event {(visible: boolean) => void} update 弹出框显隐时触发
  * @event {(value: any[] | undefined) => void} change 复选输入组件值改变时触发
  * @event {() => void} confirm 点击确定按钮时触发
@@ -155,6 +164,7 @@ export default  _defineComponent({
     searchable: { type: Boolean, required: false },
     filterPlaceholder: { type: String, required: false },
     resettable: { type: Boolean, required: false },
+    iconPosition: { type: String, required: false },
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
     modelValue: { type: Array, required: false },

package/components/checkbox-popout/common.d.ts

@@ -10,10 +10,12 @@ export interface CheckboxPopoutProps extends CheckboxGroupProps {
     searchable?: boolean;
     filterPlaceholder?: string;
     resettable?: boolean;
+    iconPosition?: 'left' | 'right';
 }
 export declare const defaultCheckboxPopoutProps: () => {
     options: () => never[];
     validateEvent: boolean;
+    iconPosition: CheckboxPopoutProps["iconPosition"];
 };
 export interface CheckboxPopoutSlots {
     default?(props: Record<string, never>): any;

package/components/config/index.d.ts

@@ -5,6 +5,7 @@ import { type CalendarInputProps } from '../calendar-input';
 import { type CalendarProps } from '../calendar';
 import { type CascaderInputProps } from '../cascader-input';
 import { type CheckboxGroupProps } from '../checkbox';
+import { type CheckboxPopoutProps } from '../checkbox-popout';
 import { type CheckboxInputProps } from '../checkbox-input';
 import { type CoolIconProps } from '../cool-icon';
 import { type DatetimePickerInputProps } from '../datetime-picker-input';
@@ -12,6 +13,7 @@ import { type DatetimeRangePickerInputProps } from '../datetime-range-picker-inp
 import { type DialogProps } from '../dialog';
 import { type DividerProps } from '../divider';
 import { type DropdownProps } from '../dropdown';
+import { type FabProps } from '../fab';
 import { type FloatingBubbleProps } from '../floating-bubble';
 import { type FormProps } from '../form';
 import { type GridProps } from '../grid';
@@ -127,6 +129,7 @@ export declare const defaultConfig: {
     };
     checkboxPopout: {
         validateEvent: boolean;
+        iconPosition: CheckboxPopoutProps["iconPosition"];
     };
     coolIcon: {
         shape: CoolIconProps["shape"];
@@ -200,8 +203,13 @@ export declare const defaultConfig: {
         overlayClosable: boolean;
         hideName: boolean;
         duration: number;
+        draggable: boolean;
+        axis: FabProps["axis"];
+        gapX: number;
+        gapY: number;
     };
     floatingBubble: {
+        draggable: boolean;
         axis: FloatingBubbleProps["axis"];
         gapX: number;
         gapY: number;
@@ -218,6 +226,7 @@ export declare const defaultConfig: {
         labelAlign: FormProps["labelAlign"];
         labelValign: FormProps["labelValign"];
         starPosition: FormProps["starPosition"];
+        contentPosition: FormProps["contentPosition"];
         showError: boolean;
         scrollDuration: number;
     };
@@ -368,6 +377,7 @@ export declare const defaultConfig: {
     radioPopout: {
         validateEvent: boolean;
         type: RadioPopoutProps["type"];
+        iconPosition: RadioPopoutProps["iconPosition"];
     };
     rate: {
         count: number;

package/components/config/index.js

@@ -78,6 +78,7 @@ export const defaultConfig = {
     },
     checkboxPopout: {
         validateEvent: true,
+        iconPosition: 'left',
     },
     coolIcon: {
         shape: 'oval',
@@ -151,8 +152,13 @@ export const defaultConfig = {
         overlayClosable: false,
         hideName: false,
         duration: 150,
+        draggable: false,
+        axis: 'y',
+        gapX: 24,
+        gapY: 24,
     },
     floatingBubble: {
+        draggable: true,
         axis: 'y',
         gapX: 24,
         gapY: 24,
@@ -169,6 +175,7 @@ export const defaultConfig = {
         labelAlign: 'start',
         labelValign: 'center',
         starPosition: 'left',
+        contentPosition: 'left',
         showError: true,
         scrollDuration: 150,
     },
@@ -319,6 +326,7 @@ export const defaultConfig = {
     radioPopout: {
         validateEvent: true,
         type: 'circle',
+        iconPosition: 'left',
     },
     rate: {
         count: 5,

package/components/count-down/README.md

@@ -57,12 +57,14 @@ import CountDown from 'sard-uniapp/components/count-down/count-down.vue'
 
 ### CountDownProps
 
-| 属性        | 描述                   | 类型    | 默认值     |
-| ----------- | ---------------------- | ------- | ---------- |
-| time        | 倒计时总时长，单位毫秒 | number  | 0          |
-| auto-start  | 是否自动开始倒计时     | boolean | true       |
-| format      | 时间格式               | string  | 'HH:mm:ss' |
-| millisecond | 是否开启毫秒级别渲染   | boolean | false      |
+| 属性                          | 描述                   | 类型       | 默认值     |
+| ----------------------------- | ---------------------- | ---------- | ---------- |
+| root-class <sup>1.24.2+</sup> | 组件根元素类名         | string     | -          |
+| root-style <sup>1.24.2+</sup> | 组件根元素样式         | StyleValue | -          |
+| time                          | 倒计时总时长，单位毫秒 | number     | 0          |
+| auto-start                    | 是否自动开始倒计时     | boolean    | true       |
+| format                        | 时间格式               | string     | 'HH:mm:ss' |
+| millisecond                   | 是否开启毫秒级别渲染   | boolean    | false      |
 
 ### CountDownSlots
 

package/components/count-down/common.d.ts

@@ -1,4 +1,7 @@
+import { type StyleValue } from 'vue';
 export interface CountDownProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
     time?: number;
     autoStart?: boolean;
     format?: string;

package/components/count-down/count-down.vue

@@ -1,9 +1,9 @@
 <template>
-  <text>
+  <view :class="countDownClass" :style="countDownStyle">
     <slot :time="currentTime">
       {{ formatTime(format, currentTime) }}
     </slot>
-  </text>
+  </view>
 </template>
 
 <script>
@@ -14,7 +14,10 @@ import {
   formatTime,
   defaultCountDownProps
 } from "./common";
+import { classNames, stringifyStyle, createBem } from "../../utils";
 /**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
  * @property {number} time 倒计时总时长，单位毫秒，默认值：0。
  * @property {boolean} autoStart 是否自动开始倒计时，默认值：true。
  * @property {string} format 时间格式，默认值：'HH:mm:ss'。
@@ -31,6 +34,8 @@ export default  _defineComponent({
   },
   __name: "count-down",
   props:  _mergeDefaults({
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
     time: { type: Number, required: false },
     autoStart: { type: Boolean, required: false },
     format: { type: String, required: false },
@@ -40,6 +45,7 @@ export default  _defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const bem = createBem("count-down");
     const remainTime = ref(props.time);
     let endTime = 0;
     let timer = null;
@@ -102,7 +108,13 @@ export default  _defineComponent({
     onBeforeUnmount(() => {
       pause();
     });
-    const __returned__ = { props, emit, remainTime, get endTime() {
+    const countDownClass = computed(() => {
+      return classNames(bem.b(), props.rootClass);
+    });
+    const countDownStyle = computed(() => {
+      return stringifyStyle(props.rootStyle);
+    });
+    const __returned__ = { props, emit, bem, remainTime, get endTime() {
       return endTime;
     }, set endTime(v) {
       endTime = v;
@@ -114,10 +126,14 @@ export default  _defineComponent({
       return paused;
     }, set paused(v) {
       paused = v;
-    }, tick, start, pause, reset, precisionTime, currentTime, get formatTime() {
+    }, tick, start, pause, reset, precisionTime, currentTime, countDownClass, countDownStyle, get formatTime() {
       return formatTime;
     } };
     return __returned__;
   }
 });
 </script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/count-down/index.scss

@@ -0,0 +1,10 @@
+@use '../style/base' as *;
+
+@include bem(count-down) {
+  @include b() {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+  }
+}

package/components/fab/README.md

@@ -70,22 +70,28 @@ import Fab from 'sard-uniapp/components/fab/fab.vue'
 
 ### FabProps
 
-| 属性             | 描述                                         | 类型       | 默认值 |
-| ---------------- | -------------------------------------------- | ---------- | ------ |
-| root-class       | 组件根元素类名                               | string     | -      |
-| root-style       | 组件根元素样式                               | StyleValue | -      |
-| top              | 设置距离窗口顶部的距离，优先级比 `bottom` 高 | string     | -      |
-| right            | 设置距离窗口右边的距离                       | string     | -      |
-| bottom           | 设置距离窗口底部的距离                       | string     | -      |
-| left             | 设置距离窗口左边的距离，优先级比 `right` 高  | string     | -      |
-| color            | 设置按钮图标的颜色                           | string     | -      |
-| background       | 设置按钮的背景色                             | string     | -      |
-| icon             | 设置入口按钮的图标                           | string     | -      |
-| icon-family      | 设置入口按钮的图标族                         | string     | -      |
-| item-list        | 设置扩展按钮                                 | FabItem[]  | []     |
-| hide-name        | 是否隐藏按钮名称                             | boolean    | false  |
-| overlay-closable | 点击遮罩是否隐藏扩展按钮                     | boolean    | false  |
-| duration         | 扩展按钮显隐动画时长，单位 ms                | number     | 150    |
+| 属性                                | 描述                                         | 类型                           | 默认值 |
+| ----------------------------------- | -------------------------------------------- | ------------------------------ | ------ |
+| root-class                          | 组件根元素类名                               | string                         | -      |
+| root-style                          | 组件根元素样式                               | StyleValue                     | -      |
+| top                                 | 设置距离窗口顶部的距离，优先级比 `bottom` 高 | string                         | -      |
+| right                               | 设置距离窗口右边的距离                       | string                         | -      |
+| bottom                              | 设置距离窗口底部的距离                       | string                         | -      |
+| left                                | 设置距离窗口左边的距离，优先级比 `right` 高  | string                         | -      |
+| color                               | 设置按钮图标的颜色                           | string                         | -      |
+| background                          | 设置按钮的背景色                             | string                         | -      |
+| icon                                | 设置入口按钮的图标                           | string                         | -      |
+| icon-family                         | 设置入口按钮的图标族                         | string                         | -      |
+| item-list                           | 设置扩展按钮                                 | FabItem[]                      | []     |
+| hide-name                           | 是否隐藏按钮名称                             | boolean                        | false  |
+| overlay-closable                    | 点击遮罩是否隐藏扩展按钮                     | boolean                        | false  |
+| duration                            | 扩展按钮显隐动画时长，单位 ms                | number                         | 150    |
+| draggable <sup>1.24.2+</sup>        | 是否可拖拽                                   | boolean                        | false  |
+| axis <sup>1.24.2+</sup>             | 允许拖拽的方向轴                             | 'x' \| 'y' \| 'both' \| 'none' | 'y'    |
+| magnet <sup>1.24.2+</sup>           | 吸附到指定轴最近的一边                       | 'x' \| 'y'                     | -      |
+| gap-x <sup>1.24.2+</sup>            | 悬浮按钮与窗口左右两边的最小间距，单位为 px  | number                         | 24     |
+| gap-y <sup>1.24.2+</sup>            | 悬浮按钮与窗口上下两边的最小间距，单位为 px  | number                         | 24     |
+| offset (v-model) <sup>1.24.2+</sup> | 控制悬浮按钮的位置                           | { x: number; y: number }       | -      |
 
 ### FabSlots
 
@@ -95,10 +101,11 @@ import Fab from 'sard-uniapp/components/fab/fab.vue'
 
 ### FabEmits
 
-| 事件   | 描述               | 类型                                   |
-| ------ | ------------------ | -------------------------------------- |
-| click  | 点击入口按钮时触发 | (event: any) => void                   |
-| select | 点击扩展按钮时触发 | (item: FabItem, index: number) => void |
+| 事件                             | 描述                         | 类型                                       |
+| -------------------------------- | ---------------------------- | ------------------------------------------ |
+| click                            | 点击入口按钮时触发           | (event: any) => void                       |
+| select                           | 点击扩展按钮时触发           | (item: FabItem, index: number) => void     |
+| update:offset <sup>1.24.2+</sup> | 因用户拖拽导致位置改变时触发 | (offset: { x: number; y: number }) => void |
 
 ### FabItem
 

package/components/fab/common.d.ts

@@ -14,16 +14,33 @@ export interface FabProps {
     hideName?: boolean;
     overlayClosable?: boolean;
     duration?: number;
+    draggable?: boolean;
+    axis?: 'x' | 'y' | 'both' | 'none';
+    magnet?: 'x' | 'y';
+    gapX?: number;
+    gapY?: number;
+    offset?: {
+        x: number;
+        y: number;
+    };
 }
 export declare const defaultFabProps: () => {
     itemList: () => never[];
     overlayClosable: boolean;
     hideName: boolean;
     duration: number;
+    draggable: boolean;
+    axis: FabProps["axis"];
+    gapX: number;
+    gapY: number;
 };
 export interface FabEmits {
     (e: 'click', event: any): void;
     (e: 'select', item: FabItem, index: number): void;
+    (e: 'update:offset', offset: {
+        x: number;
+        y: number;
+    }): void;
 }
 export interface FabItem {
     name?: string;

package/components/fab/fab.d.ts

@@ -2,13 +2,25 @@ import { type FabProps, FabItem } from './common';
 declare const _default: import("vue").DefineComponent<FabProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     click: (event: any) => any;
     select: (item: FabItem, index: number) => any;
+    "update:offset": (offset: {
+        x: number;
+        y: number;
+    }) => any;
 }, string, import("vue").PublicProps, Readonly<FabProps> & Readonly<{
     onClick?: ((event: any) => any) | undefined;
     onSelect?: ((item: FabItem, index: number) => any) | undefined;
+    "onUpdate:offset"?: ((offset: {
+        x: number;
+        y: number;
+    }) => any) | undefined;
 }>, {
+    axis: "x" | "y" | "both" | "none";
     duration: number;
     overlayClosable: boolean;
+    draggable: boolean;
     itemList: FabItem[];
     hideName: boolean;
+    gapX: number;
+    gapY: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;