@flyanra/vue-core 1.2.0 → 1.3.0

package/src/composables/{useSidebarActiveIndex.ts → useSidebarActiveIndex/useSidebarActiveIndex.ts}

@@ -1,103 +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
-    )
-  })
-}
+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
+    )
+  })
+}

package/src/styles/_scss-tokens.scss

@@ -1,76 +1,76 @@
 // global colors
-$anra-primary: #58baa8;
-$anra-primary-dark: #15826e;
-$anra-primary-accent: #57baa7;
-$anra-black: #000000;
-$anra-white: #ffffff;
+$anra-primary: #58baa8 !default;
+$anra-primary-dark: #15826e !default;
+$anra-primary-accent: #57baa7 !default;
+$anra-black: #000000 !default;
+$anra-white: #ffffff !default;
 
 // dark theme
-$anra-dark-dynamic-light: #ffffff;
-$anra-dark-dynamic-dark: #000000;
-$anra-dark-default-text-color: #cfd3dc;
-$anra-dark-bg-10: #29555a;
-$anra-dark-bg-15: #274452;
-$anra-dark-bg-15-accent: #253e4a;
-$anra-dark-bg-15-accent-1: #395969;
-$anra-dark-bg-20: #18323f;
-$anra-dark-bg-20-rgb: 24, 50, 63;
-$anra-dark-bg-20-subtitle: #c7c7c7;
-$anra-dark-bg-25: #19282f;
-$anra-dark-bg-blue-50: #293470;
-$anra-dark-state-danger: #ff0e0e;
-$anra-dark-state-error: #ff0e0e;
-$anra-dark-state-error-lighter: #e76f6f;
-$anra-dark-state-error-lighter-50: #ffa5a5;
-$anra-dark-state-success: #068c53;
-$anra-dark-state-info: #6a7174;
-$anra-dark-state-info-lighter: #c0c9cd;
-$anra-dark-state-warning: #ffc427;
-$anra-dark-state-warning-50: #896a3d;
-$anra-dark-text-placeholder: #b3b7bf;
-$anra-dark-border-color: #4f626c;
-$anra-dark-border-color-light: #616161;
-$anra-dark-fill-color-light: #405661;
-$anra-dark-mask-color: rgba(24, 50, 63, 0.79);
-$anra-dark-scroll-shadow: #02020224;
-$anra-dark-disabled-bg: #1f3845;
-$anra-dark-form-item-error-color: #ffcac9;
-$anra-dark-tag-info-bg: #344b56;
-$anra-dark-form-input-border: #979797;
-$anra-dark-text-on-primary: black;
-$anra-dark-text-subtle: #99a1af;
+$anra-dark-dynamic-light: #ffffff !default;
+$anra-dark-dynamic-dark: #000000 !default;
+$anra-dark-default-text-color: #cfd3dc !default;
+$anra-dark-bg-10: #29555a !default;
+$anra-dark-bg-15: #274452 !default;
+$anra-dark-bg-15-accent: #253e4a !default;
+$anra-dark-bg-15-accent-1: #395969 !default;
+$anra-dark-bg-20: #18323f !default;
+$anra-dark-bg-20-rgb: 24, 50, 63 !default;
+$anra-dark-bg-20-subtitle: #c7c7c7 !default;
+$anra-dark-bg-25: #19282f !default;
+$anra-dark-bg-blue-50: #293470 !default;
+$anra-dark-state-danger: #ff0e0e !default;
+$anra-dark-state-error: #ff0e0e !default;
+$anra-dark-state-error-lighter: #e76f6f !default;
+$anra-dark-state-error-lighter-50: #ffa5a5 !default;
+$anra-dark-state-success: #068c53 !default;
+$anra-dark-state-info: #6a7174 !default;
+$anra-dark-state-info-lighter: #c0c9cd !default;
+$anra-dark-state-warning: #ffc427 !default;
+$anra-dark-state-warning-50: #896a3d !default;
+$anra-dark-text-placeholder: #b3b7bf !default;
+$anra-dark-border-color: #4f626c !default;
+$anra-dark-border-color-light: #616161 !default;
+$anra-dark-fill-color-light: #405661 !default;
+$anra-dark-mask-color: rgba(24, 50, 63, 0.79) !default;
+$anra-dark-scroll-shadow: #02020224 !default;
+$anra-dark-disabled-bg: #1f3845 !default;
+$anra-dark-form-item-error-color: #ffcac9 !default;
+$anra-dark-tag-info-bg: #344b56 !default;
+$anra-dark-form-input-border: #979797 !default;
+$anra-dark-text-on-primary: black !default;
+$anra-dark-text-subtle: #99a1af !default;
 
 // light theme
