@mptw/skylens-ui 1.4.34 → 1.4.36

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mptw/skylens-ui",
   "type": "module",
-  "version": "1.4.34",
+  "version": "1.4.36",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",
@@ -12,8 +12,8 @@
     "postinstall": "nuxt prepare .playground"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^0.7.2",
-    "eslint": "^9.16.0",
+    "@nuxt/eslint-config": "^0.7.4",
+    "eslint": "^9.17.0",
     "nuxt": "^3.14.1592",
     "typescript": "^5.7.2"
   },
@@ -33,7 +33,7 @@
     "@vue/language-plugin-pug": "^2.1.10",
     "commonmark": "^0.31.2",
     "date-fns": "^4.1.0",
-    "dompurify": "^3.2.2",
+    "dompurify": "^3.2.3",
     "echarts": "^5.5.1",
     "echarts-wordcloud": "^2.1.0",
     "exceljs": "^4.4.0",

package/tailwind.config.js

@@ -239,8 +239,8 @@ module.exports = {
         margin: 'margin',
         'font-size': 'font-size',
         padding: 'padding',
-        'siderbar-nav-item': 'border-radius, width',
-        'siderbar-nav-item-icon': 'width, height, font-size',
+        'sidebar-nav-item': 'border-radius, width',
+        'sidebar-nav-item-icon': 'width, height, font-size',
         'border-radius': 'border-radius',
       },
       opacity: {

package/components/SLSiderbarNav.vue

@@ -1,394 +0,0 @@
-<template lang="pug">
-.siderbar(:class="{ closure: isClosure, dark }")
-  .siderbar-modal(@click="onClickedToggle")
-  .siderbar-logo
-    a.logo(href="javascript:;" @click="onClickedLogo")
-      img.color(src="images/commons/app-logo.png")
-      img.white(src="images/commons/app-logo-white.png")
-  nav.site-nav
-    .nav-wrapper.custom-scrollbar-y
-      ul(v-if="firstConfig.length > 0")
-        SLSiderbarNavItem(
-          v-for="item, i in firstConfig"
-          :config="item"
-          :isSiderbarClosure="isClosure"
-          :key="i"
-          @toggle="onClickedToggle"
-          @click-item="onClickedItem"
-        )
-  nav.mng-nav
-    .nav-wrapper.custom-scrollbar-y
-      ul(v-if="secondConfig.length > 0")
-        SLSiderbarNavItem(
-          v-for="item, i in secondConfig"
-          :config="item"
-          :isSiderbarClosure="isClosure"
-          :key="i"
-          @toggle="onClickedToggle"
-          @click-item="onClickedItem"
-        )
-  .siderbar-mode-setting
-    .siderbar-mode-setting-title 模式
-    SLIOSSwitch(
-      :modelValue="dark"
-      trueLabel="深色"
-      minTrueLabel="深"
-      falseLabel="淺色"
-      minFalseLabel="淺"
-      :size="isClosure ? 'min' : ''"
-      @update:modelValue="onUpdatedMode"
-    )
-  a.siderbar-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,
-    },
-    firstConfig: {
-      type: Array as PropType<NavConfigType>,
-      default: () => [],
-    },
-    secondConfig: {
-      type: Array as PropType<NavConfigType>,
-      default: () => [],
-    },
-  },
-  emits: ["click:logo", "update:dark", "update:closure", "click:insight"],
-  setup(_, { emit }) {
-    const isClosure = ref(false);
-
-    function onClickedToggle() {
-      isClosure.value = !isClosure.value;
-    }
-
-    function onClickedLogo() {
-      emit("click:logo");
-    }
-
-    function onClickedItem(
-      eventName:
-        | "click:logo"
-        | "update:dark"
-        | "update:closure"
-        | "click:insight"
-    ) {
-      emit(eventName);
-    }
-
-    function onUpdatedMode(isDark: boolean) {
-      emit("update:dark", isDark);
-    }
-
-    watch(isClosure, () => {
-      emit("update:closure", isClosure.value);
-    });
-
-    return {
-      isClosure,
-      onClickedToggle,
-      onClickedLogo,
-      onClickedItem,
-      onUpdatedMode,
-    };
-  },
-});
-</script>
-
-<style lang="stylus">
-.siderbar
-  @apply relative flex flex-col h-full bg-white shadow transition-all
-  width 188px
-
-  &.dark
-    @apply bg-primary
-
-    &.closure
-      nav
-        .siderbar-nav-item
-          &.included
-            @apply text-primary-600
-
-            & > .nav-item-container
-              .nav-item-wrapper
-                @apply bg-primary-25
-
-      .siderbar-toggle
-        &:hover
-          @apply bg-primary-300 text-white
-
-    .siderbar-logo
-      .logo
-        img.color
-          @apply hidden
-
-        img.white
-          @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
-
-      .siderbar-nav-item
-        @apply text-white
-
-        &.highlighted
-          @apply text-primary-600
-
-          & > .nav-item-container
-            &:hover
-              .nav-item-wrapper
-                @apply bg-primary-25
-
-            .nav-item-wrapper
-              @apply bg-primary-25
-
-        .nav-item-container
-          &:hover
-            .nav-item-wrapper
-              @apply bg-primary-600
-
-          .nav-item-wrapper
-            .nav-item-highlight-border
-              @apply bg-insight-hint-line
-
-    .siderbar-mode-setting
-      @apply text-white
-
-      .ios-switch
-        label
-          @apply border-primary-600
-          background #2D2F57
-
-          &:before
-            @apply border-2 border-primary-600 bg-primary-300
-
-    .siderbar-toggle
-      @apply bg-primary-300 text-white
-
-      &:hover
-        @apply bg-primary-25 text-primary
-
-  &.closure
-    margin-left -188px
-
-    @media screen and (min-width: 1024px)
-      width 86px
-      margin-left 0
-
-    .siderbar-modal
-      @apply hidden
-
-    .siderbar-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
-      .siderbar-nav-item
-        &.included
-          @apply text-white
-
-          & > .nav-item-container
-            .nav-item-wrapper
-              @apply bg-primary-600
-
-        .nav-item-container
-          @apply rounded-r-full
-          width 37px
-
-          .nav-item-wrapper
-            @apply pl-0
-
-            .nav-item-button
-              .button-pre-icon
-                @apply text-lg
-                width 37px
-                height 37px
-
-              .button-title
-                @apply opacity-0
-
-            .nav-item-toggle
-              @apply opacity-0
-
-    .siderbar-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-5
-
-    .logo
-      @apply block
-
-      img.white
-        @apply hidden
-
-  nav + nav
-    @apply border-t border-primary-300
-
-  nav
-    @apply flex-grow relative flex flex-col overflow-hidden
-
-    &.mng-nav
-      @apply flex-grow-0 flex-shrink-0 pt-2 mt-auto
-
-    .nav-wrapper
-      @apply flex-grow
-
-      &.custom-scrollbar-y
-        @apply overflow-hidden s('hover:overflow-auto')
-
-      ul
-        @apply flex flex-col space-y-2
-
-    .siderbar-nav-item
-      @apply relative flex flex-col items-center w-full text-primary text-base
-
-      &.opened
-        .nav-item-toggle
-          @apply rotate-90
-
-      &.included
-        & > .nav-item-container
-          .nav-item-wrapper
-            .nav-item-button
-              .button-title
-                @apply font-bold
-
-      &.highlighted
-        @apply text-white
-
-        & > .nav-item-container
-          &:hover
-            .nav-item-wrapper
-              @apply bg-primary-600
-
-          .nav-item-wrapper
-            @apply bg-primary-600
-
-            .nav-item-button
-              .button-title
-                @apply font-bold
-
-            .nav-item-highlight-border
-              @apply opacity-100
-
-      &.disabled
-        .nav-item-wrapper
-          .nav-item-button
-            @apply cursor-default
-
-          .nav-item-toggle
-            @apply text-gray-4 cursor-default
-
-
-      .nav-item-container
-        @apply relative w-full rounded-l-full overflow-hidden transition-siderbar-nav-item
-        height 37px
-
-        &:hover
-          .nav-item-wrapper
-            @apply bg-primary-100
-
-          .nav-item-button
-            @apply font-bold
-
-        .nav-item-wrapper
-          @apply absolute top-0 left-0 flex items-center pl-4 transition-padding
-          width 188px
-          height 37px
-
-          .nav-item-button
-            @apply flex-grow flex items-center space-x-2
-
-            .button-pre-icon
-              @apply flex-shrink-0 flex-grow-0 flex items-center justify-center text-base leading-none transition-siderbar-nav-item-icon
-              width 16px
-              height 16px
-
-            .button-title
-              @apply flex-grow block truncate opacity-100 transition-opacity
-
-          .nav-item-toggle
-            @apply flex-grow-0 flex-shrink-0 inline-flex justify-center items-center w-5 h-5 mr-px text-xs leading-none opacity-100 origin-center transition-opacity
-
-          .nav-item-highlight-border
-            @apply flex-grow-0 flex-shrink-0 w-1 h-full bg-primary opacity-0
-
-      .sub-items-wrapper
-        @apply w-full h-0 pl-4 overflow-hidden transition-height
-
-        ul
-          @apply pt-2
-
-      .siderbar-nav-item
-        .nav-item-container
-          .nav-item-wrapper
-            @apply pl-6
-            width 172px
-
-  .siderbar-mode-setting
-    @apply flex items-center justify-start mt-6 mb-4 space-x-4 text-base text-primary
-    padding-right 10px
-    padding-left 40px
-
-    &-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 25px
-    border-radius 12px 0px 0px 12px
-
-    &:hover
-      @apply bg-primary-300 text-white
-
-    .icon-chevron-right
-      @apply hidden
-</style>

