@dynamicforms/vuetify-inputs 0.7.11 → 0.7.13

package/dist/index.d.ts

@@ -182,12 +182,24 @@ declare type __VLS_WithTemplateSlots_2<T, S> = T & {
 export declare class Action extends Action_2<ActionBreakpointOptions> {
     static create<T extends ActionBreakpointOptions = ActionBreakpointOptions>(params?: Partial<IFieldConstructorParams<T>>): Action;
     getBreakpointValue(breakpoint: Ref<BreakpointNames>): ComputedRef<ActionRenderOptions>;
+    /** @see ActionRenderOptions.name */
     get name(): string | undefined;
+    /** @see ActionRenderOptions.label */
     get label(): string | undefined;
+    /** @see ActionRenderOptions.showLabel */
     get showLabel(): boolean | undefined;
+    /** @see ActionRenderOptions.icon */
     get icon(): string | undefined;
+    /** @see ActionRenderOptions.showIcon */
     get showIcon(): boolean | undefined;
+    /** @see ActionRenderOptions.renderAs */
     get renderAs(): ActionDisplayStyle | undefined;
+    /** @see ActionRenderOptions.defaultConfirm */
+    get defaultConfirm(): boolean | undefined;
+    /** @see ActionRenderOptions.defaultReject */
+    get defaultReject(): boolean | undefined;
+    /** @see ActionRenderOptions.passthroughAttrs */
+    get passthroughAttrs(): Record<string, any> | undefined;
     static closeAction(data?: Partial<IField<ActionBreakpointOptions>>): Action;
     static yesAction(data?: Partial<IField<ActionBreakpointOptions>>): Action;
     static noAction(data?: Partial<IField<ActionBreakpointOptions>>): Action;
@@ -210,10 +222,37 @@ export declare namespace ActionDisplayStyle {
 }
 
 export declare interface ActionRenderOptions extends ActionValue {
+    /** Unique identifier for the action. Purely informational to `<df-actions>` itself - it is not used for
+     * rendering - but by convention should match the key under which the action is registered in a
+     * `FormActions` (`Record<string, Action>`) map passed to `@dynamicforms/vuetify-modal-form-kit`'s
+     * `modal.message()`/`modal.yesNo()`/etc. That map key (or the action's `fieldName`, when it's part of a
+     * `Form.Group`) - not this `name` field - is what the modal's promise actually resolves with; keeping them
+     * in sync is what lets callers do e.g. `if (await modal.yesNo(...) === 'yes')`. */
     name?: string;
+    /** How the action is rendered: {@link ActionDisplayStyle.BUTTON} for a tonal `<v-btn>`, or
+     * {@link ActionDisplayStyle.TEXT} for a text-variant `<v-btn>`. */
     renderAs?: ActionDisplayStyle;
+    /** Whether the label is shown. If `label` is empty, the label is never shown regardless of this flag. */
     showLabel?: boolean;
+    /** Whether the icon is shown. If `icon` is empty, the icon is never shown regardless of this flag. */
     showIcon?: boolean;
+    /** Marks this as the action to trigger on Enter when rendered inside `<df-modal>` (see that component's
+     * `onKeydown` in `@dynamicforms/vuetify-modal-form-kit`) - e.g. a "Save" or "Yes" action. In `<df-actions>` it
+     * also colors the button `primary`, unless overridden via `passthroughAttrs.color`. At most one action in a
+     * given set should set this. */
+    defaultConfirm?: boolean;
+    /** Marks this as the action to trigger on Escape when rendered inside `<df-modal>` (see that component's
+     * `onKeydown` in `@dynamicforms/vuetify-modal-form-kit`) - e.g. a "Cancel" or "No" action. In `<df-actions>` it
+     * also colors the button `secondary`, unless overridden via `passthroughAttrs.color`. At most one action in a
+     * given set should set this (an action such as `Action.closeAction()` may set both `defaultConfirm` and
+     * `defaultReject` so it fires on either key). */
+    defaultReject?: boolean;
+    /** Additional props/attrs forwarded verbatim to the rendered `<v-btn>` (e.g. `color`, `loading`, `density`,
+     * `rounded`, `block`, `prependIcon`, ...), taking precedence over `<df-actions>`'s own computed bindings
+     * (`variant`, `color`, `disabled`). Mirrors the `passthroughAttrs` convention used by `df-input`/`df-file`/etc
+     * (see `helpers/input-base.ts`); it has to live on the action's value here because `<df-actions>` renders a
+     * whole array of buttons, not just one. */
+    passthroughAttrs?: Record<string, any>;
 }
 
 export declare interface BaseEmits<T = any> {

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@dynamicforms/vuetify-inputs",
   "private": false,
-  "version": "0.7.11",
+  "version": "0.7.13",
   "type": "module",
-  "description": "Visual components for data entry using @dynamicforms/vue-forms",
+  "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.",
   "author": "Jure Erznožnik",
   "files": [
     "dist/*"
@@ -30,17 +30,25 @@
   },
   "keywords": [
     "vue",
+    "vuetify",
     "dynamicforms",
     "velis",
     "forms",
-    "data entry"
+    "inputs",
+    "components",
+    "data entry",
+    "typescript",
+    "material-design"
   ],
   "license": "MIT",
+  "homepage": "https://docs.velis.si/dynamicforms/vuetify-inputs",
   "repository": {
     "type": "git",
-    "url": "git@github.com:dynamicforms/vuetify-inputs.git"
+    "url": "git+https://github.com/dynamicforms/vuetify-inputs.git"
+  },
+  "bugs": {
+    "url": "https://github.com/dynamicforms/vuetify-inputs/issues"
   },
-  "issues": "https://github.com/dynamicforms/vuetify-inputs/issues",
   "peerDependencies": {
     "@ckeditor/ckeditor5-vue": "^7.0.0",
     "@dynamicforms/vue-forms": "^0.5.0",

package/readme.md

@@ -1,6 +1,6 @@
 # @dynamicforms/vuetify-inputs
 
-Visual components based on Vuetify library to support @dynamicforms/vue-forms.
+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).
 
 ## Introduction
 
@@ -8,6 +8,28 @@ Visual components based on Vuetify library to support @dynamicforms/vue-forms.
 visual implementation of logical concepts from
 [@dynamicforms/vue-forms](https://github.com/dynamicforms/vue-forms).
 
+## Design Goals
+
+The primary goal of this library is **visual consistency**: every input component should look and behave the same
+regardless of which component is used or where it appears in the application. This means that mixing `df-input`,
+`df-select`, `df-checkbox`, `df-date-time`, and others on the same form row should produce a coherent, aligned result
+without any per-component tweaking.
+
+To achieve this, the library introduces a **density/variant system** that applies uniformly to all components:
+
+- **Density** controls the vertical compactness of a component and can be set globally, injected per-section, or
+  overridden per-component. Supported values are `default`, `comfortable`, `compact`, and `inline`.
+- **Variant** controls the visual style (e.g. `outlined`, `underlined`, `filled`, `solo`, …) and follows the same
+  hierarchy.
+- The `inline` density is a custom extension beyond standard Vuetify — it strips labels and decorations so components
+  render cleanly inside table cells.
+
+Global defaults can be set once at application startup via `VuetifyInputsSettings` and propagated down through Vue's
+provide/inject, so the entire application can switch density or variant with a single change.
+
+The [density example](/docs/examples/density.md) in the documentation demonstrates all components rendered side-by-side across every density
+and variant combination to verify alignment and consistent appearance.
+
 ## Features
 
 - **DynamicForms Integration**: Seamlessly works with `@dynamicforms/vue-forms` for state management and validation
@@ -22,7 +44,7 @@ visual implementation of logical concepts from
 npm install @dynamicforms/vuetify-inputs
 ```
 
-In your main.py
+In your main.ts
 ```typescript
 import { DynamicFormsInputs } from '@dynamicforms/vuetify-inputs';
 import '@dynamicforms/vuetify-inputs/styles.css';
@@ -99,11 +121,7 @@ const fileComms = {
 
 ## Documentation
 
-Detailed documentation is available as a VitePress site in the `/docs` folder. To view the documentation locally:
-
-```bash
-npm run docs:dev
-```
+Detailed documentation is available at [https://docs.velis.si/dynamicforms/vuetify-inputs](https://docs.velis.si/dynamicforms/vuetify-inputs).
 
 ## Available Components
 
@@ -116,7 +134,7 @@ npm run docs:dev
 - **df-input**: A general value input.
 - **df-rtf-editor**: A RTF editor input.
 - **df-select**: A selection component supporting static or dynamic options, multiple selection, and tagging
-- **df-textarea**: A textarea component with configurable rows and validation
+- **df-text-area**: A textarea component with configurable rows and validation
 
 ## TypeScript Support