@skygraph/vue 0.0.0-placeholder.0 → 0.5.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 SkyGraph Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,12 +1,121 @@
 # @skygraph/vue
 
-> Placeholder package. **Do not install yet.**
+Vue 3 adapter for [`@skygraph/core`](../core). MVP: 5 composables and 4 base
+components built on top of the framework-agnostic engines, sharing the same
+`.sg-*` CSS contract as `@skygraph/react` via `@skygraph/styles`.
 
-`@skygraph/vue` is the Vue 3 adapter for [SkyGraph](https://skygraph.ruslansinkevich.ru) — composables and components built on `@skygraph/core`.
+## Status
 
-This release is a name-reservation stub (`0.0.0-placeholder.0`, dist-tag `placeholder`). The first usable version will be published under the `latest` tag.
+- 5 composables: `useForm`, `useField`, `useTable`, `useTree`, `useGraph`
+- 4 components: `SgButton`, `SgInput`, `SgForm`, `SgField`
+- Vue 3 only, Composition API only, `<script setup>` SFCs
+- ~48 vitest tests via `@vue/test-utils` + `jsdom`
+- Built with `vite` library mode + `vite-plugin-dts`
 
-- Live Vue demo: <https://skygraph.ruslansinkevich.ru/vue/>
-- Repository: <https://github.com/RuslanSinkevich/skygraph>
+## Install
 
-MIT © Ruslan Sinkevich
+For most apps the easier path is the meta-package, which pulls in
+`@skygraph/core` and `@skygraph/styles` transitively and auto-loads the
+CSS:
+
+```bash
+npm install skygraph-vue
+```
+
+If you want fine-grained control over the install set, the adapter is
+still published separately:
+
+```bash
+pnpm add @skygraph/vue @skygraph/core @skygraph/styles vue
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { SgButton, SgInput, SgForm, SgField } from '@skygraph/vue'
+import '@skygraph/styles'
+
+const text = ref('')
+
+function onSubmit(payload: {
+  values: Record<string, unknown>
+  valid: boolean
+}) {
+  console.log(payload)
+}
+</script>
+
+<template>
+  <SgInput v-model="text" placeholder="Type here…" />
+
+  <SgForm
+    :default-values="{ email: '' }"
+    @submit="onSubmit"
+  >
+    <SgField
+      name="email"
+      label="Email"
+      :rules="[{ required: true }, { type: 'email' }]"
+      v-slot="{ value, onChange, errors }"
+    >
+      <SgInput
+        :model-value="String(value ?? '')"
+        :status="errors.length ? 'error' : undefined"
+        @update:model-value="onChange"
+      />
+    </SgField>
+    <SgButton type="primary" html-type="submit">Submit</SgButton>
+  </SgForm>
+</template>
+```
+
+## Mapping to `@skygraph/react`
+
+| React                     | Vue                       |
+| ------------------------- | ------------------------- |
+| `useForm()`               | `useForm()`               |
+| `useField(core, form, n)` | `useField(core, form, n)` |
+| `useTable()`              | `useTable()`              |
+| `useTree()`               | `useTree()`               |
+| `useGraph()`              | `useGraph()`              |
+| `<Button />`              | `<SgButton />`            |
+| `<Input />`               | `<SgInput v-model />`     |
+| `<Form />`                | `<SgForm />`              |
+| `<Field />`               | `<SgField v-slot />`      |
+
+The `Sg` prefix avoids clashing with the React names *and* with native HTML
+elements / globally-registered Vue components (e.g. `Form`, `Input`).
+
+CSS class names (`.sg-button`, `.sg-input`, `.sg-form`, `.sg-field`, …) are
+**identical** between the React and Vue adapters — both consume the same
+[`@skygraph/styles`](../styles) package, which is the single source of
+truth for visual styling.
+
+## Scope of MVP
+
+This package is a foundation, not a full port. It deliberately does not
+yet ship Vue equivalents for:
+
+- the other ~74 React components (Select, Table, Diagram, Charts, …)
+- chart / dashboard / calendar / tree-view widgets
+- per-component i18n
+- per-component documentation pages
+
+Those land in subsequent Vue streams.
+
+## Development
+
+```bash
+pnpm install
+pnpm --filter @skygraph/vue typecheck
+pnpm --filter @skygraph/vue test
+pnpm --filter @skygraph/vue build
+```
+
+To explore a live demo:
+
+```bash
+pnpm --filter demo-vue dev
+```