@antsoo-lib/components 0.1.2 → 0.1.4

package/src/vc-picker/hooks/useHoverValue.ts

@@ -0,0 +1,47 @@
+import type { ComputedRef, Ref, UnwrapRef } from 'vue'
+import { onBeforeUnmount, ref, watch } from 'vue'
+
+import raf from '../../_util/raf'
+import type { ValueTextConfig } from './useValueTexts'
+import useValueTexts from './useValueTexts'
+
+export default function useHoverValue<DateType>(
+  valueText: Ref<string>,
+  { formatList, generateConfig, locale }: ValueTextConfig<DateType>,
+): [ComputedRef<string>, (date: DateType) => void, (immediately?: boolean) => void] {
+  const innerValue = ref<DateType>(null)
+  let rafId: number
+
+  function setValue(val: DateType, immediately = false) {
+    raf.cancel(rafId)
+    if (immediately) {
+      innerValue.value = val as UnwrapRef<DateType>
+      return
+    }
+    rafId = raf(() => {
+      innerValue.value = val as UnwrapRef<DateType>
+    })
+  }
+
+  const [, firstText] = useValueTexts(innerValue as Ref<DateType>, {
+    formatList,
+    generateConfig,
+    locale,
+  })
+  function onEnter(date: DateType) {
+    setValue(date)
+  }
+
+  function onLeave(immediately = false) {
+    setValue(null, immediately)
+  }
+
+  watch(valueText, () => {
+    onLeave(true)
+  })
+  onBeforeUnmount(() => {
+    raf.cancel(rafId)
+  })
+
+  return [firstText, onEnter, onLeave]
+}

package/src/vc-picker/hooks/useMergeProps.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'vue'
+import { useAttrs } from 'vue'
+
+// 仅用在函数式组件中，不用考虑响应式问题
+export default function useMergeProps<T>(props: T) {
+  const attrs: HTMLAttributes = useAttrs()
+  return { ...props, ...attrs }
+}

package/src/vc-picker/hooks/usePickerInput.ts

