@flyanra/vue-core 1.0.2 → 1.2.0

package/src/components/navigation/menu/fly-sidebar/FlySidebar.vue

@@ -1,151 +1,146 @@
-<template>
-  <div class="fly-sidebar">
-    <el-scrollbar :height="height">
-      <el-menu
-        :default-active="defaultActive"
-        :collapse="isCollapsed"
-        :router="router"
-        popper-class="fly-sidebar-popper"
-      >
-        <FlySidebarNode v-for="node in menu" :key="node.index" :node="node" />
-      </el-menu>
-    </el-scrollbar>
-
-    <div class="fly_sidebar__collapse-trigger" role="button" @click="toggleCollapse">
-      <FlyIconV2 :icon="isCollapsed ? IconMdiChevronRight : IconMdiChevronLeft" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import IconMdiChevronLeft from '~icons/mdi/chevron-left'
-import IconMdiChevronRight from '~icons/mdi/chevron-right'
-
-import { ref } from 'vue'
-
-import { ElMenu, ElScrollbar } from 'element-plus'
-
-import FlyIconV2 from '../../../general/fly-icon-v2/FlyIconV2.vue'
-
-import './FlySidebar.element.scss'
-import type { T_FlySidebarProps } from './FlySidebar.types'
-import FlySidebarNode from './FlySidebarNode.vue'
-
-const props = withDefaults(defineProps<T_FlySidebarProps>(), {
-  localStorageKey: 'fly-sidebar-collapsed',
-  router: true,
-  defaultActive: undefined
-})
-
-const isCollapsed = ref(props.isCollapsed ?? false)
-
-function toggleCollapse() {
-  isCollapsed.value = !isCollapsed.value
-}
-</script>
-
-<style lang="scss" scoped>
-$radius: 9999px;
-$height: 30px;
-$trigger-height: 20px;
-
-.fly-sidebar {
-  position: relative;
-  display: inline-block;
-  height: 100%;
-  background-color: var(--el-menu-bg-color);
-  border-inline-end: 1px solid var(--anra-border-color);
-
-  :deep(.el-menu) {
-    border-right: 0;
-    &.el-menu--vertical {
-      --el-menu-item-height: #{$height};
-      --el-menu-sub-item-height: calc(var(--el-menu-item-height) - 6px);
-
-      padding-inline-end: 1rem;
-      padding-top: calc(#{$trigger-height} + 10px);
-      padding-bottom: 1rem;
-      min-height: auto;
-      height: 100%;
-
-      &.el-menu--collapse {
-        padding-inline-end: 0.3rem;
-      }
-
-      &:not(.el-menu--collapse) {
-        width: 200px;
-      }
-    }
-  }
-}
-
-.fly_sidebar__collapse-trigger {
-  position: absolute;
-  top: 5px;
-  inset-inline-end: 0;
-  width: calc(#{$trigger-height} + 5px);
-  height: $trigger-height;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-top: 1px solid var(--anra-border-color);
-  border-left: 1px solid var(--anra-border-color);
-  border-bottom: 1px solid var(--anra-border-color);
-  color: var(--dynamic-light);
-  border-start-start-radius: 5px;
-  border-end-start-radius: 5px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background-color: var(--anra-primary);
-  }
-}
-</style>
-
-<style lang="scss">
-$radius: 9999px;
-$height: 30px;
-
-.fly-sidebar .el-menu.el-menu--vertical,
-.fly-sidebar-popper {
-  --el-menu-item-height: #{$height};
-  --el-menu-sub-item-height: calc(var(--el-menu-item-height) - 2px);
-
-  & > li:not(:last-child),
-  .el-sub-menu .el-menu .el-menu-item {
-    margin-bottom: 4px;
-  }
-
-  .el-sub-menu {
-    --el-menu-item-height: #{$height};
-
-    .el-menu {
-      padding-top: 0.25rem;
-      padding-bottom: 0.25rem;
-    }
-  }
-
-  .el-sub-menu__title,
-  .el-menu-item {
-    border-top-right-radius: $radius;
-    border-bottom-right-radius: $radius;
-  }
-
-  .el-menu-item.is-active {
-    font-weight: 500;
-    background-color: var(--anra-primary);
-    color: var(--anra-text-on-primary);
-  }
-}
-
-.fly-sidebar {
-  --el-menu-base-level-padding: 10px;
-
-  .el-menu-item [class^='el-icon'],
-  .el-sub-menu__title [class^='el-icon']:not(.el-sub-menu__icon-arrow) {
-    margin-right: 10px;
-    font-size: 15px;
-  }
-}
-</style>
+<template>
+  <div class="fly-sidebar">
+    <el-scrollbar :height="height">
+      <el-menu
+        :default-active="defaultActive"
+        :collapse="isCollapsed"
+        :router="router"
+        popper-class="fly-sidebar-popper"
+      >
+        <FlySidebarNode v-for="node in menu" :key="node.index" :node="node" />
+      </el-menu>
+    </el-scrollbar>
+
+    <div class="fly_sidebar__collapse-trigger" role="button" @click="toggleCollapse">
+      <FlyIconV2 :icon="isCollapsed ? IconMdiChevronRight : IconMdiChevronLeft" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import IconMdiChevronLeft from '~icons/mdi/chevron-left'
+import IconMdiChevronRight from '~icons/mdi/chevron-right'
+
+import { ElMenu, ElScrollbar } from 'element-plus'
+
+import FlyIconV2 from '../../../general/fly-icon-v2/FlyIconV2.vue'
+
+import './FlySidebar.element.scss'
+import type { T_FlySidebarProps } from './FlySidebar.types'
+import FlySidebarNode from './FlySidebarNode.vue'
+
+const { router = true, defaultActive, menu, height } = defineProps<T_FlySidebarProps>()
+
+const isCollapsed = defineModel<boolean>('collapsed', { default: false })
+
+function toggleCollapse() {
+  isCollapsed.value = !isCollapsed.value
+}
+</script>
+
+<style lang="scss" scoped>
+$radius: 9999px;
+$height: 30px;
+$trigger-height: 20px;
+
+.fly-sidebar {
+  position: relative;
+  display: inline-block;
+  height: 100%;
+  background-color: var(--el-menu-bg-color);
+  border-inline-end: 1px solid var(--anra-border-color);
+
+  :deep(.el-menu) {
+    border-right: 0;
+    &.el-menu--vertical {
+      --el-menu-item-height: #{$height};
+      --el-menu-sub-item-height: calc(var(--el-menu-item-height) - 6px);
+
+      padding-inline-end: 1rem;
+      padding-top: calc(#{$trigger-height} + 10px);
+      padding-bottom: 1rem;
+      min-height: auto;
+      height: 100%;
+
+      &.el-menu--collapse {
+        padding-inline-end: 0.3rem;
+      }
+
+      &:not(.el-menu--collapse) {
+        width: 200px;
+      }
+    }
+  }
+}
+
+.fly_sidebar__collapse-trigger {
+  position: absolute;
+  top: 5px;
+  inset-inline-end: 0;
+  width: calc(#{$trigger-height} + 5px);
+  height: $trigger-height;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: 1px solid var(--anra-border-color);
+  border-left: 1px solid var(--anra-border-color);
+  border-bottom: 1px solid var(--anra-border-color);
+  color: var(--dynamic-light);
+  border-start-start-radius: 5px;
+  border-end-start-radius: 5px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: var(--anra-primary);
+    color: var(--anra-black);
+  }
+}
+</style>
+
+<style lang="scss">
+$radius: 9999px;
+$height: 30px;
+
+.fly-sidebar .el-menu.el-menu--vertical,
+.fly-sidebar-popper {
+  --el-menu-item-height: #{$height};
+  --el-menu-sub-item-height: calc(var(--el-menu-item-height) - 2px);
+
+  & > li:not(:last-child),
+  .el-sub-menu .el-menu .el-menu-item {
+    margin-bottom: 4px;
+  }
+
+  .el-sub-menu {
+    --el-menu-item-height: #{$height};
+
+    .el-menu {
+      padding-top: 0.25rem;
+      padding-bottom: 0.25rem;
+    }
+  }
+
+  .el-sub-menu__title,
+  .el-menu-item {
+    border-top-right-radius: $radius;
+    border-bottom-right-radius: $radius;
+  }
+
+  .el-menu-item.is-active {
+    font-weight: 500;
+    background-color: var(--anra-primary);
+    color: var(--anra-text-on-primary);
+  }
+}
+
+.fly-sidebar {
+  --el-menu-base-level-padding: 10px;
+
+  .el-menu-item [class^='el-icon'],
+  .el-sub-menu__title [class^='el-icon']:not(.el-sub-menu__icon-arrow) {
+    margin-right: 10px;
+    font-size: 15px;
+  }
+}
+</style>

package/src/components/navigation/menu/fly-sidebar/FlySidebarNode.vue

@@ -1,47 +1,47 @@
-<template>
-  <el-menu-item v-if="node.type === 'item'" :index="node.index" :disabled="node.disabled">
-    <template v-if="node.icon">
-      <i class="el-icon">
-        <FlyIconV2 :icon="node.icon" />
-      </i>
-    </template>
-
-    <template #title>
-      {{ node.label }}
-    </template>
-  </el-menu-item>
-
-  <el-sub-menu v-else-if="node.type === 'submenu'" :index="node.index">
-    <template #title>
-      <template v-if="node.icon">
-        <i class="el-icon">
-          <FlyIconV2 :icon="node.icon" />
-        </i>
-      </template>
-
-      <span>{{ node.label }}</span>
-    </template>
-
-    <FlySidebarNode v-for="child in node.children" :key="child.index" :node="child" />
-  </el-sub-menu>
-
-  <el-menu-item-group v-else>
-    <template v-if="node.label" #title>
-      <span>{{ node.label }}</span>
-    </template>
-
-    <FlySidebarNode v-for="child in node.children" :key="child.index" :node="child" />
-  </el-menu-item-group>
-</template>
-
-<script lang="ts" setup>
-import { ElMenuItem, ElMenuItemGroup, ElSubMenu } from 'element-plus'
-
-import FlyIconV2 from '../../../general/fly-icon-v2/FlyIconV2.vue'
-
-import type { T_FlySidebarNode } from './FlySidebar.types'
-
-defineProps<{
-  node: T_FlySidebarNode
-}>()
-</script>
+<template>
+  <el-menu-item v-if="node.type === 'item'" :index="node.index" :disabled="node.disabled">
+    <template v-if="node.icon">
+      <i class="el-icon">
+        <FlyIconV2 :icon="node.icon" />
+      </i>
+    </template>
+
+    <template #title>
+      {{ node.label }}
+    </template>
+  </el-menu-item>
+
+  <el-sub-menu v-else-if="node.type === 'submenu'" :index="node.index">
+    <template #title>
+      <template v-if="node.icon">
+        <i class="el-icon">
+          <FlyIconV2 :icon="node.icon" />
+        </i>
+      </template>
+
+      <span>{{ node.label }}</span>
+    </template>
+
+    <FlySidebarNode v-for="child in node.children" :key="child.index" :node="child" />
+  </el-sub-menu>
+
+  <el-menu-item-group v-else>
+    <template v-if="node.label" #title>
+      <span>{{ node.label }}</span>
+    </template>
+
+    <FlySidebarNode v-for="child in node.children" :key="child.index" :node="child" />
+  </el-menu-item-group>
+</template>
+
+<script lang="ts" setup>
+import { ElMenuItem, ElMenuItemGroup, ElSubMenu } from 'element-plus'
+
+import FlyIconV2 from '../../../general/fly-icon-v2/FlyIconV2.vue'
+
+import type { T_FlySidebarNode } from './FlySidebar.types'
+
+defineProps<{
+  node: T_FlySidebarNode
+}>()
+</script>

package/src/composables/UseLocaleInjector.ts

@@ -1,18 +1,37 @@
-import { inject } from 'vue'
-
-import { FallbackTranslateFn, I18N_KEY } from '@flyanra/js-utils/constants'
-import type { Locale } from '@flyanra/js-utils/locales'
-import type { ComposerTranslation } from 'vue-i18n'
-
-type T_LocaleInjector = {
-  t: ComposerTranslation
-  locale: Locale
-}
-export function UseLocaleInjector(): T_LocaleInjector {
-  const i18n = inject(I18N_KEY)
-
-  return {
-    t: i18n?.t || FallbackTranslateFn,
-    locale: (i18n?.locale as Locale | undefined) || 'en'
-  }
-}
+import { isRef } from 'vue'
+import type { MaybeRef } from 'vue'
+
+import { FallbackTranslateFn } from '@flyanra/js-utils/constants'
+import type { Locale } from '@flyanra/js-utils/locales'
+import type { ComposerTranslation } from 'vue-i18n'
+
+export type T_LocaleInjector = {
+  t: ComposerTranslation
+  locale: Locale
+}
+
+type I18nLike = {
+  t: ComposerTranslation
+  locale: MaybeRef<Locale>
+}
+
+let _t: ComposerTranslation = FallbackTranslateFn
+let _locale: MaybeRef<Locale> = 'en'
+let _initialized = false
+
+export function initLocaleInjector(i18n: I18nLike): void {
+  _t = i18n.t
+  _locale = i18n.locale
+  _initialized = true
+}
+
+export function UseLocaleInjector(): T_LocaleInjector {
+  if (!_initialized) {
+    console.warn('[vue-core] UseLocaleInjector: call initLocaleInjector() before use.')
+  }
+
+  return {
+    t: _t,
+    locale: isRef(_locale) ? _locale.value : _locale
+  }
+}

package/src/composables/index.ts

@@ -1 +1,4 @@
-export { UseLocaleInjector } from './UseLocaleInjector'
+export { initLocaleInjector, UseLocaleInjector } from './UseLocaleInjector'
+export type { T_LocaleInjector } from './UseLocaleInjector'
+
+export { useSidebarActiveIndex } from './useSidebarActiveIndex'

package/src/composables/useSidebarActiveIndex.ts

@@ -0,0 +1,103 @@
+import { type MaybeRefOrGetter, computed, toValue } from 'vue'
+
+import { useRoute } from 'vue-router'
+
+import type { T_FlySidebar } from '../components'
+
+/**
+ * Minimal route shape required by `useSidebarActiveIndex`.
+ *
+ * You can pass your full route objects directly — only these fields are read.
+ * `meta.sidebarActiveIndex` is the route **name** of the sidebar item that
+ * should stay highlighted while on this route (see composable docs below).
+ */
+interface RouteItem {
+  name?: string
+  path: string
+  meta?: {
+    /** Route name of the sidebar item to keep active on this route. */
+    sidebarActiveIndex?: string
+  }
+}
+
+/**
+ * Resolves the correct active sidebar index for Element Plus menus in router mode.
+ *
+ * **Resolution order** (first match wins):
+ * 1. **Exact path match** — `route.path` matches a menu item's `index` directly.
+ * 2. **`sidebarActiveIndex` meta** — the current route's `meta.sidebarActiveIndex`
+ *    names which sidebar route should appear active. Use this for pages that are
+ *    not listed in the sidebar (e.g. edit, create, or detail views).
+ * 3. **Longest static-prefix fallback** — strips dynamic segments (`:id`) and
+ *    picks the menu item whose path is the longest prefix of the current path.
+ *    This is a best-effort catch-all for any unhandled cases.
+ *
+ * > **Note:** Only one level of submenus is flattened. Deeply nested menu trees
+ * > (submenu inside a submenu) are not supported.
+ *
+ * @param menuItems - The sidebar menu tree passed to `FlySidebar`. Each leaf item
+ *   must have `index` set to a route path (e.g. `/config/list`). Submenu items
+ *   must have `type: 'submenu'` and a `children` array of leaf items.
+ *   Accepts a plain value, `ref`, or `computed`.
+ *
+ * @param allRoutes - Flat list of all application routes. Only used to resolve a
+ *   `sidebarActiveIndex` route name back to its path (resolution step 2).
+ *   Each entry needs at minimum `{ name, path }`.
+ *   Accepts a plain array, `ref`, or `computed`.
+ *
+ * @returns `ComputedRef<string>` — bind directly to `:default-active` on
+ *   `FlySidebar` or `el-menu`.
+ *
+ * @example
+ * ```ts
+ * // In your sidebar component setup:
+ * const activeIndex = useSidebarActiveIndex(menuItems, router.getRoutes())
+ * ```
+ * ```html
+ * <!-- In your sidebar template: -->
+ * <FlySidebar :default-active="activeIndex" ... />
+ * ```
+ * ```ts
+ * // In a route that is NOT listed in the sidebar (e.g. an edit page),
+ * // tell the composable which sidebar item should stay highlighted:
+ * {
+ *   name: 'ConfigEdit',
+ *   path: '/config/:id/edit',
+ *   meta: { sidebarActiveIndex: 'ConfigList' }
+ * }
+ * ```
+ */
+export function useSidebarActiveIndex(
+  menuItems: MaybeRefOrGetter<T_FlySidebar>,
+  allRoutes: MaybeRefOrGetter<RouteItem[]>
+) {
+  const route = useRoute()
+
+  return computed(() => {
+    const currentPath = route.path
+    const items = toValue(menuItems)
+    const routes = toValue(allRoutes)
+
+    const flatItems = items.flatMap((item) =>
+      item.type === 'submenu' ? (item.children ?? []) : [item]
+    )
+
+    // 1. Exact match — handles direct navigation and redirect-resolved paths
+    if (flatItems.some((i) => i.index === currentPath)) return currentPath
+
+    // 2. sidebarActiveIndex — explicit route name pointing to the sidebar item
+    //    that should stay active while on this route
+    const activeIndexName = route.meta?.sidebarActiveIndex as string | undefined
+    if (activeIndexName) {
+      const ownerRoute = routes.find((r) => r.name === activeIndexName)
+      if (ownerRoute) return ownerRoute.path
+    }
+
+    // 3. Longest static-prefix fallback (strips dynamic segments before matching)
+    return (
+      flatItems
+        .filter((i) => currentPath.startsWith(i.index.split(':')[0]))
+        .sort((a, b) => b.index.length - a.index.length)[0]?.index ?? currentPath
+    )
+  })
+}