sard-uniapp 1.10.3 → 1.11.0

package/{changelog.md → CHANGELOG.md}

@@ -1,3 +1,26 @@
+# [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)
+
+
+### Bug Fixes
+
+* 使用 [@import](https://github.com/import) 导入scss, 兼容mp-alipay ([1830610](https://github.com/sutras/sard-uniapp/commit/1830610e17b29fd5f7e362d5c04a0ebcbb1ac772))
+
+
+
 ## [1.10.3](https://github.com/sutras/sard-uniapp/compare/v1.10.1...v1.10.3) (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/_template/_template.vue

@@ -41,5 +41,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@use './index.scss';
+@import './index.scss';
 </style>

package/components/accordion/accordion.vue

@@ -78,5 +78,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@use './index.scss';
+@import './index.scss';
 </style>

package/components/accordion-item/accordion-item.vue

@@ -83,5 +83,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@use './index.scss';
+@import './index.scss';
 </style>

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

@@ -143,5 +143,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@use './index.scss';
+@import './index.scss';
 </style>

package/components/alert/alert.vue

@@ -73,5 +73,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@use './index.scss';
+@import './index.scss';
 </style>

package/components/avatar/avatar.vue

@@ -71,5 +71,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@use './index.scss';
+@import './index.scss';
 </style>

package/components/back-top/back-top.vue

@@ -61,5 +61,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@use './index.scss';
+@import './index.scss';
 </style>

package/components/badge/badge.vue

@@ -74,5 +74,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@use './index.scss';
+@import './index.scss';
 </style>

package/components/button/button.vue

@@ -175,5 +175,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@use './index.scss';
+@import './index.scss';
 </style>

package/components/calendar/calendar.vue

@@ -67,12 +67,15 @@
     type="compact"
     @confirm="onPickerConfirm"
   >
-    <sar-datetime-picker
-      type="yM"
-      v-model="pickerValue"
-      :min="minDate"
-      :max="maxDate"
-    />
+    <template #visible="{ already }">
+      <sar-datetime-picker
+        v-if="already"
+        type="yM"
+        v-model="pickerValue"
+        :min="minDate"
+        :max="maxDate"
+      />
+    </template>
   </sar-popout>
 </template>
 
@@ -337,5 +340,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@use './index.scss';
+@import './index.scss';
 </style>

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/calendar-month/calendar-month.vue

@@ -167,5 +167,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@use './index.scss';
+@import './index.scss';
 </style>

package/components/card/card.vue

@@ -71,5 +71,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@use './index.scss';
+@import './index.scss';
 </style>

package/components/cascader/cascader.vue

@@ -267,5 +267,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@use './index.scss';
+@import './index.scss';
 </style>

package/components/check-icon/check-icon.vue

@@ -49,5 +49,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@use './index.scss';
+@import './index.scss';
 </style>

package/components/checkbox/checkbox.vue

@@ -145,5 +145,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@use './index.scss';
+@import './index.scss';
 </style>

package/components/checkbox-group/checkbox-group.vue

@@ -116,5 +116,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@use './index.scss';
+@import './index.scss';
 </style>

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

@@ -197,5 +197,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@use './index.scss';
+@import './index.scss';
 </style>

package/components/col/col.vue

@@ -62,5 +62,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@use './index.scss';
+@import './index.scss';
 </style>

package/components/collapse/collapse.vue

@@ -101,5 +101,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@use './index.scss';
+@import './index.scss';
 </style>

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

@@ -40,7 +40,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 +73,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,9 +109,11 @@ 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 onConfirm = () => {

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;
+  }
+}