@sigmaott/base-next 1.0.6

package/src/components/Epg/store.ts

@@ -0,0 +1,85 @@
+import type { ChannelWithPosition, DateTime, Position, ProgramItem } from './helpers/types'
+import type { Theme } from './helpers'
+
+export interface EpgStore {
+  theme: MaybeRefOrGetter<Theme>
+  sidebarWidth: MaybeRefOrGetter<number>
+  divideBy?: Ref<number>
+  scrollX?: MaybeRef<number>
+  // Update move
+  width?: Ref<number>
+  height?: Ref<number>
+  isSidebar: Ref<boolean>
+  isTimeline: Ref<boolean>
+  isLine: Ref<boolean>
+  containerRef: Ref<HTMLElement>
+  scrollBoxRef: Ref<HTMLElement>
+
+  isLoading: Ref<boolean>
+
+  programs: Ref<ProgramItem[]>
+  channels: Ref<ChannelWithPosition[]>
+
+  startDate: Ref<DateTime>
+  endDate: Ref<DateTime>
+
+  scrollY: Ref<number>
+  dayWidth: Ref<number>
+  hourWidth: Ref<number>
+  numberOfHoursInDay: Ref<number>
+  offsetStartHoursRange: Ref<number>
+  itemHeight: Ref<number>
+
+  onScroll: (e: Event) => void
+  isBaseTimeFormat: Ref<boolean>
+  isProgramVisible: (position: Position) => boolean
+  isChannelVisible: (position: Pick<Position, 'top'>) => boolean
+
+  timezoneOffset: Ref<number>
+}
+
+const [useProvideEpgStore, _useEpgStore] = createInjectionState((store: EpgStore) => {
+  const theme = toRef(store.theme)
+  const sidebarWidth = toRef(store.sidebarWidth)
+  const scrollX = toRef(store.scrollX)
+
+  return {
+    theme,
+    sidebarWidth,
+    divideBy: store.divideBy,
+    scrollX,
+    width: store.width,
+    height: store.height,
+    isSidebar: store.isSidebar,
+    isTimeline: store.isTimeline,
+    isLine: store.isLine,
+    isLoading: store.isLoading,
+    containerRef: store.containerRef,
+    programs: store.programs,
+    channels: store.channels,
+
+    startDate: store.startDate,
+    endDate: store.endDate,
+    scrollY: store.scrollY,
+    dayWidth: store.dayWidth,
+    hourWidth: store.hourWidth,
+    numberOfHoursInDay: store.numberOfHoursInDay,
+    offsetStartHoursRange: store.offsetStartHoursRange,
+    itemHeight: store.itemHeight,
+    onScroll: store.onScroll,
+    isBaseTimeFormat: store.isBaseTimeFormat,
+    isProgramVisible: store.isProgramVisible,
+    isChannelVisible: store.isChannelVisible,
+    scrollBoxRef: store.scrollBoxRef,
+    timezoneOffset: store.timezoneOffset,
+  }
+})
+
+export { useProvideEpgStore }
+
+export function useEpgStore() {
+  const store = _useEpgStore()
+  if (store == null)
+    throw new Error('Please call `useProvideEpgStore` on the appropriate parent component')
+  return store
+}

package/src/components/Epg/theme.ts

@@ -0,0 +1,44 @@
+export const theme = {
+  primary: {
+    600: '#1a202c',
+    900: '#171923',
+  },
+  grey: { 300: '#d1d1d1' },
+  white: '#fff',
+  green: {
+    300: '#2C7A7B',
+  },
+  loader: {
+    teal: '#5DDADB',
+    purple: '#3437A2',
+    pink: '#F78EB6',
+    bg: '#171923db',
+  },
+  scrollbar: {
+    border: '#ffffff',
+    thumb: {
+      bg: '#e1e1e1',
+    },
+  },
+
+  gradient: {
+    blue: {
+      300: '#002eb3',
+      600: '#002360',
+      900: '#051937',
+    },
+  },
+
+  text: {
+    grey: {
+      300: '#a0aec0',
+      500: '#718096',
+    },
+  },
+
+  timeline: {
+    divider: {
+      bg: '#718096',
+    },
+  },
+}

