@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/DefaultLayout/DefaultLayout.vue

@@ -1,134 +1,134 @@
-<script lang="ts" setup>
-import '../../assets/global.css'
-import type { RouteRecordRaw } from 'vue-router'
-import viVN from 'element-plus/es/locale/lang/vi'
-import enEN from 'element-plus/es/locale/lang/en'
-import HelpPanel from '../HelpPanel.vue'
-import GlobalASide from './GlobalASide.vue'
-import GlobalHeader from './GlobalHeader.vue'
-import GlobalFooter from './GlobalFooter.vue'
-
-const props = withDefaults(defineProps<{
-  namespace?: string
-  asideWidth?: number
-  name?: string
-  routes: RouteRecordRaw[]
-  logoSrc?: string
-  padding?: number
-  layoutMode?: 'vertical' | 'horizontal'
-  version?: string
-}>(), { namespace: 'el', padding: 12 })
-
-const ns = toRef(props, 'namespace')
-const { locale } = useI18n({
-  useScope: 'global',
-})
-
-const viVNCustom = { ...viVN }
-viVNCustom.el.datepicker.year = ''
-viVNCustom.el.pagination.goto = 'Nhảy tới trang'
-
-const localeConfig = computed(() => locale.value === 'vi' ? viVN : enEN)
-const _layoutMode = useVModel(props, 'layoutMode', undefined, { defaultValue: 'vertical', passive: true })
-
-const layoutMode = isSubApp ? microState.value?.meta?.layoutMode : _layoutMode
-
-const showAside = computed(() => layoutMode?.value === 'vertical')
-
-useProvideLayoutStore({
-  ...toRefs(props),
-  layoutMode,
-})
-
-const { microProps } = useSyncMicroApp()
-
-// Chunk error
-
-useNuxtApp().hook('app:chunkError', () => {
-  window.parent.location.reload()
-})
-</script>
-
-<template>
-  <NuxtLoadingIndicator />
-  <el-config-provider :locale="localeConfig" :namespace="ns">
-    <el-container class="h-full w-full">
-      <GlobalASide v-if="showAside">
-        <template #logo>
-          <slot name="logo" />
-        </template>
-        <template #header>
-          <slot name="aside-header" />
-        </template>
-        <template #extra>
-          <slot name="extra" />
-        </template>
-        <template #footer>
-          <slot name="aside-footer" />
-        </template>
-      </GlobalASide>
-      <el-container>
-        <slot name="notification" />
-        <el-header v-if="!showAside && microProps?.header !== false" :style="`--${ns}-header-padding: 0px;`">
-          <GlobalHeader>
-            <template #logo>
-              <slot name="logo" />
-            </template>
-            <template #extra>
-              <slot name="extra" />
-            </template>
-          </GlobalHeader>
-        </el-header>
-        <el-main
-          id="main-container"
-          class="bg-fill"
-          :style="{
-            [`--${ns}-main-padding`]: `${padding}px`,
-          }"
-        >
-          <slot />
-        </el-main>
-      </el-container>
-    </el-container>
-    <HelpPanel />
-  </el-config-provider>
-</template>
-
-<style>
-.el-notification__content {
-  text-align: left !important;
-}
-
-.el-table .cell {
-  word-break: break-word !important;
-}
-
-.scroll-custom-app::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-  /* background-color: #F5F5F5; */
-}
-
-.scroll-custom-app::-webkit-scrollbar-thumb {
-  background-color: #f4f4f8d3;
-  border-radius: 10px;
-  transition: all 0.2s ease-in-out;
-}
-</style>
-
-<i18n lang="yaml" global>
-en:
-  global:
-    loading: Loading...
-    went_wrong: Something went wrong, please try again later
-    error: Error
-  '403':
-    messsage_mutation: Your account is currently view-only and does not have editing permissions
-vi:
-  global:
-    loading: Đang tải...
-    went_wrong: Có lỗi xảy ra, vui lòng thử lại sau
-    error: Lỗi
-  '403':
-    messsage_mutation: Tài khoản của bạn hiện ở chế độ chỉ xem và không có quyền chỉnh sửa
-</i18n>
+<script lang="ts" setup>
+import '../../assets/global.css'
+import type { RouteRecordRaw } from 'vue-router'
+import viVN from 'element-plus/es/locale/lang/vi'
+import enEN from 'element-plus/es/locale/lang/en'
+import HelpPanel from '../HelpPanel.vue'
+import GlobalASide from './GlobalASide.vue'
+import GlobalHeader from './GlobalHeader.vue'
+import GlobalFooter from './GlobalFooter.vue'
+
+const props = withDefaults(defineProps<{
+  namespace?: string
+  asideWidth?: number
+  name?: string
+  routes: RouteRecordRaw[]
+  logoSrc?: string
+  padding?: number
+  layoutMode?: 'vertical' | 'horizontal'
+  version?: string
+}>(), { namespace: 'el', padding: 12 })
+
+const ns = toRef(props, 'namespace')
+const { locale } = useI18n({
+  useScope: 'global',
+})
+
+const viVNCustom = { ...viVN }
+viVNCustom.el.datepicker.year = ''
+viVNCustom.el.pagination.goto = 'Nhảy tới trang'
+
+const localeConfig = computed(() => locale.value === 'vi' ? viVN : enEN)
+const _layoutMode = useVModel(props, 'layoutMode', undefined, { defaultValue: 'vertical', passive: true })
+
+const layoutMode = isSubApp ? microState.value?.meta?.layoutMode : _layoutMode
+
+const showAside = computed(() => layoutMode?.value === 'vertical')
+
+useProvideLayoutStore({
+  ...toRefs(props),
+  layoutMode,
+})
+
+const { microProps } = useSyncMicroApp()
+
+// Chunk error
+
+useNuxtApp().hook('app:chunkError', () => {
+  window.parent.location.reload()
+})
+</script>
+
+<template>
+  <NuxtLoadingIndicator />
+  <el-config-provider :locale="localeConfig" :namespace="ns">
+    <el-container class="h-full w-full">
+      <GlobalASide v-if="showAside">
+        <template #logo>
+          <slot name="logo" />
+        </template>
+        <template #header>
+          <slot name="aside-header" />
+        </template>
+        <template #extra>
+          <slot name="extra" />
+        </template>
+        <template #footer>
+          <slot name="aside-footer" />
+        </template>
+      </GlobalASide>
+      <el-container>
+        <slot name="notification" />
+        <el-header v-if="!showAside && microProps?.header !== false" :style="`--${ns}-header-padding: 0px;`">
+          <GlobalHeader>
+            <template #logo>
+              <slot name="logo" />
+            </template>
+            <template #extra>
+              <slot name="extra" />
+            </template>
+          </GlobalHeader>
+        </el-header>
+        <el-main
+          id="main-container"
+          class="bg-fill"
+          :style="{
+            [`--${ns}-main-padding`]: `${padding}px`,
+          }"
+        >
+          <slot />
+        </el-main>
+      </el-container>
+    </el-container>
+    <HelpPanel />
+  </el-config-provider>
+</template>
+
+<style>
+.el-notification__content {
+  text-align: left !important;
+}
+
+.el-table .cell {
+  word-break: break-word !important;
+}
+
+.scroll-custom-app::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  /* background-color: #F5F5F5; */
+}
+
+.scroll-custom-app::-webkit-scrollbar-thumb {
+  background-color: #f4f4f8d3;
+  border-radius: 10px;
+  transition: all 0.2s ease-in-out;
+}
+</style>
+
+<i18n lang="yaml" global>
+en:
+  global:
+    loading: Loading...
+    went_wrong: Something went wrong, please try again later
+    error: Error
+  '403':
+    messsage_mutation: Your account is currently view-only and does not have editing permissions
+vi:
+  global:
+    loading: Đang tải...
+    went_wrong: Có lỗi xảy ra, vui lòng thử lại sau
+    error: Lỗi
+  '403':
+    messsage_mutation: Tài khoản của bạn hiện ở chế độ chỉ xem và không có quyền chỉnh sửa
+</i18n>

