aurora-admin/frameworks/MixedNavigation.vue3.vue

<template>
  <nav class="kole-menu" :data-direction="params.direction" :data-collapsed="collapsedAttr" aria-label="主菜单">
    <div v-if="params.direction === 'mixed'" class="kole-menu-top">
      <div v-for="it in items" :key="it.key" class="kole-menu-item" :class="itemClass(it)"
           role="menuitem" tabindex="0" @click="select(it)">
        <span v-if="it.icon" class="kole-menu-icon">{{ it.icon }}</span>
        <span class="kole-menu-label">{{ it.label }}</span>
        <span v-if="it.badge" class="kole-menu-badge">{{ it.badge }}</span>
      </div>
    </div>

    <div v-if="params.direction === 'mixed'" class="kole-menu-side">
      <div v-for="it in sideItems" :key="it.key" class="kole-menu-item" :class="itemClass(it)"
           role="menuitem" tabindex="0" @click="select(it)">
        <span class="kole-menu-label">{{ it.label }}</span>
      </div>
    </div>

    <template v-if="params.direction !== 'mixed'">
      <div v-for="it in items" :key="it.key" class="kole-menu-item" :class="itemClass(it)"
           role="menuitem" tabindex="0" :aria-expanded="hasKids(it) ? String(open === it.key) : undefined"
           @click="select(it)">
        <span v-if="it.icon" class="kole-menu-icon">{{ it.icon }}</span>
        <span class="kole-menu-label">{{ it.label }}</span>
        <span v-if="it.badge" class="kole-menu-badge">{{ it.badge }}</span>
        <span v-if="hasKids(it) && params.direction !== 'top'" class="kole-menu-arrow">›</span>
        <div v-if="hasKids(it) && params.direction !== 'mixed'" class="kole-menu-children">
          <div v-for="c in it.children" :key="c.key" class="kole-menu-item" :class="itemClass(c)"
               role="menuitem" tabindex="0" @click.stop="select(c)">
            <span class="kole-menu-label">{{ c.label }}</span>
          </div>
        </div>
      </div>
    </template>

    <div v-if="popItem" class="kole-menu-pop">
      <div class="kole-menu-pop-title">{{ popItem.label }}</div>
      <div v-for="c in popItem.children" :key="c.key" class="kole-menu-item" :class="itemClass(c)"
           role="menuitem" tabindex="0" @click="select(c)">
        <span class="kole-menu-label">{{ c.label }}</span>
      </div>
    </div>
  </nav>
</template>

<script setup>
/* Kole UI Menu 族 · MixedNavigation（Vue 3）
 * @generated by tools/gen-family-impl.mjs
 * 生成物 - 由 tools/gen-family-impl.mjs 从族模板生成，请勿手改。
 * 族 nav-menu：本组件是同一份 Menu 实现，参数 direction=mixed。
 * 族参数取值：direction=mixed, level=2, collapsed=false
 * 重跑生成：node tools/gen-family-impl.mjs nav-menu
 */
import { computed, ref } from 'vue';

const FAMILY_DIRECTION = 'mixed';
const FAMILY_PARAMS = { direction: FAMILY_DIRECTION, collapsed: false };

const props = defineProps({
  items: { type: Array, default: () => [] },
  activeKey: { type: String, default: '' }
});
const emit = defineEmits(['update:activeKey', 'change']);

const params = FAMILY_PARAMS;
const active = ref(props.activeKey);
const open = ref('');
const collapsed = ref(params.collapsed === true);

const collapsedAttr = computed(() =>
  params.direction === 'side' ? String(collapsed.value) : undefined
);

function hasKids(it) {
  return !!(it.children && it.children.length);
}
function isTopActive(it) {
  if (it.key === active.value) return true;
  return (it.children || []).some((c) => c.key === active.value);
}
const sideItems = computed(() => {
  const current = props.items.filter((x) => isTopActive(x))[0] || props.items[0] || { children: [] };
  return current.children || [];
});
const popItem = computed(() => {
  if (params.direction !== 'side' || !collapsed.value) return null;
  return props.items.filter((x) => x.key === open.value)[0] || null;
});

function itemClass(it) {
  return [
    it.key === active.value ? 'is-active' : '',
    it.disabled ? 'is-disabled' : '',
    hasKids(it) && it.key === open.value ? 'is-open' : ''
  ];
}
function select(it) {
  if (it.disabled) return;
  if (hasKids(it)) {
    open.value = open.value === it.key ? '' : it.key;
    if (params.direction === 'mixed') active.value = it.key;
    return;
  }
  active.value = it.key;
  emit('update:activeKey', it.key);
  emit('change', it.key);
}
</script>

<style src="./MixedNavigation.css"></style>