@mptw/skylens-ui 1.4.34 → 1.4.36

package/app.vue

@@ -1,7 +1,5 @@
 <template lang="pug">
-SLButton(
-    icon='trash'
-    color='primary-600'
-    size='xxs'
+SLProfileButton(
+  username='Sherwin'
 )
 </template>

package/components/SLProfileButton.vue

@@ -2,6 +2,7 @@
 .profile-button(ref='el')
   a(
       href="javascript:;"
+      :class='{ active: isShowPopup }'
       @click.stop.prevent="onClickedToggle"
       ref="toggleEl"
     ).btn.toggle-button {{ title }}
@@ -42,6 +43,7 @@ export default defineComponent({
     const el = shallowRef<HTMLElement | null>(null);
     const toggleEl = shallowRef<HTMLElement | null>(null);
     const popupEl = shallowRef<HTMLElement | null>(null);
+    const isShowPopup = ref(false);
 
     let popperInstance: any = null;
     let clickSubscriber: any = null;
@@ -84,6 +86,7 @@ export default defineComponent({
     }
 
     function show() {
+      isShowPopup.value = true;
       subscribeClick();
       if (popupEl.value) {
         popupEl.value.setAttribute("data-show", "");
@@ -106,6 +109,7 @@ export default defineComponent({
     }
 
     function hide() {
+      isShowPopup.value = false;
       if (popupEl.value && popupEl.value.getAttribute("data-show") === null)
         return;
 
@@ -150,6 +154,7 @@ export default defineComponent({
       el,
       toggleEl,
       popupEl,
+      isShowPopup,
       title,
       showEditProfile,
       onClickedToggle,
@@ -167,7 +172,11 @@ export default defineComponent({
 <style lang="stylus">
 .profile-button
   .toggle-button
-    @apply inline-flex items-center justify-center w-10 h-10 p-0 rounded-full s('bg-primary/80') s('text-2.67xl') s('leading-9.25') text-primary-25 font-bold
+    @apply inline-flex items-center justify-center w-7 h-7 p-0 rounded-full bg-primary-400 text-lg text-white font-bold
+    @apply s('hover:bg-primary-600') s('active:bg-primary')
+
+    &.active
+      @apply bg-primary
 
 .profile-nav-popup
   @apply z-60 absolute s('min-w-[10.25rem]') p-4 border border-primary bg-primary-50 rounded shadow-popup-lg pointer-events-none invisible

package/components/SLSidebarNav.vue

@@ -0,0 +1,263 @@
+<template lang="pug">
+.sidebar(:class="{ closure: closuredProxy, dark }")
+  .sidebar-modal(@click="onClickedToggle")
+  .sidebar-logo
+    a.logo(href="javascript:;" @click="onClickedLogo")
+      img.color-big(src="~/assets/images/commons/app-logo-big.svg")
+      img.white-big(src="~/assets/images/commons/app-logo-big-white.svg")
+      img.color-small(src='~/assets/images/commons/app-logo-small.svg')
+      img.white-small(src='~/assets/images/commons/app-logo-small-white.svg')
+  nav.site-nav
+    .nav-wrapper.custom-scrollbar-y
+      template(v-for='item in config')
+        SLSidebarNavLinkItem(
+          v-if='item.navType === "link"'
+          :nav-collapsed='closured'
+          :item-config='item'
+          @click:item='onClickedItem'
+        )
+        SLSidebarNavSectionItem(
+          v-else-if='item.navType === "section"'
+          :nav-collapsed='closured'
+          :item-config='item'
+          @click:item='onClickedItem'
+        )
+        SLSidebarNavGroupItem(
+          v-else-if='item.navType === "group"'
+          :nav-collapsed='closured'
+          :item-config='item'
+          @click:item='onClickedItem'
+        )
+        .sidebar-nav-divide-item(
+          v-else
+        )
+  .sidebar-mode-setting
+    .sidebar-mode-setting-title 模式
+    SLIOSSwitch(
+      :modelValue="dark"
+      trueLabel="深色"
+      minTrueLabel="深"
+      falseLabel="淺色"
+      minFalseLabel="淺"
+      :size="closuredProxy ? 'min' : ''"
+      @update:modelValue="onUpdatedMode"
+    )
+  a.sidebar-toggle(href="javascript:;", @click="onClickedToggle")
+    SLIcon(icon="chevron-left")
+    SLIcon(icon="chevron-right")
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import type { NavConfigType } from "~ui/interface/NavConfigType";
+
+export default defineComponent({
+  name: "SLSidebarNav",
+  props: {
+    dark: {
+      type: Boolean,
+      default: false,
+    },
+    closured: {
+      type: Boolean,
+      default: false,
+    },
+    config: {
+      type: Array as PropType<NavConfigType>,
+        default: () => [],
+    }
+  },
+  emits: ["click:logo", "update:dark", "update:closured", "click:insight"],
+  setup(props, { emit }) {
+    const { closured } = toRefs(props);
+
+    const closuredProxy = computed({
+      get: () => closured.value,
+      set: (newValue) => emit('update:closured', newValue),
+    });
+
+    function onClickedToggle() {
+      closuredProxy.value = !closuredProxy.value;
+    }
+
+    function onClickedLogo() {
+      emit("click:logo");
+    }
+
+    function onClickedItem(
+      eventName:
+        | "click:logo"
+        | "update:dark"
+        | "update:closured"
+        | "click:insight"
+    ) {
+      emit(eventName);
+    }
+
+    function onUpdatedMode(isDark: boolean) {
+      emit("update:dark", isDark);
+    }
+
+    return {
+      closuredProxy,
+      onClickedToggle,
+      onClickedLogo,
+      onClickedItem,
+      onUpdatedMode,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.sidebar
+  @apply relative flex flex-col s('w-[188px]') h-full bg-white rounded-r-lg shadow transition-all
+
+  &.dark
+    @apply bg-primary
+
+    &.closure
+      .sidebar-logo
+        .logo
+          img.color-small
+            @apply s('lg:hidden')
+
+          img.white-big
+            @apply s('lg:hidden')
+
+          img.white-small
+            @apply s('lg:block')
+
+      .sidebar-toggle
+        &:hover
+          @apply bg-primary-300 text-white
+
+    .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 border-primary-600
+          background #2D2F57
+
+          &:before
+            @apply border-2 border-primary-600 bg-primary-300
+
+    .sidebar-toggle
+      @apply bg-primary-300 text-white
+
+      &:hover
+        @apply bg-primary-25 text-primary
+
+  &.closure
+    @apply s('-ml-[188px]')
+    @apply s('lg:ml-0') s('lg:w-[84px]')
+
+    .sidebar-modal
+      @apply hidden
+
+    .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 bg-primary-600 text-white
+      margin-right -20px
+      border-radius 0px 12px 12px 0px
+
+      &:hover
+        @apply bg-primary-300 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
+
+  &-modal
+    @apply fixed top-0 left-0 w-full h-full bg-white opacity-0
+    @apply s('lg:hidden')
+
+  &-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-mode-setting
+    @apply flex-grow-0 flex-shrink-0 flex items-center justify-end my-4 pr-4 s('pl-[42px]') space-x-2 text-base text-primary
+
+    &-title
+      @apply flex-grow-0 flex-shrink-0
+
+    .ios-switch
+      @apply flex-grow
+
+      label
+        @apply border-primary-100 bg-primary-25
+
+        &:before
+          @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
+
+    &:hover
+      @apply bg-primary-300 text-white
+
+    .icon-chevron-right
+      @apply hidden
+</style>
+  

package/components/SLSidebarNavGroupItem.vue

@@ -0,0 +1,37 @@
+<template lang="pug">
+.sidebar-nav-group-item
+  SLSidebarNavGroupItemSection(
+    v-for='(groupSection, i) in itemConfig.sections'
+    :nav-collapsed='navCollapsed'
+    :item-config='groupSection'
+    :key='`${groupSection.code}-${i}`'
+  )
+    .sidebar-nav-group-section-header
+</template>
+
+<script lang="ts">
+import type { NavItemGroup } from '~/interface/NavConfigType';
+
+export default defineComponent({
+  name: 'SLSidebarNavGroupItem',
+  props: {
+    navCollapsed: {
+      type: Boolean,
+      default: false,
+    },
+    itemConfig: {
+      type: Object as PropType<NavItemGroup>,
+      required: true,
+    },
+  },
+  emits: ['click:item'],
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style lang="stylus">
+.sidebar-nav-group-item
+  @apply w-full mt-1 p-2 space-y-1 bg-primary-50 rounded-lg overflow-hidden
+</style>