@tplc/wot 0.0.1

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

@@ -0,0 +1,220 @@
+<template>
+  <wd-toast selector="wd-year" />
+
+  <view class="wd-year year">
+    <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.type ? itemClass(item.type, value!, type) : ''}`"
+        @click="handleDateClick(index)"
+      >
+        <view class="wd-year__month-top">{{ item.topInfo }}</view>
+        <view class="wd-year__month-text">{{ getMonthLabel(item.date) }}</view>
+        <view class="wd-year__month-bottom">{{ item.bottomInfo }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import { deepClone, isArray, isFunction } from '../../common/util'
+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 { yearProps } from './types'
+import type { CalendarDayItem, CalendarDayType, CalendarType } from '../types'
+
+const props = defineProps(yearProps)
+const emit = defineEmits(['change'])
+
+const toast = useToast('wd-year')
+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 yearTitle = computed(() => {
+  return (date: number) => {
+    return formatYearTitle(date)
+  }
+})
+
+watch(
+  [
+    () => props.type,
+    () => props.date,
+    () => props.value,
+    () => props.minDate,
+    () => props.maxDate,
+    () => props.formatter,
+  ],
+  () => {
+    setMonths()
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+)
+
+function getMonthLabel(date: number) {
+  return dayjs(date).format(translate('month', date))
+}
+
+function setMonths() {
+  const monthList: CalendarDayItem[] = []
+  const date = new Date(props.date)
+  const year = date.getFullYear()
+  const value = props.value
+
+  if (props.type.indexOf('range') > -1 && value && !isArray(value)) {
+    console.error('[wot-design] value should be array when type is range')
+    return
+  }
+
+  for (let month = 0; month < 12; month++) {
+    const date = new Date(year, month, 1).getTime()
+    let type: CalendarDayType = getMonthType(date)
+    if (!type && compareMonth(date, Date.now()) === 0) {
+      type = 'current'
+    }
+    const monthObj = getFormatterDate(date, month, type)
+    monthList.push(monthObj)
+  }
+
+  months.value = deepClone(monthList)
+}
+function getMonthType(date: number) {
+  if (props.type === 'monthrange' && isArray(props.value)) {
+    const [startDate, endDate] = props.value || []
+
+    if (startDate && compareMonth(date, startDate) === 0) {
+      if (endDate && compareMonth(startDate, endDate) === 0) {
+        return 'same'
+      }
+      return 'start'
+    } else if (endDate && compareMonth(date, endDate) === 0) {
+      return 'end'
+    } else if (
+      startDate &&
+      endDate &&
+      compareMonth(date, startDate) === 1 &&
+      compareMonth(date, endDate) === -1
+    ) {
+      return 'middle'
+    } else {
+      return ''
+    }
+  } else {
+    if (props.value && compareMonth(date, props.value as number) === 0) {
+      return 'selected'
+    } else {
+      return ''
+    }
+  }
+}
+function handleDateClick(index: number) {
+  const date = months.value[index]
+
+  if (date.disabled) return
+
+  switch (props.type) {
+    case 'month':
+      handleMonthChange(date)
+      break
+    case 'monthrange':
+      handleMonthRangeChange(date)
+      break
+    default:
+      handleMonthChange(date)
+  }
+}
+function getDate(date: number) {
+  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),
+    })
+  }
+}
+function handleMonthRangeChange(date: CalendarDayItem) {
+  let value: (number | null)[] = []
+  const [startDate, endDate] = isArray(props.value) ? props.value || [] : []
+  const compare = compareMonth(date.date, startDate!)
+
+  // 禁止选择同个日期
+  if (!props.allowSameDay && !endDate && compare === 0) return
+
+  if (startDate && !endDate && compare > -1) {
+    if (props.maxRange && getMonthOffset(date.date, startDate) > props.maxRange) {
+      const maxEndDate = getMonthByOffset(startDate, props.maxRange - 1)
+      value = [startDate, getDate(maxEndDate)]
+      toast.show({
+        msg: props.rangePrompt || translate('rangePromptMonth', props.maxRange),
+      })
+    } else {
+      value = [startDate, getDate(date.date)]
+    }
+  } else {
+    value = [getDate(date.date), null]
+  }
+  emit('change', {
+    value,
+  })
+}
+
+function getFormatterDate(date: number, month: number, type?: CalendarDayType) {
+  let monthObj: CalendarDayItem = {
+    date,
+    text: month + 1,
+    topInfo: '',
+    bottomInfo: '',
+    type,
+    disabled: compareMonth(date, props.minDate) === -1 || compareMonth(date, props.maxDate) === 1,
+  }
+  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',
+      )
+    }
+  }
+
+  return monthObj
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

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

@@ -0,0 +1,24 @@
+@import '../../common/abstracts/variable';
+@import '../../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(year-panel) {
+    @include e(title) {
+      color: $-dark-color;
+      box-shadow: 0px 4px 8px 0 rgba(255, 255, 255, 0.02);
+    }
+  }
+}
+
+@include b(year-panel) {
+  padding: $-calendar-panel-padding;
+  font-size: $-calendar-fs;
+
+  @include e(title) {
+    padding: 5px 0;
+    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

@@ -0,0 +1,38 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { makeBooleanProp, makeRequiredProp } from '../../common/props'
+import type { CalendarFormatter, CalendarType } from '../types'
+
+/**
+ * 月份信息
+ */
+export interface YearInfo {
+  date: number
+  height: number
+}
+
+export const yearPanelProps = {
+  type: makeRequiredProp(String as PropType<CalendarType>),
+  value: makeRequiredProp([Number, Array] as PropType<number | (number | null)[] | null>),
+  minDate: makeRequiredProp(Number),
+  maxDate: makeRequiredProp(Number),
+  formatter: Function as PropType<CalendarFormatter>,
+  maxRange: Number,
+  rangePrompt: String,
+  allowSameDay: makeBooleanProp(false),
+  showPanelTitle: makeBooleanProp(false),
+  defaultTime: {
+    type: [Array] as PropType<Array<number[]>>,
+  },
+  panelHeight: makeRequiredProp(Number),
+}
+
+export type YearPanelProps = ExtractPropTypes<typeof yearPanelProps>
+
+export type YearPanelExpose = {
+  /**
+   * 使当前日期或者选中日期滚动到可视区域
+   */
+  scrollIntoView: () => void
+}
+
+export type YearPanelInstance = ComponentPublicInstance<YearPanelProps, YearPanelExpose>

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

@@ -0,0 +1,140 @@
+<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"
+    >
+      <view v-for="(item, index) in years" :key="index" :id="`year${index}`">
+        <year
+          :type="type"
+          :date="item.date"
+          :value="value"
+          :min-date="minDate"
+          :max-date="maxDate"
+          :max-range="maxRange"
+          :formatter="formatter"
+          :range-prompt="rangePrompt"
+          :allow-same-day="allowSameDay"
+          :default-time="defaultTime"
+          @change="handleDateChange"
+        />
+      </view>
+    </scroll-view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    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 Year from '../year/year.vue'
+import { yearPanelProps, type YearInfo, type YearPanelExpose } from './types'
+
+const props = defineProps(yearPanelProps)
+const emit = defineEmits(['change'])
+
+const scrollTop = ref<number>(0) // 滚动位置
+const scrollIndex = ref<number>(0) // 当前显示的年份索引
+
+// 滚动区域的高度
+const scrollHeight = computed(() => {
+  const scrollHeight: number = (props.panelHeight || 378) + (props.showPanelTitle ? 26 : 16)
+  return scrollHeight
+})
+
+// 年份信息
+const years = computed<YearInfo[]>(() => {
+  return getYears(props.minDate, props.maxDate).map((year) => {
+    return {
+      date: year,
+      height: 237,
+    }
+  })
+})
+
+// 标题
+const title = computed(() => {
+  return formatYearTitle(years.value[scrollIndex.value].date)
+})
+
+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
+    }
+
+    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
+    }
+    scrollTop.value = 0
+    requestAnimationFrame(() => {
+      scrollTop.value = top
+    })
+  })
+}
+
+const yearScroll = (e: Event) => {
+  if (years.value.length <= 1) {
+    return
+  }
+  const scrollTop = Math.max(0, (e.target as Element).scrollTop)
+  doSetSubtitle(scrollTop)
+}
+
+/**
+ * 设置小标题
+ * scrollTop 滚动条位置
+ */
+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) {
+      scrollIndex.value = index
+      return
+    }
+  }
+}
+
+function handleDateChange({ value }: { value: number[] }) {
+  emit('change', {
+    value,
+  })
+}
+
+defineExpose<YearPanelExpose>({
+  scrollIntoView,
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-card/index.scss

@@ -0,0 +1,70 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/_mixin';
+.wot-theme-dark {
+  @include b(card) {
+    background-color: $-dark-background2;
+
+    @include when(rectangle) {
+      .wd-card__content {
+        @include halfPixelBorder('top', 0, $-dark-border-color);
+      }
+      .wd-card__footer {
+        @include halfPixelBorder('top', 0, $-dark-border-color);
+      }
+    }
+
+    @include e(title-content) {
+      color: $-dark-color;
+    }
+    @include e(content) {
+      color: $-dark-color3;
+    }
+  }
+}
+
+@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;
+  border-radius: $-card-radius;
+  box-shadow: $-card-shadow-color;
+
+  @include when(rectangle) {
+    margin-right: 0;
+    margin-left: 0;
+    border-radius: 0;
+    box-shadow: none;
+
+    .wd-card__title-content {
+      font-size: $-card-fs;
+    }
+    .wd-card__content {
+      position: relative;
+      padding: $-card-rectangle-content-padding;
+
+      @include halfPixelBorder('top', 0, $-card-content-border-color);
+    }
+    .wd-card__footer {
+      position: relative;
+      padding: $-card-rectangle-footer-padding;
+
+      @include halfPixelBorder('top', 0, $-card-content-border-color);
+    }
+  }
+  @include e(title-content) {
+    padding: 16px 0;
+    font-size: $-card-title-fs;
+    color: $-card-title-color;
+  }
+  @include e(content) {
+    line-height: $-card-content-line-height;
+    color: $-card-content-color;
+  }
+  @include e(footer) {
+    padding: $-card-footer-padding;
+    text-align: right;
+  }
+}

package/components/wd-card/types.ts

@@ -0,0 +1,30 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeStringProp } from '../common/props'
+
+export type CardType = 'rectangle'
+
+export const cardProps = {
+  ...baseProps,
+  /**
+   * 卡片类型
+   */
+  type: String as PropType<CardType>,
+  /**
+   * 卡片标题
+   */
+  title: String,
+  /**
+   * 标题自定义样式
+   */
+  customTitleClass: makeStringProp(''),
+  /**
+   * 内容自定义样式
+   */
+  customContentClass: makeStringProp(''),
+  /**
+   * 底部自定义样式
+   */
+  customFooterClass: makeStringProp(''),
+}
+
+export type CardProps = ExtractPropTypes<typeof cardProps>

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

@@ -0,0 +1,40 @@
+<template>
+  <view
+    :class="['wd-card', type == 'rectangle' ? 'is-rectangle' : '', customClass]"
+    :style="customStyle"
+  >
+    <view :class="['wd-card__title-content', customTitleClass]">
+      <view class="wd-card__title">
+        <text v-if="title">{{ title }}</text>
+        <slot v-else name="title"></slot>
+      </view>
+    </view>
+    <view :class="`wd-card__content ${customContentClass}`">
+      <slot></slot>
+    </view>
+    <view :class="`wd-card__footer ${customFooterClass}`">
+      <slot name="footer"></slot>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-card',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { cardProps } from './types'
+
+defineProps(cardProps)
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>