@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/Epg/components/Layout.vue

@@ -1,121 +1,121 @@
-<script lang="ts" setup>
-import type { Program as ProgramType } from '../helpers'
-import { getProgramOptions, isFutureTime } from '../helpers'
-import type { ChannelWithPosition } from '../helpers/types'
-import { useEpgStore } from '../store'
-import Line from './Line.vue'
-import Timeline from './Timeline.vue'
-import Channels from './Channels.vue'
-import Program from './Program.vue'
-
-const emit = defineEmits<{
-  (event: 'channel-click', channel: ChannelWithPosition): void
-  (event: 'program-click', program: ProgramType): void
-  (event: 'program-container-click'): void
-}>()
-
-const {
-  theme,
-  programs,
-  channels,
-  endDate,
-  dayWidth,
-  sidebarWidth,
-  itemHeight,
-  onScroll,
-  isSidebar,
-  isTimeline,
-  isLine,
-  isProgramVisible,
-  scrollBoxRef,
-} = useEpgStore()
-
-const channelsLength = computed(() => channels.value.length)
-const contentHeight = computed(() => channelsLength.value * itemHeight.value)
-
-const isFuture = computed(() => isFutureTime(endDate.value))
-
-const visiblePrograms = computed(() => programs.value.filter((item) => {
-  return isProgramVisible(item.position)
-}))
-
-const programRef = ref<HTMLElement>()
-
-onMounted(() => {
-  const scrollableDiv = scrollBoxRef.value!
-  scrollableDiv.addEventListener('wheel', (event) => {
-    event.preventDefault()
-    if (event.shiftKey) {
-      scrollableDiv.scrollLeft += event.deltaX
-    }
-    else {
-      scrollableDiv.scrollLeft += event.deltaX === 0
-        ? event.deltaY
-        : Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY
-    }
-  })
-})
-</script>
-
-<template>
-  <div
-    ref="scrollBoxRef" class="scrollbox relative h-full w-full overflow-x-auto" :style="{
-      background: `${theme.primary['900']}`,
-    }" @scroll="onScroll"
-  >
-    <Line v-if="isLine && isFuture" :height="contentHeight" />
-    <Timeline v-if="isTimeline">
-      <template #timeline="slotData">
-        <slot name="timeline" v-bind="slotData" />
-      </template>
-
-      <template #timeline-last="slotData">
-        <slot name="timeline-last" v-bind="slotData" />
-      </template>
-    </Timeline>
-
-    <Channels v-if="isSidebar" @click="(channel) => emit('channel-click', channel)">
-      <template #channel="slotData">
-        <slot name="channel" v-bind="slotData" />
-      </template>
-    </Channels>
-
-    <div
-      ref="programRef" class="relative" :style="{
-        background: `${theme.primary['900']}`,
-        height: `${contentHeight}px`,
-        width: `${dayWidth}px`,
-        left: `${isSidebar ? sidebarWidth : 0}px`,
-      }" @click="() => emit('program-container-click')"
-    >
-      <Program
-        v-for="program in visiblePrograms" :key="program.data.id" :program="getProgramOptions(program)"
-        @click="(program) => emit('program-click', program)"
-      >
-        <template #program="slotData">
-          <slot name="program" v-bind="slotData" />
-        </template>
-      </Program>
-    </div>
-  </div>
-</template>
-
-<style>
-.scrollbox::-webkit-scrollbar {
-  width: 7px;
-  height: 7px;
-}
-
-.scrollbox::-webkit-scrollbar-thumb {
-  @apply bg-gray-500/50 dark:bg-gray-500 rounded-16px;
-}
-
-.scrollbox::-webkit-scrollbar-thumb:hover {
-  @apply bg-gray-600/50 dark:bg-gray-400;
-}
-
-.scrollbox::-webkit-scrollbar-track {
-  border: 22px none v-bind('theme.white');
-  border-radius: 0px;
-}
-</style>
+<script lang="ts" setup>
+import type { Program as ProgramType } from '../helpers'
+import { getProgramOptions, isFutureTime } from '../helpers'
+import type { ChannelWithPosition } from '../helpers/types'
+import { useEpgStore } from '../store'
+import Line from './Line.vue'
+import Timeline from './Timeline.vue'
+import Channels from './Channels.vue'
+import Program from './Program.vue'
+
+const emit = defineEmits<{
+  (event: 'channel-click', channel: ChannelWithPosition): void
+  (event: 'program-click', program: ProgramType): void
+  (event: 'program-container-click'): void
+}>()
+
+const {
+  theme,
+  programs,
+  channels,
+  endDate,
+  dayWidth,
+  sidebarWidth,
+  itemHeight,
+  onScroll,
+  isSidebar,
+  isTimeline,
+  isLine,
+  isProgramVisible,
+  scrollBoxRef,
+} = useEpgStore()
+
+const channelsLength = computed(() => channels.value.length)
+const contentHeight = computed(() => channelsLength.value * itemHeight.value)
+
+const isFuture = computed(() => isFutureTime(endDate.value))
+
+const visiblePrograms = computed(() => programs.value.filter((item) => {
+  return isProgramVisible(item.position)
+}))
+
+const programRef = ref<HTMLElement>()
+
+onMounted(() => {
+  const scrollableDiv = scrollBoxRef.value!
+  scrollableDiv.addEventListener('wheel', (event) => {
+    event.preventDefault()
+    if (event.shiftKey) {
+      scrollableDiv.scrollLeft += event.deltaX
+    }
+    else {
+      scrollableDiv.scrollLeft += event.deltaX === 0
+        ? event.deltaY
+        : Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY
+    }
+  })
+})
+</script>
+
+<template>
+  <div
+    ref="scrollBoxRef" class="scrollbox relative h-full w-full overflow-x-auto" :style="{
+      background: `${theme.primary['900']}`,
+    }" @scroll="onScroll"
+  >
+    <Line v-if="isLine && isFuture" :height="contentHeight" />
+    <Timeline v-if="isTimeline">
+      <template #timeline="slotData">
+        <slot name="timeline" v-bind="slotData" />
+      </template>
+
+      <template #timeline-last="slotData">
+        <slot name="timeline-last" v-bind="slotData" />
+      </template>
+    </Timeline>
+
+    <Channels v-if="isSidebar" @click="(channel) => emit('channel-click', channel)">
+      <template #channel="slotData">
+        <slot name="channel" v-bind="slotData" />
+      </template>
+    </Channels>
+
+    <div
+      ref="programRef" class="relative" :style="{
+        background: `${theme.primary['900']}`,
+        height: `${contentHeight}px`,
+        width: `${dayWidth}px`,
+        left: `${isSidebar ? sidebarWidth : 0}px`,
+      }" @click="() => emit('program-container-click')"
+    >
+      <Program
+        v-for="program in visiblePrograms" :key="program.data.id" :program="getProgramOptions(program)"
+        @click="(program) => emit('program-click', program)"
+      >
+        <template #program="slotData">
+          <slot name="program" v-bind="slotData" />
+        </template>
+      </Program>
+    </div>
+  </div>
+</template>
+
+<style>
+.scrollbox::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+}
+
+.scrollbox::-webkit-scrollbar-thumb {
+  @apply bg-gray-500/50 dark:bg-gray-500 rounded-16px;
+}
+
+.scrollbox::-webkit-scrollbar-thumb:hover {
+  @apply bg-gray-600/50 dark:bg-gray-400;
+}
+
+.scrollbox::-webkit-scrollbar-track {
+  border: 22px none v-bind('theme.white');
+  border-radius: 0px;
+}
+</style>

