@tplc/wot 1.0.29 → 1.0.31

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.0.31](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v0.7.78...v1.0.31) (2026-01-18)
+
+
+### ✨ Features | 新功能
+
+* **calendar:** add defaultDays prop to support automatic end date selection in date ranges ([2e5157a](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/2e5157af7fb0fd198ce129bd5017eeb753617807))
+
+### [1.0.30](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v1.0.29...v1.0.30) (2026-01-18)
+
+
+### ✨ Features | 新功能
+
+* **wd-calendar:** add header slot support to calendar component ([67d4872](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/commit/67d487278240242b97edd97ec22279d33fb9d769))
+
 ### [1.0.29](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v0.7.77...v1.0.29) (2026-01-18)
 
 ### [1.0.28](https://gitlab888.30jia.com.cn/tourism-front/zero-code-pro/compare/v0.7.67...v1.0.28) (2026-01-13)

package/components/wd-calendar/types.ts

@@ -212,6 +212,11 @@ export const calendarProps = {
    * 默认为 true，使用内置单元格
    */
   withCell: makeBooleanProp(true),
+  /**
+   * type 为 daterange 或 datetimerange 时有效，默认选中的天数
+   * 当传入该参数时，用户点击开始日期后会自动选中结束日期（开始日期 + defaultDays 天）
+   */
+  defaultDays: Number,
 }
 
 export type CalendarDisplayFormat = (value: number | number[], type: CalendarType) => string

package/components/wd-calendar/wd-calendar.vue

@@ -106,6 +106,7 @@
           :hide-second="hideSecond"
           :show-panel-title="!range(type)"
           :immediate-change="immediateChange"
+          :default-days="defaultDays"
           @change="handleChange"
         />
       </view>

package/components/wd-calendar-view/month/month.vue

