@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/Epg/hooks/useLayout.ts

@@ -1,187 +1,187 @@
-import { isToday as isTodayFns, startOfToday } from 'date-fns'
-
-// Import types
-import type { DateTime } from '../helpers/types'
-
-import {
-  DEBOUNCE_WAIT,
-  DEBOUNCE_WAIT_MAX,
-  getPositionX,
-} from '../helpers'
-import { useEpgStore } from '../store'
-
-interface UseLayoutProps {
-  height?: number
-  width?: number
-  hourWidth: Ref<number>
-  sidebarWidth: Ref<number>
-  startDate: Ref<DateTime>
-  endDate: Ref<DateTime>
-  revertScroll?: MaybeRef<boolean>
-  scrollX: MaybeRef<number>
-  timezoneOffset: Ref<number>
-}
-
-export function useLayout({
-  height,
-  width,
-  startDate,
-  endDate,
-  hourWidth,
-  sidebarWidth,
-  revertScroll,
-  scrollX: _scrollX,
-  timezoneOffset,
-}: UseLayoutProps) {
-  const containerRef = ref() as Ref<HTMLDivElement>
-  const scrollBoxRef = ref() as Ref<HTMLDivElement>
-  const _revertScroll = toRef(revertScroll)
-
-  useEventListener(containerRef, 'mousewheel', (evt) => {
-    if (!_revertScroll.value)
-      return
-
-    const delta = Math.max(-1, Math.min(1, (evt.wheelDelta || -evt.detail)))
-    const scrollSpeed = 60
-    containerRef.value.scrollLeft -= (delta * scrollSpeed)
-    evt.preventDefault()
-  })
-
-  // -------- State --------
-  const scrollY = ref(0)
-  const scrollX = toRef(_scrollX)
-  const scrollXSlient = refWithControl(0)
-  const layoutWidth = ref(width as number)
-  const layoutHeight = ref(height as number)
-  const isToday = computed(() => isTodayFns(new Date(startDate.value)))
-
-  // -------- Handlers --------
-
-  const handleOnScroll = (e: any) => {
-    const payload = { y: e.target.scrollTop, x: e.target.scrollLeft }
-    scrollY.value = payload.y
-    scrollX.value = payload.x
-
-    const clientWidth = (width
-      ?? containerRef.value?.clientWidth) as number
-
-    const centerHour = (clientWidth - sidebarWidth.value) / 2
-    scrollXSlient.silentSet((payload.x + centerHour) / hourWidth.value)
-  }
-
-  const handleOnScrollToNow = () => {
-    if (scrollBoxRef?.value && isToday.value) {
-      const clientWidth = (width ?? containerRef.value?.clientWidth) as number
-
-      const scrollPosition = getPositionX(
-        startOfToday(),
-        dayjs(new Date()).toDate(),
-        startDate.value,
-        endDate.value,
-        hourWidth.value,
-      )
-      const scrollNow = scrollPosition - clientWidth / 2 + sidebarWidth.value
-      scrollBoxRef.value?.scrollTo({ left: scrollNow, behavior: 'smooth' })
-    }
-  }
-
-  const handleZoom = () => {
-    const clientWidth = (width
-      ?? containerRef.value?.clientWidth) as number
-    const centerHour = (clientWidth - sidebarWidth.value) / 2
-    const diff = centerHour / hourWidth.value
-    const centerDate = scrollXSlient.untrackedGet() - diff
-
-    const startDateWithTime = new Date(startDate.value)
-    const centerDateNatural = Math.floor(centerDate)
-    const centerDateDecimal = centerDate - centerDateNatural
-
-    startDateWithTime.setHours(centerDateNatural)
-    startDateWithTime.setMinutes(Math.round(centerDateDecimal * 60))
-
-    const scrollPosition = getPositionX(
-      startOfToday(),
-      startDateWithTime,
-      startDate.value,
-      endDate.value,
-      hourWidth.value,
-    )
-    nextTick(() => {
-      scrollBoxRef.value?.scrollTo({ left: scrollPosition, behavior: 'smooth' })
-    })
-  }
-
-  watch(hourWidth, () => {
-    handleZoom()
-  })
-
-  const handleOnScrollTop = (value: number = hourWidth.value) => {
-    if (scrollBoxRef?.value) {
-      const top = scrollBoxRef.value.scrollTop + value
-      scrollBoxRef.value.scrollTop = top
-    }
-  }
-
-  const handleOnScrollRight = (value: number = hourWidth.value) => {
-    if (scrollBoxRef?.value) {
-      const right = scrollBoxRef.value.scrollLeft + value
-      scrollBoxRef.value.scrollLeft = right
-    }
-  }
-
-  const handleOnScrollLeft = (value: number = hourWidth.value) => {
-    if (scrollBoxRef?.value) {
-      const left = scrollBoxRef.value.scrollLeft - value
-      scrollBoxRef.value.scrollLeft = left
-    }
-  }
-
-  const handleResizeDebounced = useDebounceFn(
-    () => {
-      if (containerRef?.value && !width) {
-        const container = containerRef.value
-        const { clientWidth } = container
-        layoutWidth.value = clientWidth
-      }
-    },
-    DEBOUNCE_WAIT * 4,
-    { maxWait: DEBOUNCE_WAIT_MAX * 4 },
-  )
-
-  // -------- Efffects --------
-  watchEffect(() => {
-    if (containerRef?.value) {
-      const container = containerRef.value
-      if (!width) {
-        const { clientWidth } = container
-        layoutWidth.value = clientWidth
-      }
-      if (!height) {
-        const { clientHeight } = container
-        layoutHeight.value = clientHeight
-      }
-    }
-  })
-
-  onMounted(() => {
-    window.addEventListener('resize', handleResizeDebounced)
-  })
-
-  onBeforeUnmount(() => {
-    window.removeEventListener('resize', handleResizeDebounced)
-  })
-
-  return {
-    containerRef,
-    scrollBoxRef,
-    scrollX,
-    scrollY,
-    layoutWidth,
-    layoutHeight,
-    onScroll: handleOnScroll,
-    onScrollToNow: handleOnScrollToNow,
-    onScrollTop: handleOnScrollTop,
-    onScrollLeft: handleOnScrollLeft,
-    onScrollRight: handleOnScrollRight,
-  }
-}
+import { isToday as isTodayFns, startOfToday } from 'date-fns'
+
+// Import types
+import type { DateTime } from '../helpers/types'
+
+import {
+  DEBOUNCE_WAIT,
+  DEBOUNCE_WAIT_MAX,
+  getPositionX,
+} from '../helpers'
+import { useEpgStore } from '../store'
+
+interface UseLayoutProps {
+  height?: number
+  width?: number
+  hourWidth: Ref<number>
+  sidebarWidth: Ref<number>
+  startDate: Ref<DateTime>
+  endDate: Ref<DateTime>
+  revertScroll?: MaybeRef<boolean>
+  scrollX: MaybeRef<number>
+  timezoneOffset: Ref<number>
+}
+
+export function useLayout({
+  height,
+  width,
+  startDate,
+  endDate,
+  hourWidth,
+  sidebarWidth,
+  revertScroll,
+  scrollX: _scrollX,
+  timezoneOffset,
+}: UseLayoutProps) {
+  const containerRef = ref() as Ref<HTMLDivElement>
+  const scrollBoxRef = ref() as Ref<HTMLDivElement>
+  const _revertScroll = toRef(revertScroll)
+
+  useEventListener(containerRef, 'mousewheel', (evt) => {
+    if (!_revertScroll.value)
+      return
+
+    const delta = Math.max(-1, Math.min(1, (evt.wheelDelta || -evt.detail)))
+    const scrollSpeed = 60
+    containerRef.value.scrollLeft -= (delta * scrollSpeed)
+    evt.preventDefault()
+  })
+
+  // -------- State --------
+  const scrollY = ref(0)
+  const scrollX = toRef(_scrollX)
+  const scrollXSlient = refWithControl(0)
+  const layoutWidth = ref(width as number)
+  const layoutHeight = ref(height as number)
+  const isToday = computed(() => isTodayFns(new Date(startDate.value)))
+
+  // -------- Handlers --------
+
+  const handleOnScroll = (e: any) => {
+    const payload = { y: e.target.scrollTop, x: e.target.scrollLeft }
+    scrollY.value = payload.y
+    scrollX.value = payload.x
+
+    const clientWidth = (width
+      ?? containerRef.value?.clientWidth) as number
+
+    const centerHour = (clientWidth - sidebarWidth.value) / 2
+    scrollXSlient.silentSet((payload.x + centerHour) / hourWidth.value)
+  }
+
+  const handleOnScrollToNow = () => {
+    if (scrollBoxRef?.value && isToday.value) {
+      const clientWidth = (width ?? containerRef.value?.clientWidth) as number
+
+      const scrollPosition = getPositionX(
+        startOfToday(),
+        dayjs(new Date()).toDate(),
+        startDate.value,
+        endDate.value,
+        hourWidth.value,
+      )
+      const scrollNow = scrollPosition - clientWidth / 2 + sidebarWidth.value
+      scrollBoxRef.value?.scrollTo({ left: scrollNow, behavior: 'smooth' })
+    }
+  }
+
+  const handleZoom = () => {
+    const clientWidth = (width
+      ?? containerRef.value?.clientWidth) as number
+    const centerHour = (clientWidth - sidebarWidth.value) / 2
+    const diff = centerHour / hourWidth.value
+    const centerDate = scrollXSlient.untrackedGet() - diff
+
+    const startDateWithTime = new Date(startDate.value)
+    const centerDateNatural = Math.floor(centerDate)
+    const centerDateDecimal = centerDate - centerDateNatural
+
+    startDateWithTime.setHours(centerDateNatural)
+    startDateWithTime.setMinutes(Math.round(centerDateDecimal * 60))
+
+    const scrollPosition = getPositionX(
+      startOfToday(),
+      startDateWithTime,
+      startDate.value,
+      endDate.value,
+      hourWidth.value,
+    )
+    nextTick(() => {
+      scrollBoxRef.value?.scrollTo({ left: scrollPosition, behavior: 'smooth' })
+    })
+  }
+
+  watch(hourWidth, () => {
+    handleZoom()
+  })
+
+  const handleOnScrollTop = (value: number = hourWidth.value) => {
+    if (scrollBoxRef?.value) {
+      const top = scrollBoxRef.value.scrollTop + value
+      scrollBoxRef.value.scrollTop = top
+    }
+  }
+
+  const handleOnScrollRight = (value: number = hourWidth.value) => {
+    if (scrollBoxRef?.value) {
+      const right = scrollBoxRef.value.scrollLeft + value
+      scrollBoxRef.value.scrollLeft = right
+    }
+  }
+
+  const handleOnScrollLeft = (value: number = hourWidth.value) => {
+    if (scrollBoxRef?.value) {
+      const left = scrollBoxRef.value.scrollLeft - value
+      scrollBoxRef.value.scrollLeft = left
+    }
+  }
+
+  const handleResizeDebounced = useDebounceFn(
+    () => {
+      if (containerRef?.value && !width) {
+        const container = containerRef.value
+        const { clientWidth } = container
+        layoutWidth.value = clientWidth
+      }
+    },
+    DEBOUNCE_WAIT * 4,
+    { maxWait: DEBOUNCE_WAIT_MAX * 4 },
+  )
+
+  // -------- Efffects --------
+  watchEffect(() => {
+    if (containerRef?.value) {
+      const container = containerRef.value
+      if (!width) {
+        const { clientWidth } = container
+        layoutWidth.value = clientWidth
+      }
+      if (!height) {
+        const { clientHeight } = container
+        layoutHeight.value = clientHeight
+      }
+    }
+  })
+
+  onMounted(() => {
+    window.addEventListener('resize', handleResizeDebounced)
+  })
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', handleResizeDebounced)
+  })
+
+  return {
+    containerRef,
+    scrollBoxRef,
+    scrollX,
+    scrollY,
+    layoutWidth,
+    layoutHeight,
+    onScroll: handleOnScroll,
+    onScrollToNow: handleOnScrollToNow,
+    onScrollTop: handleOnScrollTop,
+    onScrollLeft: handleOnScrollLeft,
+    onScrollRight: handleOnScrollRight,
+  }
+}