package/src/components/Epg/components/Line.vue

@@ -1,41 +1,41 @@
-<script lang="ts" setup>
-import { isToday, startOfDay } from 'date-fns'
-import { dayjs } from 'element-plus'
-
-import { getPositionX } from '../helpers'
-import { useEpgStore } from '../store'
-
-defineProps<{
-  height: number
-}>()
-
-const { theme, startDate, endDate, hourWidth, sidebarWidth, isSidebar, timezoneOffset } = useEpgStore()
-
-function getX() {
-  return getPositionX(
-    startOfDay(new Date(startDate.value)),
-    dayjs(new Date()).toDate(),
-    startDate.value,
-    endDate.value,
-    hourWidth.value,
-  ) + (isSidebar.value
-    ? sidebarWidth.value
-    : 0)
-}
-
-const positionX = ref(getX())
-
-useIntervalFn(() => {
-  positionX.value = getX()
-}, 2000)
-</script>
-
-<template>
-  <div
-    v-if="isToday(new Date(startDate))" class="absolute z-1000 w-2px" :style="{
-      height: `${height + 40}px`,
-      left: `${positionX}px`,
-      background: `${theme.green['300']}`,
-    }"
-  />
-</template>
+<script lang="ts" setup>
+import { isToday, startOfDay } from 'date-fns'
+import { dayjs } from 'element-plus'
+
+import { getPositionX } from '../helpers'
+import { useEpgStore } from '../store'
+
+defineProps<{
+  height: number
+}>()
+
+const { theme, startDate, endDate, hourWidth, sidebarWidth, isSidebar, timezoneOffset } = useEpgStore()
+
+function getX() {
+  return getPositionX(
+    startOfDay(new Date(startDate.value)),
+    dayjs(new Date()).toDate(),
+    startDate.value,
+    endDate.value,
+    hourWidth.value,
+  ) + (isSidebar.value
+    ? sidebarWidth.value
+    : 0)
+}
+
+const positionX = ref(getX())
+
+useIntervalFn(() => {
+  positionX.value = getX()
+}, 2000)
+</script>
+
+<template>
+  <div
+    v-if="isToday(new Date(startDate))" class="absolute z-1000 w-2px" :style="{
+      height: `${height + 40}px`,
+      left: `${positionX}px`,
+      background: `${theme.green['300']}`,
+    }"
+  />
+</template>

