@mptw/skylens-ui 1.4.109 → 1.5.1

package/components/SLSidebarNav.vue

@@ -1,427 +0,0 @@
-<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="~/assets/images/commons/app-logo-big.svg", @load='onLogoLoaded')
-        img.white-big(src="~/assets/images/commons/app-logo-big-white.svg", @load='onLogoLoaded')
-        img.color-small(src='~/assets/images/commons/app-logo-small.svg', @load='onLogoLoaded')
-        img.white-small(src='~/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 "~/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 lang="stylus">
-.sidebar
-  @apply relative h-full
-
-  &.dark
-    .sidebar-wrapper
-      @apply bg-primary-800
-
-    &.closure
-      .sidebar-logo
-        .logo
-          img.color-small
-            @apply s('lg:hidden')
-
-          img.white-big
-            @apply s('lg:hidden')
-
-          img.white-small
-            @apply s('lg:block')
-
-      .sidebar-toggle
-        @apply bg-primary-900
-
-        &:hover
-          @apply bg-primary-600
-
-    .sidebar-logo
-      .logo
-        img.color-big
-          @apply hidden
-
-        img.white-big
-          @apply block
-
-    nav
-      .nav-wrapper.custom-scrollbar-y
-        /* Handle */
-        &::-webkit-scrollbar-thumb
-          @apply bg-primary-600
-
-        /* Handle on hover */
-        &::-webkit-scrollbar-thumb:hover
-          @apply bg-primary-600
-
-    .sidebar-mode-setting
-      @apply text-white
-
-      .ios-switch
-        label
-          @apply bg-nav-color-switch-bg border-primary-600
-
-          &:before
-            @apply border-primary-600 bg-primary-300
-
-    .sidebar-toggle
-      @apply bg-primary-900 text-white
-
-      &:hover
-        @apply bg-primary-600
-
-  &.closure
-    .sidebar-modal
-      @apply hidden
-
-    .sidebar-wrapper
-      @apply s('-ml-[188px]')
-      @apply s('lg:ml-0') s('lg:w-[84px]')
-
-    .sidebar-logo
-      @apply s('lg:py-3') s('lg:px-0')
-      .logo
-        img.color-big
-          @apply s('lg:hidden')
-
-        img.color-small
-          @apply s('lg:block')
-
-    .sidebar-toggle
-      @apply s('-mr-5') bg-primary-300 rounded-l-none rounded-r-xl text-white
-
-      &:hover
-        @apply bg-primary-400 text-white
-
-      .icon-chevron-left
-        @apply hidden
-
-      .icon-chevron-right
-        @apply inline-block
-
-    nav.site-nav
-      .nav-wrapper
-        @apply s('lg:items-center')
-
-    .sidebar-mode-setting
-      @apply p-0 justify-center space-x-0
-
-      &-title
-        @apply hidden
-
-      .ios-switch
-        @apply flex-grow-0 flex-shrink-0
-
-  &.introing
-    .sidebar-intro-modal
-      @apply block
-
-    .sidebar-wrapper
-      @apply pointer-events-none
-
-  &-modal
-    @apply fixed top-0 left-0 w-full h-full bg-white opacity-0
-    @apply s('lg:hidden')
-
-  &-intro-modal
-    @apply fixed top-0 left-0 w-full h-full s('bg-mask/80') hidden
-
-  &-wrapper
-    @apply relative flex flex-col s('w-[188px]') h-full bg-white rounded-r-lg shadow transition-all
-
-  &-logo
-    @apply flex-grow-0 flex-shrink-0 relative flex justify-center py-4 pr-11 pl-6 transition-all
-
-    .logo
-      @apply block
-
-      img.white-big, img.white-small, img.color-small
-        @apply hidden
-
-  nav.site-nav
-    @apply flex-grow px-1 overflow-hidden
-
-    .nav-wrapper
-      @apply flex flex-col h-full px-3
-
-      .sidebar-nav-divide-item
-        @apply w-full h-px my-2 bg-primary-200
-
-  .sidebar-mode-setting
-    @apply flex-grow-0 flex-shrink-0 flex items-center justify-start my-4 pl-4 space-x-2 text-xs text-primary
-
-    &-title
-      @apply flex-grow-0 flex-shrink-0
-
-    .ios-switch
-      @apply flex-grow-0 flex-shrink-0
-
-      label
-        @apply border-primary-100 bg-primary-25
-
-        &:before
-          @apply border-primary-100
-
-  &-toggle
-    @apply absolute top-0 right-0 flex justify-center items-center w-5 h-10 s('mt-2.5') bg-primary-50 rounded-l-xl text-sm text-primary-500 leading-none transition-all
-
-    &:hover
-      @apply bg-primary-300 text-white
-
-    .icon-chevron-right
-      @apply hidden
-
-  &-nav-intro
-    @apply s('w-[288px]') p-4 bg-white rounded-lg hidden
-
-    &[data-show]
-      @apply block
-
-    &[data-popper-placement^='right'] > &-arrow
-      @apply s('-left-3.75') s('top-4')
-
-    &-header
-      @apply mb-2 text-base font-bold text-primary
-
-    &-body
-      @apply mb-4 text-base text-pgray-2 whitespace-pre-line
-
-    &-footer
-      @apply text-right
-
-    &-arrow, &-arrow:before
-      @apply absolute s('w-[17px]') s('h-[20px]') bg-contain
-      background url('~/assets/images/commons/nav-intro-arrow.svg') top left no-repeat
-
-    &-arrow
-      @apply invisible
-
-      &:before
-        content ''
-        @apply visible
-</style>