@dynamicforms/vuetify-inputs 0.7.12 → 0.8.0

package/dist/index.d.ts

@@ -20,7 +20,6 @@ import { FormatPart } from 'date-fns';
 import { FormatRelativeFn } from 'date-fns';
 import { GlobalComponents } from 'vue';
 import { GlobalDirectives } from 'vue';
-import { IField } from '@dynamicforms/vue-forms';
 import { IFieldConstructorParams } from '@dynamicforms/vue-forms';
 import { Locale } from 'date-fns';
 import { LocaleDayPeriod } from 'date-fns';
@@ -180,17 +179,28 @@ 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;
-    static closeAction(data?: Partial<IField<ActionBreakpointOptions>>): Action;
-    static yesAction(data?: Partial<IField<ActionBreakpointOptions>>): Action;
-    static noAction(data?: Partial<IField<ActionBreakpointOptions>>): Action;
+    /** @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<IFieldConstructorParams<ActionBreakpointOptions>>): Action;
+    static yesAction(data?: Partial<IFieldConstructorParams<ActionBreakpointOptions>>): Action;
+    static noAction(data?: Partial<IFieldConstructorParams<ActionBreakpointOptions>>): Action;
 }
 
 export declare type ActionBreakpointOptions = BreakpointsJSON<ActionRenderOptions>;
@@ -210,10 +220,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> {
@@ -222,7 +259,7 @@ export declare interface BaseEmits<T = any> {
 }
 
 export declare interface BaseProps<T = any> {
-    control?: default_2.IField<T>;
+    control?: default_2.FieldBase<T>;
     modelValue?: T;
     label?: string | Label | MdString;
     errors?: string[];
@@ -316,15 +353,6 @@ export declare const DateTimeLocaleConfig: {
     setDateTimeLocale(locale: Locale | Ref<Locale>): void;
 };
 
-declare const _default: DefineComponent<Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props> & Readonly<{}>, {
-errors: string | ValidationError[];
-message: string | ValidationError[];
-errorClasses: ClassTypes;
-messageClasses: ClassTypes;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
-export { _default as DFInputHint }
-export { _default as DfInputHint }
-
 export declare const defaultBaseProps: {
     enabled: undefined;
     clearable: boolean;
@@ -425,7 +453,7 @@ precision: number | null;
 step: number;
 min: number;
 max: number;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 export declare namespace DfInputComponentProps {
     export {
@@ -449,13 +477,20 @@ export declare namespace DfInputComponents {
         DfDateTime,
         DfFile,
         DfInput,
-        _default as DFInputHint,
+        DfInputHint,
         DfRtfEditor,
         DfSelect,
         DfTextArea
     }
 }
 
+export declare const DfInputHint: DefineComponent<Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props> & Readonly<{}>, {
+errors: string | ValidationError[];
+message: string | ValidationError[];
+errorClasses: ClassTypes;
+messageClasses: ClassTypes;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
 declare interface DfInputProps extends BaseProps {
     inputType?: 'text' | 'password' | 'email' | 'url' | 'number';
     precision?: number | null;
@@ -473,8 +508,8 @@ export declare const DfRtfEditor: DefineComponent<DfRtfEditorProps, {}, {}, {},
 "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 "onClick:clear"?: (() => any) | undefined;
 }>, {
-enabled: boolean;
 minHeight: string;
+enabled: boolean;
 clearable: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
 $editor: CreateComponentPublicInstanceWithMixins<Readonly<{
@@ -540,7 +575,7 @@ enabled: boolean;
 clearable: boolean;
 rows: number;
 maxRows: number;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 declare interface DfTextAreaProps extends BaseProps {
     rows?: number;
@@ -665,6 +700,11 @@ export declare function useInputBase<T = any>(props: BaseProps<T>, emit: BaseEmi
     errors: ComputedRef<default_2.ValidationError[]>;
     showErrors: ComputedRef<default_2.ValidationError[] | undefined>;
     visibility: ComputedRef<default_2.DisplayMode>;
+    isRendered: ComputedRef<boolean>;
+    visibilityClass: ComputedRef<    {
+    'd-none': boolean;
+    invisible: boolean;
+    }>;
     label: ComputedRef<Label>;
     touched: Ref<boolean, boolean>;
     density: FieldDensity;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dynamicforms/vuetify-inputs",
   "private": false,
-  "version": "0.7.12",
+  "version": "0.8.0",
   "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",
@@ -24,6 +24,7 @@
     "build": "vite build",
     "test": "vitest run --coverage",
     "lint": "eslint src --fix && vue-tsc --noEmit",
+    "lint:ci": "eslint src && vue-tsc --noEmit",
     "docs:dev": "npm run docs:dev -w docs",
     "docs:build": "npm run docs:build -w docs",
     "docs:preview": "npm run docs:preview -w docs"
@@ -51,7 +52,7 @@
   },
   "peerDependencies": {
     "@ckeditor/ckeditor5-vue": "^7.0.0",
-    "@dynamicforms/vue-forms": "^0.5.0",
+    "@dynamicforms/vue-forms": "^0.6.0",
     "@mdi/font": "^7.4.47",
     "ckeditor5": "^43.0.0",
     "date-fns": "^4.1.0",

package/readme.md

@@ -91,9 +91,9 @@ import { DfSelect, DfTextArea, DfFile } from '@dynamicforms/vuetify-inputs';
 
 // Create a form with fields
 const form = new Group({
-  country: Field.create({ value: null }),
-  description: Field.create({ value: '' }),
-  document: Field.create({ value: null })
+  country: new Field({ value: null }),
+  description: new Field({ value: '' }),
+  document: new Field({ value: null })
 });
 
 // Define options for the select field
@@ -132,6 +132,7 @@ Detailed documentation is available at [https://docs.velis.si/dynamicforms/vueti
 - **df-date-time**: A date and time selection component with configurable format and type.
 - **df-file**: A file upload component with progress indication
 - **df-input**: A general value input.
+- **df-input-hint**: Renders a field's or a group's errors, falling back to its hint text.
 - **df-rtf-editor**: A RTF editor input.
 - **df-select**: A selection component supporting static or dynamic options, multiple selection, and tagging
 - **df-text-area**: A textarea component with configurable rows and validation