sard-uniapp 1.24.5 → 1.24.6

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## [1.24.6](https://github.com/sutras/sard-uniapp/compare/v1.24.5...v1.24.6) (2025-09-23)
+
+
+### Bug Fixes
+
+* **picker:** 将空数组视为空值, 修复级联选择初始选择问题 ([2fd8d18](https://github.com/sutras/sard-uniapp/commit/2fd8d18e411a526dc65cb1c99826162bae3ba4c6))
+* 修复getWindowInfo在支付宝端缺少safeAreaInsets的问题 ([cbd26d7](https://github.com/sutras/sard-uniapp/commit/cbd26d74074d9afe9299db92b9245de7cc46177a))
+
+
+
 ## [1.24.5](https://github.com/sutras/sard-uniapp/compare/v1.24.4...v1.24.5) (2025-09-20)
 
 

package/components/accordion-item/index.scss

@@ -3,7 +3,7 @@
 @include bem(accordion-item) {
   @include b() {
     @include universal;
-    background-color: var(--sar-accordion-bg);
+    background: var(--sar-accordion-bg);
 
     &::before {
       @include border-top(var(--sar-accordion-border-color));
@@ -64,7 +64,7 @@
   @include m-not(disabled) {
     @include e(header) {
       &:active {
-        background-color: var(--sar-accordion-active-bg);
+        background: var(--sar-accordion-active-bg);
       }
     }
   }

package/components/action-sheet/index.scss

@@ -5,7 +5,7 @@
     padding-bottom: env(safe-area-inset-bottom);
     border-top-left-radius: var(--sar-action-sheet-border-radius);
     border-top-right-radius: var(--sar-action-sheet-border-radius);
-    background-color: var(--sar-action-sheet-bg);
+    background: var(--sar-action-sheet-bg);
     touch-action: none;
   }
 
@@ -24,7 +24,7 @@
   @include e(gap) {
     @include universal;
     height: var(--sar-action-sheet-gap-height);
-    background-color: var(--sar-action-sheet-gap-bg);
+    background: var(--sar-action-sheet-gap-bg);
   }
 
   @include e(content) {
@@ -55,7 +55,7 @@
 
     @include m-not(disabled, loading) {
       &:active {
-        background-color: var(--sar-action-sheet-active-bg);
+        background: var(--sar-action-sheet-active-bg);
       }
     }
   }
@@ -88,7 +88,7 @@
     cursor: pointer;
 
     &:active {
-      background-color: var(--sar-action-sheet-active-bg);
+      background: var(--sar-action-sheet-active-bg);
     }
   }
 

package/components/avatar/index.scss

@@ -10,7 +10,7 @@
     width: var(--sar-avatar-width);
     height: var(--sar-avatar-height);
     font-size: var(--sar-avatar-font-size);
-    background-color: var(--sar-avatar-bg);
+    background: var(--sar-avatar-bg);
     border: 1px solid transparent;
   }
 
@@ -43,7 +43,7 @@
     height: 100%;
     font-size: var(--sar-avatar-remain-font-size);
     color: var(--sar-avatar-remain-color);
-    background-color: var(--sar-avatar-remain-bg);
+    background: var(--sar-avatar-remain-bg);
     border-radius: inherit;
   }
 }

package/components/back-top/index.scss

@@ -15,7 +15,7 @@
     border-radius: var(--sar-back-top-border-radius);
     font-size: var(--sar-back-top-font-size);
     color: var(--sar-back-top-color);
-    background-color: var(--sar-back-top-bg);
+    background: var(--sar-back-top-bg);
     box-shadow: var(--sar-back-top-box-shadow);
     cursor: pointer;
     pointer-events: none;

package/components/badge/index.scss

@@ -17,7 +17,7 @@
     border: 1px solid var(--sar-badge-border-color);
     border-radius: var(--sar-rounded-full);
     color: var(--sar-badge-color);
-    background-color: var(--sar-badge-bg);
+    background: var(--sar-badge-bg);
 
     @include m(fixed) {
       position: absolute;

package/components/button/index.scss

@@ -43,7 +43,7 @@
     height: 100%;
     border-radius: inherit;
     opacity: 0;
-    background-color: var(--sar-button-active-bg);
+    background: var(--sar-button-active-bg);
     pointer-events: none;
   }
 
@@ -152,7 +152,7 @@
     @include m(mild-#{$theme}) {
       @include button-set-theme {
         color: $color;
-        background-color: var(--sar-button-mild-bg);
+        background: var(--sar-button-mild-bg);
       }
     }
 

package/components/calendar-month/index.scss

@@ -66,12 +66,12 @@
     @include m(selected, same) {
       border-radius: var(--sar-calendar-day-border-radius);
       color: var(--sar-calendar-day-selected-color);
-      background-color: var(--sar-calendar-day-selected-bg);
+      background: var(--sar-calendar-day-selected-bg);
     }
 
     @include m(start, end) {
       color: var(--sar-calendar-day-selected-color);
-      background-color: var(--sar-calendar-day-selected-bg);
+      background: var(--sar-calendar-day-selected-bg);
     }
 
     @include m(start) {
@@ -86,7 +86,7 @@
 
     @include m(middle) {
       color: var(--sar-calendar-day-middle-color);
-      background-color: var(--sar-calendar-day-middle-bg);
+      background: var(--sar-calendar-day-middle-bg);
     }
   }
 

package/components/card/index.scss

@@ -3,14 +3,14 @@
 @include bem(card) {
   @include b() {
     @include universal;
-    background-color: var(--sar-card-bg);
+    background: var(--sar-card-bg);
     border-radius: var(--sar-card-border-radius);
 
     @include m(hover) {
       cursor: pointer;
 
       &:active {
-        background-color: var(--sar-card-active-bg);
+        background: var(--sar-card-active-bg);
       }
     }
   }

package/components/cascader/index.scss

@@ -57,7 +57,7 @@
 
     @include m-not(disabled) {
       &:active {
-        background-color: var(--sar-cascader-option-active-bg);
+        background: var(--sar-cascader-option-active-bg);
       }
     }
   }

package/components/check-icon/index.scss

@@ -23,7 +23,7 @@
 
     @include m(disabled) {
       color: var(--sar-check-icon-disabled-color);
-      background-color: var(--sar-check-icon-disabled-bg);
+      background: var(--sar-check-icon-disabled-bg);
       border-color: var(--sar-check-icon-disabled-border-color);
     }
   }

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

@@ -53,7 +53,11 @@ import {
 import {
   defaultCheckboxInputProps
 } from "./common";
-import { getMayPrimitiveOption, isEmptyBinding } from "../../utils";
+import {
+  getMayPrimitiveOption,
+  isEmptyArray,
+  isEmptyBinding
+} from "../../utils";
 import { usePopoutInput } from "../../use";
 /**
  * @property {string} rootClass 弹出式输入框根元素类名，默认值：-。
@@ -162,7 +166,7 @@ export default  _defineComponent({
       ).map((option) => getMayPrimitiveOption(option, optionKeys.label)).join(", ");
     }
     function getInputValue() {
-      if (isEmptyBinding(innerValue.value) || Array.isArray(innerValue.value) && innerValue.value.length === 0) {
+      if (isEmptyBinding(innerValue.value) || isEmptyArray(innerValue.value)) {
         return "";
       }
       return getOutletText(props.options, fieldKeys.value, innerValue.value);

package/components/crop-image/index.scss

@@ -75,7 +75,7 @@
     align-items: center;
     font-size: 60rpx;
     color: #fff;
-    background-color: var(--sar-mask-illegible);
+    background: var(--sar-mask-illegible);
     touch-action: none;
   }
 }

package/components/dialog/index.scss

@@ -5,7 +5,7 @@
     @include universal;
     width: var(--sar-dialog-width);
     max-width: 100%;
-    background-color: var(--sar-dialog-bg);
+    background: var(--sar-dialog-bg);
     border-radius: var(--sar-dialog-border-radius);
   }
 

package/components/dropdown/index.scss

@@ -5,7 +5,7 @@
     @include universal;
     flex-direction: row;
     height: var(--sar-dropdown-height);
-    background-color: var(--sar-dropdown-bg);
+    background: var(--sar-dropdown-bg);
   }
 
   @include e(shadow) {

package/components/fab/index.scss

@@ -8,6 +8,7 @@
     bottom: var(--sar-fab-bottom);
     z-index: var(--sar-fab-z-index);
     opacity: 0;
+    touch-action: none;
   }
 
   @include e(content) {

package/components/fab-item/index.scss

@@ -38,7 +38,7 @@
     border-radius: var(--sar-rounded-full);
     font-size: var(--sar-fab-item-btn-font-size);
     color: var(--sar-fab-item-btn-color);
-    background-color: var(--sar-fab-item-btn-bg);
+    background: var(--sar-fab-item-btn-bg);
     box-shadow: var(--sar-fab-item-btn-box-shadow);
   }
 }

package/components/floating-bubble/index.scss

@@ -13,7 +13,7 @@
     height: var(--sar-floating-bubble-size);
     border-radius: var(--sar-rounded-full);
     color: var(--sar-floating-bubble-color);
-    background-color: var(--sar-floating-bubble-bg);
+    background: var(--sar-floating-bubble-bg);
     box-shadow: var(--sar-floating-bubble-box-shadow);
     opacity: 0;
     cursor: pointer;

package/components/form/index.scss

@@ -3,7 +3,7 @@
 @include bem(form) {
   @include b() {
     @include universal;
-    background-color: var(--sar-form-bg);
+    background: var(--sar-form-bg);
   }
 
   @include m(card) {

package/components/grid-item/index.scss

@@ -20,7 +20,7 @@
     padding-right: var(--sar-grid-item-padding-x);
     padding-bottom: var(--sar-grid-item-padding-y);
     padding-left: var(--sar-grid-item-padding-x);
-    background-color: var(--sar-grid-bg);
+    background: var(--sar-grid-bg);
   }
 
   @include e(main) {
@@ -120,7 +120,7 @@
     @include e(content) {
       cursor: pointer;
       &:active {
-        background-color: var(--sar-grid-active-bg);
+        background: var(--sar-grid-active-bg);
       }
     }
   }

package/components/indexes-anchor/index.scss

@@ -10,6 +10,6 @@
     font-size: var(--sar-indexes-anchor-font-size);
     line-height: var(--sar-indexes-anchor-line-height);
     color: var(--sar-indexes-anchor-color);
-    background-color: var(--sar-indexes-anchor-bg);
+    background: var(--sar-indexes-anchor-bg);
   }
 }

package/components/indexes-nav/index.scss

@@ -25,7 +25,7 @@
 
     @include m(active) {
       color: var(--sar-indexes-nav-item-active-color);
-      background-color: var(--sar-indexes-nav-item-active-bg);
+      background: var(--sar-indexes-nav-item-active-bg);
     }
   }
 
@@ -40,7 +40,7 @@
     justify-content: center;
     margin-right: var(--sar-indexes-hint-margin-right);
     border-radius: 50% 0 50% 50%;
-    background-color: var(--sar-indexes-hint-bg);
+    background: var(--sar-indexes-hint-bg);
     transform-origin: top right;
     transform: rotate(45deg);
     pointer-events: none;

package/components/input/index.scss

@@ -34,7 +34,7 @@
     }
 
     @include m(disabled) {
-      background-color: var(--sar-disabled-shallow-bg);
+      background: var(--sar-disabled-shallow-bg);
     }
   }
 
@@ -58,7 +58,7 @@
     border-width: 0;
     font-size: var(--sar-input-control-font-size);
     line-height: var(--sar-input-control-line-height);
-    background-color: transparent;
+    background: var(--sar-input-bg);
 
     @include m(input) {
       height: var(--sar-input-control-input-height);

package/components/keyboard/index.scss

@@ -4,7 +4,7 @@
   @include b() {
     @include universal;
     padding: var(--sar-keyboard-padding);
-    background-color: var(--sar-keyboard-bg);
+    background: var(--sar-keyboard-bg);
   }
 
   @include e(content) {
@@ -31,11 +31,11 @@
     border-radius: var(--sar-keyboard-key-border-radius);
     font-size: var(--sar-keyboard-key-font-size);
     color: var(--sar-keyboard-key-color);
-    background-color: var(--sar-keyboard-key-bg);
+    background: var(--sar-keyboard-key-bg);
     cursor: pointer;
 
     &:active {
-      background-color: var(--sar-keyboard-key-active-bg);
+      background: var(--sar-keyboard-key-active-bg);
     }
   }
 
@@ -57,10 +57,10 @@
         max-width: 20%;
 
         @include e(key) {
-          background-color: var(--sar-keyboard-key-plate-bg);
+          background: var(--sar-keyboard-key-plate-bg);
 
           &:active {
-            background-color: var(--sar-keyboard-key-plate-active-bg);
+            background: var(--sar-keyboard-key-plate-active-bg);
           }
         }
       }

package/components/list-item/index.scss

@@ -8,7 +8,7 @@
     overflow: hidden;
     min-height: var(--sar-list-item-min-height);
     padding: var(--sar-list-item-padding-y) var(--sar-list-item-padding-x);
-    background-color: var(--sar-list-item-bg);
+    background: var(--sar-list-item-bg);
 
     &:first-child {
       border-top-left-radius: inherit;
@@ -40,7 +40,7 @@
       cursor: pointer;
 
       &:active {
-        background-color: var(--sar-list-item-active-bg);
+        background: var(--sar-list-item-active-bg);
       }
     }
 

package/components/menu-item/index.scss

@@ -81,7 +81,7 @@
     @include e(item) {
       @include m-not(disabled) {
         &:active {
-          background-color: var(--sar-menu-item-active-bg);
+          background: var(--sar-menu-item-active-bg);
         }
       }
 
@@ -97,7 +97,7 @@
     @include e(item) {
       @include m-not(disabled) {
         &:active {
-          background-color: var(--sar-menu-item-dark-active-bg);
+          background: var(--sar-menu-item-dark-active-bg);
         }
       }
 

package/components/notice-bar/index.scss

@@ -8,7 +8,7 @@
     align-items: center;
     min-height: var(--sar-notice-bar-min-height);
     padding: 0 var(--sar-notice-bar-padding-x);
-    background-color: var(--sar-notice-bar-bg);
+    background: var(--sar-notice-bar-bg);
     color: var(--sar-notice-bar-color);
 
     @include m(wrap) {
@@ -64,7 +64,8 @@
 
   @include m(infinite) {
     @include e(wrapper) {
-      animation: #{bem-ns(notice-bar-scroll-infinite)} linear both running infinite;
+      animation: #{bem-ns(notice-bar-scroll-infinite)} linear both running
+        infinite;
     }
   }
 

package/components/overlay/index.scss

@@ -9,7 +9,7 @@
     right: 0;
     bottom: 0;
     z-index: var(--sar-overlay-z-index);
-    background-color: var(--sar-overlay-bg);
+    background: var(--sar-overlay-bg);
     touch-action: none;
 
     @include m(enter-from, leave-to) {

package/components/pagination/index.scss

@@ -28,7 +28,7 @@
     @include m(current) {
       z-index: 3;
       color: var(--sar-pagination-item-current-color);
-      background-color: var(--sar-pagination-item-current-bg);
+      background: var(--sar-pagination-item-current-bg);
       border-color: var(--sar-pagination-item-current-border-color);
     }
 
@@ -38,7 +38,7 @@
 
     @include m-not(disabled, current) {
       &:active {
-        background-color: var(--sar-pagination-item-active-bg);
+        background: var(--sar-pagination-item-active-bg);
       }
     }
   }

package/components/password-input/index.scss

@@ -28,17 +28,16 @@
     width: var(--sar-password-input-ciphertext-size);
     height: var(--sar-password-input-ciphertext-size);
     border-radius: var(--sar-rounded-full);
-    background-color: var(--sar-password-input-ciphertext-bg);
+    background: var(--sar-password-input-ciphertext-bg);
   }
 
   @include e(cursor) {
     @include universal;
     width: var(--sar-password-input-cursor-width);
     height: var(--sar-password-input-cursor-height);
-    background-color: var(--sar-password-input-cursor-color);
-    animation: var(--sar-password-input-cursor-animation-duration) #{bem-ns(
-        password-input-cursor-flicker
-      )} infinite;
+    background: var(--sar-password-input-cursor-color);
+    animation: var(--sar-password-input-cursor-animation-duration)
+      #{bem-ns(password-input-cursor-flicker)} infinite;
   }
 
   @keyframes #{bem-ns(password-input-cursor-flicker)} {
@@ -128,11 +127,11 @@
     color: var(--sar-disabled-color);
 
     @include e(item) {
-      background-color: var(--sar-disabled-shallow-bg);
+      background: var(--sar-disabled-shallow-bg);
     }
 
     @include e(ciphertext) {
-      background-color: var(--sar-disabled-color);
+      background: var(--sar-disabled-color);
     }
   }
 }

package/components/picker/common.js

@@ -113,8 +113,9 @@ export function getInitialValue(columns, optionKeys) {
             ];
         case 'cascader': {
             const options = [];
+            recurse(columns, options);
             return [
-                getValueOrLabelByOption(recurse(columns, options), optionKeys.value),
+                options.map((option) => getValueOrLabelByOption(option, optionKeys.value)),
                 options,
             ];
         }

package/components/picker/picker.vue

@@ -39,7 +39,8 @@ import {
   toArray,
   arrayEqual,
   isNumber,
-  isEmptyBinding
+  isEmptyBinding,
+  isEmptyArray
 } from "../../utils";
 import {
   defaultOptionKeys,
@@ -112,17 +113,12 @@ export default  _defineComponent({
         columnIndexes.value = indexes;
       }
     };
-    watch(
-      [innerValue, () => props.columns, fieldKeys],
-      () => {
-        if (!isEmptyBinding(innerValue.value)) {
-          updateColumnIndexes();
-        }
-      },
-      {
-        immediate: true
+    updateColumnIndexes();
+    watch([innerValue, () => props.columns, fieldKeys], () => {
+      if (!isEmptyBinding(innerValue.value) && !isEmptyArray(innerValue.value)) {
+        updateColumnIndexes();
       }
-    );
+    });
     const onChange = (event) => {
       if (!props.columns || props.columns.length === 0) {
         return;
@@ -130,10 +126,11 @@ export default  _defineComponent({
       let indexes = event.detail.value;
       if (indexes.some((index) => index === Infinity)) {
         nextTick(() => {
-          columnIndexes.value = isEmptyBinding(innerValue.value) ? columnIndexes.value.map(() => 0) : [...columnIndexes.value];
+          columnIndexes.value = isEmptyBinding(innerValue.value) || isEmptyArray(innerValue.value) ? columnIndexes.value.map(() => 0) : [...columnIndexes.value];
         });
         return;
       }
+      indexes = renderedColumns.value.map((_, index) => indexes[index] || 0);
       if (columnsType.value === "cascader") {
         let startIndex = -1;
         const nextIndexes = [];
@@ -195,7 +192,7 @@ export default  _defineComponent({
     watch(
       [() => props.columns, innerValue],
       ([newColumns, newValue], [oldColumns, oldValue]) => {
-        if (newColumns !== oldColumns || newValue !== oldValue && columnsType.value === "cascader" && !isEmptyBinding(newValue) && (!Array.isArray(newValue) || newValue.length > 0)) {
+        if (newColumns !== oldColumns || newValue !== oldValue && columnsType.value === "cascader" && !isEmptyBinding(newValue) && !isEmptyArray(newValue)) {
           updateRenderedColumns();
         }
       }
@@ -203,7 +200,7 @@ export default  _defineComponent({
     watch(
       () => props.modelValue,
       () => {
-        if (isEmptyBinding(props.modelValue)) {
+        if (isEmptyBinding(props.modelValue) || isEmptyArray(props.modelValue)) {
           updateColumnIndexes();
           updateRenderedColumns();
         }

package/components/picker-input/README.md

@@ -25,6 +25,10 @@ import PickerInput from 'sard-uniapp/components/picker-input/picker-input.vue'
 
 @code('${DEMO_PATH}/picker-input/demo/Basic.vue')
 
+### 级联选择
+
+@code('${DEMO_PATH}/picker-input/demo/Cascaded.vue')
+
 ## API
 
 ### PickerInputProps

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

@@ -71,7 +71,7 @@ import {
   getOptionsByIndexes,
   getValueOrLabelByOption
 } from "../picker/common";
-import { isEmptyBinding, toArray } from "../../utils";
+import { isEmptyArray, isEmptyBinding, toArray } from "../../utils";
 import { usePopoutInput } from "../../use";
 import {
   defaultPickerInputProps
@@ -180,7 +180,7 @@ export default  _defineComponent({
       return labels.join("/");
     }
     function getInputValue() {
-      if (isEmptyBinding(innerValue.value)) {
+      if (isEmptyBinding(innerValue.value) || isEmptyArray(innerValue.value)) {
         return "";
       }
       return getOutletText(props.columns, fieldKeys.value, innerValue.value);

package/components/picker-popout/README.md

@@ -24,6 +24,10 @@ import PickerPopout from 'sard-uniapp/components/picker-popout/picker-popout.vue
 
 @code('${DEMO_PATH}/picker-popout/demo/Basic.vue')
 
+### 级联选择
+
+@code('${DEMO_PATH}/picker-popout/demo/Cascaded.vue')
+
 ## API
 
 ### PickerPopoutProps