@mptw/skylens-ui 1.4.38 → 1.4.40

package/assets/css/fonts/MEShPlus-font-icon.svg

@@ -195,4 +195,5 @@
 <glyph unicode="&#xe9b9;" glyph-name="venn" d="M512 470.666c-50.067 44.811-115.903 72.364-188.158 73.309l-0.132 0.257c8.783-0.111 17.471-0.616 26.048-1.496l177.768 307.901c14.772-1.073 29.122-3.666 42.895-7.622l-177.818-307.99c11.905-3.092 23.51-6.926 34.764-11.45l176.926 306.445c12.366-6.017 24.057-13.206 34.929-21.422l-174.954-303.029c10.392-6.026 20.372-12.684 29.889-19.92l172.289 298.41c10.112-10.842 19.104-22.749 26.778-35.536l-143.939-249.31c17.977 11.472 37.313 21.003 57.711 28.298l104.717 181.373c6.752-19.588 10.707-40.481 11.386-62.201l-60.877-105.436c12.448 1.809 25.158 2.821 38.067 2.984l-0.128-0.257c-72.257-0.945-138.093-28.498-188.16-73.309zM485.51 849.555l-168.255-291.427c-7.414 17.615-12.509 36.447-14.9 56.113l127.158 220.244c17.574 7.463 36.367 12.613 55.997 15.069zM374.764 804.46l-75.573-122.413c-5.441 32 26.559 96 75.573 122.413zM512 928c-9.908 0-19.699-0.5-29.348-1.477l0.157 0.271c-15.854-1.596-31.329-4.478-46.319-8.539l-0.175-0.303c-21.636-5.877-42.259-14.213-61.551-24.689l0.215 0.372c-28.33-15.352-53.795-35.317-75.388-58.887l-0.4-0.693c-27.77-30.436-49.097-66.851-61.827-107.087l-0.178-0.308c-8.567-27.276-13.186-56.301-13.186-86.404v-0.255c0-37.464 7.153-73.257 20.168-106.088-122.268-33.284-212.168-145.1-212.168-277.912 0-159.059 128.942-288 288-288 73.762 0 141.048 27.731 192 73.331 50.952-45.6 118.238-73.331 192-73.331 159.059 0 288 128.941 288 288 0 132.813-89.901 244.628-212.166 277.912 13.011 32.831 20.166 68.625 20.166 106.088 0 19.888-2.016 39.305-5.856 58.058l0.038 0.067c-3.334 16.343-8.051 32.183-14.022 47.392l-0.064-0.104c-6.048 15.372-13.382 30.098-21.862 44.046l0.070 0.131c-6.854 11.282-14.458 22.055-22.752 32.25l-0.083-0.149c-9.011 11.068-18.829 21.454-29.363 31.069l0.096 0.167c-8.922 8.153-18.355 15.752-28.256 22.742l-0.102-0.182c-11.136 7.855-22.854 14.94-35.072 21.179l0.115 0.197c-10.662 5.448-21.707 10.252-33.085 14.359l-0.122-0.211c-13.161 4.744-26.767 8.557-40.739 11.359l0.132 0.229c-12.547 2.522-25.388 4.229-38.467 5.063l-0.142-0.246c-6.105 0.386-12.262 0.582-18.465 0.582zM436.169 362.088c-13.016-32.831-20.169-68.622-20.169-106.088 0-57.613 16.918-111.277 46.055-156.288-37.512-34.118-87.355-54.912-142.055-54.912-116.643 0-211.2 94.56-211.2 211.2 0 104.341 75.664 191.010 175.117 208.13 37.779-48.922 90.947-85.354 152.252-102.042zM740.083 464.13c99.45-17.12 175.117-103.789 175.117-208.13 0-116.64-94.56-211.2-211.2-211.2-54.701 0-104.543 20.794-142.055 54.912 29.138 45.011 46.055 98.675 46.055 156.288 0 37.466-7.153 73.257-20.168 106.088 61.308 16.689 114.472 53.12 152.252 102.042z" />
 <glyph unicode="&#xe9ba;" glyph-name="filter-funnel" d="M88.482 810.021c-0.489-1.206-0.639-1.946-0.685-2.263-0.015-0.108-0.022-0.181-0.024-0.226 0.124-0.366 0.667-1.597 2.58-3.711l0.086-0.095 389-433.001c6.030-6.712 9.366-15.417 9.366-24.44v-280.004c0-1.068 0.148-2.172 0.604-3.445 0.575-0.527 1.197-0.914 1.958-1.258 0.477-0.219 0.949-0.446 1.416-0.68l50.879-25.819v311.207c0 9.023 3.336 17.728 9.366 24.44l389.088 433.096c1.324 1.461 1.902 2.434 2.121 2.864 0.007 0.023 0.022 0.045 0.029 0.065-0.073 0.38-0.307 1.268-1.002 2.709l-0.505 1.096c-0.724 1.65-1.317 2.489-1.58 2.82-0.022 0.021-0.037 0.041-0.051 0.059-0.336 0.090-1.236 0.279-2.896 0.279h-843.998c-1.676 0-2.638-0.193-3.068-0.309-0.218-0.059-0.337-0.107-0.383-0.127l-0.062-0.031-0.116-0.093c-0.078-0.068-0.223-0.208-0.429-0.453-0.367-0.437-0.97-1.265-1.693-2.679zM87.741 807.649c0.002 0 0.010-0.028 0.020-0.082zM51.248 874.824c13.312 8.534 28.172 12.033 42.986 12.033h843.998c14.789 0 29.755-3.49 43.103-12.269 13.136-8.641 22.192-20.763 28.131-34.024 6.385-13.528 9.611-28.759 7.175-44.78-2.458-16.14-10.167-29.827-20.231-40.97-0.015-0.021-0.037-0.043-0.059-0.065l-379.546-422.479v-314.987c0-21.848-10.448-40.675-29.195-52.027-18.289-11.783-39.719-13.4-59.702-4.176-0.412 0.19-0.82 0.388-1.224 0.592l-66.401 33.697c-12.989 6.071-23.804 15.221-32.010 26.946-0.779 1.112-1.496 2.267-2.146 3.46-6.796 12.456-10.465 26.119-10.465 40.507v265.988l-379.548 422.479c-0.016 0.018-0.033 0.037-0.049 0.054-9.953 11.017-17.619 24.44-20.362 40.216-2.766 15.904-0.007 31.214 6.056 44.995l0.504 1.097c6.353 13.236 15.731 25.217 28.984 33.713z" />
 <glyph unicode="&#xe9bb;" glyph-name="txt" d="M374.726 948h340.998l281.005-282v-584.003c0-36.666-13.338-67.994-40-93.997-26.003-26.669-57.338-40-94.003-40h-488c-36.666 0-68.333 13.331-95 40-26 26.003-39 57.331-39 93.997v14.003h86v-14.003c0-13.331 4.667-24.666 14-33.997s20.667-14.003 34-14.003h488c13.331 0 24.666 4.672 34.003 14.003 9.331 9.331 13.997 20.666 13.997 33.997v567.003h-108.998c-28.666 0-53.338 10.001-74.003 30.001-20 20.666-29.997 45.333-29.997 73.999v109h-323.002c-13.333 0-24.666-4.667-34-14s-14-20.667-14-34v-270h-86v270c0 36.667 13 68 39 94 26.666 26.667 58.333 40 95 40zM674.246 429.301v-277.116h74.867v277.116h93.587v62.088h-262.045v-62.088h93.591zM294.273 152.186l94.045 174.397-89.023 164.806h83.088l30.588-65.74c3.956-7.913 7.761-16.283 11.413-25.109 3.956-8.826 8.522-18.565 13.696-29.218h1.826c3.956 10.653 7.761 20.392 11.413 29.218s7.152 17.196 10.5 25.109l28.305 65.74h78.979l-88.566-168.003 94.501-171.201h-82.632l-34.696 70.765c-4.26 8.525-8.522 17.35-12.783 26.477-3.956 9.434-8.369 19.328-13.239 29.677h-1.826c-4.261-10.349-8.37-20.243-12.326-29.677-3.652-9.126-7.457-17.952-11.413-26.477l-32.87-70.765h-78.979zM119.188 429.3v-277.114h74.87v277.114h93.588v62.088h-262.047v-62.088h93.588z" />