package/src/components/Exception/403.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import i403 from './403.png'
+
+const props = defineProps<{
+  onReturn?: Function
+  message?: string
+}>()
+
+const router = useRouter()
+
+function goHome() {
+  if (props.onReturn) {
+    props.onReturn()
+    return
+  }
+  router.push('/')
+}
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <el-card class="el-card-full relative z-100">
+    <div class="not-container">
+      <img :src="i403" class="not-img" alt="403">
+      <div class="not-detail">
+        <h2>{{ t('global.error') }} 403</h2>
+        <h4>{{ message || t('403.messsage') }}</h4>
+        <div>
+          <slot name="action">
+            <el-button type="primary" @click="goHome">
+              {{ $t('app.back-to-app-list') }}
+            </el-button>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<style scoped lang="scss">
+@import './index.scss';
+</style>
+
+<i18n lang="yaml" global>
+en:
+  '403':
+    messsage: 'Sorry, you don''t have permission to visit this page'
+  '404':
+    message: 'Sorry, the page you visit does not exist'
+  returnHome: Return homepage
+vi:
+  '403':
+    messsage: 'Xin lỗi, bạn không có quyền truy cập trang này'
+  '404':
+    message: 'Xin lỗi, trang bạn truy cập không tồn tại'
+  returnHome: Trở lại trang chủ
+</i18n>

