@antsoo-lib/components 0.1.2 → 0.1.4

package/src/vc-picker/locale/tr_TR.ts

@@ -0,0 +1,32 @@
+import type { Locale } from '../interface'
+
+const locale: Locale = {
+  locale: 'tr_TR',
+  today: 'Bugün',
+  now: 'Şimdi',
+  backToToday: 'Bugüne Geri Dön',
+  ok: 'tamam',
+  clear: 'Temizle',
+  month: 'Ay',
+  year: 'Yıl',
+  timeSelect: 'Zaman Seç',
+  dateSelect: 'Tarih Seç',
+  monthSelect: 'Ay Seç',
+  yearSelect: 'Yıl Seç',
+  decadeSelect: 'On Yıl Seç',
+  yearFormat: 'YYYY',
+  dateFormat: 'M/D/YYYY',
+  dayFormat: 'D',
+  dateTimeFormat: 'M/D/YYYY HH:mm:ss',
+  monthBeforeYear: true,
+  previousMonth: 'Önceki Ay (PageUp)',
+  nextMonth: 'Sonraki Ay (PageDown)',
+  previousYear: 'Önceki Yıl (Control + Sol)',
+  nextYear: 'Sonraki Yıl (Control + Sağ)',
+  previousDecade: 'Önceki On Yıl',
+  nextDecade: 'Sonraki On Yıl',
+  previousCentury: 'Önceki Yüzyıl',
+  nextCentury: 'Sonraki Yüzyıl',
+}
+
+export default locale

package/src/vc-picker/locale/ug_CN.ts

@@ -0,0 +1,31 @@
+import type { Locale } from '../interface'
+
+const locale: Locale = {
+  locale: 'ug_CN',
+  today: 'بۈگۈن',
+  now: 'ھازىر',
+  backToToday: 'بۈگۈنگە قايتىش',
+  ok: 'مۇقىملاشتۇرۇش',
+  timeSelect: 'ۋاقىت تاللاش',
+  dateSelect: 'كۈن تاللاش',
+  clear: 'تازىلاش',
+  month: 'ئاي',
+  year: 'يىل',
+  previousMonth: 'ئالدىنقى ئاي(ئالدىنقى بەت )',
+  nextMonth: 'كېلەركى ئاي (كېلەركى بەت)',
+  monthSelect: 'ئاي تاللاش',
+  yearSelect: 'يىل تاللاش',
+  decadeSelect: 'يىللارنى تاللاش',
+  yearFormat: 'YYYY-يىلى',
+  dayFormat: 'D-كۈنى',
+  dateFormat: 'YYYY-يىلىM-ئاينىڭD-كۈنى',
+  dateTimeFormat: 'YYYY-يىلىM—ئاينىڭD-كۈنى، HH:mm:ss',
+  previousYear: 'ئالدىنقى يىلى (Controlبىلەن يۆنىلىش كونۇپكىسى)',
+  nextYear: 'كېلەركى يىلى (Controlبىلەن يۆنىلىش كونۇپكىسى)',
+  previousDecade: 'ئالدىنقى يىللار',
+  nextDecade: 'كېيىنكى يىللار',
+  previousCentury: 'ئالدىنقى ئەسىر',
+  nextCentury: 'كېيىنكى ئەسىر',
+}
+
+export default locale

package/src/vc-picker/locale/uk_UA.ts

@@ -0,0 +1,32 @@
+import type { Locale } from '../interface'
+
+const locale: Locale = {
+  locale: 'uk_UA',
+  today: 'Сьогодні',
+  now: 'Зараз',
+  backToToday: 'Поточна дата',
+  ok: 'Ok',
+  clear: 'Очистити',
+  month: 'Місяць',
+  year: 'Рік',
+  timeSelect: 'Обрати час',
+  dateSelect: 'Обрати дату',
+  monthSelect: 'Обрати місяць',
+  yearSelect: 'Обрати рік',
+  decadeSelect: 'Обрати десятиріччя',
+  yearFormat: 'YYYY',
+  dateFormat: 'D-M-YYYY',
+  dayFormat: 'D',
+  dateTimeFormat: 'D-M-YYYY HH:mm:ss',
+  monthBeforeYear: true,
+  previousMonth: 'Попередній місяць (PageUp)',
+  nextMonth: 'Наступний місяць (PageDown)',
+  previousYear: 'Попередній рік (Control + left)',
+  nextYear: 'Наступний рік (Control + right)',
+  previousDecade: 'Попереднє десятиріччя',
+  nextDecade: 'Наступне десятиріччя',
+  previousCentury: 'Попереднє століття',
+  nextCentury: 'Наступне століття',
+}
+
+export default locale

