@wot-ui/ui 1.0.0 → 2.0.0-alpha.3

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

@@ -0,0 +1,339 @@
+<template>
+  <view :class="`wd-calendar ${customClass}`" :style="customStyle">
+    <wd-action-sheet
+      v-model="pickerShow"
+      :duration="duration"
+      :close-on-click-modal="closeOnClickModal"
+      :safe-area-inset-bottom="safeAreaInsetBottom"
+      :z-index="zIndex"
+      :root-portal="rootPortal"
+      :title="title || translate('title')"
+      custom-class="wd-calendar__popup"
+      @close="close"
+      @after-enter="handleOpened"
+      @after-leave="handleClosed"
+    >
+      <view class="wd-calendar__header">
+        <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')" />
+            <wd-tab :title="translate('week')" :name="translate('week')" />
+            <wd-tab :title="translate('month')" :name="translate('month')" />
+          </wd-tabs>
+        </view>
+        <view v-if="shortcuts.length > 0" class="wd-calendar__shortcuts">
+          <wd-tag
+            v-for="(item, index) in shortcuts"
+            :key="index"
+            :custom-class="`wd-calendar__tag ${index === shortcuts.length - 1 ? 'is-last-tag' : ''}`"
+            :type="activeShortcutIndex === index ? 'primary' : 'default'"
+            :variant="activeShortcutIndex === index ? 'dark' : 'light'"
+            @click="handleShortcutClick(index)"
+          >
+            {{ item.text }}
+          </wd-tag>
+        </view>
+      </view>
+      <view
+        v-if="inited"
+        :class="`wd-calendar__view  ${currentType.indexOf('range') > -1 ? 'is-range' : ''} ${showConfirm ? 'is-show-confirm' : ''}`"
+      >
+        <view v-if="isRange(currentType)" class="wd-calendar__range">
+          <view :class="`wd-calendar__range-item ${!calendarValue || !isArray(calendarValue) || !calendarValue[0] ? 'is-placeholder' : ''}`">
+            {{ rangeLabel[0] }}
+          </view>
+          <view class="wd-calendar__range-separator"></view>
+          <view :class="`wd-calendar__range-item ${!calendarValue || !isArray(calendarValue) || !calendarValue[1] ? 'is-placeholder' : ''}`">
+            {{ rangeLabel[1] }}
+          </view>
+        </view>
+        <wd-calendar-view
+          ref="calendarViewRef"
+          v-model="calendarValue"
+          :type="currentType"
+          :min-date="minDate"
+          :max-date="maxDate"
+          :first-day-of-week="firstDayOfWeek"
+          :formatter="formatter"
+          :panel-height="panelHeight"
+          :max-range="maxRange"
+          :range-prompt="rangePrompt"
+          :allow-same-day="allowSameDay"
+          :default-time="defaultTime"
+          :time-filter="timeFilter"
+          :hide-second="hideSecond"
+          :show-panel-title="showPanelTitle"
+          :immediate-change="immediateChange"
+          :switch-mode="switchMode"
+          @change="handleChange"
+        />
+      </view>
+      <view v-if="showConfirm" class="wd-calendar__confirm">
+        <slot name="confirm-left"></slot>
+        <view class="wd-calendar__confirm-btn-wrapper">
+          <wd-button size="large" block :disabled="confirmBtnDisabled" @click="handleConfirm">{{ confirmText || translate('confirm') }}</wd-button>
+        </view>
+        <slot name="confirm-right"></slot>
+      </view>
+    </wd-action-sheet>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-calendar',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { ref, computed, watch } from 'vue'
+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 wdTabs from '../wd-tabs/wd-tabs.vue'
+import wdTab from '../wd-tab/wd-tab.vue'
+import wdTag from '../wd-tag/wd-tag.vue'
+import { callInterceptor } from '../../common/interceptor'
+import { formatDate } from '../../common/formatDate'
+import { deepClone, isArray, isEqual, padZero, pause } from '../../common/util'
+import { getWeekNumber, isRange } from '../wd-calendar-view/utils'
+import { useTranslate } from '../../composables/useTranslate'
+import { calendarProps, type CalendarExpose } from './types'
+import type { CalendarType } from '../wd-calendar-view/types'
+
+const props = defineProps(calendarProps)
+const emit = defineEmits(['cancel', 'change', 'update:modelValue', 'confirm', 'open', 'update:visible'])
+const { translate } = useTranslate('calendar')
+
+const pickerShow = ref<boolean>(false)
+const calendarValue = ref<null | number | number[]>(null)
+const lastCalendarValue = ref<null | number | number[]>(null)
+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 calendarViewRef = ref()
+const calendarTabs = ref()
+const isConfirming = ref<boolean>(false)
+/** 当前激活的快捷选项索引，-1 表示无激活项 */
+const activeShortcutIndex = ref<number>(-1)
+
+const formatRange = (value: number, rangeType: 'start' | 'end', type: CalendarType) => {
+  switch (type) {
+    case 'daterange':
+      if (!value) {
+        return rangeType === 'end' ? translate('endTime') : translate('startTime')
+      }
+      return formatDate(value, translate('dateFormat'))
+    case 'datetimerange':
+      if (!value) {
+        return rangeType === 'end' ? translate('endTime') : translate('startTime')
+      }
+      return formatDate(value, translate('timeFormat'))
+    case 'weekrange': {
+      if (!value) {
+        return rangeType === 'end' ? translate('endWeek') : translate('startWeek')
+      }
+      const date = new Date(value)
+      const year = date.getFullYear()
+      const week = getWeekNumber(value)
+      return translate('weekFormat', year, padZero(week))
+    }
+    case 'monthrange':
+      if (!value) {
+        return rangeType === 'end' ? translate('endMonth') : translate('startMonth')
+      }
+      return formatDate(value, translate('monthFormat'))
+  }
+}
+
+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)
+  })
+})
+
+watch(
+  () => props.modelValue,
+  (val, oldVal) => {
+    if (isEqual(val, oldVal)) return
+    calendarValue.value = deepClone(val)
+    confirmBtnDisabled.value = getConfirmBtnStatus(val)
+  },
+  {
+    immediate: true
+  }
+)
+
+watch(
+  () => props.type,
+  (newValue) => {
+    if (props.showTypeSwitch) {
+      const tabs = ['date', 'week', 'month']
+      const rangeTabs = ['daterange', 'weekrange', 'monthrange']
+
+      const index = newValue.indexOf('range') > -1 ? rangeTabs.indexOf(newValue) || 0 : tabs.indexOf(newValue)
+      currentTab.value = index
+    }
+    currentType.value = deepClone(newValue)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.visible,
+  (val) => {
+    pickerShow.value = val
+  },
+  {
+    immediate: true
+  }
+)
+
+function handleOpened() {
+  if (props.showTypeSwitch) {
+    calendarTabs.value && calendarTabs.value.scrollIntoView()
+    calendarTabs.value && calendarTabs.value.updateLineStyle(false)
+  }
+}
+
+function handleClosed() {
+  if (isConfirming.value) {
+    isConfirming.value = false
+  } else {
+    calendarValue.value = deepClone(lastCalendarValue.value)
+    currentTab.value = lastTab.value
+    currentType.value = lastCurrentType.value || 'date'
+    confirmBtnDisabled.value = getConfirmBtnStatus(lastCalendarValue.value)
+  }
+}
+
+watch(pickerShow, async (val) => {
+  emit('update:visible', val)
+  if (val) {
+    inited.value = true
+    lastCalendarValue.value = deepClone(calendarValue.value)
+    lastTab.value = currentTab.value
+    lastCurrentType.value = currentType.value
+
+    await pause()
+    scrollIntoView()
+    emit('open')
+  } else {
+    if (!isConfirming.value) {
+      emit('cancel')
+    }
+  }
+})
+
+function scrollIntoView() {
+  calendarViewRef.value && calendarViewRef.value.scrollIntoView()
+}
+
+// 对外暴露方法
+function open() {
+  pickerShow.value = true
+}
+
+// 对外暴露方法
+function close() {
+  pickerShow.value = false
+}
+
+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
+}
+
+function getConfirmBtnStatus(value: number | number[] | null) {
+  let confirmBtnDisabled = false
+  // 范围选择未选择满，或者多日期选择未选择日期，按钮置灰不可点击
+  if (
+    (props.type.indexOf('range') > -1 && (!isArray(value) || !value[0] || !value[1] || !value)) ||
+    (props.type === 'dates' && (!isArray(value) || value.length === 0 || !value)) ||
+    !value
+  ) {
+    confirmBtnDisabled = true
+  }
+
+  return confirmBtnDisabled
+}
+
+function handleChange({ value }: { value: number | number[] | null }) {
+  calendarValue.value = deepClone(value)
+  confirmBtnDisabled.value = getConfirmBtnStatus(value)
+  // 用户手动切换日期时重置快捷选项激活状态
+  activeShortcutIndex.value = -1
+
+  emit('change', {
+    value
+  })
+
+  if (!props.showConfirm && !confirmBtnDisabled.value) {
+    handleConfirm()
+  }
+}
+
+function handleConfirm() {
+  callInterceptor(props.beforeConfirm, {
+    args: [calendarValue.value],
+    done: onConfirm
+  })
+}
+
+function onConfirm() {
+  isConfirming.value = true
+  pickerShow.value = false
+  lastCurrentType.value = currentType.value
+  emit('update:modelValue', calendarValue.value)
+  emit('confirm', {
+    value: calendarValue.value,
+    type: currentType.value
+  })
+}
+
+function handleShortcutClick(index: number) {
+  // 设置激活的快捷选项
+  activeShortcutIndex.value = index
+
+  if (props.onShortcutsClick && typeof props.onShortcutsClick === 'function') {
+    calendarValue.value = deepClone(
+      props.onShortcutsClick({
+        item: props.shortcuts[index],
+        index
+      })
+    )
+    confirmBtnDisabled.value = getConfirmBtnStatus(calendarValue.value)
+  }
+
+  if (!props.showConfirm) {
+    handleConfirm()
+  }
+}
+
+defineExpose<CalendarExpose>({
+  close,
+  open
+})
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

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

