@tplc/wot 1.0.7 → 1.0.9

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

@@ -12,6 +12,7 @@
     }
 
     @include e(month) {
+
       @include when(disabled) {
         .wd-year__month-text {
           color: $-dark-color-gray;
@@ -44,6 +45,7 @@
     height: $-calendar-day-height;
     line-height: $-calendar-day-height;
     text-align: center;
+    margin-bottom: $-calendar-item-margin-bottom;
 
     @include when(disabled) {
       .wd-year__month-text {
@@ -59,8 +61,8 @@
       color: #fff;
 
       .wd-year__month-text {
-        background: $-calendar-active-color;
         border-radius: $-calendar-active-border;
+        background: $-calendar-active-color;
       }
     }
 
@@ -69,21 +71,21 @@
     }
 
     @include when(start) {
-      color: #fff;
+      color: $-calendar-selected-color;
 
       &::after {
         position: absolute;
         top: 0;
         right: 0;
-        bottom: 0;
         left: 50%;
+        bottom: 0;
         content: '';
         background: $-calendar-range-color;
       }
 
       .wd-year__month-text {
         background: $-calendar-active-color;
-        border-radius: $-calendar-active-border;
+        border-radius: $-calendar-active-border 0 0 $-calendar-active-border;
       }
 
       &.is-without-end::after {
@@ -92,32 +94,35 @@
     }
 
     @include when(end) {
-      color: #fff;
+      color: $-calendar-selected-color;
 
       &::after {
         position: absolute;
         top: 0;
+        left: 0;
         right: 50%;
         bottom: 0;
-        left: 0;
         content: '';
         background: $-calendar-range-color;
       }
 
       .wd-year__month-text {
         background: $-calendar-active-color;
-        border-radius: $-calendar-active-border;
+        border-radius: 0 $-calendar-active-border $-calendar-active-border 0;
       }
     }
 
     @include when(same) {
-      color: #fff;
+      color: $-calendar-selected-color;
 
       .wd-year__month-text {
         background: $-calendar-active-color;
         border-radius: $-calendar-active-border;
       }
     }
+    @include when(last-row){
+      margin-bottom: 0;
+    }
   }
 
   @include e(month-text) {
@@ -129,20 +134,20 @@
   @include e(month-top) {
     position: absolute;
     top: 10px;
-    right: 0;
     left: 0;
-    font-size: $-calendar-info-fs;
+    right: 0;
     line-height: 1.1;
+    font-size: $-calendar-info-fs;
     text-align: center;
   }
 
   @include e(month-bottom) {
     position: absolute;
-    right: 0;
     bottom: 10px;
     left: 0;
-    font-size: $-calendar-info-fs;
+    right: 0;
     line-height: 1.1;
+    font-size: $-calendar-info-fs;
     text-align: center;
   }
-}
+}

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

@@ -14,6 +14,7 @@ export const yearProps = {
   rangePrompt: String,
   allowSameDay: makeBooleanProp(false),
   defaultTime: {
-    type: [Array] as PropType<Array<number[]>>,
+    type: [Array] as PropType<Array<number[]>>
   },
+  showTitle: makeBooleanProp(true)
 }

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

@@ -2,12 +2,14 @@
   <wd-toast selector="wd-year" />
 
   <view class="wd-year year">
-    <view class="wd-year__title">{{ yearTitle(date) }}</view>
+    <view class="wd-year__title" v-if="showTitle">{{ yearTitle(date) }}</view>
     <view class="wd-year__months">
       <view
         v-for="(item, index) in months"
         :key="index"
-        :class="`wd-year__month ${item.disabled ? 'is-disabled' : ''} ${item.type ? itemClass(item.type, value!, type) : ''}`"
+        :class="`wd-year__month ${item.disabled ? 'is-disabled' : ''} ${item.isLastRow ? 'is-last-row' : ''} ${
+          item.type ? monthTypeClass(item.type) : ''
+        }`"
         @click="handleDateClick(index)"
       >
         <view class="wd-year__month-top">{{ item.topInfo }}</view>
@@ -22,27 +24,21 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
+import wdToast from '../../wd-toast/wd-toast.vue'
 import { computed, ref, watch } from 'vue'
 import { deepClone, isArray, isFunction } from '../../common/util'
-import {
-  compareMonth,
-  formatYearTitle,
-  getDateByDefaultTime,
-  getItemClass,
-  getMonthByOffset,
-  getMonthOffset,
-} from '../utils'
+import { compareMonth, formatYearTitle, getDateByDefaultTime, getItemClass, getMonthByOffset, getMonthOffset } from '../utils'
 import { useToast } from '../../wd-toast'
 import { useTranslate } from '../../composables/useTranslate'
-import { dayjs } from '../../common/dayjs'
+import dayjs from '../../../dayjs'
 import { yearProps } from './types'
-import type { CalendarDayItem, CalendarDayType, CalendarType } from '../types'
+import type { CalendarDayItem, CalendarDayType } from '../types'
 
 const props = defineProps(yearProps)
 const emit = defineEmits(['change'])
@@ -52,9 +48,9 @@ const { translate } = useTranslate('calendar-view')
 
 const months = ref<CalendarDayItem[]>([])
 
-const itemClass = computed(() => {
-  return (monthType: CalendarDayType, value: number | (number | null)[], type: CalendarType) => {
-    return getItemClass(monthType, value, type)
+const monthTypeClass = computed(() => {
+  return (monthType: CalendarDayType) => {
+    return getItemClass(monthType, props.value, props.type)
   }
 })
 
@@ -65,21 +61,14 @@ const yearTitle = computed(() => {
 })
 
 watch(
-  [
-    () => props.type,
-    () => props.date,
-    () => props.value,
-    () => props.minDate,
-    () => props.maxDate,
-    () => props.formatter,
-  ],
+  [() => props.type, () => props.date, () => props.value, () => props.minDate, () => props.maxDate, () => props.formatter],
   () => {
     setMonths()
   },
   {
     deep: true,
-    immediate: true,
-  },
+    immediate: true
+  }
 )
 
 function getMonthLabel(date: number) {
@@ -120,12 +109,7 @@ function getMonthType(date: number) {
       return 'start'
     } else if (endDate && compareMonth(date, endDate) === 0) {
       return 'end'
-    } else if (
-      startDate &&
-      endDate &&
-      compareMonth(date, startDate) === 1 &&
-      compareMonth(date, endDate) === -1
-    ) {
+    } else if (startDate && endDate && compareMonth(date, startDate) === 1 && compareMonth(date, endDate) === -1) {
       return 'middle'
     } else {
       return ''
@@ -155,14 +139,12 @@ function handleDateClick(index: number) {
   }
 }
 function getDate(date: number) {
-  return props.defaultTime && props.defaultTime.length > 0
-    ? getDateByDefaultTime(date, props.defaultTime[0])
-    : date
+  return props.defaultTime && props.defaultTime.length > 0 ? getDateByDefaultTime(date, props.defaultTime[0]) : date
 }
 function handleMonthChange(date: CalendarDayItem) {
   if (date.type !== 'selected') {
     emit('change', {
-      value: getDate(date.date),
+      value: getDate(date.date)
     })
   }
 }
@@ -179,7 +161,7 @@ function handleMonthRangeChange(date: CalendarDayItem) {
       const maxEndDate = getMonthByOffset(startDate, props.maxRange - 1)
       value = [startDate, getDate(maxEndDate)]
       toast.show({
-        msg: props.rangePrompt || translate('rangePromptMonth', props.maxRange),
+        msg: props.rangePrompt || translate('rangePromptMonth', props.maxRange)
       })
     } else {
       value = [startDate, getDate(date.date)]
@@ -188,26 +170,26 @@ function handleMonthRangeChange(date: CalendarDayItem) {
     value = [getDate(date.date), null]
   }
   emit('change', {
-    value,
+    value
   })
 }
 
 function getFormatterDate(date: number, month: number, type?: CalendarDayType) {
   let monthObj: CalendarDayItem = {
-    date,
+    date: date,
     text: month + 1,
     topInfo: '',
     bottomInfo: '',
     type,
     disabled: compareMonth(date, props.minDate) === -1 || compareMonth(date, props.maxDate) === 1,
+    isLastRow: month >= 8
   }
+
   if (props.formatter) {
     if (isFunction(props.formatter)) {
       monthObj = props.formatter(monthObj)
     } else {
-      console.error(
-        '[wot-design] error(wd-calendar-view): the formatter prop of wd-calendar-view should be a function',
-      )
+      console.error('[wot-design] error(wd-calendar-view): the formatter prop of wd-calendar-view should be a function')
     }
   }
 

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

@@ -5,20 +5,20 @@
   @include b(year-panel) {
     @include e(title) {
       color: $-dark-color;
-      box-shadow: 0px 4px 8px 0 rgba(255, 255, 255, 0.02);
+      box-shadow: 0px 4px 8px 0 rgba(255, 255,255, 0.02);
     }
   }
 }
 
 @include b(year-panel) {
-  padding: $-calendar-panel-padding;
   font-size: $-calendar-fs;
+  padding: $-calendar-panel-padding;
 
   @include e(title) {
     padding: 5px 0;
+    text-align: center;
     font-size: $-calendar-panel-title-fs;
     color: $-calendar-panel-title-color;
-    text-align: center;
     box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.02);
   }
-}
+}

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

@@ -21,9 +21,9 @@ export const yearPanelProps = {
   allowSameDay: makeBooleanProp(false),
   showPanelTitle: makeBooleanProp(false),
   defaultTime: {
-    type: [Array] as PropType<Array<number[]>>,
+    type: [Array] as PropType<Array<number[]>>
   },
-  panelHeight: makeRequiredProp(Number),
+  panelHeight: makeRequiredProp(Number)
 }
 
 export type YearPanelProps = ExtractPropTypes<typeof yearPanelProps>

package/components/wd-calendar-view/yearPanel/year-panel.vue

@@ -1,13 +1,7 @@
 <template>
   <view class="wd-year-panel">
     <view v-if="showPanelTitle" class="wd-year-panel__title">{{ title }}</view>
-    <scroll-view
-      class="wd-year-panel__container"
-      :style="`height: ${scrollHeight}px`"
-      scroll-y
-      @scroll="yearScroll"
-      :scroll-top="scrollTop"
-    >
+    <scroll-view class="wd-year-panel__container" :style="`height: ${scrollHeight}px`" scroll-y @scroll="yearScroll" :scroll-top="scrollTop">
       <view v-for="(item, index) in years" :key="index" :id="`year${index}`">
         <year
           :type="type"
@@ -20,6 +14,7 @@
           :range-prompt="rangePrompt"
           :allow-same-day="allowSameDay"
           :default-time="defaultTime"
+          :showTitle="index !== 0"
           @change="handleDateChange"
         />
       </view>
@@ -31,15 +26,15 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
 import { computed, ref, onMounted } from 'vue'
 import { compareYear, formatYearTitle, getYears } from '../utils'
-import { isArray, isNumber, requestAnimationFrame } from '../../common/util'
+import { isArray, isNumber, pause } from '../../common/util'
 import Year from '../year/year.vue'
 import { yearPanelProps, type YearInfo, type YearPanelExpose } from './types'
 
@@ -51,16 +46,16 @@ const scrollIndex = ref<number>(0) // 当前显示的年份索引
 
 // 滚动区域的高度
 const scrollHeight = computed(() => {
-  const scrollHeight: number = (props.panelHeight || 378) + (props.showPanelTitle ? 26 : 16)
+  const scrollHeight: number = props.panelHeight + (props.showPanelTitle ? 26 : 16)
   return scrollHeight
 })
 
 // 年份信息
 const years = computed<YearInfo[]>(() => {
-  return getYears(props.minDate, props.maxDate).map((year) => {
+  return getYears(props.minDate, props.maxDate).map((year, index) => {
     return {
       date: year,
-      height: 237,
+      height: index === 0 ? 200 : 245
     }
   })
 })
@@ -74,38 +69,38 @@ onMounted(() => {
   scrollIntoView()
 })
 
-function scrollIntoView() {
-  requestAnimationFrame(() => {
-    let activeDate: number | null = null
-    if (isArray(props.value)) {
-      activeDate = props.value![0]
-    } else if (isNumber(props.value)) {
-      activeDate = props.value
-    }
+async function scrollIntoView() {
+  await pause()
+  let activeDate: number | null = null
+  if (isArray(props.value)) {
+    activeDate = props.value![0]
+  } else if (isNumber(props.value)) {
+    activeDate = props.value
+  }
 
-    if (!activeDate) {
-      activeDate = Date.now()
-    }
+  if (!activeDate) {
+    activeDate = Date.now()
+  }
 
-    let top: number = 0
-    for (let index = 0; index < years.value.length; index++) {
-      if (compareYear(years.value[index].date, activeDate) === 0) {
-        break
-      }
-      top += years.value[index] ? Number(years.value[index].height) : 0
+  let top: number = 0
+  for (let index = 0; index < years.value.length; index++) {
+    if (compareYear(years.value[index].date, activeDate) === 0) {
+      break
     }
-    scrollTop.value = 0
-    requestAnimationFrame(() => {
-      scrollTop.value = top
-    })
-  })
+    top += years.value[index] ? Number(years.value[index].height) : 0
+  }
+  scrollTop.value = 0
+  if (top > 0) {
+    await pause()
+    scrollTop.value = top + 45
+  }
 }
 
-const yearScroll = (e: Event) => {
+const yearScroll = (event: { detail: { scrollTop: number } }) => {
   if (years.value.length <= 1) {
     return
   }
-  const scrollTop = Math.max(0, (e.target as Element).scrollTop)
+  const scrollTop = Math.max(0, event.detail.scrollTop)
   doSetSubtitle(scrollTop)
 }
 
@@ -117,7 +112,7 @@ function doSetSubtitle(scrollTop: number) {
   let height: number = 0 // 月份高度和
   for (let index = 0; index < years.value.length; index++) {
     height = height + years.value[index].height
-    if (scrollTop < height + 45) {
+    if (scrollTop < height) {
       scrollIndex.value = index
       return
     }
@@ -126,15 +121,15 @@ function doSetSubtitle(scrollTop: number) {
 
 function handleDateChange({ value }: { value: number[] }) {
   emit('change', {
-    value,
+    value
   })
 }
 
 defineExpose<YearPanelExpose>({
-  scrollIntoView,
+  scrollIntoView
 })
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-card/index.scss

@@ -1,10 +1,11 @@
-@import '../common/abstracts/variable';
-@import '../common/abstracts/_mixin';
+@import "../common/abstracts/variable.scss";
+@import "../common/abstracts/_mixin.scss";
 .wot-theme-dark {
   @include b(card) {
     background-color: $-dark-background2;
 
     @include when(rectangle) {
+  
       .wd-card__content {
         @include halfPixelBorder('top', 0, $-dark-border-color);
       }
@@ -24,17 +25,17 @@
 
 @include b(card) {
   padding: $-card-padding;
-  margin: $-card-margin;
-  margin-bottom: 12px;
-  font-size: $-card-fs;
-  line-height: $-card-line-height;
   background-color: $-card-bg;
+  line-height: $-card-line-height;
+  margin: $-card-margin;
   border-radius: $-card-radius;
   box-shadow: $-card-shadow-color;
+  font-size: $-card-fs;
+  margin-bottom: 12px;
 
   @include when(rectangle) {
-    margin-right: 0;
     margin-left: 0;
+    margin-right: 0;
     border-radius: 0;
     box-shadow: none;
 
@@ -56,15 +57,15 @@
   }
   @include e(title-content) {
     padding: 16px 0;
-    font-size: $-card-title-fs;
     color: $-card-title-color;
+    font-size: $-card-title-fs;
   }
   @include e(content) {
-    line-height: $-card-content-line-height;
     color: $-card-content-color;
+    line-height: $-card-content-line-height;
   }
   @include e(footer) {
     padding: $-card-footer-padding;
     text-align: right;
   }
-}
+} 

package/components/wd-card/types.ts

@@ -24,7 +24,7 @@ export const cardProps = {
   /**
    * 底部自定义样式
    */
-  customFooterClass: makeStringProp(''),
+  customFooterClass: makeStringProp('')
 }
 
 export type CardProps = ExtractPropTypes<typeof cardProps>

package/components/wd-card/wd-card.vue

@@ -1,9 +1,6 @@
 <template>
-  <view
-    :class="['wd-card', type == 'rectangle' ? 'is-rectangle' : '', customClass]"
-    :style="customStyle"
-  >
-    <view :class="['wd-card__title-content', customTitleClass]">
+  <view :class="['wd-card', type == 'rectangle' ? 'is-rectangle' : '', customClass]" :style="customStyle">
+    <view :class="['wd-card__title-content', customTitleClass]" v-if="title || $slots.title">
       <view class="wd-card__title">
         <text v-if="title">{{ title }}</text>
         <slot v-else name="title"></slot>
@@ -12,7 +9,7 @@
     <view :class="`wd-card__content ${customContentClass}`">
       <slot></slot>
     </view>
-    <view :class="`wd-card__footer ${customFooterClass}`">
+    <view :class="`wd-card__footer ${customFooterClass}`" v-if="$slots.footer">
       <slot name="footer"></slot>
     </view>
   </view>
@@ -24,8 +21,8 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
@@ -36,5 +33,5 @@ defineProps(cardProps)
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>