@vuecs/forms 5.2.0 → 5.2.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.
- package/README.md +51 -28
- package/dist/style.css +2 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,40 +1,63 @@
|
|
|
1
1
|
# @vuecs/forms
|
|
2
2
|
|
|
3
|
-
[
|
|
21
|
-
- [FormGroup + ValidationGroup](https://vuecs.dev/components/form-group)
|
|
22
|
-
- [Button + `useSubmitButton()`](https://vuecs.dev/components/button) — the previous `VCFormSubmit` is now `VCButton` driven by an experimental composable
|
|
3
|
+
[](https://www.npmjs.com/package/@vuecs/forms)
|
|
4
|
+
[](https://github.com/Tada5hi/vuecs/actions/workflows/main.yml)
|
|
5
|
+
[](./LICENSE)
|
|
6
|
+
|
|
7
|
+
**The complete form-input family of [vuecs](https://github.com/tada5hi/vuecs)** — accessible inputs on [Reka UI](https://reka-ui.com) primitives with a clean `v-model` contract, validation feedback, and a shared `FormOption` shape across every picker.
|
|
8
|
+
|
|
9
|
+
## ✨ What's inside
|
|
10
|
+
|
|
11
|
+
- ⌨️ **Text & numbers** — `<VCFormInput>`, `<VCFormTextarea>`, `<VCFormNumber>` (typed, with steppers), `<VCFormPin>` (PIN/OTP).
|
|
12
|
+
- ✅ **Toggles** — `<VCFormCheckbox>` (incl. `indeterminate`), `<VCFormCheckboxGroup>`, `<VCFormSwitch>`, `<VCFormRadio>` / `<VCFormRadioGroup>`.
|
|
13
|
+
- 📋 **Pickers** — `<VCFormSelect>`, `<VCFormSelectSearch>`, `<VCFormTags>`, all driven by the same `FormOption<T>` shape (`{ value, label, disabled?, icon?, … }`) + `FormOptionGroup<T>`.
|
|
14
|
+
- 🎚️ **`<VCFormSlider>`** — single value or range from one component; thumb count derives from the `v-model` shape.
|
|
15
|
+
- 🧪 **Validation feedback** — wrap any input in `<VCFormGroup>`: it renders label + messages and folds an `error` / `warning` severity onto the input's theme variant automatically, with zero per-input wiring.
|
|
16
|
+
- 🌐 **i18n-ready defaults** — placeholders, labels, and validation copy resolve through `@vuecs/core`'s behavioral-defaults pipeline (reactive `MaybeRef` values welcome).
|
|
17
|
+
- 🚀 **`useSubmitButton()`** *(experimental)* — a reactive bind-object for create/update submit buttons on `@vuecs/button`.
|
|
18
|
+
|
|
19
|
+
## 📦 Installation
|
|
23
20
|
|
|
24
21
|
```bash
|
|
25
22
|
npm install @vuecs/forms
|
|
26
23
|
```
|
|
27
24
|
|
|
28
|
-
##
|
|
25
|
+
## ⚡ Usage
|
|
26
|
+
|
|
27
|
+
```vue
|
|
28
|
+
<VCFormGroup label-content="Email" :validation-messages="errors.email">
|
|
29
|
+
<VCFormInput v-model="form.email" type="email" />
|
|
30
|
+
</VCFormGroup>
|
|
31
|
+
|
|
32
|
+
<VCFormSelect
|
|
33
|
+
v-model="form.role"
|
|
34
|
+
:options="[
|
|
35
|
+
{ value: 'admin', label: 'Administrator' },
|
|
36
|
+
{ value: 'user', label: 'User' },
|
|
37
|
+
]"
|
|
38
|
+
placeholder="-- Select a role --"
|
|
39
|
+
/>
|
|
40
|
+
|
|
41
|
+
<VCFormSlider v-model="priceRange" :min="0" :max="500" /> <!-- range: v-model is number[] -->
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## 📚 Documentation
|
|
45
|
+
|
|
46
|
+
One page per component on **[vuecs.dev](https://vuecs.dev/components/)**:
|
|
47
|
+
|
|
48
|
+
[Input](https://vuecs.dev/components/form-input) · [Textarea](https://vuecs.dev/components/form-textarea) · [Number](https://vuecs.dev/components/form-number) · [Pin](https://vuecs.dev/components/form-pin) · [Checkbox](https://vuecs.dev/components/form-checkbox) · [Switch](https://vuecs.dev/components/form-switch) · [Radio](https://vuecs.dev/components/form-radio) · [Select](https://vuecs.dev/components/form-select) · [SelectSearch](https://vuecs.dev/components/form-select-search) · [Slider](https://vuecs.dev/components/form-slider) · [Tags](https://vuecs.dev/components/form-tags)
|
|
49
|
+
|
|
50
|
+
Guide: [Validation feedback](https://vuecs.dev/guide/validation-feedback)
|
|
51
|
+
|
|
52
|
+
## 🔄 Migrating from `@vuecs/form-controls` (≤2.x)
|
|
29
53
|
|
|
30
|
-
`@vuecs/form-controls`
|
|
54
|
+
`@vuecs/form-controls` was renamed to **`@vuecs/forms`** in 3.0 — a clean break, no shim:
|
|
31
55
|
|
|
32
|
-
-
|
|
33
|
-
-
|
|
34
|
-
-
|
|
35
|
-
-
|
|
36
|
-
-
|
|
37
|
-
- **`vue-tsc --emitDeclarationOnly`** runs without `|| true` masking — types are validated.
|
|
56
|
+
- `VCFormInputCheckbox` split into `<VCFormCheckbox>` / `<VCFormCheckboxGroup>` / `<VCFormSwitch>` (distinct ARIA semantics).
|
|
57
|
+
- `VCFormRangeMultiSlider` replaced by `<VCFormSlider>` (one component, single + range).
|
|
58
|
+
- `FormSelectOption` (`{ id, value }`) replaced by `FormOption<T>` (`{ value, label, … }`); the `optionDefault*` triplet collapsed into one `placeholder` prop.
|
|
59
|
+
- New Reka-backed components: Radio, Pin, Number, Tags.
|
|
60
|
+
- `VCFormSubmit` decomposed into `<VCButton>` + `useSubmitButton()`.
|
|
38
61
|
|
|
39
62
|
## License
|
|
40
63
|
|
package/dist/style.css
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
.vc-form-checkbox-wrapper {
|
|
2
|
+
vertical-align: middle;
|
|
2
3
|
align-items: center;
|
|
3
4
|
gap: .5rem;
|
|
4
5
|
display: inline-flex;
|
|
@@ -20,6 +21,7 @@
|
|
|
20
21
|
border-radius: var(--vc-radius-sm, .125rem);
|
|
21
22
|
background-color: var(--vc-color-bg, #fff);
|
|
22
23
|
cursor: pointer;
|
|
24
|
+
vertical-align: middle;
|
|
23
25
|
flex-shrink: 0;
|
|
24
26
|
justify-content: center;
|
|
25
27
|
align-items: center;
|