@dynamicforms/vue-forms 0.3.5 → 0.4.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
CHANGED
|
@@ -137,6 +137,57 @@ const validatedForm = new Group({
|
|
|
137
137
|
});
|
|
138
138
|
```
|
|
139
139
|
|
|
140
|
+
## Messages Widget Component
|
|
141
|
+
|
|
142
|
+
The library includes a `messages-widget` Vue component for displaying validation errors and messages:
|
|
143
|
+
|
|
144
|
+
```vue
|
|
145
|
+
<template>
|
|
146
|
+
<!-- Simple string message -->
|
|
147
|
+
<messages-widget
|
|
148
|
+
message="This is an error message"
|
|
149
|
+
classes="text-error"
|
|
150
|
+
/>
|
|
151
|
+
|
|
152
|
+
<!-- Display field validation errors -->
|
|
153
|
+
<messages-widget
|
|
154
|
+
v-if="field.errors && field.errors.length > 0"
|
|
155
|
+
:message="field.errors"
|
|
156
|
+
:classes="['text-error', 'mt-2']"
|
|
157
|
+
/>
|
|
158
|
+
</template>
|
|
159
|
+
|
|
160
|
+
<script setup>
|
|
161
|
+
import MessagesWidget from '@dynamicforms/vue-forms/components/messages-widget.vue';
|
|
162
|
+
import { Field, Validators, ValidationErrorRenderContent, MdString } from '@dynamicforms/vue-forms';
|
|
163
|
+
|
|
164
|
+
// Example field with validation
|
|
165
|
+
const emailField = Field.create({
|
|
166
|
+
value: '',
|
|
167
|
+
validators: [
|
|
168
|
+
new Validators.Pattern(
|
|
169
|
+
/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
|
|
170
|
+
'Please enter a valid email address'
|
|
171
|
+
)
|
|
172
|
+
]
|
|
173
|
+
});
|
|
174
|
+
|
|
175
|
+
// Markdown message support (requires VueMarkdown component)
|
|
176
|
+
const markdownErrors = [
|
|
177
|
+
new ValidationErrorRenderContent(
|
|
178
|
+
new MdString('**Error**: This field contains *invalid* data.')
|
|
179
|
+
)
|
|
180
|
+
];
|
|
181
|
+
</script>
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
The messages widget supports:
|
|
185
|
+
- **String messages**: Simple text messages
|
|
186
|
+
- **ValidationError arrays**: Rich error objects with styling and components
|
|
187
|
+
- **Markdown content**: Rich text formatting (requires VueMarkdown component)
|
|
188
|
+
- **Custom components**: Render any Vue component as an error message
|
|
189
|
+
- **Flexible styling**: Multiple ways to apply CSS classes
|
|
190
|
+
|
|
140
191
|
## Conditional Form Behavior
|
|
141
192
|
|
|
142
193
|
Create dynamic forms with conditional logic using Statements and Operators:
|