package/src/vc-picker/locale/ur_PK.ts

@@ -0,0 +1,33 @@
+import type { Locale } from '../interface'
+
+const locale: Locale = {
+  locale: 'ur_PK',
+  today: 'آج',
+  now: 'ابھی',
+  backToToday: 'آج واپس',
+  ok: 'ٹھیک ہے',
+  clear: 'صاف',
+  month: 'مہینہ',
+  year: 'سال',
+  timeSelect: 'وقت منتخب کریں',
+  dateSelect: 'تاریخ منتخب کریں',
+  weekSelect: 'ایک ہفتہ کا انتخاب کریں',
+  monthSelect: 'ایک مہینہ کا انتخاب کریں',
+  yearSelect: 'ایک سال کا انتخاب کریں',
+  decadeSelect: 'ایک دہائی کا انتخاب کریں',
+  yearFormat: 'YYYY',
+  dateFormat: 'M/D/YYYY',
+  dayFormat: 'D',
+  dateTimeFormat: 'M/D/YYYY HH:mm:ss',
+  monthBeforeYear: true,
+  previousMonth: 'پچھلے مہینے (PageUp)',
+  nextMonth: 'اگلے مہینے (PageDown)',
+  previousYear: 'گزشتہ سال (Control + left)',
+  nextYear: 'اگلے سال (Control + right)',
+  previousDecade: 'پچھلی دہائی',
+  nextDecade: 'اگلی دہائی',
+  previousCentury: 'پچھلی صدی',
+  nextCentury: 'اگلی صدی',
+}
+
+export default locale

package/src/vc-picker/locale/vi_VN.ts

@@ -0,0 +1,33 @@
+import type { Locale } from '../interface'
+
+const locale: Locale = {
+  locale: 'vi_VN',
+  today: 'Hôm nay',
+  now: 'Bây giờ',
+  backToToday: 'Trở về hôm nay',
+  ok: 'Ok',
+  clear: 'Xóa',
+  month: 'Tháng',
+  year: 'Năm',
+  timeSelect: 'Chọn thời gian',
+  dateSelect: 'Chọn ngày',
+  weekSelect: 'Chọn tuần',
+  monthSelect: 'Chọn tháng',
+  yearSelect: 'Chọn năm',
+  decadeSelect: 'Chọn thập kỷ',
+  yearFormat: 'YYYY',
+  dateFormat: 'D/M/YYYY',
+  dayFormat: 'D',
+  dateTimeFormat: 'D/M/YYYY HH:mm:ss',
+  monthBeforeYear: true,
+  previousMonth: 'Tháng trước (PageUp)',
+  nextMonth: 'Tháng sau (PageDown)',
+  previousYear: 'Năm trước (Control + left)',
+  nextYear: 'Năm sau (Control + right)',
+  previousDecade: 'Thập kỷ trước',
+  nextDecade: 'Thập kỷ sau',
+  previousCentury: 'Thế kỷ trước',
+  nextCentury: 'Thế kỷ sau',
+}
+
+export default locale

package/src/vc-picker/locale/zh_CN.ts

@@ -0,0 +1,32 @@
+import type { Locale } from '../interface'
+
+const locale: Locale = {
+  locale: 'zh_CN',
+  today: '今天',
+  now: '此刻',
+  backToToday: '返回今天',
+  ok: '确定',
+  timeSelect: '选择时间',
+  dateSelect: '选择日期',
+  weekSelect: '选择周',
+  clear: '清除',
+  month: '月',
+  year: '年',
+  previousMonth: '上个月 (翻页上键)',
+  nextMonth: '下个月 (翻页下键)',
+  monthSelect: '选择月份',
+  yearSelect: '选择年份',
+  decadeSelect: '选择年代',
+  yearFormat: 'YYYY年',
+  dayFormat: 'D日',
+  dateFormat: 'YYYY年M月D日',
+  dateTimeFormat: 'YYYY年M月D日 HH时mm分ss秒',
+  previousYear: '上一年 (Control键加左方向键)',
+  nextYear: '下一年 (Control键加右方向键)',
+  previousDecade: '上一年代',
+  nextDecade: '下一年代',
+  previousCentury: '上一世纪',
+  nextCentury: '下一世纪',
+}
+
+export default locale

