@mptw/skylens-ui 1.4.42 → 1.4.43

package/components/SLSidebarNavGroupItemSection.vue

@@ -407,13 +407,13 @@ export default defineComponent({
       @apply s('hover:bg-primary-600') s('hover:text-white') s('hover:font-bold')
     
     &-left
-      @apply flex-grow-0 flex-shrink-0
+      @apply flex-grow-0 flex-shrink-0 inline-flex
 
     &-right
-      @apply flex-grow flex items-center flex-nowrap space-x-1
+      @apply flex-grow flex items-center justify-between flex-nowrap space-x-1
 
       .sidebar-nav-group-section-title
-        @apply flex-grow pl-1 whitespace-nowrap
+        @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

package/components/SLSidebarNavLinkItem.vue

@@ -10,12 +10,26 @@ NuxtLink.sidebar-nav-link-item(
     @mouseenter='onIconMouseEnter',
     @mouseleave='onIconMouseLeave'
   )
-    SLIcon(
-      :icon='itemConfig.preIcon'
+    .item-pre-icon
+      SLIcon(
+        :icon='itemConfig.preIcon'
+      )
+    .item-status(
+      v-if='itemConfig.status !== "normal" && itemConfig.status !== "lock"'
+      :class='{ "status--new": itemConfig.status === "new" }'
     )
+      SLIcon(
+        v-if='itemConfig.status === "new"',
+        icon='new-circle'
+      )
+      .inline-flex.items-center.justify-center.w-4.h-4(v-else-if='itemConfig.status === "badge"')
+        .bg-danger.rounded-full(class='w-1.5 h-1.5')
   .sidebar-nav-link-item-right
     .item-title {{ itemConfig.title }}
-    .item-post-icon(v-if='itemConfig.status !== "normal"')
+    .item-post-icon(
+      v-if='itemConfig.status !== "normal"'
+      :class='{ "status--new": itemConfig.status === "new" }'
+    )
       SLIcon(
         v-if='itemConfig.status === "lock"',
         icon='lock'
@@ -24,7 +38,7 @@ NuxtLink.sidebar-nav-link-item(
         v-else-if='itemConfig.status === "new"',
         icon='new-circle'
       )
-      .inline-flex.items-center.justify-center.w-4.h-4(v-else)
+      .inline-flex.items-center.justify-center.w-4.h-4(v-else-if='itemConfig.status === "badge"')
         .bg-danger.rounded-full(class='w-1.5 h-1.5')
   ClientOnly
     Teleport(to='#nav')
@@ -224,6 +238,9 @@ export default defineComponent({
     &-left
       @apply s('lg:inline-flex')
 
+      .item-status
+        @apply s('lg:inline-flex')
+
     &-right
       @apply s('lg:hidden')
 
@@ -261,13 +278,38 @@ export default defineComponent({
     @apply s('hover:bg-primary-600') s('hover:text-white') s('hover:font-bold')
 
   &-left
-    @apply flex-grow-0 flex-shrink-0
+    @apply relative flex-grow-0 flex-shrink-0
+
+    .item-pre-icon
+      @apply inline-flex
+
+    .item-status
+      @apply absolute s('-top-2.5') s('-left-2.5') text-base hidden
+
+      &.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
 
   &-right
-    @apply flex-grow flex items-center justify-start flex-nowrap s('space-x-1.5')
+    @apply flex-grow flex items-center flex-nowrap s('space-x-1.5')
 
     .item-title
-      @apply pl-1 whitespace-nowrap
+      @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

package/interface/NavConfigType.ts

@@ -17,7 +17,7 @@ export enum NavItemStatus {
   Plus = 'plus',
   Lock = 'lock',
   New = 'new',
-  Notice = 'notice',
+  Badge = 'badge',
 }
 
 export type NavItemDivide = {

package/package.json

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