@dynamicforms/vuetify-inputs 0.8.1 → 0.9.1

package/dist/index.d.ts

@@ -179,15 +179,22 @@ declare type __VLS_WithTemplateSlots_2<T, S> = T & {
 };
 
 export declare class Action extends Action_2<ActionBreakpointOptions> {
+    /** @see getRenderOptionsForBreakpoint, which answers the same for the value of any `Action` */
     getBreakpointValue(breakpoint: Ref<BreakpointNames>): ComputedRef<ActionRenderOptions>;
     /** @see ActionRenderOptions.name */
     get name(): string | undefined;
-    /** @see ActionRenderOptions.label */
-    get label(): string | undefined;
+    /**
+     * The label as this action renders it: the text where {@link ActionRenderOptions.showLabel} states it is shown,
+     * and `undefined` where it is not. `label` is the base class's, and answers the text whatever the flag says.
+     */
+    get renderedLabel(): string | undefined;
     /** @see ActionRenderOptions.showLabel */
     get showLabel(): boolean | undefined;
-    /** @see ActionRenderOptions.icon */
-    get icon(): string | undefined;
+    /**
+     * The icon as this action renders it: the name where {@link ActionRenderOptions.showIcon} states it is shown,
+     * and `undefined` where it is not. `icon` is the base class's, and answers the name whatever the flag says.
+     */
+    get renderedIcon(): string | undefined;
     /** @see ActionRenderOptions.showIcon */
     get showIcon(): boolean | undefined;
     /** @see ActionRenderOptions.renderAs */
@@ -220,6 +227,12 @@ export declare namespace ActionDisplayStyle {
 }
 
 export declare interface ActionRenderOptions extends ActionValue {
+    /** The text of the action, rendered when {@link showLabel} is set and the text is not empty. `ActionValue`
+     * types this `unknown`, leaving what a label is to the rendering library; here it is a string. */
+    label?: string;
+    /** The icon of the action, a name `vue-cached-icon` resolves, rendered when {@link showIcon} is set and the
+     * name is not empty. Typed here for the same reason `label` is. */
+    icon?: string;
     /** 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
@@ -267,7 +280,7 @@ export declare interface BaseProps<T = any> {
     helpText?: string;
     hint?: string;
     enabled?: boolean;
-    visibility?: default_2.DisplayMode;
+    visibility?: default_2.DisplayMode | string;
     cssClass?: string;
     clearable?: boolean;
     passthroughAttrs?: Record<string, any>;
@@ -366,7 +379,9 @@ showAsGroup: "no" | "grouped" | "grouped-no-borders";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 declare interface DfActionsProps {
-    actions: MaybeRef<Action[]>;
+    /** The actions to draw, this library's `Action` or a bare `@dynamicforms/vue-forms` one: what each button
+     * renders as is read off the action's value, and a value stating nothing renders as the defaults. */
+    actions: MaybeRef<Action_2[]>;
     buttonSize?: string | number;
     showAsGroup?: ShowAsGroup;
 }
@@ -625,6 +640,17 @@ export declare type FileProgressCallback = (loaded: number, total: number) => vo
 
 export declare function getBreakpointName(dp: ReturnType<typeof useDisplay>): BreakpointNames;
 
+/**
+ * What one action renders as at `breakpoint`, read off the value of any `Action`. The members
+ * `ActionRenderOptions` adds over `ActionValue` are taken where the value carries them and defaulted where it does
+ * not, so an action holding nothing but a label - which is all a `@dynamicforms/vue-forms` `Action` declares -
+ * renders as a button showing that label.
+ *
+ * `label` and `icon` come back only where the matching flag says they are shown, and the flags come back false
+ * where there is no text or name to show, so a caller renders each member on its own flag and never on emptiness.
+ */
+export declare function getRenderOptionsForBreakpoint(value: ActionValue, breakpoint: BreakpointNames): ActionRenderOptions;
+
 export declare const InputBase: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
 
 export declare class Label {
@@ -714,7 +740,7 @@ export declare function useInputBase<T = any>(props: BaseProps<T>, emit: BaseEmi
     }>;
     label: ComputedRef<Label>;
     touched: Ref<boolean, boolean>;
-    density: FieldDensity;
+    density: ComputedRef<FieldDensity>;
     densityClass: ComputedRef<string>;
     vuetifyBindings: ComputedRef<    {
     name: string | undefined;
@@ -773,3 +799,27 @@ export declare interface VuetifyInputsSettings {
 export declare const vuetifyInputsSettingsKey: unique symbol;
 
 export { }
+
+
+/**
+ * The presentation an element carries for the components in this library.
+ *
+ * Every one of these is also a prop, and the prop wins where both state something: a call site is more specific
+ * than the element it renders. What the element carries is what a form declared in code says about itself, so a
+ * field that names its own label needs no attribute at the tag that draws it.
+ *
+ * `Extras` is @dynamicforms/vue-forms' augmentation point for exactly this, so these properties are typed on every
+ * element in an application that installs this library, the fields written inline in a `Group` declaration
+ * included.
+ */
+declare module '@dynamicforms/vue-forms' {
+    interface Extras {
+        label?: string | Label | MdString;
+        placeholder?: string;
+        helpText?: string;
+        hint?: string;
+        cssClass?: string;
+        density?: FieldDensity;
+        variant?: FieldVariant;
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dynamicforms/vuetify-inputs",
   "private": false,
-  "version": "0.8.1",
+  "version": "0.9.1",
   "type": "module",
   "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",
@@ -12,6 +12,7 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "require": "./dist/dynamicforms-vuetify-inputs.umd.cjs",
       "import": "./dist/dynamicforms-vuetify-inputs.js"
     },
@@ -42,6 +43,9 @@
     "material-design"
   ],
   "license": "MIT",
+  "engines": {
+    "node": ">=22"
+  },
   "homepage": "https://docs.velis.si/dynamicforms/vuetify-inputs",
   "repository": {
     "type": "git",
@@ -52,15 +56,15 @@
   },
   "peerDependencies": {
     "@ckeditor/ckeditor5-vue": "^7.0.0",
-    "@dynamicforms/vue-forms": "^0.6.0",
+    "@dynamicforms/vue-forms": "^0.17.0",
     "@mdi/font": "^7.4.47",
     "ckeditor5": "^43.0.0",
     "date-fns": "^4.1.0",
     "lodash-es": "^4.17.12",
-    "vue": "^3.4",
+    "vitepress-plugin-crosslinks": "^1.0.0",
+    "vue": "^3.5.2",
     "vue-cached-icon": "^3.0.3",
     "vue-markdown-render": "^2.2.1",
-    "vitepress-plugin-crosslinks": "^1.0.0",
     "vuetify": "^3.9"
   },
   "devDependencies": {
@@ -73,13 +77,13 @@
     "@vue/tsconfig": "^0.7.0",
     "eslint-config-velis": "^2.0.12",
     "jsdom": "^26.0.0",
+    "markdown-it-attrs": "^4.3.1",
     "rollup-plugin-visualizer": "^5.14.0",
     "typescript": "^5",
     "vite": "^7",
     "vite-plugin-dts": "^4",
     "vite-plugin-eslint": "^1.8.1",
     "vitest": "^3",
-    "vue-tsc": "^2",
-    "markdown-it-attrs": "^4.3.1"
+    "vue-tsc": "^2"
   }
 }

package/readme.md

@@ -4,9 +4,15 @@ Vuetify input components with guaranteed visual consistency across all form fiel
 
 ## Introduction
 
-`@dynamicforms/vuetify-inputs` provides input components for data entry that will be stored in form data. It is the 
-visual implementation of logical concepts from
-[@dynamicforms/vue-forms](https://github.com/dynamicforms/vue-forms).
+`@dynamicforms/vuetify-inputs` provides input components for data entry, built so that every one of them matches
+every other.
+
+Hand a component an element of [@dynamicforms/vue-forms](https://github.com/dynamicforms/vue-forms) and that element
+owns the value, the validation, the enabled state and the visibility, and the component draws what it holds. That is
+what the library was built for, and it is not what it requires: every component works just as well with a plain
+`v-model`, or with no binding at all. The visual consistency, the density and variant system and the inline mode for
+table cells are the same either way, so the components are worth reaching for whether or not you want a form model
+behind them.
 
 ## Design Goals
 
@@ -27,16 +33,44 @@ To achieve this, the library introduces a **density/variant system** that applie
 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
-- **Vuetify Based**: Built on top of Vuetify components for beautiful Material Design styling
-- **Reactive**: Full Vue reactivity support with both v-model and DynamicForms Field controls
-- **TypeScript Support**: Comprehensive type definitions for excellent developer experience
-- **Highly opinionated**: Opinionated to ensure uniform look throughout the application. 
+The [density example](https://docs.velis.si/dynamicforms/vuetify-inputs/examples/density.html) in the documentation
+demonstrates all components rendered side-by-side across every density and variant combination to verify alignment and
+consistent appearance.
+
+## What matters most
+
+- **Every field matches every other**: one shared base, so a row mixing a text field, a select, a checkbox and a
+  date picker comes out aligned with no per-component tweaking
+- **A density that fits a table cell**: `default`, `comfortable` and `compact` are Vuetify's; `inline` is this
+  library's own, and strips a field of its decoration until it fits inside a cell
+- **Set the look once, override anywhere**: density and variant are read from the prop, then the field, then a
+  `provide` from any ancestor, then the plugin defaults — most specific first
+- **The field carries its own presentation**: a `@dynamicforms/vue-forms` field holds the label, hint, placeholder,
+  css class, density and variant it is drawn with, so a form declared in code needs no presentation attributes on
+  the tags that draw it
+
+## Everything else it does
+
+- **Ten components**: `df-input`, `df-text-area`, `df-select`, `df-checkbox`, `df-color`, `df-date-time`, `df-file`,
+  `df-rtf-editor`, `df-actions` and `df-input-hint`
+- **A control, a v-model, or neither**: a bound element owns the value, validity, touched, enabled and visibility;
+  `v-model` reports changes to the parent; neither keeps the value internally
+- **Errors, hints and help text** in one row, rendered through vue-forms' `MessagesWidget`, so an error may be
+  plain text, markdown or a component of its own
+- **Labels with icons and markdown**, through the `Label` class and `MdString`
+- **Visibility through `DisplayMode`** — `FULL`, `HIDDEN`, `INVISIBLE`, `SUPPRESS` — and enablement that follows the
+  containing section
+- **`passthroughAttrs`**: any prop of the underlying Vuetify component, without this library declaring it
+- **Actions**: the `Action` class with render options, `defaultConfirm` / `defaultReject`, the ready-made
+  close/yes/no factories, and per-breakpoint render options from `xs` to `xl`
+- **Selection**: static choices or an async `fetchChoices`, single or multiple, chips with icons, free values with
+  `allowTags`
+- **Uploads**: a `FileComms` object with upload progress, delete and a periodic touch
+- **Rich text**: a configured CKEditor 5 inside the same field frame as every other input
+- **Localisable**: `translateStrings()` replaces the library's own strings, `setCkEditorLanguage()` sets the RTF
+  editor's interface language, and `DateTimeLocaleConfig` sets the date-fns locale dates are formatted and parsed
+  with
+- **TypeScript**: every component's props are an exported interface, and the definitions ship with the build
 
 ## Installation
 
@@ -126,6 +160,7 @@ Detailed documentation is available at [https://docs.velis.si/dynamicforms/vueti
 ## Available Components
 
 - **InputBase**: The base component for all input elements
+- **DfLabel**: Renders a label - plain text, markdown or an icon - the way every input renders its own
 - **df-actions**: An actions group.
 - **df-checkbox**: A checkbox component.
 - **df-color**: A color input.