sard-uniapp 1.14.0 → 1.14.2

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [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)
+
+
+### Bug Fixes
+
+* 修复 popup 组件 transform+fixed 渲染问题 ([5d0bf10](https://github.com/sutras/sard-uniapp/commit/5d0bf106df39e9c48c84bd7f76c71bb9306070c9))
+
+
+
 # [1.14.0](https://github.com/sutras/sard-uniapp/compare/v1.13.3...v1.14.0) (2025-05-12)
 
 

package/components/accordion/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-accordion-bg: var(--sar-emphasis-bg);
   --sar-accordion-active-bg: var(--sar-active-bg);
   --sar-accordion-border-color: var(--sar-border-color);

package/components/action-sheet/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-action-sheet-border-radius: var(--sar-rounded-xl);
   --sar-action-sheet-border-color: var(--sar-border-color);
   --sar-action-sheet-bg: var(--sar-emphasis-bg);

package/components/alert/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-alert-paddding-x: 32rpx;
   --sar-alert-paddding-y: 16rpx;
   --sar-alert-font-size: var(--sar-text-base);

package/components/avatar/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-avatar-width: 128rpx;
   --sar-avatar-height: 128rpx;
   --sar-avatar-font-size: 64rpx;

package/components/back-top/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-back-top-right: 48rpx;
   --sar-back-top-bottom: 96rpx;
   --sar-back-top-z-index: 1000;

package/components/badge/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-badge-height: 36rpx;
   --sar-badge-padding-x: 8rpx;
   --sar-badge-font-size: var(--sar-text-sm);

package/components/button/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-button-height-mini: 56rpx;
   --sar-button-padding-y-mini: 0;
   --sar-button-padding-x-mini: 12rpx;

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/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-calendar-current-month-font-size: var(--sar-text-lg);
 
   --sar-calendar-week-item-height: 64rpx;

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/card/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-card-border-radius: var(--sar-rounded-lg);
   --sar-card-border-color: var(--sar-border-color);
   --sar-card-bg: var(--sar-emphasis-bg);

package/components/cascader/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-cascader-wrapper-duration: var(--sar-duration);
   --sar-cascader-loading-wrapper-duration: var(--sar-duration);
 

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/check-icon/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-check-icon-size: 1em;
   --sar-check-icon-square-border-radius: 0.15em;
   --sar-check-icon-border-color: var(--sar-quaternary-color);

package/components/checkbox/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-checkbox-group-column-gap: 24rpx;
   --sar-checkbox-group-row-gap: 16rpx;
 

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/checkbox-input/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-checkbox-input-max-height: 640rpx;
 }
 // #endvariables

package/components/collapse/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-collapse-transition-duration: var(--sar-duration);
 }
 // #endvariables

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/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-datetime-range-picker-wrapper-duration: var(--sar-duration);
 }
 // #endvariables

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;