@mptw/skylens-ui 1.4.34 → 1.4.36

package/components/SLSidebarNavGroupItemSection.vue

@@ -0,0 +1,435 @@
+<template lang="pug">
+.sidebar-nav-group-item-section(:class='{ collapsed }')
+  .sidebar-nav-group-item-section-header(
+    :class='{ "router-link-active": isLinkActive, "router-link-exact-active": isLinkExactActive, active: actived }'
+    ref='headerEl'
+    @mouseenter='onIconMouseEnter',
+    @mouseleave='onIconMouseLeave'
+  )
+    NuxtLink.sidebar-nav-group-item-section-header-left(
+      :to='itemConfig.to ? itemConfig.to : "javascript:;"',
+      :external='!itemConfig.to',
+      @mousedown='onMouseDownLink',
+      @mouseup='onMouseUpLink',
+      @click='onClickedSectionItem'
+    )
+      SLIcon(:icon='itemConfig.preIcon')
+    .sidebar-nav-group-item-section-header-right
+      NuxtLink.sidebar-nav-group-section-title(
+        :to='itemConfig.to ? itemConfig.to : "javascript:;"',
+        :external='!itemConfig.to',
+        @mousedown='onMouseDownLink',
+        @mouseup='onMouseUpLink',
+        @click='onClickedSectionItem'
+      ) {{ itemConfig.title }}
+      .sidebar-nav-group-item-section-status
+        a.sidebar-nav-group-item-section-toggle-btn(
+          v-if='itemConfig.status === "normal"'
+          href='javascript:;'
+          @mousedown='onMouseDownToggle',
+          @mouseup='onMouseUpLink',
+          @click='onClickedToggle'
+        )
+          SLIcon(icon='sort-down')
+  .sidebar-nav-group-item-section-body(ref='bodyEl')
+    .sidebar-nav-group-item-section-body-wrapper
+      NuxtLink.sidebar-nav-group-item-section-link(
+        v-for='(link, i) in itemConfig.links'
+        :to='link.to ? link.to : "javascript:;"',
+        :external='!link.to',
+        :key='link.code'
+        @click='onClickedLinkItem(link.emit)'
+      ) {{ link.title }}
+  ClientOnly
+    Teleport(to='#nav')
+      .sidebar-nav-group-item-section-popup(
+        :class='{ single: itemConfig.links.length === 0 }'
+        ref='popupEl'
+        @mouseenter='onPopupMouseEnter'
+        @mouseleave='onIconMouseLeave'
+      )
+        NuxtLink.sidebar-nav-group-item-section-popup-link(
+          :to='itemConfig.to ? itemConfig.to : "javascript:;"',
+          :external='!itemConfig.to',
+          @click='onClickedSectionItem'
+        )
+          .sidebar-nav-group-item-section-popup-link-title {{ itemConfig.title }}
+          .sidebar-nav-group-item-section-popup-link-icon(v-if='itemConfig.status === "plus"')
+            SLIcon(icon='add')
+        .sidebar-nav-group-item-section-popup-divide(v-if='itemConfig.links.length > 0')
+        NuxtLink.sidebar-nav-group-item-section-popup-link(
+          v-for='(link, i) in itemConfig.links'
+          :to='link.to ? link.to : "javascript:;"',
+          :external='!link.to',
+          :key='link.code'
+          @click='onClickedLinkItem(link.emit)'
+        )
+          .sidebar-nav-group-item-section-popup-link-title {{ link.title }}
+</template>
+
+<script lang="ts">
+import { fromEvent, Subscription } from 'rxjs';
+import gsap from 'gsap';
+import { createPopper } from '@popperjs/core';
+import type { Instance as PopperInstance } from '@popperjs/core';
+import { NavItemStatus, type NavItemSection } from '~/interface/NavConfigType';
+
+export default defineComponent({
+  name: 'SLSidebarNavGroupItemSection',
+  props: {
+    navCollapsed: {
+      type: Boolean,
+      default: false,
+    },
+    itemConfig: {
+      type: Object as PropType<NavItemSection>,
+      required: true,
+    },
+  },
+  emits: ['click:item'],
+  setup(props, { emit }) {
+    const route = useRoute();
+
+    const { navCollapsed, itemConfig } = toRefs(props);
+
+    const headerEl = shallowRef<HTMLDivElement | null>(null);
+    const bodyEl = shallowRef<HTMLDivElement | null>(null);
+    const popupEl = shallowRef<HTMLDivElement | null>(null);
+    const collapsed = ref(false);
+    const actived = ref(false);
+
+    let windowDragEndSubscription: Subscription | null = null;
+    let collapseTween: GSAPTween | null = null;
+    let popperInstance: PopperInstance | null = null;
+    let popupHideTimeoutId: any = null;
+
+    const isLinkActive = computed(() => {
+      if (!itemConfig.value.to) return false;
+
+      return route.path.includes(itemConfig.value.to);
+    });
+    const isLinkExactActive = computed(() => {
+      if (!itemConfig.value.to) return false;
+
+      if (itemConfig.value.code === 'M01') {
+        return ['/application/web', '/application/web/create'].includes(route.path);
+      } else if (itemConfig.value.code === 'M02') {
+        return ['/application/poi', '/application/poi/create'].includes(route.path);
+      }
+
+      return route.path === itemConfig.value.to;
+    });
+
+    function onClickedSectionItem() {
+      if (itemConfig.value.to || !itemConfig.value.emit) return;
+
+      emit('click:item', itemConfig.value.emit);
+    }
+
+    function onClickedToggle() {
+      if (!collapsed.value && isLinkActive.value && !isLinkExactActive.value) return;
+      collapsed.value = !collapsed.value;
+    }
+
+    function onMouseDownLink() {
+      actived.value = true;
+    }
+
+    function onMouseUpLink() {
+      actived.value = false;
+    }
+
+    function onMouseDownToggle() {
+      if (itemConfig.value.status === NavItemStatus.Plus) {
+        actived.value = true;
+      }
+    }
+
+    function onClickedLinkItem(emitEvent?: string) {
+      if (emitEvent) {
+        emit('click:item', emitEvent);
+      }
+    }
+
+    function destroyWindowDragEndSubscription() {
+      if (windowDragEndSubscription) {
+        windowDragEndSubscription.unsubscribe();
+      }
+      windowDragEndSubscription = null;
+    }
+
+    function clearTween() {
+      if (collapseTween) {
+        collapseTween.kill();
+      }
+      collapseTween = null;
+    }
+
+    function onCollapse() {
+      clearTween();
+
+      const bodyWrapper = bodyEl.value?.querySelector('.sidebar-nav-group-item-section-body-wrapper');
+      if (!bodyEl.value || !bodyWrapper) return;
+
+      const wrapperRect = bodyWrapper.getBoundingClientRect();
+      collapseTween = gsap.to(bodyEl.value, {
+        height: 0,
+        duration: 0.3,
+        ease: 'power2.out',
+        onStart: () => {
+          if (!bodyEl.value) return;
+          bodyEl.value.style.height = `${wrapperRect.height + 4}px`;
+        },
+      });
+    }
+
+    function onExpand() {
+      clearTween();
+      
+      const bodyWrapper = bodyEl.value?.querySelector('.sidebar-nav-group-item-section-body-wrapper');
+      if (!bodyEl.value || !bodyWrapper) return;
+
+      const wrapperRect = bodyWrapper.getBoundingClientRect();
+      collapseTween = gsap.to(bodyEl.value, {
+        height: wrapperRect.height + 4,
+        duration: 0.3,
+        ease: 'power2.out',
+        onComplete: () => {
+          if (!bodyEl.value) return;
+          bodyEl.value.removeAttribute('style');
+        },
+      });
+    }
+
+    function showPopup() {
+      if (
+        !headerEl.value ||
+        !popupEl.value ||
+        popupEl.value.hasAttribute('data-show') ||
+        !popperInstance
+      )
+        return;
+
+      popupEl.value.setAttribute('data-show', '');
+      popperInstance.setOptions((options) => ({
+        ...options,
+        modifiers: [
+          ...(options.modifiers || []),
+          { name: 'eventListeners', enabled: true },
+        ],
+      }));
+      popperInstance.update();
+    }
+
+    function clearDisappearTimeout() {
+      if (popupHideTimeoutId) {
+        clearTimeout(popupHideTimeoutId);
+      }
+      popupHideTimeoutId = null;
+    }
+
+    function onIconMouseEnter() {
+      clearDisappearTimeout();
+      
+      if (!navCollapsed.value) return;
+
+      showPopup();
+    }
+
+    function hidePopup() {
+      if (!popupEl.value || !popperInstance) return;
+
+      popupEl.value.removeAttribute('data-show');
+      popperInstance.setOptions((options) => ({
+        ...options,
+        modifiers: [
+          ...(options.modifiers || []),
+          { name: 'eventListeners', enabled: false },
+        ],
+      }));
+    }
+
+    function onIconMouseLeave() {
+      clearDisappearTimeout();
+
+      popupHideTimeoutId = setTimeout(hidePopup, 300);
+    }
+
+    function onPopupMouseEnter() {
+      clearDisappearTimeout();
+    }
+
+    function setupPopper() {
+      nextTick(() => {
+        if (!headerEl.value || !popupEl.value) return;
+        popperInstance = createPopper(headerEl.value, popupEl.value, {
+          placement: 'right-start',
+          strategy: 'fixed',
+          modifiers: [
+            {
+              name: 'offset',
+              options: {
+                offset: [0, 12],
+              },
+            },
+            { name: 'eventListeners', enabled: false },
+          ],
+        });
+      });
+    }
+
+    function destroyPopper() {
+      if (popperInstance) {
+        popperInstance.destroy();
+      }
+      popperInstance = null;
+    }
+
+    watch(collapsed, () => {
+      if (collapsed.value) {
+        onCollapse();
+        return;
+      }
+
+      onExpand();
+    })
+
+    watch(isLinkActive, () => {
+      if (navCollapsed.value) return;
+
+      collapsed.value = !isLinkActive.value;
+    });
+
+    watch(navCollapsed, () => {
+      if (navCollapsed.value) {
+        collapsed.value = true;
+        return;
+      }
+
+      collapsed.value = !isLinkActive.value;
+    });
+
+    onMounted(() => {
+      collapsed.value = !isLinkActive.value;
+
+      destroyWindowDragEndSubscription();
+      windowDragEndSubscription = fromEvent(window, 'dragend').subscribe((e) => {
+        actived.value = false;
+      });
+
+      setupPopper();
+    });
+
+    onBeforeUnmount(() => {
+      destroyWindowDragEndSubscription();
+      clearDisappearTimeout();
+      destroyPopper();
+    });
+
+    return {
+      headerEl,
+      bodyEl,
+      popupEl,
+      collapsed,
+      actived,
+      isLinkActive,
+      isLinkExactActive,
+      onClickedSectionItem,
+      onClickedToggle,
+      onMouseDownLink,
+      onMouseUpLink,
+      onMouseDownToggle,
+      onClickedLinkItem,
+      onIconMouseEnter,
+      onIconMouseLeave,
+      onPopupMouseEnter,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.sidebar.closure
+  .sidebar-nav-group-item-section
+    @apply items-center
+
+    &-header
+      @apply s('lg:p-2') s('lg:rounded-full') s('lg:text-lg')
+
+      &-left
+        @apply s('lg:inline-flex')
+
+      &-right
+        @apply s('lg:hidden')
+
+
+.sidebar-nav-group-item-section
+  @apply flex flex-col
+
+  &.collapsed
+    .sidebar-nav-group-item-section-header
+      &-right
+        .sidebar-nav-group-item-section-status
+          .sidebar-nav-group-item-section-toggle-btn
+            @apply rotate-0
+
+  &-header
+    @apply flex items-center flex-nowrap py-2 pr-1 pl-2 bg-primary-50 rounded-lg text-base text-primary
+    @apply s('hover:bg-primary-200') s('hover:font-bold')
+
+    &.active, &.router-link-exact-active
+      @apply bg-primary-600 text-white font-bold
+      @apply s('hover:bg-primary-600') s('hover:text-white') s('hover:font-bold')
+    
+    &-left
+      @apply flex-grow-0 flex-shrink-0
+
+    &-right
+      @apply flex-grow flex items-center flex-nowrap space-x-1
+
+      .sidebar-nav-group-section-title
+        @apply flex-grow pl-1 whitespace-nowrap
+
+      .sidebar-nav-group-item-section-status
+        @apply flex-grow-0 flex-shrink-0
+
+        .sidebar-nav-group-item-section-toggle-btn
+          @apply flex items-center justify-center w-4 h-4 text-sm rotate-180 transition-transform origin-center
+
+  &-body
+    @apply overflow-hidden transition-height
+
+    &-wrapper
+      @apply pl-3
+
+      .sidebar-nav-group-item-section-link
+        @apply block py-1 px-2 bg-primary-50 rounded-lg text-sm text-primary whitespace-nowrap
+        @apply s('hover:bg-primary-200') s('hover:font-bold') s('active:bg-primary-600') s('active:text-white') s('active:font-bold')
+
+        &.router-link-exact-active
+          @apply bg-primary-600 text-white font-bold
+          @apply s('hover:bg-primary-600') s('hover:text-white') s('hover:font-bold')
+
+.sidebar-nav-group-item-section-popup
+  @apply flex-col p-2 space-y-1 bg-white rounded-lg overflow-hidden shadow-md hidden
+
+  &[data-show]
+    @apply flex
+
+  &.single
+    @apply p-0
+
+  &-link
+    @apply flex items-center justify-between flex-nowrap py-1 px-2 space-x-4 bg-white rounded-lg text-sm text-primary
+    @apply s('hover:bg-primary-200') s('hover:font-bold') s('active:bg-primary-600') s('active:text-white') s('active:font-bold')
+
+    &.router-link-exact-active
+      @apply bg-primary-600 text-white font-bold
+      @apply s('hover:bg-primary-600') s('hover:text-white') s('hover:font-bold')
+
+    &-icon
+      @apply inline-flex
+
+  &-divide
+    @apply h-px bg-primary-200
+</style>

package/components/SLSidebarNavLinkItem.vue

@@ -0,0 +1,255 @@
+<template lang="pug">
+NuxtLink.sidebar-nav-link-item(
+  :to='itemConfig.to ? itemConfig.to : "javascript:;"',
+  :external='!itemConfig.to',
+  :class='{ "sidebar-nav-link-item--home": itemConfig.to === "/application" }'
+  ref='linkComp'
+  @click='onClickedItem'
+)
+  .sidebar-nav-link-item-left(
+    @mouseenter='onIconMouseEnter',
+    @mouseleave='onIconMouseLeave'
+  )
+    SLIcon(
+      :icon='itemConfig.preIcon'
+    )
+  .sidebar-nav-link-item-right
+    .item-title {{ itemConfig.title }}
+    .item-post-icon(v-if='itemConfig.status !== "normal"')
+      SLIcon(
+        v-if='itemConfig.status === "lock"',
+        icon='lock'
+      )
+      SLIcon(
+        v-else-if='itemConfig.status === "new"',
+        icon='new-circle'
+      )
+      .inline-flex.items-center.justify-center.w-4.h-4(v-else)
+        .bg-danger.rounded-full(class='w-1.5 h-1.5')
+  ClientOnly
+    Teleport(to='#nav')
+      .sidebar-nav-link-item-popup(
+        ref='popupEl'
+        @mouseenter='onPopupMouseEnter'
+        @mouseleave='onIconMouseLeave'
+      )
+        NuxtLink.sidebar-nav-link-item-popup-link(
+          :to='itemConfig.to ? itemConfig.to : "javascript:;"',
+          :external='!itemConfig.to',
+          :class='{ "sidebar-nav-link-item--home": itemConfig.to === "/application" }'
+          @click='onClickedItem'
+        )
+          .item-title {{ itemConfig.title }}
+          .item-post-icon(v-if='itemConfig.status !== "normal"')
+            SLIcon(
+              v-if='itemConfig.status === "lock"',
+              icon='lock'
+            )
+            SLIcon(
+              v-else-if='itemConfig.status === "new"',
+              icon='new-circle'
+            )
+            .inline-flex.items-center.justify-center.w-4.h-4(v-else)
+              .bg-danger.rounded-full(class='w-1.5 h-1.5')
+</template>
+
+<script lang="ts">
+import { NuxtLink } from '#components';
+import { createPopper } from '@popperjs/core';
+import type { Instance as PopperInstance } from '@popperjs/core';
+import { NavItemStatus, type NavItemLink } from '~/interface/NavConfigType';
+
+type NuxtLinkType = InstanceType<typeof NuxtLink>;
+
+export default defineComponent({
+  name: 'SLSidebarNavLinkItem',
+  props: {
+    navCollapsed: {
+      type: Boolean,
+      default: false,
+    },
+    itemConfig: {
+      type: Object as PropType<NavItemLink>,
+      required: true,
+    },
+  },
+  emits: ['click:item'],
+  setup(props, { emit }) {
+    const { navCollapsed, itemConfig } = toRefs(props);
+
+    const linkComp = shallowRef<NuxtLinkType | null>(null);
+    const popupEl = shallowRef<HTMLDivElement | null>(null);
+
+    let popperInstance: PopperInstance | null = null;
+    let popupHideTimeoutId: any = null;
+
+    function showPopup() {
+      if (
+        !linkComp.value ||
+        !popupEl.value ||
+        popupEl.value.hasAttribute('data-show') ||
+        !popperInstance
+      )
+        return;
+
+      popupEl.value.setAttribute('data-show', '');
+      popperInstance.setOptions((options) => ({
+        ...options,
+        modifiers: [
+          ...(options.modifiers || []),
+          { name: 'eventListeners', enabled: true },
+        ],
+      }));
+      popperInstance.update();
+    }
+
+    function clearDisappearTimeout() {
+      if (popupHideTimeoutId) {
+        clearTimeout(popupHideTimeoutId);
+      }
+      popupHideTimeoutId = null;
+    }
+
+    function onIconMouseEnter() {
+      clearDisappearTimeout();
+      
+      if (!navCollapsed.value) return;
+
+      showPopup();
+    }
+
+    function hidePopup() {
+      if (!popupEl.value || !popperInstance) return;
+
+      popupEl.value.removeAttribute('data-show');
+      popperInstance.setOptions((options) => ({
+        ...options,
+        modifiers: [
+          ...(options.modifiers || []),
+          { name: 'eventListeners', enabled: false },
+        ],
+      }));
+    }
+
+    function onIconMouseLeave() {
+      clearDisappearTimeout();
+
+      popupHideTimeoutId = setTimeout(hidePopup, 300);
+    }
+
+    function onPopupMouseEnter() {
+      clearDisappearTimeout();
+    }
+
+    function onClickedItem() {
+      if (
+        itemConfig.value.to ||
+        !itemConfig.value.emit ||
+        itemConfig.value.status === NavItemStatus.Lock
+      ) {
+        return;
+      }
+
+      emit('click:item', itemConfig.value.emit);
+    }
+
+    function setupPopper() {
+      nextTick(() => {
+        if (!linkComp.value || !popupEl.value) return;
+        popperInstance = createPopper(linkComp.value.$el, popupEl.value, {
+          placement: 'right',
+          strategy: 'fixed',
+          modifiers: [
+            {
+              name: 'offset',
+              options: {
+                offset: [0, 12],
+              },
+            },
+            { name: 'eventListeners', enabled: false },
+          ],
+        });
+      });
+    }
+
+    function destroyPopper() {
+      if (popperInstance) {
+        popperInstance.destroy();
+      }
+      popperInstance = null;
+    }
+
+    onMounted(() => {
+      setupPopper();
+    });
+
+    onBeforeUnmount(() => {
+      clearDisappearTimeout();
+      destroyPopper();
+    });
+    
+    return {
+      linkComp,
+      popupEl,
+      onIconMouseEnter,
+      onIconMouseLeave,
+      onPopupMouseEnter,
+      onClickedItem,
+    };
+  },
+})
+</script>
+
+<style lang="stylus">
+.sidebar.closure
+  .sidebar-nav-link-item
+    @apply s('lg:p-2') s('lg:text-lg')
+
+    &-left
+      @apply s('lg:inline-flex')
+
+    &-right
+      @apply s('lg:hidden')
+
+.sidebar-nav-link-item
+  @apply flex items-center justify-start py-2 pr-3 pl-2 bg-white rounded-lg text-base text-primary
+  @apply s('hover:bg-primary-200') s('hover:font-bold') s('active:bg-primary-600') s('active:text-white') s('active:font-bold')
+  
+  &.router-link-exact-active, &.router-link-active
+    @apply bg-primary-600 text-white font-bold
+    @apply s('hover:bg-primary-600') s('hover:text-white') s('active:font-bold')
+
+  &.sidebar-nav-link-item--home.router-link-active
+    @apply bg-white text-primary font-normal
+    @apply s('hover:bg-primary-200') s('hover:font-bold') s('active:bg-primary-600') s('active:text-white') s('active:font-bold')
+
+  &.sidebar-nav-link-item--home.router-link-exact-active.router-link-active
+    @apply bg-primary-600 text-white font-bold
+    @apply s('hover:bg-primary-600') s('hover:text-white') s('hover:font-bold')
+
+  &-left
+    @apply flex-grow-0 flex-shrink-0
+
+  &-right
+    @apply flex-grow flex items-center justify-start flex-nowrap s('space-x-1.5')
+
+    .item-title
+      @apply pl-1 whitespace-nowrap
+
+.sidebar-nav-link-item + .sidebar-nav-link-item
+  @apply mt-1
+
+.sidebar-nav-link-item-popup
+  @apply rounded-lg overflow-hidden shadow-md hidden
+
+  &[data-show]
+    @apply block
+
+  &-link
+    @apply flex items-center p-2 space-x-4 bg-white text-sm text-primary whitespace-nowrap
+    @apply s('hover:bg-primary-200') s('hover:font-bold') s('active:bg-primary-600') s('active:text-white') s('active:font-bold')
+
+    &.router-link-exact-active
+      @apply bg-primary-600 text-white font-bold
+      @apply s('hover:bg-primary-600') s('hover:text-white') s('hover:font-bold')
+</style>

package/components/SLSitePage.vue

@@ -108,7 +108,8 @@ export default defineComponent({
 
 <style lang="stylus">
 .site-page
-  @apply flex flex-col w-full min-h-full pt-1
+  @apply flex flex-col w-full min-h-full s('pt-1.5')
+  @apply s('lg:pt-2')
 
   &-header
     @apply flex justify-between mb-4