+<glyph unicode="&#xe9bc;" glyph-name="comment" d="M795.456 126.899c-8.192 22.304-3.354 47.309 12.563 64.941 55.379 61.37 87.981 139.487 87.981 224.16 0 190.020-167.373 352-384 352s-384-161.98-384-352c0-190.022 167.373-352 384-352 60.817 0 118.070 12.934 168.858 35.789 12.55 5.645 26.509 7.066 39.802 4.186l87.936-12.845-13.139 35.77zM902.035 22.342c1.677-4.55-2.131-9.242-6.931-8.538l-186.624 27.27c-0.48 0.070-0.934 0.192-1.357 0.352-58.982-26.547-125.181-41.427-195.123-41.427-247.423 0-448 186.246-448 416 0 229.75 200.577 416 448 416s448-186.25 448-416c0-101.645-39.264-194.778-104.467-267.034l46.502-126.624zM352 416c0-35.346-28.654-64-64-64s-64 28.654-64 64c0 35.346 28.654 64 64 64s64-28.654 64-64zM576 416c0-35.346-28.654-64-64-64s-64 28.654-64 64c0 35.346 28.654 64 64 64s64-28.654 64-64zM800 416c0-35.346-28.654-64-64-64s-64 28.654-64 64c0 35.346 28.654 64 64 64s64-28.654 64-64z" />
 </font></defs></svg>

