@flyanra/vue-core 1.0.1 → 1.2.0

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 {};
+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/dist/types/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { checkRange } from './pure-functions';
+export { checkInputRange, isRequiredError } from './validators';

package/package.json

@@ -1,146 +1,158 @@
-{
-  "name": "@flyanra/vue-core",
-  "version": "1.0.1",
-  "private": false,
-  "description": "Source-distributed Vue component library for Vite and Nuxt consumers.",
-  "sideEffects": false,
-  "type": "module",
-  "imports": {
-    "#storybook/*": "./.storybook/*"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./src/index.ts"
-    },
-    "./types": {
-      "types": "./src/types/index.d.ts",
-      "default": "./src/types/index.ts"
-    },
-    "./styles": {
-      "types": "./src/styles/index.d.ts",
-      "default": "./src/styles/index.scss"
-    },
-    "./styles/*": "./src/styles/*",
-    "./components": {
-      "types": "./dist/types/components/index.d.ts",
-      "import": "./src/components/index.ts"
-    },
-    "./components/*": {
-      "types": "./dist/types/components/*/index.d.ts",
-      "import": "./src/components/*/index.ts"
-    },
-    "./composables": {
-      "types": "./dist/types/composables/index.d.ts",
-      "import": "./src/composables/index.ts"
-    },
-    "./composables/*": {
-      "types": "./dist/types/composables/*/index.d.ts",
-      "import": "./src/composables/*/index.ts"
-    },
-    "./package.json": "./package.json"
-  },
-  "types": "./dist/types/index.d.ts",
-  "files": [
-    "src/components",
-    "src/styles",
-    "src/index.ts",
-    "dist/types",
-    "README.md",
-    "package.json",
-    "!src/**/*.stories.ts",
-    "!src/**/*.stories.tsx",
-    "!src/**/*.mdx",
-    "!dist/types/**/*.stories.d.ts"
-  ],
-  "scripts": {
-    "build:preview": "vite build",
-    "prebuild:types": "npm run clean:types",
-    "build:types": "vue-tsc --declaration --emitDeclarationOnly -p tsconfig.build.json",
-    "build-storybook": "storybook build",
-    "changeset": "changeset",
-    "changeset:publish": "changeset publish",
-    "changeset:version": "changeset version",
-    "clean:types": "rm -rf dist/types",
-    "dev": "vite",
-    "format": "prettier . --write",
-    "format:check": "prettier . --check",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "pack": "npm pack",
-    "pack:check": "npm pack --dry-run",
-    "postinstall:husky": "husky",
-    "prepare": "husky",
-    "preview": "vite preview",
-    "storybook": "storybook dev -p 6006 --no-open",
-    "test-storybook": "vitest --project=storybook",
-    "typecheck": "vue-tsc --noEmit -p tsconfig.lib.json"
-  },
-  "lint-staged": {
-    "*.{js,mjs,cjs,ts,mts,jsx,tsx,vue,css,scss,md,json}": [
-      "prettier --write"
-    ],
-    "*.{js,mjs,cjs,ts,mts,jsx,tsx,vue}": [
-      "eslint --fix"
-    ]
-  },
-  "devDependencies": {
-    "@changesets/cli": "^2.30.0",
-    "@eslint/js": "^10.0.1",
-    "@flyanra/js-utils": "^1.5.0",
-    "@iconify-json/ri": "^1.2.10",
-    "@jamescoyle/vue-icon": "^0.1.2",
-    "@mdi/js": "^7.4.47",
-    "@remixicon/vue": "^4.9.0",
-    "@storybook/addon-a11y": "^10.3.6",
-    "@storybook/addon-docs": "^10.3.6",
-    "@storybook/addon-vitest": "^10.3.6",
-    "@storybook/vue3-vite": "^10.3.6",
-    "@tailwindcss/vite": "^4.2.2",
-    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
-    "@types/node": "^24.12.2",
-    "@vitejs/plugin-vue": "^6.0.5",
-    "@vitest/browser-playwright": "^4.1.4",
-    "@vitest/coverage-v8": "^4.1.4",
-    "@vue/tsconfig": "^0.9.1",
-    "dompurify": "^3.4.2",
-    "element-plus": "^2.13.7",
-    "eslint": "^10.2.0",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-storybook": "^10.3.6",
-    "eslint-plugin-vue": "^10.8.0",
-    "globals": "^17.5.0",
-    "husky": "^9.1.7",
-    "lint-staged": "^16.4.0",
-    "lodash-es": "^4.18.1",
-    "maska": "^3.2.0",
-    "playwright": "^1.59.1",
-    "prettier": "^3.8.3",
-    "prettier-plugin-packagejson": "^3.0.2",
-    "sass": "^1.99.0",
-    "storybook": "^10.3.6",
-    "storybook-vue3-router": "^7.0.0",
-    "tailwindcss": "^4.2.2",
-    "typescript": "~6.0.2",
-    "typescript-eslint": "^8.58.2",
-    "unplugin-icons": "^23.0.1",
-    "vite": "^8.0.4",
-    "vitest": "^4.1.4",
-    "vue": "^3.5.32",
-    "vue-eslint-parser": "^10.4.0",
-    "vue-i18n": "^11.4.0",
-    "vue-tsc": "^3.2.6"
-  },
-  "peerDependencies": {
-    "@flyanra/js-utils": "^1.3.2",
-    "@jamescoyle/vue-icon": "^0.1.2",
-    "element-plus": "^2.13.7",
-    "maska": "^3.2.0",
-    "vue": "^3.5.32",
-    "vue-i18n": "^11.4.0"
-  },
-  "volta": {
-    "node": "24.12.0",
-    "yarn": "1.22.22"
-  }
-}
+{
+  "name": "@flyanra/vue-core",
+  "version": "1.2.0",
+  "private": false,
+  "description": "Source-distributed Vue component library for Vite and Nuxt consumers.",
+  "sideEffects": false,
+  "type": "module",
+  "imports": {
+    "#storybook/*": "./.storybook/*"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./src/index.ts"
+    },
+    "./types": {
+      "types": "./src/types/index.d.ts",
+      "default": "./src/types/index.ts"
+    },
+    "./styles": {
+      "types": "./src/styles/index.d.ts",
+      "default": "./src/styles/index.scss"
+    },
+    "./styles/*": "./src/styles/*",
+    "./components": {
+      "types": "./dist/types/components/index.d.ts",
+      "import": "./src/components/index.ts"
+    },
+    "./components/*": {
+      "types": "./dist/types/components/*/index.d.ts",
+      "import": "./src/components/*/index.ts"
+    },
+    "./composables": {
+      "types": "./dist/types/composables/index.d.ts",
+      "import": "./src/composables/index.ts"
+    },
+    "./composables/*": {
+      "types": "./dist/types/composables/*/index.d.ts",
+      "import": "./src/composables/*/index.ts"
+    },
+    "./utils": {
+      "types": "./dist/types/utils/index.d.ts",
+      "import": "./src/utils/index.ts"
+    },
+    "./utils/*": {
+      "types": "./dist/types/utils/*.d.ts",
+      "import": "./src/utils/*.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/types/index.d.ts",
+  "files": [
+    "src/components",
+    "src/composables",
+    "src/utils",
+    "src/styles",
+    "src/index.ts",
+    "dist/types",
+    "README.md",
+    "package.json",
+    "!src/**/*.stories.ts",
+    "!src/**/*.stories.tsx",
+    "!src/**/*.mdx",
+    "!dist/types/**/*.stories.d.ts"
+  ],
+  "scripts": {
+    "build:preview": "vite build",
+    "prebuild:types": "npm run clean:types",
+    "build:types": "vue-tsc --declaration --emitDeclarationOnly -p tsconfig.build.json",
+    "build-storybook": "storybook build",
+    "changeset": "changeset",
+    "changeset:publish": "changeset publish",
+    "changeset:version": "changeset version",
+    "clean:types": "rm -rf dist/types",
+    "dev": "vite",
+    "format": "prettier . --write",
+    "format:check": "prettier . --check",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "pack": "npm pack",
+    "pack:check": "npm pack --dry-run",
+    "postinstall:husky": "husky",
+    "prepare": "husky",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "test-storybook": "vitest --project=storybook",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.lib.json"
+  },
+  "lint-staged": {
+    "*.{js,mjs,cjs,ts,mts,jsx,tsx,vue,css,scss,md,json}": [
+      "prettier --write"
+    ],
+    "*.{js,mjs,cjs,ts,mts,jsx,tsx,vue}": [
+      "eslint --fix"
+    ]
+  },
+  "devDependencies": {
+    "@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",
+    "@remixicon/vue": "^4.9.0",
+    "@storybook/addon-a11y": "^10.3.6",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/addon-vitest": "^10.3.6",
+    "@storybook/vue3-vite": "^10.3.6",
+    "@tailwindcss/vite": "^4.2.2",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
+    "@types/node": "^24.12.2",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vitest/browser-playwright": "^4.1.4",
+    "@vitest/coverage-v8": "^4.1.4",
+    "@vue/tsconfig": "^0.9.1",
+    "dompurify": "^3.4.2",
+    "element-plus": "^2.13.7",
+    "eslint": "^10.2.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-storybook": "^10.3.6",
+    "eslint-plugin-vue": "^10.8.0",
+    "globals": "^17.5.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.4.0",
+    "lodash-es": "^4.18.1",
+    "maska": "^3.2.0",
+    "playwright": "^1.59.1",
+    "prettier": "^3.8.3",
+    "prettier-plugin-packagejson": "^3.0.2",
+    "sass": "^1.99.0",
+    "storybook": "^10.3.6",
+    "storybook-vue3-router": "^7.0.0",
+    "tailwindcss": "^4.2.2",
+    "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",
+    "vue-eslint-parser": "^10.4.0",
+    "vue-i18n": "^11.4.0",
+    "vue-tsc": "^3.2.6"
+  },
+  "peerDependencies": {
+    "@flyanra/js-utils": "^1.3.2",
+    "@jamescoyle/vue-icon": "^0.1.2",
+    "element-plus": "^2.13.7",
+    "maska": "^3.2.0",
+    "vue": "^3.5.32",
+    "vue-i18n": "^11.4.0"
+  },
+  "volta": {
+    "node": "24.12.0",
+    "yarn": "1.22.22"
+  }
+}

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
+}