@pantograph/vue 0.35.0 → 0.35.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 +22 -3
- package/dist/index.d.ts +279 -126
- package/dist/index.js +370 -355
- package/dist/index.umd.cjs +1 -1
- package/dist/nuxt.d.ts +97 -97
- package/dist/resolver.d.ts +97 -97
- package/dist/use/index.js +7161 -7072
- package/dist/use/index.umd.cjs +6 -6
- package/dist/use.d.ts +97 -97
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -7,11 +7,13 @@
|
|
|
7
7
|
Pantograph's Vue 3 component library, built with TypeScript and token-based design. Ready to use in your apps with light/dark token switching and simple, consistent APIs.
|
|
8
8
|
|
|
9
9
|
## Install
|
|
10
|
+
|
|
10
11
|
```bash
|
|
11
12
|
npm i @pantograph/vue
|
|
12
13
|
```
|
|
13
14
|
|
|
14
15
|
## Quick usage
|
|
16
|
+
|
|
15
17
|
```vue
|
|
16
18
|
<script setup lang="ts">
|
|
17
19
|
import { Button } from '@pantograph/vue'
|
|
@@ -19,13 +21,30 @@ import '@pantograph/styles'
|
|
|
19
21
|
</script>
|
|
20
22
|
|
|
21
23
|
<template>
|
|
22
|
-
<Button>Click me</Button>
|
|
24
|
+
<Button variant="primary">Click me</Button>
|
|
23
25
|
</template>
|
|
24
26
|
```
|
|
25
27
|
|
|
28
|
+
## Key Features
|
|
29
|
+
|
|
30
|
+
- **80+ WAI-ARIA components** built on top of `reka-ui` for robust accessibility
|
|
31
|
+
- **Base → Public pattern**: Internal base components (e.g., `BaseButton`) are wrapped and styled into public Pantograph components (e.g., `Button`)
|
|
32
|
+
- **CSS-in-JS styling**: Style imports are handled via `useCssInJs` from `useConfig()` — no `<style>` tags required for component styling
|
|
33
|
+
- **Dark mode**: Activated via CSS class (`pantograph-dark` or `pantograph-light`) on the root element; never uses `.dark` CSS rules
|
|
34
|
+
- **Token system**: All CSS variables use the `--pt-*` prefix for consistent theming
|
|
35
|
+
- **Strict exports**: Named exports only; no default exports and no subpath imports (e.g., `@pantograph/vue/Button` is not allowed)
|
|
36
|
+
- **Component structure**: Each component follows a standardized layout: `.vue` + `index.ts` + `types.ts` + `constant.ts` + `model.ts` + `context.ts`
|
|
37
|
+
|
|
38
|
+
## Navigation
|
|
39
|
+
|
|
40
|
+
For a complete map of all packages, components, and import paths, refer to the centralized navigation index:
|
|
41
|
+
- [`.ai/NAVIGATION.md`](../../.ai/NAVIGATION.md)
|
|
42
|
+
|
|
26
43
|
## Documentation
|
|
44
|
+
|
|
27
45
|
For full documentation and live examples, visit the Pantograph docs:
|
|
28
46
|
|
|
29
47
|
- Docs: [Introduction & Stories](https://panto.stg.bounteco.com/story/src-story-introduction-story-js)
|
|
30
|
-
|
|
31
|
-
|
|
48
|
+
- Component APIs: [`.ai/component-contracts.json`](../../.ai/component-contracts.json)
|
|
49
|
+
- Import paths: [`.ai/symbol-map.json`](../../.ai/symbol-map.json)
|
|
50
|
+
- Run `npm run ai:index` to regenerate indexes after structural changes
|