@vuecs/forms 5.2.0 → 5.2.2
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/index.mjs +3 -3
- package/dist/index.mjs.map +1 -1
- package/dist/style.css +2 -0
- package/dist/vue.d.ts +1 -1
- package/dist/vue.d.ts.map +1 -1
- package/package.json +5 -5
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/index.mjs
CHANGED
|
@@ -1230,7 +1230,7 @@ var FormSelectSearch_vue_vue_type_script_lang_default = defineComponent({
|
|
|
1230
1230
|
currentIndex.value = -1;
|
|
1231
1231
|
setItemsDisplayed();
|
|
1232
1232
|
});
|
|
1233
|
-
useInfiniteScroll(listElement, () => {
|
|
1233
|
+
useInfiniteScroll(() => listElement.value, () => {
|
|
1234
1234
|
showMoreItemsDisplayed();
|
|
1235
1235
|
}, { canLoadMore() {
|
|
1236
1236
|
return itemsDisplayed.value.length < items.value.length;
|
|
@@ -1280,9 +1280,9 @@ var FormSelectSearch_vue_vue_type_script_lang_default = defineComponent({
|
|
|
1280
1280
|
if (!isMulti.value && selected.value.length === 1) q.value = selected.value[0].label;
|
|
1281
1281
|
isDisplayed.value = false;
|
|
1282
1282
|
};
|
|
1283
|
-
onClickOutside(listElement, () => {
|
|
1283
|
+
onClickOutside(() => listElement.value, () => {
|
|
1284
1284
|
hide();
|
|
1285
|
-
}, { ignore: [inputElement] });
|
|
1285
|
+
}, { ignore: () => [inputElement.value] });
|
|
1286
1286
|
const onFocus = () => {
|
|
1287
1287
|
q.value = "";
|
|
1288
1288
|
display();
|