sard-uniapp 1.15.4 → 1.16.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+# [1.16.0](https://github.com/sutras/sard-uniapp/compare/v1.15.4...v1.16.0) (2025-05-28)
+
+
+### Features
+
+* 新增7个 *Input 对应的 *Popout 组件 ([c3645d4](https://github.com/sutras/sard-uniapp/commit/c3645d47c397ed729e43a518ac7036ed29e818e3))
+* 新增TabbarPit组件, Tabbar 组件新增fixed和safe-area-inset-bottom属性 ([b9f3197](https://github.com/sutras/sard-uniapp/commit/b9f319799609c82489a71a7f8aec287b6f08b672))
+
+
+
 ## [1.15.4](https://github.com/sutras/sard-uniapp/compare/v1.15.3...v1.15.4) (2025-05-27)
 
 

package/components/calendar-input/calendar-input.vue

@@ -8,58 +8,48 @@
     :root-class="rootClass"
     :root-style="rootStyle"
     @clear="onClear"
-    @click="onInputClick"
+    @click="show"
   >
-    <sar-popout
-      :visible="innerVisible"
+    <sar-calendar-popout
+      v-model:visible="innerVisible"
+      v-model="innerValue"
       :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>
+      :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"
+      :validate-event="validateEvent"
+      @change="onChange"
+    />
   </sar-popout-input>
 </template>
 
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
-import { ref, watch, computed } from "vue";
+import { watch } from "vue";
 import SarPopoutInput from "../popout-input/popout-input.vue";
-import SarCalendar from "../calendar/calendar.vue";
-import SarPopout from "../popout/popout.vue";
+import SarCalendarPopout from "../calendar-popout/calendar-popout.vue";
 import { formatDate, isString, parseDate } from "../../utils";
+import { usePopoutInput } from "../../use";
 import { useTranslate } from "../locale";
 import {
   defaultCalendarInputProps
 } from "./common";
-import { useFormItemContext } from "../form/common";
 export default  _defineComponent({
   components: {
     SarPopoutInput,
-    SarCalendar,
-    SarPopout,
+    SarCalendarPopout,
   },
   ...{
     options: {
@@ -69,10 +59,10 @@ export default  _defineComponent({
   },
   __name: "calendar-input",
   props:  _mergeDefaults({
+    outletFormat: { type: String, required: false },
     visible: { type: Boolean, required: false },
     title: { type: String, required: false },
     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 },
@@ -102,39 +92,7 @@ export default  _defineComponent({
     __expose();
     const props = __props;
     const emit = __emit;
-    const formItemContext = useFormItemContext();
-    const innerValue = ref(props.modelValue);
-    watch(
-      () => props.modelValue,
-      () => {
-        innerValue.value = props.modelValue;
-        if (props.validateEvent) {
-          formItemContext?.onChange();
-        }
-      }
-    );
-    const popoutValue = ref(props.modelValue);
-    watch(innerValue, () => {
-      popoutValue.value = innerValue.value;
-    });
-    const confirmDisabled = computed(() => {
-      const value = popoutValue.value;
-      return !value || Array.isArray(value) && value.length === 0;
-    });
-    const onChange = (value) => {
-      popoutValue.value = value;
-      if (!props.showConfirm && !confirmDisabled.value) {
-        onConfirm();
-        innerVisible.value = false;
-      }
-    };
-    const onConfirm = () => {
-      innerValue.value = popoutValue.value;
-      emit("update:model-value", popoutValue.value);
-      emit("change", popoutValue.value);
-      inputValue.value = getInputValue();
-    };
-    const inputValue = ref("");
+    const { innerVisible, innerValue, inputValue, show, onChange, onClear } = usePopoutInput(props, emit);
     const { t } = useTranslate("calendar");
     function getOutletTextMayByStr(date) {
       if (isString(date) && props.valueFormat) {
@@ -177,28 +135,7 @@ export default  _defineComponent({
         immediate: true
       }
     );
-    const onClear = () => {
-      inputValue.value = "";
-      innerValue.value = void 0;
-      emit("update:model-value", void 0);
-      emit("change", void 0);
-    };
-    const innerVisible = ref(props.visible);
-    watch(
-      () => props.visible,
-      () => {
-        innerVisible.value = props.visible;
-      }
-    );
-    const onVisible = (visible) => {
-      innerVisible.value = visible;
-      emit("update:visible", visible);
-    };
-    const onInputClick = () => {
-      innerVisible.value = true;
-      emit("update:visible", true);
-    };
-    const __returned__ = { props, emit, formItemContext, innerValue, popoutValue, confirmDisabled, onChange, onConfirm, inputValue, t, getOutletTextMayByStr, getOutletText, getInputValue, onClear, innerVisible, onVisible, onInputClick, SarPopoutInput, SarCalendar, SarPopout };
+    const __returned__ = { props, emit, innerVisible, innerValue, inputValue, show, onChange, onClear, t, getOutletTextMayByStr, getOutletText, getInputValue, SarPopoutInput, SarCalendarPopout };
     return __returned__;
   }
 });

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

@@ -1,25 +1,15 @@
-import { type CalendarProps } from '../calendar/common';
+import { type CalendarPopoutEmits, type CalendarPopoutProps } from '../calendar-popout/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;
+export interface CalendarInputProps extends CalendarPopoutProps, Omit<PopoutInputProps, 'modelValue' | 'loading'> {
     outletFormat?: string;
-    validateEvent?: boolean;
-    popoutClass?: string;
-    popoutStyle?: StyleValue;
 }
 export declare const defaultCalendarInputProps: () => {
-    type: CalendarProps["type"];
-    maxDays: number;
-    weekStartsOn: number;
+    outletFormat: string;
     showConfirm: boolean;
     validateEvent: boolean;
-    outletFormat: string;
+    type: import("../calendar").CalendarProps["type"];
+    maxDays: number;
+    weekStartsOn: number;
 };
-export interface CalendarInputEmits {
-    (e: 'update:visible', visible: boolean): void;
-    (e: 'update:model-value', value: Date | Date[] | string | string[] | undefined): void;
-    (e: 'change', value: Date | Date[] | string | string[] | undefined): void;
+export interface CalendarInputEmits extends CalendarPopoutEmits {
 }

package/components/calendar-input/common.js

@@ -1,5 +1,6 @@
 import { defaultConfig } from '../config';
 export const defaultCalendarInputProps = () => ({
-    ...defaultConfig.calendarInput,
     ...defaultConfig.calendar,
+    ...defaultConfig.calendarPopout,
+    ...defaultConfig.calendarInput,
 });

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

@@ -0,0 +1,17 @@
+import { type CalendarPopoutProps } from './common';
+declare const _default: import("vue").DefineComponent<CalendarPopoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:model-value": (value: string | string[] | Date | Date[] | undefined) => any;
+    change: (value: string | string[] | Date | Date[] | undefined) => any;
+    "update:visible": (visible: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<CalendarPopoutProps> & Readonly<{
+    "onUpdate:model-value"?: ((value: string | string[] | Date | Date[] | undefined) => any) | undefined;
+    onChange?: ((value: string | string[] | Date | Date[] | undefined) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+}>, {
+    type: import("../calendar/common.js").CalendarType;
+    validateEvent: boolean;
+    weekStartsOn: number;
+    showConfirm: boolean;
+    maxDays: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/components/calendar-popout/calendar-popout.vue

@@ -0,0 +1,102 @@
+<template>
+  <sar-popout
+    v-model:visible="innerVisible"
+    :title="title"
+    :show-confirm="showConfirm"
+    :confirm-disabled="confirmDisabled"
+    :root-class="popoutClass"
+    :root-style="popoutStyle"
+    @confirm="onConfirm"
+  >
+    <template #visible="{ already }">
+      <sar-calendar
+        v-if="already"
+        :model-value="popoutValue"
+        :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"
+        @change="onChange"
+      />
+    </template>
+  </sar-popout>
+</template>
+
+<script>
+import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
+import { computed } from "vue";
+import SarPopout from "../popout/popout.vue";
+import SarCalendar from "../calendar/calendar.vue";
+import {
+  defaultCalendarPopoutProps
+} from "./common";
+import { useFormPopout } from "../../use";
+export default  _defineComponent({
+  components: {
+    SarPopout,
+    SarCalendar,
+  },
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "calendar-popout",
+  props:  _mergeDefaults({
+    visible: { type: Boolean, required: false },
+    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 },
+    type: { type: String, required: false },
+    modelValue: { type: [Date, Array, String], required: false },
+    min: { type: Date, required: false },
+    max: { type: Date, required: false },
+    currentDate: { type: Date, required: false },
+    disabledDate: { type: Function, required: false },
+    maxDays: { type: Number, required: false },
+    overMaxDays: { type: Function, required: false },
+    weekStartsOn: { type: Number, required: false },
+    formatter: { type: Function, required: false },
+    allowSameDay: { type: Boolean, required: false },
+    severalMonths: { type: Boolean, required: false },
+    valueFormat: { type: String, required: false }
+  }, defaultCalendarPopoutProps()),
+  emits: ["update:visible", "update:model-value", "change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const { innerVisible, popoutValue, onChange, onConfirm } = useFormPopout(
+      props,
+      emit,
+      {
+        onChange() {
+          if (!props.showConfirm && !confirmDisabled.value) {
+            onConfirm();
+            innerVisible.value = false;
+          }
+        }
+      }
+    );
+    const confirmDisabled = computed(() => {
+      const value = popoutValue.value;
+      return !value || Array.isArray(value) && value.length === 0;
+    });
+    const __returned__ = { props, emit, innerVisible, popoutValue, onChange, onConfirm, confirmDisabled, SarPopout, SarCalendar };
+    return __returned__;
+  }
+});
+</script>

package/components/calendar-popout/common.d.ts

@@ -0,0 +1,27 @@
+import { type StyleValue } from 'vue';
+import { type CalendarProps } from '../calendar/common';
+export interface CalendarPopoutProps extends CalendarProps {
+    visible?: boolean;
+    title?: string;
+    showConfirm?: boolean;
+    validateEvent?: boolean;
+    popoutClass?: string;
+    popoutStyle?: StyleValue;
+}
+export declare const defaultCalendarPopoutProps: () => {
+    showConfirm: boolean;
+    validateEvent: boolean;
+    type: CalendarProps["type"];
+    maxDays: number;
+    weekStartsOn: number;
+};
+export interface CalendarPopoutSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface CalendarPopoutEmits {
+    (e: 'update:visible', visible: boolean): void;
+    (e: 'update:model-value', value: Date | Date[] | string | string[] | undefined): void;
+    (e: 'change', value: Date | Date[] | string | string[] | undefined): void;
+}
+export interface CalendarPopoutExpose {
+}

package/components/calendar-popout/common.js

@@ -0,0 +1,5 @@
+import { defaultConfig } from '../config';
+export const defaultCalendarPopoutProps = () => ({
+    ...defaultConfig.calendar,
+    ...defaultConfig.calendarPopout,
+});

package/components/calendar-popout/index.d.ts

@@ -0,0 +1 @@
+export type { CalendarPopoutProps, CalendarPopoutSlots, CalendarPopoutEmits, CalendarPopoutExpose, } from './common';

package/components/calendar-popout/index.js

@@ -0,0 +1 @@
+export {};

package/components/cascader-input/cascader-input.vue

@@ -9,58 +9,49 @@
     :root-class="rootClass"
     :root-style="rootStyle"
     @clear="onClear"
-    @click="onInputClick"
+    @click="show"
   >
-    <sar-popout
-      :visible="innerVisible"
+    <sar-cascader-popout
+      v-model:visible="innerVisible"
+      v-model="innerValue"
       :title="title ?? placeholder"
       :show-confirm="showConfirm"
       :root-class="popoutClass"
       :root-style="popoutStyle"
-      @confirm="onConfirm"
-      @update:visible="onVisible"
+      :options="options"
+      :field-keys="fieldKeys"
+      :hint-text="hintText"
+      :change-on-select="changeOnSelect"
+      :label-render="labelRender"
+      :validate-event="validateEvent"
+      @select="(option, tabIndex) => $emit('select', option, tabIndex)"
+      @change="onChange"
     >
-      <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 #top="{ tabIndex }">
+        <slot name="top" :tab-index="tabIndex"></slot>
       </template>
-    </sar-popout>
+    </sar-cascader-popout>
   </sar-popout-input>
 </template>
 
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
-import { ref, watch, computed } from "vue";
+import { watch, computed } from "vue";
 import SarPopoutInput from "../popout-input/popout-input.vue";
-import SarCascader from "../cascader/cascader.vue";
+import SarCascaderPopout from "../cascader-popout/cascader-popout.vue";
 import {
   defaultFieldKeys,
   getSelectedOptionsByValue
 } from "../cascader/common";
-import SarPopout from "../popout/popout.vue";
 import { isNullish } from "../../utils";
+import { usePopoutInput } from "../../use";
 import {
   defaultCascaderInputProps
 } from "./common";
-import { useFormItemContext } from "../form/common";
 export default  _defineComponent({
   components: {
     SarPopoutInput,
-    SarCascader,
-    SarPopout,
+    SarCascaderPopout,
   },
   ...{
     options: {
@@ -90,45 +81,18 @@ export default  _defineComponent({
     clearable: { type: Boolean, required: false },
     loading: { type: Boolean, required: false },
     multiline: { type: Boolean, required: false }
-  }, defaultCascaderInputProps),
+  }, defaultCascaderInputProps()),
   emits: ["update:visible", "update:model-value", "change", "select"],
   setup(__props, { expose: __expose, emit: __emit }) {
     __expose();
     const props = __props;
     const emit = __emit;
-    const formItemContext = useFormItemContext();
-    const innerValue = ref(props.modelValue);
-    watch(
-      () => props.modelValue,
-      () => {
-        innerValue.value = props.modelValue;
-        if (props.validateEvent) {
-          formItemContext?.onChange();
-        }
+    const { innerVisible, innerValue, inputValue, show, onChange, onClear } = usePopoutInput(props, emit, {
+      onClear() {
+        emit("update:model-value", void 0, []);
+        emit("change", void 0, []);
       }
-    );
-    const popoutValue = ref(props.modelValue);
-    const popoutOptions = ref([]);
-    watch(innerValue, () => {
-      popoutValue.value = innerValue.value;
     });
-    const onChange = (value, selectedOptions) => {
-      popoutValue.value = value;
-      popoutOptions.value = selectedOptions;
-      if (!props.showConfirm && !isNullish(popoutValue.value)) {
-        onConfirm();
-        innerVisible.value = false;
-      }
-    };
-    const onConfirm = () => {
-      if (popoutValue.value !== innerValue.value) {
-        innerValue.value = popoutValue.value;
-        inputValue.value = getInputValue();
-        emit("update:model-value", innerValue.value, popoutOptions.value);
-        emit("change", innerValue.value, popoutOptions.value);
-      }
-    };
-    const inputValue = ref("");
     const fieldkeys = computed(() => {
       return Object.assign(
         {},
@@ -151,7 +115,7 @@ export default  _defineComponent({
       return getOutletText(props.options, innerValue.value, fieldkeys.value);
     }
     watch(
-      innerValue,
+      [innerValue, () => props.options],
       () => {
         inputValue.value = getInputValue();
       },
@@ -159,34 +123,7 @@ export default  _defineComponent({
         immediate: true
       }
     );
-    watch(
-      () => props.options,
-      () => {
-        inputValue.value = getInputValue();
-      }
-    );
-    const onClear = () => {
-      inputValue.value = "";
-      innerValue.value = void 0;
-      emit("update:model-value", void 0, []);
-      emit("change", void 0, []);
-    };
-    const innerVisible = ref(props.visible);
-    watch(
-      () => props.visible,
-      () => {
-        innerVisible.value = props.visible;
-      }
-    );
-    const onVisible = (visible) => {
-      innerVisible.value = visible;
-      emit("update:visible", visible);
-    };
-    const onInputClick = () => {
-      innerVisible.value = true;
-      emit("update:visible", true);
-    };
-    const __returned__ = { props, emit, formItemContext, innerValue, popoutValue, popoutOptions, onChange, onConfirm, inputValue, fieldkeys, getOutletText, getInputValue, onClear, innerVisible, onVisible, onInputClick, SarPopoutInput, SarCascader, SarPopout };
+    const __returned__ = { props, emit, innerVisible, innerValue, inputValue, show, onChange, onClear, fieldkeys, getOutletText, getInputValue, SarPopoutInput, SarCascaderPopout };
     return __returned__;
   }
 });

package/components/cascader-input/common.d.ts

@@ -1,26 +1,12 @@
-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;
+import { type CascaderPopoutProps, type CascaderPopoutEmits, type CascaderPopoutSlots } from '../cascader-popout/common';
+export interface CascaderInputProps extends CascaderPopoutProps, Omit<PopoutInputProps, 'modelValue'> {
 }
-export declare const defaultCascaderInputProps: {
+export declare const defaultCascaderInputProps: () => {
     showConfirm: boolean;
     validateEvent: boolean;
 };
-export interface CascaderInputSlots {
-    top?(props: {
-        tabIndex: number;
-    }): any;
+export interface CascaderInputSlots extends CascaderPopoutSlots {
 }
-export interface CascaderInputEmits {
-    (e: 'update:visible', visible: boolean): void;
-    (e: 'update:model-value', value: any, selectedOptions: CascaderOption[]): void;
-    (e: 'change', value: any, selectedOptions: CascaderOption[]): void;
-    (e: 'select', option: CascaderOption, tabIndex: number): void;
+export interface CascaderInputEmits extends CascaderPopoutEmits {
 }

package/components/cascader-input/common.js

@@ -1,2 +1,4 @@
 import { defaultConfig } from '../config';
-export const defaultCascaderInputProps = defaultConfig.cascaderInput;
+export const defaultCascaderInputProps = () => ({
+    ...defaultConfig.cascaderPopout,
+});

package/components/cascader-popout/cascader-popout.d.ts

@@ -0,0 +1,23 @@
+import { type CascaderPopoutProps, type CascaderPopoutSlots } from './common';
+declare function __VLS_template(): Readonly<CascaderPopoutSlots> & CascaderPopoutSlots;
+declare const __VLS_component: import("vue").DefineComponent<CascaderPopoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:model-value": (value: any, selectedOptions: import("../cascader/common.js").CascaderOption[]) => any;
+    change: (value: any, selectedOptions: import("../cascader/common.js").CascaderOption[]) => any;
+    select: (option: import("../cascader/common.js").CascaderOption, tabIndex: number) => any;
+    "update:visible": (visible: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<CascaderPopoutProps> & Readonly<{
+    "onUpdate:model-value"?: ((value: any, selectedOptions: import("../cascader/common.js").CascaderOption[]) => any) | undefined;
+    onChange?: ((value: any, selectedOptions: import("../cascader/common.js").CascaderOption[]) => any) | undefined;
+    onSelect?: ((option: import("../cascader/common.js").CascaderOption, tabIndex: number) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+}>, {
+    validateEvent: boolean;
+    showConfirm: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};