@7pmlabs/design-system 2.0.0 → 2.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +19 -0
- package/dist/design-system.css +1 -1
- package/dist/design-system25.js +20 -15
- package/dist/design-system25.js.map +1 -1
- package/dist/design-system27.js +1 -1
- package/dist/design-system27.js.map +1 -1
- package/dist/types/components/BIcon/BIcon.spec.d.ts +1 -0
- package/dist/types/vite/index.d.ts +39 -0
- package/dist/vite/index.js +338 -0
- package/package.json +9 -3
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
A Vue 3 component library built with TypeScript, Tailwind CSS 4, and Ant Design inspiration. 57 components covering general, layout, forms, data display, feedback, and navigation.
|
|
4
4
|
|
|
5
|
+
📖 **Documentation:** https://ngphanducthinh.github.io/7pmlabs-design-system/
|
|
6
|
+
|
|
5
7
|
## Packages
|
|
6
8
|
|
|
7
9
|
| Package | Path | Use it for |
|
|
@@ -26,6 +28,23 @@ import { BButton, BInput, BModal } from '@7pmlabs/design-system'
|
|
|
26
28
|
import '@7pmlabs/design-system/style.css'
|
|
27
29
|
```
|
|
28
30
|
|
|
31
|
+
Add the Vite plugin so `BIcon` SVGs are served in dev and copied/inlined into your build output:
|
|
32
|
+
|
|
33
|
+
```ts
|
|
34
|
+
// vite.config.ts
|
|
35
|
+
import vue from '@vitejs/plugin-vue';
|
|
36
|
+
import { defineConfig } from 'vite';
|
|
37
|
+
import { designSystem } from '@7pmlabs/design-system/vite';
|
|
38
|
+
|
|
39
|
+
export default defineConfig({
|
|
40
|
+
plugins: [vue(), designSystem()],
|
|
41
|
+
});
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
What it does: scans your `src/` for static `<BIcon icon="..." />` usages and inlines those SVGs into the bundle (no network roundtrip), serves them via middleware in `vite dev` / `vite preview`, and copies the icon set into your `dist/` so dynamic `<BIcon :icon="..." />` bindings still resolve in production. Without this plugin, `BIcon` will render empty spans in any built app.
|
|
45
|
+
|
|
46
|
+
If you never use dynamic `:icon` bindings, you can opt out of the asset copy with `designSystem({ runtimeFallback: false })` to keep your `dist/` slim.
|
|
47
|
+
|
|
29
48
|
### Nuxt 4
|
|
30
49
|
|
|
31
50
|
Install the companion module — components, composables, and the stylesheet are wired up automatically:
|