@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/calendar/calendar.vue

@@ -0,0 +1,454 @@
+<template>
+  <view>
+    <t-popup
+      v-if="usePopup"
+      :visible="visible"
+      :using-custom-navbar="usingCustomNavbar"
+      :custom-navbar-height="customNavbarHeight"
+      placement="bottom"
+      @visible-change="onVisibleChange"
+    >
+      <CalendarTemplate
+        :class-prefix="classPrefix"
+        :use-popup="usePopup"
+        :switch-mode="switchMode"
+        :t-class="tClass"
+        :custom-style="tools._style([customStyle])"
+        :title="title"
+        :real-local-text="realLocalText"
+        :months="months"
+        :current-month="currentMonth"
+        :action-buttons="actionButtons"
+        :days="days"
+        :scroll-into-view="scrollIntoView"
+        :first-day-of-week="firstDayOfWeek"
+        :inner-confirm-btn="innerConfirmBtn"
+        @scroll="onScroll"
+        @close="handleClose"
+        @select="handleSelect"
+        @clickButton="onTplButtonTap"
+        @handleSwitchModeChange="handleSwitchModeChange"
+      >
+        <template #confirm-btn>
+          <slot name="confirm-btn" />
+        </template>
+        <template #title>
+          <slot name="title" />
+        </template>
+      </CalendarTemplate>
+    </t-popup>
+    <block v-else>
+      <CalendarTemplate
+        :class-prefix="classPrefix"
+        :use-popup="usePopup"
+        :switch-mode="switchMode"
+        :t-class="tClass"
+        :custom-style="tools._style([customStyle])"
+        :title="title"
+        :real-local-text="realLocalText"
+        :months="months"
+        :current-month="currentMonth"
+        :action-buttons="actionButtons"
+        :days="days"
+        :scroll-into-view="scrollIntoView"
+        :first-day-of-week="firstDayOfWeek"
+        :inner-confirm-btn="innerConfirmBtn"
+        @scroll="onScroll"
+        @close="handleClose"
+        @select="handleSelect"
+        @clickButton="onTplButtonTap"
+        @handleSwitchModeChange="handleSwitchModeChange"
+      >
+        <template #confirm-btn>
+          <slot name="confirm-btn" />
+        </template>
+        <template #title>
+          <slot name="title" />
+        </template>
+      </CalendarTemplate>
+    </block>
+  </view>
+</template>
+<script>
+import TPopup from '../popup/popup';
+import TButton from '../button/button';
+import TIcon from '../icon/icon';
+import CalendarTemplate from './template.vue';
+
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import { coalesce } from '../common/utils';
+
+import props from './props';
+import TCalendar from '../common/shared/calendar/index';
+import useCustomNavbar from '../mixins/using-custom-navbar';
+import { getPrevMonth, getPrevYear, getNextMonth, getNextYear } from './utils';
+import tools from '../common/utils.wxs';
+import {
+  getMonthTitle,
+  getDateLabel,
+  isDateSelected,
+} from './computed.js';
+
+
+const name = `${prefix}-calendar`;
+
+
+const defaultLocaleText = {
+  title: '请选择日期',
+  weekdays: ['日', '一', '二', '三', '四', '五', '六'],
+  monthTitle: '{year} 年 {month}',
+  months: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月'],
+  confirm: '确认',
+};
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'value',
+      event: 'confirm',
+    },
+    {
+      key: 'value',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+  ],
+  mixins: [useCustomNavbar],
+  components: {
+    TPopup,
+    TButton,
+    TIcon,
+    CalendarTemplate,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'update:visible',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      months: [],
+      scrollIntoView: '',
+      innerConfirmBtn: {},
+      realLocalText: {},
+      currentMonth: {},
+      actionButtons: {
+        preYearBtnDisable: false,
+        prevMonthBtnDisable: false,
+        nextMonthBtnDisable: false,
+        nextYearBtnDisable: false,
+      },
+      tools,
+
+      dataVisible: this.visible,
+      dataValue: coalesce(this.value, this.defaultValue),
+      days: [],
+    };
+  },
+  watch: {
+    type: {
+      handler(v) {
+        this.base.type = v;
+      },
+    },
+
+    allowSameDay(v) {
+      this.base.allowSameDay = v;
+    },
+
+    confirmBtn: {
+      handler(v) {
+        if (typeof v === 'string') {
+          this.innerConfirmBtn = v === 'slot' ? 'slot' : { content: v };
+        } else if (typeof v === 'object') {
+          this.innerConfirmBtn = v;
+        }
+      },
+      immediate: true,
+    },
+
+    firstDayOfWeek: 'onWatchMinMaxDate',
+    minDate: 'onWatchMinMaxDate',
+    maxDate: 'onWatchMinMaxDate',
+
+    value: {
+      handler(v) {
+        this.dataValue = v;
+      },
+      immediate: true,
+      deep: true,
+    },
+
+    visible: {
+      handler(v) {
+        this.dataVisible = v;
+      },
+      immediate: true,
+    },
+
+    dataValue: {
+      handler(v) {
+        this.base.value = v;
+        this.calcMonths();
+        this.updateCurrentMonth(Array.isArray(v) ? v[0] : v);
+      },
+      deep: true,
+    },
+
+    dataVisible: {
+      handler(v) {
+        if (v) {
+          this.onScrollIntoView();
+          this.base.value = this.dataValue;
+          this.calcMonths();
+        }
+      },
+      immediate: true,
+    },
+    format: {
+      handler(v) {
+        const { usePopup, dataVisible: visible } = this;
+
+        if (this.base) {
+          this.base.format = v;
+        }
+
+        if (!usePopup || visible) {
+          this.calcMonths();
+        }
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    const values = Object.keys(props).reduce((acc, key) => ({
+      ...acc,
+      [key]: this[key],
+    }));
+    this.base = new TCalendar(values);
+  },
+
+  mounted() {
+    const realLocalText = { ...defaultLocaleText, ...this.localeText };
+    this.initialValue();
+    this.onWatchMinMaxDate();
+    this.days = this.base.getDays(realLocalText.weekdays);
+    this.realLocalText = realLocalText;
+
+    this.calcMonths();
+    this.updateCurrentMonth();
+
+    if (!this.usePopup) {
+      this.onScrollIntoView();
+    }
+  },
+  methods: {
+    getMonthTitle,
+    getDateLabel,
+    isDateSelected,
+    initialValue() {
+      const { dataValue: value, type, minDate } = this;
+
+      if (!value) {
+        const today = new Date();
+        const now = minDate || new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime(); // 获取 0 点的时间戳
+        const initialValue = type === 'single' ? now : [now];
+
+        if (type === 'range') {
+          initialValue[1] = now + 24 * 3600 * 1000; // 第二天
+        }
+
+        this.dataValue = initialValue;
+        this.base.value = initialValue;
+      }
+    },
+
+    onScrollIntoView() {
+      const { dataValue: value } = this;
+
+      if (!value) return;
+
+      const date = new Date(Array.isArray(value) ? value[0] : value);
+
+      if (date) {
+        this.scrollIntoView = `year_${date.getFullYear()}_month_${date.getMonth()}`;
+      }
+    },
+
+    getCurrentYearAndMonth(v) {
+      const date = new Date(v);
+      return { year: date.getFullYear(), month: date.getMonth() };
+    },
+
+    updateActionButton(value) {
+      const _min = this.getCurrentYearAndMonth(this.base.minDate);
+      const _max = this.getCurrentYearAndMonth(this.base.maxDate);
+      const _value = this.getCurrentYearAndMonth(value);
+
+      const _minTimestamp = new Date(_min.year, _min.month, 1).getTime();
+      const _maxTimestamp = new Date(_max.year, _max.month, 1).getTime();
+      const _dateValue = new Date(_value.year, _value.month, 1);
+
+      const _prevYearTimestamp = getPrevYear(_dateValue).getTime();
+      const _prevMonthTimestamp = getPrevMonth(_dateValue).getTime();
+      const _nextMonthTimestamp = getNextMonth(_dateValue).getTime();
+      const _nextYearTimestamp = getNextYear(_dateValue).getTime();
+
+      const preYearBtnDisable = _prevYearTimestamp < _minTimestamp || _prevMonthTimestamp < _minTimestamp;
+      const prevMonthBtnDisable = _prevMonthTimestamp < _minTimestamp;
+      const nextYearBtnDisable = _nextMonthTimestamp > _maxTimestamp || _nextYearTimestamp > _maxTimestamp;
+      const nextMonthBtnDisable = _nextMonthTimestamp > _maxTimestamp;
+
+      this.actionButtons = {
+        preYearBtnDisable,
+        prevMonthBtnDisable,
+        nextYearBtnDisable,
+        nextMonthBtnDisable,
+      };
+    },
+
+    updateCurrentMonth(newValue) {
+      if (this.switchMode === 'none') return;
+      this.calcCurrentMonth(newValue);
+    },
+
+    calcCurrentMonth(newValue) {
+      const date = newValue || this.getCurrentDate();
+      const { year, month } = this.getCurrentYearAndMonth(date);
+      const currentMonth = this.months.filter(item => item.year === year && item.month === month);
+
+      this.updateActionButton(date);
+
+      this.currentMonth = currentMonth.length > 0 ? currentMonth : [this.months[0]];
+    },
+
+    calcMonths() {
+      if (!this.base) return;
+
+      const months = this.base.getMonths();
+
+      this.months = months;
+    },
+
+    close(trigger) {
+      if (this.autoClose) {
+        this.$emit('update:visible', false);
+        this.dataVisible = false;
+      }
+      this.$emit('close', { trigger });
+    },
+
+    onVisibleChange() {
+      this.close('overlay');
+    },
+
+    handleClose() {
+      this.close('close-btn');
+    },
+
+    handleSelect(e) {
+      const { readonly } = this;
+      const { date, year, month } = e.currentTarget.dataset;
+
+      if (date.type === 'disabled' || readonly) return;
+
+      const rawValue = this.base.select({ cellType: date.type, year, month, date: date.day });
+
+      const value = this.toTime(rawValue);
+
+      this.calcMonths();
+      this.updateCurrentMonth();
+
+      if (this.confirmBtn == null) {
+        // 不显示确认按钮，则选择完即关闭 popup
+        if (this.type === 'single' || rawValue.length === 2) {
+          this.dataVisible = false;
+          this._trigger('change', { value }); // 受控
+        }
+      }
+
+      this.$emit('select', { value });
+    },
+
+    onTplButtonTap() {
+      const rawValue = this.base.getTrimValue();
+      const value = this.toTime(rawValue);
+
+      this.close('confirm-btn');
+      this._trigger('confirm', { value });
+    },
+
+    toTime(val) {
+      if (!val) return null;
+      if (Array.isArray(val)) {
+        return val.map(item => item.getTime());
+      }
+      return val.getTime();
+    },
+
+    onScroll(e) {
+      this.$emit('scroll', e.detail);
+    },
+
+    getCurrentDate() {
+      let time = Array.isArray(this.base.value) ? this.base.value[0] : this.base.value;
+
+      if (this.currentMonth.length > 0) {
+        const year = this.currentMonth[0]?.year;
+        const month = this.currentMonth[0]?.month;
+        time = new Date(year, month, 1).getTime();
+      }
+
+      return time;
+    },
+
+    handleSwitchModeChange(e) {
+      const { type, disabled } = e.currentTarget.dataset;
+      if (disabled) return;
+
+      const date = this.getCurrentDate();
+
+      const funcMap = {
+        'pre-year': () => getPrevYear(date),
+        'pre-month': () => getPrevMonth(date),
+        'next-month': () => getNextMonth(date),
+        'next-year': () => getNextYear(date),
+      };
+      const newValue = funcMap[type]();
+      if (!newValue) return;
+
+      const { year, month } = this.getCurrentYearAndMonth(newValue);
+      this.$emit('panel-change', { year, month: month + 1 });
+
+      this.calcCurrentMonth(newValue);
+    },
+
+    onWatchMinMaxDate() {
+      const { firstDayOfWeek, minDate, maxDate } = this;
+      firstDayOfWeek && (this.base.firstDayOfWeek = firstDayOfWeek);
+      minDate && (this.base.minDate = minDate);
+      maxDate && (this.base.maxDate = maxDate);
+      this.calcMonths();
+    },
+  },
+});
+</script>
+<style scoped>
+@import './calendar.css';
+</style>
+<style scoped>
+.t-calendar-switch-mode--none > .t-calendar__months {
+  /* support mp-alipay */
+  width: 100%;
+}
+</style>

