Skip to content

Commit 89a5238

Browse files
rijkvanzantenrijkvanzanten
committed
Start writing docs
1 parent 3de4c7a commit 89a5238

File tree

10 files changed

+176
-89
lines changed

10 files changed

+176
-89
lines changed

‎docs/content/1.getting-started/1.installation.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ pnpm add @directus/vue-split-panel
1919
```vue [MyComponent.vue]
2020
<script lang="ts" setup>
2121
import { SplitPanel } from '@directus/vue-split-panel';
22+
import '@directus/vue-split-panel/index.css';
2223
</script>
2324
2425
<template>

‎docs/content/1.getting-started/2.usage.md‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,105 @@ navigation:
55
icon: i-lucide-align-horizontal-justify-center
66
---
77

8+
## Anatomy
9+
10+
The splitter component is rendered as a single Vue component with two slots, one for each panel.
11+
12+
::code-preview
13+
14+
:::split-panel{class="w-full"}
15+
#start
16+
::::div{class="h-16 bg-orange-50"}
17+
Panel A
18+
::::
19+
20+
#end
21+
::::div{class="h-16 bg-blue-50"}
22+
Panel B
23+
::::
24+
:::
25+
26+
#code
27+
```vue
28+
<script lang="ts" setup>
29+
import { SplitPanel } from '@directus/vue-split-panel';
30+
import '@directus/vue-split-panel/index.css';
31+
</script>
32+
33+
<template>
34+
<SplitPanel>
35+
<template #start>
36+
<div class="h-16 bg-orange-50">Panel A</div>
37+
</template>
38+
39+
<template #end>
40+
<div class="h-16 bg-blue-50">Panel A</div>
41+
</template>
42+
</SplitPanel>
43+
</template>
44+
```
45+
46+
::
47+
48+
## API Reference
49+
50+
### Model
51+
52+
::field-group
53+
::field{name="size" type="number"}
54+
The current size of the start panel.
55+
::
56+
::
57+
58+
### Props
59+
60+
::field-group
61+
::field{name="orientation" type="'horizontal' | 'vertical'"}
62+
Set the rendering orientation.
63+
Defaults to `'horizontal'`
64+
::
65+
66+
::field{name="direction" type="'ltr' | 'rtl'"}
67+
Sets the panels text direction.
68+
Defaults to `'ltr'`
69+
::
70+
71+
::field{name="primary" type="'start' | 'end'"}
72+
If no primary panel is designated, both panels will resize equally.
73+
::
74+
75+
::field{name="dividerHitArea" type="string"}
76+
A CSS size to define the hitbox area around the divider slot.
77+
Defaults to `'12px'`
78+
::
79+
80+
::field{name="sizeUnit" type="'%' | 'px'"}
81+
Whether `size`, `minSize`, `maxSize`, and `collapseThreshold` are configured in percentages (0-100) or pixel values.
82+
Defaults to `'%'`
83+
::
84+
85+
::field{name="disabled" type="boolean"}
86+
Disable the manual resizing/collapsing of the panels.
87+
Defaults to `false`
88+
::
89+
90+
::field{name="minSize" type="number"}
91+
Minimum allowed size of the primary panel. Requires `primary` to be set.
92+
Defaults to `false`
93+
::
94+
95+
::field{name="maxSize" type="number"}
96+
Maximum allowed size of the primary panel. Requires `primary` to be set.
97+
Defaults to `false`
98+
::
99+
100+
::field{name="collapsible" type="boolean"}
101+
Whether to allow the primary panel to be collapsed on enter key on divider or when the collapse threshold is met.
102+
Defaults to `false`
103+
::
104+
105+
::field{name="collapseThreshold" type="number"}
106+
How far to drag beyond the minSize to collapse/expand the primary panel.
107+
::
108+
::
109+

‎docs/content/index.md‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -67,15 +67,3 @@ A split panel component based on Reka-UI and Web Awesome Split Panel
6767
::::
6868
:::
6969
::
70-
71-
::u-page-section
72-
::client-only
73-
::split-panel
74-
#start
75-
Panel A
76-
77-
#end
78-
Panel B
79-
::
80-
::
81-
::

‎docs/modules/register-components.ts‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎docs/nuxt.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@ import { defineNuxtConfig } from 'nuxt/config';
33
export default defineNuxtConfig({
44
extends: ['docus'],
55
modules: [],
6-
css: [],
6+
css: ['@directus/vue-split-panel/index.css'],
77
compatibilityDate: '2025-07-18',
88
});

‎docs/plugins/split-panel.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { defineNuxtPlugin } from "nuxt/app";
2+
import { SplitPanel } from '@directus/vue-split-panel';
3+
4+
export default defineNuxtPlugin((nuxtApp) => {
5+
nuxtApp.vueApp.component('SplitPanel', SplitPanel);
6+
});

‎packages/vue-split-panel/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@
2323
".": {
2424
"import": "./dist/index.js"
2525
},
26-
"./package.json": "./package.json"
26+
"./package.json": "./package.json",
27+
"./index.css": "./dist/index.css"
2728
},
2829
"module": "./dist/index.js",
2930
"types": "./dist/index.d.ts",
@@ -43,7 +44,7 @@
4344
"lint:fix": "pnpm run lint --fix"
4445
},
4546
"peerDependencies": {
46-
"vue": ">= 3.2.0"
47+
"vue": "^3.0.0"
4748
},
4849
"dependencies": {
4950
"@vueuse/core": "13.6.0",

packages/vue-split-panel/src/tsconfig.json renamed to packages/vue-split-panel/tsconfig.json

File renamed without changes.

‎packages/vue-split-panel/tsdown.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { defineConfig } from 'tsdown';
33
export default defineConfig([
44
{
55
entry: ['./src/index.ts'],
6-
platform: 'neutral',
6+
platform: 'browser',
77
fromVite: true,
88
dts: {
99
vue: true,

‎pnpm-lock.yaml‎

Lines changed: 62 additions & 62 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)