@@ -318,40 +318,65 @@ function handleDateRangeChange(date: CalendarDayItem) {
   const [startDate, endDate] = deepClone(isArray(props.value) ? props.value : [])
   const compare = compareDate(date.date, startDate)
 
-  // 禁止选择同个日期
-  if (
-    !props.allowSameDay &&
-    compare === 0 &&
-    (props.type === 'daterange' || props.type === 'datetimerange') &&
-    !endDate
-  ) {
-    return
-  }
-
-  if (startDate && !endDate && compare > -1) {
-    // 不能选择超过最大范围的日期
-    if (props.maxRange && getDayOffset(date.date, startDate) > props.maxRange) {
-      const maxEndDate = getDayByOffset(startDate, props.maxRange - 1)
-      value = [startDate, getDate(maxEndDate, true)]
-      toast.show({
-        msg: props.rangePrompt || translate('rangePrompt', props.maxRange),
-      })
-    } else {
-      value = [startDate, getDate(date.date, true)]
-    }
-  } else if (props.type === 'datetimerange' && startDate && endDate) {
-    // 时间范围类型，且有开始时间和结束时间，需要支持重新点击开始日期和结束日期可以重新修改时间
-    if (compare === 0) {
+  // 如果设置了 defaultDays,则用户不能修改结束日期,只能重新选择开始日期
+  if (props.defaultDays && startDate && endDate) {
+    // 如果是 datetimerange 类型,点击开始日期可以重新修改开始时间
+    if (props.type === 'datetimerange' && compare === 0) {
       type = 'start'
       value = props.value as number[]
-    } else if (compareDate(date.date, endDate) === 0) {
-      type = 'end'
-      value = props.value as number[]
     } else {
+      // 其他情况重新选择开始日期
       value = [getDate(date.date), null]
+      // 自动计算结束日期
+      const autoEndDate = calculateAutoEndDate(date.date)
+      if (autoEndDate) {
+        value = [getDate(date.date), getDate(autoEndDate, true)]
+      }
     }
-  } else {
+  } else if (props.defaultDays && !startDate) {
+    // 首次选择开始日期,自动计算结束日期
     value = [getDate(date.date), null]
+    const autoEndDate = calculateAutoEndDate(date.date)
+    if (autoEndDate) {
+      value = [getDate(date.date), getDate(autoEndDate, true)]
+    }
+  } else {
+    // 原有逻辑:没有设置 defaultDays 的情况
+    // 禁止选择同个日期
+    if (
+      !props.allowSameDay &&
+      compare === 0 &&
+      (props.type === 'daterange' || props.type === 'datetimerange') &&
+      !endDate
+    ) {
+      return
+    }
+
+    if (startDate && !endDate && compare > -1) {
+      // 不能选择超过最大范围的日期
+      if (props.maxRange && getDayOffset(date.date, startDate) > props.maxRange) {
+        const maxEndDate = getDayByOffset(startDate, props.maxRange - 1)
+        value = [startDate, getDate(maxEndDate, true)]
+        toast.show({
+          msg: props.rangePrompt || translate('rangePrompt', props.maxRange),
+        })
+      } else {
+        value = [startDate, getDate(date.date, true)]
+      }
+    } else if (props.type === 'datetimerange' && startDate && endDate) {
+      // 时间范围类型，且有开始时间和结束时间，需要支持重新点击开始日期和结束日期可以重新修改时间
+      if (compare === 0) {
+        type = 'start'
+        value = props.value as number[]
+      } else if (compareDate(date.date, endDate) === 0) {
+        type = 'end'
+        value = props.value as number[]
+      } else {
+        value = [getDate(date.date), null]
+      }
+    } else {
+      value = [getDate(date.date), null]
+    }
   }
 
   emit('change', {
@@ -359,6 +384,33 @@ function handleDateRangeChange(date: CalendarDayItem) {
     type: type || (value[1] ? 'end' : 'start'),
   })
 }
+
+/**
+ * 根据 defaultDays 计算自动结束日期
+ * @param startDate 开始日期时间戳
+ * @returns 结束日期时间戳,如果超出限制则返回限制边界
+ */
+function calculateAutoEndDate(startDate: number): number | null {
+  if (!props.defaultDays) return null
+
+  // 计算目标结束日期
+  let targetDays = props.defaultDays
+
+  // 如果设置了 maxRange,取两者中较小的值
+  if (props.maxRange && targetDays > props.maxRange) {
+    targetDays = props.maxRange
+  }
+
+  // 计算结束日期 (开始日期 + defaultDays - 1 天,因为包含开始日期当天)
+  const endDate = getDayByOffset(startDate, targetDays - 1)
+
+  // 如果计算出的结束日期超过 maxDate,则截断到 maxDate
+  if (compareDate(endDate, props.maxDate) === 1) {
+    return props.maxDate
+  }
+
+  return endDate
+}
 function handleWeekChange(date: CalendarDayItem) {
   const [weekStart] = getWeekRange(date.date, props.firstDayOfWeek)
 

package/components/wd-calendar-view/month/types.ts

@@ -16,4 +16,9 @@ export const monthProps = {
   defaultTime: {
     type: [Array] as PropType<Array<number[]>>,
   },
+  /**
+   * type 为 daterange 或 datetimerange 时有效，默认选中的天数
+   * 当传入该参数时，用户点击开始日期后会自动选中结束日期（开始日期 + defaultDays 天）
+   */
+  defaultDays: Number,
 }

package/components/wd-calendar-view/monthPanel/month-panel.vue

@@ -28,6 +28,7 @@
           :range-prompt="rangePrompt"
           :allow-same-day="allowSameDay"
           :default-time="defaultTime"
+          :default-days="defaultDays"
           @change="handleDateChange"
         />
       </view>

package/components/wd-calendar-view/monthPanel/types.ts

@@ -32,6 +32,10 @@ export const monthPanelProps = {
    * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
    */
   immediateChange: makeBooleanProp(false),
+  /**
+   * type 为 daterange 或 datetimerange 时有效，默认选中的天数
+   */
+  defaultDays: Number,
 }
 
 export type MonthPanelProps = ExtractPropTypes<typeof monthPanelProps>

package/components/wd-calendar-view/types.ts

@@ -92,6 +92,11 @@ export const calendarViewProps = {
    * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
    */
   immediateChange: makeBooleanProp(false),
+  /**
+   * type 为 daterange 或 datetimerange 时有效，默认选中的天数
+   * 当传入该参数时，用户点击开始日期后会自动选中结束日期（开始日期 + defaultDays 天）
+   */
+  defaultDays: Number,
 }
 
 export type CalendarViewProps = ExtractPropTypes<typeof calendarViewProps>

package/components/wd-calendar-view/wd-calendar-view.vue

@@ -34,6 +34,7 @@
       :immediate-change="immediateChange"
       :time-filter="timeFilter"
       :hide-second="hideSecond"
+      :default-days="defaultDays"
       @change="handleChange"
       @pickstart="handlePickStart"
       @pickend="handlePickEnd"

package/components/wd-popup/wd-popup.vue

@@ -71,13 +71,13 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script lang="ts" setup>
-import { computed, onBeforeMount, ref } from 'vue'
+import { computed, inject, onBeforeMount, ref, watch } from 'vue'
 import wdIcon from '../wd-icon/wd-icon.vue'
 import wdOverlay from '../wd-overlay/wd-overlay.vue'
 import wdTransition from '../wd-transition/wd-transition.vue'
@@ -96,7 +96,7 @@ const emit = defineEmits([
   'after-leave',
   'after-enter',
   'click-modal',
-  'close'
+  'close',
 ])
 
 /**
@@ -125,7 +125,9 @@ const transitionName = computed<TransitionName | TransitionName[]>(() => {
 })
 
 const safeBottom = ref<number>(0)
-
+const popupProvide = inject('wd-popup', {
+  value: false,
+})
 const style = computed(() => {
   return `z-index:${props.zIndex}; padding-bottom: ${safeBottom.value}px;${props.customStyle}`
 })
@@ -150,6 +152,13 @@ onBeforeMount(() => {
     }
   }
 })
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    popupProvide.value = newVal
+  },
+  { deep: true, immediate: true },
+)
 
 function handleClickModal() {
   emit('click-modal')

package/components/wd-transition/wd-transition.vue

@@ -9,7 +9,13 @@
   >
     <slot />
   </view>
-  <view :class="rootClass" :style="style" @transitionend="onTransitionEnd" @click="handleClick" v-else-if="isShow && !disableTouchMove">
+  <view
+    :class="rootClass"
+    :style="style"
+    @transitionend="onTransitionEnd"
+    @click="handleClick"
+    v-else-if="isShow && !disableTouchMove"
+  >
     <slot />
   </view>
 </template>
@@ -20,8 +26,8 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
@@ -51,15 +57,23 @@ const getClassNames = (name?: TransitionName | TransitionName[]) => {
     leaveTo = `wd-${name}-leave-to wd-${name}-leave-active ${leaveTo}`
   }
   return {
-    enter: enter,
+    enter,
     'enter-to': enterTo,
-    leave: leave,
-    'leave-to': leaveTo
+    leave,
+    'leave-to': leaveTo,
   }
 }
 
 const props = defineProps(transitionProps)
-const emit = defineEmits(['click', 'before-enter', 'enter', 'before-leave', 'leave', 'after-leave', 'after-enter'])
+const emit = defineEmits([
+  'click',
+  'before-enter',
+  'enter',
+  'before-leave',
+  'leave',
+  'after-leave',
+  'after-enter',
+])
 
 // 初始化是否完成
 const inited = ref<boolean>(false)
@@ -107,7 +121,7 @@ watch(
   (newVal) => {
     handleShow(newVal)
   },
-  { deep: true }
+  { deep: true },
 )
 
 function handleClick() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "id": "@tplc/wot",
   "name": "@tplc/wot",
-  "version": "1.0.29",
+  "version": "1.0.31",
   "keywords": [
     "wot-design-uni",
     "国际化",

package/types/components/wd-calendar/types.d.ts

@@ -266,6 +266,11 @@ export declare const calendarProps: {
     type: BooleanConstructor
     default: boolean
   }
+  /**
+   * type 为 daterange 或 datetimerange 时有效，默认选中的天数
+   * 当传入该参数时，用户点击开始日期后会自动选中结束日期（开始日期 + defaultDays 天）
+   */
+  defaultDays: NumberConstructor
   customStyle: {
     type: PropType<string>
     default: string

package/types/components/wd-calendar/wd-calendar.vue.d.ts

@@ -134,6 +134,7 @@ declare const _default: __VLS_WithTemplateSlots<
         type: BooleanConstructor
         default: boolean
       }
+      defaultDays: NumberConstructor
       customStyle: {
         type: import('vue').PropType<string>
         default: string
@@ -294,6 +295,7 @@ declare const _default: __VLS_WithTemplateSlots<
           type: BooleanConstructor
           default: boolean
         }
+        defaultDays: NumberConstructor
         customStyle: {
           type: import('vue').PropType<string>
           default: string

package/types/components/wd-calendar-view/month/month.vue.d.ts

@@ -35,6 +35,7 @@ declare const _default: import('vue').DefineComponent<
     defaultTime: {
       type: import('vue').PropType<Array<number[]>>
     }
+    defaultDays: NumberConstructor
   },
   {},
   unknown,
@@ -83,6 +84,7 @@ declare const _default: import('vue').DefineComponent<
       defaultTime: {
         type: import('vue').PropType<Array<number[]>>
       }
+      defaultDays: NumberConstructor
     }>
   > & {
     onChange?: ((...args: any[]) => any) | undefined

package/types/components/wd-calendar-view/month/types.d.ts

@@ -35,4 +35,9 @@ export declare const monthProps: {
   defaultTime: {
     type: PropType<Array<number[]>>
   }
+  /**
+   * type 为 daterange 或 datetimerange 时有效，默认选中的天数
+   * 当传入该参数时，用户点击开始日期后会自动选中结束日期（开始日期 + defaultDays 天）
+   */
+  defaultDays: NumberConstructor
 }

package/types/components/wd-calendar-view/monthPanel/month-panel.vue.d.ts

@@ -47,6 +47,7 @@ declare const _default: import('vue').DefineComponent<
       type: BooleanConstructor
       default: boolean
     }
+    defaultDays: NumberConstructor
   },
   {
     scrollIntoView: () => void
@@ -112,6 +113,7 @@ declare const _default: import('vue').DefineComponent<
         type: BooleanConstructor
         default: boolean
       }
+      defaultDays: NumberConstructor
     }>
   > & {
     onChange?: ((...args: any[]) => any) | undefined

package/types/components/wd-calendar-view/monthPanel/types.d.ts

@@ -58,6 +58,10 @@ export declare const monthPanelProps: {
     type: BooleanConstructor
     default: boolean
   }
+  /**
+   * type 为 daterange 或 datetimerange 时有效，默认选中的天数
+   */
+  defaultDays: NumberConstructor
 }
 export type MonthPanelProps = ExtractPropTypes<typeof monthPanelProps>
 export type MonthPanelTimeType = 'start' | 'end' | ''

package/types/components/wd-calendar-view/types.d.ts

@@ -100,6 +100,11 @@ export declare const calendarViewProps: {
     type: BooleanConstructor
     default: boolean
   }
+  /**
+   * type 为 daterange 或 datetimerange 时有效，默认选中的天数
+   * 当传入该参数时，用户点击开始日期后会自动选中结束日期（开始日期 + defaultDays 天）
+   */
+  defaultDays: NumberConstructor
   customStyle: {
     type: PropType<string>
     default: string

package/types/components/wd-calendar-view/wd-calendar-view.vue.d.ts

@@ -48,6 +48,7 @@ declare const _default: import('vue').DefineComponent<
       type: BooleanConstructor
       default: boolean
     }
+    defaultDays: NumberConstructor
     customStyle: {
       type: import('vue').PropType<string>
       default: string
@@ -123,6 +124,7 @@ declare const _default: import('vue').DefineComponent<
         type: BooleanConstructor
         default: boolean
       }
+      defaultDays: NumberConstructor
       customStyle: {
         type: import('vue').PropType<string>
         default: string