sard-uniapp 1.11.2 → 1.12.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# [1.12.0](https://github.com/sutras/sard-uniapp/compare/v1.11.2...v1.12.0) (2025-03-25)
+
+
+### Bug Fixes
+
+* **cascader:** 允许空字符串作为未选择初始值 ([c0073ec](https://github.com/sutras/sard-uniapp/commit/c0073ec8b3bc285443fca6c17b86dbdb7976ec08))
+* 修复 table 组件右边固定阴影显示问题 ([4e7869a](https://github.com/sutras/sard-uniapp/commit/4e7869a70f60d4f9d6f01c68fdc90a00080adad9))
+* 修复cascader在支付宝端的展示问题 ([e5ab136](https://github.com/sutras/sard-uniapp/commit/e5ab136da081fbcfc6a8f07d00482231cd7270fe))
+* 修复因uniapp会修改元素id导致获取不到元素的问题 ([10dbfe0](https://github.com/sutras/sard-uniapp/commit/10dbfe0adf49f32f85d6902c7a255b7a84d400fe))
+
+
+### Features
+
+* button 组件新增 block 属性 ([bb4d39b](https://github.com/sutras/sard-uniapp/commit/bb4d39b0dd417273fcf9fac3f132a26332d6bd8d))
+* grid 组件新增 badge 相关属性 ([0c33247](https://github.com/sutras/sard-uniapp/commit/0c3324750a1ee48a9f2801e7e20defeddad70003))
+* navbar组件新增属性,修改样式 ([dc4e747](https://github.com/sutras/sard-uniapp/commit/dc4e7478dedeb4aaecb659b99eb9ecc9acfba2e6))
+* 新增 crop-image 组件 ([5b89f0e](https://github.com/sutras/sard-uniapp/commit/5b89f0ea3b5f09e28534222e4eecd9726ad03b97))
+* 新增 ScrollSpy 组件 ([d4c0e92](https://github.com/sutras/sard-uniapp/commit/d4c0e92d2a9aab60687f08b384937f5276e53c5e))
+* 新增 Sidebar 组件 ([4c1487a](https://github.com/sutras/sard-uniapp/commit/4c1487a9fa77f01ea0be962d64c49167afb29ece))
+* 新增 signature 组件 ([04b7bf8](https://github.com/sutras/sard-uniapp/commit/04b7bf84149c78ad336f0a23eac8a60b0f5b2396))
+* 新增 status-bar 组件 ([49339d7](https://github.com/sutras/sard-uniapp/commit/49339d79738e829a34edc4a83a237ed3814e24c1))
+* 新增 zIndex 全局配置 ([77802cd](https://github.com/sutras/sard-uniapp/commit/77802cd2c772bd3c6c67e8a09254a1e0b501cece))
+
+
+
 ## [1.11.2](https://github.com/sutras/sard-uniapp/compare/v1.11.1...v1.11.2) (2025-03-06)
 
 

package/README.md

@@ -25,7 +25,7 @@
 
 ## 特性
 
-- 🧩 76+个高质量组件，覆盖移动端主流场景
+- 🧩 80+个高质量组件，覆盖移动端主流场景
 - 💪 支持一套代码同时开发 H5 / 小程序 / App
 - 🌿 支持按需引入和 `Tree Shaking`
 - 📖 详尽的文档和案例展示
@@ -129,7 +129,8 @@ npm run release
 
 ## 新增组件流程
 
-- 运行 `npm run newComponent` 命令自动创建组件
+- 运行 `npm run nc` 命令创建组件
+- 运行 `npm run nsc` 命令创建子组件
 - 编写组件代码
 - 编写案例代码
 - 编写组件文档

package/components/action-sheet/action-sheet.vue

@@ -49,7 +49,13 @@
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
 import { computed, ref, watch } from "vue";
-import { classNames, stringifyStyle, createBem, noop } from "../../utils";
+import {
+  classNames,
+  stringifyStyle,
+  createBem,
+  noop,
+  isFunction
+} from "../../utils";
 import SarPopup from "../popup/popup.vue";
 import SarLoading from "../loading/loading.vue";
 import {
@@ -92,7 +98,7 @@ export default  _defineComponent({
       }
     );
     const perhapsClose = (type) => {
-      if (typeof props.beforeClose === "function") {
+      if (isFunction(props.beforeClose)) {
         const result = props.beforeClose(type);
         if (result instanceof Promise) {
           return result.then(() => {

package/components/action-sheet/index.scss

@@ -40,7 +40,7 @@
     cursor: pointer;
 
     &:not(:first-child) {
-      &:before {
+      &::before {
         @include border-top(var(--sar-action-sheet-border-color));
       }
     }

package/components/back-top/back-top.d.ts

@@ -5,8 +5,8 @@ declare const __VLS_component: import("vue").DefineComponent<BackTopProps, {}, {
 }, string, import("vue").PublicProps, Readonly<BackTopProps> & Readonly<{
     onClick?: ((event: any) => any) | undefined;
 }>, {
-    visibleHeight: number;
     scrollTop: number;
+    visibleHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/components/badge/badge.vue

@@ -47,7 +47,7 @@ export default  _defineComponent({
       return !props.dot && props.value === 0 && !props.showZero && !slots.value;
     });
     const innerValue = computed(() => {
-      return props.dot ? "" : typeof props.value === "number" && props.value > props.max ? `${props.max}+` : props.value;
+      return props.dot ? "" : typeof props.value === "number" && props.value > props.max ? `${props.max}+` : props.value === 0 && !props.showZero ? "" : props.value;
     });
     const badgeClass = computed(() => {
       return classNames(

package/components/button/button.d.ts

@@ -10,6 +10,7 @@ declare const __VLS_component: import("vue").DefineComponent<ButtonProps, {}, {}
     size: "mini" | "small" | "medium" | "large";
     type: "default" | "pale" | "mild" | "outline" | "text" | "pale-text";
     theme: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "neutral";
+    block: boolean;
     hoverStopPropagation: boolean;
     lang: string;
     showMessageCard: boolean;

package/components/button/button.vue

@@ -79,6 +79,7 @@ export default  _defineComponent({
     loadingType: { type: String, required: false },
     color: { type: String, required: false },
     background: { type: String, required: false },
+    block: { type: Boolean, required: false },
     formType: { type: String, required: false },
     openType: { type: String, required: false },
     appParameter: { type: String, required: false },
@@ -154,6 +155,7 @@ export default  _defineComponent({
         bem.m("round", props.round),
         bem.m("disabled", isDisabled.value),
         bem.m("loading", props.loading),
+        bem.m("block", props.block),
         props.rootClass
       );
     });

package/components/button/common.d.ts

@@ -11,6 +11,7 @@ export interface ButtonProps {
     loadingType?: 'clock' | 'circular';
     color?: string;
     background?: string;
+    block?: boolean;
     formType?: string;
     openType?: string;
     appParameter?: string;
@@ -32,6 +33,7 @@ export declare const defaultButtonProps: {
     hoverStopPropagation: boolean;
     lang: string;
     showMessageCard: boolean;
+    block: boolean;
 };
 export interface ButtonSlots {
     default?(props: Record<string, never>): any;

package/components/button/index.scss

@@ -4,10 +4,10 @@
 @include bem(button) {
   @include b() {
     @include universal;
+    display: inline-flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    flex: auto;
     width: auto;
     margin: 0;
     border: none;
@@ -21,6 +21,11 @@
     overflow: visible;
   }
 
+  @include m(block) {
+    display: flex;
+    flex: auto;
+  }
+
   // border
   &::after {
     @include border-surround(currentColor);

package/components/calendar/calendar.d.ts

@@ -7,7 +7,7 @@ declare const _default: import("vue").DefineComponent<CalendarProps, {}, {}, {},
     onChange?: ((value: string | string[] | Date | Date[]) => any) | undefined;
 }>, {
     type: import("./common").CalendarType;
-    maxDays: number;
     weekStartsOn: number;
+    maxDays: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/components/calendar/calendar.vue

@@ -9,11 +9,17 @@
             :disabled="
               toMonthNumber(innerCurrentDate) <= toMonthNumber(minDate)
             "
+            :block="false"
             @click="onPrevMonthClick"
           >
             <sar-icon name="left" size="32rpx" />
           </sar-button>
-          <sar-button type="pale-text" theme="neutral" @click="onMonthClick">
+          <sar-button
+            type="pale-text"
+            theme="neutral"
+            :block="false"
+            @click="onMonthClick"
+          >
             {{
               t('monthTitle', {
                 year: innerCurrentDate.getFullYear(),
@@ -27,6 +33,7 @@
             :disabled="
               toMonthNumber(innerCurrentDate) >= toMonthNumber(maxDate)
             "
+            :block="false"
             @click="onNextMonthClick"
           >
             <sar-icon name="right" size="32rpx" />
@@ -39,26 +46,38 @@
         </view>
       </view>
     </view>
-    <scroll-view :scroll-y="severalMonths" :class="bem.e('body')">
-      <sar-calendar-month
-        v-for="(month, i) in months"
-        :key="i"
-        :year="month[0]"
-        :month="month[1]"
-        :type="type"
-        :min-date="minDate"
-        :max-date="maxDate"
-        :current-dates="currentDates"
-        :formatter="formatter"
-        :disabled-date="disabledDate"
-        :today-number="todayNumber"
-        :week-starts-on="weekStartsOn"
-        :several-months="severalMonths"
-        :t="t"
-        :bem="bem"
-        @day-click="onDayClick"
-      />
-    </scroll-view>
+    <view :class="bodyClass">
+      <scroll-view
+        :class="bem.e('scroll')"
+        :scroll-y="severalMonths"
+        trap-scroll
+        :upper-threshold="0"
+        :lower-threshold="0"
+        :throttle="false"
+        @scroll="onScroll"
+        @scrolltoupper="onScrolltoupper"
+        @scrolltolower="onScrolltolower"
+      >
+        <sar-calendar-month
+          v-for="(month, i) in months"
+          :key="i"
+          :year="month[0]"
+          :month="month[1]"
+          :type="type"
+          :min-date="minDate"
+          :max-date="maxDate"
+          :current-dates="currentDates"
+          :formatter="formatter"
+          :disabled-date="disabledDate"
+          :today-number="todayNumber"
+          :week-starts-on="weekStartsOn"
+          :several-months="severalMonths"
+          :t="t"
+          :bem="bem"
+          @day-click="onDayClick"
+        />
+      </scroll-view>
+    </view>
   </view>
 
   <sar-popout
@@ -109,6 +128,7 @@ import { useTranslate } from "../locale";
 import SarCalendarMonth from "../calendar-month/calendar-month.vue";
 import SarPopout from "../popout/popout.vue";
 import SarDatetimePicker from "../datetime-picker/datetime-picker.vue";
+import { useScrollSide } from "../../use";
 export default  _defineComponent({
   components: {
     SarButton,
@@ -316,6 +336,13 @@ export default  _defineComponent({
     const preventPageScroll = computed(() => {
       return inPopup && !props.severalMonths;
     });
+    const { scrollSide, onScroll, onScrolltoupper, onScrolltolower } = useScrollSide();
+    const bodyClass = computed(() => {
+      return classNames(
+        bem.e("body"),
+        bem.em("body", scrollSide.value, scrollSide.value)
+      );
+    });
     const calendarClass = computed(() => {
       return classNames(
         bem.b(),
@@ -331,7 +358,7 @@ export default  _defineComponent({
       return currentEmitValue;
     }, set currentEmitValue(v) {
       currentEmitValue = v;
-    }, getInitialCurrentDate, innerCurrentDate, startDate, onPrevMonthClick, onNextMonthClick, pickerVisible, pickerValue, onMonthClick, onPickerConfirm, weeks, months, todayNumber, currentDates, onDayClick, inPopup, preventPageScroll, calendarClass, calendarStyle, get toMonthNumber() {
+    }, getInitialCurrentDate, innerCurrentDate, startDate, onPrevMonthClick, onNextMonthClick, pickerVisible, pickerValue, onMonthClick, onPickerConfirm, weeks, months, todayNumber, currentDates, onDayClick, inPopup, preventPageScroll, scrollSide, onScroll, onScrolltoupper, onScrolltolower, bodyClass, calendarClass, calendarStyle, get toMonthNumber() {
       return toMonthNumber;
     }, SarButton, SarIcon, SarCalendarMonth, SarPopout, SarDatetimePicker };
     return __returned__;

package/components/calendar/index.scss

@@ -14,7 +14,6 @@
     @include universal;
     z-index: 1;
     flex: none;
-    margin-bottom: var(--sar-calendar-header-margin-bottom);
 
     &::after {
       @include border-bottom(var(--sar-border-color));
@@ -56,15 +55,16 @@
     @include universal;
     z-index: 0;
     flex: none;
+
+    @include scroll-shadow;
   }
 
   @include m(several) {
-    @include e(header) {
-      box-shadow: var(--sar-shadow-lg);
-    }
-
     @include e(body) {
       height: 360px;
     }
+    @include e(scroll) {
+      height: 100%;
+    }
   }
 }

package/components/calendar/variables.scss

@@ -1,11 +1,11 @@
 // #variables
 page {
-  --sar-calendar-header-margin-bottom: 8rpx;
   --sar-calendar-current-month-font-size: var(--sar-text-lg);
 
   --sar-calendar-week-item-height: 64rpx;
   --sar-calendar-week-item-font-size: var(--sar-text-base);
 
+  --sar-calendar-month-padding: 8rpx;
   --sar-calendar-month-title-height: 88rpx;
   --sar-calendar-month-title-font-size: var(--sar-text-base);
 

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

@@ -11,9 +11,9 @@ declare const _default: import("vue").DefineComponent<CalendarInputProps, {}, {}
 }>, {
     type: CalendarType;
     validateEvent: boolean;
-    maxDays: number;
     weekStartsOn: number;
     showConfirm: boolean;
+    maxDays: number;
     outletFormat: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/components/calendar-month/index.scss

@@ -4,6 +4,7 @@
 @include bem(calendar) {
   @include e(month) {
     @include universal;
+    padding: var(--sar-calendar-month-padding);
   }
 
   @include e(days) {

package/components/cascader/cascader.d.ts

@@ -1,13 +1,13 @@
 import { type CascaderProps, type CascaderSlots, type CascaderOption } from './common';
 declare function __VLS_template(): Readonly<CascaderSlots> & CascaderSlots;
 declare const __VLS_component: import("vue").DefineComponent<CascaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:model-value": (value: string | number, selectedOptions: CascaderOption[]) => any;
-    change: (value: string | number, selectedOptions: CascaderOption[]) => any;
-    select: (option: CascaderOption, tabIndex: number) => any;
+    "update:model-value": (value: string | number, selectedOptions: any[]) => any;
+    change: (value: string | number, selectedOptions: any[]) => any;
+    select: (option: any, tabIndex: number) => any;
 }, string, import("vue").PublicProps, Readonly<CascaderProps> & Readonly<{
-    "onUpdate:model-value"?: ((value: string | number, selectedOptions: CascaderOption[]) => any) | undefined;
-    onChange?: ((value: string | number, selectedOptions: CascaderOption[]) => any) | undefined;
-    onSelect?: ((option: CascaderOption, tabIndex: number) => any) | undefined;
+    "onUpdate:model-value"?: ((value: string | number, selectedOptions: any[]) => any) | undefined;
+    onChange?: ((value: string | number, selectedOptions: any[]) => any) | undefined;
+    onSelect?: ((option: any, tabIndex: number) => any) | undefined;
 }>, {
     options: CascaderOption[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/components/cascader/cascader.vue

@@ -20,7 +20,7 @@
           :class="bem.e('pane')"
         >
           <view :class="bem.e('options')">
-            <scroll-view scroll-y :class="bem.e('scroll')">
+            <scroll-view scroll-y trap-scroll :class="bem.e('scroll')">
               <view
                 v-for="(option, optionIndex) in tab.options"
                 :key="optionIndex"
@@ -77,7 +77,12 @@
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
 import { computed, ref, watch } from "vue";
-import { classNames, stringifyStyle, createBem } from "../../utils";
+import {
+  classNames,
+  stringifyStyle,
+  createBem,
+  isEmptyBinding
+} from "../../utils";
 import { useTranslate } from "../locale";
 import SarTabs from "../tabs/tabs.vue";
 import SarIcon from "../icon/icon.vue";
@@ -118,7 +123,7 @@ export default  _defineComponent({
     const { t } = useTranslate("cascader");
     const updateTabs = () => {
       let nextTabs;
-      if (tempValue === void 0) {
+      if (isEmptyBinding(tempValue)) {
         nextTabs = [
           {
             options: props.options || [],
@@ -226,7 +231,7 @@ export default  _defineComponent({
       () => props.modelValue,
       () => {
         innerValue.value = props.modelValue;
-        if (props.modelValue !== void 0) {
+        if (!isEmptyBinding(props.modelValue)) {
           if (tabs.value.some(
             (tab) => tab.selected?.[mergedFieldKeys.value.value] === props.modelValue
           )) {

package/components/cascader/common.d.ts

@@ -30,9 +30,9 @@ export interface CascaderSlots {
     }): any;
 }
 export interface CascaderEmits {
-    (e: 'update:model-value', value: string | number, selectedOptions: CascaderOption[]): void;
-    (e: 'change', value: string | number, selectedOptions: CascaderOption[]): void;
-    (e: 'select', option: CascaderOption, tabIndex: number): void;
+    (e: 'update:model-value', value: string | number, selectedOptions: any[]): void;
+    (e: 'change', value: string | number, selectedOptions: any[]): void;
+    (e: 'select', option: any, tabIndex: number): void;
 }
 export interface CascaderTab {
     options: CascaderOption[];

package/components/cascader/index.scss

@@ -31,6 +31,7 @@
   }
 
   @include e(scroll) {
+    width: 100%;
     height: 100%;
   }
 

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

@@ -19,37 +19,51 @@
     @confirm="onConfirm"
   >
     <template #visible="{ already }">
-      <scroll-view v-if="already" scroll-y :class="bem.e('scroll')">
-        <sar-checkbox-group
-          :size="size"
-          :type="type"
-          :checkedColor="checkedColor"
-          :direction="direction"
-          :validate-event="false"
-          :model-value="popoutValue"
-          @change="onChange"
+      <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>
+          <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>
 </template>
@@ -69,8 +83,14 @@ import {
 import {
   defaultCheckboxInputProps
 } from "./common";
-import { createBem, getMayPrimitiveOption, isNullish } from "../../utils";
+import {
+  classNames,
+  createBem,
+  getMayPrimitiveOption,
+  isNullish
+} from "../../utils";
 import { useFormItemContext } from "../form/common";
+import { useScrollSide } from "../../use";
 export default  _defineComponent({
   components: {
     SarPopoutInput,
@@ -188,7 +208,14 @@ export default  _defineComponent({
       innerVisible.value = true;
       emit("update:visible", true);
     };
-    const __returned__ = { props, emit, bem, formItemContext, fieldKeys, innerValue, popoutValue, onChange, onConfirm, inputValue, getOutletText, getInputValue, onClear, innerVisible, onVisible, onInputClick, SarPopoutInput, SarPopout, SarCheckboxGroup, SarCheckbox, SarList, SarListItem, get getMayPrimitiveOption() {
+    const { scrollSide, onScroll, onScrolltoupper, onScrolltolower } = useScrollSide();
+    const containerClass = computed(() => {
+      return classNames(
+        bem.e("container"),
+        bem.em("container", scrollSide.value, scrollSide.value)
+      );
+    });
+    const __returned__ = { props, emit, bem, formItemContext, fieldKeys, innerValue, popoutValue, onChange, onConfirm, inputValue, getOutletText, getInputValue, onClear, innerVisible, onVisible, onInputClick, scrollSide, onScroll, onScrolltoupper, onScrolltolower, containerClass, SarPopoutInput, SarPopout, SarCheckboxGroup, SarCheckbox, SarList, SarListItem, get getMayPrimitiveOption() {
       return getMayPrimitiveOption;
     } };
     return __returned__;

package/components/checkbox-input/index.scss

@@ -1,6 +1,10 @@
 @use '../style/base' as *;
 
 @include bem(checkbox-input) {
+  @include e(container) {
+    @include scroll-shadow;
+  }
+
   @include e(scroll) {
     max-height: var(--sar-checkbox-input-max-height);
   }

package/components/config/index.d.ts

@@ -38,6 +38,7 @@ type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends Record<any, any> ? DeepPartial<T[P]> : T[P];
 };
 export declare const defaultConfig: {
+    initialZIndex: number;
     actionSheet: {
         overlayClosable: boolean;
         duration: number;
@@ -62,6 +63,7 @@ export declare const defaultConfig: {
         hoverStopPropagation: boolean;
         lang: string;
         showMessageCard: boolean;
+        block: boolean;
     };
     calendar: {
         type: CalendarProps["type"];
@@ -98,6 +100,15 @@ export declare const defaultConfig: {
         separatorDigit: number;
         duration: number;
     };
+    cropImage: {
+        duration: number;
+        cropScale: string;
+        type: "png";
+        quality: number;
+    };
+    cropImageAgent: {
+        id: string;
+    };
     datetimePicker: {
         type: string;
     };
@@ -302,6 +313,15 @@ export declare const defaultConfig: {
         overlayClosable: boolean;
         duration: number;
     };
+    signature: {
+        lineWidth: number;
+        fullScreen: boolean;
+        color: string;
+        duration: number;
+        type: "png";
+        target: "dataURL";
+        quality: number;
+    };
     skeleton: {
         rows: number;
         loading: boolean;
@@ -316,6 +336,9 @@ export declare const defaultConfig: {
         direction: SpaceProps["direction"];
         size: SpaceProps["size"];
     };
+    statusBar: {
+        height: string;
+    };
     stepper: {
         min: number;
         max: number;