@tplc/wot 1.0.12 → 1.0.13

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

@@ -1,53 +1,50 @@
 <template>
-  <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 :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' : ''}`"
       >
-        <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
+          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"
+            />
           </view>
-        </template>
-      </wd-cell>
-      <view v-else @click="open">
-        <slot></slot>
+          <view v-if="errorMessage" class="wd-calendar__error-message">{{ errorMessage }}</view>
+        </view>
       </view>
-    </template>
+    </view>
     <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')" />
@@ -74,7 +71,10 @@
         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,7 +82,9 @@
             {{ 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>
@@ -107,7 +109,9 @@
         />
       </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>
@@ -119,21 +123,17 @@ 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 '../../dayjs'
-import { deepClone, isArray, isEqual, padZero, pause } from '../common/util'
+import { dayjs } from '../common/dayjs'
+import { deepClone, isArray, isEqual, padZero, requestAnimationFrame } 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,51 +153,39 @@ 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 date = new Date(value as number)
-      const year = date.getFullYear()
+      const year = new Date(value as number).getFullYear()
       const week = getWeekNumber(value as number)
-      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))
+      return translate('weekFormat', year, padZero(week))
     }
     case 'weekrange': {
-      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 year1 = new Date((value as number[])[0]).getFullYear()
       const week1 = getWeekNumber((value as number[])[0])
+      const year2 = new Date((value as number[])[1]).getFullYear()
       const week2 = getWeekNumber((value as number[])[1])
-      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')
+      return `${(value as number[])[0] ? translate('weekFormat', year1, padZero(week1)) : translate('startWeek')} - ${
+        (value as number[])[1]
+          ? translate('weekFormat', year2, 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')
       }`
   }
 }
@@ -232,45 +220,47 @@ const formatRange = (value: number, rangeType: 'start' | 'end', type: CalendarTy
 }
 
 const props = defineProps(calendarProps)
-const emit = defineEmits(['cancel', 'change', 'update:modelValue', 'confirm', 'open', 'clear'])
+const emit = defineEmits(['cancel', 'change', 'update:modelValue', 'confirm', 'open'])
 
 const pickerShow = ref<boolean>(false)
 const calendarValue = ref<null | number | number[]>(null)
 const lastCalendarValue = ref<null | number | number[]>(null)
-const panelHeight = ref<number>(338)
+const panelHeight = ref<number>(438)
 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) => {
@@ -279,8 +269,8 @@ watch(
     confirmBtnDisabled.value = getConfirmBtnStatus(val)
   },
   {
-    immediate: true
-  }
+    immediate: true,
+  },
 )
 
 watch(
@@ -290,55 +280,71 @@ 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 ? 338 : 400
+    panelHeight.value = props.showConfirm ? 488 : 550
     currentType.value = deepClone(newValue)
   },
   {
     deep: true,
-    immediate: true
-  }
+    immediate: true,
+  },
 )
 
 watch(
   () => props.showConfirm,
   (val) => {
-    panelHeight.value = val ? 338 : 400
+    panelHeight.value = val ? 488 : 550
   },
   {
     deep: true,
-    immediate: true
-  }
+    immediate: true,
+  },
 )
 
-const range = computed(() => {
-  return (type: CalendarType) => {
-    return isRange(type)
+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 showClear = computed(() => {
-  return props.clearable && !props.disabled && !props.readonly && showValue.value.length > 0
+// 是否展示必填
+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 showArrow = computed(() => {
-  return !props.disabled && !props.readonly && !showClear.value
+const range = computed(() => {
+  return (type: CalendarType) => {
+    return isRange(type)
+  }
 })
 
-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
@@ -348,9 +354,10 @@ async function open() {
   lastCalendarValue.value = deepClone(calendarValue.value)
   lastTab.value = currentTab.value
   lastCurrentType.value = currentType.value
-  // 等待渲染完毕
-  await pause()
-  scrollIntoView()
+  requestAnimationFrame(() => {
+    scrollIntoView()
+  })
+
   setTimeout(() => {
     if (props.showTypeSwitch) {
       calendarTabs.value.scrollIntoView()
@@ -374,6 +381,7 @@ 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
 }
@@ -395,7 +403,7 @@ function handleChange({ value }: { value: number | number[] | null }) {
   confirmBtnDisabled.value = getConfirmBtnStatus(value)
 
   emit('change', {
-    value
+    value,
   })
 
   if (!props.showConfirm && !confirmBtnDisabled.value) {
@@ -408,7 +416,7 @@ function handleConfirm() {
       value: calendarValue.value,
       resolve: (isPass: boolean) => {
         isPass && onConfirm()
-      }
+      },
     })
   } else {
     onConfirm()
@@ -420,7 +428,6 @@ function onConfirm() {
   emit('update:modelValue', calendarValue.value)
   emit('confirm', {
     value: calendarValue.value,
-    type: currentType.value
   })
 }
 
@@ -429,8 +436,8 @@ function handleShortcutClick(index: number) {
     calendarValue.value = deepClone(
       props.onShortcutsClick({
         item: props.shortcuts[index],
-        index
-      })
+        index,
+      }),
     )
     confirmBtnDisabled.value = getConfirmBtnStatus(calendarValue.value)
   }
@@ -442,10 +449,10 @@ function handleShortcutClick(index: number) {
 
 defineExpose<CalendarExpose>({
   close,
-  open
+  open,
 })
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import './index';
 </style>

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

@@ -44,8 +44,7 @@
     height: $-calendar-day-height;
     line-height: $-calendar-day-height;
     text-align: center;
-    margin-bottom: $-calendar-item-margin-bottom;
-
+    margin-bottom: 6rpx;
     @include when(disabled) {
       .wd-month__day-text {
         color: $-calendar-disabled-color;
@@ -56,11 +55,20 @@
       color: $-calendar-active-color;
     }
 
-    @include when(selected, multiple-selected) {
+    @include when(selected) {
       .wd-month__day-container {
-        border-radius: $-calendar-active-border;
+        color: #fff;
         background: $-calendar-active-color;
-        color: $-calendar-selected-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;
       }
     }
 
@@ -69,23 +77,17 @@
         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%;
-        background: $-calendar-range-color;
         z-index: 1;
+        height: $-calendar-day-height;
+        content: '';
+        background: $-calendar-range-color;
       }
 
       &.is-without-end::after {
@@ -93,70 +95,100 @@
       }
 
       .wd-month__day-container {
+        color: #fff;
         background: $-calendar-active-color;
-        color: $-calendar-selected-color;
-        border-radius: $-calendar-active-border 0 0 $-calendar-active-border;
+        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;
       }
     }
 
     @include when(end) {
       &::after {
         position: absolute;
-        content: '';
-        height: $-calendar-day-height;
         top: 0;
-        left: 0;
         right: 50%;
-        background: $-calendar-range-color;
+        left: 0;
         z-index: 1;
+        height: $-calendar-day-height;
+        content: '';
+        background: $-calendar-range-color;
       }
 
       .wd-month__day-container {
+        color: #fff;
         background: $-calendar-active-color;
-        color: $-calendar-selected-color;
-        border-radius: 0 $-calendar-active-border $-calendar-active-border 0;
+        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;
       }
     }
 
     @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: 10px;
-    left: 0;
+    top: 6px;
     right: 0;
-    line-height: 1.1;
+    left: 0;
     font-size: $-calendar-info-fs;
+    line-height: 1.1;
     text-align: center;
   }
 
   @include e(day-bottom) {
     position: absolute;
-    bottom: 10px;
-    left: 0;
     right: 0;
+    bottom: 6px;
+    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;
     text-align: center;
   }
-}
+}