sard-uniapp 1.14.1 → 1.14.2

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [1.14.2](https://github.com/sutras/sard-uniapp/compare/v1.14.1...v1.14.2) (2025-05-14)
+
+
+### Bug Fixes
+
+* 使 *-input 弹出式输入框组件只有一个根节点 ([91fe1c0](https://github.com/sutras/sard-uniapp/commit/91fe1c0af91cf0aef3f3e7429483613a743e0520))
+
+
+
 ## [1.14.1](https://github.com/sutras/sard-uniapp/compare/v1.14.0...v1.14.1) (2025-05-13)
 
 

package/components/calendar/calendar.vue

@@ -78,24 +78,23 @@
         />
       </scroll-view>
     </view>
+    <sar-popout
+      v-if="!severalMonths"
+      v-model:visible="pickerVisible"
+      type="compact"
+      @confirm="onPickerConfirm"
+    >
+      <template #visible="{ already }">
+        <sar-datetime-picker
+          v-if="already"
+          type="yM"
+          v-model="pickerValue"
+          :min="minDate"
+          :max="maxDate"
+        />
+      </template>
+    </sar-popout>
   </view>
-
-  <sar-popout
-    v-if="!severalMonths"
-    v-model:visible="pickerVisible"
-    type="compact"
-    @confirm="onPickerConfirm"
-  >
-    <template #visible="{ already }">
-      <sar-datetime-picker
-        v-if="already"
-        type="yM"
-        v-model="pickerValue"
-        :min="minDate"
-        :max="maxDate"
-      />
-    </template>
-  </sar-popout>
 </template>
 
 <script>

package/components/calendar-input/calendar-input.vue

@@ -5,40 +5,42 @@
     :readonly="readonly"
     :disabled="disabled"
     :clearable="clearable"
-    @clear="onClear"
-    @click="onInputClick"
-  />
-
-  <sar-popout
     :root-class="rootClass"
     :root-style="rootStyle"
-    :visible="innerVisible"
-    @update:visible="onVisible"
-    :title="title ?? placeholder"
-    :show-confirm="showConfirm"
-    :confirm-disabled="confirmDisabled"
-    @confirm="onConfirm"
+    @clear="onClear"
+    @click="onInputClick"
   >
-    <template #visible="{ already }">
-      <sar-calendar
-        v-if="already"
-        :model-value="popoutValue"
-        @change="onChange"
-        :type="type"
-        :min="min"
-        :max="max"
-        :current-date="currentDate"
-        :disabled-date="disabledDate"
-        :max-days="maxDays"
-        :over-max-days="overMaxDays"
-        :week-starts-on="weekStartsOn"
-        :formatter="formatter"
-        :allow-same-day="allowSameDay"
-        :several-months="severalMonths"
-        :value-format="valueFormat"
-      />
-    </template>
-  </sar-popout>
+    <sar-popout
+      :visible="innerVisible"
+      :title="title ?? placeholder"
+      :show-confirm="showConfirm"
+      :confirm-disabled="confirmDisabled"
+      :root-class="popoutClass"
+      :root-style="popoutStyle"
+      @update:visible="onVisible"
+      @confirm="onConfirm"
+    >
+      <template #visible="{ already }">
+        <sar-calendar
+          v-if="already"
+          :model-value="popoutValue"
+          @change="onChange"
+          :type="type"
+          :min="min"
+          :max="max"
+          :current-date="currentDate"
+          :disabled-date="disabledDate"
+          :max-days="maxDays"
+          :over-max-days="overMaxDays"
+          :week-starts-on="weekStartsOn"
+          :formatter="formatter"
+          :allow-same-day="allowSameDay"
+          :several-months="severalMonths"
+          :value-format="valueFormat"
+        />
+      </template>
+    </sar-popout>
+  </sar-popout-input>
 </template>
 
 <script>
@@ -72,6 +74,8 @@ export default  _defineComponent({
     showConfirm: { type: Boolean, required: false },
     outletFormat: { type: String, required: false },
     validateEvent: { type: Boolean, required: false },
+    popoutClass: { type: String, required: false },
+    popoutStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
     type: { type: String, required: false },

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

@@ -1,11 +1,14 @@
 import { type CalendarProps } from '../calendar/common';
 import { type PopoutInputProps } from '../popout-input/common';
+import { type StyleValue } from 'vue';
 export interface CalendarInputProps extends CalendarProps, Omit<PopoutInputProps, 'modelValue' | 'loading'> {
     visible?: boolean;
     title?: string;
     showConfirm?: boolean;
     outletFormat?: string;
     validateEvent?: boolean;
+    popoutClass?: string;
+    popoutStyle?: StyleValue;
 }
 export declare const defaultCalendarInputProps: () => {
     type: CalendarProps["type"];

package/components/cascader-input/cascader-input.vue

@@ -5,38 +5,40 @@
     :readonly="readonly"
     :disabled="disabled"
     :clearable="clearable"
-    @clear="onClear"
-    @click="onInputClick"
     :loading="loading"
-  />
-
-  <sar-popout
     :root-class="rootClass"
     :root-style="rootStyle"
-    :visible="innerVisible"
-    @update:visible="onVisible"
-    :title="title ?? placeholder"
-    :show-confirm="showConfirm"
-    @confirm="onConfirm"
+    @clear="onClear"
+    @click="onInputClick"
   >
-    <template #visible="{ already }">
-      <sar-cascader
-        v-if="already"
-        :model-value="popoutValue"
-        :options="options"
-        :field-keys="fieldKeys"
-        :hint-text="hintText"
-        :change-on-select="changeOnSelect"
-        :label-render="labelRender"
-        @select="(option, tabIndex) => $emit('select', option, tabIndex)"
-        @change="onChange"
-      >
-        <template #top="{ tabIndex }">
-          <slot name="top" :tab-index="tabIndex"></slot>
-        </template>
-      </sar-cascader>
-    </template>
-  </sar-popout>
+    <sar-popout
+      :visible="innerVisible"
+      :title="title ?? placeholder"
+      :show-confirm="showConfirm"
+      :root-class="popoutClass"
+      :root-style="popoutStyle"
+      @confirm="onConfirm"
+      @update:visible="onVisible"
+    >
+      <template #visible="{ already }">
+        <sar-cascader
+          v-if="already"
+          :model-value="popoutValue"
+          :options="options"
+          :field-keys="fieldKeys"
+          :hint-text="hintText"
+          :change-on-select="changeOnSelect"
+          :label-render="labelRender"
+          @select="(option, tabIndex) => $emit('select', option, tabIndex)"
+          @change="onChange"
+        >
+          <template #top="{ tabIndex }">
+            <slot name="top" :tab-index="tabIndex"></slot>
+          </template>
+        </sar-cascader>
+      </template>
+    </sar-popout>
+  </sar-popout-input>
 </template>
 
 <script>
@@ -72,6 +74,8 @@ export default  _defineComponent({
     title: { type: String, required: false },
     showConfirm: { type: Boolean, required: false },
     validateEvent: { type: Boolean, required: false },
+    popoutClass: { type: String, required: false },
+    popoutStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
     modelValue: { type: [String, Number], required: false },

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

@@ -1,10 +1,13 @@
 import { type CascaderProps, type CascaderOption } from '../cascader/common';
 import { type PopoutInputProps } from '../popout-input/common';
+import { type StyleValue } from 'vue';
 export interface CascaderInputProps extends CascaderProps, Omit<PopoutInputProps, 'modelValue'> {
     visible?: boolean;
     title?: string;
     showConfirm?: boolean;
     validateEvent?: boolean;
+    popoutClass?: string;
+    popoutStyle?: StyleValue;
 }
 export declare const defaultCascaderInputProps: {
     showConfirm: boolean;

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

@@ -6,66 +6,68 @@
     :disabled="disabled"
     :clearable="clearable"
     multiline
-    @clear="onClear"
-    @click="onInputClick"
-  />
-
-  <sar-popout
     :root-class="rootClass"
     :root-style="rootStyle"
-    :visible="innerVisible"
-    @update:visible="onVisible"
-    :title="title ?? placeholder"
-    @confirm="onConfirm"
+    @clear="onClear"
+    @click="onInputClick"
   >
-    <template #visible="{ already }">
-      <view v-if="already" :class="containerClass">
-        <scroll-view
-          :class="bem.e('scroll')"
-          scroll-y
-          trap-scroll
-          :upper-threshold="0"
-          :lower-threshold="0"
-          :throttle="false"
-          @scroll="onScroll"
-          @scrolltoupper="onScrolltoupper"
-          @scrolltolower="onScrolltolower"
-        >
-          <sar-checkbox-group
-            :size="size"
-            :type="type"
-            :checkedColor="checkedColor"
-            :direction="direction"
-            :validate-event="false"
-            :model-value="popoutValue"
-            @change="onChange"
+    <sar-popout
+      :visible="innerVisible"
+      :title="title ?? placeholder"
+      :root-class="popoutClass"
+      :root-style="popoutStyle"
+      @update:visible="onVisible"
+      @confirm="onConfirm"
+    >
+      <template #visible="{ already }">
+        <view v-if="already" :class="containerClass">
+          <scroll-view
+            :class="bem.e('scroll')"
+            scroll-y
+            trap-scroll
+            :upper-threshold="0"
+            :lower-threshold="0"
+            :throttle="false"
+            @scroll="onScroll"
+            @scrolltoupper="onScrolltoupper"
+            @scrolltolower="onScrolltolower"
           >
-            <template #custom="{ toggle }">
-              <sar-list inlaid>
-                <sar-list-item
-                  v-for="option in options"
-                  :key="getMayPrimitiveOption(option, fieldKeys.value)"
-                  :title="getMayPrimitiveOption(option, fieldKeys.label)"
-                  hover
-                  @click="
-                    toggle(getMayPrimitiveOption(option, fieldKeys.value))
-                  "
-                >
-                  <template #value>
-                    <sar-checkbox
-                      readonly
-                      :value="getMayPrimitiveOption(option, fieldKeys.value)"
-                      :validate-event="false"
-                    />
-                  </template>
-                </sar-list-item>
-              </sar-list>
-            </template>
-          </sar-checkbox-group>
-        </scroll-view>
-      </view>
-    </template>
-  </sar-popout>
+            <sar-checkbox-group
+              :size="size"
+              :type="type"
+              :checkedColor="checkedColor"
+              :direction="direction"
+              :validate-event="false"
+              :model-value="popoutValue"
+              @change="onChange"
+            >
+              <template #custom="{ toggle }">
+                <sar-list inlaid>
+                  <sar-list-item
+                    v-for="option in options"
+                    :key="getMayPrimitiveOption(option, fieldKeys.value)"
+                    :title="getMayPrimitiveOption(option, fieldKeys.label)"
+                    hover
+                    @click="
+                      toggle(getMayPrimitiveOption(option, fieldKeys.value))
+                    "
+                  >
+                    <template #value>
+                      <sar-checkbox
+                        readonly
+                        :value="getMayPrimitiveOption(option, fieldKeys.value)"
+                        :validate-event="false"
+                      />
+                    </template>
+                  </sar-list-item>
+                </sar-list>
+              </template>
+            </sar-checkbox-group>
+          </scroll-view>
+        </view>
+      </template>
+    </sar-popout>
+  </sar-popout-input>
 </template>
 
 <script>
@@ -110,6 +112,8 @@ export default  _defineComponent({
   props:  _mergeDefaults({
     visible: { type: Boolean, required: false },
     title: { type: String, required: false },
+    popoutClass: { type: String, required: false },
+    popoutStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     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

@@ -1,9 +1,12 @@
 import { type CheckboxGroupOption, type CheckboxGroupProps } from '../checkbox/common';
 import { type PopoutInputProps } from '../popout-input/common';
+import { type StyleValue } from 'vue';
 export type CheckboxInputOption = CheckboxGroupOption;
 export interface CheckboxInputProps extends CheckboxGroupProps, Omit<PopoutInputProps, 'modelValue'> {
     visible?: boolean;
     title?: string;
+    popoutClass?: string;
+    popoutStyle?: StyleValue;
 }
 export declare const defaultCheckboxInputProps: () => {
     options: () => never[];

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

@@ -1,11 +1,14 @@
 import { type DatetimePickerProps } from '../datetime-picker/common';
 import { type PopoutInputProps } from '../popout-input/common';
+import { type StyleValue } from 'vue';
 export interface DatetimePickerInputProps extends DatetimePickerProps, Omit<PopoutInputProps, 'modelValue' | 'loading'> {
     visible?: boolean;
     title?: string;
     outletFormat?: string;
     valueFormat?: string;
     validateEvent?: boolean;
+    popoutClass?: string;
+    popoutStyle?: StyleValue;
 }
 export declare const defaultDatetimePickerInputProps: () => {
     validateEvent: boolean;

package/components/datetime-picker-input/datetime-picker-input.vue

@@ -5,34 +5,36 @@
     :readonly="readonly"
     :disabled="disabled"
     :clearable="clearable"
-    @clear="onClear"
-    @click="onInputClick"
-  />
-
-  <sar-popout
     :root-class="rootClass"
     :root-style="rootStyle"
-    keep-render
-    :visible="innerVisible"
-    @update:visible="onVisible"
-    :title="title ?? placeholder"
-    @confirm="onConfirm"
-    @enter="onEnter"
+    @clear="onClear"
+    @click="onInputClick"
   >
-    <template #visible="{ already }">
-      <sar-datetime-picker
-        v-if="already"
-        :model-value="popoutValue"
-        @change="onChange"
-        :type="type"
-        :min="min"
-        :max="max"
-        :filter="filter"
-        :formatter="formatter"
-        :value-format="valueFormat"
-      />
-    </template>
-  </sar-popout>
+    <sar-popout
+      keep-render
+      :visible="innerVisible"
+      :title="title ?? placeholder"
+      :root-class="popoutClass"
+      :root-style="popoutStyle"
+      @update:visible="onVisible"
+      @confirm="onConfirm"
+      @enter="onEnter"
+    >
+      <template #visible="{ already }">
+        <sar-datetime-picker
+          v-if="already"
+          :model-value="popoutValue"
+          @change="onChange"
+          :type="type"
+          :min="min"
+          :max="max"
+          :filter="filter"
+          :formatter="formatter"
+          :value-format="valueFormat"
+        />
+      </template>
+    </sar-popout>
+  </sar-popout-input>
 </template>
 
 <script>
@@ -71,6 +73,8 @@ export default  _defineComponent({
     outletFormat: { type: String, required: false },
     valueFormat: { type: String, required: false },
     validateEvent: { type: Boolean, required: false },
+    popoutClass: { type: String, required: false },
+    popoutStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
     type: { type: String, required: false },

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

@@ -1,11 +1,14 @@
 import { type DatetimeRangePickerProps } from '../datetime-range-picker/common';
 import { type PopoutInputProps } from '../popout-input/common';
+import { type StyleValue } from 'vue';
 export interface DatetimeRangePickerInputProps extends DatetimeRangePickerProps, Omit<PopoutInputProps, 'modelValue' | 'loading'> {
     visible?: boolean;
     title?: string;
     outletFormat?: string;
     valueFormat?: string;
     validateEvent?: boolean;
+    popoutClass?: string;
+    popoutStyle?: StyleValue;
 }
 export declare const defaultDatetimeRangePickerInputProps: () => {
     validateEvent: boolean;

package/components/datetime-range-picker-input/datetime-range-picker-input.vue

@@ -5,35 +5,37 @@
     :readonly="readonly"
     :disabled="disabled"
     :clearable="clearable"
-    @clear="onClear"
-    @click="onInputClick"
-  />
-
-  <sar-popout
     :root-class="rootClass"
     :root-style="rootStyle"
-    keep-render
-    :visible="innerVisible"
-    @update:visible="onVisible"
-    :title="title ?? placeholder"
-    @confirm="onConfirm"
-    @enter="onEnter"
+    @clear="onClear"
+    @click="onInputClick"
   >
-    <template #visible="{ already }">
-      <sar-datetime-range-picker
-        v-if="already"
-        :model-value="popoutValue"
-        @change="onChange"
-        :type="type"
-        :min="min"
-        :max="max"
-        :filter="filter"
-        :formatter="formatter"
-        :value-format="valueFormat"
-        :tabs="tabs"
-      />
-    </template>
-  </sar-popout>
+    <sar-popout
+      keep-render
+      :visible="innerVisible"
+      :title="title ?? placeholder"
+      :root-class="popoutClass"
+      :root-style="popoutStyle"
+      @update:visible="onVisible"
+      @confirm="onConfirm"
+      @enter="onEnter"
+    >
+      <template #visible="{ already }">
+        <sar-datetime-range-picker
+          v-if="already"
+          :model-value="popoutValue"
+          @change="onChange"
+          :type="type"
+          :min="min"
+          :max="max"
+          :filter="filter"
+          :formatter="formatter"
+          :value-format="valueFormat"
+          :tabs="tabs"
+        />
+      </template>
+    </sar-popout>
+  </sar-popout-input>
 </template>
 
 <script>
@@ -73,6 +75,8 @@ export default  _defineComponent({
     outletFormat: { type: String, required: false },
     valueFormat: { type: String, required: false },
     validateEvent: { type: Boolean, required: false },
+    popoutClass: { type: String, required: false },
+    popoutStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     modelValue: { type: Array, required: false },
     tabs: { type: Array, required: false },
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },

package/components/input/common.d.ts

@@ -76,4 +76,5 @@ export interface InputEmits {
     (e: 'linechange', event: any): void;
     (e: 'confirm', event: any): void;
     (e: 'keyboardheightchange', event: any): void;
+    (e: 'click', event: any): void;
 }

package/components/input/input.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="inputClass" :style="inputStyle">
+  <view :class="inputClass" :style="inputStyle" @click="onClick">
     <view :class="bem.e('content')">
       <view v-if="$slots.prepend" :class="bem.e('prepend')">
         <slot name="prepend"></slot>
@@ -185,7 +185,7 @@ export default  _defineComponent({
     minHeight: { type: String, required: false },
     validateEvent: { type: Boolean, required: false }
   }, defaultInputProps),
-  emits: ["update:model-value", "change", "input", "clear", "focus", "blur", "linechange", "confirm", "keyboardheightchange"],
+  emits: ["update:model-value", "change", "input", "clear", "focus", "blur", "linechange", "confirm", "keyboardheightchange", "click"],
   setup(__props, { expose: __expose, emit: __emit }) {
     __expose();
     const props = __props;
@@ -276,6 +276,9 @@ export default  _defineComponent({
     const onKeyboardheightchange = (event) => {
       emit("keyboardheightchange", event);
     };
+    const onClick = (event) => {
+      emit("click", event);
+    };
     const inputClass = computed(() => {
       return classNames(
         bem.b(),
@@ -308,7 +311,7 @@ export default  _defineComponent({
       return oldValue;
     }, set oldValue(v) {
       oldValue = v;
-    }, onFocus, onBlur, clearVisible, holdupClear, onClearTouchStart, onClearTouchEnd, onClearMouseDown, onClearClick, onLinechange, onConfirm, onKeyboardheightchange, inputClass, inputStyle, controlStyle, mergedPlaceholderStyle, get classNames() {
+    }, onFocus, onBlur, clearVisible, holdupClear, onClearTouchStart, onClearTouchEnd, onClearMouseDown, onClearClick, onLinechange, onConfirm, onKeyboardheightchange, onClick, inputClass, inputStyle, controlStyle, mergedPlaceholderStyle, get classNames() {
       return classNames;
     }, SarIcon };
     return __returned__;

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

@@ -1,9 +1,12 @@
 import { type PickerProps } from '../picker/common';
 import { type PopoutInputProps } from '../popout-input/common';
+import { type StyleValue } from 'vue';
 export interface PickerInputProps extends PickerProps, Omit<PopoutInputProps, 'modelValue'> {
     visible?: boolean;
     title?: string;
     validateEvent?: boolean;
+    popoutClass?: string;
+    popoutStyle?: StyleValue;
 }
 export declare const defaultPickerInputProps: () => {
     validateEvent: boolean;

package/components/picker-input/picker-input.vue

@@ -5,31 +5,33 @@
     :readonly="readonly"
     :disabled="disabled"
     :clearable="clearable"
-    @clear="onClear"
-    @click="onInputClick"
-  />
-
-  <sar-popout
     :root-class="rootClass"
     :root-style="rootStyle"
-    keep-render
-    :visible="innerVisible"
-    @update:visible="onVisible"
-    :title="title ?? placeholder"
-    @confirm="onConfirm"
-    @enter="onEnter"
+    @clear="onClear"
+    @click="onInputClick"
   >
-    <template #visible="{ already }">
-      <sar-picker
-        v-if="already"
-        :model-value="popoutValue"
-        @change="onChange"
-        :columns="columns"
-        :option-keys="optionKeys"
-        :immediate-change="immediateChange"
-      />
-    </template>
-  </sar-popout>
+    <sar-popout
+      keep-render
+      :visible="innerVisible"
+      :title="title ?? placeholder"
+      :root-class="popoutClass"
+      :root-style="popoutStyle"
+      @update:visible="onVisible"
+      @confirm="onConfirm"
+      @enter="onEnter"
+    >
+      <template #visible="{ already }">
+        <sar-picker
+          v-if="already"
+          :model-value="popoutValue"
+          @change="onChange"
+          :columns="columns"
+          :option-keys="optionKeys"
+          :immediate-change="immediateChange"
+        />
+      </template>
+    </sar-popout>
+  </sar-popout-input>
 </template>
 
 <script>
@@ -67,6 +69,8 @@ export default  _defineComponent({
     visible: { type: Boolean, required: false },
     title: { type: String, required: false },
     validateEvent: { type: Boolean, required: false },
+    popoutClass: { type: String, required: false },
+    popoutStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
     columns: { type: Array, required: false },

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

@@ -1,5 +1,8 @@
 import { type PopoutInputProps } from './common';
-declare const _default: import("vue").DefineComponent<PopoutInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import("vue").DefineComponent<PopoutInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:model-value": (value: string) => any;
     click: (event: any) => any;
     change: (value: string) => any;
@@ -10,4 +13,10 @@ declare const _default: import("vue").DefineComponent<PopoutInputProps, {}, {},
     onChange?: ((value: string) => any) | undefined;
     onClear?: (() => any) | undefined;
 }>, {}, {}, {}, {}, 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/popout-input/popout-input.vue

@@ -31,10 +31,12 @@
           @touchstart="onSealTouchStart"
           @touchend="onSealTouchEnd"
           @touchcancel="onSealTouchEnd"
-          @click="onClick"
+          @click="onSealClick"
         />
       </template>
     </sar-input>
+
+    <slot></slot>
   </view>
 </template>
 
@@ -126,7 +128,7 @@ export default  _defineComponent({
       document.addEventListener("mouseup", upHandler);
       // #endif
     };
-    const onClick = (event) => {
+    const onSealClick = (event) => {
       if (interoperable.value) {
         emit("click", event);
       }
@@ -144,7 +146,7 @@ export default  _defineComponent({
     const popoutInputStyle = computed(() => {
       return stringifyStyle(props.rootStyle);
     });
-    const __returned__ = { props, emit, bem, formContext, isDisabled, isReadonly, innerValue, setInnerValue, onChange, onClear, isSealDown, interoperable, onSealTouchStart, onSealTouchEnd, onSealMouseDown, onClick, popoutInputClass, popoutInputStyle, SarInput, SarIcon, SarLoading };
+    const __returned__ = { props, emit, bem, formContext, isDisabled, isReadonly, innerValue, setInnerValue, onChange, onClear, isSealDown, interoperable, onSealTouchStart, onSealTouchEnd, onSealMouseDown, onSealClick, popoutInputClass, popoutInputStyle, SarInput, SarIcon, SarLoading };
     return __returned__;
   }
 });

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

@@ -1,9 +1,12 @@
 import { type RadioGroupOption, type RadioGroupProps } from '../radio/common';
 import { type PopoutInputProps } from '../popout-input/common';
+import { type StyleValue } from 'vue';
 export type RadioInputOption = RadioGroupOption;
 export interface RadioInputProps extends RadioGroupProps, Omit<PopoutInputProps, 'modelValue'> {
     visible?: boolean;
     title?: string;
+    popoutClass?: string;
+    popoutStyle?: StyleValue;
 }
 export declare const defaultRadioInputProps: () => {
     options: () => never[];

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

@@ -5,66 +5,67 @@
     :readonly="readonly"
     :disabled="disabled"
     :clearable="clearable"
-    @clear="onClear"
-    @click="onInputClick"
-  />
-
-  <sar-popout
     :root-class="rootClass"
     :root-style="rootStyle"
-    :visible="innerVisible"
-    @update:visible="onVisible"
-    :title="title ?? placeholder"
-    :show-footer="false"
-    @confirm="onConfirm"
+    @clear="onClear"
+    @click="onInputClick"
   >
-    <template #visible="{ already }">
-      <view v-if="already" :class="containerClass">
-        <scroll-view
-          :class="bem.e('scroll')"
-          scroll-y
-          trap-scroll
-          :upper-threshold="0"
-          :lower-threshold="0"
-          :throttle="false"
-          @scroll="onScroll"
-          @scrolltoupper="onScrolltoupper"
-          @scrolltolower="onScrolltolower"
-        >
-          <sar-radio-group
-            :size="size"
-            :type="type"
-            :checkedColor="checkedColor"
-            :direction="direction"
-            :validate-event="false"
-            :model-value="popoutValue"
-            @change="onChange"
+    <sar-popout
+      :visible="innerVisible"
+      :title="title ?? placeholder"
+      :root-class="popoutClass"
+      :root-style="popoutStyle"
+      @update:visible="onVisible"
+      @confirm="onConfirm"
+    >
+      <template #visible="{ already }">
+        <view v-if="already" :class="containerClass">
+          <scroll-view
+            :class="bem.e('scroll')"
+            scroll-y
+            trap-scroll
+            :upper-threshold="0"
+            :lower-threshold="0"
+            :throttle="false"
+            @scroll="onScroll"
+            @scrolltoupper="onScrolltoupper"
+            @scrolltolower="onScrolltolower"
           >
-            <template #custom="{ toggle }">
-              <sar-list inlaid>
-                <sar-list-item
-                  v-for="option in options"
-                  :key="getMayPrimitiveOption(option, fieldKeys.value)"
-                  :title="getMayPrimitiveOption(option, fieldKeys.label)"
-                  hover
-                  @click="
-                    toggle(getMayPrimitiveOption(option, fieldKeys.value))
-                  "
-                >
-                  <template #value>
-                    <sar-radio
-                      readonly
-                      :value="getMayPrimitiveOption(option, fieldKeys.value)"
-                    />
-                  </template>
-                </sar-list-item>
-              </sar-list>
-            </template>
-          </sar-radio-group>
-        </scroll-view>
-      </view>
-    </template>
-  </sar-popout>
+            <sar-radio-group
+              :size="size"
+              :type="type"
+              :checkedColor="checkedColor"
+              :direction="direction"
+              :validate-event="false"
+              :model-value="popoutValue"
+              @change="onChange"
+            >
+              <template #custom="{ toggle }">
+                <sar-list inlaid>
+                  <sar-list-item
+                    v-for="option in options"
+                    :key="getMayPrimitiveOption(option, fieldKeys.value)"
+                    :title="getMayPrimitiveOption(option, fieldKeys.label)"
+                    hover
+                    @click="
+                      toggle(getMayPrimitiveOption(option, fieldKeys.value))
+                    "
+                  >
+                    <template #value>
+                      <sar-radio
+                        readonly
+                        :value="getMayPrimitiveOption(option, fieldKeys.value)"
+                      />
+                    </template>
+                  </sar-list-item>
+                </sar-list>
+              </template>
+            </sar-radio-group>
+          </scroll-view>
+        </view>
+      </template>
+    </sar-popout>
+  </sar-popout-input>
 </template>
 
 <script>
@@ -107,6 +108,8 @@ export default  _defineComponent({
   props:  _mergeDefaults({
     visible: { type: Boolean, required: false },
     title: { type: String, required: false },
+    popoutClass: { type: String, required: false },
+    popoutStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
     modelValue: { type: null, required: false },
@@ -150,8 +153,6 @@ export default  _defineComponent({
     });
     const onChange = (value) => {
       popoutValue.value = value;
-      onConfirm();
-      innerVisible.value = false;
     };
     const onConfirm = () => {
       innerValue.value = popoutValue.value;

package/components/space/common.d.ts

@@ -1,16 +1,19 @@
 import { type StyleValue } from 'vue';
 export type SpaceSize = 'small' | 'middle' | 'large';
 export type SpaceAlign = 'start' | 'end' | 'center' | 'baseline';
+export type SpaceJustify = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
 export interface SpaceProps {
     rootStyle?: StyleValue;
     rootClass?: string;
     direction?: 'vertical' | 'horizontal';
     size?: SpaceSize | (string & {});
     align?: SpaceAlign | (string & {});
+    justify?: SpaceJustify | (string & {});
     wrap?: boolean;
 }
 export declare const spaceSizes: string[];
 export declare const spaceMapAlign: Record<string, string>;
+export declare const spaceMapJustify: Record<string, string>;
 export declare const defaultSpaceProps: {
     direction: SpaceProps["direction"];
     size: SpaceProps["size"];

package/components/space/common.js

@@ -4,4 +4,11 @@ export const spaceMapAlign = {
     start: 'flex-start',
     end: 'flex-end',
 };
+export const spaceMapJustify = {
+    start: 'flex-start',
+    end: 'flex-end',
+    between: 'space-between',
+    around: 'space-around',
+    evenly: 'space-evenly',
+};
 export const defaultSpaceProps = defaultConfig.space;

package/components/space/space.vue

@@ -11,6 +11,7 @@ import { classNames, stringifyStyle, createBem } from "../../utils";
 import {
   defaultSpaceProps,
   spaceMapAlign,
+  spaceMapJustify,
   spaceSizes
 } from "./common";
 export default  _defineComponent({
@@ -27,6 +28,7 @@ export default  _defineComponent({
     direction: { type: String, required: false },
     size: { type: [String, Object], required: false },
     align: { type: [String, Object], required: false },
+    justify: { type: [String, Object], required: false },
     wrap: { type: Boolean, required: false }
   }, defaultSpaceProps),
   setup(__props, { expose: __expose }) {
@@ -49,7 +51,8 @@ export default  _defineComponent({
       return stringifyStyle(
         {
           gap: presetSize.value ? null : props.size,
-          alignItems: (props.align && spaceMapAlign[props.align]) ?? props.align
+          alignItems: (props.align && spaceMapAlign[props.align]) ?? props.align,
+          justifyContent: (props.justify && spaceMapJustify[props.justify]) ?? props.justify
         },
         props.rootStyle
       );

package/package.json

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