package/src/vc-picker/locale/zh_TW.ts

@@ -0,0 +1,33 @@
+import type { Locale } from '../interface'
+
+const locale: Locale = {
+  locale: 'zh_TW',
+
+  today: '今天',
+  now: '此刻',
+  backToToday: '返回今天',
+  ok: '確定',
+  timeSelect: '選擇時間',
+  dateSelect: '選擇日期',
+  weekSelect: '選擇周',
+  clear: '清除',
+  month: '月',
+  year: '年',
+  previousMonth: '上個月 (翻頁上鍵)',
+  nextMonth: '下個月 (翻頁下鍵)',
+  monthSelect: '選擇月份',
+  yearSelect: '選擇年份',
+  decadeSelect: '選擇年代',
+  yearFormat: 'YYYY年',
+  dayFormat: 'D日',
+  dateFormat: 'YYYY年M月D日',
+  dateTimeFormat: 'YYYY年M月D日 HH時mm分ss秒',
+  previousYear: '上一年 (Control鍵加左方向鍵)',
+  nextYear: '下一年 (Control鍵加右方向鍵)',
+  previousDecade: '上一年代',
+  nextDecade: '下一年代',
+  previousCentury: '上一世紀',
+  nextCentury: '下一世紀',
+}
+
+export default locale

package/src/vc-picker/panels/DatePanel/DateBody.tsx

@@ -0,0 +1,119 @@
+import type { VueNode } from '../../../_util/type'
+import { useInjectRange } from '../../RangeContext'
+import type { GenerateConfig } from '../../generate'
+import useCellClassName from '../../hooks/useCellClassName'
+import useMergeProps from '../../hooks/useMergeProps'
+import type { Locale } from '../../interface'
+import {
+  WEEK_DAY_COUNT,
+  formatValue,
+  getWeekStartDate,
+  isSameDate,
+  isSameMonth,
+} from '../../utils/dateUtil'
+import PanelBody from '../PanelBody'
+
+export type DateRender<DateType> = (props: { current: DateType; today: DateType }) => VueNode
+
+export interface DateBodyPassProps<DateType> {
+  dateRender?: DateRender<DateType>
+  disabledDate?: (date: DateType) => boolean
+
+  // Used for week panel
+  prefixColumn?: (date: DateType) => VueNode
+  rowClassName?: (date: DateType) => string
+}
+
+export type DateBodyProps<DateType> = {
+  prefixCls: string
+  generateConfig: GenerateConfig<DateType>
+  value?: DateType | null
+  viewDate: DateType
+  locale: Locale
+  rowCount: number
+  onSelect: (value: DateType) => void
+} & DateBodyPassProps<DateType>
+
+function DateBody<DateType>(_props: DateBodyProps<DateType>) {
+  const props = useMergeProps(_props)
+  const { prefixCls, generateConfig, prefixColumn, locale, rowCount, viewDate, value, dateRender } =
+    props
+
+  const { rangedValue, hoverRangedValue } = useInjectRange()
+
+  const baseDate = getWeekStartDate(locale.locale, generateConfig, viewDate)
+  const cellPrefixCls = `${prefixCls}-cell`
+  const weekFirstDay = generateConfig.locale.getWeekFirstDay(locale.locale)
+  const today = generateConfig.getNow()
+
+  // ============================== Header ==============================
+  const headerCells: VueNode[] = []
+  const weekDaysLocale: string[] =
+    locale.shortWeekDays ||
+    (generateConfig.locale.getShortWeekDays
+      ? generateConfig.locale.getShortWeekDays(locale.locale)
+      : [])
+
+  if (prefixColumn) {
+    headerCells.push(<th key="empty" aria-label="empty cell" />)
+  }
+  for (let i = 0; i < WEEK_DAY_COUNT; i += 1) {
+    headerCells.push(<th key={i}>{weekDaysLocale[(i + weekFirstDay) % WEEK_DAY_COUNT]}</th>)
+  }
+
+  // =============================== Body ===============================
+  const getCellClassName = useCellClassName({
+    cellPrefixCls,
+    today,
+    value,
+    generateConfig,
+    rangedValue: prefixColumn ? null : rangedValue.value,
+    hoverRangedValue: prefixColumn ? null : hoverRangedValue.value,
+    isSameCell: (current, target) => isSameDate(generateConfig, current, target),
+    isInView: (date) => isSameMonth(generateConfig, date, viewDate),
+    offsetCell: (date, offset) => generateConfig.addDate(date, offset),
+  })
+
+  const getCellNode = dateRender
+    ? (date: DateType) => dateRender({ current: date, today })
+    : undefined
+
+  return (
+    <PanelBody
+      {...props}
+      rowNum={rowCount}
+      colNum={WEEK_DAY_COUNT}
+      baseDate={baseDate}
+      getCellNode={getCellNode}
+      getCellText={generateConfig.getDate}
+      getCellClassName={getCellClassName}
+      getCellDate={generateConfig.addDate}
+      titleCell={(date) =>
+        formatValue(date, {
+          locale,
+          format: 'YYYY-MM-DD',
+          generateConfig,
+        })
+      }
+      headerCells={headerCells}
+    />
+  )
+}
+
+DateBody.displayName = 'DateBody'
+DateBody.inheritAttrs = false
+DateBody.props = [
+  'prefixCls',
+  'generateConfig',
+  'value?',
+  'viewDate',
+  'locale',
+  'rowCount',
+  'onSelect',
+  'dateRender?',
+  'disabledDate?',
+  // Used for week panel
+  'prefixColumn?',
+  'rowClassName?',
+]
+export default DateBody