package/src/components/Exception/404.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import i404 from './404.png'
+
+const router = useRouter()
+
+function goHome() {
+  if (isSubApp) {
+    const { microProps } = useMicroProps()
+    microProps.value?.refreshMicroApp()
+  }
+  else {
+    router.push('/apps')
+  }
+}
+const { t } = useI18n()
+
+onMounted(() => {
+  if (isSubApp) {
+    if (router.currentRoute.value.path.endsWith('/empty')) {
+      const { microProps } = useMicroProps()
+      microProps.value?.refreshMicroApp()
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="not-container bg-background">
+    <img :src="i404" class="not-img" alt="404">
+    <div class="not-detail">
+      <h2>{{ t('global.error') }} 404</h2>
+      <h4>{{ t('404.message') }}</h4>
+      <div>
+        <el-button type="primary" @click="goHome">
+          {{ t('returnHome') }}
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import './index.scss';
+</style>
+
+<i18n lang="yaml">
+en:
+  '403':
+    messsage: Sorry, you have no permission to visit this page
+  '404':
+    message: Sorry, the page you visit does not exist
+  returnHome: Return homepage
+vi:
+  '403':
+    messsage: Xin lỗi, bạn không có quyền truy cập trang này
+  '404':
+    message: Xin lỗi, trang bạn truy cập không tồn tại
+  returnHome: Trở lại trang chủ
+  </i18n>

package/src/components/Exception/500.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import i500 from './500.png'
+
+const router = useRouter()
+
+function goHome() {
+  router.push('/apps')
+}
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="not-container">
+    <img :src="i500" class="not-img" alt="500">
+    <div class="not-detail">
+      <h2>{{ t('global.error') }} 500</h2>
+      <h4>{{ t('sorry-your-network-is-gone') }}</h4>
+      <div>
+        <el-button type="primary" @click="goHome()">
+          {{ $t('app.back-to-app-list') }}
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import './index.scss';
+</style>
+
+<i18n lang="yaml">
+en:
+  sorry-your-network-is-gone: Sorry, your network is gone
+  returnHome: Return homepage
+vi:
+  sorry-your-network-is-gone: Xin lỗi, mạng của bạn không còn nữa
+  returnHome: Trở lại trang chủ
+  </i18n>

package/src/components/Exception/index.scss

@@ -0,0 +1,30 @@
+.not-container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	.not-img {
+		margin-right: 120px;
+	}
+	.not-detail {
+		display: flex;
+		flex-direction: column;
+		h2,
+		h4 {
+			padding: 0;
+			margin: 0;
+		}
+		h2 {
+			font-size: 60px;
+			color: #434e59;
+		}
+		h4 {
+			margin: 30px 0 20px;
+			font-size: 19px;
+			font-weight: normal;
+			color: #848587;
+			text-wrap: pretty;
+		}
+	}
+}

package/src/components/Field.vue

@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import { isEmpty, isNil, isNumber } from 'remeda'
+
+const { label, value, type, labelPosition, tagType, showTooltip, contentTooltip, size } = withDefaults(defineProps<{
+  label?: string
+  value?: string | boolean | string[] | number
+  type?: 'text' | 'status' | 'link' | 'tags' | 'tag' | 'progress' | 'dropdown' | 'icon' | 'aiIcon'
+  copy?: boolean
+  tagType?: string
+  labelPosition?: 'left' | 'top'
+  labelWidth?: string
+  showTooltip?: boolean
+  contentTooltip?: string
+  size?: 'large' | 'default' | 'small'
+}>(), {
+  type: 'text',
+})
+
+const emit = defineEmits('open')
+
+function mapStatus(status: string) {
+  switch (status.toLowerCase()) {
+    case 'running':
+    case 'available':
+    case 'enable':
+    case 'used':
+    case 'complete':
+    case 'completed':
+    case 'valid':
+    case 'on':
+    case 'synced':
+    case 'installed':
+      return {
+        color: 'text-success!',
+        icon: 'i-carbon:checkmark-outline',
+      }
+    case 'dead':
+    case 'freezed':
+    case 'expired':
+    case 'disable':
+    case 'disabled':
+    case 'error':
+    case 'sync error':
+    case 'invalid':
+    case 'incomplete':
+    case 'off':
+    case 'not installed':
+      return {
+        color: 'text-danger!',
+        icon: 'i-carbon:close-outline',
+      }
+    case 'paused':
+    case 'payment_pending':
+    case 'unpaid':
+    case 'stopped':
+    case 'no-response':
+      return {
+        color: 'text-warning!',
+        icon: 'i-carbon:close-outline',
+      }
+    case 'not sync':
+      return {
+        color: 'text-info!',
+        icon: 'i-carbon:subtract-alt',
+      }
+    case 'syncing':
+      return {
+        color: 'text-warning!',
+        icon: 'i-carbon:update-now',
+      }
+    default:
+      return {
+        color: '',
+        icon: '',
+      }
+  }
+}
+
+function checkEmpty(value: any): boolean {
+  if (isNil(value))
+    return true
+  else if (isEmpty(value) && !isNumber(value))
+    return true
+
+  return false
+}
+
+const { mouseEnter, disabledTooltip } = useTooltipEllipsis()
+</script>
+
+<template>
+  <div class="mb-1 min-w-0" :class="[{ 'flex items-center gap-1': labelPosition === 'left' }]">
+    <div :style="{ width: labelWidth }">
+      <slot name="label">
+        <el-text
+          :size
+          tag="b"
+          class="block font-extrabold"
+          :style="{ width: labelWidth }"
+        >
+          {{ label }}
+        </el-text>
+      </slot>
+    </div>
+    <slot name="content">
+      <template v-if="!checkEmpty(value) || type === 'aiIcon'">
+        <div v-if="type === 'link'">
+          <el-text
+            :size
+            tag="ins"
+            class="cursor-pointer"
+            type="primary"
+            truncated
+            @click="emit('open')"
+          >
+            {{ value }}
+          </el-text>
+        </div>
+        <template v-else-if="type === 'status'">
+          <el-tooltip effect="dark" :content="contentTooltip" :disabled="!showTooltip">
+            <div :class="mapStatus(value).color" class="flex items-center gap-1">
+              <div :class="mapStatus(value).icon" />
+              <el-text :size truncated :class="mapStatus(value).color">
+                {{ uppercaseFirst(value) }}
+              </el-text>
+            </div>
+          </el-tooltip>
+        </template>
+        <div v-else-if="type === 'tags' && value.length > 0">
+          <SSCollapseTagsTooltip :tags="value" />
+        </div>
+        <div v-else-if="type === 'tag'">
+          <el-tag :type="tagType === 'video' ? 'info' : tagType === 'audio' ? 'warning' : 'primary'" effect="light" round>
+            {{ uppercaseFirst(tagType) }}
+          </el-tag>
+        </div>
+        <div v-else-if="type === 'progress'">
+          <el-progress :text-inside="true" :stroke-width="16" :percentage="value" />
+        </div>
+        <div v-else-if="type === 'dropdown'">
+          <el-dropdown placement="bottom">
+            <el-button> {{ value?.length }} </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <template v-for="(i, idx) in value || []" :key="idx">
+                  <div class="truncate p-1 px-2 text-14px">
+                    {{ i }}
+                  </div>
+                </template>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+        <div v-else-if="type === 'icon'">
+          <div v-if="value" class="i-carbon:checkmark-filled text-success" />
+          <div v-else class="i-carbon:subtract-alt text-error" />
+        </div>
+        <div v-else-if="type === 'aiIcon'">
+          <div v-if="value" class="flex items-center gap-2">
+            <div class="i-carbon:checkmark-filled text-16px text-success" />
+            <div class="font-semibold">
+              Used
+            </div>
+          </div>
+          <div v-else class="flex items-center gap-2">
+            <div class="i-carbon:close-outline text-16px" />
+            <div class="font-semibold">
+              Unused
+            </div>
+          </div>
+        </div>
+        <div v-else class="min-w-0 flex items-center gap-1">
+          <el-tooltip :disabled="disabledTooltip">
+            <div class="truncate text-14px" @mouseenter="mouseEnter">
+              {{ value }}
+            </div>
+            <template #content>
+              <div class="max-h-200px max-w-240px overflow-auto">
+                {{ value }}
+              </div>
+            </template>
+          </el-tooltip>
+          <SSIconCopyButton v-if="copy" :value="value" />
+        </div>
+      </template>
+      <template v-else>
+        <el-text :size>
+          -
+        </el-text>
+      </template>
+    </slot>
+  </div>
+</template>