@mptw/skylens-ui 1.5.0 → 1.5.1

package/app/components/SLSidebarNav.vue

@@ -5,10 +5,10 @@
   .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')
+        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')
@@ -64,9 +64,9 @@
 
 <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";
+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",
@@ -84,21 +84,30 @@ export default defineComponent({
       default: () => [],
     },
     navIntros: {
-      type: Array as PropType<{
-        code: string;
-        title: string;
-        content: string;
-        targetCode: string;
-      }[]>,
+      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),
+      default: "",
+      validator: (v: string) => ["", "primary-600", "primary"].includes(v),
     },
   },
-  emits: ["click:logo", "update:dark", "update:closured", "click:insight", 'close:intro', 'logo:loaded'],
+  emits: [
+    "click:logo",
+    "update:dark",
+    "update:closured",
+    "click:insight",
+    "close:intro",
+    "logo:loaded",
+  ],
   setup(props, { emit }) {
     const { closured, navIntros } = toRefs(props);
 
@@ -107,7 +116,7 @@ export default defineComponent({
 
     const closuredProxy = computed({
       get: () => closured.value,
-      set: (newValue) => emit('update:closured', newValue),
+      set: (newValue) => emit("update:closured", newValue),
     });
 
     let introPopperInstance: PopperInstance | null = null;
@@ -129,7 +138,7 @@ export default defineComponent({
         | "click:logo"
         | "update:dark"
         | "update:closured"
-        | "click:insight"
+        | "click:insight",
     ) {
       emit(eventName);
     }
@@ -143,20 +152,22 @@ export default defineComponent({
 
       if (!navLinkIntro.value) return;
 
-      const navLinkIndexEl = document.getElementById(`nav-link-${navLinkIntro.value.targetCode}`);
+      const navLinkIndexEl = document.getElementById(
+        `nav-link-${navLinkIntro.value.targetCode}`,
+      );
 
       if (!introEl.value || !navLinkIndexEl) return;
 
       introPopperInstance = createPopper(navLinkIndexEl, introEl.value, {
         modifiers: [
           {
-            name: 'offset',
+            name: "offset",
             options: {
               offset: [-6, 39],
             },
           },
         ],
-        placement: 'right-start',
+        placement: "right-start",
       });
     }
 
@@ -172,12 +183,12 @@ export default defineComponent({
 
       if (!introEl.value || !introPopperInstance) return;
 
-      introEl.value.setAttribute('data-show', '');
+      introEl.value.setAttribute("data-show", "");
       introPopperInstance.setOptions((options) => ({
         ...options,
         modifiers: [
           ...(options.modifiers || []),
-          { name: 'eventListeners', enabled: true },
+          { name: "eventListeners", enabled: true },
         ],
       }));
       introPopperInstance.update();
@@ -189,12 +200,12 @@ export default defineComponent({
 
       if (!introEl.value || !introPopperInstance) return;
 
-      introEl.value.removeAttribute('data-show');
+      introEl.value.removeAttribute("data-show");
       introPopperInstance.setOptions((options) => ({
         ...options,
         modifiers: [
           ...(options.modifiers || []),
-          { name: 'eventListeners', enabled: false },
+          { name: "eventListeners", enabled: false },
         ],
       }));
     }
@@ -211,11 +222,11 @@ export default defineComponent({
 
       if (!navLinkIntro.value) return;
 
-      emit('close:intro', navLinkIntro.value.code);
+      emit("close:intro", navLinkIntro.value.code);
     }
 
     function onLogoLoaded() {
-      emit('logo:loaded');
+      emit("logo:loaded");
     }
 
     return {
@@ -235,193 +246,242 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.sidebar
-  @apply relative h-full
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  &.dark
-    .sidebar-wrapper
-      @apply bg-primary-800
+.sidebar {
+  @apply relative h-full;
+}
 
-    &.closure
-      .sidebar-logo
-        .logo
-          img.color-small
-            @apply s('lg:hidden')
+.sidebar.dark .sidebar-wrapper {
+  @apply bg-primary-800;
+}
 
-          img.white-big
-            @apply s('lg:hidden')
+.sidebar.dark.closure .sidebar-logo .logo img.color-small {
+  @apply lg:hidden;
+}
 
-          img.white-small
-            @apply s('lg:block')
+.sidebar.dark.closure .sidebar-logo .logo img.white-big {
+  @apply lg:hidden;
+}
 
-      .sidebar-toggle
-        @apply bg-primary-900
+.sidebar.dark.closure .sidebar-logo .logo img.white-small {
+  @apply lg:block;
+}
 
-        &:hover
-          @apply bg-primary-600
+.sidebar.dark.closure .sidebar-toggle {
+  @apply bg-primary-900;
+}
 
-    .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.dark.closure .sidebar-toggle:hover {
+  @apply bg-primary-600;
+}
 
-  .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
+.sidebar.dark .sidebar-logo .logo img.color-big {
+  @apply hidden;
+}
 
-    &-title
-      @apply flex-grow-0 flex-shrink-0
+.sidebar.dark .sidebar-logo .logo img.white-big {
+  @apply block;
+}
 
-    .ios-switch
-      @apply flex-grow-0 flex-shrink-0
+.sidebar.dark nav .nav-wrapper.custom-scrollbar-y::-webkit-scrollbar-thumb {
+  @apply bg-primary-600;
+}
 
-      label
-        @apply border-primary-100 bg-primary-25
+.sidebar.dark
+  nav
+  .nav-wrapper.custom-scrollbar-y::-webkit-scrollbar-thumb:hover {
+  @apply bg-primary-600;
+}
 
-        &:before
-          @apply border-primary-100
+.sidebar.dark .sidebar-mode-setting {
+  @apply text-white;
+}
 
-  &-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
+.sidebar.dark .sidebar-mode-setting .ios-switch label {
+  @apply bg-nav-color-switch-bg border-primary-600;
+}
 
-    &:hover
-      @apply bg-primary-300 text-white
+.sidebar.dark .sidebar-mode-setting .ios-switch label::before {
+  @apply border-primary-600 bg-primary-300;
+}
 
-    .icon-chevron-right
-      @apply hidden
+.sidebar.dark .sidebar-toggle {
+  @apply bg-primary-900 text-white;
+}
 
-  &-nav-intro
-    @apply s('w-[288px]') p-4 bg-white rounded-lg hidden
+.sidebar.dark .sidebar-toggle:hover {
+  @apply bg-primary-600;
+}
 
-    &[data-show]
-      @apply block
+.sidebar.closure .sidebar-modal {
+  @apply hidden;
+}
 
-    &[data-popper-placement^='right'] > &-arrow
-      @apply s('-left-3.75') s('top-4')
+.sidebar.closure .sidebar-wrapper {
+  @apply -ml-[188px] lg:ml-0 lg:w-[84px];
+}
 
-    &-header
-      @apply mb-2 text-base font-bold text-primary
+.sidebar.closure .sidebar-logo {
+  @apply lg:py-3 lg:px-0;
+}
 
-    &-body
-      @apply mb-4 text-base text-pgray-2 whitespace-pre-line
+.sidebar.closure .sidebar-logo .logo img.color-big {
+  @apply lg:hidden;
+}
 
-    &-footer
-      @apply text-right
+.sidebar.closure .sidebar-logo .logo img.color-small {
+  @apply lg:block;
+}
 
-    &-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
+.sidebar.closure .sidebar-toggle {
+  @apply -mr-5 bg-primary-300 rounded-l-none rounded-r-xl text-white;
+}
 
-    &-arrow
-      @apply invisible
+.sidebar.closure .sidebar-toggle:hover {
+  @apply bg-primary-400 text-white;
+}
 
-      &:before
-        content ''
-        @apply visible
-</style>
+.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/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>