@@ -0,0 +1,41 @@
+@use '../../styles/variable.scss' as *;
+
+$calendar-view-panel-title-font-size: var(--wot-calendar-view-panel-title-font-size, $typography-body-size-main) !default; // 面板标题字号
+$calendar-view-panel-title-line-height: var(--wot-calendar-view-panel-title-line-height, $typography-body-line--height-size-main) !default; // 面板标题行高
+$calendar-view-panel-title-color: var(--wot-calendar-view-panel-title-color, $text-main) !default; // 面板标题文字颜色
+$calendar-view-panel-title-padding: var(--wot-calendar-view-panel-title-padding, $padding-extra-tight $padding-loose) !default; // 面板标题内边距
+$calendar-view-panel-title-font-weight: var(--wot-calendar-view-panel-title-font-weight, $font-weight-medium) !default; // 面板标题字重
+$calendar-view-panel-title-margin: var(--wot-calendar-view-panel-title-margin, $spacing-super-tight $spacing-zero) !default; // 面板标题外边距
+$calendar-view-weeks-padding: var(--wot-calendar-view-weeks-padding, $padding-tight $spacing-loose) !default; // 星期栏内边距
+$calendar-view-week-color: var(--wot-calendar-view-week-color, $text-secondary) !default; // 星期文字颜色
+$calendar-view-week-font-size: var(--wot-calendar-view-week-font-size, $typography-body-size-main) !default; // 星期文字字号
+$calendar-view-week-line-height: var(--wot-calendar-view-week-line-height, $typography-body-line--height-size-main) !default; // 星期文字行高
+$calendar-view-day-font-size: var(--wot-calendar-view-day-font-size, $typography-body-size-extra-large) !default; // 日期单元字号
+$calendar-view-day-color: var(--wot-calendar-view-day-color, $text-main) !default; // 日期单元文字颜色
+$calendar-view-day-font-weight: var(--wot-calendar-view-day-font-weight, $font-weight-medium) !default; // 日期单元字重
+$calendar-view-day-height: var(--wot-calendar-view-day-height, $n-60) !default; // 日期单元高度
+$calendar-view-month-width: var(--wot-calendar-view-month-width, $n-60) !default; // 月份单元宽度
+$calendar-view-month-height: var(--wot-calendar-view-month-height, $n-60) !default; // 月份单元高度
+$calendar-view-month-font-weight: var(--wot-calendar-view-month-font-weight, $font-weight-medium) !default; // 月份单元字重
+$calendar-view-color-active: var(--wot-calendar-view-color-active, $primary-6) !default; // 激活态颜色
+$calendar-view-color-selected: var(--wot-calendar-view-color-selected, $text-white) !default; // 选中态文字颜色
+$calendar-view-color-disabled: var(--wot-calendar-view-color-disabled, $text-disabled) !default; // 禁用态文字颜色
+$calendar-view-range-bg: var(--wot-calendar-view-range-bg, $primary-2) !default; // 区间态背景色
+$calendar-view-range-color: var(--wot-calendar-view-range-color, $text-main) !default; // 区间态文字颜色
+$calendar-view-border-radius-active: var(--wot-calendar-view-border-radius-active, $radius-main) !default; // 激活态圆角
+$calendar-view-info-font-size: var(--wot-calendar-view-info-font-size, $typography-label-size-extra-small) !default; // 顶部/底部辅助信息字号
+$calendar-view-info-line-height: var(--wot-calendar-view-info-line-height, $typography-label-line--height-size-extra-small) !default; // 顶部/底部辅助信息行高
+$calendar-view-info-position: var(--wot-calendar-view-info-position, $spacing-extra-tight) !default; // 顶部/底部辅助信息偏移位置
+$calendar-view-item-margin-bottom: var(--wot-calendar-view-item-margin-bottom, $spacing-super-tight) !default; // 日期/月份单元底部间距
+$calendar-view-item-padding: var(--wot-calendar-view-item-padding, $padding-zero $spacing-loose) !default; // 日期/月份容器内边距
+$calendar-view-time-picker-font-size: var(--wot-calendar-view-time-picker-font-size, $typography-body-size-extra-large) !default; // 时间选择器字号
+$calendar-view-time-picker-color: var(--wot-calendar-view-time-picker-color, $text-main) !default; // 时间选择器文字颜色
+$calendar-view-time-picker-bg: var(--wot-calendar-view-time-picker-bg, $filled-content) !default; // 时间选择器背景色
+$calendar-view-time-label-height: var(--wot-calendar-view-time-label-height, $n-44) !default; // 时间标签高度
+$calendar-view-time-label-border: var(--wot-calendar-view-time-label-border, $stroke-main solid $border-main) !default; // 时间标签分隔边框
+$calendar-view-controls-padding: var(--wot-calendar-view-controls-padding, $padding-loose) !default; // 面板控制栏内边距
+$calendar-view-control-icon-color: var(--wot-calendar-view-control-icon-color, $icon-secondary) !default; // 控制栏图标颜色
+$calendar-view-control-icon-size: var(--wot-calendar-view-control-icon-size, $n-20) !default; // 控制栏图标尺寸
+$calendar-view-control-icon-spacing: var(--wot-calendar-view-control-icon-spacing, $spacing-extra-loose) !default; // 控制栏图标间距
+$calendar-view-control-color-disabled: var(--wot-calendar-view-control-color-disabled, $icon-disabled) !default; // 控制栏禁用图标颜色
+$calendar-view-time-box-shadow: var(--wot-calendar-view-time-box-shadow, $n-0 (-$n-4) $n-8 $n-0 $opac-1_02) !default; // 时间选择区域阴影

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

