@mptw/skylens-ui 1.4.109 → 1.5.1

package/app/components/SLSidebarNav.vue

@@ -0,0 +1,487 @@
+<template lang="pug">
+.sidebar(:class="{ closure: closuredProxy, dark, introing }")
+  .sidebar-modal(@click="onClickedToggle")
+  .sidebar-intro-modal
+  .sidebar-wrapper
+    .sidebar-logo
+      a.logo(href="javascript:;" @click="onClickedLogo")
+        img.color-big(src="~ui/app/assets/images/commons/app-logo-big.svg", @load='onLogoLoaded')
+        img.white-big(src="~ui/app/assets/images/commons/app-logo-big-white.svg", @load='onLogoLoaded')
+        img.color-small(src='~ui/app/assets/images/commons/app-logo-small.svg', @load='onLogoLoaded')
+        img.white-small(src='~ui/app/assets/images/commons/app-logo-small-white.svg', @load='onLogoLoaded')
+    nav.site-nav
+      .nav-wrapper.custom-scrollbar-y
+        template(v-for='item in config')
+          SLSidebarNavLinkItem(
+            v-if='item.navType === "link"'
+            :nav-collapsed='closured'
+            :item-config='item'
+            @click:item='onClickedItem'
+          )
+          SLSidebarNavSectionItem(
+            v-else-if='item.navType === "section"'
+            :nav-collapsed='closured'
+            :item-config='item'
+            @click:item='onClickedItem'
+          )
+          SLSidebarNavGroupItem(
+            v-else-if='item.navType === "group"'
+            :nav-collapsed='closured'
+            :nav-dark='dark'
+            :item-config='item'
+            @click:item='onClickedItem'
+          )
+          .sidebar-nav-divide-item(
+            v-else
+          )
+    .sidebar-mode-setting
+      .sidebar-mode-setting-title 選單模式
+      SLIOSSwitch(
+        :modelValue="dark"
+        trueLabel="深色"
+        minTrueLabel="深"
+        falseLabel="淺色"
+        minFalseLabel="淺"
+        :size="closuredProxy ? 'min' : 'xs'"
+        :color='switchColor'
+        @update:modelValue="onUpdatedMode"
+      )
+    a.sidebar-toggle(href="javascript:;", @click="onClickedToggle")
+      SLIcon(icon="chevron-left")
+      SLIcon(icon="chevron-right")
+  .sidebar-nav-intro(ref='introEl')
+    .sidebar-nav-intro-header {{ navLinkIntro ? navLinkIntro.title : '' }}
+    .sidebar-nav-intro-body {{ navLinkIntro ? navLinkIntro.content : '' }}
+    .sidebar-nav-intro-footer
+      SLButton(
+        title='我知道了',
+        color='primary'
+        size='sm'
+        @click='onClickedCloseIntro'
+      )
+    .sidebar-nav-intro-arrow
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import { createPopper } from "@popperjs/core";
+import type { Instance as PopperInstance } from "@popperjs/core";
+import { NavType, type NavConfigType } from "~ui/app/interface/NavConfigType";
+
+export default defineComponent({
+  name: "SLSidebarNav",
+  props: {
+    dark: {
+      type: Boolean,
+      default: false,
+    },
+    closured: {
+      type: Boolean,
+      default: false,
+    },
+    config: {
+      type: Array as PropType<NavConfigType>,
+      default: () => [],
+    },
+    navIntros: {
+      type: Array as PropType<
+        {
+          code: string;
+          title: string;
+          content: string;
+          targetCode: string;
+        }[]
+      >,
+      default: () => [],
+    },
+    switchColor: {
+      type: String,
+      default: "",
+      validator: (v: string) => ["", "primary-600", "primary"].includes(v),
+    },
+  },
+  emits: [
+    "click:logo",
+    "update:dark",
+    "update:closured",
+    "click:insight",
+    "close:intro",
+    "logo:loaded",
+  ],
+  setup(props, { emit }) {
+    const { closured, navIntros } = toRefs(props);
+
+    const introEl = ref<HTMLElement | null>(null);
+    const introing = ref(false);
+
+    const closuredProxy = computed({
+      get: () => closured.value,
+      set: (newValue) => emit("update:closured", newValue),
+    });
+
+    let introPopperInstance: PopperInstance | null = null;
+
+    const navLinkIntro = computed(() => navIntros.value[0]);
+
+    function onClickedToggle() {
+      if (introing.value) return;
+
+      closuredProxy.value = !closuredProxy.value;
+    }
+
+    function onClickedLogo() {
+      emit("click:logo");
+    }
+
+    function onClickedItem(
+      eventName:
+        | "click:logo"
+        | "update:dark"
+        | "update:closured"
+        | "click:insight",
+    ) {
+      emit(eventName);
+    }
+
+    function onUpdatedMode(isDark: boolean) {
+      emit("update:dark", isDark);
+    }
+
+    function createIntroPopper() {
+      destroyIntroPopper();
+
+      if (!navLinkIntro.value) return;
+
+      const navLinkIndexEl = document.getElementById(
+        `nav-link-${navLinkIntro.value.targetCode}`,
+      );
+
+      if (!introEl.value || !navLinkIndexEl) return;
+
+      introPopperInstance = createPopper(navLinkIndexEl, introEl.value, {
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [-6, 39],
+            },
+          },
+        ],
+        placement: "right-start",
+      });
+    }
+
+    function destroyIntroPopper() {
+      if (introPopperInstance) {
+        introPopperInstance.destroy();
+      }
+      introPopperInstance = null;
+    }
+
+    async function showLinkIntro() {
+      await nextTick();
+
+      if (!introEl.value || !introPopperInstance) return;
+
+      introEl.value.setAttribute("data-show", "");
+      introPopperInstance.setOptions((options) => ({
+        ...options,
+        modifiers: [
+          ...(options.modifiers || []),
+          { name: "eventListeners", enabled: true },
+        ],
+      }));
+      introPopperInstance.update();
+      introing.value = true;
+    }
+
+    function hideLinkIntro() {
+      introing.value = false;
+
+      if (!introEl.value || !introPopperInstance) return;
+
+      introEl.value.removeAttribute("data-show");
+      introPopperInstance.setOptions((options) => ({
+        ...options,
+        modifiers: [
+          ...(options.modifiers || []),
+          { name: "eventListeners", enabled: false },
+        ],
+      }));
+    }
+
+    function displayLinkIntro() {
+      if (!navLinkIntro.value) return;
+
+      createIntroPopper();
+      showLinkIntro();
+    }
+
+    function onClickedCloseIntro() {
+      hideLinkIntro();
+
+      if (!navLinkIntro.value) return;
+
+      emit("close:intro", navLinkIntro.value.code);
+    }
+
+    function onLogoLoaded() {
+      emit("logo:loaded");
+    }
+
+    return {
+      introEl,
+      introing,
+      closuredProxy,
+      navLinkIntro,
+      onClickedToggle,
+      onClickedLogo,
+      onClickedItem,
+      onUpdatedMode,
+      displayLinkIntro,
+      onClickedCloseIntro,
+      onLogoLoaded,
+    };
+  },
+});
+</script>
+
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+.sidebar {
+  @apply relative h-full;
+}
+
+.sidebar.dark .sidebar-wrapper {
+  @apply bg-primary-800;
+}
+
+.sidebar.dark.closure .sidebar-logo .logo img.color-small {
+  @apply lg:hidden;
+}
+
+.sidebar.dark.closure .sidebar-logo .logo img.white-big {
+  @apply lg:hidden;
+}
+
+.sidebar.dark.closure .sidebar-logo .logo img.white-small {
+  @apply lg:block;
+}
+
+.sidebar.dark.closure .sidebar-toggle {
+  @apply bg-primary-900;
+}
+
+.sidebar.dark.closure .sidebar-toggle:hover {
+  @apply bg-primary-600;
+}
+
+.sidebar.dark .sidebar-logo .logo img.color-big {
+  @apply hidden;
+}
+
+.sidebar.dark .sidebar-logo .logo img.white-big {
+  @apply block;
+}
+
+.sidebar.dark nav .nav-wrapper.custom-scrollbar-y::-webkit-scrollbar-thumb {
+  @apply bg-primary-600;
+}
+
+.sidebar.dark
+  nav
+  .nav-wrapper.custom-scrollbar-y::-webkit-scrollbar-thumb:hover {
+  @apply bg-primary-600;
+}
+
+.sidebar.dark .sidebar-mode-setting {
+  @apply text-white;
+}
+
+.sidebar.dark .sidebar-mode-setting .ios-switch label {
+  @apply bg-nav-color-switch-bg border-primary-600;
+}
+
+.sidebar.dark .sidebar-mode-setting .ios-switch label::before {
+  @apply border-primary-600 bg-primary-300;
+}
+
+.sidebar.dark .sidebar-toggle {
+  @apply bg-primary-900 text-white;
+}
+
+.sidebar.dark .sidebar-toggle:hover {
+  @apply bg-primary-600;
+}
+
+.sidebar.closure .sidebar-modal {
+  @apply hidden;
+}
+
+.sidebar.closure .sidebar-wrapper {
+  @apply -ml-[188px] lg:ml-0 lg:w-[84px];
+}
+
+.sidebar.closure .sidebar-logo {
+  @apply lg:py-3 lg:px-0;
+}
+
+.sidebar.closure .sidebar-logo .logo img.color-big {
+  @apply lg:hidden;
+}
+
+.sidebar.closure .sidebar-logo .logo img.color-small {
+  @apply lg:block;
+}
+
+.sidebar.closure .sidebar-toggle {
+  @apply -mr-5 bg-primary-300 rounded-l-none rounded-r-xl text-white;
+}
+
+.sidebar.closure .sidebar-toggle:hover {
+  @apply bg-primary-400 text-white;
+}
+
+.sidebar.closure .sidebar-toggle .icon-chevron-left {
+  @apply hidden;
+}
+
+.sidebar.closure .sidebar-toggle .icon-chevron-right {
+  @apply inline-block;
+}
+
+.sidebar.closure nav.site-nav .nav-wrapper {
+  @apply lg:items-center;
+}
+
+.sidebar.closure .sidebar-mode-setting {
+  @apply p-0 justify-center space-x-0;
+}
+
+.sidebar.closure .sidebar-mode-setting-title {
+  @apply hidden;
+}
+
+.sidebar.closure .sidebar-mode-setting .ios-switch {
+  @apply grow-0 shrink-0;
+}
+
+.sidebar.introing .sidebar-intro-modal {
+  @apply block;
+}
+
+.sidebar.introing .sidebar-wrapper {
+  @apply pointer-events-none;
+}
+
+.sidebar-modal {
+  @apply fixed top-0 left-0 w-full h-full bg-white opacity-0 lg:hidden;
+}
+
+.sidebar-intro-modal {
+  @apply fixed top-0 left-0 w-full h-full bg-mask/80 hidden;
+}
+
+.sidebar-wrapper {
+  @apply relative flex flex-col w-[188px] h-full bg-white rounded-r-lg shadow-default transition-all;
+}
+
+.sidebar-logo {
+  @apply grow-0 shrink-0 relative flex justify-center py-4 pr-11 pl-6 transition-all;
+}
+
+.sidebar-logo .logo {
+  @apply block;
+}
+
+.sidebar-logo .logo img.white-big,
+.sidebar-logo .logo img.white-small,
+.sidebar-logo .logo img.color-small {
+  @apply hidden;
+}
+
+.sidebar nav.site-nav {
+  @apply grow px-1 overflow-hidden;
+}
+
+.sidebar nav.site-nav .nav-wrapper {
+  @apply flex flex-col h-full px-3;
+}
+
+.sidebar nav.site-nav .nav-wrapper .sidebar-nav-divide-item {
+  @apply w-full h-px my-2 bg-primary-200;
+}
+
+.sidebar .sidebar-mode-setting {
+  @apply grow-0 shrink-0 flex items-center justify-start my-4 pl-4 space-x-2 text-xs text-primary;
+}
+
+.sidebar .sidebar-mode-setting-title {
+  @apply grow-0 shrink-0;
+}
+
+.sidebar .sidebar-mode-setting .ios-switch {
+  @apply grow-0 shrink-0;
+}
+
+.sidebar .sidebar-mode-setting .ios-switch label {
+  @apply border-primary-100 bg-primary-25;
+}
+
+.sidebar .sidebar-mode-setting .ios-switch label::before {
+  @apply border-primary-100;
+}
+
+.sidebar-toggle {
+  @apply absolute top-0 right-0 flex justify-center items-center w-5 h-10 mt-2.5 bg-primary-50 rounded-l-xl text-sm text-primary-500 leading-none transition-all;
+}
+
+.sidebar-toggle:hover {
+  @apply bg-primary-300 text-white;
+}
+
+.sidebar-toggle .icon-chevron-right {
+  @apply hidden;
+}
+
+.sidebar-nav-intro {
+  @apply w-[288px] p-4 bg-white rounded-lg hidden;
+}
+
+.sidebar-nav-intro[data-show] {
+  @apply block;
+}
+
+.sidebar-nav-intro[data-popper-placement^="right"] > .sidebar-nav-intro-arrow {
+  @apply -left-3.75 top-4;
+}
+
+.sidebar-nav-intro-header {
+  @apply mb-2 text-base font-bold text-primary;
+}
+
+.sidebar-nav-intro-body {
+  @apply mb-4 text-base text-pgray-2 whitespace-pre-line;
+}
+
+.sidebar-nav-intro-footer {
+  @apply text-right;
+}
+
+.sidebar-nav-intro-arrow,
+.sidebar-nav-intro-arrow::before {
+  @apply absolute w-[17px] h-[20px] bg-contain;
+  background: url("~ui/app/assets/images/commons/nav-intro-arrow.svg") top left
+    no-repeat;
+}
+
+.sidebar-nav-intro-arrow {
+  @apply invisible;
+}
+
+.sidebar-nav-intro-arrow::before {
+  content: "";
+  @apply visible;
+}
+</style>

package/{components → app/components}/SLSidebarNavGroupItem.vue

@@ -11,10 +11,10 @@
 </template>
 
 <script lang="ts">
-import type { NavItemGroup } from '~/interface/NavConfigType';
+import type { NavItemGroup } from "~ui/app/interface/NavConfigType";
 
 export default defineComponent({
-  name: 'SLSidebarNavGroupItem',
+  name: "SLSidebarNavGroupItem",
   props: {
     navCollapsed: {
       type: Boolean,
@@ -29,18 +29,21 @@ export default defineComponent({
       required: true,
     },
   },
-  emits: ['click:item'],
+  emits: ["click:item"],
   setup() {
     return {};
   },
 });
 </script>
 
-<style lang="stylus">
-.sidebar.dark
-  .sidebar-nav-group-item
-    @apply bg-primary-900
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-.sidebar-nav-group-item
-  @apply w-full mt-1 p-2 space-y-1 bg-primary-50 rounded-lg
-</style>
+.sidebar.dark .sidebar-nav-group-item {
+  @apply bg-primary-900;
+}
+
+.sidebar-nav-group-item {
+  @apply w-full mt-1 p-2 space-y-1 bg-primary-50 rounded-lg;
+}
+</style>