@@ -0,0 +1,177 @@
+import type { ComputedRef, HTMLAttributes, Ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'
+
+import type { FocusEventHandler } from '../../_util/EventInterface'
+import KeyCode from '../../_util/KeyCode'
+import raf from '../../_util/raf'
+import { addGlobalMousedownEvent, getTargetFromEvent } from '../utils/uiUtil'
+
+export default function usePickerInput({
+  open,
+  value,
+  isClickOutside,
+  triggerOpen,
+  forwardKeydown,
+  onKeydown,
+  blurToCancel,
+  onSubmit,
+  onCancel,
+  onFocus,
+  onBlur,
+}: {
+  open: Ref<boolean>
+  value: Ref<string>
+  isClickOutside: (clickElement: EventTarget | null) => boolean
+  triggerOpen: (open: boolean) => void
+  forwardKeydown: (e: KeyboardEvent) => boolean
+  onKeydown: (e: KeyboardEvent, preventDefault: () => void) => void
+  blurToCancel?: ComputedRef<boolean>
+  onSubmit: () => void | boolean
+  onCancel: () => void
+  onFocus?: FocusEventHandler
+  onBlur?: FocusEventHandler
+}): [ComputedRef<HTMLAttributes>, { focused: Ref<boolean>; typing: Ref<boolean> }] {
+  const typing = shallowRef(false)
+  const focused = shallowRef(false)
+
+  /**
+   * We will prevent blur to handle open event when user click outside,
+   * since this will repeat trigger `onOpenChange` event.
+   */
+  const preventBlurRef = shallowRef<boolean>(false)
+
+  const valueChangedRef = shallowRef<boolean>(false)
+
+  const preventDefaultRef = shallowRef<boolean>(false)
+
+  const inputProps = computed<HTMLAttributes>(() => ({
+    onMousedown: () => {
+      typing.value = true
+      triggerOpen(true)
+    },
+    onKeydown: (e) => {
+      const preventDefault = (): void => {
+        preventDefaultRef.value = true
+      }
+
+      onKeydown(e, preventDefault)
+
+      if (preventDefaultRef.value) return
+
+      switch (e.which) {
+        case KeyCode.ENTER: {
+          if (!open.value) {
+            triggerOpen(true)
+          } else if (onSubmit() !== false) {
+            typing.value = true
+          }
+
+          e.preventDefault()
+          return
+        }
+
+        case KeyCode.TAB: {
+          if (typing.value && open.value && !e.shiftKey) {
+            typing.value = false
+            e.preventDefault()
+          } else if (!typing.value && open.value) {
+            if (!forwardKeydown(e) && e.shiftKey) {
+              typing.value = true
+              e.preventDefault()
+            }
+          }
+          return
+        }
+
+        case KeyCode.ESC: {
+          typing.value = true
+          onCancel()
+          return
+        }
+      }
+
+      if (!open.value && ![KeyCode.SHIFT].includes(e.which)) {
+        triggerOpen(true)
+      } else if (!typing.value) {
+        // Let popup panel handle keyboard
+        forwardKeydown(e)
+      }
+    },
+
+    onFocus: (e) => {
+      typing.value = true
+      focused.value = true
+
+      if (onFocus) {
+        onFocus(e)
+      }
+    },
+
+    onBlur: (e) => {
+      if (preventBlurRef.value || !isClickOutside(document.activeElement)) {
+        preventBlurRef.value = false
+        return
+      }
+
+      if (blurToCancel.value) {
+        setTimeout(() => {
+          let { activeElement } = document
+          while (activeElement && activeElement.shadowRoot) {
+            activeElement = activeElement.shadowRoot.activeElement
+          }
+
+          if (isClickOutside(activeElement)) {
+            onCancel()
+          }
+        }, 0)
+      } else if (open.value) {
+        triggerOpen(false)
+
+        if (valueChangedRef.value) {
+          onSubmit()
+        }
+      }
+      focused.value = false
+
+      if (onBlur) {
+        onBlur(e)
+      }
+    },
+  }))
+
+  // check if value changed
+  watch(open, () => {
+    valueChangedRef.value = false
+  })
+
+  watch(value, () => {
+    valueChangedRef.value = true
+  })
+  const globalMousedownEvent = shallowRef()
+  // Global click handler
+  onMounted(() => {
+    globalMousedownEvent.value = addGlobalMousedownEvent((e: MouseEvent) => {
+      const target = getTargetFromEvent(e)
+
+      if (open.value) {
+        const clickedOutside = isClickOutside(target)
+
+        if (!clickedOutside) {
+          preventBlurRef.value = true
+
+          // Always set back in case `onBlur` prevented by user
+          raf(() => {
+            preventBlurRef.value = false
+          })
+        } else if (!focused.value || clickedOutside) {
+          triggerOpen(false)
+        }
+      }
+    })
+  })
+  onBeforeUnmount(() => {
+    globalMousedownEvent.value && globalMousedownEvent.value()
+  })
+
+  return [inputProps, { focused, typing }]
+}

package/src/vc-picker/hooks/usePresets.ts

@@ -0,0 +1,30 @@
+import type { ComputedRef } from 'vue'
+import { computed } from 'vue'
+
+import warning from '../../vc-util/warning'
+import type { PresetDate } from '../interface'
+
+export default function usePresets<T>(
+  presets?: ComputedRef<PresetDate<T>[]>,
+  legacyRanges?: ComputedRef<Record<string, T | (() => T)>>,
+): ComputedRef<PresetDate<T>[]> {
+  return computed(() => {
+    if (presets?.value) {
+      return presets.value
+    }
+    if (legacyRanges?.value) {
+      warning(false, '`ranges` is deprecated. Please use `presets` instead.')
+
+      const rangeLabels = Object.keys(legacyRanges.value)
+      return rangeLabels.map((label) => {
+        const range = legacyRanges.value[label]
+        const newValues = typeof range === 'function' ? (range as any)() : range
+        return {
+          label,
+          value: newValues,
+        }
+      })
+    }
+    return [] as unknown as PresetDate<T>[]
+  })
+}

package/src/vc-picker/hooks/useRangeDisabled.ts

@@ -0,0 +1,115 @@
+import type { ComputedRef, Ref } from 'vue'
+import { computed } from 'vue'
+
+import type { GenerateConfig } from '../generate'
+import type { Locale, PickerMode, RangeValue } from '../interface'
+import { getQuarter, isSameDate } from '../utils/dateUtil'
+import { getValue } from '../utils/miscUtil'
+
+export default function useRangeDisabled<DateType>(
+  {
+    picker,
+    locale,
+    selectedValue,
+    disabledDate,
+    disabled,
+    generateConfig,
+  }: {
+    picker: Ref<PickerMode>
+    selectedValue: Ref<RangeValue<DateType>>
+    disabledDate?: Ref<(date: DateType) => boolean>
+    disabled: ComputedRef<[boolean, boolean]>
+    locale: Ref<Locale>
+    generateConfig: Ref<GenerateConfig<DateType>>
+  },
+  openRecordsRef: Ref<{
+    [x: number]: boolean
+  }>,
+) {
+  const startDate = computed(() => getValue(selectedValue.value, 0))
+  const endDate = computed(() => getValue(selectedValue.value, 1))
+
+  function weekFirstDate(date: DateType) {
+    return generateConfig.value.locale.getWeekFirstDate(locale.value.locale, date)
+  }
+
+  function monthNumber(date: DateType) {
+    const year = generateConfig.value.getYear(date)
+    const month = generateConfig.value.getMonth(date)
+    return year * 100 + month
+  }
+
+  function quarterNumber(date: DateType) {
+    const year = generateConfig.value.getYear(date)
+    const quarter = getQuarter(generateConfig.value, date)
+    return year * 10 + quarter
+  }
+
+  const disabledStartDate = (date: DateType) => {
+    if (disabledDate && disabledDate?.value?.(date)) {
+      return true
+    }
+
+    // Disabled range
+    if (disabled[1] && endDate) {
+      return (
+        !isSameDate(generateConfig.value, date, endDate.value) &&
+        generateConfig.value.isAfter(date, endDate.value)
+      )
+    }
+
+    // Disabled part
+    if (openRecordsRef.value[1] && endDate.value) {
+      switch (picker.value) {
+        case 'quarter':
+          return quarterNumber(date) > quarterNumber(endDate.value)
+        case 'month':
+          return monthNumber(date) > monthNumber(endDate.value)
+        case 'week':
+          return weekFirstDate(date) > weekFirstDate(endDate.value)
+        default:
+          return (
+            !isSameDate(generateConfig.value, date, endDate.value) &&
+            generateConfig.value.isAfter(date, endDate.value)
+          )
+      }
+    }
+
+    return false
+  }
+
+  const disabledEndDate = (date: DateType) => {
+    if (disabledDate.value?.(date)) {
+      return true
+    }
+
+    // Disabled range
+    if (disabled[0] && startDate) {
+      return (
+        !isSameDate(generateConfig.value, date, endDate.value) &&
+        generateConfig.value.isAfter(startDate.value, date)
+      )
+    }
+
+    // Disabled part
+    if (openRecordsRef.value[0] && startDate.value) {
+      switch (picker.value) {
+        case 'quarter':
+          return quarterNumber(date) < quarterNumber(startDate.value)
+        case 'month':
+          return monthNumber(date) < monthNumber(startDate.value)
+        case 'week':
+          return weekFirstDate(date) < weekFirstDate(startDate.value)
+        default:
+          return (
+            !isSameDate(generateConfig.value, date, startDate.value) &&
+            generateConfig.value.isAfter(startDate.value, date)
+          )
+      }
+    }
+
+    return false
+  }
+
+  return [disabledStartDate, disabledEndDate]
+}

package/src/vc-picker/hooks/useRangeViewDates.ts

@@ -0,0 +1,129 @@
+import type { Ref } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
+
+import type { GenerateConfig } from '../generate'
+import type { PickerMode, RangeValue } from '../interface'
+import { getClosingViewDate, isSameDecade, isSameMonth, isSameYear } from '../utils/dateUtil'
+import { getValue, updateValues } from '../utils/miscUtil'
+
+function getStartEndDistance<DateType>(
+  startDate: DateType,
+  endDate: DateType,
+  picker: PickerMode,
+  generateConfig: GenerateConfig<DateType>,
+): 'same' | 'closing' | 'far' {
+  const startNext = getClosingViewDate(startDate, picker, generateConfig, 1)
+
+  function getDistance(compareFunc: (start: DateType | null, end: DateType | null) => boolean) {
+    if (compareFunc(startDate, endDate)) {
+      return 'same'
+    }
+    if (compareFunc(startNext, endDate)) {
+      return 'closing'
+    }
+    return 'far'
+  }
+
+  switch (picker) {
+    case 'year':
+      return getDistance((start, end) => isSameDecade(generateConfig, start, end))
+    case 'quarter':
+    case 'month':
+      return getDistance((start, end) => isSameYear(generateConfig, start, end))
+    default:
+      return getDistance((start, end) => isSameMonth(generateConfig, start, end))
+  }
+}
+
+function getRangeViewDate<DateType>(
+  values: RangeValue<DateType>,
+  index: 0 | 1,
+  picker: PickerMode,
+  generateConfig: GenerateConfig<DateType>,
+): DateType | null {
+  const startDate = getValue(values, 0)
+  const endDate = getValue(values, 1)
+
+  if (index === 0) {
+    return startDate
+  }
+
+  if (startDate && endDate) {
+    const distance = getStartEndDistance(startDate, endDate, picker, generateConfig)
+    switch (distance) {
+      case 'same':
+        return startDate
+      case 'closing':
+        return startDate
+      default:
+        return getClosingViewDate(endDate, picker, generateConfig, -1)
+    }
+  }
+
+  return startDate
+}
+
+export default function useRangeViewDates<DateType>({
+  values,
+  picker,
+  defaultDates,
+  generateConfig,
+}: {
+  values: Ref<RangeValue<DateType>>
+  picker: Ref<PickerMode>
+  defaultDates: RangeValue<DateType> | undefined
+  generateConfig: Ref<GenerateConfig<DateType>>
+}): [Ref<DateType>, Ref<DateType>, (viewDate: DateType | null, index: 0 | 1) => void] {
+  const defaultViewDates = ref<[DateType | null, DateType | null]>([
+    getValue(defaultDates, 0),
+    getValue(defaultDates, 1),
+  ])
+  const viewDates = ref<RangeValue<DateType>>(null)
+  const startDate = computed(() => getValue(values.value, 0))
+  const endDate = computed(() => getValue(values.value, 1))
+
+  const getViewDate = (index: 0 | 1): DateType => {
+    // If set default view date, use it
+    if (defaultViewDates.value[index]) {
+      return defaultViewDates.value[index]! as DateType
+    }
+
+    return (
+      (getValue(viewDates.value, index) as any) ||
+      getRangeViewDate(values.value, index, picker.value, generateConfig.value) ||
+      startDate.value ||
+      endDate.value ||
+      generateConfig.value.getNow()
+    )
+  }
+
+  const startViewDate = ref(null)
+
+  const endViewDate = ref(null)
+  watchEffect(() => {
+    startViewDate.value = getViewDate(0)
+    endViewDate.value = getViewDate(1)
+  })
+
+  function setViewDate(viewDate: DateType | null, index: 0 | 1) {
+    if (viewDate) {
+      let newViewDates = updateValues(viewDates.value, viewDate as any, index)
+      // Set view date will clean up default one
+      // Should always be an array
+      defaultViewDates.value = updateValues(defaultViewDates.value, null, index) || [null, null]
+
+      // Reset another one when not have value
+      const anotherIndex = (index + 1) % 2
+      if (!getValue(values.value, anotherIndex)) {
+        newViewDates = updateValues(newViewDates, viewDate, anotherIndex)
+      }
+
+      viewDates.value = newViewDates
+    } else if (startDate.value || endDate.value) {
+      // Reset all when has values when `viewDate` is `null` which means from open trigger
+      viewDates.value = null
+    }
+  }
+
+  return [startViewDate, endViewDate, setViewDate]
+}

package/src/vc-picker/hooks/useTextValueMapping.ts

@@ -0,0 +1,37 @@
+import type { ComputedRef, Ref } from 'vue'
+import { ref, watch } from 'vue'
+
+export default function useTextValueMapping({
+  valueTexts,
+  onTextChange,
+}: {
+  /** Must useMemo, to assume that `valueTexts` only match on the first change */
+  valueTexts: ComputedRef<string[]>
+  onTextChange: (text: string) => void
+}): [Ref<string>, (text: string) => void, () => void] {
+  const text = ref('')
+
+  function triggerTextChange(value: string) {
+    text.value = value
+    onTextChange(value)
+  }
+
+  function resetText() {
+    text.value = valueTexts.value[0]
+  }
+
+  watch(
+    () => [...valueTexts.value],
+    (cur, pre = []) => {
+      if (
+        cur.join('||') !== pre.join('||') &&
+        valueTexts.value.every((valText) => valText !== text.value)
+      ) {
+        resetText()
+      }
+    },
+    { immediate: true },
+  )
+
+  return [text, triggerTextChange, resetText]
+}

package/src/vc-picker/hooks/useValueTexts.ts

@@ -0,0 +1,52 @@
+import type { ComputedRef, Ref } from 'vue'
+import { computed } from 'vue'
+
+import useMemo from '../../_util/hooks/useMemo'
+import shallowequal from '../../_util/shallowequal'
+import type { GenerateConfig } from '../generate'
+import type { CustomFormat, Locale } from '../interface'
+import { formatValue } from '../utils/dateUtil'
+
+export interface ValueTextConfig<DateType> {
+  formatList: ComputedRef<(string | CustomFormat<DateType>)[]>
+  generateConfig: Ref<GenerateConfig<DateType>>
+  locale: Ref<Locale>
+}
+
+export default function useValueTexts<DateType>(
+  value: Ref<DateType | null>,
+  { formatList, generateConfig, locale }: ValueTextConfig<DateType>,
+): [ComputedRef<string[]>, ComputedRef<string>] {
+  const texts = useMemo<[string[], string]>(
+    () => {
+      if (!value.value) {
+        return [[''], '']
+      }
+
+      // We will convert data format back to first format
+      let firstValueText = ''
+      const fullValueTexts: string[] = []
+
+      for (let i = 0; i < formatList.value.length; i += 1) {
+        const format = formatList.value[i]
+        const formatStr = formatValue(value.value, {
+          generateConfig: generateConfig.value,
+          locale: locale.value,
+          format,
+        })
+        fullValueTexts.push(formatStr)
+
+        if (i === 0) {
+          firstValueText = formatStr
+        }
+      }
+
+      return [fullValueTexts, firstValueText]
+    },
+    [value, formatList],
+    (next, prev) => prev[0] !== next[0] || !shallowequal(prev[1], next[1]),
+  )
+  const fullValueTexts = computed(() => texts.value[0])
+  const firstValueText = computed(() => texts.value[1])
+  return [fullValueTexts, firstValueText]
+}

package/src/vc-picker/index.tsx

@@ -0,0 +1,12 @@
+// 2.6.7
+import type { PickerProps } from './Picker'
+import Picker from './Picker'
+import PickerPanel from './PickerPanel'
+import type { PickerPanelProps } from './PickerPanel'
+import RangePicker from './RangePicker'
+import type { RangePickerProps } from './RangePicker'
+
+export { PickerPanel, RangePicker }
+export type { PickerPanelProps, PickerProps, RangePickerProps }
+
+export default Picker