-$anra-light-dynamic-light: #000000;
-$anra-light-dynamic-dark: #ffffff;
-$anra-light-default-text-color: #1a1f24;
-$anra-light-bg-10: #f1f5f6;
-$anra-light-bg-15: #ffffff;
-$anra-light-bg-15-accent: #f2f2f2;
-$anra-light-bg-15-accent-1: #d9e3e6;
-$anra-light-bg-20: #f4f5f7;
-$anra-light-bg-20-rgb: 244, 245, 247;
-$anra-light-bg-20-subtitle: #4c5a66;
-$anra-light-bg-25: #c7d3d8;
-$anra-light-bg-blue-50: #dbe3f0;
-$anra-light-state-danger: #d60000;
-$anra-light-state-error: #d60000;
-$anra-light-state-error-lighter: #ef7a7a;
-$anra-light-state-error-lighter-50: #f7bcbc;
-$anra-light-state-success: #068c53;
-$anra-light-state-info: #5a6367;
-$anra-light-state-info-lighter: #5b6164;
-$anra-light-state-warning: #dca217;
-$anra-light-state-warning-50: #b88c3c;
-$anra-light-text-placeholder: #8a929a;
-$anra-light-border-color: #cad4d9;
-$anra-light-border-color-light: #e0e4e5;
-$anra-light-fill-color-light: #f3f6f7;
-$anra-light-mask-color: rgba(208, 218, 222, 0.6);
-$anra-light-scroll-shadow: #00000012;
-$anra-light-disabled-bg: #e6ecef;
-$anra-light-form-item-error-color: #d68080;
-$anra-light-tag-info-bg: #e4ecef;
-$anra-light-form-input-border: #969696;
-$anra-light-text-on-primary: black;
-$anra-light-text-subtle: #000000;
+$anra-light-dynamic-light: #000000 !default;
+$anra-light-dynamic-dark: #ffffff !default;
+$anra-light-default-text-color: #1a1f24 !default;
+$anra-light-bg-10: #f1f5f6 !default;
+$anra-light-bg-15: #ffffff !default;
+$anra-light-bg-15-accent: #f2f2f2 !default;
+$anra-light-bg-15-accent-1: #d9e3e6 !default;
+$anra-light-bg-20: #f4f5f7 !default;
+$anra-light-bg-20-rgb: 244, 245, 247 !default;
+$anra-light-bg-20-subtitle: #4c5a66 !default;
+$anra-light-bg-25: #c7d3d8 !default;
+$anra-light-bg-blue-50: #dbe3f0 !default;
+$anra-light-state-danger: #d60000 !default;
+$anra-light-state-error: #d60000 !default;
+$anra-light-state-error-lighter: #ef7a7a !default;
+$anra-light-state-error-lighter-50: #f7bcbc !default;
+$anra-light-state-success: #068c53 !default;
+$anra-light-state-info: #5a6367 !default;
+$anra-light-state-info-lighter: #5b6164 !default;
+$anra-light-state-warning: #dca217 !default;
+$anra-light-state-warning-50: #b88c3c !default;
+$anra-light-text-placeholder: #8a929a !default;
+$anra-light-border-color: #cad4d9 !default;
+$anra-light-border-color-light: #e0e4e5 !default;
+$anra-light-fill-color-light: #f3f6f7 !default;
+$anra-light-mask-color: rgba(208, 218, 222, 0.6) !default;
+$anra-light-scroll-shadow: #00000012 !default;
+$anra-light-disabled-bg: #e6ecef !default;
+$anra-light-form-item-error-color: #d68080 !default;
+$anra-light-tag-info-bg: #e4ecef !default;
+$anra-light-form-input-border: #969696 !default;
+$anra-light-text-on-primary: black !default;
+$anra-light-text-subtle: #000000 !default;

package/src/styles/element/mixins/collapse.scss

@@ -1,61 +1,61 @@
-@mixin el-collapse-operation-style {
-  .el-collapse-item {
-    &__header {
-      padding: 0.5rem 0.5rem 0.5rem 0rem;
-      min-height: 48px;
-      text-align: left;
-    }
-    &__content {
-      background: var(--anra-bg-15-accent);
-    }
-  }
-}
-
-@mixin el-collapse-advisory-style {
-  .el-collapse-item {
-    border-bottom: 10px solid transparent;
-    &__header {
-      border-top: 1px solid var(--el-collapse-border-color);
-    }
-    &__content {
-      background: var(--anra-bg-20);
-      padding-bottom: 0;
-    }
-    &.is-disabled {
-      .el-collapse-item {
-        &__header {
-          color: var(--default-text-color);
-        }
-        &__arrow {
-          visibility: hidden;
-        }
-      }
-    }
-  }
-}
-
-@mixin el-airspace-layer-style {
-  .el-collapse-item {
-    border-bottom: 10px solid transparent;
-    &__header {
-      padding: 0.25rem 0.5rem 0.25rem 0rem;
-      // min-height: 30px;
-      text-align: left;
-      border-top: 1px solid var(--el-collapse-border-color);
-    }
-    &__content {
-      background: var(--anra-bg-15-accent);
-      padding-bottom: 0;
-    }
-    &.is-disabled {
-      .el-collapse-item {
-        &__header {
-          color: var(--default-text-color);
-        }
-        &__arrow {
-          visibility: hidden;
-        }
-      }
-    }
-  }
-}
+@mixin el-collapse-operation-style {
+  .el-collapse-item {
+    &__header {
+      padding: 0.5rem 0.5rem 0.5rem 0rem;
+      min-height: 48px;
+      text-align: left;
+    }
+    &__content {
+      background: var(--anra-bg-15-accent);
+    }
+  }
+}
+
+@mixin el-collapse-advisory-style {
+  .el-collapse-item {
+    border-bottom: 10px solid transparent;
+    &__header {
+      border-top: 1px solid var(--el-collapse-border-color);
+    }
+    &__content {
+      background: var(--anra-bg-20);
+      padding-bottom: 0;
+    }
+    &.is-disabled {
+      .el-collapse-item {
+        &__header {
+          color: var(--default-text-color);
+        }
+        &__arrow {
+          visibility: hidden;
+        }
+      }
+    }
+  }
+}
+
+@mixin el-airspace-layer-style {
+  .el-collapse-item {
+    border-bottom: 10px solid transparent;
+    &__header {
+      padding: 0.25rem 0.5rem 0.25rem 0rem;
+      // min-height: 30px;
+      text-align: left;
+      border-top: 1px solid var(--el-collapse-border-color);
+    }
+    &__content {
+      background: var(--anra-bg-15-accent);
+      padding-bottom: 0;
+    }
+    &.is-disabled {
+      .el-collapse-item {
+        &__header {
+          color: var(--default-text-color);
+        }
+        &__arrow {
+          visibility: hidden;
+        }
+      }
+    }
+  }
+}