package/src/components/DefaultLayout/GlobalASide.vue

@@ -1,75 +1,75 @@
-<script lang="ts" setup>
-import Logo from './Logo.vue'
-import Menu from './Menu.vue'
-
-const { asideWidth, asideCollapsed, backgroundColor, toggleAside, backgroundColorLogo, rightMenu, isDark } = useLayoutStore()
-const yearNow = new Date().getFullYear()
-const toggleDark = useToggle(isDark)
-</script>
-
-<template>
-  <el-aside
-    width="auto"
-    class="relative z-11 h-full flex flex-col transition-all duration-300 ease !of-x-hidden"
-    :style="{
-      backgroundColor,
-      width: asideCollapsed ? '64px' : `${asideWidth}px`,
-    }"
-  >
-    <Logo>
-      <template #logo>
-        <slot name="logo" />
-      </template>
-    </Logo>
-    <slot name="header" />
-    <div class="relative flex-grow">
-      <div class="absolute inset-0 of-hidden">
-        <el-scrollbar :style="{ backgroundColor }">
-          <slot name="content">
-            <Menu>
-              <template #default>
-                <slot name="extra" />
-              </template>
-            </menu>
-          </slot>
-        </el-scrollbar>
-      </div>
-    </div>
-
-    <slot name="footer" />
-    <div class="flex flex-col justify-between">
-      <div v-if="rightMenu" class="flex flex-grow">
-        <!-- <RightMenu /> -->
-      </div>
-
-      <button
-        class="flex items-center justify-center py-6px"
-        :style="{ backgroundColor: backgroundColorLogo }"
-        @click="toggleAside()"
-      >
-        <el-icon :size="22">
-          <div v-if="asideCollapsed" class="i-ep:expand text-white" />
-          <div v-else class="i-ep:fold text-white" />
-        </el-icon>
-      </button>
-
-      <div
-        :style="{ backgroundColor: backgroundColorLogo }"
-        class="flex items-center justify-center gap-12px py-6px"
-      >
-        <button class="h-22px w-22px text-white" @click="toggleDark()">
-          <el-icon class="i-ep:sunny dark:i-ep:moon text-18px" />
-        </button>
-
-        <div v-if="!asideCollapsed" class="text-center text-xs text-white font-500">
-          <span v-if="!asideCollapsed">
-            Sigma Streaming {{ yearNow }}
-          </span>
-          <span>
-            ©
-          </span>
-        </div>
-      </div>
-    </div>
-  </el-aside>
-</template>
+<script lang="ts" setup>
+import Logo from './Logo.vue'
+import Menu from './Menu.vue'
+
+const { asideWidth, asideCollapsed, backgroundColor, toggleAside, backgroundColorLogo, rightMenu, isDark } = useLayoutStore()
+const yearNow = new Date().getFullYear()
+const toggleDark = useToggle(isDark)
+</script>
+
+<template>
+  <el-aside
+    width="auto"
+    class="relative z-11 h-full flex flex-col transition-all duration-300 ease !of-x-hidden"
+    :style="{
+      backgroundColor,
+      width: asideCollapsed ? '64px' : `${asideWidth}px`,
+    }"
+  >
+    <Logo>
+      <template #logo>
+        <slot name="logo" />
+      </template>
+    </Logo>
+    <slot name="header" />
+    <div class="relative flex-grow">
+      <div class="absolute inset-0 of-hidden">
+        <el-scrollbar :style="{ backgroundColor }">
+          <slot name="content">
+            <Menu>
+              <template #default>
+                <slot name="extra" />
+              </template>
+            </menu>
+          </slot>
+        </el-scrollbar>
+      </div>
+    </div>
+
+    <slot name="footer" />
+    <div class="flex flex-col justify-between">
+      <div v-if="rightMenu" class="flex flex-grow">
+        <!-- <RightMenu /> -->
+      </div>
+
+      <button
+        class="flex items-center justify-center py-6px"
+        :style="{ backgroundColor: backgroundColorLogo }"
+        @click="toggleAside()"
+      >
+        <el-icon :size="22">
+          <div v-if="asideCollapsed" class="i-ep:expand text-white" />
+          <div v-else class="i-ep:fold text-white" />
+        </el-icon>
+      </button>
+
+      <div
+        :style="{ backgroundColor: backgroundColorLogo }"
+        class="flex items-center justify-center gap-12px py-6px"
+      >
+        <button class="h-22px w-22px text-white" @click="toggleDark()">
+          <el-icon class="i-ep:sunny dark:i-ep:moon text-18px" />
+        </button>
+
+        <div v-if="!asideCollapsed" class="text-center text-xs text-white font-500">
+          <span v-if="!asideCollapsed">
+            Sigma Streaming {{ yearNow }}
+          </span>
+          <span>
+            ©
+          </span>
+        </div>
+      </div>
+    </div>
+  </el-aside>
+</template>