package/src/vc-picker/panels/DatePanel/DateHeader.tsx

@@ -0,0 +1,106 @@
+import type { VueNode } from '../../../_util/type'
+import { useInjectPanel } from '../../PanelContext'
+import type { GenerateConfig } from '../../generate'
+import useMergeProps from '../../hooks/useMergeProps'
+import type { Locale } from '../../interface'
+import { formatValue } from '../../utils/dateUtil'
+import Header from '../Header'
+
+export interface DateHeaderProps<DateType> {
+  prefixCls: string
+  viewDate: DateType
+  value?: DateType | null
+  locale: Locale
+  generateConfig: GenerateConfig<DateType>
+
+  onPrevYear: () => void
+  onNextYear: () => void
+  onPrevMonth: () => void
+  onNextMonth: () => void
+  onYearClick: () => void
+  onMonthClick: () => void
+}
+
+function DateHeader<DateType>(_props: DateHeaderProps<DateType>) {
+  const props = useMergeProps(_props)
+  const {
+    prefixCls,
+    generateConfig,
+    locale,
+    viewDate,
+    onNextMonth,
+    onPrevMonth,
+    onNextYear,
+    onPrevYear,
+    onYearClick,
+    onMonthClick,
+  } = props
+
+  const { hideHeader } = useInjectPanel()
+  if (hideHeader.value) {
+    return null
+  }
+
+  const headerPrefixCls = `${prefixCls}-header`
+
+  const monthsLocale: string[] =
+    locale.shortMonths ||
+    (generateConfig.locale.getShortMonths
+      ? generateConfig.locale.getShortMonths(locale.locale)
+      : [])
+
+  const month = generateConfig.getMonth(viewDate)
+
+  // =================== Month & Year ===================
+  const yearNode: VueNode = (
+    <button
+      type="button"
+      key="year"
+      onClick={onYearClick}
+      tabindex={-1}
+      class={`${prefixCls}-year-btn`}
+    >
+      {formatValue(viewDate, {
+        locale,
+        format: locale.yearFormat,
+        generateConfig,
+      })}
+    </button>
+  )
+  const monthNode: VueNode = (
+    <button
+      type="button"
+      key="month"
+      onClick={onMonthClick}
+      tabindex={-1}
+      class={`${prefixCls}-month-btn`}
+    >
+      {locale.monthFormat
+        ? formatValue(viewDate, {
+            locale,
+            format: locale.monthFormat,
+            generateConfig,
+          })
+        : monthsLocale[month]}
+    </button>
+  )
+
+  const monthYearNodes = locale.monthBeforeYear ? [monthNode, yearNode] : [yearNode, monthNode]
+
+  return (
+    <Header
+      {...props}
+      prefixCls={headerPrefixCls}
+      onSuperPrev={onPrevYear}
+      onPrev={onPrevMonth}
+      onNext={onNextMonth}
+      onSuperNext={onNextYear}
+    >
+      {monthYearNodes}
+    </Header>
+  )
+}
+
+DateHeader.displayName = 'DateHeader'
+DateHeader.inheritAttrs = false
+export default DateHeader

