@dynamicforms/vuetify-inputs 0.11.6 → 0.12.1

package/dist/index.d.ts

@@ -16,6 +16,7 @@ import { DefaultInputSlot } from 'vuetify/lib/components/VField/VField';
 import { DefineComponent } from 'vue';
 import { Editor } from '../node_modules/@tiptap/vue-3/dist';
 import { Era } from 'date-fns';
+import { FieldBase } from '@dynamicforms/vue-forms';
 import { FirstWeekContainsDate } from 'date-fns';
 import { FormatDistanceFn } from 'date-fns';
 import { FormatLongFn } from 'date-fns';
@@ -30,6 +31,7 @@ import { LocaleUnit } from 'date-fns';
 import { LocalizeFn } from 'date-fns';
 import { MatchFn } from 'date-fns';
 import { MaybeRef } from 'vue';
+import { MaybeRefOrGetter } from 'vue';
 import { MdString } from '@dynamicforms/vue-forms';
 import { Month } from 'date-fns';
 import { PublicProps } from 'vue';
@@ -217,18 +219,12 @@ export declare type ActionBreakpointOptions = BreakpointsJSON<ActionRenderOption
 export declare type ActionBreakpointRenderOptions = Omit<ActionRenderOptions, 'name' | 'defaultConfirm' | 'defaultReject'>;
 
 /**
- * DisplayMode enum provides an enumeration for supported ways of rendering a particular object in the DOM
+ * How an action is rendered: `'button'` as a tonal `<v-btn>`, `'text'` as a text-variant `<v-btn>`.
  */
-export declare enum ActionDisplayStyle {
-    BUTTON = 0,// action should render as a button
-    TEXT = 1
-}
+export declare type ActionDisplayStyle = 'button' | 'text';
 
