sard-uniapp 1.14.0 → 1.14.2

package/components/radio/variables.scss

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

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

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

package/components/rate/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-rate-gap: 20rpx;
   --sar-rate-star-font-size: 40rpx;
   --sar-rate-star-void-color: var(--sar-quaternary-color);

package/components/result/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-result-icon-font-size: 96rpx;
   --sar-result-icon-line-height: var(--sar-leading-none);
 

package/components/search/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-search-padding-x: 24rpx;
   --sar-search-padding-y: 16rpx;
   --sar-search-bg: var(--sar-emphasis-bg);

package/components/share-sheet/variables.scss

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

package/components/sidebar/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-sidebar-bg: var(--sar-body-bg);
   --sar-sidebar-width: 184rpx;
 

package/components/signature/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-signature-canvas-height: 400rpx;
   --sar-signature-canvas-bg: var(--sar-white);
   --sar-signature-full-bg: var(--sar-body-bg);

package/components/skeleton/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-skeleton-bg: var(--sar-secondary-bg);
   --sar-skeleton-border-radius: var(--sar-rounded-sm);
   --sar-skeleton-highlight-color: rgba(0, 0, 0, 0.08);

package/components/slider/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-slider-vertical-height: 300rpx;
   --sar-slider-padding: calc(var(--sar-slider-thumb-size) / 2);
 

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

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-space-small-gap: 8rpx;
   --sar-space-middle-gap: 16rpx;
   --sar-space-large-gap: 24rpx;

package/components/stepper/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-stepper-height: 64rpx;
   --sar-stepper-gap: 8rpx;
   --sar-stepper-bg: var(--sar-secondary-bg);

package/components/steps/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-steps-step-font-size: var(--sar-text-base);
   --sar-steps-step-active-opacity: var(--sar-active-opacity);
   --sar-steps-step-min-height: 72rpx;

package/components/style/mixins/theme-dark.scss

@@ -1,12 +1,14 @@
 @mixin theme-dark {
   @media (prefers-color-scheme: dark) {
-    page {
+    page,
+    .sar-portal {
       @content;
     }
   }
 
   /* #ifdef WEB */
-  :root[data-sard-theme='dark'] page {
+  :root[data-sard-theme='dark'] page,
+  :root[data-sard-theme='dark'] .sar-portal {
     @content;
   }
   /* #endif */

package/components/style/variables.scss

@@ -3,7 +3,8 @@
 @use './functions' as *;
 
 // #variables
-page {
+page,
+.sar-portal {
   // # 灰度值
   --sar-white: #{$sar-white};
   --sar-gray-100: #{$sar-gray-100};

package/components/swiper-dot/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-swiper-dot-bottom: 20rpx;
   --sar-swiper-dot-gap: 12rpx;
   --sar-swiper-dot-size: 12rpx;

package/components/switch/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-switch-font-size: 60rpx;
   --sar-switch-width: calc(1em / 6 * 10);
   --sar-switch-height: 1em;

package/components/tabbar/variables.scss

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

package/components/table/variables.scss

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

package/components/tabs/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-tabs-tab-height: 88rpx;
   --sar-tabs-tab-font-size: var(--sar-text-base);
   --sar-tabs-tab-line-height: var(--sar-leading-snug);

package/components/tag/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-tag-line-height: var(--sar-leading-tight);
   --sar-tag-color: var(--sar-white);
 

package/components/timeline/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-timeline-item-header-width: 96rpx;
 
   --sar-timeline-item-line-width: 1px;

package/components/toast/variables.scss

@@ -1,7 +1,8 @@
 @use '../style/base' as *;
 
 // #variables
-page {
+page,
+.sar-portal {
   --sar-toast-top: 10%;
   --sar-toast-bottom: 10%;
 

package/components/tree/variables.scss

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

package/components/upload/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-upload-preview-width: 176rpx;
   --sar-upload-preview-height: 176rpx;
   --sar-upload-preview-gap: 16rpx;

package/package.json

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