sard-uniapp 1.24.4 → 1.24.6

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/pagination/pagination.d.ts

@@ -8,8 +8,8 @@ declare const __VLS_component: import("vue").DefineComponent<PaginationProps, {}
     "onUpdate:current"?: ((page: number) => any) | undefined;
 }>, {
     type: "simple" | "multi";
-    current: number;
     total: number;
+    current: number;
     pageSize: number;
     pageButtonCount: number;
     multiCount: number;

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

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

@@ -54,7 +54,7 @@ import SarPicker from "../picker/picker.vue";
 import {
   defaultPickerPopoutProps
 } from "./common";
-import { isEmptyBinding, isNumber } from "../../utils";
+import { isEmptyArray, isEmptyBinding, isNumber } from "../../utils";
 import { defaultOptionKeys, getInitialValue } from "../picker/common";
 import { computed } from "vue";
 import { useFormPopout } from "../../use";
@@ -116,6 +116,9 @@ export default  _defineComponent({
     __expose();
     const props = __props;
     const emit = __emit;
+    const fieldKeys = computed(() => {
+      return Object.assign({}, defaultOptionKeys, props.optionKeys);
+    });
     const {
       innerVisible,
       innerValue,
@@ -125,7 +128,7 @@ export default  _defineComponent({
       onVisibleHook
     } = useFormPopout(props, emit, {
       onConfirmBefore() {
-        if (isEmptyBinding(popoutValue.value)) {
+        if (isEmptyBinding(popoutValue.value) || isEmptyArray(popoutValue.value)) {
           const [initialValue, selectedOptions] = getInitialValue(
             props.columns,
             fieldKeys.value
@@ -135,15 +138,12 @@ export default  _defineComponent({
         }
       }
     });
-    const fieldKeys = computed(() => {
-      return Object.assign({}, defaultOptionKeys, props.optionKeys);
-    });
     const onEnter = () => {
-      if (!isEmptyBinding(innerValue.value) && popoutValue.value !== innerValue.value) {
+      if (!isEmptyBinding(innerValue.value) && !isEmptyArray(innerValue.value) && popoutValue.value !== innerValue.value) {
         popoutValue.value = innerValue.value;
       }
     };
-    const __returned__ = { props, emit, innerVisible, innerValue, popoutValue, onChange, onConfirm, onVisibleHook, fieldKeys, onEnter, SarPopout, SarPicker, get isNumber() {
+    const __returned__ = { props, emit, fieldKeys, innerVisible, innerValue, popoutValue, onChange, onConfirm, onVisibleHook, onEnter, SarPopout, SarPicker, get isNumber() {
       return isNumber;
     } };
     return __returned__;

package/components/popout/index.scss

@@ -6,7 +6,7 @@
     padding-bottom: env(safe-area-inset-bottom);
     border-top-left-radius: var(--sar-popout-border-top-radius);
     border-top-right-radius: var(--sar-popout-border-top-radius);
-    background-color: var(--sar-popout-bg);
+    background: var(--sar-popout-bg);
   }
 
   @include e(header) {

package/components/popout/popout.vue

@@ -13,22 +13,23 @@
       <view :class="classNames(bem.e('header'), bem.em('header', props.type))">
         <view v-if="type === 'compact'" :class="bem.e('button-wrap')">
           <slot
+            v-if="$slots.cancel"
             name="cancel"
             :on-click="onCancel"
             :loading="loading.cancel"
             :text="mergedCancelText"
+          ></slot>
+          <sar-button
+            v-if="!$slots.cancel"
+            type="pale-text"
+            theme="neutral"
+            :root-class="classNames(bem.e('header-cancel'))"
+            :loading="loading.cancel"
+            block
+            @click="onCancel"
           >
-            <sar-button
-              type="pale-text"
-              theme="neutral"
-              :root-class="classNames(bem.e('header-cancel'))"
-              :loading="loading.cancel"
-              block
-              @click="onCancel"
-            >
-              {{ mergedCancelText }}
-            </sar-button>
-          </slot>
+            {{ mergedCancelText }}
+          </sar-button>
         </view>
         <slot name="title-prepend"></slot>
         <view :class="bem.e('title')">
@@ -39,24 +40,25 @@
         </view>
         <view v-if="type === 'compact'" :class="bem.e('button-wrap')">
           <slot
+            v-if="$slots.confirm"
             name="confirm"
             :on-click="onConfirm"
             :disabled="confirmDisabled"
             :loading="loading.confirm"
             :text="mergedConfirmText"
+          ></slot>
+          <sar-button
+            v-if="!$slots.confirm"
+            type="pale-text"
+            theme="primary"
+            :root-class="classNames(bem.e('header-confirm'))"
+            :loading="loading.confirm"
+            :disabled="confirmDisabled"
+            block
+            @click="onConfirm"
           >
-            <sar-button
-              type="pale-text"
-              theme="primary"
-              :root-class="classNames(bem.e('header-confirm'))"
-              :loading="loading.confirm"
-              :disabled="confirmDisabled"
-              block
-              @click="onConfirm"
-            >
-              {{ mergedConfirmText }}
-            </sar-button>
-          </slot>
+            {{ mergedConfirmText }}
+          </sar-button>
         </view>
         <view
           v-if="type === 'loose' && showClose"
@@ -72,45 +74,45 @@
       <slot name="visible" :whole="wholeVisible" :already="already"></slot>
       <view v-if="showFooter && type === 'loose'" :class="bem.e('footer')">
         <slot
+          v-if="$slots.cancel"
           name="cancel"
           :on-click="onCancel"
           :visible="showCancel"
           :loading="loading.cancel"
           :text="mergedCancelText"
+        ></slot>
+        <sar-button
+          v-if="!$slots.cancel && showCancel"
+          type="pale"
+          theme="primary"
+          round
+          :loading="loading.cancel"
+          block
+          @click="onCancel"
         >
-          <sar-button
-            v-if="showCancel"
-            type="pale"
-            theme="primary"
-            round
-            :loading="loading.cancel"
-            block
-            @click="onCancel"
-          >
-            {{ mergedCancelText }}
-          </sar-button>
-        </slot>
+          {{ mergedCancelText }}
+        </sar-button>
         <slot
+          v-if="$slots.confirm"
           name="confirm"
           :visible="showConfirm"
           :on-click="onConfirm"
           :disabled="confirmDisabled"
           :loading="loading.confirm"
           :text="mergedConfirmText"
+        ></slot>
+        <sar-button
+          v-if="!$slots.confirm && showConfirm"
+          type="default"
+          theme="primary"
+          round
+          :loading="loading.confirm"
+          :disabled="confirmDisabled"
+          block
+          @click="onConfirm"
         >
-          <sar-button
-            v-if="showConfirm"
-            type="default"
-            theme="primary"
-            round
-            :loading="loading.confirm"
-            :disabled="confirmDisabled"
-            block
-            @click="onConfirm"
-          >
-            {{ mergedConfirmText }}
-          </sar-button>
-        </slot>
+          {{ mergedConfirmText }}
+        </sar-button>
       </view>
     </view>
   </sar-popup>

package/components/popover/index.scss

@@ -10,7 +10,7 @@
     left: auto;
     overflow: visible;
     border-radius: var(--sar-popover-border-radius);
-    background-color: var(--sar-popover-bg);
+    background: var(--sar-popover-bg);
     box-shadow: var(--sar-popover-box-shadow);
     touch-action: none;
   }
@@ -38,12 +38,12 @@
   }
 
   @include m(light) {
-    background-color: var(--sar-popover-bg);
+    background: var(--sar-popover-bg);
   }
 
   @include m(dark) {
     color: var(--sar-popover-dark-color);
-    background-color: var(--sar-popover-dark-bg);
+    background: var(--sar-popover-dark-bg);
   }
 
   // zoom