@skygraph/vue 0.5.0 → 0.6.1

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.
Files changed (7) hide show
  1. package/README.md +108 -121
  2. package/dist/index.cjs +9 -9
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.ts +311 -14
  5. package/dist/index.js +10910 -9620
  6. package/dist/index.js.map +1 -1
  7. package/package.json +3 -3
package/README.md CHANGED
@@ -1,121 +1,108 @@
1
- # @skygraph/vue
2
-
3
- Vue 3 adapter for [`@skygraph/core`](../core). MVP: 5 composables and 4 base
4
- components built on top of the framework-agnostic engines, sharing the same
5
- `.sg-*` CSS contract as `@skygraph/react` via `@skygraph/styles`.
6
-
7
- ## Status
8
-
9
- - 5 composables: `useForm`, `useField`, `useTable`, `useTree`, `useGraph`
10
- - 4 components: `SgButton`, `SgInput`, `SgForm`, `SgField`
11
- - Vue 3 only, Composition API only, `<script setup>` SFCs
12
- - ~48 vitest tests via `@vue/test-utils` + `jsdom`
13
- - Built with `vite` library mode + `vite-plugin-dts`
14
-
15
- ## Install
16
-
17
- For most apps the easier path is the meta-package, which pulls in
18
- `@skygraph/core` and `@skygraph/styles` transitively and auto-loads the
19
- CSS:
20
-
21
- ```bash
22
- npm install skygraph-vue
23
- ```
24
-
25
- If you want fine-grained control over the install set, the adapter is
26
- still published separately:
27
-
28
- ```bash
29
- pnpm add @skygraph/vue @skygraph/core @skygraph/styles vue
30
- ```
31
-
32
- ## Usage
33
-
34
- ```vue
35
- <script setup lang="ts">
36
- import { ref } from 'vue'
37
- import { SgButton, SgInput, SgForm, SgField } from '@skygraph/vue'
38
- import '@skygraph/styles'
39
-
40
- const text = ref('')
41
-
42
- function onSubmit(payload: {
43
- values: Record<string, unknown>
44
- valid: boolean
45
- }) {
46
- console.log(payload)
47
- }
48
- </script>
49
-
50
- <template>
51
- <SgInput v-model="text" placeholder="Type here…" />
52
-
53
- <SgForm
54
- :default-values="{ email: '' }"
55
- @submit="onSubmit"
56
- >
57
- <SgField
58
- name="email"
59
- label="Email"
60
- :rules="[{ required: true }, { type: 'email' }]"
61
- v-slot="{ value, onChange, errors }"
62
- >
63
- <SgInput
64
- :model-value="String(value ?? '')"
65
- :status="errors.length ? 'error' : undefined"
66
- @update:model-value="onChange"
67
- />
68
- </SgField>
69
- <SgButton type="primary" html-type="submit">Submit</SgButton>
70
- </SgForm>
71
- </template>
72
- ```
73
-
74
- ## Mapping to `@skygraph/react`
75
-
76
- | React | Vue |
77
- | ------------------------- | ------------------------- |
78
- | `useForm()` | `useForm()` |
79
- | `useField(core, form, n)` | `useField(core, form, n)` |
80
- | `useTable()` | `useTable()` |
81
- | `useTree()` | `useTree()` |
82
- | `useGraph()` | `useGraph()` |
83
- | `<Button />` | `<SgButton />` |
84
- | `<Input />` | `<SgInput v-model />` |
85
- | `<Form />` | `<SgForm />` |
86
- | `<Field />` | `<SgField v-slot />` |
87
-
88
- The `Sg` prefix avoids clashing with the React names *and* with native HTML
89
- elements / globally-registered Vue components (e.g. `Form`, `Input`).
90
-
91
- CSS class names (`.sg-button`, `.sg-input`, `.sg-form`, `.sg-field`, …) are
92
- **identical** between the React and Vue adapters — both consume the same
93
- [`@skygraph/styles`](../styles) package, which is the single source of
94
- truth for visual styling.
95
-
96
- ## Scope of MVP
97
-
98
- This package is a foundation, not a full port. It deliberately does not
99
- yet ship Vue equivalents for:
100
-
101
- - the other ~74 React components (Select, Table, Diagram, Charts, …)
102
- - chart / dashboard / calendar / tree-view widgets
103
- - per-component i18n
104
- - per-component documentation pages
105
-
106
- Those land in subsequent Vue streams.
107
-
108
- ## Development
109
-
110
- ```bash
111
- pnpm install
112
- pnpm --filter @skygraph/vue typecheck
113
- pnpm --filter @skygraph/vue test
114
- pnpm --filter @skygraph/vue build
115
- ```
116
-
117
- To explore a live demo:
118
-
119
- ```bash
120
- pnpm --filter demo-vue dev
121
- ```
1
+ # @skygraph/vue
2
+
3
+ Vue 3 adapter for [SkyGraph](https://skygraph.ruslansinkevich.ru/) — 66+ components and composables built on the framework-agnostic [`@skygraph/core`](../core) engine. Shares the `.sg-*` CSS contract with the React adapter via [`@skygraph/styles`](../styles).
4
+
5
+ > **Easier path — the meta-package:**
6
+ >
7
+ > ```bash
8
+ > npm install skygraph-vue
9
+ > ```
10
+ >
11
+ > The meta-package re-exports everything below and auto-loads the CSS as a side effect. No separate `@skygraph/core` install, no manual `import '@skygraph/styles'`. Use this package directly only when you need fine-grained control over the install set.
12
+
13
+ ## Install (direct)
14
+
15
+ ```bash
16
+ npm install @skygraph/vue @skygraph/core vue
17
+ ```
18
+
19
+ ## Usage
20
+
21
+ ```vue
22
+ <script setup lang="ts">
23
+ import { ref } from 'vue'
24
+ import { SgButton, SgInput, SgForm, SgField } from '@skygraph/vue'
25
+ import '@skygraph/styles'
26
+
27
+ const text = ref('')
28
+
29
+ function onSubmit(payload: {
30
+ values: Record<string, unknown>
31
+ valid: boolean
32
+ }) {
33
+ console.log(payload)
34
+ }
35
+ </script>
36
+
37
+ <template>
38
+ <SgInput v-model="text" placeholder="Type here…" />
39
+
40
+ <SgForm
41
+ :default-values="{ email: '' }"
42
+ @submit="onSubmit"
43
+ >
44
+ <SgField
45
+ name="email"
46
+ label="Email"
47
+ :rules="[{ required: true }, { type: 'email' }]"
48
+ v-slot="{ value, onChange, errors }"
49
+ >
50
+ <SgInput
51
+ :model-value="String(value ?? '')"
52
+ :status="errors.length ? 'error' : undefined"
53
+ @update:model-value="onChange"
54
+ />
55
+ </SgField>
56
+ <SgButton type="primary" html-type="submit">Submit</SgButton>
57
+ </SgForm>
58
+ </template>
59
+ ```
60
+
61
+ ## Mapping to `@skygraph/react`
62
+
63
+ | React | Vue |
64
+ | ------------------------- | ------------------------- |
65
+ | `useForm()` | `useForm()` |
66
+ | `useField(core, form, n)` | `useField(core, form, n)` |
67
+ | `useTable()` | `useTable()` |
68
+ | `useTree()` | `useTree()` |
69
+ | `useGraph()` | `useGraph()` |
70
+ | `<Button />` | `<SgButton />` |
71
+ | `<Input />` | `<SgInput v-model />` |
72
+ | `<Form />` | `<SgForm />` |
73
+ | `<Field />` | `<SgField v-slot />` |
74
+
75
+ The `Sg` prefix avoids clashing with the React names *and* with native HTML
76
+ elements / globally-registered Vue components (e.g. `Form`, `Input`).
77
+
78
+ CSS class names (`.sg-button`, `.sg-input`, `.sg-form`, `.sg-field`, …) are
79
+ **identical** between the React and Vue adapters — both consume the same
80
+ [`@skygraph/styles`](../styles) package, which is the single source of
81
+ truth for visual styling.
82
+
83
+ ## Scope of MVP
84
+
85
+ This package is a foundation, not a full port. It deliberately does not
86
+ yet ship Vue equivalents for:
87
+
88
+ - the other ~74 React components (Select, Table, Diagram, Charts, …)
89
+ - chart / dashboard / calendar / tree-view widgets
90
+ - per-component i18n
91
+ - per-component documentation pages
92
+
93
+ Those land in subsequent Vue streams.
94
+
95
+ ## Development
96
+
97
+ ```bash
98
+ pnpm install
99
+ pnpm --filter @skygraph/vue typecheck
100
+ pnpm --filter @skygraph/vue test
101
+ pnpm --filter @skygraph/vue build
102
+ ```
103
+
104
+ To explore a live demo:
105
+
106
+ ```bash
107
+ pnpm --filter demo-vue dev
108
+ ```