@dynamicforms/vuetify-inputs 0.7.11 → 0.7.12
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/package.json +13 -5
- package/readme.md +26 -8
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dynamicforms/vuetify-inputs",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.7.
|
|
4
|
+
"version": "0.7.12",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"description": "
|
|
6
|
+
"description": "Vuetify input components with guaranteed visual consistency across all form fields — unified density/variant system, globally configurable, with inline mode for table cells. Built for @dynamicforms/vue-forms.",
|
|
7
7
|
"author": "Jure Erznožnik",
|
|
8
8
|
"files": [
|
|
9
9
|
"dist/*"
|
|
@@ -30,17 +30,25 @@
|
|
|
30
30
|
},
|
|
31
31
|
"keywords": [
|
|
32
32
|
"vue",
|
|
33
|
+
"vuetify",
|
|
33
34
|
"dynamicforms",
|
|
34
35
|
"velis",
|
|
35
36
|
"forms",
|
|
36
|
-
"
|
|
37
|
+
"inputs",
|
|
38
|
+
"components",
|
|
39
|
+
"data entry",
|
|
40
|
+
"typescript",
|
|
41
|
+
"material-design"
|
|
37
42
|
],
|
|
38
43
|
"license": "MIT",
|
|
44
|
+
"homepage": "https://docs.velis.si/dynamicforms/vuetify-inputs",
|
|
39
45
|
"repository": {
|
|
40
46
|
"type": "git",
|
|
41
|
-
"url": "git
|
|
47
|
+
"url": "git+https://github.com/dynamicforms/vuetify-inputs.git"
|
|
48
|
+
},
|
|
49
|
+
"bugs": {
|
|
50
|
+
"url": "https://github.com/dynamicforms/vuetify-inputs/issues"
|
|
42
51
|
},
|
|
43
|
-
"issues": "https://github.com/dynamicforms/vuetify-inputs/issues",
|
|
44
52
|
"peerDependencies": {
|
|
45
53
|
"@ckeditor/ckeditor5-vue": "^7.0.0",
|
|
46
54
|
"@dynamicforms/vue-forms": "^0.5.0",
|
package/readme.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @dynamicforms/vuetify-inputs
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Vuetify input components with guaranteed visual consistency across all form fields — unified density/variant system, globally configurable, with inline mode for table cells. Built for [@dynamicforms/vue-forms](https://github.com/dynamicforms/vue-forms).
|
|
4
4
|
|
|
5
5
|
## Introduction
|
|
6
6
|
|
|
@@ -8,6 +8,28 @@ Visual components based on Vuetify library to support @dynamicforms/vue-forms.
|
|
|
8
8
|
visual implementation of logical concepts from
|
|
9
9
|
[@dynamicforms/vue-forms](https://github.com/dynamicforms/vue-forms).
|
|
10
10
|
|
|
11
|
+
## Design Goals
|
|
12
|
+
|
|
13
|
+
The primary goal of this library is **visual consistency**: every input component should look and behave the same
|
|
14
|
+
regardless of which component is used or where it appears in the application. This means that mixing `df-input`,
|
|
15
|
+
`df-select`, `df-checkbox`, `df-date-time`, and others on the same form row should produce a coherent, aligned result
|
|
16
|
+
without any per-component tweaking.
|
|
17
|
+
|
|
18
|
+
To achieve this, the library introduces a **density/variant system** that applies uniformly to all components:
|
|
19
|
+
|
|
20
|
+
- **Density** controls the vertical compactness of a component and can be set globally, injected per-section, or
|
|
21
|
+
overridden per-component. Supported values are `default`, `comfortable`, `compact`, and `inline`.
|
|
22
|
+
- **Variant** controls the visual style (e.g. `outlined`, `underlined`, `filled`, `solo`, …) and follows the same
|
|
23
|
+
hierarchy.
|
|
24
|
+
- The `inline` density is a custom extension beyond standard Vuetify — it strips labels and decorations so components
|
|
25
|
+
render cleanly inside table cells.
|
|
26
|
+
|
|
27
|
+
Global defaults can be set once at application startup via `VuetifyInputsSettings` and propagated down through Vue's
|
|
28
|
+
provide/inject, so the entire application can switch density or variant with a single change.
|
|
29
|
+
|
|
30
|
+
The [density example](/docs/examples/density.md) in the documentation demonstrates all components rendered side-by-side across every density
|
|
31
|
+
and variant combination to verify alignment and consistent appearance.
|
|
32
|
+
|
|
11
33
|
## Features
|
|
12
34
|
|
|
13
35
|
- **DynamicForms Integration**: Seamlessly works with `@dynamicforms/vue-forms` for state management and validation
|
|
@@ -22,7 +44,7 @@ visual implementation of logical concepts from
|
|
|
22
44
|
npm install @dynamicforms/vuetify-inputs
|
|
23
45
|
```
|
|
24
46
|
|
|
25
|
-
In your main.
|
|
47
|
+
In your main.ts
|
|
26
48
|
```typescript
|
|
27
49
|
import { DynamicFormsInputs } from '@dynamicforms/vuetify-inputs';
|
|
28
50
|
import '@dynamicforms/vuetify-inputs/styles.css';
|
|
@@ -99,11 +121,7 @@ const fileComms = {
|
|
|
99
121
|
|
|
100
122
|
## Documentation
|
|
101
123
|
|
|
102
|
-
Detailed documentation is available
|
|
103
|
-
|
|
104
|
-
```bash
|
|
105
|
-
npm run docs:dev
|
|
106
|
-
```
|
|
124
|
+
Detailed documentation is available at [https://docs.velis.si/dynamicforms/vuetify-inputs](https://docs.velis.si/dynamicforms/vuetify-inputs).
|
|
107
125
|
|
|
108
126
|
## Available Components
|
|
109
127
|
|
|
@@ -116,7 +134,7 @@ npm run docs:dev
|
|
|
116
134
|
- **df-input**: A general value input.
|
|
117
135
|
- **df-rtf-editor**: A RTF editor input.
|
|
118
136
|
- **df-select**: A selection component supporting static or dynamic options, multiple selection, and tagging
|
|
119
|
-
- **df-
|
|
137
|
+
- **df-text-area**: A textarea component with configurable rows and validation
|
|
120
138
|
|
|
121
139
|
## TypeScript Support
|
|
122
140
|
|