package/src/components/Epg/components/Loader.vue

@@ -1,23 +1,23 @@
-<script lang="ts" setup>
-import { useEpgStore } from '../store'
-
-const { theme } = useEpgStore()
-</script>
-
-<template>
-  <div
-    class="absolute inset-0 z-1000 flex items-center justify-center" :style="{
-      background: `${theme.loader.bg}`,
-      color: `${theme.white}`,
-    }"
-  >
-    <svg class="mr-3 h-5 w-5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-      <path
-        class="opacity-75" fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      />
-    </svg>
-    Loading...
-  </div>
-</template>
+<script lang="ts" setup>
+import { useEpgStore } from '../store'
+
+const { theme } = useEpgStore()
+</script>
+
+<template>
+  <div
+    class="absolute inset-0 z-1000 flex items-center justify-center" :style="{
+      background: `${theme.loader.bg}`,
+      color: `${theme.white}`,
+    }"
+  >
+    <svg class="mr-3 h-5 w-5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+      <path
+        class="opacity-75" fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+    Loading...
+  </div>
+</template>

package/src/components/Epg/components/Program.vue

@@ -1,101 +1,101 @@
-<script lang="ts" setup>
-import type { ProgramItem } from '../helpers/types'
-import { useProgram } from '../hooks'
-import type { Program as ProgramType } from '../helpers/interfaces'
-import { useEpgStore } from '../store'
-
-const props = defineProps<{
-  program: ProgramItem
-}>()
-
-const emit = defineEmits<
-  (event: 'click', v: ProgramType) => void
->()
-const { theme, isBaseTimeFormat } = useEpgStore()
-
-const data = computed(() => props.program.data)
-const program = useProgram({
-  program: toRef(props, 'program'),
-  isBaseTimeFormat,
-})
-
-const { styles, format12HoursTime, isLive, isMinWidth } = program
-</script>
-
-<template>
-  <div
-    data-testid="program-item" class="absolute overflow-hidden" :style="{
-      ...styles.position,
-      paddingRight: `${styles.width === 0 ? 0 : 2}px`,
-    }" @click="emit('click', data)"
-  >
-    <slot name="program" v-bind="{ ...program, theme }" :data="data">
-      <div
-        data-testid="program-content"
-        class="program-item relative z-1 h-full flex cursor-pointer overflow-hidden rounded-8px text-11px transition-all duration-400 ease-in-out"
-        :style="{
-          padding: `10px ${styles.width < 30 ? 4 : 20}px`,
-        }" :class="{
-          'is-live': isLive,
-        }"
-      >
-        <div class="w-full flex justify-start">
-          <img v-if="isLive && isMinWidth" class="mr-15px w-100px rounded-6px" :src="data.image" alt="Preview">
-          <div class="overflow-hidden">
-            <div
-              class="mb-5px mt-0 truncate text-left text-14px font-medium" :style="{
-                color: `${theme.grey['300']}`,
-              }"
-            >
-              {{ data.title }}
-            </div>
-            <div
-              class="block truncate text-left text-12.5px font-normal" :style="{
-                color: `${theme.text.grey['500']}`,
-              }" aria-label="program time"
-            >
-              {{ format12HoursTime(data.since) }} -{{ " " }}
-              {{ format12HoursTime(data.till) }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </slot>
-  </div>
-</template>
-
-<style>
-.program-item {
-  background-image: linear-gradient(
-    to right,
-    v-bind('theme.primary[600]'),
-    v-bind('theme.primary[600]')
-  );
-}
-
-.program-item:hover {
-  background-image: linear-gradient(
-    to right,
-    v-bind('theme.gradient.blue[900]'),
-    v-bind('theme.gradient.blue[600]')
-  );
-}
-
-.program-item.is-live {
-  background-image: linear-gradient(
-    to right,
-    v-bind('theme.gradient.blue[900]'),
-    v-bind('theme.gradient.blue[600]'),
-    v-bind('theme.gradient.blue[300]')
-  );
-}
-
-.program-item.is-hide {
-  background-image: linear-gradient(
-    to right,
-    v-bind('theme.timeline.divider.bg'),
-    v-bind('theme.timeline.divider.bg')
-  );
-  opacity: 0.4;
-}
-</style>
+<script lang="ts" setup>
+import type { ProgramItem } from '../helpers/types'
+import { useProgram } from '../hooks'
+import type { Program as ProgramType } from '../helpers/interfaces'
+import { useEpgStore } from '../store'
+
+const props = defineProps<{
+  program: ProgramItem
+}>()
+
+const emit = defineEmits<
+  (event: 'click', v: ProgramType) => void
+>()
+const { theme, isBaseTimeFormat } = useEpgStore()
+
+const data = computed(() => props.program.data)
+const program = useProgram({
+  program: toRef(props, 'program'),
+  isBaseTimeFormat,
+})
+
+const { styles, format12HoursTime, isLive, isMinWidth } = program
+</script>
+
+<template>
+  <div
+    data-testid="program-item" class="absolute overflow-hidden" :style="{
+      ...styles.position,
+      paddingRight: `${styles.width === 0 ? 0 : 2}px`,
+    }" @click="emit('click', data)"
+  >
+    <slot name="program" v-bind="{ ...program, theme }" :data="data">
+      <div
+        data-testid="program-content"
+        class="program-item relative z-1 h-full flex cursor-pointer overflow-hidden rounded-8px text-11px transition-all duration-400 ease-in-out"
+        :style="{
+          padding: `10px ${styles.width < 30 ? 4 : 20}px`,
+        }" :class="{
+          'is-live': isLive,
+        }"
+      >
+        <div class="w-full flex justify-start">
+          <img v-if="isLive && isMinWidth" class="mr-15px w-100px rounded-6px" :src="data.image" alt="Preview">
+          <div class="overflow-hidden">
+            <div
+              class="mb-5px mt-0 truncate text-left text-14px font-medium" :style="{
+                color: `${theme.grey['300']}`,
+              }"
+            >
+              {{ data.title }}
+            </div>
+            <div
+              class="block truncate text-left text-12.5px font-normal" :style="{
+                color: `${theme.text.grey['500']}`,
+              }" aria-label="program time"
+            >
+              {{ format12HoursTime(data.since) }} -{{ " " }}
+              {{ format12HoursTime(data.till) }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<style>
+.program-item {
+  background-image: linear-gradient(
+    to right,
+    v-bind('theme.primary[600]'),
+    v-bind('theme.primary[600]')
+  );
+}
+
+.program-item:hover {
+  background-image: linear-gradient(
+    to right,
+    v-bind('theme.gradient.blue[900]'),
+    v-bind('theme.gradient.blue[600]')
+  );
+}
+
+.program-item.is-live {
+  background-image: linear-gradient(
+    to right,
+    v-bind('theme.gradient.blue[900]'),
+    v-bind('theme.gradient.blue[600]'),
+    v-bind('theme.gradient.blue[300]')
+  );
+}
+
+.program-item.is-hide {
+  background-image: linear-gradient(
+    to right,
+    v-bind('theme.timeline.divider.bg'),
+    v-bind('theme.timeline.divider.bg')
+  );
+  opacity: 0.4;
+}
+</style>

package/src/components/Epg/components/SideBar.vue

@@ -1,18 +1,18 @@
-<script lang="ts" setup>
-import { TIMELINE_HEIGHT } from '../helpers'
-import { useEpgStore } from '../store'
-
-const { theme, sidebarWidth } = useEpgStore()
-</script>
-
-<template>
-  <div
-    class="absolute left-0 top-0 z-900" :style="{
-      width: `${sidebarWidth}px`,
-      height: `${TIMELINE_HEIGHT}px`,
-      background: `${theme.primary[900]}`,
-    }"
-  >
-    <div />
-  </div>
-</template>
+<script lang="ts" setup>
+import { TIMELINE_HEIGHT } from '../helpers'
+import { useEpgStore } from '../store'
+
+const { theme, sidebarWidth } = useEpgStore()
+</script>
+
+<template>
+  <div
+    class="absolute left-0 top-0 z-900" :style="{
+      width: `${sidebarWidth}px`,
+      height: `${TIMELINE_HEIGHT}px`,
+      background: `${theme.primary[900]}`,
+    }"
+  >
+    <div />
+  </div>
+</template>