@tplc/wot 1.0.12 → 1.0.13

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

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

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

@@ -14,7 +14,6 @@ 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,14 +2,12 @@
   <wd-toast selector="wd-year" />
 
   <view class="wd-year year">
-    <view class="wd-year__title" v-if="showTitle">{{ yearTitle(date) }}</view>
+    <view class="wd-year__title">{{ 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.isLastRow ? 'is-last-row' : ''} ${
-          item.type ? monthTypeClass(item.type) : ''
-        }`"
+        :class="`wd-year__month ${item.disabled ? 'is-disabled' : ''} ${item.type ? itemClass(item.type, value!, type) : ''}`"
         @click="handleDateClick(index)"
       >
         <view class="wd-year__month-top">{{ item.topInfo }}</view>
@@ -24,21 +22,27 @@ 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 '../../../dayjs'
+import { dayjs } from '../../common/dayjs'
 import { yearProps } from './types'
-import type { CalendarDayItem, CalendarDayType } from '../types'
+import type { CalendarDayItem, CalendarDayType, CalendarType } from '../types'
 
 const props = defineProps(yearProps)
 const emit = defineEmits(['change'])
@@ -48,9 +52,9 @@ const { translate } = useTranslate('calendar-view')
 
 const months = ref<CalendarDayItem[]>([])
 
-const monthTypeClass = computed(() => {
-  return (monthType: CalendarDayType) => {
-    return getItemClass(monthType, props.value, props.type)
+const itemClass = computed(() => {
+  return (monthType: CalendarDayType, value: number | (number | null)[], type: CalendarType) => {
+    return getItemClass(monthType, value, type)
   }
 })
 
@@ -61,14 +65,21 @@ 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) {
@@ -109,7 +120,12 @@ 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 ''
@@ -139,12 +155,14 @@ 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),
     })
   }
 }
@@ -161,7 +179,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)]
@@ -170,26 +188,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) {
-  font-size: $-calendar-fs;
   padding: $-calendar-panel-padding;
+  font-size: $-calendar-fs;
 
   @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,7 +1,13 @@
 <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"
@@ -14,7 +20,6 @@
           :range-prompt="rangePrompt"
           :allow-same-day="allowSameDay"
           :default-time="defaultTime"
-          :showTitle="index !== 0"
           @change="handleDateChange"
         />
       </view>
@@ -26,15 +31,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, pause } from '../../common/util'
+import { isArray, isNumber, requestAnimationFrame } from '../../common/util'
 import Year from '../year/year.vue'
 import { yearPanelProps, type YearInfo, type YearPanelExpose } from './types'
 
@@ -46,16 +51,16 @@ const scrollIndex = ref<number>(0) // 当前显示的年份索引
 
 // 滚动区域的高度
 const scrollHeight = computed(() => {
-  const scrollHeight: number = props.panelHeight + (props.showPanelTitle ? 26 : 16)
+  const scrollHeight: number = (props.panelHeight || 378) + (props.showPanelTitle ? 26 : 16)
   return scrollHeight
 })
 
 // 年份信息
 const years = computed<YearInfo[]>(() => {
-  return getYears(props.minDate, props.maxDate).map((year, index) => {
+  return getYears(props.minDate, props.maxDate).map((year) => {
     return {
       date: year,
-      height: index === 0 ? 200 : 245
+      height: 237,
     }
   })
 })
@@ -69,38 +74,38 @@ onMounted(() => {
   scrollIntoView()
 })
 
-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
-  }
+function scrollIntoView() {
+  requestAnimationFrame(() => {
+    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
+    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
     }
-    top += years.value[index] ? Number(years.value[index].height) : 0
-  }
-  scrollTop.value = 0
-  if (top > 0) {
-    await pause()
-    scrollTop.value = top + 45
-  }
+    scrollTop.value = 0
+    requestAnimationFrame(() => {
+      scrollTop.value = top
+    })
+  })
 }
 
-const yearScroll = (event: { detail: { scrollTop: number } }) => {
+const yearScroll = (e: Event) => {
   if (years.value.length <= 1) {
     return
   }
-  const scrollTop = Math.max(0, event.detail.scrollTop)
+  const scrollTop = Math.max(0, (e.target as Element).scrollTop)
   doSetSubtitle(scrollTop)
 }
 
@@ -112,7 +117,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) {
+    if (scrollTop < height + 45) {
       scrollIndex.value = index
       return
     }
@@ -121,15 +126,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.scss';
+@import './index';
 </style>

package/components/wd-drop-menu/index.scss

@@ -4,6 +4,7 @@
 .wot-theme-dark {
   @include b(drop-menu) {
     color: $-dark-color;
+
     @include e(list) {
       background-color: $-dark-background2;
     }
@@ -17,16 +18,17 @@
 }
 
 @include b(drop-menu) {
+  position: relative;
   box-sizing: border-box;
-  color: $-drop-menu-color;
   font-size: $-drop-menu-fs;
-  position: relative;
+  color: $-drop-menu-color;
 
   @include e(list) {
     display: flex;
     text-align: center;
     background-color: #fff;
   }
+
   @include e(item) {
     flex: 1;
     min-width: 0;
@@ -35,16 +37,24 @@
     text-align: center;
 
     @include when(active) {
-      font-weight: $-fw-medium;
+      // font-weight: $-fw-medium;
+
+      // .wd-drop-menu__item-title::after {
+      //   opacity: 1;
+      // }
+      color: $-color-theme;
 
-      .wd-drop-menu__item-title::after {
-        opacity: 1;
-      }
       :deep(.wd-drop-menu__arrow) {
+        // scale(0.6)
         transform: rotate(-180deg);
         transform-origin: center center;
       }
     }
+
+    @include when(checked) {
+      color: $-color-theme;
+    }
+
     @include when(disabled) {
       color: $-drop-menu-disabled-color;
     }
@@ -52,25 +62,25 @@
 
   @include e(item-title) {
     position: relative;
+    box-sizing: border-box;
     display: inline-flex;
-    align-items: center;
-    justify-content: center;
     max-width: 100%;
-    padding: 0 $-drop-menu-side-padding;
-    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    padding: 0 8rpx 0 14rpx;
 
     &::after {
       position: absolute;
-      content: '';
-      width: 19px;
-      height: $-drop-menu-line-height;
       bottom: 6px;
       left: 50%;
-      transform: translate(-50%, 0);
+      width: 19px;
+      height: $-drop-menu-line-height;
+      content: '';
       background: $-drop-menu-line-color;
       border-radius: $-drop-menu-line-height;
-      transition: opacity .15s;
       opacity: 0;
+      transition: opacity 0.15s;
+      transform: translate(-50%, 0);
     }
   }
 
@@ -79,8 +89,26 @@
     @include lineEllipsis;
   }
 
+  @include e(item-title-dot) {
+    height: 24rpx;
+    width: 24rpx;
+    border-radius: 50%;
+    background-color: $-color-theme;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 4rpx;
+    font-size: 14rpx;
+    line-height: 24rpx;
+  }
+
   @include edeep(arrow) {
+    // position: absolute;
+    // top: 0;
+    // right: -4px;
     font-size: $-drop-menu-arrow-fs;
-    margin-left: 2px;
+    transition: transform 0.3s;
+    // transform: scale(0.6);
   }
-}
+}

package/components/wd-drop-menu/types.ts

@@ -1,7 +1,7 @@
 import { type ExtractPropTypes, type InjectionKey, type Ref } from 'vue'
 import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
 
-export type DropDirection = 'up' | 'down'
+export type DropDirction = 'up' | 'down'
 
 export type DropMenuProvide = {
   props: Partial<DropMenuProps>
@@ -20,7 +20,7 @@ export const dropMenuProps = {
   /**
    * 菜单展开方向，可选值为up 或 down
    */
-  direction: makeStringProp<DropDirection>('down'),
+  direction: makeStringProp<DropDirction>('down'),
   /**
    * 是否展示蒙层
    */
@@ -32,7 +32,7 @@ export const dropMenuProps = {
   /**
    * 菜单展开收起动画时间，单位 ms
    */
-  duration: makeNumberProp(200)
+  duration: makeNumberProp(200),
 }
 
 export type DropMenuProps = ExtractPropTypes<typeof dropMenuProps>