@modelforms/fontawesome-vuetify 3.4.2 → 3.5.0

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.
Files changed (2) hide show
  1. package/README.md +33 -32
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,39 +1,8 @@
1
1
  @modelforms/fontawesome-vuetify is a focused Vue library that
2
2
  modelforms-fontawesome-vuetify is a focused Vue library that brings Font Awesome icons into Vuetify-powered model forms with minimal fuss. It streamlines the process of decorating form fields with meaningful icons so forms feel polished and intuitive. Developers can rapidly prototype UIs by dropping in ready-made wrappers that handle both icon placement and Vuetify styling. Because it's built for the reactive Vue ecosystem, icons update predictably as form state changes. Customization is straightforward: swap icons, tweak sizes, or apply Vuetify themes without touching core logic. Accessibility is considered through aria-friendly patterns and clear visual affordances that help users understand form intent. The library’s lightweight design keeps your bundle lean while delivering a big UX payoff. Concise examples and clear documentation make it easy for new users to get productive in minutes. Whether you’re building an admin dashboard or a public-facing signup flow, it elevates both form clarity and aesthetics. In short, modelforms-fontawesome-vuetify is a practical toolkit for anyone who wants to combine the expressive power of Font Awesome with Vuetify’s polished components to make forms that both look and feel professional.
3
3
 
4
- #First step create component
5
4
 
6
- ```ts
7
- <template>
8
- <FormComponent
9
- :form="form"
10
- @submit="submit($event)"/>
11
-
12
- </template>
13
-
14
- <script lang="ts">
15
- import { FormPlate } from '@modelforms/fontawesome-vuetify';
16
-
17
- export default {
18
-
19
- components: {
20
- FormComponent: FormPlate
21
- },
22
- data() {
23
- return {
24
- form: testForm
25
- }
26
- },
27
- methods:{
28
- submit(event){
29
- console.log(event);
30
- }
31
- }
32
- }
33
- </script>
34
- ```
35
-
36
- #Second step create sub model
5
+ 1. Create GridModel and DataModel
37
6
 
38
7
  ```ts
39
8
  import { GridModel } from '@modelforms/fontawesome-vuetify';
@@ -83,4 +52,36 @@ export const testForm: GridModel<UserModel> = {
83
52
  ]
84
53
  }]
85
54
  }
55
+ ```
56
+
57
+ 2. Import FormPlate
58
+
59
+ ```ts
60
+ <template>
61
+ <FormPlate
62
+ :form="form"
63
+ @submit="submit($event)"/>
64
+
65
+ </template>
66
+
67
+ <script lang="ts">
68
+ import { FormPlate } from '@modelforms/fontawesome-vuetify';
69
+
70
+ export default {
71
+
72
+ components: {
73
+ FormPlate: FormPlate
74
+ },
75
+ data() {
76
+ return {
77
+ form: testForm
78
+ }
79
+ },
80
+ methods:{
81
+ submit(event){
82
+ console.log(event);
83
+ }
84
+ }
85
+ }
86
+ </script>
86
87
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@modelforms/fontawesome-vuetify",
3
- "version": "3.4.2",
3
+ "version": "3.5.0",
4
4
  "main": "./components/index.ts",
5
5
  "type": "module",
6
6
  "exports": {