package/src/components/DefaultLayout/GlobalFooter.vue

@@ -1,15 +1,15 @@
-<script setup lang="ts">
-const { backgroundColorLogo, version } = useLayoutStore()
-
-const yearNow = new Date().getFullYear()
-</script>
-
-<template>
-  <div
-    class="h-full flex cursor-default items-center justify-center !border-border" :style="{
-      backgroundColor: backgroundColorLogo,
-    }"
-  >
-    <span class="text-sm font-500 text-white"> {{ yearNow }} © By Sigma Streaming (v{{ version }}-{{ getBuildTime() }}).</span>
-  </div>
-</template>
+<script setup lang="ts">
+const { backgroundColorLogo, version } = useLayoutStore()
+
+const yearNow = new Date().getFullYear()
+</script>
+
+<template>
+  <div
+    class="h-full flex cursor-default items-center justify-center !border-border" :style="{
+      backgroundColor: backgroundColorLogo,
+    }"
+  >
+    <span class="text-sm font-500 text-white"> {{ yearNow }} © By Sigma Streaming (v{{ version }}-{{ getBuildTime() }}).</span>
+  </div>
+</template>

package/src/components/DefaultLayout/GlobalHeader.vue

@@ -1,43 +1,43 @@
-<script lang="ts" setup>
-import Menu from './Menu.vue'
-import Logo from './Logo.vue'
-import RightMenu from './RightMenu.vue'
-
-const { microProps } = useMicroProps()
-
-const hideMenu = computed(() => {
-  return microProps.value?.hideMenu
-})
-
-const rightMenu = computed(() => {
-  return microProps.value?.rightMenu !== false
-})
-</script>
-
-<template>
-  <div class="grid grid-cols-[auto_1fr] w-full gap-4 of-hidden bg-fill-blank px-2 shadow">
-    <Logo>
-      <template #logo>
-        <slot name="logo" />
-      </template>
-    </Logo>
-    <div class="relative">
-      <div class="absolute inset-0">
-        <Menu v-if="!hideMenu">
-          <template #default>
-            <slot name="extra" />
-          </template>
-        </Menu>
-      </div>
-    </div>
-    <div v-if="rightMenu" class="flex-grow">
-      <RightMenu />
-    </div>
-  </div>
-</template>
-
-<style>
-.el-custom.el-menu-item.is-active {
-  border-bottom: 0px;
-}
-</style>
+<script lang="ts" setup>
+import Menu from './Menu.vue'
+import Logo from './Logo.vue'
+import RightMenu from './RightMenu.vue'
+
+const { microProps } = useMicroProps()
+
+const hideMenu = computed(() => {
+  return microProps.value?.hideMenu
+})
+
+const rightMenu = computed(() => {
+  return microProps.value?.rightMenu !== false
+})
+</script>
+
+<template>
+  <div class="grid grid-cols-[auto_1fr] w-full gap-4 of-hidden bg-fill-blank px-2 shadow">
+    <Logo>
+      <template #logo>
+        <slot name="logo" />
+      </template>
+    </Logo>
+    <div class="relative">
+      <div class="absolute inset-0">
+        <Menu v-if="!hideMenu">
+          <template #default>
+            <slot name="extra" />
+          </template>
+        </Menu>
+      </div>
+    </div>
+    <div v-if="rightMenu" class="flex-grow">
+      <RightMenu />
+    </div>
+  </div>
+</template>
+
+<style>
+.el-custom.el-menu-item.is-active {
+  border-bottom: 0px;
+}
+</style>

