sard-uniapp 1.16.0 → 1.17.1

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## [1.17.1](https://github.com/sutras/sard-uniapp/compare/v1.17.0...v1.17.1) (2025-05-30)
+
+
+### Bug Fixes
+
+* 修复Popup在H5 attrs 透传问题 ([4de8765](https://github.com/sutras/sard-uniapp/commit/4de87657580cb6525c1025bc3862d4f4eef3afb1))
+
+
+### Features
+
+* steps组件新增自定义内容插槽 ([5f17466](https://github.com/sutras/sard-uniapp/commit/5f17466c9370d21f699f0ec691e0ea5f74888188))
+
+
+
+# [1.17.0](https://github.com/sutras/sard-uniapp/compare/v1.16.0...v1.17.0) (2025-05-29)
+
+
+### Bug Fixes
+
+* 修复popup在h5弹出状态跳转页面仍显示的问题 ([1187368](https://github.com/sutras/sard-uniapp/commit/11873685cc8017ec42b4ad02c4d74754d5d3fc6c))
+
+
+### Features
+
+* picker 组件新增 custom 插槽 ([218d384](https://github.com/sutras/sard-uniapp/commit/218d3841459d65dec29d6cf35fd6fea7c713cca5))
+* tree 组件新增单选功能 ([a1fb8a2](https://github.com/sutras/sard-uniapp/commit/a1fb8a2c54ac7fc32e3dab2a416636553893bc2f))
+
+
+
 # [1.16.0](https://github.com/sutras/sard-uniapp/compare/v1.15.4...v1.16.0) (2025-05-28)
 
 

package/components/config/index.d.ts

@@ -367,6 +367,7 @@ export declare const defaultConfig: {
     steps: {
         current: number;
         center: boolean;
+        itemList: () => never[];
         direction: StepsProps["direction"];
         finishIcon: string;
         processIcon: string;

package/components/config/index.js

@@ -329,6 +329,7 @@ export const defaultConfig = {
     steps: {
         current: 0,
         center: false,
+        itemList: () => [],
         direction: 'horizontal',
         finishIcon: 'check-circle-fill',
         processIcon: 'circle',

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

@@ -1,7 +1,9 @@
 <template>
-  <slot :time="currentTime">
-    {{ formatTime(format, currentTime) }}
-  </slot>
+  <text>
+    <slot :time="currentTime">
+      {{ formatTime(format, currentTime) }}
+    </slot>
+  </text>
 </template>
 
 <script>

package/components/datetime-picker/common.d.ts

@@ -1,4 +1,5 @@
 import { type StyleValue } from 'vue';
+import { type PickerSlots } from '../picker/common';
 export interface DatetimePickerProps {
     rootStyle?: StyleValue;
     rootClass?: string;
@@ -13,6 +14,8 @@ export interface DatetimePickerProps {
 export declare const defaultDatetimePickerProps: {
     type: string;
 };
+export interface DatetimePickerSlots extends PickerSlots {
+}
 export interface DatetimePickerEmits {
     (e: 'update:model-value', date: Date | string): void;
     (e: 'change', date: Date | string): void;

package/components/datetime-picker/datetime-picker.d.ts

@@ -1,5 +1,6 @@
-import { type DatetimePickerProps } from './common';
-declare const _default: import("vue").DefineComponent<DatetimePickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+import { type DatetimePickerProps, type DatetimePickerSlots } from './common';
+declare function __VLS_template(): Readonly<DatetimePickerSlots> & DatetimePickerSlots;
+declare const __VLS_component: import("vue").DefineComponent<DatetimePickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:model-value": (date: string | Date) => any;
     change: (date: string | Date) => any;
 }, string, import("vue").PublicProps, Readonly<DatetimePickerProps> & Readonly<{
@@ -8,4 +9,10 @@ declare const _default: import("vue").DefineComponent<DatetimePickerProps, {}, {
 }>, {
     type: string;
 }, {}, {}, {}, 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/datetime-picker-input/common.d.ts

@@ -1,5 +1,5 @@
 import { type PopoutInputProps } from '../popout-input/common';
-import { type DatetimePickerPopoutProps, type DatetimePickerPopoutEmits } from '../datetime-picker-popout/common';
+import { type DatetimePickerPopoutProps, type DatetimePickerPopoutEmits, type DatetimePickerPopoutSlots } from '../datetime-picker-popout/common';
 export interface DatetimePickerInputProps extends DatetimePickerPopoutProps, Omit<PopoutInputProps, 'modelValue' | 'loading'> {
     outletFormat?: string;
 }
@@ -7,6 +7,8 @@ export declare const defaultDatetimePickerInputProps: () => {
     validateEvent: boolean;
     type: string;
 };
+export interface DatetimePickerInputSlots extends DatetimePickerPopoutSlots {
+}
 export interface DatetimePickerInputEmits extends DatetimePickerPopoutEmits {
 }
 export declare const mapTypeFormat: {

package/components/datetime-picker-input/datetime-picker-input.d.ts

@@ -1,5 +1,6 @@
-import { type DatetimePickerInputProps } from './common';
-declare const _default: import("vue").DefineComponent<DatetimePickerInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+import { type DatetimePickerInputProps, type DatetimePickerInputSlots } from './common';
+declare function __VLS_template(): Readonly<DatetimePickerInputSlots> & DatetimePickerInputSlots;
+declare const __VLS_component: import("vue").DefineComponent<DatetimePickerInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:model-value": (date: string | Date | undefined) => any;
     change: (date: string | Date | undefined) => any;
     "update:visible": (visible: boolean) => any;
@@ -11,4 +12,10 @@ declare const _default: import("vue").DefineComponent<DatetimePickerInputProps,
     type: string;
     validateEvent: boolean;
 }, {}, {}, {}, 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/datetime-picker-popout/common.d.ts

@@ -1,5 +1,5 @@
 import { type StyleValue } from 'vue';
-import { type DatetimePickerProps } from '../datetime-picker/common';
+import { type DatetimePickerProps, type DatetimePickerSlots } from '../datetime-picker/common';
 export interface DatetimePickerPopoutProps extends DatetimePickerProps {
     visible?: boolean;
     title?: string;
@@ -11,8 +11,7 @@ export declare const defaultDatetimePickerPopoutProps: () => {
     validateEvent: boolean;
     type: string;
 };
-export interface DatetimePickerPopoutSlots {
-    default?(props: Record<string, never>): any;
+export interface DatetimePickerPopoutSlots extends DatetimePickerSlots {
 }
 export interface DatetimePickerPopoutEmits {
     (e: 'update:visible', visible: boolean): void;

package/components/datetime-range-picker/common.d.ts

@@ -1,4 +1,4 @@
-import { type DatetimePickerProps } from '../datetime-picker/common';
+import { type DatetimePickerSlots, type DatetimePickerProps } from '../datetime-picker/common';
 export interface DatetimeRangePickerProps extends Omit<DatetimePickerProps, 'modelValue'> {
     modelValue?: (Date | string)[];
     tabs?: string[];
@@ -6,8 +6,7 @@ export interface DatetimeRangePickerProps extends Omit<DatetimePickerProps, 'mod
 export declare const defaultDatetimeRangePickerProps: {
     type: string;
 };
-export interface DatetimeRangePickerSlots {
-    default?(props: Record<string, never>): any;
+export interface DatetimeRangePickerSlots extends DatetimePickerSlots {
 }
 export interface DatetimeRangePickerEmits {
     (e: 'update:model-value', date: (Date | string)[]): void;

package/components/datetime-range-picker-input/common.d.ts

@@ -1,4 +1,4 @@
-import { type DatetimeRangePickerPopoutProps, type DatetimeRangePickerPopoutEmits } from '../datetime-range-picker-popout/common';
+import { type DatetimeRangePickerPopoutProps, type DatetimeRangePickerPopoutSlots, type DatetimeRangePickerPopoutEmits } from '../datetime-range-picker-popout/common';
 import { type PopoutInputProps } from '../popout-input/common';
 export interface DatetimeRangePickerInputProps extends DatetimeRangePickerPopoutProps, Omit<PopoutInputProps, 'modelValue' | 'loading'> {
     outletFormat?: string;
@@ -7,5 +7,7 @@ export declare const defaultDatetimeRangePickerInputProps: () => {
     validateEvent: boolean;
     type: string;
 };
+export interface DatetimeRangePickerInputSlots extends DatetimeRangePickerPopoutSlots {
+}
 export interface DatetimeRangePickerInputEmits extends DatetimeRangePickerPopoutEmits {
 }

package/components/datetime-range-picker-input/datetime-range-picker-input.d.ts

@@ -1,5 +1,6 @@
-import { type DatetimeRangePickerInputProps } from './common';
-declare const _default: import("vue").DefineComponent<DatetimeRangePickerInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+import { type DatetimeRangePickerInputProps, type DatetimeRangePickerInputSlots } from './common';
+declare function __VLS_template(): Readonly<DatetimeRangePickerInputSlots> & DatetimeRangePickerInputSlots;
+declare const __VLS_component: import("vue").DefineComponent<DatetimeRangePickerInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:model-value": (date: (string | Date)[] | undefined) => any;
     change: (date: (string | Date)[] | undefined) => any;
     "update:visible": (visible: boolean) => any;
@@ -11,4 +12,10 @@ declare const _default: import("vue").DefineComponent<DatetimeRangePickerInputPr
     type: string;
     validateEvent: boolean;
 }, {}, {}, {}, 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/datetime-range-picker-popout/common.d.ts

@@ -1,5 +1,5 @@
 import { type StyleValue } from 'vue';
-import { type DatetimeRangePickerProps } from '../datetime-range-picker/common';
+import { type DatetimeRangePickerProps, type DatetimeRangePickerSlots } from '../datetime-range-picker/common';
 export interface DatetimeRangePickerPopoutProps extends DatetimeRangePickerProps {
     visible?: boolean;
     title?: string;
@@ -11,8 +11,7 @@ export declare const defaultDatetimeRangePickerInputProps: () => {
     validateEvent: boolean;
     type: string;
 };
-export interface DatetimeRangePickerPopoutSlots {
-    default?(props: Record<string, never>): any;
+export interface DatetimeRangePickerPopoutSlots extends DatetimeRangePickerSlots {
 }
 export interface DatetimeRangePickerPopoutEmits {
     (e: 'update:visible', visible: boolean): void;

package/components/picker/common.d.ts

@@ -15,11 +15,22 @@ export interface PickerProps {
     optionKeys?: PickerOptionKeys;
     modelValue?: any;
     immediateChange?: boolean;
+    internalCustom?: number;
 }
 export declare const defaultPickerProps: () => {
     columns: () => never[];
     immediateChange: boolean;
 };
+export interface PickerSlots {
+    custom?(props: {
+        columns: any[][];
+        value: number[];
+        pickerViewClass: string;
+        maskClass: string;
+        indicatorClass: string;
+        onChange: (event: any) => void;
+    }): any;
+}
 export interface PickerEmits {
     (e: 'update:model-value', value: any, selectedOptions: PickerOption[], indexes: number[]): void;
     (e: 'change', value: any, selectedOptions: PickerOption[], indexes: number[]): void;

package/components/picker/index.scss

@@ -5,17 +5,4 @@
     @include universal;
     height: var(--sar-picker-height);
   }
-
-  @include e(picker-view) {
-    height: 100%;
-  }
-
-  @include e(item) {
-    height: var(--sar-picker-item-height);
-    line-height: var(--sar-picker-item-height);
-    font-size: var(--sar-picker-item-font-size);
-    text-align: center;
-    color: var(--sar-picker-item-color);
-    @include ellipsis;
-  }
 }

package/components/picker/picker.d.ts

@@ -1,5 +1,6 @@
-import { type PickerProps, type PickerOption } from './common';
-declare const _default: import("vue").DefineComponent<PickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+import { type PickerProps, type PickerSlots, type PickerOption } from './common';
+declare function __VLS_template(): Readonly<PickerSlots> & PickerSlots;
+declare const __VLS_component: import("vue").DefineComponent<PickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:model-value": (value: any, selectedOptions: PickerOption[], indexes: number[]) => any;
     change: (value: any, selectedOptions: PickerOption[], indexes: number[]) => any;
 }, string, import("vue").PublicProps, Readonly<PickerProps> & Readonly<{
@@ -9,4 +10,10 @@ declare const _default: import("vue").DefineComponent<PickerProps, {}, {}, {}, {
     columns: PickerOption[] | PickerOption[][];
     immediateChange: boolean;
 }, {}, {}, {}, 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/picker/picker.vue

@@ -1,17 +1,28 @@
 <template>
   <view :class="pickerClass" :style="pickerStyle">
-    <picker-view
-      :class="bem.e('picker-view')"
-      :indicator-class="bem.e('indicator')"
-      :mask-class="bem.e('mask')"
+    <slot
+      v-if="isNumber(internalCustom) ? internalCustom : $slots.custom"
+      name="custom"
+      :columns="renderedColumns"
+      :picker-view-class="pickerViewClass"
+      :mask-class="maskClass"
+      :indicator-class="indicatorClass"
       :value="columnIndexes"
+      :on-change="onChange"
+    ></slot>
+    <picker-view
+      v-else
+      :class="pickerViewClass"
       :immediate-change="immediateChange"
+      :indicator-class="indicatorClass"
+      :mask-class="maskClass"
+      :value="columnIndexes"
       @change="onChange"
     >
       <picker-view-column v-for="(column, i) in renderedColumns" :key="i">
-        <view v-for="(option, j) in column" :key="j" :class="bem.e('item')">
+        <sar-picker-item v-for="(option, j) in column" :key="j">
           {{ getLabelByOption(option) }}
-        </view>
+        </sar-picker-item>
       </picker-view-column>
     </picker-view>
   </view>
@@ -27,7 +38,8 @@ import {
   nestedToMulti,
   toArray,
   arrayEqual,
-  isNullish
+  isNullish,
+  isNumber
 } from "../../utils";
 import {
   defaultOptionKeys,
@@ -39,7 +51,11 @@ import {
   getValueOrLabelByOption,
   defaultPickerProps
 } from "./common";
+import SarPickerItem from "../picker-item/picker-item.vue";
 export default  _defineComponent({
+  components: {
+    SarPickerItem,
+  },
   ...{
     options: {
       virtualHost: true,
@@ -53,7 +69,8 @@ export default  _defineComponent({
     columns: { type: Array, required: false },
     optionKeys: { type: Object, required: false },
     modelValue: { type: null, required: false },
-    immediateChange: { type: Boolean, required: false }
+    immediateChange: { type: Boolean, required: false },
+    internalCustom: { type: Number, required: false }
   }, defaultPickerProps()),
   emits: ["update:model-value", "change"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -173,7 +190,12 @@ export default  _defineComponent({
     const pickerStyle = computed(() => {
       return stringifyStyle(props.rootStyle);
     });
-    const __returned__ = { props, emit, bem, fieldKeys, columnsType, innerValue, columnIndexes, onChange, getRenderedColumns, renderedColumns, getLabelByOption, pickerClass, pickerStyle };
+    const pickerViewClass = bem.e("picker-view");
+    const indicatorClass = bem.e("indicator");
+    const maskClass = bem.e("mask");
+    const __returned__ = { props, emit, bem, fieldKeys, columnsType, innerValue, columnIndexes, onChange, getRenderedColumns, renderedColumns, getLabelByOption, pickerClass, pickerStyle, pickerViewClass, indicatorClass, maskClass, get isNumber() {
+      return isNumber;
+    }, SarPickerItem };
     return __returned__;
   }
 });

package/components/picker/variables.scss

@@ -11,7 +11,8 @@ page,
 
   --sar-picker-indicator-border-color: var(--sar-border-color);
 
-  --sar-picker-mask-bg-image: linear-gradient(
+  --sar-picker-mask-bg-image:
+    linear-gradient(
       to bottom,
       rgba(var(--sar-emphasis-bg-rgb), 0.95),
       rgba(var(--sar-emphasis-bg-rgb), 0.6)
@@ -27,6 +28,8 @@ page,
 // 放到全局，兼容app
 @include bem(picker) {
   @include e(picker-view) {
+    height: var(--sar-picker-height);
+
     @include e(indicator) {
       height: var(--sar-picker-item-height);
       &::before {

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

@@ -1,5 +1,5 @@
 import { type PopoutInputProps } from '../popout-input/common';
-import { type PickerPopoutEmits, type PickerPopoutProps } from '../picker-popout/common';
+import { type PickerPopoutSlots, type PickerPopoutEmits, type PickerPopoutProps } from '../picker-popout/common';
 export interface PickerInputProps extends PickerPopoutProps, Omit<PopoutInputProps, 'modelValue'> {
 }
 export declare const defaultPickerInputProps: () => {
@@ -7,5 +7,7 @@ export declare const defaultPickerInputProps: () => {
     columns: () => never[];
     immediateChange: boolean;
 };
+export interface PickerInputSlots extends PickerPopoutSlots {
+}
 export interface PickerInputEmits extends PickerPopoutEmits {
 }

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

@@ -1,6 +1,7 @@
 import { type PickerOption } from '../picker/common';
-import { type PickerInputProps } from './common';
-declare const _default: import("vue").DefineComponent<PickerInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+import { type PickerInputProps, type PickerInputSlots } from './common';
+declare function __VLS_template(): Readonly<PickerInputSlots> & PickerInputSlots;
+declare const __VLS_component: import("vue").DefineComponent<PickerInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:model-value": (value: any) => any;
     change: (value: any) => any;
     "update:visible": (visible: boolean) => any;
@@ -13,4 +14,10 @@ declare const _default: import("vue").DefineComponent<PickerInputProps, {}, {},
     validateEvent: boolean;
     immediateChange: boolean;
 }, {}, {}, {}, 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/picker-input/picker-input.vue

@@ -21,8 +21,31 @@
       :option-keys="optionKeys"
       :immediate-change="immediateChange"
       :validate-event="validateEvent"
+      :internal-custom="$slots.custom ? 1 : 0"
       @change="onChange"
-    />
+    >
+      <template
+        v-if="$slots.custom"
+        #custom="{
+          columns,
+          maskClass,
+          pickerViewClass,
+          indicatorClass,
+          value,
+          onChange,
+        }"
+      >
+        <slot
+          name="custom"
+          :columns="columns"
+          :picker-view-class="pickerViewClass"
+          :mask-class="maskClass"
+          :indicator-class="indicatorClass"
+          :value="value"
+          :on-change="onChange"
+        ></slot>
+      </template>
+    </sar-picker-popout>
   </sar-popout-input>
 </template>
 
@@ -66,6 +89,7 @@ export default  _defineComponent({
     optionKeys: { type: Object, required: false },
     modelValue: { type: null, required: false },
     immediateChange: { type: Boolean, required: false },
+    internalCustom: { type: Number, required: false },
     placeholder: { type: String, required: false },
     readonly: { type: Boolean, required: false },
     disabled: { type: Boolean, required: false },

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

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

package/components/picker-item/common.js

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

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

@@ -0,0 +1 @@
+export type { PickerItemProps, PickerItemSlots, PickerItemEmits, PickerItemExpose, } from './common';

package/components/picker-item/index.js

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

package/components/picker-item/index.scss

@@ -0,0 +1,12 @@
+@use '../style/base' as *;
+
+@include bem(picker) {
+  @include e(item) {
+    height: var(--sar-picker-item-height);
+    line-height: var(--sar-picker-item-height);
+    font-size: var(--sar-picker-item-font-size);
+    text-align: center;
+    color: var(--sar-picker-item-color);
+    @include ellipsis;
+  }
+}

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

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

@@ -0,0 +1,41 @@
+<template>
+  <view :class="pickerItemClass" :style="pickerItemStyle">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { computed } from "vue";
+import { classNames, stringifyStyle, createBem } from "../../utils";
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "picker-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("picker");
+    __expose({});
+    const pickerItemClass = computed(() => {
+      return classNames(bem.e("item"), props.rootClass);
+    });
+    const pickerItemStyle = computed(() => {
+      return stringifyStyle(props.rootStyle);
+    });
+    const __returned__ = { props, bem, pickerItemClass, pickerItemStyle };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

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

@@ -1,5 +1,5 @@
 import { type StyleValue } from 'vue';
-import { type PickerProps } from '../picker/common';
+import { type PickerSlots, type PickerProps } from '../picker/common';
 export interface PickerPopoutProps extends PickerProps {
     visible?: boolean;
     title?: string;
@@ -12,8 +12,7 @@ export declare const defaultPickerPopoutProps: () => {
     columns: () => never[];
     immediateChange: boolean;
 };
-export interface PickerPopoutSlots {
-    default?(props: Record<string, never>): any;
+export interface PickerPopoutSlots extends PickerSlots {
 }
 export interface PickerPopoutEmits {
     (e: 'update:visible', visible: boolean): void;

package/components/picker-popout/common.js

@@ -1,4 +1,4 @@
-import { defaultPickerProps } from '../picker/common';
+import { defaultPickerProps, } from '../picker/common';
 import { defaultConfig } from '../config';
 export const defaultPickerPopoutProps = () => ({
     ...defaultPickerProps(),

package/components/picker-popout/picker-popout.vue

@@ -15,8 +15,33 @@
         :columns="columns"
         :option-keys="optionKeys"
         :immediate-change="immediateChange"
+        :internal-custom="
+          isNumber(internalCustom) ? internalCustom : $slots.custom ? 1 : 0
+        "
         @change="onChange"
-      />
+      >
+        <template
+          v-if="$slots.custom"
+          #custom="{
+            columns,
+            maskClass,
+            pickerViewClass,
+            indicatorClass,
+            value,
+            onChange,
+          }"
+        >
+          <slot
+            name="custom"
+            :columns="columns"
+            :picker-view-class="pickerViewClass"
+            :mask-class="maskClass"
+            :indicator-class="indicatorClass"
+            :value="value"
+            :on-change="onChange"
+          ></slot>
+        </template>
+      </sar-picker>
     </template>
   </sar-popout>
 </template>
@@ -28,7 +53,7 @@ import SarPicker from "../picker/picker.vue";
 import {
   defaultPickerPopoutProps
 } from "./common";
-import { isNullish } from "../../utils";
+import { isNullish, isNumber } from "../../utils";
 import { defaultOptionKeys, getInitialValue } from "../picker/common";
 import { computed } from "vue";
 import { useFormPopout } from "../../use";
@@ -55,7 +80,8 @@ export default  _defineComponent({
     columns: { type: Array, required: false },
     optionKeys: { type: Object, required: false },
     modelValue: { type: null, required: false },
-    immediateChange: { type: Boolean, required: false }
+    immediateChange: { type: Boolean, required: false },
+    internalCustom: { type: Number, required: false }
   }, defaultPickerPopoutProps()),
   emits: ["update:visible", "update:model-value", "change"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -77,7 +103,9 @@ export default  _defineComponent({
         popoutValue.value = innerValue.value;
       }
     };
-    const __returned__ = { props, emit, innerVisible, innerValue, popoutValue, onChange, onConfirm, fieldKeys, onEnter, SarPopout, SarPicker };
+    const __returned__ = { props, emit, innerVisible, innerValue, popoutValue, onChange, onConfirm, fieldKeys, onEnter, SarPopout, SarPicker, get isNumber() {
+      return isNumber;
+    } };
     return __returned__;
   }
 });