@flyanra/vue-core 1.0.2 → 1.2.1

package/dist/types/components/navigation/menu/fly-sidebar/FlySidebar.types.d.ts

@@ -21,9 +21,22 @@ export type T_FlySidebarGroup = {
 export type T_FlySidebarNode = T_FlySidebarItem | T_FlySidebarSubMenu | T_FlySidebarGroup;
 export type T_FlySidebar = T_FlySidebarNode[];
 export type T_FlySidebarProps = {
-    isCollapsed?: boolean;
     router?: boolean;
     defaultActive?: string;
     menu: T_FlySidebarNode[];
     height?: string;
+    /**
+     * Controls the collapsed state of the sidebar.
+     * Must be bound with `v-model:collapsed` — a plain `:collapsed` binding
+     * is one-way only and will not reflect toggle actions back to the parent.
+     *
+     * @example
+     * ```ts
+     * const sidebarCollapsed = useStorage('sidebar-collapsed', false)
+     * ```
+     * ```html
+     * <FlySidebar v-model:collapsed="sidebarCollapsed" ... />
+     * ```
+     */
+    collapsed?: boolean;
 };

package/dist/types/components/navigation/menu/fly-sidebar/FlySidebar.vue.d.ts

@@ -1,8 +1,14 @@
 import './FlySidebar.element.scss';
 import type { T_FlySidebarProps } from './FlySidebar.types';
-declare const __VLS_export: import("vue").DefineComponent<T_FlySidebarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<T_FlySidebarProps> & Readonly<{}>, {
-    router: boolean;
-    defaultActive: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_Props = T_FlySidebarProps;
+type __VLS_ModelProps = {
+    'collapsed'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:collapsed": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/types/composables/UseLocaleInjector.d.ts

@@ -1,8 +1,14 @@
+import type { MaybeRef } from 'vue';
 import type { Locale } from '@flyanra/js-utils/locales';
 import type { ComposerTranslation } from 'vue-i18n';
-type T_LocaleInjector = {
+export type T_LocaleInjector = {
     t: ComposerTranslation;
     locale: Locale;
 };
+type I18nLike = {
+    t: ComposerTranslation;
+    locale: MaybeRef<Locale>;
+};
+export declare function initLocaleInjector(i18n: I18nLike): void;
 export declare function UseLocaleInjector(): T_LocaleInjector;
 export {};

package/dist/types/composables/index.d.ts

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

package/dist/types/composables/useSidebarActiveIndex.d.ts

@@ -0,0 +1,66 @@
+import { type MaybeRefOrGetter } from 'vue';
+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 declare function useSidebarActiveIndex(menuItems: MaybeRefOrGetter<T_FlySidebar>, allRoutes: MaybeRefOrGetter<RouteItem[]>): import("vue").ComputedRef<string>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flyanra/vue-core",
-  "version": "1.0.2",
+  "version": "1.2.1",
   "private": false,
   "description": "Source-distributed Vue component library for Vite and Nuxt consumers.",
   "sideEffects": false,
@@ -98,6 +98,7 @@
     "@changesets/cli": "^2.30.0",
     "@eslint/js": "^10.0.1",
     "@flyanra/js-utils": "^1.5.0",
+    "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/ri": "^1.2.10",
     "@jamescoyle/vue-icon": "^0.1.2",
     "@mdi/js": "^7.4.47",
@@ -134,6 +135,7 @@
     "typescript": "~6.0.2",
     "typescript-eslint": "^8.58.2",
     "unplugin-icons": "^23.0.1",
+    "unplugin-vue-components": "^32.1.0",
     "vite": "^8.0.4",
     "vitest": "^4.1.4",
     "vue": "^3.5.32",

package/src/components/basic/fly-button/FlyButton.types.ts

@@ -1,28 +1,28 @@
-import type { ButtonType, ElButton, UseTooltipProps } from 'element-plus'
-
-import type { T_FlyIconV2Props } from '../../general'
-
-export type FlyButtonIconPosition = 'left' | 'right'
-
-export type FlyButtonSizes = InstanceType<typeof ElButton>['$props']['size']
-export type FlyButtonTypes = ButtonType
-
-export type FlyButtonProps = {
-  active?: boolean
-  appButtonClass?: string
-  aspect1?: boolean
-  /**
-   * Test
-   */
-  clipRound?: boolean
-  full?: boolean
-  icon?: T_FlyIconV2Props['icon']
-  iconPosition?: FlyButtonIconPosition
-  imageUrl?: string
-  label?: string
-  size?: FlyButtonSizes
-  stop?: boolean
-  title?: string
-  tooltip?: UseTooltipProps
-  type?: FlyButtonTypes
-}
+import type { ButtonType, ElButton, UseTooltipProps } from 'element-plus'
+
+import type { T_FlyIconV2Props } from '../../general'
+
+export type FlyButtonIconPosition = 'left' | 'right'
+
+export type FlyButtonSizes = InstanceType<typeof ElButton>['$props']['size']
+export type FlyButtonTypes = ButtonType
+
+export type FlyButtonProps = {
+  active?: boolean
+  appButtonClass?: string
+  aspect1?: boolean
+  /**
+   * Test
+   */
+  clipRound?: boolean
+  full?: boolean
+  icon?: T_FlyIconV2Props['icon']
+  iconPosition?: FlyButtonIconPosition
+  imageUrl?: string
+  label?: string
+  size?: FlyButtonSizes
+  stop?: boolean
+  title?: string
+  tooltip?: UseTooltipProps
+  type?: FlyButtonTypes
+}

package/src/components/basic/fly-button/FlyButton.vue

@@ -1,178 +1,178 @@
-<template>
-  <div class="fly-button" :class="[{ full }, appButtonClass]">
-    <FlyTooltip
-      :tooltip="{
-        // effect: 'dark',
-        content: title,
-        placement: tooltip?.placement ?? 'bottom',
-        disabled: !!tooltip?.disabled || isEmpty(title)
-      }"
-    >
-      <el-button
-        v-bind="additionalButtonBindingValues"
-        :class="[{ active, 'aspect-1': aspect1 }]"
-        @click="handleClick"
-      >
-        <FlyIconV2
-          v-if="icon && resolvedIconPosition === 'left'"
-          :icon="icon"
-          :class="[{ 'left-icon': slots.default }]"
-        />
-
-        <slot></slot>
-
-        <FlyIconV2
-          v-if="icon && resolvedIconPosition === 'right'"
-          :icon="icon"
-          :class="[{ 'right-icon': slots.default }]"
-        />
-
-        <span v-if="imageUrl" class="btn-image" :class="[{ 'clip-round': clipRound }]">
-          <img :src="imageUrl" />
-        </span>
-      </el-button>
-    </FlyTooltip>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, useAttrs, useSlots } from 'vue'
-
-import { ElButton } from 'element-plus'
-
-import { isEmpty } from 'lodash-es'
-
-import FlyTooltip from '../../feedback/tooltip/FlyTooltip.vue'
-import FlyIconV2 from '../../general/fly-icon-v2/FlyIconV2.vue'
-
-import './FlyButton.element.scss'
-import type { FlyButtonIconPosition, FlyButtonProps } from './FlyButton.types'
-
-const attrs = useAttrs()
-const slots = useSlots()
-const emit = defineEmits(['click'])
-
-defineOptions({
-  inheritAttrs: false
-})
-
-const props = withDefaults(defineProps<FlyButtonProps>(), {
-  active: false,
-  aspect1: false,
-  clipRound: false,
-  full: false,
-  stop: false,
-  tooltip: () => ({
-    placement: 'bottom',
-    disabled: false
-  })
-})
-
-const additionalButtonBindingValues = computed(() => {
-  const { type, size } = props
-
-  return {
-    ...attrs,
-    size,
-    type
-  } as object
-})
-
-const resolvedIconPosition = computed<FlyButtonIconPosition>(() => props.iconPosition || 'left')
-
-function handleClick(e: MouseEvent) {
-  /**
-   * Stop the event propagation if the stop prop is set to true
-   */
-  if (props.stop) {
-    e.stopPropagation()
-  }
-
-  emit('click', e)
-}
-</script>
-
-<style lang="scss" scoped>
-.fly-button {
-  pointer-events: auto;
-
-  &.full button {
-    width: 100%;
-  }
-
-  :deep(.el-button) {
-    &.active {
-      /* 1px ring stile */
-      box-shadow: 0 0 0 1px var(--anra-white);
-    }
-
-    .fly-icon {
-      svg {
-        width: calc(1em + 2px);
-      }
-    }
-  }
-
-  :deep(.fly-icon.left-icon) {
-    padding-inline-end: 0.25rem;
-  }
-
-  :deep(.fly-icon.right-icon) {
-    padding-inline-start: 0.25rem;
-  }
-
-  .btn-image {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-
-    &.clip-round {
-      -webkit-box-align: stretch;
-      align-items: stretch;
-      border-radius: 50%;
-      box-sizing: content-box;
-      display: flex;
-      flex-direction: column;
-      -webkit-box-pack: center;
-      justify-content: center;
-      overflow: hidden;
-
-      img {
-        border: 5px solid transparent;
-        border-radius: 50%;
-        display: flex;
-        width: 100%;
-        height: 100%;
-        flex: 1 1 100%;
-      }
-    }
-  }
-}
-</style>
-
-<style lang="scss">
-@use './FlyButton.mixins.scss' as button;
-
-.el-button-group {
-  display: flex;
-}
-
-html.dark {
-  button.el-button {
-    @include button.fly-button-overrides-dark;
-  }
-}
-
-button.el-button {
-  position: relative;
-  overflow: hidden;
-  transition: 0.1s;
-  text-wrap: balance;
-  @include button.fly-button-overrides;
-}
-</style>
+<template>
+  <div class="fly-button" :class="[{ full }, appButtonClass]">
+    <FlyTooltip
+      :tooltip="{
+        // effect: 'dark',
+        content: title,
+        placement: tooltip?.placement ?? 'bottom',
+        disabled: !!tooltip?.disabled || isEmpty(title)
+      }"
+    >
+      <el-button
+        v-bind="additionalButtonBindingValues"
+        :class="[{ active, 'aspect-1': aspect1 }]"
+        @click="handleClick"
+      >
+        <FlyIconV2
+          v-if="icon && resolvedIconPosition === 'left'"
+          :icon="icon"
+          :class="[{ 'left-icon': slots.default }]"
+        />
+
+        <slot></slot>
+
+        <FlyIconV2
+          v-if="icon && resolvedIconPosition === 'right'"
+          :icon="icon"
+          :class="[{ 'right-icon': slots.default }]"
+        />
+
+        <span v-if="imageUrl" class="btn-image" :class="[{ 'clip-round': clipRound }]">
+          <img :src="imageUrl" />
+        </span>
+      </el-button>
+    </FlyTooltip>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, useAttrs, useSlots } from 'vue'
+
+import { ElButton } from 'element-plus'
+
+import { isEmpty } from 'lodash-es'
+
+import FlyTooltip from '../../feedback/tooltip/FlyTooltip.vue'
+import FlyIconV2 from '../../general/fly-icon-v2/FlyIconV2.vue'
+
+import './FlyButton.element.scss'
+import type { FlyButtonIconPosition, FlyButtonProps } from './FlyButton.types'
+
+const attrs = useAttrs()
+const slots = useSlots()
+const emit = defineEmits(['click'])
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = withDefaults(defineProps<FlyButtonProps>(), {
+  active: false,
+  aspect1: false,
+  clipRound: false,
+  full: false,
+  stop: false,
+  tooltip: () => ({
+    placement: 'bottom',
+    disabled: false
+  })
+})
+
+const additionalButtonBindingValues = computed(() => {
+  const { type, size } = props
+
+  return {
+    ...attrs,
+    size,
+    type
+  } as object
+})
+
+const resolvedIconPosition = computed<FlyButtonIconPosition>(() => props.iconPosition || 'left')
+
+function handleClick(e: MouseEvent) {
+  /**
+   * Stop the event propagation if the stop prop is set to true
+   */
+  if (props.stop) {
+    e.stopPropagation()
+  }
+
+  emit('click', e)
+}
+</script>
+
+<style lang="scss" scoped>
+.fly-button {
+  pointer-events: auto;
+
+  &.full button {
+    width: 100%;
+  }
+
+  :deep(.el-button) {
+    &.active {
+      /* 1px ring stile */
+      box-shadow: 0 0 0 1px var(--anra-white);
+    }
+
+    .fly-icon {
+      svg {
+        width: calc(1em + 2px);
+      }
+    }
+  }
+
+  :deep(.fly-icon.left-icon) {
+    padding-inline-end: 0.25rem;
+  }
+
+  :deep(.fly-icon.right-icon) {
+    padding-inline-start: 0.25rem;
+  }
+
+  .btn-image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    &.clip-round {
+      -webkit-box-align: stretch;
+      align-items: stretch;
+      border-radius: 50%;
+      box-sizing: content-box;
+      display: flex;
+      flex-direction: column;
+      -webkit-box-pack: center;
+      justify-content: center;
+      overflow: hidden;
+
+      img {
+        border: 5px solid transparent;
+        border-radius: 50%;
+        display: flex;
+        width: 100%;
+        height: 100%;
+        flex: 1 1 100%;
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+@use './FlyButton.mixins.scss' as button;
+
+.el-button-group {
+  display: flex;
+}
+
+html.dark {
+  button.el-button {
+    @include button.fly-button-overrides-dark;
+  }
+}
+
+button.el-button {
+  position: relative;
+  overflow: hidden;
+  transition: 0.1s;
+  text-wrap: balance;
+  @include button.fly-button-overrides;
+}
+</style>

package/src/components/basic/typography/FlyCollapseTitleRenderer.vue

@@ -1,46 +1,46 @@
-<template>
-  <div class="fly-collapse-title-renderer">
-    <div class="fly-collapse-title-renderer__inner">
-      <p class="fly-collapse-title-renderer__title">
-        {{ t(title) }}
-      </p>
-
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { UseLocaleInjector } from '../../../composables/UseLocaleInjector'
-
-defineProps<{
-  title: string
-}>()
-
-const { t } = UseLocaleInjector()
-</script>
-
-<style lang="scss" scoped>
-.fly-collapse-title-renderer {
-  display: flex;
-  gap: 0.25rem;
-  align-items: center;
-  text-align: left;
-  flex-grow: 1;
-
-  &__inner {
-    display: flex;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    flex-grow: 1;
-    align-items: center;
-  }
-
-  &__title {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 500;
-    flex-grow: 1;
-  }
-}
-</style>
+<template>
+  <div class="fly-collapse-title-renderer">
+    <div class="fly-collapse-title-renderer__inner">
+      <p class="fly-collapse-title-renderer__title">
+        {{ t(title) }}
+      </p>
+
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UseLocaleInjector } from '../../../composables/UseLocaleInjector'
+
+defineProps<{
+  title: string
+}>()
+
+const { t } = UseLocaleInjector()
+</script>
+
+<style lang="scss" scoped>
+.fly-collapse-title-renderer {
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+  text-align: left;
+  flex-grow: 1;
+
+  &__inner {
+    display: flex;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    flex-grow: 1;
+    align-items: center;
+  }
+
+  &__title {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    flex-grow: 1;
+  }
+}
+</style>