sard-uniapp 1.9.2 → 1.10.0

package/README.md

@@ -21,7 +21,7 @@
 
 ## 特性
 
-- 🧩 70+个高质量组件，覆盖移动端主流场景
+- 🧩 74+个高质量组件，覆盖移动端主流场景
 - 💪 支持一套代码同时开发 H5 / 小程序 / App
 - 🌿 支持按需引入和 `Tree Shaking`
 - 📖 详尽的文档和案例展示
@@ -100,3 +100,41 @@ npm run deploy
 ```bash
 npm run release
 ```
+
+## 修复问题流程
+
+- 修复问题
+- 测试
+- 修改版本号
+- 暂存
+- 提交
+- 给提交打标签
+- 运行 `npm run buildAndRelease` 打包组件库并发布到 npm
+- 发布到 uniapp 插件市场
+- 运行 `npm run push` 推送代码和标签
+- 运行 `npm run build:site` 打包文档（如果文档有修改）
+- 运行 `npm run deploy` 部署文档（如果文档有修改）
+- 更新 gitee 上的文档（如果文档有修改）
+
+## 新增组件流程
+
+- 运行 `npm run newComponent` 命令自动创建组件
+- 编写组件代码
+- 编写案例代码
+- 编写组件文档
+- 编写测试用例
+- 使用实际项目本地安装测试 `pnpm link ../sard-uniapp`
+- 从上面的“修复问题流程”第三部“修改版本号”开始走一遍
+
+## 打包安卓包流程
+
+- 在 `HBuilder` 中打开 `sard-uniapp` 项目
+- 点击 发行->App-Android/iOS-云打包
+- 勾选“android(apk 包)” 、“使用云端证书”、“打正式包”、“快速安心打包”
+- 点击“打包“按钮开始打包
+- 注意：如果控制台出现错误：`[ERROR] Cannot start service: Host version "_._._" does not match - binary version "_._._"`，需安装和 Host version 一样版本的 `@esbuild/darwin-x64`
+- 等待云端打包完成
+- 到 `gitee` 仓库创建发行版：[resource 发行版 - Gitee.com](https://gitee.com/sutras/resource/releases/new)
+- 将 gitee 发行版 apk 资源链接转换为二维码图片
+- 将图片更新到 `sard-assets` 项目，并发布到 npm
+- 最后等待 http://fastly.jsdelivr.net 链接生效

package/changelog.md

@@ -1,3 +1,12 @@
+# [1.10.0](https://github.com/sutras/sard-uniapp/compare/v1.9.2...v1.10.0) (2025-01-01)
+
+
+### Features
+
+* 新增 Space 组件, 新增 Dialog 组件的按钮配置, 新增 valueFormat 属性, 修复已知问题 ([7648ea6](https://github.com/sutras/sard-uniapp/commit/7648ea65937c5af9a2b6a8cfa9c5b70ade14ef65))
+
+
+
 ## [1.9.2](https://github.com/sutras/sard-uniapp/compare/v1.9.1...v1.9.2) (2024-12-22)
 
 

package/components/calendar/calendar.d.ts

@@ -1,10 +1,10 @@
 import { type CalendarProps } from './common';
 declare const _default: import("vue").DefineComponent<CalendarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:model-value": (value: Date | Date[]) => any;
-    change: (value: Date | Date[]) => any;
+    "update:model-value": (value: string | string[] | Date | Date[]) => any;
+    change: (value: string | string[] | Date | Date[]) => any;
 }, string, import("vue").PublicProps, Readonly<CalendarProps> & Readonly<{
-    "onUpdate:model-value"?: ((value: Date | Date[]) => any) | undefined;
-    onChange?: ((value: Date | Date[]) => any) | undefined;
+    "onUpdate:model-value"?: ((value: string | string[] | Date | Date[]) => any) | undefined;
+    onChange?: ((value: string | string[] | Date | Date[]) => any) | undefined;
 }>, {
     type: import("./common").CalendarType;
     maxDays: number;

package/components/calendar/calendar.vue

@@ -88,7 +88,9 @@ import {
   toMonthNumber,
   getPrevMonthDate,
   getNextMonthDate,
-  toArray
+  toArray,
+  parseDate,
+  formatDate
 } from "../../utils";
 import {
   defaultCalendarProps,
@@ -123,7 +125,7 @@ export default  _defineComponent({
     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], required: false },
+    modelValue: { type: [Date, Array, String], required: false },
     min: { type: Date, required: false },
     max: { type: Date, required: false },
     currentDate: { type: Date, required: false },
@@ -133,7 +135,8 @@ export default  _defineComponent({
     weekStartsOn: { type: Number, required: false },
     formatter: { type: Function, required: false },
     allowSameDay: { type: Boolean, required: false },
-    severalMonths: { type: Boolean, required: false }
+    severalMonths: { type: Boolean, required: false },
+    valueFormat: { type: String, required: false }
   }, defaultCalendarProps),
   emits: ["update:model-value", "change"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -149,20 +152,34 @@ export default  _defineComponent({
       const maxDate2 = props.max || getMaxDate(props.severalMonths);
       return maxDate2.getTime() < minDate.value.getTime() ? new Date(minDate.value) : maxDate2;
     });
+    const toDate = (date) => {
+      if (date instanceof Date) {
+        return date;
+      }
+      return parseDate(date, props.valueFormat);
+    };
+    const makeDate = (date) => {
+      return Array.isArray(date) ? date.map((item) => toDate(item)) : toDate(date);
+    };
+    const normalizeValue = (value) => {
+      return value ? makeDate(value) : props.type === "single" ? void 0 : [];
+    };
     const innerValue = ref(
-      props.modelValue ?? (props.type === "single" ? void 0 : [])
+      normalizeValue(props.modelValue)
     );
+    let currentEmitValue = innerValue.value;
     watch(
       () => props.modelValue,
       () => {
-        if (innerValue.value !== props.modelValue) {
-          innerValue.value = props.modelValue ?? (props.type === "single" ? void 0 : []);
+        if (currentEmitValue !== props.modelValue) {
+          innerValue.value = normalizeValue(props.modelValue);
+          currentEmitValue = props.modelValue;
         }
       }
     );
     const getInitialCurrentDate = () => {
       let date =  new Date();
-      const value = toArray(props.modelValue)[0];
+      const value = toArray(innerValue.value)[0];
       if (value) {
         date = value;
       }
@@ -286,8 +303,10 @@ export default  _defineComponent({
       }
       if (nextValue !== void 0) {
         innerValue.value = nextValue;
-        emit("update:model-value", nextValue);
-        emit("change", nextValue);
+        const emitValue = props.valueFormat ? Array.isArray(nextValue) ? nextValue.map((item) => formatDate(item, props.valueFormat)) : formatDate(nextValue, props.valueFormat) : nextValue;
+        currentEmitValue = emitValue;
+        emit("update:model-value", emitValue);
+        emit("change", emitValue);
       }
     };
     const inPopup = useInPopup();
@@ -305,7 +324,11 @@ export default  _defineComponent({
     const calendarStyle = computed(() => {
       return stringifyStyle(props.rootStyle);
     });
-    const __returned__ = { props, emit, bem, t, minDate, maxDate, innerValue, getInitialCurrentDate, innerCurrentDate, startDate, onPrevMonthClick, onNextMonthClick, pickerVisible, pickerValue, onMonthClick, onPickerConfirm, weeks, months, todayNumber, currentDates, onDayClick, inPopup, preventPageScroll, calendarClass, calendarStyle, get toMonthNumber() {
+    const __returned__ = { props, emit, bem, t, minDate, maxDate, toDate, makeDate, normalizeValue, innerValue, get currentEmitValue() {
+      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() {
       return toMonthNumber;
     }, SarButton, SarIcon, SarCalendarMonth, SarPopout, SarDatetimePicker };
     return __returned__;

package/components/calendar/common.d.ts

@@ -16,7 +16,7 @@ export interface CalendarProps {
     rootStyle?: StyleValue;
     rootClass?: string;
     type?: CalendarType;
-    modelValue?: Date | Date[];
+    modelValue?: Date | Date[] | string | string[];
     min?: Date;
     max?: Date;
     currentDate?: Date;
@@ -27,6 +27,7 @@ export interface CalendarProps {
     formatter?: (day: CalendarDay) => void;
     allowSameDay?: boolean;
     severalMonths?: boolean;
+    valueFormat?: string;
 }
 export declare const defaultCalendarProps: {
     type: CalendarProps["type"];
@@ -34,8 +35,8 @@ export declare const defaultCalendarProps: {
     weekStartsOn: number;
 };
 export interface CalendarEmits {
-    (e: 'update:model-value', value: Date | Date[]): void;
-    (e: 'change', value: Date | Date[]): void;
+    (e: 'update:model-value', value: Date | Date[] | string | string[]): void;
+    (e: 'change', value: Date | Date[] | string | string[]): void;
 }
 export interface CalendarMonthProps {
     year: number;

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

@@ -1,12 +1,12 @@
 import { type CalendarType } from '../calendar/common';
 import { type CalendarInputProps } from './common';
 declare const _default: import("vue").DefineComponent<CalendarInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:model-value": (value: Date | Date[] | undefined) => any;
-    change: (value: Date | Date[] | undefined) => any;
+    "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<CalendarInputProps> & Readonly<{
-    "onUpdate:model-value"?: ((value: Date | Date[] | undefined) => any) | undefined;
-    onChange?: ((value: Date | Date[] | undefined) => any) | undefined;
+    "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: CalendarType;
@@ -14,5 +14,6 @@ declare const _default: import("vue").DefineComponent<CalendarInputProps, {}, {}
     maxDays: number;
     weekStartsOn: number;
     showConfirm: boolean;
+    outletFormat: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -23,7 +23,7 @@
       <sar-calendar
         v-if="already"
         :model-value="popoutValue"
-        @update:model-value="onChange"
+        @change="onChange"
         :type="type"
         :min="min"
         :max="max"
@@ -35,6 +35,7 @@
         :formatter="formatter"
         :allow-same-day="allowSameDay"
         :several-months="severalMonths"
+        :value-format="valueFormat"
       />
     </template>
   </sar-popout>
@@ -46,13 +47,12 @@ import { ref, watch, computed } from "vue";
 import SarPopoutInput from "../popout-input/popout-input.vue";
 import SarCalendar from "../calendar/calendar.vue";
 import SarPopout from "../popout/popout.vue";
-import { formatDate } from "../../utils";
+import { formatDate, isString, parseDate } from "../../utils";
 import { useTranslate } from "../locale";
 import {
   defaultCalendarInputProps
 } from "./common";
 import { useFormItemContext } from "../form/common";
-const format = "YYYY-MM-DD";
 export default  _defineComponent({
   components: {
     SarPopoutInput,
@@ -70,11 +70,12 @@ export default  _defineComponent({
     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 },
     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], required: false },
+    modelValue: { type: [Date, Array, String], required: false },
     min: { type: Date, required: false },
     max: { type: Date, required: false },
     currentDate: { type: Date, required: false },
@@ -85,6 +86,7 @@ export default  _defineComponent({
     formatter: { type: Function, required: false },
     allowSameDay: { type: Boolean, required: false },
     severalMonths: { type: Boolean, required: false },
+    valueFormat: { type: String, required: false },
     placeholder: { type: String, required: false },
     readonly: { type: Boolean, required: false },
     disabled: { type: Boolean, required: false },
@@ -130,15 +132,23 @@ export default  _defineComponent({
     };
     const inputValue = ref("");
     const { t } = useTranslate("calendar");
+    function getOutletTextMayByStr(date) {
+      if (isString(date) && props.valueFormat) {
+        date = parseDate(date, props.valueFormat);
+      }
+      if (date instanceof Date) {
+        return formatDate(date, props.outletFormat);
+      }
+      return date;
+    }
     function getOutletText(date, type) {
       if (type === "single") {
-        return formatDate(date, format);
+        return getOutletTextMayByStr(date);
       }
       if (type === "range") {
-        return `${formatDate(date[0], format)} ${t("to")} ${formatDate(
-          date[1],
-          format
-        )}`;
+        return `${getOutletTextMayByStr(date[0])} ${t(
+          "to"
+        )} ${getOutletTextMayByStr(date[1])}`;
       }
       if (type === "multiple") {
         return t("multipleOutlet", {
@@ -166,6 +176,7 @@ export default  _defineComponent({
       inputValue.value = "";
       innerValue.value = void 0;
       emit("update:model-value", void 0);
+      emit("change", void 0);
     };
     const innerVisible = ref(props.visible);
     watch(
@@ -182,7 +193,7 @@ export default  _defineComponent({
       innerVisible.value = true;
       emit("update:visible", true);
     };
-    const __returned__ = { props, emit, formItemContext, innerValue, popoutValue, confirmDisabled, onChange, onConfirm, inputValue, format, t, getOutletText, getInputValue, onClear, innerVisible, onVisible, onInputClick, SarPopoutInput, SarCalendar, SarPopout };
+    const __returned__ = { props, emit, formItemContext, innerValue, popoutValue, confirmDisabled, onChange, onConfirm, inputValue, t, getOutletTextMayByStr, getOutletText, getInputValue, onClear, innerVisible, onVisible, onInputClick, SarPopoutInput, SarCalendar, SarPopout };
     return __returned__;
   }
 });

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

@@ -4,6 +4,7 @@ export interface CalendarInputProps extends CalendarProps, Omit<PopoutInputProps
     visible?: boolean;
     title?: string;
     showConfirm?: boolean;
+    outletFormat?: string;
     validateEvent?: boolean;
 }
 export declare const defaultCalendarInputProps: {
@@ -12,9 +13,10 @@ export declare const defaultCalendarInputProps: {
     weekStartsOn: number;
     showConfirm: boolean;
     validateEvent: boolean;
+    outletFormat: string;
 };
 export interface CalendarInputEmits {
     (e: 'update:visible', visible: boolean): void;
-    (e: 'update:model-value', value: Date | Date[] | undefined): void;
-    (e: 'change', value: Date | Date[] | undefined): void;
+    (e: 'update:model-value', value: Date | Date[] | string | string[] | undefined): void;
+    (e: 'change', value: Date | Date[] | string | string[] | undefined): void;
 }

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

@@ -23,7 +23,7 @@
       <sar-cascader
         v-if="already"
         :model-value="popoutValue"
-        @update:model-value="onChange"
+        @change="onChange"
         :options="options"
         :field-keys="fieldKeys"
         :placeholder="hintText"

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

@@ -27,7 +27,7 @@
           :direction="direction"
           :validate-event="false"
           :model-value="popoutValue"
-          @update:model-value="onChange"
+          @change="onChange"
         >
           <template #custom="{ toggle }">
             <sar-list inlaid>

package/components/config/index.d.ts

@@ -25,6 +25,7 @@ import { type RadioGroupProps } from '../radio';
 import { type RadioInputProps } from '../radio-input';
 import { type ResultProps } from '../result';
 import { type SearchProps } from '../search';
+import { type SpaceProps } from '../space';
 import { type StepperProps } from '../stepper';
 import { type StepsProps } from '../steps';
 import { type SwiperDotProps } from '../swiper-dot';
@@ -70,6 +71,7 @@ export declare const defaultConfig: {
     calendarInput: {
         showConfirm: boolean;
         validateEvent: boolean;
+        outletFormat: string;
     };
     cascaderInput: {
         showConfirm: boolean;
@@ -304,6 +306,10 @@ export declare const defaultConfig: {
         step: number;
         validateEvent: boolean;
     };
+    space: {
+        direction: SpaceProps["direction"];
+        size: SpaceProps["size"];
+    };
     stepper: {
         min: number;
         max: number;

package/components/config/index.js

@@ -32,6 +32,7 @@ export const defaultConfig = {
     calendarInput: {
         showConfirm: true,
         validateEvent: true,
+        outletFormat: 'YYYY-MM-DD',
     },
     cascaderInput: {
         showConfirm: true,
@@ -266,6 +267,10 @@ export const defaultConfig = {
         step: 1,
         validateEvent: true,
     },
+    space: {
+        direction: 'horizontal',
+        size: 'middle',
+    },
     stepper: {
         min: Number.MIN_SAFE_INTEGER,
         max: Number.MAX_SAFE_INTEGER,

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

@@ -5,16 +5,17 @@ export interface DatetimePickerProps {
     type?: string;
     min?: Date;
     max?: Date;
-    modelValue?: Date;
+    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;
+    valueFormat?: string;
 }
 export declare const defaultDatetimePickerProps: {
     type: string;
 };
 export interface DatetimePickerEmits {
-    (e: 'update:model-value', date: Date): void;
-    (e: 'change', date: Date): void;
+    (e: 'update:model-value', date: Date | string): void;
+    (e: 'change', date: Date | string): void;
 }
 export interface DatetimeColumnOption {
     value: number;

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

@@ -1,10 +1,10 @@
 import { type DatetimePickerProps } from './common';
 declare const _default: import("vue").DefineComponent<DatetimePickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:model-value": (date: Date) => any;
-    change: (date: Date) => any;
+    "update:model-value": (date: string | Date) => any;
+    change: (date: string | Date) => any;
 }, string, import("vue").PublicProps, Readonly<DatetimePickerProps> & Readonly<{
-    "onUpdate:model-value"?: ((date: Date) => any) | undefined;
-    onChange?: ((date: Date) => any) | undefined;
+    "onUpdate:model-value"?: ((date: string | Date) => any) | undefined;
+    onChange?: ((date: string | Date) => any) | undefined;
 }>, {
     type: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -4,14 +4,14 @@
     :root-style="stringifyStyle(rootStyle)"
     :columns="columns"
     :model-value="pickerValue"
-    @update:model-value="onChange"
+    @change="onChange"
   />
 </template>
 
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
 import { computed, ref, watch } from "vue";
-import { classNames, stringifyStyle } from "../../utils";
+import { classNames, formatDate, parseDate, stringifyStyle } from "../../utils";
 import SarPicker from "../picker/picker.vue";
 import {
   correctDate,
@@ -41,9 +41,10 @@ export default  _defineComponent({
     type: { type: String, required: false },
     min: { type: Date, required: false },
     max: { type: Date, required: false },
-    modelValue: { type: Date, required: false },
+    modelValue: { type: [Date, String], required: false },
     filter: { type: Function, required: false },
-    formatter: { type: Function, required: false }
+    formatter: { type: Function, required: false },
+    valueFormat: { type: String, required: false }
   }, defaultDatetimePickerProps),
   emits: ["update:model-value", "change"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -109,9 +110,15 @@ 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) => {
-      value = value ??  new Date();
-      return value.getTime() < minDate.value.getTime() ? minDate.value : value.getTime() > maxDate.value.getTime() ? maxDate.value : 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 innerType = computed(() => {
       return props.type.split("");
@@ -122,12 +129,15 @@ export default  _defineComponent({
       return maxDate2 < minDate.value ? new Date(minDate.value) : maxDate2;
     });
     const innerValue = ref(normalizeValue(props.modelValue));
+    let currentEmitValue = innerValue.value;
     watch(
       () => props.modelValue,
       () => {
-        innerValue.value = normalizeValue(props.modelValue);
-        if (props.modelValue) {
-          updateColumns(props.modelValue);
+        if (currentEmitValue !== props.modelValue) {
+          innerValue.value = normalizeValue(props.modelValue);
+          if (props.modelValue) {
+            updateColumns(innerValue.value);
+          }
         }
       }
     );
@@ -143,11 +153,17 @@ export default  _defineComponent({
     const onChange = (value) => {
       const nextValue = getDateByPickerValue(value);
       innerValue.value = nextValue;
+      const emitValue = props.valueFormat ? formatDate(nextValue, props.valueFormat) : nextValue;
+      currentEmitValue = emitValue;
       updateColumns(nextValue);
-      emit("update:model-value", nextValue);
-      emit("change", nextValue);
+      emit("update:model-value", emitValue);
+      emit("change", emitValue);
     };
-    const __returned__ = { props, emit, t, createColumnData, getChangedLetter, updateColumns, getDateByPickerValue, normalizeValue, innerType, minDate, maxDate, innerValue, pickerValue, columnsMap, get minValues() {
+    const __returned__ = { props, emit, t, createColumnData, getChangedLetter, updateColumns, getDateByPickerValue, toDate, normalizeValue, innerType, minDate, maxDate, innerValue, get currentEmitValue() {
+      return currentEmitValue;
+    }, set currentEmitValue(v) {
+      currentEmitValue = v;
+    }, pickerValue, columnsMap, get minValues() {
       return minValues;
     }, set minValues(v) {
       minValues = v;

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

@@ -4,6 +4,7 @@ export interface DatetimePickerInputProps extends DatetimePickerProps, Omit<Popo
     visible?: boolean;
     title?: string;
     outletFormat?: string;
+    valueFormat?: string;
     validateEvent?: boolean;
 }
 export declare const defaultDatetimePickerInputProps: {
@@ -12,13 +13,14 @@ export declare const defaultDatetimePickerInputProps: {
 };
 export interface DatetimePickerInputEmits {
     (e: 'update:visible', visible: boolean): void;
-    (e: 'update:model-value', date: Date | undefined): void;
-    (e: 'change', date: Date | undefined): void;
+    (e: 'update:model-value', date: Date | string | undefined): void;
+    (e: 'change', date: Date | string | undefined): void;
 }
 export declare const mapTypeFormat: {
     y: string;
     yM: string;
     yMd: string;
+    yMdh: string;
     yMdhm: string;
     yMdhms: string;
     hm: string;

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

@@ -7,6 +7,7 @@ export const mapTypeFormat = {
     y: 'YYYY',
     yM: 'YYYY-MM',
     yMd: 'YYYY-MM-DD',
+    yMdh: 'YYYY-MM-DD HH',
     yMdhm: 'YYYY-MM-DD HH:mm',
     yMdhms: 'YYYY-MM-DD HH:mm:ss',
     hm: 'HH:mm',

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

@@ -1,11 +1,11 @@
 import { type DatetimePickerInputProps } from './common';
 declare const _default: import("vue").DefineComponent<DatetimePickerInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:model-value": (date: Date | undefined) => any;
-    change: (date: Date | undefined) => any;
+    "update:model-value": (date: string | Date | undefined) => any;
+    change: (date: string | Date | undefined) => any;
     "update:visible": (visible: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<DatetimePickerInputProps> & Readonly<{
-    "onUpdate:model-value"?: ((date: Date | undefined) => any) | undefined;
-    onChange?: ((date: Date | undefined) => any) | undefined;
+    "onUpdate:model-value"?: ((date: string | Date | undefined) => any) | undefined;
+    onChange?: ((date: string | Date | undefined) => any) | undefined;
     "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
 }>, {
     type: string;

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

@@ -22,12 +22,13 @@
       <sar-datetime-picker
         v-if="already"
         :model-value="popoutValue"
-        @update:model-value="onChange"
+        @change="onChange"
         :type="type"
         :min="min"
         :max="max"
         :filter="filter"
         :formatter="formatter"
+        :value-format="valueFormat"
       />
     </template>
   </sar-popout>
@@ -39,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 } from "../../utils";
+import { formatDate, isNullish, isString, parseDate } from "../../utils";
 import {
   getInitialValue,
   getMinDate,
@@ -67,13 +68,14 @@ export default  _defineComponent({
     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 },
     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 },
-    modelValue: { type: Date, required: false },
+    modelValue: { type: [Date, String], required: false },
     filter: { type: Function, required: false },
     formatter: { type: Function, required: false },
     placeholder: { type: String, required: false },
@@ -123,16 +125,19 @@ export default  _defineComponent({
     };
     const inputValue = ref("");
     function getOutletText(value) {
-      if (!value) {
-        return "";
+      if (isString(value) && props.valueFormat) {
+        value = parseDate(value, props.valueFormat);
+      }
+      if (value instanceof Date) {
+        return formatDate(
+          value,
+          props.outletFormat || mapTypeFormat[props.type]
+        );
       }
-      return formatDate(
-        value,
-        props.outletFormat || mapTypeFormat[props.type]
-      );
+      return value;
     }
     function getInputValue() {
-      if (isNullish(innerValue.value)) {
+      if (!innerValue.value) {
         return "";
       }
       return getOutletText(innerValue.value);

package/components/dialog/common.d.ts

@@ -1,5 +1,6 @@
 import { type StyleValue } from 'vue';
 import { type TransitionHookName } from '../../use';
+import { type ButtonProps } from '../button';
 export interface DialogProps {
     rootStyle?: StyleValue;
     rootClass?: string;
@@ -15,6 +16,9 @@ export interface DialogProps {
     overlayClosable?: boolean;
     beforeClose?: (type: 'close' | 'cancel' | 'confirm') => any | Promise<any>;
     duration?: number;
+    cancelProps?: ButtonProps;
+    confirmProps?: ButtonProps;
+    id?: string;
 }
 export declare const defaultDialogProps: {
     headed: boolean;

package/components/dialog/dialog.vue

@@ -43,6 +43,7 @@
           :theme="buttonProps.cancel.theme"
           :size="buttonProps.cancel.size"
           :round="buttonProps.confirm.round"
+          v-bind="cancelProps"
           @click="onCancel"
         >
           {{ cancelText || t('cancel') }}
@@ -59,6 +60,7 @@
           :theme="buttonProps.confirm.theme"
           :size="buttonProps.confirm.size"
           :round="buttonProps.confirm.round"
+          v-bind="confirmProps"
           @click="onConfirm"
         >
           {{ confirmText || t('confirm') }}
@@ -106,7 +108,10 @@ export default  _defineComponent({
     confirmText: { type: String, required: false },
     overlayClosable: { type: Boolean, required: false },
     beforeClose: { type: Function, required: false },
-    duration: { type: Number, required: false }
+    duration: { type: Number, required: false },
+    cancelProps: { type: Object, required: false },
+    confirmProps: { type: Object, required: false },
+    id: { type: String, required: false }
   }, defaultDialogProps),
   emits: ["update:visible", "close", "cancel", "confirm", "visible-hook"],
   setup(__props, { expose: __expose, emit: __emit }) {

package/components/dialog-agent/dialog-agent.vue

@@ -1,19 +1,5 @@
 <template>
-  <sar-dialog
-    :root-style="innerProps.rootStyle"
-    :root-class="innerProps.rootClass"
-    v-model:visible="innerProps.visible"
-    :title="innerProps.title"
-    :message="innerProps.message"
-    :headed="innerProps.headed"
-    :button-type="innerProps.buttonType"
-    :show-cancel="innerProps.showCancel"
-    :cancel-text="innerProps.cancelText"
-    :show-confirm="innerProps.showConfirm"
-    :confirm-text="innerProps.confirmText"
-    :overlay-closable="innerProps.overlayClosable"
-    :before-close="innerProps.beforeClose"
-  />
+  <sar-dialog v-bind="innerProps" v-model:visible="innerProps.visible" />
 </template>
 
 <script>
@@ -51,7 +37,9 @@ export default  _defineComponent({
     confirmText: { type: String, required: false },
     overlayClosable: { type: Boolean, required: false },
     beforeClose: { type: Function, required: false },
-    duration: { type: Number, required: false }
+    duration: { type: Number, required: false },
+    cancelProps: { type: Object, required: false },
+    confirmProps: { type: Object, required: false }
   }, defaultDialogAgentProps),
   setup(__props, { expose: __expose }) {
     __expose();

package/components/input/input.vue

@@ -14,7 +14,7 @@
             placeholderClass,
           )
         "
-        :style="placeholderStyle"
+        :style="mergedPlaceholderStyle"
       >
         {{ placeholder }}
       </view>
@@ -60,7 +60,7 @@
         :class="classNames(bem.e('control'), bem.em('control', 'input'))"
         :value="innerValue"
         :placeholder="placeholder"
-        :placeholder-style="placeholderStyle"
+        :placeholder-style="mergedPlaceholderStyle"
         :placeholder-class="classNames(bem.e('placeholder'), placeholderClass)"
         :disabled="isDisabled || isReadonly"
         :maxlength="maxlength"
@@ -295,11 +295,19 @@ export default  _defineComponent({
         height: !props.autoHeight && props.minHeight
       });
     });
+    const mergedPlaceholderStyle = computed(() => {
+      return stringifyStyle(
+        {
+          color: "var(--sar-input-placeholder-color)"
+        },
+        props.placeholderStyle
+      );
+    });
     const __returned__ = { props, emit, bem, formContext, formItemContext, isDisabled, isReadonly, innerValue, setInnerValue, onInput, innerFocused, get oldValue() {
       return oldValue;
     }, set oldValue(v) {
       oldValue = v;
-    }, onFocus, onBlur, clearVisible, holdupClear, onClearTouchStart, onClearTouchEnd, onClearMouseDown, onClearClick, onLinechange, onConfirm, onKeyboardheightchange, inputClass, inputStyle, controlStyle, get classNames() {
+    }, onFocus, onBlur, clearVisible, holdupClear, onClearTouchStart, onClearTouchEnd, onClearMouseDown, onClearClick, onLinechange, onConfirm, onKeyboardheightchange, inputClass, inputStyle, controlStyle, mergedPlaceholderStyle, get classNames() {
       return classNames;
     }, SarIcon };
     return __returned__;

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

@@ -22,7 +22,7 @@
       <sar-picker
         v-if="already"
         :model-value="popoutValue"
-        @update:model-value="onChange"
+        @change="onChange"
         :columns="columns"
         :option-keys="optionKeys"
         :immediate-change="immediateChange"

package/components/popout-input/popout-input.vue

@@ -3,7 +3,7 @@
     <sar-input
       inlaid
       :model-value="innerValue"
-      @update:model-value="onChange"
+      @change="onChange"
       :placeholder="placeholder"
       :readonly="isReadonly"
       :disabled="isDisabled"

package/components/radio-input/radio-input.vue

@@ -27,7 +27,7 @@
           :direction="direction"
           :validate-event="false"
           :model-value="popoutValue"
-          @update:model-value="onChange"
+          @change="onChange"
         >
           <template #custom="{ toggle }">
             <sar-list inlaid>

package/components/space/common.d.ts

@@ -0,0 +1,20 @@
+import { type StyleValue } from 'vue';
+export type SpaceSize = 'small' | 'middle' | 'large';
+export type SpaceAlign = 'start' | 'end' | 'center' | 'baseline';
+export interface SpaceProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    direction?: 'vertical' | 'horizontal';
+    size?: SpaceSize | (string & {});
+    align?: SpaceAlign | (string & {});
+    wrap?: boolean;
+}
+export declare const spaceSizes: string[];
+export declare const spaceMapAlign: Record<string, string>;
+export declare const defaultSpaceProps: {
+    direction: SpaceProps["direction"];
+    size: SpaceProps["size"];
+};
+export interface SpaceSlots {
+    default?(props: Record<string, never>): any;
+}

package/components/space/common.js

@@ -0,0 +1,7 @@
+import { defaultConfig } from '../config';
+export const spaceSizes = ['small', 'middle', 'large'];
+export const spaceMapAlign = {
+    start: 'flex-start',
+    end: 'flex-end',
+};
+export const defaultSpaceProps = defaultConfig.space;

package/components/space/index.d.ts

@@ -0,0 +1 @@
+export { type SpaceProps, type SpaceSlots, type SpaceSize, spaceSizes, } from './common';

package/components/space/index.js

@@ -0,0 +1 @@
+export { spaceSizes, } from './common';

package/components/space/index.scss

@@ -0,0 +1,38 @@
+@use '../style/base' as *;
+
+@include bem(space) {
+  @include b() {
+    @include universal;
+  }
+
+  @include e(element) {
+    @include universal;
+
+    @include m(modifier) {
+    }
+  }
+
+  @include m(vertical) {
+    flex-direction: column;
+  }
+
+  @include m(horizontal) {
+    flex-direction: row;
+  }
+
+  @include m(small) {
+    gap: var(--sar-space-small-gap);
+  }
+
+  @include m(middle) {
+    gap: var(--sar-space-middle-gap);
+  }
+
+  @include m(large) {
+    gap: var(--sar-space-large-gap);
+  }
+
+  @include m(wrap) {
+    flex-wrap: wrap;
+  }
+}

package/components/space/space.d.ts

@@ -0,0 +1,13 @@
+import { type SpaceProps, type SpaceSlots } from './common';
+declare function __VLS_template(): Readonly<SpaceSlots> & SpaceSlots;
+declare const __VLS_component: import("vue").DefineComponent<SpaceProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SpaceProps> & Readonly<{}>, {
+    size: import("./common").SpaceSize | (string & {});
+    direction: "vertical" | "horizontal";
+}, {}, {}, {}, 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/space/space.vue

@@ -0,0 +1,65 @@
+<template>
+  <view :class="spaceClass" :style="spaceStyle">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
+import { computed } from "vue";
+import { classNames, stringifyStyle, createBem } from "../../utils";
+import {
+  defaultSpaceProps,
+  spaceMapAlign,
+  spaceSizes
+} from "./common";
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "space",
+  props:  _mergeDefaults({
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    direction: { type: String, required: false },
+    size: { type: [String, Object], required: false },
+    align: { type: [String, Object], required: false },
+    wrap: { type: Boolean, required: false }
+  }, defaultSpaceProps),
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const bem = createBem("space");
+    const presetSize = computed(() => {
+      return spaceSizes.includes(props.size);
+    });
+    const spaceClass = computed(() => {
+      return classNames(
+        bem.b(),
+        bem.m(props.direction),
+        bem.m(props.size, presetSize.value),
+        bem.m("wrap", props.wrap),
+        props.rootClass
+      );
+    });
+    const spaceStyle = computed(() => {
+      return stringifyStyle(
+        {
+          gap: presetSize.value ? null : props.size,
+          alignItems: (props.align && spaceMapAlign[props.align]) ?? props.align
+        },
+        props.rootStyle
+      );
+    });
+    const __returned__ = { props, bem, presetSize, spaceClass, spaceStyle };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/space/variables.scss

@@ -0,0 +1,7 @@
+// #variables
+page {
+  --sar-space-small-gap: 8rpx;
+  --sar-space-middle-gap: 16rpx;
+  --sar-space-large-gap: 24rpx;
+}
+// #endvariables

package/global.d.ts

@@ -77,6 +77,7 @@ declare module 'vue' {
     SarSkeletonParagraph: typeof import('./components/skeleton-paragraph/skeleton-paragraph').default
     SarSkeletonTitle: typeof import('./components/skeleton-title/skeleton-title').default
     SarSlider: typeof import('./components/slider/slider').default
+    SarSpace: typeof import('./components/space/space').default
     SarStepper: typeof import('./components/stepper/stepper').default
     SarSteps: typeof import('./components/steps/steps').default
     SarSwiperDot: typeof import('./components/swiper-dot/swiper-dot').default
@@ -85,8 +86,8 @@ declare module 'vue' {
     SarTabbar: typeof import('./components/tabbar/tabbar').default
     SarTabbarItem: typeof import('./components/tabbar-item/tabbar-item').default
     SarTable: typeof import('./components/table/table').default
-    SarTableRow: typeof import('./components/table-row/table-row').default
     SarTableCell: typeof import('./components/table-cell/table-cell').default
+    SarTableRow: typeof import('./components/table-row/table-row').default
     SarTabs: typeof import('./components/tabs/tabs').default
     SarTag: typeof import('./components/tag/tag').default
     SarTimeline: typeof import('./components/timeline/timeline').default

package/index.d.ts

@@ -63,6 +63,7 @@ export * from './components/search';
 export * from './components/share-sheet';
 export * from './components/skeleton';
 export * from './components/slider';
+export * from './components/space';
 export * from './components/stepper';
 export * from './components/steps';
 export * from './components/swiper-dot';

package/index.js

@@ -63,6 +63,7 @@ export * from './components/search';
 export * from './components/share-sheet';
 export * from './components/skeleton';
 export * from './components/slider';
+export * from './components/space';
 export * from './components/stepper';
 export * from './components/steps';
 export * from './components/swiper-dot';

package/index.scss

@@ -53,6 +53,7 @@
 @use './components/share-sheet/variables.scss' as *;
 @use './components/skeleton/variables.scss' as *;
 @use './components/slider/variables.scss' as *;
+@use './components/space/variables.scss' as *;
 @use './components/stepper/variables.scss' as *;
 @use './components/steps/variables.scss' as *;
 @use './components/style/variables.scss' as *;

package/package.json

@@ -2,7 +2,7 @@
   "id": "sard-uniapp",
   "name": "sard-uniapp",
   "displayName": "sard-uniapp",
-  "version": "1.9.2",
+  "version": "1.10.0",
   "description": "sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库",
   "main": "index.js",
   "scripts": {
@@ -116,7 +116,7 @@
     "lodash-es": "^4.17.21",
     "prettier": "^2.8.8",
     "region-data": "^1.2.3",
-    "sard-cli": "^1.0.3",
+    "sard-cli": "^1.0.4",
     "sass": "^1.43.4",
     "tel-area-code": "^1.0.1",
     "ts-custom-error": "^3.3.1",

package/utils/date.d.ts

@@ -8,7 +8,8 @@ export declare function toMonthNumber(date: Date): number;
 export declare function getPadStartDays(year: number, month: number, amount: number): Date[];
 export declare function getPadEndDays(year: number, month: number, amount: number): Date[];
 export declare function getOffsetDaysFromFirstDay(weekOnFirstDay: number, weekStartsOn: number): number;
-export declare function formatDate(date: Date, formatStr?: string): string;
+export declare function formatDate(date: Date, format?: string): string;
+export declare function parseDate(value: string, format?: 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

@@ -1,3 +1,4 @@
+import { escapeRegExp } from './regexp';
 import { minmax } from './utils';
 // 判断是否为闰年
 export function isLeapYear(year) {
@@ -53,30 +54,80 @@ export function getPadEndDays(year, month, amount) {
 export function getOffsetDaysFromFirstDay(weekOnFirstDay, weekStartsOn) {
     return (weekOnFirstDay - weekStartsOn + 7) % 7;
 }
+const dateTokensReg = /(YYYY|YY|MM|M|DD|D|HH|H|hh|h|mm|m|ss|s|SSS)/g;
+const dateGetters = {
+    YYYY: (date) => String(date.getFullYear()).padStart(4, '0'),
+    YY: (date) => String(date.getFullYear()).slice(-2),
+    MM: (date) => String(date.getMonth() + 1).padStart(2, '0'),
+    M: (date) => String(date.getMonth() + 1),
+    DD: (date) => String(date.getDate()).padStart(2, '0'),
+    D: (date) => String(date.getDate()),
+    HH: (date) => String(date.getHours()).padStart(2, '0'),
+    H: (date) => String(date.getHours()),
+    hh: (date) => String(date.getHours() % 24).padStart(2, '0'),
+    h: (date) => String(date.getHours() % 24),
+    mm: (date) => String(date.getMinutes()).padStart(2, '0'),
+    m: (date) => String(date.getMinutes()),
+    ss: (date) => String(date.getSeconds()).padStart(2, '0'),
+    s: (date) => String(date.getSeconds()),
+    SSS: (date) => String(date.getMilliseconds()).padStart(3, '0'),
+};
 // 根据传入的占位符返回格式化后的日期
-export function formatDate(date, formatStr = 'YYYY-MM-DD HH:mm:ss') {
-    const regexp = /YYYY|YY|MM|M|DD|D|HH|H|hh|h|mm|m|ss|s|SSS/g;
-    const matches = {
-        YYYY: (date) => String(date.getFullYear()).padStart(4, '0'),
-        YY: (date) => String(date.getFullYear()).slice(-2),
-        MM: (date) => String(date.getMonth() + 1).padStart(2, '0'),
-        M: (date) => String(date.getMonth() + 1),
-        DD: (date) => String(date.getDate()).padStart(2, '0'),
-        D: (date) => String(date.getDate()),
-        HH: (date) => String(date.getHours()).padStart(2, '0'),
-        H: (date) => String(date.getHours()),
-        hh: (date) => String(date.getHours() % 24).padStart(2, '0'),
-        h: (date) => String(date.getHours() % 24),
-        mm: (date) => String(date.getMinutes()).padStart(2, '0'),
-        m: (date) => String(date.getMinutes()),
-        ss: (date) => String(date.getSeconds()).padStart(2, '0'),
-        s: (date) => String(date.getSeconds()),
-        SSS: (date) => String(date.getMilliseconds()).padStart(3, '0'),
-    };
-    return formatStr.replace(regexp, (match) => {
-        return matches[match](date);
+export function formatDate(date, format = 'YYYY-MM-DD HH:mm:ss') {
+    return format.replace(dateTokensReg, (match) => {
+        return dateGetters[match](date);
     });
 }
+const defaultTokenFrags = ['YYYY', 'MM', 'DD', 'HH', 'mm', 'ss', 'SSS'];
+const dateSetters = {
+    YYYY: (date, year) => date.setFullYear(year),
+    YY: (date, year) => date.setFullYear(year),
+    MM: (date, month) => date.setMonth(month - 1),
+    M: (date, month) => date.setMonth(month - 1),
+    DD: (date, d) => date.setDate(d),
+    D: (date, d) => date.setDate(d),
+    HH: (date, hours) => date.setHours(hours),
+    H: (date, hours) => date.setHours(hours),
+    hh: (date, hours) => date.setHours(hours),
+    h: (date, hours) => date.setHours(hours),
+    mm: (date, minutes) => date.setMinutes(minutes),
+    m: (date, minutes) => date.setMinutes(minutes),
+    ss: (date, seconds) => date.setSeconds(seconds),
+    s: (date, seconds) => date.setSeconds(seconds),
+    SSS: (date, milliseconds) => date.setMilliseconds(milliseconds),
+};
+function parseDateWithoutFormat(value) {
+    const numbers = value.split(/\D+/).filter(Boolean);
+    const tokens = defaultTokenFrags.slice(0, numbers.length);
+    const date = new Date(0, 0);
+    tokens.forEach((token, i) => {
+        dateSetters[token](date, Number(numbers[i]));
+    });
+    return date;
+}
+// 解析日期的字符串表示形式，并返回 Date 实例对象
+export function parseDate(value, format) {
+    if (!format) {
+        return parseDateWithoutFormat(value);
+    }
+    const frags = format.split(dateTokensReg);
+    const reg = new RegExp('^' +
+        frags
+            .filter((_, i) => i % 2 === 0)
+            .map((item) => escapeRegExp(item))
+            .join('(.*)') +
+        '$');
+    const dateFrags = reg.exec(value)?.slice(1);
+    if (!dateFrags) {
+        return parseDateWithoutFormat(value);
+    }
+    const tokenFrags = frags.filter((_, i) => i % 2 !== 0);
+    const date = new Date(0);
+    tokenFrags.forEach((token, i) => {
+        dateSetters[token](date, Number(dateFrags[i]));
+    });
+    return date;
+}
 // 限定日期范围
 export function minmaxDate(date, minDate, maxDate) {
     return new Date(minmax(date.getTime(), minDate.getTime(), maxDate.getTime()));

package/utils/regexp.d.ts

@@ -0,0 +1 @@
+export declare function escapeRegExp(str: string): string;

package/utils/regexp.js

@@ -0,0 +1,3 @@
+export function escapeRegExp(str) {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}