package/assets/css/icons.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'MEShPlus-font-icon';
-  src: url('fonts/MEShPlus-font-icon.eot?1oxse');
-  src: url('fonts/MEShPlus-font-icon.eot?1oxse#iefix') format('embedded-opentype'),
-    url('fonts/MEShPlus-font-icon.ttf?1oxse') format('truetype'),
-    url('fonts/MEShPlus-font-icon.woff?1oxse') format('woff'),
-    url('fonts/MEShPlus-font-icon.svg?1oxse#MEShPlus-font-icon') format('svg');
+  src: url('fonts/MEShPlus-font-icon.eot?5k1c3l');
+  src: url('fonts/MEShPlus-font-icon.eot?5k1c3l#iefix') format('embedded-opentype'),
+    url('fonts/MEShPlus-font-icon.ttf?5k1c3l') format('truetype'),
+    url('fonts/MEShPlus-font-icon.woff?5k1c3l') format('woff'),
+    url('fonts/MEShPlus-font-icon.svg?5k1c3l#MEShPlus-font-icon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -776,4 +776,8 @@
 
 .icon-txt:before {
   content: "\e9bb";
+}
+
+.icon-comment:before {
+  content: "\e9bc";
 }

package/components/SLSidebarNav.vue

@@ -10,21 +10,22 @@
   nav.site-nav
     .nav-wrapper.custom-scrollbar-y
       template(v-for='item in config')
-        SLSidebarNavLinkItem(
+        SLNewSidebarNavLinkItem(
           v-if='item.navType === "link"'
           :nav-collapsed='closured'
           :item-config='item'
           @click:item='onClickedItem'
         )
-        SLSidebarNavSectionItem(
+        SLNewSidebarNavSectionItem(
           v-else-if='item.navType === "section"'
           :nav-collapsed='closured'
           :item-config='item'
           @click:item='onClickedItem'
         )
-        SLSidebarNavGroupItem(
+        SLNewSidebarNavGroupItem(
           v-else-if='item.navType === "group"'
           :nav-collapsed='closured'
+          :nav-dark='dark'
           :item-config='item'
           @click:item='onClickedItem'
         )
@@ -114,7 +115,7 @@ export default defineComponent({
   @apply relative flex flex-col s('w-[188px]') h-full bg-white rounded-r-lg shadow transition-all
 
   &.dark
-    @apply bg-primary
+    @apply bg-primary-800
 
     &.closure
       .sidebar-logo
@@ -129,8 +130,10 @@ export default defineComponent({
             @apply s('lg:block')
 
       .sidebar-toggle
+        @apply bg-primary-900
+
         &:hover
-          @apply bg-primary-300 text-white
+          @apply bg-primary-600
 
     .sidebar-logo
       .logo
@@ -162,10 +165,10 @@ export default defineComponent({
             @apply border-2 border-primary-600 bg-primary-300
 
     .sidebar-toggle
-      @apply bg-primary-300 text-white
+      @apply bg-primary-900 text-white
 
       &:hover
-        @apply bg-primary-25 text-primary
+        @apply bg-primary-600
 
   &.closure
     @apply s('-ml-[188px]')
@@ -184,12 +187,10 @@ export default defineComponent({
           @apply s('lg:block')
 
     .sidebar-toggle
-      @apply bg-primary-600 text-white
-      margin-right -20px
-      border-radius 0px 12px 12px 0px
+      @apply s('-mr-5') bg-primary-300 rounded-l-none rounded-r-xl text-white
 
       &:hover
-        @apply bg-primary-300 text-white
+        @apply bg-primary-400 text-white
 
       .icon-chevron-left
         @apply hidden
@@ -248,11 +249,7 @@ export default defineComponent({
           @apply border-2 border-primary-100
 
   &-toggle
-    @apply absolute top-0 right-0 flex justify-center items-center bg-primary-50 text-sm text-primary-600 leading-none transition-all
-    width 20px
-    height 40px
-    margin-top 10px
-    border-radius 12px 0px 0px 12px
+    @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

package/components/SLSidebarNavGroupItem.vue

@@ -1,8 +1,9 @@
 <template lang="pug">
 .sidebar-nav-group-item
-  SLSidebarNavGroupItemSection(
+  SLNewSidebarNavGroupItemSection(
     v-for='(groupSection, i) in itemConfig.sections'
     :nav-collapsed='navCollapsed'
+    :nav-dark='navDark'
     :item-config='groupSection'
     :key='`${groupSection.code}-${i}`'
   )
@@ -19,6 +20,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    navDark: {
+      type: Boolean,
+      default: false,
+    },
     itemConfig: {
       type: Object as PropType<NavItemGroup>,
       required: true,
@@ -32,6 +37,10 @@ export default defineComponent({
 </script>
 
 <style lang="stylus">
+.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 overflow-hidden
 </style>

package/components/SLSidebarNavGroupItemSection.vue

@@ -43,7 +43,7 @@
   ClientOnly
     Teleport(to='#nav')
       .sidebar-nav-group-item-section-popup(
-        :class='{ single: itemConfig.links.length === 0 }'
+        :class='{ single: itemConfig.links.length === 0, dark: navDark}'
         ref='popupEl'
         @mouseenter='onPopupMouseEnter'
         @mouseleave='onIconMouseLeave'
@@ -56,6 +56,8 @@
           .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-link-icon(v-else)
+            SLIcon(icon='sort-down')
         .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'
@@ -81,6 +83,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    navDark: {
+      type: Boolean,
+      default: false,
+    },
     itemConfig: {
       type: Object as PropType<NavItemSection>,
       required: true,
@@ -362,6 +368,25 @@ export default defineComponent({
       &-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
@@ -411,7 +436,32 @@ export default defineComponent({
           @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
+  @apply flex-col s('min-w-[142px]') p-2 space-y-1 bg-white rounded-lg overflow-hidden shadow-md hidden
+
+  &.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
@@ -419,6 +469,9 @@ export default defineComponent({
   &.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')
@@ -428,7 +481,7 @@ export default defineComponent({
       @apply s('hover:bg-primary-600') s('hover:text-white') s('hover:font-bold')
 
     &-icon
-      @apply inline-flex
+      @apply inline-flex origin-center rotate-180
 
   &-divide
     @apply h-px bg-primary-200

package/components/SLSidebarNavLinkItem.vue

@@ -2,7 +2,7 @@
 NuxtLink.sidebar-nav-link-item(
   :to='itemConfig.to ? itemConfig.to : "javascript:;"',
   :external='!itemConfig.to',
-  :class='{ "sidebar-nav-link-item--home": itemConfig.to === "/application" }'
+  :class='{ "sidebar-nav-link-item--home": itemConfig.to === "/application", "router-link-active": linkActive }'
   ref='linkComp'
   @click='onClickedItem'
 )
@@ -75,6 +75,8 @@ export default defineComponent({
   },
   emits: ['click:item'],
   setup(props, { emit }) {
+    const route = useRoute();
+
     const { navCollapsed, itemConfig } = toRefs(props);
 
     const linkComp = shallowRef<NuxtLinkType | null>(null);
@@ -83,6 +85,19 @@ export default defineComponent({
     let popperInstance: PopperInstance | null = null;
     let popupHideTimeoutId: any = null;
 
+    const linkActive = computed(() => {
+      let linkActive = false;
+
+      itemConfig.value.include?.forEach((i) => {
+        const regexp = new RegExp(i);
+        if (regexp.test(route.path)) {
+          linkActive = true;
+        }
+      });
+
+      return linkActive;
+    });
+
     function showPopup() {
       if (
         !linkComp.value ||
@@ -191,6 +206,7 @@ export default defineComponent({
     return {
       linkComp,
       popupEl,
+      linkActive,
       onIconMouseEnter,
       onIconMouseLeave,
       onPopupMouseEnter,
@@ -211,6 +227,23 @@ export default defineComponent({
     &-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')
+
+    &.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-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')

package/components/SLSidebarNavSectionItem.vue

@@ -2,7 +2,7 @@
 .sidebar-nav-section-item
   .sidebar-nav-section-item-header {{ itemConfig.title }}
   .sidebar-nav-section-item-body
-    SLSidebarNavLinkItem(
+    SLNewSidebarNavLinkItem(
       v-for='(link, i) in itemConfig.links'
       :nav-collapsed='navCollapsed'
       :item-config='link'
@@ -46,6 +46,11 @@ export default defineComponent({
   .sidebar-nav-section-item
     @apply s('lg:items-center')
 
+.sidebar.dark
+  .sidebar-nav-section-item
+    &-header
+      @apply text-secondary-200
+
 .sidebar-nav-section-item
   @apply flex flex-col space-y-1
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mptw/skylens-ui",
   "type": "module",
-  "version": "1.4.38",
+  "version": "1.4.40",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",