package/src/components/Epg/hooks/useProgram.ts

@@ -1,63 +1,63 @@
-import { format } from 'date-fns'
-
-// Import types
-import type { Ref } from 'vue'
-import type { ProgramItem } from '../helpers/types'
-
-// Import helpers
-import { PROGRAM_REFRESH, TIME_FORMAT, getLiveStatus, omit } from '../helpers'
-
-interface useProgramProps<T> {
-  program: Ref<T>
-  isBaseTimeFormat: Ref<boolean>
-  minWidth?: number
-}
-
-export function useProgram<T extends ProgramItem>({
-  program,
-  isBaseTimeFormat,
-  minWidth = 200,
-}: useProgramProps<T>) {
-  const { data, position } = program.value
-  const { width } = position
-
-  const { since, till } = data
-
-  const isLive = ref(getLiveStatus(since, till))
-
-  const formatTime = (
-    date: string | number | Date,
-    formatType: string = TIME_FORMAT.HOURS_MIN,
-  ) => format(new Date(date), formatType).replace(/\s/g, '')
-
-  const set12HoursTimeFormat = () => {
-    if (isBaseTimeFormat.value)
-      return TIME_FORMAT.BASE_HOURS_TIME
-    return TIME_FORMAT.HOURS_MIN
-  }
-
-  useIntervalFn(() => {
-    const status = getLiveStatus(since, till)
-    isLive.value = status
-  }, PROGRAM_REFRESH)
-
-  const isMinWidth = width > minWidth
-
-  return {
-    format12HoursTime: (date: string | number | Date) => formatTime(date, set12HoursTimeFormat()),
-    isLive,
-    isMinWidth,
-    styles: computed(() => {
-      const newPosition = omit(program.value.position, 'egdeEnd')
-      return {
-        width,
-        position: {
-          width: `${newPosition.width}px`,
-          height: `${newPosition.height}px`,
-          top: `${newPosition.top}px`,
-          left: `${newPosition.left}px`,
-        },
-      }
-    }),
-  }
-}
+import { format } from 'date-fns'
+
+// Import types
+import type { Ref } from 'vue'
+import type { ProgramItem } from '../helpers/types'
+
+// Import helpers
+import { PROGRAM_REFRESH, TIME_FORMAT, getLiveStatus, omit } from '../helpers'
+
+interface useProgramProps<T> {
+  program: Ref<T>
+  isBaseTimeFormat: Ref<boolean>
+  minWidth?: number
+}
+
+export function useProgram<T extends ProgramItem>({
+  program,
+  isBaseTimeFormat,
+  minWidth = 200,
+}: useProgramProps<T>) {
+  const { data, position } = program.value
+  const { width } = position
+
+  const { since, till } = data
+
+  const isLive = ref(getLiveStatus(since, till))
+
+  const formatTime = (
+    date: string | number | Date,
+    formatType: string = TIME_FORMAT.HOURS_MIN,
+  ) => format(new Date(date), formatType).replace(/\s/g, '')
+
+  const set12HoursTimeFormat = () => {
+    if (isBaseTimeFormat.value)
+      return TIME_FORMAT.BASE_HOURS_TIME
+    return TIME_FORMAT.HOURS_MIN
+  }
+
+  useIntervalFn(() => {
+    const status = getLiveStatus(since, till)
+    isLive.value = status
+  }, PROGRAM_REFRESH)
+
+  const isMinWidth = width > minWidth
+
+  return {
+    format12HoursTime: (date: string | number | Date) => formatTime(date, set12HoursTimeFormat()),
+    isLive,
+    isMinWidth,
+    styles: computed(() => {
+      const newPosition = omit(program.value.position, 'egdeEnd')
+      return {
+        width,
+        position: {
+          width: `${newPosition.width}px`,
+          height: `${newPosition.height}px`,
+          top: `${newPosition.top}px`,
+          left: `${newPosition.left}px`,
+        },
+      }
+    }),
+  }
+}