package/src/vc-picker/panels/DatePanel/index.tsx

@@ -0,0 +1,117 @@
+import classNames from '../../../_util/classNames'
+import useMergeProps from '../../hooks/useMergeProps'
+import type { PanelSharedProps } from '../../interface'
+import { WEEK_DAY_COUNT } from '../../utils/dateUtil'
+import type { KeyboardConfig } from '../../utils/uiUtil'
+import { createKeydownHandler } from '../../utils/uiUtil'
+import type { DateBodyPassProps, DateRender } from './DateBody'
+import DateBody from './DateBody'
+import DateHeader from './DateHeader'
+
+const DATE_ROW_COUNT = 6
+
+export type DatePanelProps<DateType> = {
+  active?: boolean
+  dateRender?: DateRender<DateType>
+
+  // Used for week panel
+  panelName?: string
+  keyboardConfig?: KeyboardConfig
+} & PanelSharedProps<DateType> &
+  DateBodyPassProps<DateType>
+
+function DatePanel<DateType>(_props: DatePanelProps<DateType>) {
+  const props = useMergeProps(_props)
+  const {
+    prefixCls,
+    panelName = 'date',
+    keyboardConfig,
+    active,
+    operationRef,
+    generateConfig,
+    value,
+    viewDate,
+    onViewDateChange,
+    onPanelChange,
+    onSelect,
+  } = props
+  const panelPrefixCls = `${prefixCls}-${panelName}-panel`
+  // ======================= Keyboard =======================
+  operationRef.value = {
+    onKeydown: (event: KeyboardEvent) =>
+      createKeydownHandler(event, {
+        onLeftRight: (diff) => {
+          onSelect(generateConfig.addDate(value || viewDate, diff), 'key')
+        },
+        onCtrlLeftRight: (diff) => {
+          onSelect(generateConfig.addYear(value || viewDate, diff), 'key')
+        },
+        onUpDown: (diff) => {
+          onSelect(generateConfig.addDate(value || viewDate, diff * WEEK_DAY_COUNT), 'key')
+        },
+        onPageUpDown: (diff) => {
+          onSelect(generateConfig.addMonth(value || viewDate, diff), 'key')
+        },
+        ...keyboardConfig,
+      }),
+  }
+
+  // ==================== View Operation ====================
+  const onYearChange = (diff: number) => {
+    const newDate = generateConfig.addYear(viewDate, diff)
+    onViewDateChange(newDate)
+    onPanelChange(null, newDate)
+  }
+  const onMonthChange = (diff: number) => {
+    const newDate = generateConfig.addMonth(viewDate, diff)
+    onViewDateChange(newDate)
+    onPanelChange(null, newDate)
+  }
+
+  return (
+    <div
+      class={classNames(panelPrefixCls, {
+        [`${panelPrefixCls}-active`]: active,
+      })}
+    >
+      <DateHeader
+        {...props}
+        prefixCls={prefixCls}
+        value={value}
+        viewDate={viewDate}
+        // View Operation
+        onPrevYear={() => {
+          onYearChange(-1)
+        }}
+        onNextYear={() => {
+          onYearChange(1)
+        }}
+        onPrevMonth={() => {
+          onMonthChange(-1)
+        }}
+        onNextMonth={() => {
+          onMonthChange(1)
+        }}
+        onMonthClick={() => {
+          onPanelChange('month', viewDate)
+        }}
+        onYearClick={() => {
+          onPanelChange('year', viewDate)
+        }}
+      />
+      <DateBody
+        {...props}
+        onSelect={(date) => onSelect(date, 'mouse')}
+        prefixCls={prefixCls}
+        value={value}
+        viewDate={viewDate}
+        rowCount={DATE_ROW_COUNT}
+      />
+    </div>
+  )
+}
+
+DatePanel.displayName = 'DatePanel'
+DatePanel.inheritAttrs = false
+
+export default DatePanel