package/src/components/DefaultLayout/Logo.vue

@@ -1,35 +1,35 @@
-<script lang="ts" setup>
-const { asideCollapsed, title, version, backgroundColorLogo, showAside, layoutMode } = useLayoutStore()
-const config = useRuntimeConfig()
-</script>
-
-<template>
-  <div
-    id="tour-1"
-    class="min-h-60px flex items-center gap-2 px-1 py-2"
-    :style="{
-      backgroundColor: showAside ? backgroundColorLogo : 'transparent',
-    }"
-    :class="[showAside ? 'max-w-200px' : '']"
-  >
-    <slot name="logo">
-      <img :src="config.public.logo ?? '/logo.png'" class="h-40px w-40px">
-    </slot>
-
-    <div v-if="!asideCollapsed || !showAside">
-      <p
-        class="font-bold"
-        :class="showAside ? ' text-white' : 'sigma-layout-title text-18px'"
-        :style="{
-          fontSize: showAside ? config.public.titleFontSize || '22px' : undefined,
-        }"
-      >
-        {{ title }}
-      </p>
-
-      <p class="text-xs font-500" :class="showAside ? 'text-text-secondary' : 'text-text-secondary'">
-        v{{ version }}-{{ getBuildTime() }}
-      </p>
-    </div>
-  </div>
-</template>
+<script lang="ts" setup>
+const { asideCollapsed, title, version, backgroundColorLogo, showAside, layoutMode } = useLayoutStore()
+const config = useRuntimeConfig()
+</script>
+
+<template>
+  <div
+    id="tour-1"
+    class="min-h-60px flex items-center gap-2 px-1 py-2"
+    :style="{
+      backgroundColor: showAside ? backgroundColorLogo : 'transparent',
+    }"
+    :class="[showAside ? 'max-w-200px' : '']"
+  >
+    <slot name="logo">
+      <img :src="config.public.logo ?? '/logo.png'" class="h-40px w-40px">
+    </slot>
+
+    <div v-if="!asideCollapsed || !showAside">
+      <p
+        class="font-bold"
+        :class="showAside ? ' text-white' : 'sigma-layout-title text-18px'"
+        :style="{
+          fontSize: showAside ? config.public.titleFontSize || '22px' : undefined,
+        }"
+      >
+        {{ title }}
+      </p>
+
+      <p class="text-xs font-500" :class="showAside ? 'text-text-secondary' : 'text-text-secondary'">
+        v{{ version }}-{{ getBuildTime() }}
+      </p>
+    </div>
+  </div>
+</template>