@@ -0,0 +1,144 @@
+@use '../../../styles/mixin/mixin.scss' as *;
+@use '../index.scss' as *;
+
+@include b(month) {
+  @include e(title) {
+    font-size: $calendar-view-panel-title-font-size;
+    line-height: $calendar-view-panel-title-line-height;
+    color: $calendar-view-panel-title-color;
+    padding: $calendar-view-panel-title-padding;
+    font-weight: $calendar-view-panel-title-font-weight;
+    margin: $calendar-view-panel-title-margin;
+  }
+
+  @include e(days) {
+    display: flex;
+    flex-wrap: wrap;
+    font-size: $calendar-view-day-font-size;
+    color: $calendar-view-day-color;
+    padding: $calendar-view-item-padding;
+  }
+
+  @include e(day) {
+    position: relative;
+    width: calc(100% / 7);
+    height: $calendar-view-day-height;
+    line-height: $calendar-view-day-height;
+    font-weight: $calendar-view-day-font-weight;
+    margin-bottom: $calendar-view-item-margin-bottom;
+    text-align: center;
+
+    @include when(disabled) {
+      .wd-month__day-text {
+        color: $calendar-view-color-disabled;
+      }
+    }
+
+    @include when(current) {
+      color: $calendar-view-color-active;
+    }
+
+    @include when(selected, multiple-selected) {
+      .wd-month__day-container {
+        border-radius: $calendar-view-border-radius-active;
+        background: $calendar-view-color-active;
+        color: $calendar-view-color-selected;
+      }
+    }
+
+    @include when(middle) {
+      .wd-month__day-container {
+        background: $calendar-view-range-bg;
+        color: $calendar-view-range-color;
+      }
+    }
+    @include when(multiple-middle) {
+      .wd-month__day-container {
+        background: $calendar-view-color-active;
+        color: $calendar-view-color-selected;
+      }
+    }
+
+    @include when(start) {
+      &::after {
+        position: absolute;
+        content: '';
+        height: $calendar-view-day-height;
+        top: 0;
+        right: 0;
+        left: 50%;
+        background: $calendar-view-range-bg;
+      }
+
+      &.is-without-end::after {
+        display: none;
+      }
+
+      .wd-month__day-container {
+        background: $calendar-view-color-active;
+        color: $calendar-view-color-selected;
+        border-radius: $calendar-view-border-radius-active 0 0 $calendar-view-border-radius-active;
+      }
+    }
+
+    @include when(end) {
+      &::after {
+        position: absolute;
+        content: '';
+        height: $calendar-view-day-height;
+        top: 0;
+        left: 0;
+        right: 50%;
+        background: $calendar-view-range-bg;
+        z-index: 1;
+      }
+
+      .wd-month__day-container {
+        background: $calendar-view-color-active;
+        color: $calendar-view-color-selected;
+        border-radius: 0 $calendar-view-border-radius-active $calendar-view-border-radius-active 0;
+      }
+    }
+
+    @include when(same) {
+      .wd-month__day-container {
+        background: $calendar-view-color-active;
+        color: $calendar-view-color-selected;
+        border-radius: $calendar-view-border-radius-active;
+      }
+    }
+
+    @include when(last-row){
+      margin-bottom: 0;
+    }
+  }
+
+  @include e(day-container) {
+    position: relative;
+    z-index: 2;
+  }
+
+  @include e(day-text) {
+    font-weight: $calendar-view-day-font-weight;
+  }
+
+  @include e(day-top) {
+    position: absolute;
+    top: $calendar-view-info-position;
+    left: 0;
+    right: 0;
+    line-height: $calendar-view-info-line-height;
+    font-size: $calendar-view-info-font-size;
+    text-align: center;
+  }
+
+  @include e(day-bottom) {
+    position: absolute;
+    bottom: $calendar-view-info-position;
+    left: 0;
+    right: 0;
+    line-height: $calendar-view-info-line-height;
+    font-size: $calendar-view-info-font-size;
+    text-align: center;
+  }
+}