@tplc/wot 1.0.6 → 1.0.8

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

@@ -1,50 +1,53 @@
 <template>
-  <view :class="`wd-calendar ${cell.border.value ? 'is-border' : ''} ${customClass}`">
-    <view class="wd-calendar__field" @click="open" v-if="withCell">
-      <slot v-if="useDefaultSlot"></slot>
-      <view
-        v-else
-        :class="`wd-calendar__cell ${disabled ? 'is-disabled' : ''} ${readonly ? 'is-readonly' : ''} ${alignRight ? 'is-align-right' : ''} ${
-          error ? 'is-error' : ''
-        } ${size ? 'is-' + size : ''} ${center ? 'is-center' : ''}`"
+  <view :class="`wd-calendar ${customClass}`">
+    <template v-if="withCell">
+      <wd-cell
+        v-if="!$slots.default"
+        :title="label"
+        :value="showValue || placeholder || translate('placeholder')"
+        :required="required"
+        :size="size"
+        :title-width="labelWidth"
+        :prop="prop"
+        :rules="rules"
+        :clickable="!disabled && !readonly"
+        :value-align="alignRight ? 'right' : 'left'"
+        :center="center"
+        :custom-class="cellClass"
+        :custom-style="customStyle"
+        :custom-title-class="customLabelClass"
+        :custom-value-class="customValueClass"
+        :ellipsis="ellipsis"
+        :use-title-slot="!!$slots.label"
+        :marker-side="markerSide"
+        @click="open"
       >
-        <view
-          v-if="label || useLabelSlot"
-          :class="`wd-calendar__label ${isRequired ? 'is-required' : ''} ${customLabelClass}`"
-          :style="labelWidth ? 'min-width:' + labelWidth + ';max-width:' + labelWidth + ';' : ''"
-        >
-          <text v-if="label" class="wd-calendar__label-inner">{{ label }}</text>
-          <slot v-else name="label"></slot>
-        </view>
-        <view class="wd-calendar__body">
-          <view class="wd-calendar__value-wraper">
-            <view
-              :class="`wd-calendar__value ${ellipsis ? 'is-ellipsis' : ''} ${customValueClass} ${showValue ? '' : 'wd-calendar__value--placeholder'}`"
-            >
-              {{ showValue || placeholder || translate('placeholder') }}
-            </view>
-            <wd-icon
-              v-if="!disabled && !readonly"
-              custom-class="wd-calendar__arrow"
-              name="arrow-right"
-            />
+        <template #title v-if="$slots.label">
+          <slot name="label"></slot>
+        </template>
+
+        <template #right-icon>
+          <wd-icon v-if="showArrow" custom-class="wd-calendar__arrow" name="arrow-right" />
+          <view v-else-if="showClear" @click.stop="handleClear">
+            <wd-icon custom-class="wd-calendar__clear" name="error-fill" />
           </view>
-          <view v-if="errorMessage" class="wd-calendar__error-message">{{ errorMessage }}</view>
-        </view>
+        </template>
+      </wd-cell>
+      <view v-else @click="open">
+        <slot></slot>
       </view>
-    </view>
+    </template>
     <wd-action-sheet
       v-model="pickerShow"
       :duration="250"
       :close-on-click-modal="closeOnClickModal"
       :safe-area-inset-bottom="safeAreaInsetBottom"
       :z-index="zIndex"
+      :root-portal="rootPortal"
       @close="close"
     >
       <view class="wd-calendar__header">
-        <view v-if="!showTypeSwitch && shortcuts.length === 0" class="wd-calendar__title">
-          {{ title || translate('title') }}
-        </view>
+        <view v-if="!showTypeSwitch && shortcuts.length === 0" class="wd-calendar__title">{{ title || translate('title') }}</view>
         <view v-if="showTypeSwitch" class="wd-calendar__tabs">
           <wd-tabs ref="calendarTabs" v-model="currentTab" @change="handleTypeChange">
             <wd-tab :title="translate('day')" :name="translate('day')" />
@@ -71,10 +74,7 @@
         v-if="inited"
         :class="`wd-calendar__view  ${currentType.indexOf('range') > -1 ? 'is-range' : ''} ${showConfirm ? 'is-show-confirm' : ''}`"
       >
-        <view
-          v-if="range(type)"
-          :class="`wd-calendar__range-label ${type === 'monthrange' ? 'is-monthrange' : ''}`"
-        >
+        <view v-if="range(type)" :class="`wd-calendar__range-label ${type === 'monthrange' ? 'is-monthrange' : ''}`">
           <view
             :class="`wd-calendar__range-label-item ${!calendarValue || !isArray(calendarValue) || !calendarValue[0] ? 'is-placeholder' : ''}`"
             style="text-align: right"
@@ -82,9 +82,7 @@
             {{ rangeLabel[0] }}
           </view>
           <view class="wd-calendar__range-sperator">/</view>
-          <view
-            :class="`wd-calendar__range-label-item ${!calendarValue || !isArray(calendarValue) || !calendarValue[1] ? 'is-placeholder' : ''}`"
-          >
+          <view :class="`wd-calendar__range-label-item ${!calendarValue || !isArray(calendarValue) || !calendarValue[1] ? 'is-placeholder' : ''}`">
             {{ rangeLabel[1] }}
           </view>
         </view>
@@ -109,9 +107,7 @@
         />
       </view>
       <view v-if="showConfirm" class="wd-calendar__confirm">
-        <wd-button block :disabled="confirmBtnDisabled" @click="handleConfirm">
-          {{ confirmText || translate('confirm') }}
-        </wd-button>
+        <wd-button block :disabled="confirmBtnDisabled" @click="handleConfirm">{{ confirmText || translate('confirm') }}</wd-button>
       </view>
     </wd-action-sheet>
   </view>
@@ -123,17 +119,21 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdCalendarView from '../wd-calendar-view/wd-calendar-view.vue'
+import wdActionSheet from '../wd-action-sheet/wd-action-sheet.vue'
+import wdButton from '../wd-button/wd-button.vue'
+import wdCell from '../wd-cell/wd-cell.vue'
 import { ref, computed, watch } from 'vue'
-import { dayjs } from '../common/dayjs'
-import { deepClone, isArray, isEqual, padZero, requestAnimationFrame } from '../common/util'
+import dayjs from '../../dayjs'
+import { deepClone, isArray, isEqual, padZero, pause } from '../common/util'
 import { getWeekNumber, isRange } from '../wd-calendar-view/utils'
-import { useCell } from '../composables/useCell'
 import { FORM_KEY, type FormItemRule } from '../wd-form/types'
 import { useParent } from '../composables/useParent'
 import { useTranslate } from '../composables/useTranslate'
@@ -153,39 +153,51 @@ const defaultDisplayFormat = (value: number | number[], type: CalendarType): str
         .join(', ')
     case 'daterange':
       return `${(value as number[])[0] ? dayjs((value as number[])[0]).format('YYYY-MM-DD') : translate('startTime')} ${translate('to')} ${
-        (value as number[])[1]
-          ? dayjs((value as number[])[1]).format('YYYY-MM-DD')
-          : translate('endTime')
+        (value as number[])[1] ? dayjs((value as number[])[1]).format('YYYY-MM-DD') : translate('endTime')
       }`
     case 'datetime':
       return dayjs(value as number).format('YYYY-MM-DD HH:mm:ss')
     case 'datetimerange':
       return `${(value as number[])[0] ? dayjs((value as number[])[0]).format(translate('timeFormat')) : translate('startTime')} ${translate(
-        'to',
+        'to'
       )}\n${(value as number[])[1] ? dayjs((value as number[])[1]).format(translate('timeFormat')) : translate('endTime')}`
     case 'week': {
-      const year = new Date(value as number).getFullYear()
+      const date = new Date(value as number)
+      const year = date.getFullYear()
       const week = getWeekNumber(value as number)
-      return translate('weekFormat', year, padZero(week))
+      const weekStart = new Date(date)
+      weekStart.setDate(date.getDate() - date.getDay() + 1)
+      const weekEnd = new Date(date)
+      weekEnd.setDate(date.getDate() + (7 - date.getDay()))
+      const adjustedYear = weekEnd.getFullYear() > year ? weekEnd.getFullYear() : year
+      return translate('weekFormat', adjustedYear, padZero(week))
     }
     case 'weekrange': {
-      const year1 = new Date((value as number[])[0]).getFullYear()
+      const date1 = new Date((value as number[])[0])
+      const date2 = new Date((value as number[])[1])
+      const year1 = date1.getFullYear()
+      const year2 = date2.getFullYear()
       const week1 = getWeekNumber((value as number[])[0])
-      const year2 = new Date((value as number[])[1]).getFullYear()
       const week2 = getWeekNumber((value as number[])[1])
-      return `${(value as number[])[0] ? translate('weekFormat', year1, padZero(week1)) : translate('startWeek')} - ${
-        (value as number[])[1]
-          ? translate('weekFormat', year2, padZero(week2))
-          : translate('endWeek')
+      const weekStart1 = new Date(date1)
+      weekStart1.setDate(date1.getDate() - date1.getDay() + 1)
+      const weekEnd1 = new Date(date1)
+      weekEnd1.setDate(date1.getDate() + (7 - date1.getDay()))
+      const weekStart2 = new Date(date2)
+      weekStart2.setDate(date2.getDate() - date2.getDay() + 1)
+      const weekEnd2 = new Date(date2)
+      weekEnd2.setDate(date2.getDate() + (7 - date2.getDay()))
+      const adjustedYear1 = weekEnd1.getFullYear() > year1 ? weekEnd1.getFullYear() : year1
+      const adjustedYear2 = weekEnd2.getFullYear() > year2 ? weekEnd2.getFullYear() : year2
+      return `${(value as number[])[0] ? translate('weekFormat', adjustedYear1, padZero(week1)) : translate('startWeek')} - ${
+        (value as number[])[1] ? translate('weekFormat', adjustedYear2, padZero(week2)) : translate('endWeek')
       }`
     }
     case 'month':
       return dayjs(value as number).format('YYYY / MM')
     case 'monthrange':
       return `${(value as number[])[0] ? dayjs((value as number[])[0]).format('YYYY / MM') : translate('startMonth')} ${translate('to')} ${
-        (value as number[])[1]
-          ? dayjs((value as number[])[1]).format('YYYY / MM')
-          : translate('endMonth')
+        (value as number[])[1] ? dayjs((value as number[])[1]).format('YYYY / MM') : translate('endMonth')
       }`
   }
 }
