@mptw/skylens-ui 1.5.0 → 1.5.2

package/app/components/SLSidebarNavLinkItem.vue

@@ -63,15 +63,18 @@ NuxtLink.sidebar-nav-link-item(
 </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';
+import { NuxtLink } from "#components";
+import { createPopper } from "@popperjs/core";
+import type { Instance as PopperInstance } from "@popperjs/core";
+import {
+  NavItemStatus,
+  type NavItemLink,
+} from "~ui/app/interface/NavConfigType";
 
 type NuxtLinkType = InstanceType<typeof NuxtLink>;
 
 export default defineComponent({
-  name: 'SLSidebarNavLinkItem',
+  name: "SLSidebarNavLinkItem",
   props: {
     navCollapsed: {
       type: Boolean,
@@ -82,7 +85,7 @@ export default defineComponent({
       required: true,
     },
   },
-  emits: ['click:item'],
+  emits: ["click:item"],
   setup(props, { emit }) {
     const route = useRoute();
 
@@ -111,17 +114,17 @@ export default defineComponent({
       if (
         !linkComp.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();
@@ -136,7 +139,7 @@ export default defineComponent({
 
     function onIconMouseEnter() {
       clearDisappearTimeout();
-      
+
       if (!navCollapsed.value) return;
 
       showPopup();
@@ -145,12 +148,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 },
         ],
       }));
     }
@@ -174,23 +177,23 @@ export default defineComponent({
         return;
       }
 
-      emit('click:item', itemConfig.value.emit);
+      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',
+          placement: "right",
+          strategy: "fixed",
           modifiers: [
             {
-              name: 'offset',
+              name: "offset",
               options: {
                 offset: [0, 12],
               },
             },
-            { name: 'eventListeners', enabled: false },
+            { name: "eventListeners", enabled: false },
           ],
         });
       });
@@ -211,7 +214,7 @@ export default defineComponent({
       clearDisappearTimeout();
       destroyPopper();
     });
-    
+
     return {
       linkComp,
       popupEl,
@@ -222,104 +225,123 @@ export default defineComponent({
       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')
-
-      .item-status
-        @apply s('lg:inline-flex')
-
-    &-right
-      @apply s('lg:hidden')
-
-.sidebar.dark
-  .sidebar-nav-link-item
-    @apply bg-primary-800 text-white
-    @apply s('hover:bg-primary') s('active:bg-primary-600')
-
-    &.router-link-exact-active, &.router-link-active
-      @apply bg-primary-600
-      @apply s('hover:bg-primary-600') s('active:bg-primary-600')
-
-    &.sidebar-nav-link-item--home.router-link-active
-      @apply bg-primary-800 text-white
-      @apply s('hover:bg-primary') s('active:bg-primary-600')
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-    &.sidebar-nav-link-item--home.router-link-exact-active.router-link-active
-      @apply bg-primary-600
-      @apply s('hover:bg-primary-600') s('active:bg-primary-600')
+.sidebar.closure .sidebar-nav-link-item {
+  @apply lg:p-2 lg:text-lg;
+}
 
-.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.closure .sidebar-nav-link-item-left {
+  @apply lg:inline-flex;
+}
 
-  &.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.closure .sidebar-nav-link-item-left .item-status {
+  @apply lg:inline-flex;
+}
 
-  &.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 relative flex-grow-0 flex-shrink-0
-
-    .item-pre-icon
-      @apply inline-flex
+.sidebar.closure .sidebar-nav-link-item-right {
+  @apply lg:hidden;
+}
 
-    .item-status
-      @apply absolute s('-top-2.5') s('-left-2.5') text-base hidden
+.sidebar.dark .sidebar-nav-link-item {
+  @apply bg-primary-800 text-white hover:bg-primary active:bg-primary-600;
+}
 
-      &.status--new
-        &:before
-          content ''
-          @apply block absolute s('top-1/2') s('left-1/2') w-2 h-2 s('-translate-x-1/2') s('-translate-y-1/2') bg-white
+.sidebar.dark .sidebar-nav-link-item.router-link-exact-active,
+.sidebar.dark .sidebar-nav-link-item.router-link-active {
+  @apply bg-primary-600 hover:bg-primary-600 active:bg-primary-600;
+}
 
-        .icon
-          @apply relative text-highlight-500
-
-  &-right
-    @apply flex-grow flex items-center flex-nowrap s('space-x-1.5')
-
-    .item-title
-      @apply flex-grow inline-flex items-center h-6 pl-1 whitespace-nowrap
-
-    .item-post-icon
-      @apply flex-grow-0 flex-shrink-0 relative inline-flex
-
-      &.status--new
-        &:before
-          content ''
-          @apply block absolute s('top-1/2') s('left-1/2') w-2 h-2 s('-translate-x-1/2') s('-translate-y-1/2') bg-white
-
-        .icon
-          @apply relative text-highlight-500
-
-.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')
+.sidebar.dark
+  .sidebar-nav-link-item.sidebar-nav-link-item--home.router-link-active {
+  @apply bg-primary-800 text-white hover:bg-primary active:bg-primary-600;
+}
 
-    &.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>
+.sidebar.dark
+  .sidebar-nav-link-item.sidebar-nav-link-item--home.router-link-exact-active.router-link-active {
+  @apply bg-primary-600 hover:bg-primary-600 active:bg-primary-600;
+}
+
+.sidebar-nav-link-item {
+  @apply flex items-center justify-start py-2 pr-3 pl-2 bg-white rounded-lg text-base text-primary hover:bg-primary-200 hover:font-bold active:bg-primary-600 active:text-white active:font-bold;
+}
+
+.sidebar-nav-link-item.router-link-exact-active,
+.sidebar-nav-link-item.router-link-active {
+  @apply bg-primary-600 text-white font-bold hover:bg-primary-600 hover:text-white active:font-bold;
+}
+
+.sidebar-nav-link-item.sidebar-nav-link-item--home.router-link-active {
+  @apply bg-white text-primary font-normal hover:bg-primary-200 hover:font-bold active:bg-primary-600 active:text-white active:font-bold;
+}
+
+.sidebar-nav-link-item.sidebar-nav-link-item--home.router-link-exact-active.router-link-active {
+  @apply bg-primary-600 text-white font-bold hover:bg-primary-600 hover:text-white hover:font-bold;
+}
+
+.sidebar-nav-link-item-left {
+  @apply relative grow-0 shrink-0;
+}
+
+.sidebar-nav-link-item-left .item-pre-icon {
+  @apply inline-flex;
+}
+
+.sidebar-nav-link-item-left .item-status {
+  @apply absolute -top-2.5 -left-2.5 text-base hidden;
+}
+
+.sidebar-nav-link-item-left .item-status.status--new::before {
+  content: "";
+  @apply block absolute top-1/2 left-1/2 w-2 h-2 -translate-x-1/2 -translate-y-1/2 bg-white;
+}
+
+.sidebar-nav-link-item-left .item-status.status--new .icon {
+  @apply relative text-highlight-500;
+}
+
+.sidebar-nav-link-item-right {
+  @apply grow flex items-center flex-nowrap space-x-1.5;
+}
+
+.sidebar-nav-link-item-right .item-title {
+  @apply grow inline-flex items-center h-6 pl-1 whitespace-nowrap;
+}
+
+.sidebar-nav-link-item-right .item-post-icon {
+  @apply grow-0 shrink-0 relative inline-flex;
+}
+
+.sidebar-nav-link-item-right .item-post-icon.status--new::before {
+  content: "";
+  @apply block absolute top-1/2 left-1/2 w-2 h-2 -translate-x-1/2 -translate-y-1/2 bg-white;
+}
+
+.sidebar-nav-link-item-right .item-post-icon.status--new .icon {
+  @apply relative text-highlight-500;
+}
+
+.sidebar-nav-link-item + .sidebar-nav-link-item {
+  @apply mt-1;
+}
+
+.sidebar-nav-link-item-popup {
+  @apply rounded-lg overflow-hidden shadow-md hidden;
+}
+
+.sidebar-nav-link-item-popup[data-show] {
+  @apply block;
+}
+
+.sidebar-nav-link-item-popup-link {
+  @apply flex items-center p-2 space-x-4 bg-white 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-link-item-popup-link.router-link-exact-active {
+  @apply bg-primary-600 text-white font-bold hover:bg-primary-600 hover:text-white hover:font-bold;
+}
+</style>

package/app/components/SLSidebarNavSectionItem.vue

@@ -12,10 +12,10 @@
 </template>
 
 <script lang="ts">
-import type { NavItemSection } from '~/interface/NavConfigType';
+import type { NavItemSection } from "~ui/app/interface/NavConfigType";
 
 export default defineComponent({
-  name: 'SLSidebarNavSectionItem',
+  name: "SLSidebarNavSectionItem",
   props: {
     navCollapsed: {
       type: Boolean,
@@ -26,34 +26,37 @@ export default defineComponent({
       required: true,
     },
   },
-  emits: ['click:item'],
+  emits: ["click:item"],
   setup(props, { emit }) {
     const { itemConfig } = toRefs(props);
 
     function onClickedItem(emitEvent?: string) {
-      emit('click:item', emitEvent);
+      emit("click:item", emitEvent);
     }
 
     return {
       onClickedItem,
     };
   },
-})
+});
 </script>
 
-<style lang="stylus">
-.sidebar.closure
-  .sidebar-nav-section-item
-    @apply s('lg:items-center')
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-.sidebar.dark
-  .sidebar-nav-section-item
-    &-header
-      @apply text-secondary-200
+.sidebar.closure .sidebar-nav-section-item {
+  @apply lg:items-center;
+}
 
-.sidebar-nav-section-item
-  @apply flex flex-col space-y-1
+.sidebar.dark .sidebar-nav-section-item-header {
+  @apply text-secondary-200;
+}
+
+.sidebar-nav-section-item {
+  @apply flex flex-col space-y-1;
+}
 
-  &-header
-    @apply text-xs text-pgray-3
-</style>
+.sidebar-nav-section-item-header {
+  @apply text-xs text-pgray-3;
+}
+</style>

package/app/components/SLSitePage.vue

@@ -52,13 +52,17 @@ export default defineComponent({
         headerMutationObserver = new MutationObserver(() => {
           const breadcrumbs = pageHeaderEl.value.querySelector("#breadcrumbs");
           const pageDataSources = pageHeaderEl.value.querySelector(
-            "#site-page-datasources"
+            "#site-page-datasources",
           );
           const headerLeftBottom = pageHeaderEl.value.querySelector(
-            "#site-page-header-left-bottom"
-          )
+            "#site-page-header-left-bottom",
+          );
 
-          if (breadcrumbs?.children.length || pageDataSources?.children.length || headerLeftBottom?.children.length) {
+          if (
+            breadcrumbs?.children.length ||
+            pageDataSources?.children.length ||
+            headerLeftBottom?.children.length
+          ) {
             isHeaderEmpty.value = false;
           } else {
             isHeaderEmpty.value = true;
@@ -106,31 +110,38 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.site-page
-  @apply flex flex-col w-full min-h-full s('pt-1.5')
-  @apply s('lg:pt-2')
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  &-header
-    @apply flex justify-between mb-4
+.site-page {
+  @apply flex flex-col w-full min-h-full pt-1.5 lg:pt-2;
+}
 
-    &.empty
-      @apply mb-0
+.site-page-header {
+  @apply flex justify-between mb-4;
+}
 
-      .site-page-header-left
-        #site-page-header-left-bottom
-          @apply mt-0
+.site-page-header.empty {
+  @apply mb-0;
+}
+
+.site-page-header.empty .site-page-header-left #site-page-header-left-bottom {
+  @apply mt-0;
+}
 
-    &-left
-      &-top
-        @apply flex items-center justify-start
+.site-page-header-left-top {
+  @apply flex items-center justify-start;
+}
 
-      #site-page-header-left-bottom
-        @apply flex mt-2
+.site-page-header-left #site-page-header-left-bottom {
+  @apply flex mt-2;
+}
 
-  &-notice
-    @apply mb-4 pl-2 pr-20 py-3 s('bg-[#FBFCFF]') rounded-lg text-sm text-pgray-2
+.site-page-notice {
+  @apply mb-4 pl-2 pr-20 py-3 bg-[#FBFCFF] rounded-lg text-sm text-pgray-2;
+}
 
-  &-content
-    @apply flex flex-col flex-grow w-full px-4 pt-4 pb-8 rounded-lg bg-white
+.site-page-content {
+  @apply flex flex-col grow w-full px-4 pt-4 pb-8 rounded-lg bg-white;
+}
 </style>

package/app/components/SLSkyInsightSitePage.vue

@@ -8,20 +8,25 @@
 
 <script>
 export default {
-  name: 'SkyInsightSitePage',
+  name: "SkyInsightSitePage",
   props: {},
   computed: {},
   methods: {},
 };
 </script>
 
-<style lang="stylus">
-.sky-insight-site-page
-  @apply flex-grow flex flex-col
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+.sky-insight-site-page {
+  @apply grow flex flex-col;
+}
 
-  &-header
-    @apply s('-mx-4')
+.sky-insight-site-page-header {
+  @apply -mx-4;
+}
 
-  &-content
-    @apply flex flex-col flex-grow w-full p-4 rounded bg-primary-50
+.sky-insight-site-page-content {
+  @apply flex flex-col grow w-full p-4 rounded bg-primary-50;
+}
 </style>

package/app/components/SLSortByDropdown.vue

@@ -21,7 +21,7 @@ import type { PropType } from "vue";
 import { createPopper } from "@popperjs/core";
 import type { Instance as PopperInstance } from "@popperjs/core";
 import { fromEvent, Subscription } from "rxjs";
-import type IInputOption from "~ui/interface/IInputOption";
+import type IInputOption from "~ui/app/interface/IInputOption";
 
 export default defineComponent({
   name: "SLSortByDropdown",
@@ -49,7 +49,7 @@ export default defineComponent({
     let clickSubscriber: Subscription | null = null;
 
     const selectedOption = computed(() =>
-      (options.value || []).find((o) => o.value === modelValue.value)
+      (options.value || []).find((o) => o.value === modelValue.value),
     );
 
     function onToggle() {
@@ -161,29 +161,42 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus" scoped>
-.sort-by-dropdown
-  @apply inline-flex
+<style scoped>
+@reference '~ui/app/assets/css/main.css';
 
-  &.single
-    .sort-by-dropdown-toggle
-      @apply bg-white cursor-default
-      .icon
-        @apply hidden
+.sort-by-dropdown {
+  @apply inline-flex;
+}
 
-  &-toggle
-    @apply inline-flex items-center px-1 s('py-0.5') space-x-2 bg-primary-50 rounded text-sm text-primary
-    .icon
-      @apply text-xs
+.sort-by-dropdown.single .sort-by-dropdown-toggle {
+  @apply bg-white cursor-default;
+}
 
-  &-menu
-    @apply s('z-[2]') flex-col s('min-w-[84px]') bg-white border border-primary-600 rounded overflow-hidden hidden
+.sort-by-dropdown.single .sort-by-dropdown-toggle .icon {
+  @apply hidden;
+}
 
-    &[data-show]
-      @apply inline-flex
+.sort-by-dropdown-toggle {
+  @apply inline-flex items-center px-1 py-0.5 space-x-2 bg-primary-50 rounded text-sm text-primary;
+}
 
-    .sort-by-dropdown-item
-      @apply inline-flex p-2 bg-white text-sm text-pgray-3
-      &.active
-        @apply bg-primary-100 text-primary
+.sort-by-dropdown-toggle .icon {
+  @apply text-xs;
+}
+
+.sort-by-dropdown-menu {
+  @apply z-2 flex-col min-w-21 bg-white border border-primary-600 rounded overflow-hidden hidden;
+}
+
+.sort-by-dropdown-menu[data-show] {
+  @apply inline-flex;
+}
+
+.sort-by-dropdown-menu .sort-by-dropdown-item {
+  @apply inline-flex p-2 bg-white text-sm text-pgray-3;
+}
+
+.sort-by-dropdown-menu .sort-by-dropdown-item.active {
+  @apply bg-primary-100 text-primary;
+}
 </style>

package/app/components/SLSpinIcon.vue

@@ -18,7 +18,10 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-i.spin-icon
-  @apply animate-spin
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+i.spin-icon {
+  @apply animate-spin;
+}
 </style>