package/components/SLSiderbarNavItem.vue

@@ -1,204 +0,0 @@
-<template lang="pug">
-li.siderbar-nav-item(:class="{ opened: isOpen, highlighted: isHighlight, included: isInclude, disabled: config && config.to === '' && config.subItems && config.subItems.length === 0 }")
-  .nav-item-container
-    .nav-item-wrapper
-      a(href="javascript:;", @click="onClickedItem").nav-item-button
-        .button-pre-icon(v-if="config && config.preIcon")
-          SLIcon(:icon="config.preIcon")
-        span.button-title {{ config ? config.title : '' }}
-      a.nav-item-toggle(
-        v-if="config && config.postIcon"
-        href="javascript:;"
-        @click="onClickedToggle"
-      )
-        SLIcon.button-post-icon(
-          :icon="config.postIcon"
-        )
-      .nav-item-highlight-border
-  .sub-items-wrapper(
-    v-if="config && config.subItems && config.subItems.length > 0"
-    :style="{ height: `${isOpen && !isSiderbarClosure ? subItemsWrapperHeight : 0}px` }"
-  )
-    ul(ref="subItemsUL")
-      SLSiderbarNavItem(
-        v-for="item, i in config.subItems"
-        :config="item"
-        :key="i"
-      )
-</template>
-
-<script lang="ts">
-import type { PropType } from "vue";
-import { fromEvent, interval, Subscription } from "rxjs";
-import { debounce, startWith } from "rxjs/operators";
-import type { NavItemConfigType } from "~ui/interface/NavConfigType";
-
-function getConfigPaths(paths: string[], config: NavItemConfigType | null) {
-  if (!config) {
-    return paths;
-  }
-
-  let newPaths = [...paths];
-
-  if (config.subItems) {
-    config.subItems.forEach((itemConfig) => {
-      newPaths = getConfigPaths(newPaths, itemConfig);
-    });
-  }
-
-  if (config.to) {
-    newPaths.push(config.to);
-  }
-
-  if (config.include) {
-    newPaths.push(...config.include);
-  }
-
-  return newPaths;
-}
-
-export default defineComponent({
-  name: "SLSiderbarNavItem",
-  components: {},
-  props: {
-    config: {
-      type: Object as PropType<NavItemConfigType | null>,
-      default: () => null,
-    },
-    isSiderbarClosure: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ["toggle", "click-item"],
-  setup(props, { emit }) {
-    const route = useRoute();
-    const router = useRouter();
-
-    const { config, isSiderbarClosure } = toRefs(props);
-
-    const subItemsUL = shallowRef<HTMLElement | null>(null);
-    const isOpen = ref(false);
-    const subItemsWrapperHeight = ref(0);
-
-    let resizeSubscriber: Subscription | null = null;
-
-    const configPaths = computed(() => {
-      return getConfigPaths([], config.value);
-    });
-
-    const isInclude = computed(() => {
-      let included = false;
-      const matched = route.matched[route.matched.length - 1];
-
-      configPaths.value.forEach((path) => {
-        const regex = new RegExp(`${path}(/)?$`);
-        if (regex.test(matched.path)) {
-          included = true;
-        }
-      });
-
-      return included;
-    });
-
-    const isHighlight = computed(() => {
-      if (!config.value?.to) return false;
-
-      const regex = new RegExp(`${config.value.to}(/)?$`);
-      const matched = route.matched[route.matched.length - 1];
-
-      return (
-        regex.test(matched.path) ||
-        ((config.value.subItems || []).length === 0 && isInclude.value)
-      );
-    });
-
-    function isDefaultOpen() {
-      let defaultOpen = false;
-
-      configPaths.value.forEach((path) => {
-        if (route.path.includes(path)) {
-          defaultOpen = true;
-        }
-      });
-
-      isOpen.value = defaultOpen;
-    }
-
-    function setSubItemsWrapperHeight() {
-      nextTick(() => {
-        if (subItemsUL.value) {
-          subItemsWrapperHeight.value =
-            subItemsUL.value.getBoundingClientRect().height;
-        }
-      });
-    }
-
-    function subscribeResize() {
-      resizeSubscriber = fromEvent(window, "resize")
-        .pipe(debounce(() => interval(500)))
-        .pipe(startWith(0))
-        .subscribe(setSubItemsWrapperHeight);
-    }
-
-    function unsubscribeResize() {
-      if (resizeSubscriber) {
-        resizeSubscriber.unsubscribe();
-      }
-      resizeSubscriber = null;
-    }
-
-    function onClickedItem() {
-      if (isSiderbarClosure.value) {
-        emit("toggle");
-        return;
-      }
-
-      isOpen.value = !isOpen.value;
-
-      if (config.value?.to && config.value?.to !== "") {
-        router.push(config.value.to);
-        return;
-      }
-
-      if (config.value?.emit && config.value?.emit !== "") {
-        emit("click-item", config.value.emit);
-      }
-    }
-
-    function onClickedToggle() {
-      isOpen.value = !isOpen.value;
-    }
-
-    watch(route, () => {
-      isDefaultOpen();
-    });
-
-    watch(config, () => {
-      setSubItemsWrapperHeight();
-      isDefaultOpen();
-    });
-
-    onMounted(() => {
-      isDefaultOpen();
-      subscribeResize();
-    });
-
-    onBeforeUnmount(() => {
-      unsubscribeResize();
-    });
-
-    return {
-      subItemsUL,
-      isOpen,
-      isHighlight,
-      isInclude,
-      subItemsWrapperHeight,
-      onClickedItem,
-      onClickedToggle,
-    };
-  },
-});
-</script>
-
-<style lang="stylus"></style>