@@ -220,47 +232,45 @@ const formatRange = (value: number, rangeType: 'start' | 'end', type: CalendarTy
 }
 
 const props = defineProps(calendarProps)
-const emit = defineEmits(['cancel', 'change', 'update:modelValue', 'confirm', 'open'])
+const emit = defineEmits(['cancel', 'change', 'update:modelValue', 'confirm', 'open', 'clear'])
 
 const pickerShow = ref<boolean>(false)
 const calendarValue = ref<null | number | number[]>(null)
 const lastCalendarValue = ref<null | number | number[]>(null)
-const panelHeight = ref<number>(438)
+const panelHeight = ref<number>(338)
 const confirmBtnDisabled = ref<boolean>(true)
 const currentTab = ref<number>(0)
 const lastTab = ref<number>(0)
 const currentType = ref<CalendarType>('date')
 const lastCurrentType = ref<CalendarType>()
 const inited = ref<boolean>(false)
-const cell = useCell()
 const calendarView = ref()
 const calendarTabs = ref()
 
 const rangeLabel = computed(() => {
   const [start, end] = deepClone(isArray(calendarValue.value) ? calendarValue.value : [])
   return [start, end].map((item, index) => {
-    return (props.innerDisplayFormat || formatRange)(
-      item,
-      index === 0 ? 'start' : 'end',
-      currentType.value,
-    )
+    return (props.innerDisplayFormat || formatRange)(item, index === 0 ? 'start' : 'end', currentType.value)
   })
 })
 
 const showValue = computed(() => {
-  if (
-    (!isArray(props.modelValue) && props.modelValue) ||
-    (isArray(props.modelValue) && props.modelValue.length)
-  ) {
-    return (props.displayFormat || defaultDisplayFormat)(
-      props.modelValue,
-      lastCurrentType.value || currentType.value,
-    )
+  if ((!isArray(props.modelValue) && props.modelValue) || (isArray(props.modelValue) && props.modelValue.length)) {
+    return (props.displayFormat || defaultDisplayFormat)(props.modelValue, lastCurrentType.value || currentType.value)
   } else {
     return ''
   }
 })
 
+const cellClass = computed(() => {
+  const classes = ['wd-calendar__cell']
+  if (props.disabled) classes.push('is-disabled')
+  if (props.readonly) classes.push('is-readonly')
+  if (props.error) classes.push('is-error')
+  if (!showValue.value) classes.push('wd-calendar__cell--placeholder')
+  return classes.join(' ')
+})
+
 watch(
   () => props.modelValue,
   (val, oldVal) => {
@@ -269,8 +279,8 @@ watch(
     confirmBtnDisabled.value = getConfirmBtnStatus(val)
   },
   {
-    immediate: true,
-  },
+    immediate: true
+  }
 )
 
 watch(
@@ -280,71 +290,55 @@ watch(
       const tabs = ['date', 'week', 'month']
       const rangeTabs = ['daterange', 'weekrange', 'monthrange']
 
-      const index =
-        newValue.indexOf('range') > -1 ? rangeTabs.indexOf(newValue) || 0 : tabs.indexOf(newValue)
+      const index = newValue.indexOf('range') > -1 ? rangeTabs.indexOf(newValue) || 0 : tabs.indexOf(newValue)
       currentTab.value = index
     }
-    panelHeight.value = props.showConfirm ? 488 : 550
+    panelHeight.value = props.showConfirm ? 338 : 400
     currentType.value = deepClone(newValue)
   },
   {
     deep: true,
-    immediate: true,
-  },
+    immediate: true
+  }
 )
 
 watch(
   () => props.showConfirm,
   (val) => {
-    panelHeight.value = val ? 488 : 550
+    panelHeight.value = val ? 338 : 400
   },
   {
     deep: true,
-    immediate: true,
-  },
+    immediate: true
+  }
 )
 
