@neatui/vue 5.6.0 → 5.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "5.6.0",
+  "version": "5.7.0",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "@fekit/scrollto": "^3.0.3",
     "@fekit/toast": "^2.7.2",
     "@fekit/utils": "^6.0.0",
-    "@neatui/css": "^5.6.0",
+    "@neatui/css": "^5.7.0",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@vue/compiler-sfc": "^3.4.30",

package/src/components/basic/SideMenu.vue

@@ -0,0 +1,480 @@
+<template>
+  <div ref="root" class="ui-sidemenu flex-fixed" :data-mode="mode" :data-open="isOpen ? 1 : 0" :data-rail="rail ? 1 : 0" :data-opening="opening ? 1 : 0">
+    <div class="ui-sidemenu-mask" @click="setOpen(false)"></div>
+    <aside class="ui-sidemenu-panel" ui-flex="col xy">
+      <div class="ui-sidemenu-header flex-fixed" ui-flex="row xm">
+        <div class="ui-sidemenu-title flex-block">
+          <slot name="header" :rail="rail" :mode="mode">
+            <h5 ui-omit="1"><b>{{ title }}</b></h5>
+          </slot>
+        </div>
+        <button v-if="toggle" :aria-expanded="isOpen" :aria-label="toggleLabel" :title="toggleLabel" ui-btn="@a s none :square" type="button" @click="setOpen(!isOpen)">
+          <i class="icon icon-menu"></i>
+        </button>
+      </div>
+      <div class="flex-block" ui-scroll="x:hidden :y">
+        <ul class="ui-sidemenu-list">
+          <li v-for="(item, idx) in list" :key="item.__key" :class="{ active: item.__active }" :data-open="item.__open ? 1 : 0" >
+            <IFollowView v-model="railMap[item.__key]" btn-class="block" event="hover" pos="rb" tip-class="mt-ss">
+              <div class="ui-sidemenu-item bg-weak:hover" @click.stop="onItem(item, idx)">
+                <component
+                  :is="item.children ? 'button' : linkTag"
+                  v-bind="item.children ? { type: 'button', 'aria-expanded': rail ? !!railMap[item.__key] : !!item.__open } : linkProps(item)"
+                  :aria-label="rail ? item.name : undefined"
+                  ui-flex="row lm"
+                >
+                  <div ui-flex="row cm">
+                    <div ui-btn="@a s none :square">
+                      <slot name="icon" :item="item"><i :class="`fs++ icon ${item.icon || ''}`"></i></slot>
+                    </div>
+                    <span class="ui-sidemenu-name">{{ item.name }}</span>
+                  </div>
+                  <i v-if="item.children" class="ui-sidemenu-arrow icon icon-dropdown"></i>
+                  <span v-else-if="item.badge" class="ui-sidemenu-badge bg-risk co-fore lh-xs nx-sm ny-ss r-full">{{ badgeText(item.badge) }}</span>
+                </component>
+              </div>
+              <div v-if="item.children" class="ui-sidemenu-sub-wrap" :inert="rail || !item.__open">
+                <ul class="ui-sidemenu-sub">
+                  <li v-for="sub in item.children" :key="sub.__key" :class="{ 'co-main': sub.__active }">
+                    <component :is="linkTag" v-bind="linkProps(sub)" @click="onLeaf(sub)">{{ sub.name }}</component>
+                  </li>
+                </ul>
+              </div>
+              <template v-if="item.children && rail" #tips>
+                <ul :id="`${uid}-${item.__key}`" class="n-sl" ui-wrap="no">
+                  <li v-for="sub in item.children" :key="sub.__key" :class="{ 'co-main': sub.__active }" class="ux-hover r-sm nx-sl ny-ss">
+                    <component :is="linkTag" v-bind="linkProps(sub)" class="block" @click="onLeaf(sub)">{{ sub.name }}</component>
+                  </li>
+                </ul>
+              </template>
+            </IFollowView>
+          </li>
+        </ul>
+      </div>
+      <div v-if="$slots.footer" class="ui-sidemenu-footer flex-fixed">
+        <slot name="footer" :rail="rail" :mode="mode"></slot>
+      </div>
+    </aside>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, useId, watch } from 'vue';
+  import { RouterLink, useRoute } from 'vue-router';
+  import IFollowView from './IFollowView.vue';
+
+  export interface SideMenuItem {
+    id?: string | number;
+    name: string;
+    path?: string;
+    icon?: string;
+    badge?: number | string;
+    children?: SideMenuItem[];
+    [key: string]: any;
+  }
+  type Mode = 'mob' | 'pad' | 'dpc';
+
+  const props = withDefaults(
+    defineProps<{
+      menus?: SideMenuItem[];
+      /** v-model:open；不传时组件自管，默认电脑展开、平板/手机收起 */
+      open?: boolean | number;
+      /** 当前路径，不传取 vue-router 当前路由 */
+      active?: string;
+      /** 子路由（/a/b）也高亮 /a */
+      prefix?: boolean;
+      title?: string;
+      toggle?: boolean;
+      toggleLabel?: string;
+      /** 同时只展开一个分组 */
+      accordion?: boolean;
+    }>(),
+    { menus: () => [], open: undefined, active: undefined, prefix: true, title: '', toggle: true, toggleLabel: '切换侧边栏', accordion: true },
+  );
+  const emit = defineEmits<{
+    (e: 'update:open', v: boolean): void;
+    (e: 'select', item: SideMenuItem): void;
+    (e: 'mode', mode: Mode): void;
+  }>();
+
+  // ---- 三端 ----
+  // 断点同 @neatui/css query：mob < 800 ≤ pad < 1280 ≤ dpc
+  const mode = ref<Mode>('dpc');
+  let mqMob: MediaQueryList | undefined;
+  let mqPad: MediaQueryList | undefined;
+  const readMode = () => {
+    mode.value = mqMob?.matches ? 'mob' : mqPad?.matches ? 'pad' : 'dpc';
+  };
+
+  // ---- 展开 ----
+  const inner = ref(true);
+  const isOpen = computed(() => (props.open === undefined ? inner.value : !!props.open));
+  const rail = computed(() => mode.value !== 'mob' && !isOpen.value);
+  const opening = ref(false);
+  let openingTimer: ReturnType<typeof setTimeout> | undefined;
+  const setOpen = (v: boolean) => {
+    inner.value = v;
+    emit('update:open', v);
+  };
+  watch(isOpen, (v) => {
+    // 展开过程中延迟展开子菜单，避免宽度动画时文字换行跳动
+    if (openingTimer) clearTimeout(openingTimer);
+    opening.value = v;
+    if (v) openingTimer = setTimeout(() => (opening.value = false), 400);
+  });
+  watch(mode, (m, old) => {
+    emit('mode', m);
+    // 换端时回到该端的默认态：电脑展开，平板/手机收起
+    if (old) setOpen(m === 'dpc');
+  });
+
+  const onKey = (e: KeyboardEvent) => {
+    if (e.key === 'Escape' && isOpen.value && mode.value !== 'dpc') setOpen(false);
+  };
+
+  onMounted(() => {
+    mqMob = window.matchMedia('(max-width: 799px)');
+    mqPad = window.matchMedia('(max-width: 1279px)');
+    readMode();
+    mqMob.addEventListener('change', readMode);
+    mqPad.addEventListener('change', readMode);
+    emit('mode', mode.value);
+    if (props.open === undefined) inner.value = mode.value === 'dpc';
+    else if (mode.value !== 'dpc' && props.open) setOpen(false);
+    window.addEventListener('keydown', onKey);
+  });
+  onBeforeUnmount(() => {
+    mqMob?.removeEventListener('change', readMode);
+    mqPad?.removeEventListener('change', readMode);
+    window.removeEventListener('keydown', onKey);
+    if (openingTimer) clearTimeout(openingTimer);
+  });
+
+  // ---- 菜单 ----
+  const route = useRoute();
+  const current = computed(() => props.active ?? route?.path ?? '');
+  const hit = (path?: string) => {
+    if (!path) return false;
+    const p = current.value.replace(/\/+$/, '') || '/';
+    const b = path.replace(/\/+$/, '') || '/';
+    return p === b || (props.prefix && b !== '/' && p.startsWith(b + '/'));
+  };
+  const keyOf = (item: SideMenuItem, idx: number) => String(item.id ?? item.path ?? idx);
+  const openMap = reactive<Record<string, boolean>>({});
+  // 收起态悬浮子菜单的显示状态
+  const railMap = reactive<Record<string, number>>({});
+  const uid = useId() || 'sidemenu';
+
+  const list = computed(() =>
+    props.menus.map((item, idx) => {
+      const __key = keyOf(item, idx);
+      if (!item.children?.length) return { ...item, children: undefined, __key, __active: hit(item.path), __open: false };
+      let __active = false;
+      const children = item.children.map((sub, i) => {
+        const a = hit(sub.path);
+        if (a) __active = true;
+        return { ...sub, __key: keyOf(sub, i), __active: a };
+      });
+      return { ...item, children, __key, __active, __open: openMap[__key] ?? false };
+    }),
+  );
+
+  // 当前路由所在分组自动展开（菜单异步到达、直接输网址都生效）
+  const activeGroup = computed(() => list.value.find((m) => m.children && m.__active)?.__key || '');
+  watch(
+    activeGroup,
+    (k) => {
+      if (!k) return;
+      if (props.accordion) Object.keys(openMap).forEach((o) => (openMap[o] = false));
+      openMap[k] = true;
+    },
+    { immediate: true },
+  );
+
+  const onItem = (item: any, _idx: number) => {
+    if (!item.children) return onLeaf(item);
+    // 收起态用悬浮子菜单：鼠标 hover 打开，键盘/点击切换并把焦点移入第一项
+    if (rail.value) {
+      const next = !railMap[item.__key];
+      railMap[item.__key] = next ? 1 : 0;
+      if (next) nextTick(() => document.getElementById(`${uid}-${item.__key}`)?.querySelector<HTMLElement>('a')?.focus());
+      return;
+    }
+    const next = !item.__open;
+    if (props.accordion) Object.keys(openMap).forEach((o) => (openMap[o] = false));
+    openMap[item.__key] = next;
+  };
+  const onLeaf = (item: SideMenuItem) => {
+    emit('select', item);
+    // 平板/手机选完收起浮层
+    if (mode.value !== 'dpc' && isOpen.value) setOpen(false);
+  };
+
+  const linkTag = computed(() => (route ? RouterLink : 'a'));
+  const linkProps = (item: SideMenuItem) => (route ? { to: item.path || '' } : { href: item.path || '' });
+  const badgeText = (b: number | string) => (typeof b === 'number' && b > 99 ? '99+' : b);
+
+  defineExpose({ mode, open: isOpen, setOpen });
+</script>
+
+<style lang="scss">
+  $rail: 5rem;
+  $full: 18rem;
+  $ease: cubic-bezier(0.32, 0.72, 0, 1);
+
+  .ui-sidemenu {
+    position: relative;
+    height: 100%;
+    width: $full;
+    z-index: 20;
+    transition: width 0.2s;
+
+    &[data-rail='1'] {
+      width: $rail;
+    }
+    // 平板：始终占轨道宽，展开时浮在内容上
+    &[data-mode='pad'] {
+      width: $rail;
+    }
+    // 手机：不占位，抽屉
+    &[data-mode='mob'] {
+      width: 0;
+    }
+  }
+
+  .ui-sidemenu-panel {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: var(--co-fore);
+    box-shadow: 0 0 0.5rem color-mix(in srgb, var(--co-deep) 95%, transparent);
+    transition: width 0.2s, transform 0.4s $ease, box-shadow 0.4s $ease;
+
+    [data-mode='pad'] > & {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: $rail;
+    }
+    [data-mode='pad'][data-open='1'] > & {
+      width: $full;
+    }
+    [data-mode='mob'] > & {
+      position: fixed;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: min(#{$full}, 85vw);
+      z-index: 40;
+      transform: translate3d(-100%, 0, 0);
+      box-shadow: none;
+    }
+    [data-mode='mob'][data-open='1'] > & {
+      transform: translate3d(0, 0, 0);
+      box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  .ui-sidemenu-mask {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.35);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.4s $ease;
+    z-index: 39;
+
+    [data-mode='pad'] > & {
+      background: transparent;
+    }
+    [data-mode='mob'][data-open='1'] > &,
+    [data-mode='pad'][data-open='1'] > & {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+  [data-mode='pad'] > .ui-sidemenu-panel {
+    z-index: 40;
+  }
+
+  .ui-sidemenu-header {
+    height: 4rem;
+    line-height: 2rem;
+    padding: 1rem 0.75rem 1rem 1rem;
+    white-space: nowrap;
+    box-shadow: 0 1px 0 var(--co-back);
+    transition: padding 0.2s;
+  }
+  .ui-sidemenu-footer {
+    padding: 1rem;
+    transition: padding 0.2s;
+  }
+
+  .ui-sidemenu-title,
+  .ui-sidemenu-name {
+    opacity: 1;
+    transition: opacity 0.2s 0.2s;
+    vertical-align: middle;
+    overflow: hidden;
+  }
+
+  .ui-sidemenu-list {
+    & > li {
+      position: relative;
+      white-space: nowrap;
+      padding: 0.25rem;
+      user-select: none;
+      transition: padding 0.2s;
+
+      &.active {
+        color: var(--co-main);
+        &::before {
+          position: absolute;
+          content: '';
+          width: 2px;
+          height: 2.5rem;
+          left: 0;
+          top: 0.25rem;
+          background: var(--co-main);
+        }
+      }
+    }
+    a {
+      cursor: pointer;
+      color: inherit;
+    }
+  }
+  .ui-sidemenu-item {
+    position: relative;
+    display: block;
+    padding: 0.25em;
+    border-radius: 0.5rem;
+    cursor: pointer;
+  }
+
+  // 分组标题用原生按钮，去掉默认样式
+  .ui-sidemenu-item > button {
+    width: 100%;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .ui-sidemenu-arrow {
+    position: absolute;
+    width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    right: 0;
+    top: 50%;
+    margin-top: -1rem;
+    text-align: center;
+    transform: rotate(-90deg);
+    transition: transform 0.2s, opacity 0.2s 0.1s;
+  }
+  [data-open='1'] > * > .ui-sidemenu-item .ui-sidemenu-arrow {
+    transform: rotate(-180deg);
+  }
+
+  .ui-sidemenu-badge {
+    position: absolute;
+    top: 50%;
+    right: 1rem;
+    transform: translate3d(50%, -50%, 0) scale(0.5);
+    pointer-events: none;
+  }
+
+  // 二级（展开态）
+  .ui-sidemenu-sub-wrap {
+    display: grid;
+    grid-template-rows: 0fr;
+    opacity: 0;
+    transition: grid-template-rows 0.2s, opacity 0.2s;
+  }
+  .ui-sidemenu-list > [data-open='1'] .ui-sidemenu-sub-wrap {
+    grid-template-rows: 1fr;
+    opacity: 1;
+  }
+  .ui-sidemenu[data-opening='1'] .ui-sidemenu-list > [data-open='1'] .ui-sidemenu-sub-wrap {
+    transition-delay: 0.2s;
+  }
+  .ui-sidemenu-sub {
+    position: relative;
+    min-height: 0;
+    overflow: hidden;
+    padding-left: 2.5rem;
+    line-height: 2.5rem;
+    color: var(--co-read);
+
+    & > li {
+      position: relative;
+      height: 2.5rem;
+      padding: 0 0.5em;
+      border-radius: 0.5rem;
+      &:hover {
+        background: var(--co-weak);
+      }
+      a {
+        display: block;
+      }
+      // 树线
+      &::before {
+        position: absolute;
+        content: '';
+        width: 2px;
+        height: 100%;
+        top: 0;
+        left: -0.5em;
+        border-right: 1px solid var(--co-line);
+      }
+      &:last-child::before {
+        height: 50%;
+      }
+      &::after {
+        position: absolute;
+        content: '';
+        width: 0.6em;
+        height: 1px;
+        top: 50%;
+        left: -0.5em;
+        background: var(--co-line);
+      }
+    }
+  }
+
+  // 收起轨道态（电脑收起 / 平板默认）
+  .ui-sidemenu[data-rail='1'] {
+    .ui-sidemenu-header,
+    .ui-sidemenu-footer {
+      padding: 1rem 1.5rem;
+    }
+    .ui-sidemenu-title {
+      position: absolute;
+      left: 0.5rem;
+      opacity: 0;
+      visibility: hidden;
+      transition: none;
+    }
+    .ui-sidemenu-name {
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.15s;
+    }
+    .ui-sidemenu-list > li {
+      padding: 0.25rem 1.25rem;
+    }
+    .ui-sidemenu-sub-wrap,
+    .ui-sidemenu-arrow {
+      display: none;
+    }
+    .ui-sidemenu-badge {
+      top: 0;
+      right: 0;
+      transform: translate3d(40%, -30%, 0) scale(0.5);
+    }
+  }
+</style>