@flyanra/vue-core 0.4.0 → 0.4.2

package/README.md

@@ -1,176 +1,176 @@
-# @flyanra/vue-core
-
-Source-distributed Vue component library for Vite and Nuxt consumers.
-
-This package publishes raw Vue SFC and TypeScript source instead of a bundled runtime build. Consumers import documented package subpaths and let their own toolchain compile the source.
-
-## Supported consumers
-
-- Vite apps with Vue SFC support
-- Nuxt apps with Vue SFC support
-
-## Package contract
-
-- Consumers install and configure `vue` in their own app.
-- Consumers install required peer UI libraries for components that depend on them.
-- Consumers should import documented package subpaths rather than deep internal files.
-- This package publishes source `.vue` and `.ts` files plus generated declarations in `dist/types`.
-
-`AppButton` depends on `element-plus`, so consumers using that component must install `element-plus` in their app.
-
-Element Plus theme variables are customized through the SCSS `@forward` method in `src/styles/element/common.scss` and `src/styles/element/dark.scss`.
-
-## Consumer styles
-
-Consumers that want the library's Element Plus theme layer should import:
-
-```ts
-import '@flyanra/vue-core/styles'
-```
-
-That entry provides the global Element Plus CSS vars for light and dark mode. Consumers can skip it and provide their own Element Plus theme layer instead.
-
-Consumers importing `@flyanra/vue-core/styles` should do so once in their global app entry, for example `src/main.ts` in a Vite app.
-
-```ts
-import { createApp } from 'vue'
-
-import '@flyanra/vue-core/styles'
-
-import App from './App.vue'
-
-createApp(App).mount('#app')
-```
-
-## Consumer custom theming
-
-Consumers do not need to use the library's global theme entry. They can provide their own Element Plus light and dark theme layer and still use the library components.
-
-This is useful when a consumer already has:
-
-- a brand color system
-- custom Element Plus tokens
-- a light theme and dark theme that should override the library defaults
-
-In that case, they should:
-
-1. install the required peer dependencies
-2. skip `@flyanra/vue-core/styles`
-3. create their own Element Plus SCSS theme entry
-4. import that theme entry once in their app root
-
-### Important SCSS structure
-
-Do not put both Element Plus `@forward` overrides in the same file. Sass will fail because both forwarded modules export variables such as `$colors`.
-
-Use three files instead:
-
-- one file for the light/common override
-- one file for the dark override
-- one entry file that `@use`s both and generates the final CSS vars
-
-### Example custom theme
-
-`src/styles/element/common.scss`
-
-```scss
-@forward 'element-plus/theme-chalk/src/common/var.scss' with (
-  $colors: (
-    'primary': (
-      'base': #2563eb
-    )
-  )
-);
-```
-
-`src/styles/element/dark.scss`
-
-```scss
-@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
-  $colors: (
-    'primary': (
-      'base': #14b8a6
-    )
-  )
-);
-```
-
-`src/styles/element-theme.scss`
-
-```scss
-@use './element/common.scss' as *;
-@use 'element-plus/theme-chalk/src/var.scss' as *;
-
-@use './element/dark.scss' as *;
-@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;
-```
-
-Then import that entry once in the consumer app:
-
-```ts
-import './styles/element-theme.scss'
-```
-
-### Dark mode behavior
-
-The Element Plus dark CSS vars are emitted under `html.dark`, so the consumer app should toggle the `dark` class on the root HTML element when switching themes.
-
-### What the library still provides
-
-Even when consumers provide their own global theme layer, component-local SCSS imported by the library components still loads the required Element Plus component styles. The consumer theme file is responsible for the global CSS variables and design tokens, not the per-component structure styles.
-
-## Public imports
-
-```ts
-import { AppButton as AppButtonNamed } from '@flyanra/vue-core/components'
-import AppButton from '@flyanra/vue-core/components/AppButton'
-import type { AppButtonProps } from '@flyanra/vue-core/components/AppButton'
-import AppCard from '@flyanra/vue-core/components/AppCard'
-```
-
-Add new components under `src/components/<ComponentName>/index.ts` and they will resolve through the `@flyanra/vue-core/components/<ComponentName>` subpath pattern.
-
-## Development checks
-
-```sh
-npm run typecheck
-npm run build:types
-npm run pack:check
-```
-
-## Local preview
-
-Use Vite to preview components locally without publishing the package:
-
-```sh
-npm run dev
-```
-
-The preview page imports components through the package-style paths so local development exercises the same import contract as consumers.
-
-## Storybook
-
-Use Storybook for isolated component exploration and docs:
-
-```sh
-npm run storybook
-```
-
-Use the Storybook toolbar theme control to switch between light and dark mode for both the canvas and docs view.
-
-Build the static Storybook site with:
-
-```sh
-npm run build-storybook
-```
-
-Run Storybook component tests with:
-
-```sh
-npm run test-storybook
-```
-
-## Publishing notes
-
-- Verify `npm pack --dry-run` only includes intended source and type artifacts.
-- Keep Storybook, fixtures, and tests out of the published payload until they are intentionally added.
+# @flyanra/vue-core
+
+Source-distributed Vue component library for Vite and Nuxt consumers.
+
+This package publishes raw Vue SFC and TypeScript source instead of a bundled runtime build. Consumers import documented package subpaths and let their own toolchain compile the source.
+
+## Supported consumers
+
+- Vite apps with Vue SFC support
+- Nuxt apps with Vue SFC support
+
+## Package contract
+
+- Consumers install and configure `vue` in their own app.
+- Consumers install required peer UI libraries for components that depend on them.
+- Consumers should import documented package subpaths rather than deep internal files.
+- This package publishes source `.vue` and `.ts` files plus generated declarations in `dist/types`.
+
+`AppButton` depends on `element-plus`, so consumers using that component must install `element-plus` in their app.
+
+Element Plus theme variables are customized through the SCSS `@forward` method in `src/styles/element/common.scss` and `src/styles/element/dark.scss`.
+
+## Consumer styles
+
+Consumers that want the library's Element Plus theme layer should import:
+
+```ts
+import '@flyanra/vue-core/styles'
+```
+
+That entry provides the global Element Plus CSS vars for light and dark mode. Consumers can skip it and provide their own Element Plus theme layer instead.
+
+Consumers importing `@flyanra/vue-core/styles` should do so once in their global app entry, for example `src/main.ts` in a Vite app.
+
+```ts
+import { createApp } from 'vue'
+
+import '@flyanra/vue-core/styles'
+
+import App from './App.vue'
+
+createApp(App).mount('#app')
+```
+
+## Consumer custom theming
+
+Consumers do not need to use the library's global theme entry. They can provide their own Element Plus light and dark theme layer and still use the library components.
+
+This is useful when a consumer already has:
+
+- a brand color system
+- custom Element Plus tokens
+- a light theme and dark theme that should override the library defaults
+
+In that case, they should:
+
+1. install the required peer dependencies
+2. skip `@flyanra/vue-core/styles`
+3. create their own Element Plus SCSS theme entry
+4. import that theme entry once in their app root
+
+### Important SCSS structure
+
+Do not put both Element Plus `@forward` overrides in the same file. Sass will fail because both forwarded modules export variables such as `$colors`.
+
+Use three files instead:
+
+- one file for the light/common override
+- one file for the dark override
+- one entry file that `@use`s both and generates the final CSS vars
+
+### Example custom theme
+
+`src/styles/element/common.scss`
+
+```scss
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': #2563eb
+    )
+  )
+);
+```
+
+`src/styles/element/dark.scss`
+
+```scss
+@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': #14b8a6
+    )
+  )
+);
+```
+
+`src/styles/element-theme.scss`
+
+```scss
+@use './element/common.scss' as *;
+@use 'element-plus/theme-chalk/src/var.scss' as *;
+
+@use './element/dark.scss' as *;
+@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;
+```
+
+Then import that entry once in the consumer app:
+
+```ts
+import './styles/element-theme.scss'
+```
+
+### Dark mode behavior
+
+The Element Plus dark CSS vars are emitted under `html.dark`, so the consumer app should toggle the `dark` class on the root HTML element when switching themes.
+
+### What the library still provides
+
+Even when consumers provide their own global theme layer, component-local SCSS imported by the library components still loads the required Element Plus component styles. The consumer theme file is responsible for the global CSS variables and design tokens, not the per-component structure styles.
+
+## Public imports
+
+```ts
+import { AppButton as AppButtonNamed } from '@flyanra/vue-core/components'
+import AppButton from '@flyanra/vue-core/components/AppButton'
+import type { AppButtonProps } from '@flyanra/vue-core/components/AppButton'
+import AppCard from '@flyanra/vue-core/components/AppCard'
+```
+
+Add new components under `src/components/<ComponentName>/index.ts` and they will resolve through the `@flyanra/vue-core/components/<ComponentName>` subpath pattern.
+
+## Development checks
+
+```sh
+npm run typecheck
+npm run build:types
+npm run pack:check
+```
+
+## Local preview
+
+Use Vite to preview components locally without publishing the package:
+
+```sh
+npm run dev
+```
+
+The preview page imports components through the package-style paths so local development exercises the same import contract as consumers.
+
+## Storybook
+
+Use Storybook for isolated component exploration and docs:
+
+```sh
+npm run storybook
+```
+
+Use the Storybook toolbar theme control to switch between light and dark mode for both the canvas and docs view.
+
+Build the static Storybook site with:
+
+```sh
+npm run build-storybook
+```
+
+Run Storybook component tests with:
+
+```sh
+npm run test-storybook
+```
+
+## Publishing notes
+
+- Verify `npm pack --dry-run` only includes intended source and type artifacts.
+- Keep Storybook, fixtures, and tests out of the published payload until they are intentionally added.

package/package.json

@@ -1,138 +1,137 @@
-{
-  "name": "@flyanra/vue-core",
-  "version": "0.4.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"
-    },
-    "./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"
-    ]
-  },
-  "dependencies": {},
-  "devDependencies": {
-    "@changesets/cli": "^2.30.0",
-    "@eslint/js": "^10.0.1",
-    "@flyanra/js-utils": "^1.3.2",
-    "@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": "^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",
-    "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",
-    "lodash": "^4.18.1",
-    "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": "0.4.2",
+  "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"
+    },
+    "./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.3.2",
+    "@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": "^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",
+    "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",
+    "lodash": "^4.18.1",
+    "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.element.scss

@@ -1,3 +1,3 @@
-@use '../../../styles/element/common.scss' as *;
-
-@use 'element-plus/theme-chalk/src/button.scss' as *;
+@use '../../../styles/element/common.scss' as *;
+
+@use 'element-plus/theme-chalk/src/button.scss' as *;