package/dist/calendar/computed.js

@@ -0,0 +1,42 @@
+import { getRegExp } from '../common/runtime/wxs-polyfill';
+
+
+export function isDateSelected(dateItem) {
+  return ['start', 'end', 'selected', 'centre'].indexOf(dateItem.type) >= 0;
+}
+
+export function getMonthTitle(year, month, pattern = '') {
+  // prettier-ignore
+  const REGEXP = getRegExp('\\{year\\}|\\{month\\}', 'g');
+
+  return pattern.replace(REGEXP, (match) => {
+    const replacements = {
+      '{year}': year,
+      '{month}': month < 10 ? `0${month}` : month,
+    };
+    return replacements[match] || match;
+  });
+}
+
+
+export function getDateLabel(monthItem, dateItem) {
+  const weekdayText = ['日', '一', '二', '三', '四', '五', '六'];
+  const weekday = (monthItem.weekdayOfFirstDay + dateItem.day - 1) % 7;
+  let label = `${monthItem.month + 1}月${dateItem.day}日, 星期${weekdayText[weekday]}`;
+  if (dateItem.type === 'start') {
+    label = `开始日期：${label}`;
+  }
+  if (dateItem.type === 'end') {
+    label = `结束日期：${label}`;
+  }
+  if (isDateSelected(dateItem)) {
+    label = `已选中, ${label}`;
+  }
+  if (dateItem.prefix) {
+    label += `, ${dateItem.prefix}`;
+  }
+  if (dateItem.suffix) {
+    label += `, ${dateItem.suffix}`;
+  }
+  return label;
+}

