@mptw/skylens-ui 1.5.0 → 1.5.1

package/app/components/SLSidebarNavGroupItemSection.vue

@@ -79,14 +79,17 @@
 </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';
+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 "~ui/app/interface/NavConfigType";
 
 export default defineComponent({
-  name: 'SLSidebarNavGroupItemSection',
+  name: "SLSidebarNavGroupItemSection",
   props: {
     navCollapsed: {
       type: Boolean,
@@ -101,7 +104,7 @@ export default defineComponent({
       required: true,
     },
   },
-  emits: ['click:item'],
+  emits: ["click:item"],
   setup(props, { emit }) {
     const route = useRoute();
 
@@ -126,10 +129,14 @@ export default defineComponent({
     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);
+      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;
@@ -138,11 +145,12 @@ export default defineComponent({
     function onClickedSectionItem() {
       if (itemConfig.value.to || !itemConfig.value.emit) return;
 
-      emit('click:item', itemConfig.value.emit);
+      emit("click:item", itemConfig.value.emit);
     }
 
     function onClickedToggle() {
-      if (!collapsed.value && isLinkActive.value && !isLinkExactActive.value) return;
+      if (!collapsed.value && isLinkActive.value && !isLinkExactActive.value)
+        return;
       collapsed.value = !collapsed.value;
     }
 
@@ -162,7 +170,7 @@ export default defineComponent({
 
     function onClickedLinkItem(emitEvent?: string) {
       if (emitEvent) {
-        emit('click:item', emitEvent);
+        emit("click:item", emitEvent);
       }
     }
 
@@ -183,7 +191,9 @@ export default defineComponent({
     function onCollapse() {
       clearTween();
 
-      const bodyWrapper = bodyEl.value?.querySelector('.sidebar-nav-group-item-section-body-wrapper');
+      const bodyWrapper = bodyEl.value?.querySelector(
+        ".sidebar-nav-group-item-section-body-wrapper",
+      );
       if (!bodyEl.value || !bodyWrapper) return;
 
       const wrapperRect = bodyWrapper.getBoundingClientRect();
@@ -191,19 +201,21 @@ export default defineComponent({
         height: 0,
         alpha: 0,
         duration: 0.3,
-        ease: 'power2.out',
+        ease: "power2.out",
         onStart: () => {
           if (!bodyEl.value) return;
           bodyEl.value.style.height = `${wrapperRect.height + 4}px`;
-          bodyEl.value.style.opacity = '1';
+          bodyEl.value.style.opacity = "1";
         },
       });
     }
 
     function onExpand() {
       clearTween();
-      
-      const bodyWrapper = bodyEl.value?.querySelector('.sidebar-nav-group-item-section-body-wrapper');
+
+      const bodyWrapper = bodyEl.value?.querySelector(
+        ".sidebar-nav-group-item-section-body-wrapper",
+      );
       if (!bodyEl.value || !bodyWrapper) return;
 
       const wrapperRect = bodyWrapper.getBoundingClientRect();
@@ -211,10 +223,10 @@ export default defineComponent({
         height: wrapperRect.height + 4,
         alpha: 1,
         duration: 0.3,
-        ease: 'power2.out',
+        ease: "power2.out",
         onComplete: () => {
           if (!bodyEl.value) return;
-          bodyEl.value.removeAttribute('style');
+          bodyEl.value.removeAttribute("style");
         },
       });
     }
@@ -223,17 +235,17 @@ export default defineComponent({
       if (
         !headerEl.value ||
         !popupEl.value ||
-        popupEl.value.hasAttribute('data-show') ||
+        popupEl.value.hasAttribute("data-show") ||
         !popperInstance
       )
         return;
 
-      popupEl.value.setAttribute('data-show', '');
+      popupEl.value.setAttribute("data-show", "");
       popperInstance.setOptions((options) => ({
         ...options,
         modifiers: [
           ...(options.modifiers || []),
-          { name: 'eventListeners', enabled: true },
+          { name: "eventListeners", enabled: true },
         ],
       }));
       popperInstance.update();
@@ -248,7 +260,7 @@ export default defineComponent({
 
     function onIconMouseEnter() {
       clearDisappearTimeout();
-      
+
       if (!navCollapsed.value) return;
 
       showPopup();
@@ -257,12 +269,12 @@ export default defineComponent({
     function hidePopup() {
       if (!popupEl.value || !popperInstance) return;
 
-      popupEl.value.removeAttribute('data-show');
+      popupEl.value.removeAttribute("data-show");
       popperInstance.setOptions((options) => ({
         ...options,
         modifiers: [
           ...(options.modifiers || []),
-          { name: 'eventListeners', enabled: false },
+          { name: "eventListeners", enabled: false },
         ],
       }));
     }
@@ -281,16 +293,16 @@ export default defineComponent({
       nextTick(() => {
         if (!headerEl.value || !popupEl.value) return;
         popperInstance = createPopper(headerEl.value, popupEl.value, {
-          placement: 'right-start',
-          strategy: 'fixed',
+          placement: "right-start",
+          strategy: "fixed",
           modifiers: [
             {
-              name: 'offset',
+              name: "offset",
               options: {
                 offset: [0, 12],
               },
             },
-            { name: 'eventListeners', enabled: false },
+            { name: "eventListeners", enabled: false },
           ],
         });
       });
@@ -310,7 +322,7 @@ export default defineComponent({
       }
 
       onExpand();
-    })
+    });
 
     watch(isLinkActive, () => {
       if (navCollapsed.value) return;
@@ -331,9 +343,11 @@ export default defineComponent({
       collapsed.value = !isLinkActive.value;
 
       destroyWindowDragEndSubscription();
-      windowDragEndSubscription = fromEvent(window, 'dragend').subscribe((e) => {
-        actived.value = false;
-      });
+      windowDragEndSubscription = fromEvent(window, "dragend").subscribe(
+        (e) => {
+          actived.value = false;
+        },
+      );
 
       setupPopper();
     });
@@ -366,155 +380,202 @@ export default defineComponent({
 });
 </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.dark
-  .sidebar-nav-group-item-section
-    &-header
-      @apply bg-primary-900 text-white
-      @apply s('hover:bg-primary')
-
-      &.active, &.router-link-exact-active
-        @apply bg-primary-600
-        @apply s('hover:bg-primary-600')
-
-    &-body
-      &-wrapper
-        .sidebar-nav-group-item-section-link
-          @apply bg-primary-900 text-white
-          @apply s('hover:bg-primary-800') s('active:bg-primary-600')
-
-          &.router-link-exact-active
-            @apply bg-primary-600
-            @apply s('hover:bg-primary-600')
-
-.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')
-
-    &:hover
-      .sidebar-nav-group-item-section-header-right
-        .sidebar-nav-group-item-section-status
-          .sidebar-nav-group-item-section-add-btn
-            @apply text-primary
-
-    &.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')
-
-      .sidebar-nav-group-item-section-header-right
-        .sidebar-nav-group-item-section-status
-          .sidebar-nav-group-item-section-add-btn
-            @apply text-white
-
-    &.router-link-exact-active
-      .sidebar-nav-group-item-section-header-right
-        .sidebar-nav-group-item-section-status
-          .sidebar-nav-group-item-section-add-btn
-            @apply hidden
-    
-    &-left
-      @apply flex-grow-0 flex-shrink-0 inline-flex
-
-    &-right
-      @apply flex-grow flex items-center justify-between flex-nowrap space-x-1
-
-      .sidebar-nav-group-section-title
-        @apply flex-grow inline-flex items-center h-6 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
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-        .sidebar-nav-group-item-section-add-btn
-          @apply flex items-center justify-center w-4 h-4 text-sm text-primary-400
+.sidebar.closure .sidebar-nav-group-item-section {
+  @apply items-center;
+}
 
-  &-body
-    @apply overflow-hidden transition-height
+.sidebar.closure .sidebar-nav-group-item-section-header {
+  @apply lg:p-2 lg:rounded-full lg:text-lg;
+}
 
-    &-wrapper
-      @apply pl-3
+.sidebar.closure .sidebar-nav-group-item-section-header-left {
+  @apply lg:inline-flex;
+}
 
-      .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')
+.sidebar.closure .sidebar-nav-group-item-section-header-right {
+  @apply lg:hidden;
+}
 
-        &.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.dark .sidebar-nav-group-item-section-header {
+  @apply bg-primary-900 text-white hover:bg-primary;
+}
 
-.sidebar-nav-group-item-section-popup
-  @apply flex-col s('min-w-[142px]') p-2 space-y-1 bg-white rounded-lg overflow-hidden shadow-md hidden
+.sidebar.dark .sidebar-nav-group-item-section-header.active,
+.sidebar.dark .sidebar-nav-group-item-section-header.router-link-exact-active {
+  @apply bg-primary-600 hover:bg-primary-600;
+}
 
-  &.dark
-    @apply bg-primary-900
-
-    &.single
-      .sidebar-nav-group-item-section-popup-link
-        &:hover
-          .sidebar-nav-group-item-section-popup-link-icon
-            @apply text-primary-500
-
-        &.router-link-exact-active, &:active
-          .sidebar-nav-group-item-section-popup-link-icon
-            @apply text-primary
-
-        &-icon
-          @apply text-primary-500
-
-    .sidebar-nav-group-item-section-popup-link
-      @apply bg-primary-900 text-white
-      @apply s('hover:bg-primary') s('active:bg-primary-600')
-
-      &.router-link-exact-active
-        @apply bg-primary-600
-        @apply s('hover:bg-primary-600')
-
-
-  &[data-show]
-    @apply flex
-
-  &.single
-    @apply p-0
-
-    .sidebar-nav-group-item-section-popup-link
-      @apply py-2 pr-1 pl-2
-
-  &-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 origin-center rotate-180
+.sidebar.dark
+  .sidebar-nav-group-item-section-body-wrapper
+  .sidebar-nav-group-item-section-link {
+  @apply bg-primary-900 text-white hover:bg-primary-800 active:bg-primary-600;
+}
 
-  &-divide
-    @apply h-px bg-primary-200
-</style>
+.sidebar.dark
+  .sidebar-nav-group-item-section-body-wrapper
+  .sidebar-nav-group-item-section-link.router-link-exact-active {
+  @apply bg-primary-600 hover:bg-primary-600;
+}
+
+.sidebar-nav-group-item-section {
+  @apply flex flex-col;
+}
+
+.sidebar-nav-group-item-section.collapsed
+  .sidebar-nav-group-item-section-header-right
+  .sidebar-nav-group-item-section-status
+  .sidebar-nav-group-item-section-toggle-btn {
+  @apply rotate-0;
+}
+
+.sidebar-nav-group-item-section-header {
+  @apply flex items-center flex-nowrap py-2 pr-1 pl-2 bg-primary-50 rounded-lg text-base text-primary hover:bg-primary-200 hover:font-bold;
+}
+
+.sidebar-nav-group-item-section-header:hover
+  .sidebar-nav-group-item-section-header-right
+  .sidebar-nav-group-item-section-status
+  .sidebar-nav-group-item-section-add-btn {
+  @apply text-primary;
+}
+
+.sidebar-nav-group-item-section-header.active,
+.sidebar-nav-group-item-section-header.router-link-exact-active {
+  @apply bg-primary-600 text-white font-bold hover:bg-primary-600 hover:text-white hover:font-bold;
+}
+
+.sidebar-nav-group-item-section-header.active
+  .sidebar-nav-group-item-section-header-right
+  .sidebar-nav-group-item-section-status
+  .sidebar-nav-group-item-section-add-btn,
+.sidebar-nav-group-item-section-header.router-link-exact-active
+  .sidebar-nav-group-item-section-header-right
+  .sidebar-nav-group-item-section-status
+  .sidebar-nav-group-item-section-add-btn {
+  @apply text-white;
+}
+
+.sidebar-nav-group-item-section-header.router-link-exact-active
+  .sidebar-nav-group-item-section-header-right
+  .sidebar-nav-group-item-section-status
+  .sidebar-nav-group-item-section-add-btn {
+  @apply hidden;
+}
+
+.sidebar-nav-group-item-section-header-left {
+  @apply grow-0 shrink-0 inline-flex;
+}
+
+.sidebar-nav-group-item-section-header-right {
+  @apply grow flex items-center justify-between flex-nowrap space-x-1;
+}
+
+.sidebar-nav-group-item-section-header-right .sidebar-nav-group-section-title {
+  @apply grow inline-flex items-center h-6 pl-1 whitespace-nowrap;
+}
+
+.sidebar-nav-group-item-section-header-right
+  .sidebar-nav-group-item-section-status {
+  @apply grow-0 shrink-0;
+}
+
+.sidebar-nav-group-item-section-header-right
+  .sidebar-nav-group-item-section-status
+  .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;
+}
+
+.sidebar-nav-group-item-section-header-right
+  .sidebar-nav-group-item-section-status
+  .sidebar-nav-group-item-section-add-btn {
+  @apply flex items-center justify-center w-4 h-4 text-sm text-primary-400;
+}
+
+.sidebar-nav-group-item-section-body {
+  @apply overflow-hidden transition-[height];
+}
+
+.sidebar-nav-group-item-section-body-wrapper {
+  @apply pl-3;
+}
+
+.sidebar-nav-group-item-section-body-wrapper
+  .sidebar-nav-group-item-section-link {
+  @apply block py-1 px-2 bg-primary-50 rounded-lg text-sm text-primary whitespace-nowrap hover:bg-primary-200 hover:font-bold active:bg-primary-600 active:text-white active:font-bold;
+}
+
+.sidebar-nav-group-item-section-body-wrapper
+  .sidebar-nav-group-item-section-link.router-link-exact-active {
+  @apply bg-primary-600 text-white font-bold hover:bg-primary-600 hover:text-white hover:font-bold;
+}
+
+.sidebar-nav-group-item-section-popup {
+  @apply flex-col min-w-[142px] p-2 space-y-1 bg-white rounded-lg overflow-hidden shadow-md hidden;
+}
+
+.sidebar-nav-group-item-section-popup.dark {
+  @apply bg-primary-900;
+}
+
+.sidebar-nav-group-item-section-popup.dark.single
+  .sidebar-nav-group-item-section-popup-link:hover
+  .sidebar-nav-group-item-section-popup-link-icon {
+  @apply text-primary-500;
+}
+
+.sidebar-nav-group-item-section-popup.dark.single
+  .sidebar-nav-group-item-section-popup-link.router-link-exact-active
+  .sidebar-nav-group-item-section-popup-link-icon,
+.sidebar-nav-group-item-section-popup.dark.single
+  .sidebar-nav-group-item-section-popup-link:active
+  .sidebar-nav-group-item-section-popup-link-icon {
+  @apply text-primary;
+}
+
+.sidebar-nav-group-item-section-popup.dark.single
+  .sidebar-nav-group-item-section-popup-link-icon {
+  @apply text-primary-500;
+}
+
+.sidebar-nav-group-item-section-popup.dark
+  .sidebar-nav-group-item-section-popup-link {
+  @apply bg-primary-900 text-white hover:bg-primary active:bg-primary-600;
+}
+
+.sidebar-nav-group-item-section-popup.dark
+  .sidebar-nav-group-item-section-popup-link.router-link-exact-active {
+  @apply bg-primary-600 hover:bg-primary-600;
+}
+
+.sidebar-nav-group-item-section-popup[data-show] {
+  @apply flex;
+}
+
+.sidebar-nav-group-item-section-popup.single {
+  @apply p-0;
+}
+
+.sidebar-nav-group-item-section-popup.single
+  .sidebar-nav-group-item-section-popup-link {
+  @apply py-2 pr-1 pl-2;
+}
+
+.sidebar-nav-group-item-section-popup-link {
+  @apply flex items-center justify-between flex-nowrap py-1 px-2 space-x-4 bg-white rounded-lg text-sm text-primary hover:bg-primary-200 hover:font-bold active:bg-primary-600 active:text-white active:font-bold;
+}
+
+.sidebar-nav-group-item-section-popup-link.router-link-exact-active {
+  @apply bg-primary-600 text-white font-bold hover:bg-primary-600 hover:text-white hover:font-bold;
+}
+
+.sidebar-nav-group-item-section-popup-link-icon {
+  @apply inline-flex origin-center rotate-180;
+}
+
+.sidebar-nav-group-item-section-popup-divide {
+  @apply h-px bg-primary-200;
+}
+</style>