sard-uniapp 1.24.0 → 1.24.1

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

@@ -32,6 +32,7 @@
       :searchable="searchable"
       :filter-placeholder="filterPlaceholder"
       :resettable="resettable"
+      :icon-position="iconPosition"
       @change="onChange"
       @visible-hook="onVisibleHook"
       @confirm="onConfirm"
@@ -70,6 +71,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。
@@ -110,6 +112,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: null, required: false },

package/components/radio-popout/README.md

@@ -42,15 +42,16 @@ import RadioPopout from 'sard-uniapp/components/radio-popout/radio-popout.vue'
 
 继承 [`RadioGroupProps`](./radio#RadioGroupProps) 并有以下额外属性：
 
-| 属性                                | 描述                             | 类型       | 默认值 |
-| ----------------------------------- | -------------------------------- | ---------- | ------ |
-| popout-class                        | 弹窗框根元素类名                 | string     | -      |
-| popout-style                        | 弹窗框根元素样式                 | StyleValue | -      |
-| visible (v-model)                   | 是否显示弹出框                   | boolean    | -      |
-| title                               | 弹出框标题                       | string     | -      |
-| 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            | -      |
+| 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' |
 
 ### RadioPopoutEmits
 

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

@@ -9,11 +9,13 @@ export interface RadioPopoutProps extends RadioGroupProps {
     searchable?: boolean;
     filterPlaceholder?: string;
     resettable?: boolean;
+    iconPosition?: 'left' | 'right';
 }
 export declare const defaultRadioPopoutProps: () => {
     options: () => never[];
     validateEvent: boolean;
     type: RadioPopoutProps["type"];
+    iconPosition: RadioPopoutProps["iconPosition"];
 };
 export interface RadioPopoutSlots {
     default?(props: Record<string, never>): any;

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

@@ -9,6 +9,7 @@ declare const __VLS_component: import("vue").DefineComponent<RadioPopoutProps, {
 }>, {
     options: import("../radio/common").RadioGroupOption[];
     type: import("../radio/common").IconType;
+    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/radio-popout/radio-popout.vue

@@ -50,7 +50,14 @@
                     :hover="!option.disabled"
                     @click="select(option, toggle)"
                   >
-                    <template #icon>
+                    <template v-if="iconPosition === 'left'" #icon>
+                      <sar-radio
+                        readonly
+                        :disabled="option.disabled"
+                        :value="option.value"
+                      />
+                    </template>
+                    <template v-if="iconPosition === 'right'" #value>
                       <sar-radio
                         readonly
                         :disabled="option.disabled"
@@ -104,6 +111,7 @@ import { useScrollSide, useFormPopout } from "../../use";
  * @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 点击确定按钮时触发
@@ -142,6 +150,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: null, required: false },

package/components/rate/index.scss

@@ -2,9 +2,8 @@
 
 @include bem(rate) {
   @include b() {
-    @include universal;
-    flex-direction: row;
-    justify-content: flex-start;
+    box-sizing: border-box;
+    display: inline-flex;
   }
 
   @include e(content) {

package/components/stepper/index.scss

@@ -2,9 +2,8 @@
 
 @include bem(stepper) {
   @include b() {
-    @include universal;
-    flex-direction: row;
-    justify-content: flex-start;
+    box-sizing: border-box;
+    display: inline-flex;
     align-items: stretch;
     gap: var(--sar-stepper-gap);
     height: var(--sar-stepper-height);

package/components/switch/index.scss

@@ -2,14 +2,17 @@
 
 @include bem(switch) {
   @include b() {
-    @include universal;
+    position: relative;
+    box-sizing: border-box;
+    display: inline-flex;
     width: var(--sar-switch-width);
     height: var(--sar-switch-height);
     border-radius: var(--sar-rounded-full);
     font-size: var(--sar-switch-font-size);
     background-color: var(--sar-switch-bg);
     cursor: pointer;
-    transition: background-color var(--sar-switch-transition-duration),
+    transition:
+      background-color var(--sar-switch-transition-duration),
       opacity var(--sar-switch-transition-duration);
 
     @include m(checked) {
@@ -51,8 +54,9 @@
     @include e(thumb) {
       transform: translateX(
         calc(
-          var(--sar-switch-width) - var(--sar-switch-thumb-width) -
-            var(--sar-switch-thumb-gap)
+          var(--sar-switch-width) - var(--sar-switch-thumb-width) - var(
+              --sar-switch-thumb-gap
+            )
         )
       );
     }

package/components/tree/README.md

@@ -126,6 +126,7 @@ import Tree from 'sard-uniapp/components/tree/tree.vue'
 | update:current <sup>1.17+</sup> | 选择节点后触发（单选） | (key: string \| number, node: TreeStateNode) => void     |
 | select <sup>1.17+</sup>         | 选择节点后触发（单选） | (key: string \| number, node: TreeStateNode) => void     |
 | check <sup>1.24+</sup>          | 点击树节点复选框时触发 | (event: {checked: boolean; node: TreeStateNode}) => void |
+| node-click <sup>1.24.1+</sup>   | 点击树节点时触发       | (event: {event: any; node: TreeStateNode}) => void       |
 
 ### TreeExpose
 

package/components/tree/common.d.ts

@@ -67,6 +67,10 @@ export interface TreeEmits {
         checked: boolean;
         node: TreeStateNode;
     }): void;
+    (e: 'node-click', event: {
+        event: any;
+        node: TreeStateNode;
+    }): void;
 }
 export interface TreeExpose {
     setExpanded: (key: string | number, expanded: boolean) => void;
@@ -104,5 +108,6 @@ export interface TreeContext {
     drop: (dropOriginNode: TreeStateNode, dropTargetNode: TreeStateNode, position: number) => void;
     currentKey: string | number | undefined;
     singleSelect: (node: TreeStateNode) => void;
+    nodeClick: (node: TreeStateNode, event: any) => void;
 }
 export declare const treeContextSymbol: unique symbol;

package/components/tree/tree.d.ts

@@ -18,6 +18,10 @@ declare const _default: import("vue").DefineComponent<TreeProps, {
         checked: boolean;
         node: TreeStateNode;
     }) => any;
+    "node-click": (event: {
+        event: any;
+        node: TreeStateNode;
+    }) => any;
 }, string, import("vue").PublicProps, Readonly<TreeProps> & Readonly<{
     onSelect?: ((key: string | number, node: TreeStateNode) => any) | undefined;
     "onUpdate:current"?: ((key: string | number, node: TreeStateNode) => any) | undefined;
@@ -25,6 +29,10 @@ declare const _default: import("vue").DefineComponent<TreeProps, {
         checked: boolean;
         node: TreeStateNode;
     }) => any) | undefined;
+    "onNode-click"?: ((event: {
+        event: any;
+        node: TreeStateNode;
+    }) => any) | undefined;
 }>, {
     data: TreeNode[];
     accordion: boolean;

package/components/tree/tree.vue

@@ -76,6 +76,7 @@ import { recurAncestor, recurDescendant, recurNodes } from "./utils";
  * @event {(key: string | number, node: TreeStateNode) => void} update 选择节点后触发（单选）
  * @event {(key: string | number, node: TreeStateNode) => void} select 选择节点后触发（单选）
  * @event {(event: {checked: boolean; node: TreeStateNode}) => void} check 点击树节点复选框时触发
+ * @event {(event: {event: any; node: TreeStateNode}) => void} node-click 点击树节点时触发
  */
 export default  _defineComponent({
   components: {
@@ -111,7 +112,7 @@ export default  _defineComponent({
     filterMode: { type: String, required: false },
     filterMethod: { type: Function, required: false }
   }, defaultTreeProps()),
-  emits: ["update:current", "select", "check"],
+  emits: ["update:current", "select", "check", "node-click"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -554,6 +555,12 @@ export default  _defineComponent({
         emit("select", node.key, node);
       }
     };
+    const nodeClick = (node, event) => {
+      emit("node-click", {
+        node,
+        event
+      });
+    };
     const context = reactive({
       selectable: toRef(() => props.selectable),
       draggable: toRef(() => props.draggable),
@@ -570,7 +577,8 @@ export default  _defineComponent({
       toggleCheck,
       edit,
       currentKey,
-      singleSelect
+      singleSelect,
+      nodeClick
     });
     provide(treeContextSymbol, context);
     __expose({
@@ -605,7 +613,7 @@ 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, context, treeClass, treeStyle, SarTreeNode, SarPopover, SarInput, SarDialog, SarToast };
+    }, currentEditType, currentEditValue, mapEditTypeTitle, currentEditTitle, dialogVisible, toastVisible, onPopoverSelect, beforeClose, edit, focused, onVisibleHook, defaultFilterMethod, filter, currentKey, singleSelect, nodeClick, context, treeClass, treeStyle, SarTreeNode, SarPopover, SarInput, SarDialog, SarToast };
     return __returned__;
   }
 });

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

@@ -268,13 +268,14 @@ export default  _defineComponent({
     const isLeaf = computed(() => {
       return !props.node.children || props.node.children.length === 0;
     });
-    const onNodeClick = () => {
+    const onNodeClick = (event) => {
       if (!isLeaf.value) {
         treeContext.toggleExpandedByNode(props.node);
       }
       if (canSingleSelectable.value && treeContext.leafOnly) {
         treeContext.singleSelect(props.node);
       }
+      treeContext.nodeClick(props.node, event);
     };
     const nodeActive = ref(false);
     const onNodeTouchStart = () => {

package/package.json

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