package/dist/calendar/props.ts

@@ -0,0 +1,113 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdCalendarProps } from './type';
+export default {
+  /** 是否允许区间选择日历的起止时间相同，仅当 `type='range'` 时有效 */
+  allowSameDay: Boolean,
+  /** 自动关闭；在点击关闭按钮、确认按钮、遮罩层时自动关闭，不需要手动设置 visible */
+  autoClose: {
+    type: Boolean,
+    default: true,
+  },
+  /** 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性 */
+  confirmBtn: {
+    type: [String, Object],
+    default: '' as TdCalendarProps['confirmBtn'],
+  },
+  /** 第一天从星期几开始，默认 0 = 周日 */
+  firstDayOfWeek: {
+    type: Number,
+    default: 0,
+  },
+  /** 用于格式化日期的函数 */
+  format: {
+    type: Function,
+  },
+  /** 国际化文案 */
+  localeText: {
+    type: Object,
+  },
+  /** 最大可选的日期，不传则默认半年后 */
+  maxDate: {
+    type: Number,
+  },
+  /** 最小可选的日期，不传则默认今天 */
+  minDate: {
+    type: Number,
+  },
+  /** 是否只读，只读状态下不能选择日期 */
+  readonly: Boolean,
+  /** 切换模式。 `none` 表示平铺展示所有月份； `month` 表示支持按月切换， `year-month` 表示既按年切换，也支持按月切换 */
+  switchMode: {
+    type: String,
+    default: 'none' as TdCalendarProps['switchMode'],
+    validator(val: TdCalendarProps['switchMode']): boolean {
+      if (!val) return true;
+      return ['none', 'month', 'year-month'].includes(val);
+    },
+  },
+  /** 标题，不传默认为“请选择日期” */
+  title: {
+    type: String,
+  },
+  /** 日历的选择类型，single = 单选；multiple = 多选; range = 区间选择 */
+  type: {
+    type: String,
+    default: 'single' as TdCalendarProps['type'],
+    validator(val: TdCalendarProps['type']): boolean {
+      if (!val) return true;
+      return ['single', 'multiple', 'range'].includes(val);
+    },
+  },
+  /** 是否使用弹出层包裹日历 */
+  usePopup: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: Boolean,
+  /** 当前选择的日期，不传则选用 minDate 属性值或今天，优先级：minDate > today。当 type = multiple 或 range 时传入数组 */
+  value: {
+    type: [Number, Array],
+  },
+  /** 当前选择的日期，不传则选用 minDate 属性值或今天，优先级：minDate > today。当 type = multiple 或 range 时传入数组，非受控属性 */
+  defaultValue: {
+    type: [Number, Array],
+  },
+  /** 是否显示日历；`usePopup` 为 true 时有效 */
+  visible: Boolean,
+  /** 不显示 confirm-btn 时，完成选择时触发（暂不支持 type = multiple） */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 关闭按钮时触发 */
+  onClose: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击确认按钮时触发 */
+  onConfirm: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 切换月或年时触发（switch-mode 不为 none 时有效） */
+  onPanelChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 滚动时触发 */
+  onScroll: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 点击日期时触发 */
+  onSelect: {
+    type: Function,
+    default: () => ({}),
+  },
+};

package/dist/calendar/template.props.js

@@ -0,0 +1,57 @@
+export default {
+  classPrefix: {
+    type: String,
+    default: '',
+  },
+  usePopup: {
+    type: Boolean,
+  },
+  switchMode: {
+    type: String,
+    default: '',
+  },
+  tClass: {
+    type: String,
+    default: '',
+  },
+  customStyle: {
+    type: [String, Object],
+    default: '',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  realLocalText: {
+    type: Object,
+    default: () => ({}),
+  },
+  months: {
+    type: Array,
+    default: () => ([]),
+  },
+  currentMonth: {
+    type: [Array, Object],
+    default: () => ([]),
+  },
+  actionButtons: {
+    type: Object,
+    default: () => ({}),
+  },
+  days: {
+    type: Array,
+    default: () => ([]),
+  },
+  scrollIntoView: {
+    type: String,
+    default: '',
+  },
+  firstDayOfWeek: {
+    type: Number,
+    default: 0,
+  },
+  innerConfirmBtn: {
+    type: [Object, String],
+    default: '',
+  },
+};