package/src/components/Epg/hooks/useTimeline.ts

@@ -1,35 +1,35 @@
-import { format } from 'date-fns'
-
-import { TIME_FORMAT, generateArray } from '../helpers'
-
-export function useTimeline(
-  numberOfHoursInDay: Ref<number>,
-  isBaseTimeFormat: Ref<boolean>,
-  divideBy?: Ref<number | undefined>,
-) {
-  const times = computed(() => generateArray(numberOfHoursInDay.value))
-  const dividers = computed(() => generateArray(divideBy?.value || 4))
-
-  function formatTimelineTime(index: number) {
-    // 1 -> 01:00
-    // 1.5 -> 01:30
-    // 1.75 -> 01:45
-    // index can be float number now base on hour
-    // const time = index < 10 ? `0${index}` : index
-    const hour = Math.floor(index)
-    const hourTime = hour < 10 ? `0${hour}` : hour
-    const minute = Math.round((index - hour) * 60)
-    const minuteTime = minute < 10 ? `0${minute}` : minute
-
-    if (isBaseTimeFormat.value) {
-      const baseDate = format(new Date(), TIME_FORMAT.DATE)
-      const date = new Date(`${baseDate}T${hour}:00:00`)
-      const timeFormat = format(date, TIME_FORMAT.BASE_HOURS_TIME)
-      return timeFormat.toLowerCase().replace(/\s/g, '')
-    }
-
-    return `${hourTime}:${minuteTime}`
-  }
-
-  return { times, dividers, formatTimelineTime }
-}
+import { format } from 'date-fns'
+
+import { TIME_FORMAT, generateArray } from '../helpers'
+
+export function useTimeline(
+  numberOfHoursInDay: Ref<number>,
+  isBaseTimeFormat: Ref<boolean>,
+  divideBy?: Ref<number | undefined>,
+) {
+  const times = computed(() => generateArray(numberOfHoursInDay.value))
+  const dividers = computed(() => generateArray(divideBy?.value || 4))
+
+  function formatTimelineTime(index: number) {
+    // 1 -> 01:00
+    // 1.5 -> 01:30
+    // 1.75 -> 01:45
+    // index can be float number now base on hour
+    // const time = index < 10 ? `0${index}` : index
+    const hour = Math.floor(index)
+    const hourTime = hour < 10 ? `0${hour}` : hour
+    const minute = Math.round((index - hour) * 60)
+    const minuteTime = minute < 10 ? `0${minute}` : minute
+
+    if (isBaseTimeFormat.value) {
+      const baseDate = format(new Date(), TIME_FORMAT.DATE)
+      const date = new Date(`${baseDate}T${hour}:00:00`)
+      const timeFormat = format(date, TIME_FORMAT.BASE_HOURS_TIME)
+      return timeFormat.toLowerCase().replace(/\s/g, '')
+    }
+
+    return `${hourTime}:${minuteTime}`
+  }
+
+  return { times, dividers, formatTimelineTime }
+}

package/src/components/Epg/index.ts

@@ -1,4 +1,4 @@
-export { default as Epg } from './Epg.vue'
-export { default as Layout } from './components/Layout.vue'
-export * from './helpers'
-export { useEpg } from './hooks/useEpg'
+export { default as Epg } from './Epg.vue'
+export { default as Layout } from './components/Layout.vue'
+export * from './helpers'
+export { useEpg } from './hooks/useEpg'