-const { parent: form } = useParent(FORM_KEY)
-
-// 表单校验错误信息
-const errorMessage = computed(() => {
-  if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
-    return form.errorMessages[props.prop]
-  } else {
-    return ''
+const range = computed(() => {
+  return (type: CalendarType) => {
+    return isRange(type)
   }
 })
 
-// 是否展示必填
-const isRequired = computed(() => {
-  let formRequired = false
-  if (form && form.props.rules) {
-    const rules = form.props.rules
-    for (const key in rules) {
-      if (
-        Object.prototype.hasOwnProperty.call(rules, key) &&
-        key === props.prop &&
-        Array.isArray(rules[key])
-      ) {
-        formRequired = rules[key].some((rule: FormItemRule) => rule.required)
-      }
-    }
-  }
-  return props.required || props.rules.some((rule) => rule.required) || formRequired
+// 是否展示清除按钮
+const showClear = computed(() => {
+  return props.clearable && !props.disabled && !props.readonly && showValue.value.length > 0
 })
 
-const range = computed(() => {
-  return (type: CalendarType) => {
-    return isRange(type)
-  }
+// 是否展示箭头
+const showArrow = computed(() => {
+  return !props.disabled && !props.readonly && !showClear.value
 })
 
+function handleClear() {
+  emit('clear')
+  emit('update:modelValue', null)
+}
+
 function scrollIntoView() {
   calendarView.value && calendarView.value && calendarView.value.$.exposed.scrollIntoView()
 }
 // 对外暴露方法
 async function open() {
-  await props.initFun?.()
   const { disabled, readonly } = props
 
   if (disabled || readonly) return
@@ -354,10 +348,9 @@ async function open() {
   lastCalendarValue.value = deepClone(calendarValue.value)
   lastTab.value = currentTab.value
   lastCurrentType.value = currentType.value
-  requestAnimationFrame(() => {
-    scrollIntoView()
-  })
-
+  // 等待渲染完毕
+  await pause()
+  scrollIntoView()
   setTimeout(() => {
     if (props.showTypeSwitch) {
       calendarTabs.value.scrollIntoView()
@@ -381,7 +374,6 @@ function handleTypeChange({ index }: { index: number }) {
   const tabs = ['date', 'week', 'month']
   const rangeTabs = ['daterange', 'weekrange', 'monthrange']
   const type = props.type.indexOf('range') > -1 ? rangeTabs[index] : tabs[index]
-
   currentTab.value = index
   currentType.value = type as CalendarType
 }
@@ -403,7 +395,7 @@ function handleChange({ value }: { value: number | number[] | null }) {
   confirmBtnDisabled.value = getConfirmBtnStatus(value)
 
   emit('change', {
-    value,
+    value
   })
 
   if (!props.showConfirm && !confirmBtnDisabled.value) {
@@ -416,7 +408,7 @@ function handleConfirm() {
       value: calendarValue.value,
       resolve: (isPass: boolean) => {
         isPass && onConfirm()
-      },
+      }
     })
   } else {
     onConfirm()
@@ -428,6 +420,7 @@ function onConfirm() {
   emit('update:modelValue', calendarValue.value)
   emit('confirm', {
     value: calendarValue.value,
+    type: currentType.value
   })
 }
 
@@ -436,8 +429,8 @@ function handleShortcutClick(index: number) {
     calendarValue.value = deepClone(
       props.onShortcutsClick({
         item: props.shortcuts[index],
-        index,
-      }),
+        index
+      })
     )
     confirmBtnDisabled.value = getConfirmBtnStatus(calendarValue.value)
   }
@@ -449,10 +442,10 @@ function handleShortcutClick(index: number) {
 
 defineExpose<CalendarExpose>({
   close,
-  open,
+  open
 })
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-calendar-view/month/index.scss

@@ -44,7 +44,8 @@
     height: $-calendar-day-height;
     line-height: $-calendar-day-height;
     text-align: center;
-    margin-bottom: 6rpx;
+    margin-bottom: $-calendar-item-margin-bottom;
+
     @include when(disabled) {
       .wd-month__day-text {
         color: $-calendar-disabled-color;
@@ -55,20 +56,11 @@
       color: $-calendar-active-color;
     }
 
-    @include when(selected) {
+    @include when(selected, multiple-selected) {
       .wd-month__day-container {
-        color: #fff;
-        background: $-calendar-active-color;
         border-radius: $-calendar-active-border;
-        .text-price {
-          color: #fff;
-        }
-      }
-      .wd-month__day-bottom,
-      .wd-month__day-top,
-      .wd-month__day-floor,
-      .wd-month__day-text {
-        color: #fff !important;
+        background: $-calendar-active-color;
+        color: $-calendar-selected-color;
       }
     }
 
@@ -77,17 +69,23 @@
         background: $-calendar-range-color;
       }
     }
+    @include when(multiple-middle) {
+      .wd-month__day-container {
+        background: $-calendar-active-color;
+        color: $-calendar-selected-color;
+      }
+    }
 
     @include when(start) {
       &::after {
         position: absolute;
+        content: '';
+        height: $-calendar-day-height;
         top: 0;
         right: 0;
         left: 50%;
-        z-index: 1;
-        height: $-calendar-day-height;
-        content: '';
         background: $-calendar-range-color;
+        z-index: 1;
       }
 
       &.is-without-end::after {
@@ -95,100 +93,70 @@
       }
 
       .wd-month__day-container {
-        color: #fff;
         background: $-calendar-active-color;
-        border-radius: $-calendar-active-border;
-      }
-      .wd-month__day-text-custom {
-        color: #fff;
-      }
-      .wd-month__day-bottom,
-      .wd-month__day-top,
-      .wd-month__day-floor,
-      .wd-month__day-text {
-        color: #fff !important;
+        color: $-calendar-selected-color;
+        border-radius: $-calendar-active-border 0 0 $-calendar-active-border;
       }
     }
 
     @include when(end) {
       &::after {
         position: absolute;
+        content: '';
+        height: $-calendar-day-height;
         top: 0;
-        right: 50%;
         left: 0;
-        z-index: 1;
-        height: $-calendar-day-height;
-        content: '';
+        right: 50%;
         background: $-calendar-range-color;
+        z-index: 1;
       }
 
       .wd-month__day-container {
-        color: #fff;
         background: $-calendar-active-color;
-        border-radius: $-calendar-active-border;
-      }
-      .wd-month__day-text-custom {
-        color: #fff;
-      }
-      .wd-month__day-bottom,
-      .wd-month__day-top,
-      .wd-month__day-floor,
-      .wd-month__day-text {
-        color: #fff !important;
+        color: $-calendar-selected-color;
+        border-radius: 0 $-calendar-active-border $-calendar-active-border 0;
       }
     }
 
     @include when(same) {
       .wd-month__day-container {
-        color: #fff;
         background: $-calendar-active-color;
+        color: $-calendar-selected-color;
         border-radius: $-calendar-active-border;
       }
     }
+
+    @include when(last-row){
+      margin-bottom: 0;
+    }
   }
 
   @include e(day-container) {
     position: relative;
     z-index: 2;
-    height: 100%;
-    padding: 0 2px;
   }
 
   @include e(day-text) {
     font-weight: $-calendar-day-fw;
-    &-custom {
-      font-size: 14px;
-      color: $-calendar-active-color;
-    }
   }
 
   @include e(day-top) {
     position: absolute;
-    top: 6px;
-    right: 0;
+    top: 10px;
     left: 0;
-    font-size: $-calendar-info-fs;
+    right: 0;
     line-height: 1.1;
+    font-size: $-calendar-info-fs;
     text-align: center;
   }
 
   @include e(day-bottom) {
     position: absolute;
-    right: 0;
-    bottom: 6px;
+    bottom: 10px;
     left: 0;
-    font-size: $-calendar-info-fs;
-    line-height: 1.1;
-    text-align: center;
-  }
-
-  @include e(day-floor) {
-    position: absolute;
     right: 0;
-    bottom: 2px;
-    left: 0;
-    font-size: $-calendar-info-fs;
     line-height: 1.1;
+    font-size: $-calendar-info-fs;
     text-align: center;
   }
-}
+}