Skip to content

Commit cd2243a

Browse files
author
Justin Kimbrell
committed
docs: added installation instructions to docs
1 parent 6d45c66 commit cd2243a

File tree

26 files changed

+612
-80
lines changed

26 files changed

+612
-80
lines changed

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2025 Justin Kimbrell
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
# Vue Interface
22

3-
This is a monorepo for the components of [Vue Interface](https://github.com/vue-interface). Components are organized in packages. The purpose of this monorepo is to provide a convenient and efficient way to develop and maintain UI components that are dependent on each other without relying on symlinks and other hacks that provide less than optimal development experiences. The goal is provide a collection of CLI tools so you can develop, version and publish for individual packages all from the root of the repo. The monorepo also utilizes [VitePress](https://vuejs.github.io/vitepress/v1/) for clean documentation.
3+
This is a monorepo for the components of [Vue Interface](https://github.com/vue-interface). Components are organized in packages. The purpose of this monorepo is to provide a convenient and efficient way to develop and maintain UI components that are dependent on each other without relying on symlinks and other hacks that provide less than optimal development experiences. The goal is provide a collection of CLI tools so you can develop, version and publish for individual packages all from the root of the repo. The monorepo also utilizes [VitePress](https://vuejs.github.io/vitepress/v1/) for clean documentation.
4+
5+
**[📚 Read the Documentation](https://vue-interface.github.io/)**
46

57
## Installation
68

@@ -70,4 +72,8 @@ This interactive command will:
7072
Fix styling error when input is disabled
7173
```
7274

73-
The Changesets CLI then generates a markdown file in the .changeset/ directory with a random name (e.g., cool-lions-dance.md).
75+
The Changesets CLI then generates a markdown file in the .changeset/ directory with a random name (e.g., cool-lions-dance.md).
76+
77+
## License
78+
79+
MIT License. See [LICENSE](https://github.com/vue-interface/vue-interface-new/blob/jsx/LICENSE) for more information.

‎docs/packages.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ All packages combine [Vue.js](https://vuejs.org/) and [TailwindCSS v4](https://t
1616
- [Form Control](/packages/form-control)
1717
- [Form Select](/packages/form-select)
1818
- [Form Switch](/packages/form-switch)
19+
- [useFormControl](/packages/form-control/docs/use-form-control)
1920
- [Input Field](/packages/input-field)
2021
- [Light Switch Field](/packages/light-switch-field)
2122
- [Modal](/packages/modal)
@@ -24,5 +25,6 @@ All packages combine [Vue.js](https://vuejs.org/) and [TailwindCSS v4](https://t
2425
- [Select Field](/packages/select-field)
2526
- [Slide Deck](/packages/slide-deck)
2627
- [Slide Panel](/packages/slide-panel)
28+
- [useSlidePanels](/packages/slide-panel/docs/use-slide-panels)
2729
- [Textarea Field](/packages/textarea-field)
2830
- [Tooltip](/packages/tooltip)

‎docs/public/logo.png‎

-345 KB
Binary file not shown.

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
{
22
"name": "vue-interface",
3-
"private": true,
43
"scripts": {
54
"build": "pnpm turbo run build --affected",
65
"dev": "turbo run dev",

‎packages/autogrow/docs/autogrow.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,22 @@ onMounted(() => {
2121

2222
The Autogrow directive automatically resizes a [textarea](/packages/textarea-field/docs/textarea-field) to fit its content. It eliminates the need for manual resizing and provides smooth UX for variable-length text inputs.
2323

24+
### Installation
25+
26+
::: code-group
27+
```bash [pnpm]
28+
pnpm i @vue-interface/autogrow
29+
```
30+
31+
```bash [yarn]
32+
yarn add @vue-interface/autogrow
33+
```
34+
35+
```bash [npm]
36+
npm i @vue-interface/autogrow
37+
```
38+
:::
39+
2440
## Basic Usage
2541

2642
<div class="mb-6">

‎packages/breadcrumb/docs/breadcrumb.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,22 @@ import '../demo.css'
1010

1111
The `breadcrumb` utility class provides a flexible and customizable breadcrumb component system with customizable color variants and sizes.
1212

13+
### Installation
14+
15+
::: code-group
16+
```bash [pnpm]
17+
pnpm i @vue-interface/breadcrumb
18+
```
19+
20+
```bash [yarn]
21+
yarn add @vue-interface/breadcrumb
22+
```
23+
24+
```bash [npm]
25+
npm i @vue-interface/breadcrumb
26+
```
27+
:::
28+
1329
## Basic Usage
1430

1531
To create a breadcrumb component, use the parent `breadcrumb` class and then add the `breadcrumb-link` class to the links in the breadcrumb. To remove the home icon, insert the `no-icon` class into the first link.

‎packages/btn-activity/docs/btn-activity.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,22 @@ onMounted(() => {
3636

3737
The `btn-activity` component provides an interactive button with built-in activity indicators for async operations. It extends the standard [button](/packages/btn/docs/btn) and [activity-indicator](/packages/activity-indicator/docs/activity-indicator) components to create these buttons.
3838

39+
### Installation
40+
41+
::: code-group
42+
```bash [pnpm]
43+
pnpm i @vue-interface/btn-activity
44+
```
45+
46+
```bash [yarn]
47+
yarn add @vue-interface/btn-activity
48+
```
49+
50+
```bash [npm]
51+
npm i @vue-interface/btn-activity
52+
```
53+
:::
54+
3955
## Basic Usage
4056

4157
<div class="mb-5 flex gap-2">

‎packages/btn-dropdown/docs/btn-dropdown.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,22 @@ function onToggle() {
2424

2525
The `btn-dropdown` component provides an interactive button paired with a dropdown menu. It extends the standard [button](/packages/btn/docs/btn), [button-group](/packages/btn/docs/btn-group), and [dropdown-menu](/packages/dropdown-menu/docs/dropdown-menu) components.
2626

27+
### Installation
28+
29+
::: code-group
30+
```bash [pnpm]
31+
pnpm i @vue-interface/btn-dropdown
32+
```
33+
34+
```bash [yarn]
35+
yarn add @vue-interface/btn-dropdown
36+
```
37+
38+
```bash [npm]
39+
npm i @vue-interface/btn-dropdown
40+
```
41+
:::
42+
2743
## Basic Usage
2844

2945
<ClientOnly>

‎packages/btn/docs/btn-group.md‎

Lines changed: 126 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,28 @@ The `btn-group` utility class provides a flexible and customizable button-group
1414
Button groups can be combined with [dropdown menus](/packages/dropdown-menu/docs/dropdown-menu) to create [dropdown buttons](/packages/btn-dropdown/docs/btn-dropdown).
1515
:::
1616

17+
### Installation
18+
19+
::: code-group
20+
```bash [pnpm]
21+
pnpm i @vue-interface/btn-group
22+
```
23+
24+
```bash [yarn]
25+
yarn add @vue-interface/btn-group
26+
```
27+
28+
```bash [npm]
29+
npm i @vue-interface/btn-group
30+
```
31+
:::
32+
33+
### Tailwind Setup
34+
35+
```css
36+
@import '@vue-interface/btn-group/index.css';
37+
```
38+
1739
## Basic Usage
1840

1941
<!-- #region basicUsage-->
@@ -47,55 +69,73 @@ Customize the size of a `btn-group` using a [predetermined size](#predetermined-
4769

4870
The size can be customized using predetermined size classes: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`. Use the syntax: `btn-group-[size]`.
4971

72+
<!-- #region sizing-->
5073
<div class="flex flex-col gap-2">
51-
<!-- #region sizing-->
52-
<div class="btn-group btn-group-xs">
53-
<button class="btn btn-secondary">Left</button>
54-
<button class="btn btn-secondary">Middle</button>
55-
<button class="btn btn-secondary">Right</button>
56-
</div>
57-
<div class="btn-group btn-group-sm">
58-
<button class="btn btn-secondary">Left</button>
59-
<button class="btn btn-secondary">Middle</button>
60-
<button class="btn btn-secondary">Right</button>
61-
</div>
62-
<div class="btn-group btn-group-md">
63-
<button class="btn btn-secondary">Left</button>
64-
<button class="btn btn-secondary">Middle</button>
65-
<button class="btn btn-secondary">Right</button>
66-
</div>
67-
<div class="btn-group btn-group-lg">
68-
<button class="btn btn-secondary">Left</button>
69-
<button class="btn btn-secondary">Middle</button>
70-
<button class="btn btn-secondary">Right</button>
71-
</div>
72-
<div class="btn-group btn-group-xl">
73-
<button class="btn btn-secondary">Left</button>
74-
<button class="btn btn-secondary">Middle</button>
75-
<button class="btn btn-secondary">Right</button>
76-
</div>
77-
<div class="btn-group btn-group-2xl">
78-
<button class="btn btn-secondary">Left</button>
79-
<button class="btn btn-secondary">Middle</button>
80-
<button class="btn btn-secondary">Right</button>
81-
</div>
82-
<div class="btn-group btn-group-3xl">
83-
<button class="btn btn-secondary">Left</button>
84-
<button class="btn btn-secondary">Middle</button>
85-
<button class="btn btn-secondary">Right</button>
86-
</div>
87-
<div class="btn-group btn-group-4xl">
88-
<button class="btn btn-secondary">Left</button>
89-
<button class="btn btn-secondary">Middle</button>
90-
<button class="btn btn-secondary">Right</button>
91-
</div>
92-
<div class="btn-group btn-group-5xl">
93-
<button class="btn btn-secondary">Left</button>
94-
<button class="btn btn-secondary">Middle</button>
95-
<button class="btn btn-secondary">Right</button>
96-
</div>
97-
<!-- #endregion sizing-->
74+
<div>
75+
<div class="btn-group btn-group-xs">
76+
<button class="btn btn-secondary">Left</button>
77+
<button class="btn btn-secondary">Middle</button>
78+
<button class="btn btn-secondary">Right</button>
79+
</div>
80+
</div>
81+
<div>
82+
<div class="btn-group btn-group-sm">
83+
<button class="btn btn-secondary">Left</button>
84+
<button class="btn btn-secondary">Middle</button>
85+
<button class="btn btn-secondary">Right</button>
86+
</div>
87+
</div>
88+
<div>
89+
<div class="btn-group btn-group-md">
90+
<button class="btn btn-secondary">Left</button>
91+
<button class="btn btn-secondary">Middle</button>
92+
<button class="btn btn-secondary">Right</button>
93+
</div>
94+
</div>
95+
<div>
96+
<div class="btn-group btn-group-lg">
97+
<button class="btn btn-secondary">Left</button>
98+
<button class="btn btn-secondary">Middle</button>
99+
<button class="btn btn-secondary">Right</button>
100+
</div>
101+
</div>
102+
<div>
103+
<div class="btn-group btn-group-xl">
104+
<button class="btn btn-secondary">Left</button>
105+
<button class="btn btn-secondary">Middle</button>
106+
<button class="btn btn-secondary">Right</button>
107+
</div>
108+
</div>
109+
<div>
110+
<div class="btn-group btn-group-2xl">
111+
<button class="btn btn-secondary">Left</button>
112+
<button class="btn btn-secondary">Middle</button>
113+
<button class="btn btn-secondary">Right</button>
114+
</div>
115+
</div>
116+
<div>
117+
<div class="btn-group btn-group-3xl">
118+
<button class="btn btn-secondary">Left</button>
119+
<button class="btn btn-secondary">Middle</button>
120+
<button class="btn btn-secondary">Right</button>
121+
</div>
122+
</div>
123+
<div>
124+
<div class="btn-group btn-group-4xl">
125+
<button class="btn btn-secondary">Left</button>
126+
<button class="btn btn-secondary">Middle</button>
127+
<button class="btn btn-secondary">Right</button>
128+
</div>
129+
</div>
130+
<div>
131+
<div class="btn-group btn-group-5xl">
132+
<button class="btn btn-secondary">Left</button>
133+
<button class="btn btn-secondary">Middle</button>
134+
<button class="btn btn-secondary">Right</button>
135+
</div>
136+
</div>
98137
</div>
138+
<!-- #endregion sizing-->
99139

100140
::: details Show Code
101141
<<< @/packages/btn/docs/btn-group.md#sizing{html}
@@ -105,25 +145,31 @@ The size can be customized using predetermined size classes: `xs`, `sm`, `md`, `
105145

106146
For more granular control over button sizes, use Tailwind's numeric sizing scale classes: `btn-group-1` - `btn-group-96`.
107147

148+
<!-- #region tailwindSizes-->
108149
<div class="flex flex-col gap-2">
109-
<!-- #region tailwindSizes-->
110-
<div class="btn-group btn-group-3">
111-
<button class="btn btn-secondary">btn-group-3</button>
112-
<button class="btn btn-secondary">btn-group-3</button>
113-
<button class="btn btn-secondary">btn-group-3</button>
114-
</div>
115-
<div class="btn-group btn-group-4">
116-
<button class="btn btn-secondary">btn-group-4</button>
117-
<button class="btn btn-secondary">btn-group-4</button>
118-
<button class="btn btn-secondary">btn-group-4</button>
119-
</div>
120-
<div class="btn-group btn-group-5">
121-
<button class="btn btn-secondary">btn-group-5</button>
122-
<button class="btn btn-secondary">btn-group-5</button>
123-
<button class="btn btn-secondary">btn-group-5</button>
124-
</div>
125-
<!-- #endregion tailwindSizes-->
150+
<div>
151+
<div class="btn-group btn-group-3">
152+
<button class="btn btn-secondary">btn-group-3</button>
153+
<button class="btn btn-secondary">btn-group-3</button>
154+
<button class="btn btn-secondary">btn-group-3</button>
155+
</div>
156+
</div>
157+
<div>
158+
<div class="btn-group btn-group-4">
159+
<button class="btn btn-secondary">btn-group-4</button>
160+
<button class="btn btn-secondary">btn-group-4</button>
161+
<button class="btn btn-secondary">btn-group-4</button>
162+
</div>
163+
</div>
164+
<div>
165+
<div class="btn-group btn-group-5">
166+
<button class="btn btn-secondary">btn-group-5</button>
167+
<button class="btn btn-secondary">btn-group-5</button>
168+
<button class="btn btn-secondary">btn-group-5</button>
169+
</div>
170+
</div>
126171
</div>
172+
<!-- #endregion tailwindSizes-->
127173

128174
::: details Show Code
129175
<<< @/packages/btn/docs/btn-group.md#tailwindSizes{html}
@@ -133,20 +179,24 @@ For more granular control over button sizes, use Tailwind's numeric sizing scale
133179

134180
For precise sizing, specify exact pixel values using the syntax `btn-group-[Npx]` or any other CSS length units (`rem`, `em`, `mm`, etc.).
135181

182+
<!-- #region arbitrarySizes-->
136183
<div class="flex flex-col gap-2">
137-
<!-- #region arbitrarySizes-->
138-
<div class="btn-group btn-group-[16px]">
139-
<button class="btn btn-secondary">btn-group-[16px]</button>
140-
<button class="btn btn-secondary">btn-group-[16px]</button>
141-
<button class="btn btn-secondary">btn-group-[16px]</button>
142-
</div>
143-
<div class="btn-group btn-group-[1.2rem]">
144-
<button class="btn btn-secondary">btn-group-[1.2rem]</button>
145-
<button class="btn btn-secondary">btn-group-[1.2rem]</button>
146-
<button class="btn btn-secondary">btn-group-[1.2rem]</button>
147-
</div>
148-
<!-- #endregion arbitrarySizes-->
184+
<div>
185+
<div class="btn-group btn-group-[16px]">
186+
<button class="btn btn-secondary">btn-group-[16px]</button>
187+
<button class="btn btn-secondary">btn-group-[16px]</button>
188+
<button class="btn btn-secondary">btn-group-[16px]</button>
189+
</div>
190+
</div>
191+
<div>
192+
<div class="btn-group btn-group-[1.2rem]">
193+
<button class="btn btn-secondary">btn-group-[1.2rem]</button>
194+
<button class="btn btn-secondary">btn-group-[1.2rem]</button>
195+
<button class="btn btn-secondary">btn-group-[1.2rem]</button>
196+
</div>
197+
</div>
149198
</div>
199+
<!-- #endregion arbitrarySizes-->
150200

151201
::: details Show Code
152202
<<< @/packages/btn/docs/btn-group.md#arbitrarySizes{html}

0 commit comments

Comments
 (0)