-export declare namespace ActionDisplayStyle {
-    export function fromString(mode: string): ActionDisplayStyle;
-    export function fromAny(mode: any): ActionDisplayStyle;
-    export function isDefined(mode: number | string): boolean;
-}
+/** every display style */
+export declare const actionDisplayStyles: readonly 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`
@@ -244,8 +240,7 @@ export declare interface ActionRenderOptions extends ActionValue {
      * `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>`. */
+    /** How the action is rendered: `'button'` for a tonal `<v-btn>`, or `'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;
@@ -284,7 +279,7 @@ export declare interface BaseProps<T = any> {
     helpText?: string;
     hint?: string;
     enabled?: boolean;
-    visibility?: default_2.DisplayMode | string;
+    visibility?: default_2.Visibility;
     cssClass?: string;
     clearable?: boolean;
     passthroughAttrs?: Record<string, any>;
@@ -375,7 +370,8 @@ export declare const defaultBaseProps: {
     clearable: boolean;
 };
 
-export declare const defaultDisplayStyle = ActionDisplayStyle.BUTTON;
+/** What an action renders as where nothing states otherwise. */
+export declare const defaultDisplayStyle: ActionDisplayStyle;
 
 export declare const DfActions: DefineComponent<DfActionsProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<DfActionsProps> & Readonly<{}>, {
 buttonSize: VuetifyButtonSize;
@@ -657,8 +653,8 @@ export declare const dfInputComponentsByTag: {
     "update:modelValue": (value: string) => any;
     }, PublicProps, {
     minHeight: string;
-    modelValue: string;
     disabled: boolean;
+    modelValue: string;
     toolbarButtonSize: VuetifyButtonSize;
     fontFamily: string;
     }, false, {}, {}, GlobalComponents, GlobalDirectives, string, {
@@ -701,8 +697,8 @@ export declare const dfInputComponentsByTag: {
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     }>, {}, {}, {}, {}, {
     minHeight: string;
-    modelValue: string;
     disabled: boolean;
+    modelValue: string;
     toolbarButtonSize: VuetifyButtonSize;
     fontFamily: string;
     }> | null;
@@ -853,8 +849,8 @@ fontFamily?: string;
 "update:modelValue": (value: string) => any;
 }, PublicProps, {
 minHeight: string;
-modelValue: string;
 disabled: boolean;
+modelValue: string;
 toolbarButtonSize: VuetifyButtonSize;
 fontFamily: string;
 }, false, {}, {}, GlobalComponents, GlobalDirectives, string, {
@@ -897,8 +893,8 @@ fontFamily?: string;
 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, {
 minHeight: string;
-modelValue: string;
 disabled: boolean;
+modelValue: string;
 toolbarButtonSize: VuetifyButtonSize;
 fontFamily: string;
 }> | null;
@@ -1029,6 +1025,9 @@ export declare function getRenderOptionsForBreakpoint(value: ActionValue, breakp
 
 export declare const InputBase: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
 
+/** Answers whether `value` is one of the display styles. */
+export declare function isActionDisplayStyle(value: unknown): value is ActionDisplayStyle;
+
 export declare class Label {
     text: string;
     icon?: string | undefined;
@@ -1063,6 +1062,18 @@ export declare interface SelectChoice {
 
 export declare type SelectFetchChoices<T1 = any, T2 = any> = (queryValue?: T1, idValue?: T2) => Promise<SelectChoice[]>;
 
+/**
+ * The errors of `errors` a component shows now. `errors` and `valid` state the verdict, which a submit needs at
+ * once; what the user is shown waits for the user, because a form covered in errors before anything was typed tells
+ * the user nothing they can act on.
+ *
+ * By default an error is shown where `control` is sent at all - its `effectiveAccess` is not `'disabled'` - and
+ * either its `origin` is `'server'`, since the server answered something the user did, or the element is `touched`.
+ * Without a control, `touched` is the component's own. The `shownErrors` setting replaces the rule with a condition
+ * of the application's own, asked for each error with the default answer.
+ */
+export declare function selectShownErrors(errors: readonly ValidationError[], control: FieldBase | undefined, touched: boolean, settings: VuetifyInputsSettings): ValidationError[];
+
 /**
  * Reports a {@link FileGoneError}'s message on `control`, where one is bound. Kept outside the component's own
  * script so the write to `control.errors` isn't seen as a `.vue` component mutating its own prop — the write
@@ -1220,8 +1231,8 @@ export declare function useInputBase<T = any>(props: BaseProps<T>, emit: BaseEmi
     valid: ComputedRef<boolean>;
     enabled: ComputedRef<boolean>;
     errors: ComputedRef<default_2.ValidationError[]>;
-    showErrors: ComputedRef<default_2.ValidationError[] | undefined>;
-    visibility: ComputedRef<default_2.DisplayMode>;
+    shownErrors: ComputedRef<default_2.ValidationError[]>;
+    visibility: ComputedRef<default_2.Visibility>;
     isRendered: ComputedRef<boolean>;
     visibilityClass: ComputedRef<    {
     'd-none': boolean;
@@ -1249,6 +1260,13 @@ export declare function useInputBase<T = any>(props: BaseProps<T>, emit: BaseEmi
     }>;
 };
 
+/**
+ * The errors of `element` to show now, by the rule `selectShownErrors` states and the `shownErrors` setting the
+ * application provided. It is what a template rendering errors of its own - a group's, say - binds, so that they
+ * appear when the inputs' errors do. Call it in a component's setup, where the settings are injected.
+ */
+export declare function useShownErrors(element: MaybeRefOrGetter<FieldBase | undefined>): ComputedRef<ValidationError[]>;
+
 /** Vuetify's own `size` prop (`v-btn`, `v-icon`, ...) also accepts an arbitrary CSS length or number, so this
  *  keeps that but still offers the named sizes for autocomplete: `(string & {})` is a plain `string` to the type
  *  checker (any string is still assignable) but not to a union with string literals, which is what makes an IDE
@@ -1292,6 +1310,13 @@ export declare interface VuetifyInputsSettings {
     /** Milliseconds between `<df-file>`/`<df-image>` keep-alive touches; overridable per field by their
      *  `touchInterval` prop. Defaults to 60000 when neither is set. */
     defaultTouchInterval?: number;
+    /**
+     * The condition that decides whether an error is shown, asked for each error a component would show, with the
+     * answer the default rule gives (see `useShownErrors`); its answer stands. `control` is the element the component
+     * is bound to, absent where the errors come from the `errors` prop. It runs while the errors are rendered, so it
+     * is synchronous and changes nothing.
+     */
+    shownErrors?: (error: ValidationError, control: FieldBase | undefined, shownByDefault: boolean) => boolean;
 }
 
 export declare const vuetifyInputsSettingsKey: unique symbol;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dynamicforms/vuetify-inputs",
   "private": false,
-  "version": "0.11.6",
+  "version": "0.12.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",
@@ -57,7 +57,7 @@
   },
   "peerDependencies": {
     "@dynamicforms/translatable": "^0.1.0",
-    "@dynamicforms/vue-forms": "^1.0.0",
+    "@dynamicforms/vue-forms": "^2.0.2",
     "@mdi/font": "^7.4.47",
     "@tiptap/core": "^3.30.2",
     "@tiptap/extension-image": "^3.30.2",

package/readme.md

@@ -56,9 +56,10 @@ consistent appearance.
 - **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
+  plain text, markdown or a component of its own; an error is shown by one rule an application can replace — the
+  server's at once, every other once the field is touched
 - **Labels with icons and markdown**, through the `Label` class and `MdString`
-- **Visibility through `DisplayMode`** — `FULL`, `HIDDEN`, `INVISIBLE`, `SUPPRESS` — and enablement that follows the
+- **Visibility** — `'full'`, `'invisible'`, `'hidden'`, `'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