sard-uniapp 1.10.4 → 1.11.1

package/{changelog.md → CHANGELOG.md}

@@ -1,3 +1,26 @@
+## [1.11.1](https://github.com/sutras/sard-uniapp/compare/v1.11.0...v1.11.1) (2025-03-06)
+
+
+### Bug Fixes
+
+* 修复日期时间选择器min, max联动问题 ([81d9256](https://github.com/sutras/sard-uniapp/commit/81d9256c872b5711664abf1e8ff75de3b146f3da))
+
+
+
+# [1.11.0](https://github.com/sutras/sard-uniapp/compare/v1.10.4...v1.11.0) (2025-03-04)
+
+
+### Bug Fixes
+
+* **datetime-picker:** 修改min, max属性后更新列数据 ([f58fef5](https://github.com/sutras/sard-uniapp/commit/f58fef592dd1102032aa999c5dbf887b8e25189d))
+
+
+### Features
+
+* 新增 DatetimeRangePicker 和 DatetimeRangePickerInput 组件 ([7cf3eeb](https://github.com/sutras/sard-uniapp/commit/7cf3eebbd8ce5f1aa185a4a55425607ba8a4bbdc))
+
+
+
 ## [1.10.4](https://github.com/sutras/sard-uniapp/compare/v1.10.3...v1.10.4) (2025-02-19)
 
 

package/README.md

@@ -25,7 +25,7 @@
 
 ## 特性
 
-- 🧩 74+个高质量组件，覆盖移动端主流场景
+- 🧩 76+个高质量组件，覆盖移动端主流场景
 - 💪 支持一套代码同时开发 H5 / 小程序 / App
 - 🌿 支持按需引入和 `Tree Shaking`
 - 📖 详尽的文档和案例展示
@@ -40,6 +40,10 @@
 
 本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源。
 
+## 更新日志
+
+<a href="https://github.com/sutras/sard-uniapp/blob/main/CHANGELOG.md">更新日志</a>
+
 ## 如何维护
 
 ### 克隆仓库到本地
@@ -110,14 +114,16 @@ npm run release
 - 修复问题
 - 测试
 - 修改版本号
-- 暂存
-- 提交
-- 给提交打标签
-- 运行 `npm run buildAndRelease` 打包组件库并发布到 npm
+- 暂存、提交 `git commit -a -m 'fix: '`
+- 给提交打标签 `npm run tag`
+- 生成 changelog `npm run changelog`
+- 暂存、提交 changelog `git commit -a -m 'chore: changelog'`
+- 打包组件库 `npm run build`
+- 发布到 npm `npm run release`
 - 使用 HBuilderX 发布到 uniapp 插件市场
-- 运行 `npm run push` 推送代码和标签
-- 运行 `npm run build:site` 打包文档（如果文档有修改）
-- 运行 `npm run deploy` 部署文档（如果文档有修改）
+- 推送代码和标签 `npm run push`
+- 打包文档（如果文档有修改）`npm run build:site`
+- 部署文档（如果文档有修改）`npm run deploy`
 - 更新 gitee 上的文档（如果文档有修改）
 
 ## 新增组件流程
@@ -128,7 +134,7 @@ npm run release
 - 编写组件文档
 - 编写测试用例
 - 使用实际项目本地安装测试 `pnpm link ../sard-uniapp`
-- 从上面的“修复问题流程”第三部“修改版本号”开始走一遍
+- 从上面的“修复问题流程”第三个步骤“修改版本号”开始走一遍
 
 ## 打包安卓包流程
 

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

@@ -146,9 +146,10 @@ export default  _defineComponent({
         return getOutletTextMayByStr(date);
       }
       if (type === "range") {
-        return `${getOutletTextMayByStr(date[0])} ${t(
-          "to"
-        )} ${getOutletTextMayByStr(date[1])}`;
+        return [
+          getOutletTextMayByStr(date[0]),
+          getOutletTextMayByStr(date[1])
+        ].join(` ${t("to")} `);
       }
       if (type === "multiple") {
         return t("multipleOutlet", {

package/components/config/index.d.ts

@@ -104,6 +104,12 @@ export declare const defaultConfig: {
     datetimePickerInput: {
         validateEvent: boolean;
     };
+    datetimeRangePicker: {
+        type: string;
+    };
+    datetimeRangePickerInput: {
+        validateEvent: boolean;
+    };
     dialog: {
         headed: boolean;
         buttonType: DialogProps["buttonType"];

package/components/config/index.js

@@ -65,6 +65,12 @@ export const defaultConfig = {
     datetimePickerInput: {
         validateEvent: true,
     },
+    datetimeRangePicker: {
+        type: 'yMd',
+    },
+    datetimeRangePickerInput: {
+        validateEvent: true,
+    },
     dialog: {
         headed: true,
         buttonType: 'round',

package/components/datetime-picker/common.d.ts

@@ -3,8 +3,8 @@ export interface DatetimePickerProps {
     rootStyle?: StyleValue;
     rootClass?: string;
     type?: string;
-    min?: Date;
-    max?: Date;
+    min?: Date | string;
+    max?: Date | string;
     modelValue?: Date | string;
     filter?: (letter: DatetimeLetter, value: number, date: Date, index: number) => boolean;
     formatter?: (letter: DatetimeLetter, option: DatetimeColumnOption, date: Date, index: number) => string | void | undefined;

package/components/datetime-picker/datetime-picker.vue

@@ -11,7 +11,7 @@
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
 import { computed, ref, watch } from "vue";
-import { classNames, formatDate, parseDate, stringifyStyle } from "../../utils";
+import { classNames, formatDate, stringifyStyle, toDate } from "../../utils";
 import SarPicker from "../picker/picker.vue";
 import {
   correctDate,
@@ -39,8 +39,8 @@ export default  _defineComponent({
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
     type: { type: String, required: false },
-    min: { type: Date, required: false },
-    max: { type: Date, required: false },
+    min: { type: [Date, String], required: false },
+    max: { type: [Date, String], required: false },
     modelValue: { type: [Date, String], required: false },
     filter: { type: Function, required: false },
     formatter: { type: Function, required: false },
@@ -110,22 +110,18 @@ export default  _defineComponent({
       const date = new Date(...currEvery);
       return date;
     };
-    const toDate = (date) => {
-      if (date instanceof Date) {
-        return date;
-      }
-      return parseDate(date, props.valueFormat);
-    };
     const normalizeValue = (value) => {
-      const date = value ? toDate(value) :  new Date();
-      return date.getTime() < minDate.value.getTime() ? minDate.value : date.getTime() > maxDate.value.getTime() ? maxDate.value : date;
+      const date = value ? toDate(value, props.valueFormat) :  new Date();
+      return date < minDate.value ? new Date(minDate.value) : date > maxDate.value ? new Date(maxDate.value) : date;
     };
     const innerType = computed(() => {
       return props.type.split("");
     });
-    const minDate = computed(() => props.min || getMinDate());
+    const minDate = computed(
+      () => toDate(props.min || getMinDate(), props.valueFormat)
+    );
     const maxDate = computed(() => {
-      const maxDate2 = props.max || getMaxDate();
+      const maxDate2 = toDate(props.max || getMaxDate());
       return maxDate2 < minDate.value ? new Date(minDate.value) : maxDate2;
     });
     const innerValue = ref(normalizeValue(props.modelValue));
@@ -141,6 +137,21 @@ export default  _defineComponent({
         }
       }
     );
+    const emitChange = () => {
+      const emitValue = props.valueFormat ? formatDate(innerValue.value, props.valueFormat) : innerValue.value;
+      currentEmitValue = emitValue;
+      emit("update:model-value", emitValue);
+      emit("change", emitValue);
+    };
+    watch([minDate, maxDate], () => {
+      const oldDate = toDate(innerValue.value, props.valueFormat);
+      const value = normalizeValue(innerValue.value);
+      innerValue.value = value;
+      updateColumns(value);
+      if (value.getTime() !== oldDate.getTime()) {
+        emitChange();
+      }
+    });
     const pickerValue = computed(() => {
       return innerType.value.map((letter) => {
         return strategies[letter][4](innerValue.value);
@@ -151,19 +162,17 @@ export default  _defineComponent({
     let maxValues = [];
     const columns = ref(createColumnData(innerType.value, innerValue.value));
     const onChange = (value) => {
+      value = value.map((item) => item || 0);
       const nextValue = getDateByPickerValue(value);
       innerValue.value = nextValue;
-      const emitValue = props.valueFormat ? formatDate(nextValue, props.valueFormat) : nextValue;
-      currentEmitValue = emitValue;
       updateColumns(nextValue);
-      emit("update:model-value", emitValue);
-      emit("change", emitValue);
+      emitChange();
     };
-    const __returned__ = { props, emit, t, createColumnData, getChangedLetter, updateColumns, getDateByPickerValue, toDate, normalizeValue, innerType, minDate, maxDate, innerValue, get currentEmitValue() {
+    const __returned__ = { props, emit, t, createColumnData, getChangedLetter, updateColumns, getDateByPickerValue, normalizeValue, innerType, minDate, maxDate, innerValue, get currentEmitValue() {
       return currentEmitValue;
     }, set currentEmitValue(v) {
       currentEmitValue = v;
-    }, pickerValue, columnsMap, get minValues() {
+    }, emitChange, pickerValue, columnsMap, get minValues() {
       return minValues;
     }, set minValues(v) {
       minValues = v;

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

@@ -12,6 +12,7 @@
   <sar-popout
     :root-class="rootClass"
     :root-style="rootStyle"
+    keep-render
     :visible="innerVisible"
     @update:visible="onVisible"
     :title="title ?? placeholder"
@@ -40,7 +41,7 @@ import { ref, watch, computed } from "vue";
 import SarPopoutInput from "../popout-input/popout-input.vue";
 import SarPopout from "../popout/popout.vue";
 import SarDatetimePicker from "../datetime-picker/datetime-picker.vue";
-import { formatDate, isNullish, isString, parseDate } from "../../utils";
+import { formatDate, isNullish, isString, parseDate, toDate } from "../../utils";
 import {
   getInitialValue,
   getMinDate,
@@ -73,8 +74,8 @@ export default  _defineComponent({
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
     type: { type: String, required: false },
-    min: { type: Date, required: false },
-    max: { type: Date, required: false },
+    min: { type: [Date, String], required: false },
+    max: { type: [Date, String], required: false },
     modelValue: { type: [Date, String], required: false },
     filter: { type: Function, required: false },
     formatter: { type: Function, required: false },
@@ -109,11 +110,27 @@ export default  _defineComponent({
         popoutValue.value = innerValue.value;
       }
     };
-    const minDate = computed(() => props.min || getMinDate());
+    const minDate = computed(
+      () => toDate(props.min || getMinDate(), props.valueFormat)
+    );
     const maxDate = computed(() => {
-      const maxDate2 = props.max || getMaxDate();
+      const maxDate2 = toDate(props.max || getMaxDate());
       return maxDate2 < minDate.value ? new Date(minDate.value) : maxDate2;
     });
+    const normalizeValue = (value) => {
+      const date = value ? toDate(value, props.valueFormat) :  new Date();
+      return date < minDate.value ? new Date(minDate.value) : date > maxDate.value ? new Date(maxDate.value) : date;
+    };
+    watch([minDate, maxDate], () => {
+      if (innerValue.value) {
+        const oldDate = toDate(innerValue.value, props.valueFormat);
+        const value = normalizeValue(innerValue.value);
+        if (value.getTime() !== oldDate.getTime()) {
+          popoutValue.value = value;
+          onConfirm();
+        }
+      }
+    });
     const onConfirm = () => {
       if (!popoutValue.value) {
         const initialValue = getInitialValue(minDate.value, maxDate.value);
@@ -173,7 +190,7 @@ export default  _defineComponent({
       innerVisible.value = true;
       emit("update:visible", true);
     };
-    const __returned__ = { props, emit, formItemContext, innerValue, popoutValue, onChange, onVisibleHook, minDate, maxDate, onConfirm, inputValue, getOutletText, getInputValue, onClear, innerVisible, onVisible, onInputClick, SarPopoutInput, SarPopout, SarDatetimePicker };
+    const __returned__ = { props, emit, formItemContext, innerValue, popoutValue, onChange, onVisibleHook, minDate, maxDate, normalizeValue, onConfirm, inputValue, getOutletText, getInputValue, onClear, innerVisible, onVisible, onInputClick, SarPopoutInput, SarPopout, SarDatetimePicker };
     return __returned__;
   }
 });

package/components/datetime-range-picker/common.d.ts

@@ -0,0 +1,15 @@
+import { type DatetimePickerProps } from '../datetime-picker/common';
+export interface DatetimeRangePickerProps extends Omit<DatetimePickerProps, 'modelValue'> {
+    modelValue?: (Date | string)[];
+    tabs?: string[];
+}
+export declare const defaultDatetimeRangePickerProps: {
+    type: string;
+};
+export interface DatetimeRangePickerSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface DatetimeRangePickerEmits {
+    (e: 'update:model-value', date: (Date | string)[]): void;
+    (e: 'change', date: (Date | string)[]): void;
+}

package/components/datetime-range-picker/common.js

@@ -0,0 +1,2 @@
+import { defaultConfig } from '../config';
+export const defaultDatetimeRangePickerProps = defaultConfig.datetimeRangePicker;

package/components/datetime-range-picker/datetime-range-picker.d.ts

@@ -0,0 +1,18 @@
+import { type DatetimeRangePickerProps, type DatetimeRangePickerSlots } from './common';
+declare function __VLS_template(): Readonly<DatetimeRangePickerSlots> & DatetimeRangePickerSlots;
+declare const __VLS_component: import("vue").DefineComponent<DatetimeRangePickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:model-value": (date: (string | Date)[]) => any;
+    change: (date: (string | Date)[]) => any;
+}, string, import("vue").PublicProps, Readonly<DatetimeRangePickerProps> & Readonly<{
+    "onUpdate:model-value"?: ((date: (string | Date)[]) => any) | undefined;
+    onChange?: ((date: (string | Date)[]) => any) | undefined;
+}>, {
+    type: string;
+}, {}, {}, {}, 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;
+    };
+};

package/components/datetime-range-picker/datetime-range-picker.vue

@@ -0,0 +1,143 @@
+<template>
+  <view :class="datetimeRangePickerClass" :style="datetimeRangePickerStyle">
+    <sar-tabs v-model:current="tabsCurrent" :list="tabsList" scrollable />
+
+    <view :class="bem.e('container')">
+      <view
+        :class="bem.e('wrapper')"
+        :style="
+          stringifyStyle({
+            transform: `translateX(${-Number(tabsCurrent) * 100}%)`,
+          })
+        "
+      >
+        <view :class="bem.e('pane')">
+          <sar-datetime-picker
+            v-bind="datetimePickerProps"
+            v-model="startValue"
+            @change="onChange"
+          />
+        </view>
+        <view :class="bem.e('pane')">
+          <sar-datetime-picker
+            v-bind="datetimePickerProps"
+            v-model="endValue"
+            :min="startValue"
+            @change="onChange"
+          />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
+import { computed, watch } from "vue";
+import {
+  classNames,
+  stringifyStyle,
+  createBem,
+  omit,
+  toDate
+} from "../../utils";
+import SarDatetimePicker from "../datetime-picker/datetime-picker.vue";
+import {
+  defaultDatetimeRangePickerProps
+} from "./common";
+import { ref } from "vue";
+import {
+  getInitialValue,
+  getMaxDate,
+  getMinDate
+} from "../datetime-picker/common";
+export default  _defineComponent({
+  components: {
+    SarDatetimePicker,
+  },
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "datetime-range-picker",
+  props:  _mergeDefaults({
+    modelValue: { type: Array, required: false },
+    tabs: { type: Array, required: false },
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    type: { type: String, required: false },
+    min: { type: [Date, String], required: false },
+    max: { type: [Date, String], required: false },
+    filter: { type: Function, required: false },
+    formatter: { type: Function, required: false },
+    valueFormat: { type: String, required: false }
+  }, defaultDatetimeRangePickerProps),
+  emits: ["update:model-value", "change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const bem = createBem("datetime-range-picker");
+    const datetimePickerProps = computed(() => {
+      return omit(props, ["modelValue"]);
+    });
+    const tabsList = computed(() => {
+      return [
+        {
+          title: props.tabs?.[0]
+        },
+        {
+          title: props.tabs?.[1]
+        }
+      ];
+    });
+    const tabsCurrent = ref(0);
+    const minDate = computed(
+      () => toDate(props.min || getMinDate(), props.valueFormat)
+    );
+    const maxDate = computed(() => {
+      const maxDate2 = toDate(props.max || getMaxDate(), props.valueFormat);
+      return maxDate2 < minDate.value ? new Date(minDate.value) : maxDate2;
+    });
+    const startValue = ref();
+    const endValue = ref();
+    const parseValue = (value) => {
+      const [start, end] = value || [];
+      startValue.value = start || getInitialValue(minDate.value, maxDate.value);
+      endValue.value = end || getInitialValue(toDate(startValue.value, props.valueFormat), maxDate.value);
+    };
+    watch(
+      () => props.modelValue,
+      (value) => {
+        parseValue(value);
+      },
+      {
+        immediate: true
+      }
+    );
+    const onChange = () => {
+      if (startValue.value && endValue.value) {
+        const emitValue = [startValue.value, endValue.value];
+        emit("update:model-value", emitValue);
+        emit("change", emitValue);
+      }
+    };
+    const datetimeRangePickerClass = computed(() => {
+      return classNames(bem.b(), props.rootClass);
+    });
+    const datetimeRangePickerStyle = computed(() => {
+      return stringifyStyle(props.rootStyle);
+    });
+    const __returned__ = { props, emit, bem, datetimePickerProps, tabsList, tabsCurrent, minDate, maxDate, startValue, endValue, parseValue, onChange, datetimeRangePickerClass, datetimeRangePickerStyle, get stringifyStyle() {
+      return stringifyStyle;
+    }, SarDatetimePicker };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/datetime-range-picker/index.d.ts

@@ -0,0 +1 @@
+export type { DatetimeRangePickerProps, DatetimeRangePickerSlots, DatetimeRangePickerEmits, } from './common';

package/components/datetime-range-picker/index.js

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

package/components/datetime-range-picker/index.scss

@@ -0,0 +1,26 @@
+@use '../style/base' as *;
+
+@include bem(datetime-range-picker) {
+  @include b() {
+    @include universal;
+  }
+
+  @include e(container) {
+    @include universal;
+    overflow: hidden;
+  }
+
+  @include e(wrapper) {
+    @include universal;
+    width: 100%;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    transition: transform var(--sar-cascader-wrapper-duration);
+  }
+
+  @include e(pane) {
+    @include universal;
+    width: 100%;
+    flex: none;
+  }
+}

package/components/datetime-range-picker/variables.scss

@@ -0,0 +1,5 @@
+// #variables
+page {
+  --sar-datetime-range-picker-wrapper-duration: var(--sar-duration);
+}
+// #endvariables

package/components/datetime-range-picker-input/common.d.ts

@@ -0,0 +1,18 @@
+import { type DatetimeRangePickerProps } from '../datetime-range-picker/common';
+import { type PopoutInputProps } from '../popout-input/common';
+export interface DatetimeRangePickerInputProps extends DatetimeRangePickerProps, Omit<PopoutInputProps, 'modelValue' | 'loading'> {
+    visible?: boolean;
+    title?: string;
+    outletFormat?: string;
+    valueFormat?: string;
+    validateEvent?: boolean;
+}
+export declare const defaultDatetimeRangePickerInputProps: () => {
+    validateEvent: boolean;
+    type: string;
+};
+export interface DatetimeRangePickerInputEmits {
+    (e: 'update:visible', visible: boolean): void;
+    (e: 'update:model-value', date: (Date | string)[] | undefined): void;
+    (e: 'change', date: (Date | string)[] | undefined): void;
+}

package/components/datetime-range-picker-input/common.js

@@ -0,0 +1,5 @@
+import { defaultConfig } from '../config';
+export const defaultDatetimeRangePickerInputProps = () => ({
+    ...defaultConfig.datetimeRangePicker,
+    ...defaultConfig.datetimeRangePickerInput,
+});

package/components/datetime-range-picker-input/datetime-range-picker-input.d.ts

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

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

@@ -0,0 +1,194 @@
+<template>
+  <sar-popout-input
+    v-model="inputValue"
+    :placeholder="placeholder"
+    :readonly="readonly"
+    :disabled="disabled"
+    :clearable="clearable"
+    @clear="onClear"
+    @click="onInputClick"
+  />
+
+  <sar-popout
+    :root-class="rootClass"
+    :root-style="rootStyle"
+    keep-render
+    :visible="innerVisible"
+    @update:visible="onVisible"
+    :title="title ?? placeholder"
+    @confirm="onConfirm"
+    @visible-hook="onVisibleHook"
+  >
+    <template #visible="{ already }">
+      <sar-datetime-range-picker
+        v-if="already"
+        :model-value="popoutValue"
+        @change="onChange"
+        :type="type"
+        :min="min"
+        :max="max"
+        :filter="filter"
+        :formatter="formatter"
+        :value-format="valueFormat"
+        :tabs="tabs"
+      />
+    </template>
+  </sar-popout>
+</template>
+
+<script>
+import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
+import { computed, ref, watch } from "vue";
+import SarPopoutInput from "../popout-input/popout-input.vue";
+import SarPopout from "../popout/popout.vue";
+import SarDatetimeRangePicker from "../datetime-range-picker/datetime-range-picker.vue";
+import { formatDate, isNullish, isString, parseDate, toDate } from "../../utils";
+import {
+  getInitialValue,
+  getMaxDate,
+  getMinDate
+} from "../datetime-picker/common";
+import {
+  defaultDatetimeRangePickerInputProps
+} from "./common";
+import { mapTypeFormat } from "../datetime-picker-input/common";
+import { useFormItemContext } from "../form/common";
+import { useTranslate } from "../locale";
+export default  _defineComponent({
+  components: {
+    SarPopoutInput,
+    SarPopout,
+    SarDatetimeRangePicker,
+  },
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "datetime-range-picker-input",
+  props:  _mergeDefaults({
+    visible: { type: Boolean, required: false },
+    title: { type: String, required: false },
+    outletFormat: { type: String, required: false },
+    valueFormat: { type: String, required: false },
+    validateEvent: { type: Boolean, required: false },
+    modelValue: { type: Array, required: false },
+    tabs: { type: Array, required: false },
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    type: { type: String, required: false },
+    min: { type: [Date, String], required: false },
+    max: { type: [Date, String], required: false },
+    filter: { type: Function, required: false },
+    formatter: { type: Function, required: false },
+    placeholder: { type: String, required: false },
+    readonly: { type: Boolean, required: false },
+    disabled: { type: Boolean, required: false },
+    clearable: { type: Boolean, required: false },
+    multiline: { type: Boolean, required: false }
+  }, defaultDatetimeRangePickerInputProps()),
+  emits: ["update:visible", "update:model-value", "change"],
+  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 popoutValue = ref(props.modelValue);
+    const onChange = (value) => {
+      popoutValue.value = value;
+    };
+    const onVisibleHook = (name) => {
+      if (name === "enter" && !isNullish(innerValue.value) && popoutValue.value !== innerValue.value) {
+        popoutValue.value = innerValue.value;
+      }
+    };
+    const minDate = computed(
+      () => toDate(props.min || getMinDate(), props.valueFormat)
+    );
+    const maxDate = computed(() => {
+      const maxDate2 = toDate(props.max || getMaxDate(), props.valueFormat);
+      return maxDate2 < minDate.value ? new Date(minDate.value) : maxDate2;
+    });
+    const onConfirm = () => {
+      if (!popoutValue.value) {
+        const initialValue = getInitialValue(minDate.value, maxDate.value);
+        const singleValue = props.valueFormat ? formatDate(initialValue, props.valueFormat) : initialValue;
+        popoutValue.value = [singleValue, singleValue];
+      }
+      innerValue.value = popoutValue.value;
+      emit("update:model-value", popoutValue.value);
+      emit("change", popoutValue.value);
+      inputValue.value = getInputValue();
+    };
+    const inputValue = ref("");
+    const { t } = useTranslate("datetimeRangePickerInput");
+    function getOutletTextMayByStr(date) {
+      if (isString(date) && props.valueFormat) {
+        date = parseDate(date, props.valueFormat);
+      }
+      if (date instanceof Date) {
+        return formatDate(
+          date,
+          props.outletFormat || mapTypeFormat[props.type]
+        );
+      }
+      return date;
+    }
+    function getOutletText(value) {
+      return [
+        getOutletTextMayByStr(value[0]),
+        getOutletTextMayByStr(value[1])
+      ].join(` ${t("to")} `);
+    }
+    function getInputValue() {
+      if (!innerValue.value || Array.isArray(innerValue.value) && innerValue.value.length === 0) {
+        return "";
+      }
+      return getOutletText(innerValue.value);
+    }
+    watch(
+      innerValue,
+      () => {
+        inputValue.value = getInputValue();
+      },
+      {
+        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, onChange, onVisibleHook, minDate, maxDate, onConfirm, inputValue, t, getOutletTextMayByStr, getOutletText, getInputValue, onClear, innerVisible, onVisible, onInputClick, SarPopoutInput, SarPopout, SarDatetimeRangePicker };
+    return __returned__;
+  }
+});
+</script>

package/components/datetime-range-picker-input/index.d.ts

@@ -0,0 +1 @@
+export type { DatetimeRangePickerInputProps, DatetimeRangePickerInputEmits, } from './common';

package/components/datetime-range-picker-input/index.js

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

package/components/locale/lang/en-US.d.ts

@@ -26,6 +26,9 @@ declare const _default: {
         m: string;
         s: string;
     };
+    datetimeRangePickerInput: {
+        to: string;
+    };
     dialog: {
         confirm: string;
         cancel: string;

package/components/locale/lang/en-US.js

@@ -27,6 +27,9 @@ export default {
         m: '',
         s: '',
     },
+    datetimeRangePickerInput: {
+        to: 'to',
+    },
     dialog: {
         confirm: 'Ok',
         cancel: 'Cancel',

package/components/locale/lang/zh-CN.d.ts

@@ -26,6 +26,9 @@ declare const _default: {
         m: string;
         s: string;
     };
+    datetimeRangePickerInput: {
+        to: string;
+    };
     dialog: {
         confirm: string;
         cancel: string;

package/components/locale/lang/zh-CN.js

@@ -27,6 +27,9 @@ export default {
         m: '分',
         s: '秒',
     },
+    datetimeRangePickerInput: {
+        to: '至',
+    },
     dialog: {
         confirm: '确定',
         cancel: '取消',

package/components/picker/picker.vue

@@ -68,16 +68,19 @@ export default  _defineComponent({
       return getColumnsType(props.columns, fieldKeys.value);
     });
     const innerValue = ref(props.modelValue);
-    const columnIndexes = ref(
-      getIndexesByValue(toArray(innerValue.value), props.columns, fieldKeys.value)
-    );
     watch(
       () => props.modelValue,
       () => {
         innerValue.value = props.modelValue;
-        if (!isNullish(props.modelValue) && props.modelValue !== "") {
+      }
+    );
+    const columnIndexes = ref([]);
+    watch(
+      [innerValue, () => props.columns, fieldKeys],
+      () => {
+        if (!isNullish(innerValue.value) && innerValue.value !== "") {
           const indexes = getIndexesByValue(
-            toArray(props.modelValue),
+            toArray(innerValue.value),
             props.columns,
             fieldKeys.value
           );
@@ -85,6 +88,9 @@ export default  _defineComponent({
             columnIndexes.value = indexes;
           }
         }
+      },
+      {
+        immediate: true
       }
     );
     const onChange = (event) => {

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

@@ -12,6 +12,7 @@
   <sar-popout
     :root-class="rootClass"
     :root-style="rootStyle"
+    keep-render
     :visible="innerVisible"
     @update:visible="onVisible"
     :title="title ?? placeholder"

package/components/popout/common.d.ts

@@ -16,6 +16,7 @@ export interface PopoutProps {
     showFooter?: boolean;
     overlayClosable?: boolean;
     beforeClose?: (type: 'close' | 'cancel' | 'confirm') => boolean | undefined | Promise<any>;
+    keepRender?: boolean;
 }
 export declare const defaultPopoutProps: {
     type: PopoutProps["type"];

package/components/popout/popout.vue

@@ -3,6 +3,7 @@
     effect="slide-bottom"
     :visible="visible"
     :duration="duration"
+    :keep-render="keepRender"
     @overlay-click="onOverlayClick"
     @before-enter="onBeforeEnter"
     @after-leave="onAfterLeave"
@@ -126,7 +127,8 @@ export default  _defineComponent({
     showClose: { type: Boolean, required: false },
     showFooter: { type: Boolean, required: false },
     overlayClosable: { type: Boolean, required: false },
-    beforeClose: { type: Function, required: false }
+    beforeClose: { type: Function, required: false },
+    keepRender: { type: Boolean, required: false }
   }, defaultPopoutProps),
   emits: ["update:visible", "close", "cancel", "confirm", "visible-hook"],
   setup(__props, { expose: __expose, emit: __emit }) {

package/components/popup/common.d.ts

@@ -11,6 +11,7 @@ export interface PopupProps {
     overlayStyle?: string;
     background?: string;
     transparent?: boolean;
+    keepRender?: boolean;
 }
 export declare const defaultPopupProps: {
     duration: number;

package/components/popup/index.scss

@@ -76,19 +76,39 @@
     }
 
     // slide
-    @include m(slide-top-enter-from, slide-top-leave-to) {
+    @include m(
+      slide-top-enter-from,
+      slide-top-leave-to,
+      slide-top-keep,
+      slide-top-after-leave-keep
+    ) {
       transform: translate3d(0, -100%, 0);
     }
 
-    @include m(slide-right-enter-from, slide-right-leave-to) {
+    @include m(
+      slide-right-enter-from,
+      slide-right-leave-to,
+      slide-right-keep,
+      slide-right-after-leave-keep
+    ) {
       transform: translate3d(100%, 0, 0);
     }
 
-    @include m(slide-bottom-enter-from, slide-bottom-leave-to) {
+    @include m(
+      slide-bottom-enter-from,
+      slide-bottom-leave-to,
+      slide-bottom-keep,
+      slide-bottom-after-leave-keep
+    ) {
       transform: translate3d(0, 100%, 0);
     }
 
-    @include m(slide-left-enter-from, slide-left-leave-to) {
+    @include m(
+      slide-left-enter-from,
+      slide-left-leave-to,
+      slide-left-keep,
+      slide-left-after-leave-keep
+    ) {
       transform: translate3d(-100%, 0, 0);
     }
 

package/components/popup/popup.vue

@@ -21,7 +21,7 @@
 
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
-import { computed, reactive, toRef } from "vue";
+import { computed, reactive, ref, toRef } from "vue";
 import { classNames, stringifyStyle, createBem } from "../../utils";
 import { useTransition, useZIndex } from "../../use";
 import SarOverlay from "../overlay/overlay.vue";
@@ -50,7 +50,8 @@ export default  _defineComponent({
     overlayClass: { type: String, required: false },
     overlayStyle: { type: String, required: false },
     background: { type: String, required: false },
-    transparent: { type: Boolean, required: false }
+    transparent: { type: Boolean, required: false },
+    keepRender: { type: Boolean, required: false }
   }, defaultPopupProps),
   emits: ["overlay-click", "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave", "leave", "after-leave", "leave-cancelled", "visible-hook"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -60,6 +61,9 @@ export default  _defineComponent({
     const bem = createBem("popup");
     const [zIndex, increaseZIndex] = useZIndex();
     const callVisibleHook = usePopupVisibleHookProvide();
+    const keepRenderClass = ref(
+      props.keepRender ? bem.m(props.effect) + "-keep" : ""
+    );
     const onVisibleHook = (name) => {
       callVisibleHook(name);
       emit("visible-hook", name);
@@ -67,6 +71,9 @@ export default  _defineComponent({
       if (name === "before-enter") {
         increaseZIndex();
       }
+      if (props.keepRender) {
+        keepRenderClass.value = name === "after-leave" ? bem.m(props.effect) + "-" + name + "-keep" : "";
+      }
     };
     const { realVisible, transitionClass, onTransitionEnd } = useTransition(
       reactive({
@@ -84,17 +91,18 @@ export default  _defineComponent({
         bem.b(),
         bem.m(props.effect),
         props.rootClass,
-        transitionClass.value
+        transitionClass.value,
+        keepRenderClass.value
       );
     });
     const popupStyle = computed(() => {
       return stringifyStyle(props.rootStyle, {
         zIndex: zIndex.value,
-        display: realVisible.value ? "flex" : "none",
+        display: props.keepRender || realVisible.value ? "flex" : "none",
         transitionDuration: props.duration + "ms"
       });
     });
-    const __returned__ = { props, emit, bem, zIndex, increaseZIndex, callVisibleHook, onVisibleHook, realVisible, transitionClass, onTransitionEnd, onOverlayClick, popupClass, popupStyle, SarOverlay };
+    const __returned__ = { props, emit, bem, zIndex, increaseZIndex, callVisibleHook, keepRenderClass, onVisibleHook, realVisible, transitionClass, onTransitionEnd, onOverlayClick, popupClass, popupStyle, SarOverlay };
     return __returned__;
   }
 });

package/components/tree/utils.d.ts

@@ -1,4 +1,4 @@
-import { TreeStateNode } from './common';
+import { type TreeStateNode } from './common';
 export declare function recurDescendant(node: TreeStateNode, callback: (node: TreeStateNode) => boolean | void | undefined): void;
 export declare function recurAncestor(node: TreeStateNode | null, callback: (node: TreeStateNode) => void): void;
 export declare function recurNodes(nodes: TreeStateNode[], callback: (node: TreeStateNode) => void): void | boolean;

package/global.d.ts

@@ -22,6 +22,8 @@ declare module 'vue' {
     SarCountTo: typeof import('./components/count-to/count-to').default
     SarDatetimePicker: typeof import('./components/datetime-picker/datetime-picker').default
     SarDatetimePickerInput: typeof import('./components/datetime-picker-input/datetime-picker-input').default
+    SarDatetimeRangePicker: typeof import('./components/datetime-range-picker/datetime-range-picker').default
+    SarDatetimeRangePickerInput: typeof import('./components/datetime-range-picker-input/datetime-range-picker-input').default
     SarDialog: typeof import('./components/dialog/dialog').default
     SarDialogAgent: typeof import('./components/dialog-agent/dialog-agent').default
     SarDropdown: typeof import('./components/dropdown/dropdown').default

package/index.d.ts

@@ -18,6 +18,8 @@ export * from './components/count-down';
 export * from './components/count-to';
 export * from './components/datetime-picker';
 export * from './components/datetime-picker-input';
+export * from './components/datetime-range-picker';
+export * from './components/datetime-range-picker-input';
 export * from './components/dialog';
 export * from './components/dialog-agent';
 export * from './components/dropdown';

package/index.js

@@ -18,6 +18,8 @@ export * from './components/count-down';
 export * from './components/count-to';
 export * from './components/datetime-picker';
 export * from './components/datetime-picker-input';
+export * from './components/datetime-range-picker';
+export * from './components/datetime-range-picker-input';
 export * from './components/dialog';
 export * from './components/dialog-agent';
 export * from './components/dropdown';

package/index.scss

@@ -13,6 +13,7 @@
 @use './components/checkbox/variables.scss' as *;
 @use './components/col/variables.scss' as *;
 @use './components/collapse/variables.scss' as *;
+@use './components/datetime-range-picker/variables.scss' as *;
 @use './components/dialog/variables.scss' as *;
 @use './components/dropdown/variables.scss' as *;
 @use './components/empty/variables.scss' as *;

package/package.json

@@ -2,7 +2,7 @@
   "id": "sard-uniapp",
   "name": "sard-uniapp",
   "displayName": "sard-uniapp",
-  "version": "1.10.4",
+  "version": "1.11.1",
   "description": "sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库",
   "main": "index.js",
   "scripts": {
@@ -13,6 +13,8 @@
     "deploy": "sard deploy",
     "release": "sard release",
     "test": "vitest",
+    "tag": "sard tag",
+    "changelog": "sard changelog",
     "buildAndRelease": "npm run build && npm run release",
     "push": "git push origin && git push gitee && git push origin --tags && git push gitee --tags",
     "prepare": "husky install",
@@ -72,6 +74,7 @@
     "@commitlint/prompt-cli": "^17.8.1",
     "@dcloudio/types": "^3.4.14",
     "@dcloudio/uni-app": "3.0.0-4040520250104002",
+    "@dcloudio/uni-app-harmony": "3.0.0-4040520250104002",
     "@dcloudio/uni-app-plus": "3.0.0-4040520250104002",
     "@dcloudio/uni-automator": "3.0.0-4040520250104002",
     "@dcloudio/uni-cli-shared": "3.0.0-4040520250104002",
@@ -102,7 +105,6 @@
     "@vue/runtime-core": "^3.5.13",
     "@vue/test-utils": "^2.4.6",
     "consola": "^3.2.3",
-    "conventional-changelog-cli": "^4.1.0",
     "eslint": "^9.16.0",
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-prettier": "^4.2.1",
@@ -115,7 +117,7 @@
     "lodash-es": "^4.17.21",
     "prettier": "^2.8.8",
     "region-data": "^1.2.3",
-    "sard-cli": "^1.0.9",
+    "sard-cli": "^1.1.2",
     "sass": "^1.69.7",
     "tel-area-code": "^1.0.1",
     "ts-custom-error": "^3.3.1",
@@ -219,8 +221,5 @@
   },
   "pnpm": {
     "overrides": {}
-  },
-  "dependencies": {
-    "@dcloudio/uni-app-harmony": "3.0.0-4040520250104002"
   }
 }

package/utils/date.d.ts

@@ -10,6 +10,7 @@ export declare function getPadEndDays(year: number, month: number, amount: numbe
 export declare function getOffsetDaysFromFirstDay(weekOnFirstDay: number, weekStartsOn: number): number;
 export declare function formatDate(date: Date, format?: string): string;
 export declare function parseDate(value: string, format?: string): Date;
+export declare function toDate(date: Date | string, valueFormat?: string): Date;
 export declare function minmaxDate(date: Date, minDate: Date, maxDate: Date): Date;
 export declare function getPrevMonthDate(date: Date): Date;
 export declare function getNextMonthDate(date: Date): Date;

package/utils/date.js

@@ -128,6 +128,13 @@ export function parseDate(value, format) {
     });
     return date;
 }
+// 确保返回一个Date对象，如果传递字符串，则使用 parseDate 解析
+export function toDate(date, valueFormat) {
+    if (date instanceof Date) {
+        return date;
+    }
+    return parseDate(date, valueFormat);
+}
 // 限定日期范围
 export function minmaxDate(date, minDate, maxDate) {
     return new Date(minmax(date.getTime(), minDate.getTime(), maxDate.getTime()));

package/utils/index.d.ts

@@ -8,3 +8,4 @@ export * from './utils';
 export * from './lwa.slim';
 export * from './qrcode';
 export * from './system';
+export * from './object';

package/utils/index.js

@@ -8,3 +8,4 @@ export * from './utils';
 export * from './lwa.slim';
 export * from './qrcode';
 export * from './system';
+export * from './object';

package/utils/object.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 此方法创建一个对象，该对象由自己不可省略的属性组成。
+ */
+export declare function omit<T extends object, U extends keyof T>(object: T, paths: U[]): Omit<T, U>;

package/utils/object.js

@@ -0,0 +1,13 @@
+/**
+ * 此方法创建一个对象，该对象由自己不可省略的属性组成。
+ */
+export function omit(object, paths) {
+    const newObj = {};
+    Object.keys(object).forEach((key) => {
+        if (!paths.includes(key)) {
+            ;
+            newObj[key] = object[key];
+        }
+    });
+    return newObj;
+}