@tplc/wot 1.0.12 → 1.0.14

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-checkbox/index.scss

@@ -1,5 +1,5 @@
-@import "./../common/abstracts/_mixin.scss";
-@import "./../common/abstracts/variable.scss";
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
 
 .wot-theme-dark {
   @include b(checkbox) {
@@ -38,7 +38,6 @@
       }
 
       @include when(button) {
-
         .wd-checkbox__label {
           border-color: #c8c9cc;
           background: #3a3a3c;
@@ -66,7 +65,6 @@
         }
       }
     }
-
   }
 }
 
@@ -86,7 +84,7 @@
     display: inline-block;
     width: $-checkbox-size;
     height: $-checkbox-size;
-    border: 2px solid $-checkbox-border-color;
+    border: 1px solid $-checkbox-border-color;
     border-radius: 50%;
     color: $-checkbox-check-color;
     background: $-checkbox-bg;
@@ -181,11 +179,13 @@
       height: $-checkbox-button-height;
       font-size: $-checkbox-button-font-size;
       margin-left: 0;
-      padding: 5px 15px;
+      padding: 4rpx 12rpx;
       border: 1px solid $-checkbox-button-border;
       background-color: $-checkbox-button-bg;
       border-radius: $-checkbox-button-radius;
-      transition: color 0.2s, border 0.2s;
+      transition:
+        color 0.2s,
+        border 0.2s;
       box-sizing: border-box;
     }
 
@@ -265,7 +265,7 @@
     }
 
     &:last-child::after {
-      content: "";
+      content: '';
       display: table;
       clear: both;
     }
@@ -282,4 +282,4 @@
       font-size: $-checkbox-large-label-fs;
     }
   }
-}
+}

package/components/wd-checkbox/wd-checkbox.vue

@@ -19,10 +19,18 @@
     <!--shape为button时只保留wd-checkbox__label-->
     <view
       :class="`wd-checkbox__label ${customLabelClass}`"
-      :style="isChecked && innerShape === 'button' && !innerDisabled && innerCheckedColor ? 'color:' + innerCheckedColor : ''"
+      :style="
+        isChecked && innerShape === 'button' && !innerDisabled && innerCheckedColor
+          ? 'color:' + innerCheckedColor
+          : ''
+      "
     >
       <!--button选中时展示的icon-->
-      <wd-icon v-if="innerShape === 'button' && isChecked" custom-class="wd-checkbox__btn-check" name="check-bold" />
+      <wd-icon
+        v-if="innerShape === 'button' && isChecked"
+        custom-class="wd-checkbox__btn-check"
+        name="check-bold"
+      />
       <!--文案-->
       <view class="wd-checkbox__txt" :style="maxWidth ? 'max-width:' + maxWidth : ''">
         <slot></slot>
@@ -37,8 +45,8 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
@@ -54,7 +62,7 @@ const props = defineProps(checkboxProps)
 const emit = defineEmits(['change', 'update:modelValue'])
 
 defineExpose<CheckboxExpose>({
-  toggle
+  toggle,
 })
 
 const { parent: checkboxGroup, index } = useParent(CHECKBOX_GROUP_KEY)
@@ -84,15 +92,16 @@ watch(
     if (checkboxGroup) {
       checkName()
     }
-  }
+  },
 )
 
 watch(
   () => props.shape,
   (newValue) => {
     const type = ['circle', 'square', 'button']
-    if (isDef(newValue) && type.indexOf(newValue) === -1) console.error(`shape must be one of ${type.toString()}`)
-  }
+    if (isDef(newValue) && type.indexOf(newValue) === -1)
+      console.error(`shape must be one of ${type.toString()}`)
+  },
 )
 
 const innerShape = computed(() => {
@@ -159,14 +168,14 @@ function toggle() {
   // 复选框单独使用时点击反选，并且在checkbox上触发change事件
   if (checkboxGroup) {
     emit('change', {
-      value: !isChecked.value
+      value: !isChecked.value,
     })
     checkboxGroup.changeSelectState(props.modelValue)
   } else {
     const newVal = props.modelValue === props.trueValue ? props.falseValue : props.trueValue
     emit('update:modelValue', newVal)
     emit('change', {
-      value: newVal
+      value: newVal,
     })
   }
 }

package/components/wd-datetime-picker/types.ts

@@ -1,6 +1,17 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
-import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
-import type { DateTimeType, DatetimePickerViewFilter, DatetimePickerViewFormatter } from '../wd-datetime-picker-view/types'
+import {
+  baseProps,
+  makeArrayProp,
+  makeBooleanProp,
+  makeNumberProp,
+  makeRequiredProp,
+  makeStringProp,
+} from '../common/props'
+import type {
+  DateTimeType,
+  DatetimePickerViewFilter,
+  DatetimePickerViewFormatter,
+} from '../wd-datetime-picker-view/types'
 import type { FormItemRule } from '../wd-form/types'
 
 const now = new Date()
@@ -92,7 +103,9 @@ export const datetimePickerProps = {
   /**
    * 选中项，当 type 为 time 时，类型为字符串；当 type 为 Array 时，类型为范围选择；否则为 时间戳
    */
-  modelValue: makeRequiredProp([String, Number, Array] as PropType<string | number | Array<string | number>>),
+  modelValue: makeRequiredProp([String, Number, Array] as PropType<
+    string | number | Array<string | number>
+  >),
   /**
    * 选择器类型，可选值为：date / year-month / time
    */
@@ -200,7 +213,7 @@ export const datetimePickerProps = {
   /**
    * 必填标记位置，可选值：before、after
    */
-  markerSide: makeStringProp<'before' | 'after'>('before')
+  markerSide: makeStringProp<'before' | 'after'>('before'),
 }
 
 export type DatetimePickerDisplayFormat = (items: Record<string, any>[]) => string
@@ -208,7 +221,7 @@ export type DatetimePickerDisplayFormat = (items: Record<string, any>[]) => stri
 export type DatetimePickerBeforeConfirm = (
   value: number | string | (number | string)[],
   resolve: (isPass: boolean) => void,
-  picker: DatetimePickerInstance
+  picker: DatetimePickerInstance,
 ) => void
 
 export type DatetimePickerDisplayFormatTabLabel = (items: Record<string, any>[]) => string
@@ -232,4 +245,7 @@ export type DatetimePickerExpose = {
 
 export type DatetimePickerProps = ExtractPropTypes<typeof datetimePickerProps>
 
-export type DatetimePickerInstance = ComponentPublicInstance<DatetimePickerProps, DatetimePickerExpose>
+export type DatetimePickerInstance = ComponentPublicInstance<
+  DatetimePickerProps,
+  DatetimePickerExpose
+>