@dynamicforms/vuetify-inputs 0.12.1 → 0.13.0

package/dist/index.d.ts

@@ -2,8 +2,6 @@ import { Action as Action_2 } from '@dynamicforms/vue-forms';
 import { ActionValue } from '@dynamicforms/vue-forms';
 import { AllowedComponentProps } from 'vue';
 import { App } from 'vue';
-import { ClassTypes } from '@dynamicforms/vue-forms';
-import { ClassValue } from '../../node_modules/vuetify/lib/composables/component';
 import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsBase } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
@@ -12,10 +10,9 @@ import { ComputedRef } from 'vue';
 import { CreateComponentPublicInstanceWithMixins } from 'vue';
 import { Day } from 'date-fns';
 import { default as default_2 } from '@dynamicforms/vue-forms';
-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 { ErrorDescription } from '@dynamicforms/vue-forms';
 import { FieldBase } from '@dynamicforms/vue-forms';
 import { FirstWeekContainsDate } from 'date-fns';
 import { FormatDistanceFn } from 'date-fns';
@@ -32,16 +29,19 @@ 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';
 import { Quarter } from 'date-fns';
 import { Ref } from 'vue';
-import { TranslateStringsCallback } from '@dynamicforms/translatable';
+import { TranslateFunction } from '@dynamicforms/translatable';
 import { useDisplay } from 'vuetify';
 import { ValidationError } from '@dynamicforms/vue-forms';
 import { VAutocomplete } from 'vuetify/components/VAutocomplete';
 import { VBtn } from 'vuetify/components/VBtn';
+import { VBtnGroup } from 'vuetify/components/VBtnGroup';
+import { VBtnToggle } from 'vuetify/components/VBtnToggle';
+import { VCard } from 'vuetify/components/VCard';
+import { VCardActions } from 'vuetify/components/VCard';
 import { VCheckbox } from 'vuetify/components/VCheckbox';
 import { VChip } from 'vuetify/components/VChip';
 import { VCol } from 'vuetify/components/VGrid';
@@ -49,12 +49,15 @@ import { VColorPicker } from 'vuetify/components/VColorPicker';
 import { VCombobox } from 'vuetify/components/VCombobox';
 import { VConfirmEdit } from 'vuetify/components/VConfirmEdit';
 import { VDatePicker } from 'vuetify/components/VDatePicker';
+import { VDivider } from 'vuetify/components/VDivider';
 import { VField } from 'vuetify/components/VField';
 import { VFileInput } from 'vuetify/components/VFileInput';
 import { VIcon } from 'vuetify/components/VIcon';
 import { VImg } from 'vuetify/components/VImg';
 import { VInput } from 'vuetify/components/VInput';
+import { VList } from 'vuetify/components/VList';
 import { VListItem } from 'vuetify/components/VList';
+import { VListItemTitle } from 'vuetify/components/VList';
 import { VMenu } from 'vuetify/components/VMenu';
 import { VNodeProps } from 'vue';
 import { VNumberInput } from 'vuetify/components/VNumberInput';
@@ -88,13 +91,13 @@ dfSelectRef: unknown;
 }, any>;
 
 declare const __VLS_component_2: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-blur: () => any;
 "update:modelValue": (value: any) => any;
 "click:clear": () => any;
+blur: () => any;
 }, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
-onBlur?: (() => any) | undefined;
 "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 "onClick:clear"?: (() => any) | undefined;
+onBlur?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 declare type __VLS_Props = BaseProps & {
@@ -118,44 +121,16 @@ declare function __VLS_template(): {
 
 declare function __VLS_template_2(): {
     attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            props: Record<string, unknown> & {
-                class?: ClassValue;
-            };
-            isActive: Ref<boolean>;
-            isFocused: Ref<boolean>;
-            iconColor: ComputedRef<string | undefined>;
-            controlRef: Ref<HTMLElement | undefined>;
-            focus: () => void;
-            blur: () => void;
-        }): any;
-        loader?(_: {
-            color: string | undefined;
-            isActive: boolean;
-        }): any;
-        'prepend-inner'?(_: {
-            isActive: Ref<boolean>;
-            isFocused: Ref<boolean>;
-            iconColor: ComputedRef<string | undefined>;
-            controlRef: Ref<HTMLElement | undefined>;
-            focus: () => void;
-            blur: () => void;
-        }): any;
-        prepend?(_: {
-            id: ComputedRef<string>;
-            messagesId: ComputedRef<string | undefined>;
-            isDirty: ComputedRef<boolean>;
-            isDisabled: ComputedRef<boolean>;
-            isReadonly: ComputedRef<boolean>;
-            isPristine: Ref<boolean>;
-            isValid: ComputedRef<boolean | null>;
-            isValidating: Ref<boolean>;
-            hasDetails: Ref<boolean>;
-            reset: () => void;
-            resetValidation: () => void;
-            validate: () => void;
-        }): any;
+    slots: Readonly<{
+        default?(props: InputBaseSlotProps): any;
+        'prepend-inner'?(props: Omit<InputBaseSlotProps, "props">): any;
+        loader?(props: Record<string, unknown>): any;
+        prepend?(props: Record<string, unknown>): any;
+    }> & {
+        default?(props: InputBaseSlotProps): any;
+        'prepend-inner'?(props: Omit<InputBaseSlotProps, "props">): any;
+        loader?(props: Record<string, unknown>): any;
+        prepend?(props: Record<string, unknown>): any;
     };
     refs: {};
     rootEl: any;
@@ -179,7 +154,10 @@ 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>;
+    getBreakpointValue(breakpoint: Ref<BreakpointNames>): ComputedRef<ResolvedActionRenderOptions>;
+    /** The label read: where the value holds a ref or a function, the string it gives now. */
+    get label(): string | undefined;
+    set label(newValue: ActionBreakpointOptions['label']);
     /** @see ActionRenderOptions.name */
     get name(): string | undefined;
     /**
@@ -198,10 +176,6 @@ export declare class Action extends Action_2<ActionBreakpointOptions> {
     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<IFieldConstructorParams<ActionBreakpointOptions>>): Action;
@@ -228,8 +202,10 @@ 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`
-     * types this `unknown`, leaving what a label is to the rendering library; here it is a string. */
-    label?: string;
+     * types this `unknown`, leaving what a label is to the rendering library; here it is a string, a ref to one or a
+     * function returning one. A ref or a function is read while the action renders, so a label that follows the
+     * locale is `() => t('Save')`. */
+    label?: MaybeRefOrGetter<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;
@@ -273,8 +249,8 @@ export declare interface BaseEmits<T = any> {
 export declare interface BaseProps<T = any> {
     control?: default_2.FieldBase<T>;
     modelValue?: T;
-    label?: string | Label | MdString;
-    errors?: string[];
+    label?: RenderContentNonCallable | Label;
+    errors?: ErrorInput[];
     placeholder?: string;
     helpText?: string;
     hint?: string;
@@ -296,6 +272,10 @@ export declare type BreakpointNames = (typeof responsiveBreakpoints)[number];
  */
 export declare type BreakpointsJSON<T extends Record<string, any>, B extends Record<string, any> = T> = T & Partial<Record<BreakpointNames, B>>;
 
+export declare type ClassType = string | string[] | Record<string, boolean>;
+
+export declare type ClassTypes = ClassType | ClassType[];
+
 export declare const DateTimeLocaleConfig: {
     dateTimeLocale: Ref<{
         code: string;
@@ -373,6 +353,72 @@ export declare const defaultBaseProps: {
 /** What an action renders as where nothing states otherwise. */
 export declare const defaultDisplayStyle: ActionDisplayStyle;
 
+declare const defaults: {
+    Yes: string;
+    No: string;
+    Close: string;
+    Cancel: string;
+    Ok: string;
+    Paragraph: string;
+    Heading1: string;
+    Heading2: string;
+    Heading3: string;
+    Heading4: string;
+    Heading5: string;
+    Heading6: string;
+    Downloadable: string;
+    ArticleCategory: string;
+    Title: string;
+    Subtitle: string;
+    InfoBox: string;
+    SideQuote: string;
+    Marker: string;
+    Spoiler: string;
+    CodeDark: string;
+    CodeBright: string;
+    Undo: string;
+    Redo: string;
+    SelectAll: string;
+    Bold: string;
+    Italic: string;
+    HorizontalLine: string;
+    Blockquote: string;
+    BulletedList: string;
+    NumberedList: string;
+    Outdent: string;
+    Indent: string;
+    AlignLeft: string;
+    AlignCenter: string;
+    AlignRight: string;
+    AlignJustify: string;
+    Link: string;
+    LinkUrl: string;
+    LinkApply: string;
+    LinkRemove: string;
+    Image: string;
+    ImageUrl: string;
+    ImageUpload: string;
+    ImageInsert: string;
+    ImageDropHint: string;
+    ImageReplace: string;
+    ImageDownload: string;
+    FileDownload: string;
+    Table: string;
+    TableInsert: string;
+    TableAddRowAbove: string;
+    TableAddRowBelow: string;
+    TableDeleteRow: string;
+    TableAddColumnBefore: string;
+    TableAddColumnAfter: string;
+    TableDeleteColumn: string;
+    TableToggleHeaderRow: string;
+    TableDeleteTable: string;
+    Style: string;
+    MediaEmbed: string;
+    MediaEmbedUrl: string;
+    MediaEmbedInsert: string;
+};
+
 export declare const DfActions: DefineComponent<DfActionsProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<DfActionsProps> & Readonly<{}>, {
 buttonSize: VuetifyButtonSize;
 buttonDensity: VuetifyDensity;
@@ -510,6 +556,7 @@ export declare namespace DfInputComponentProps {
         DfFileProps,
         DfImageProps,
         DfInputProps,
+        MessagesWidgetProps,
         DfInputHintProps,
         DfLabelProps,
         DfRtfEditorProps,
@@ -539,8 +586,7 @@ export declare namespace DfInputComponents {
  * Every component this library draws with, keyed by the tag a layout names it by.
  *
  * A rendering layer that resolves a component by name out of a map - `@dynamicforms/vuetify-modal-form-kit`'s
- * `<component-render>` is one - is handed this instead of keeping a list of its own, which would have to be
- * extended whenever this package gains a component and would silently render nothing until it was.
+ * `<component-render>` is one - takes it from here, so a component this package adds is in the map.
  *
  * The keys are the kebab-case of the export names, so a tag names the same component whether it is looked up
  * here or left to Vue's own resolver after `DynamicFormsInputs` has registered the components globally.
@@ -624,8 +670,8 @@ export declare const dfInputComponentsByTag: {
     max: number;
     }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
     readonly 'df-input-hint': DefineComponent<DfInputHintProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<DfInputHintProps> & Readonly<{}>, {
-    errors: string | ValidationError[];
-    message: string | ValidationError[];
+    errors: string | readonly (RenderableValue | ErrorInput)[];
+    message: RenderContentRef | readonly RenderableValue[];
     errorClasses: ClassTypes;
     messageClasses: ClassTypes;
     }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
@@ -640,69 +686,7 @@ export declare const dfInputComponentsByTag: {
     minHeight: string;
     enabled: boolean;
     clearable: boolean;
-    }, {}, {}, {}, string, ComponentProvideOptions, false, {
-    $editor: CreateComponentPublicInstanceWithMixins<Readonly<{
-    modelValue?: string;
-    minHeight?: string;
-    disabled?: boolean;
-    toolbarButtonSize?: VuetifyButtonSize;
-    fontFamily?: string;
-    }> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-    }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-    "update:modelValue": (value: string) => any;
-    }, PublicProps, {
-    minHeight: string;
-    disabled: boolean;
-    modelValue: string;
-    toolbarButtonSize: VuetifyButtonSize;
-    fontFamily: string;
-    }, false, {}, {}, GlobalComponents, GlobalDirectives, string, {
-    toolbarRef: CreateComponentPublicInstanceWithMixins<Readonly<{
-    editor?: Editor;
-    buttonSize?: VuetifyButtonSize;
-    }> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
-    buttonSize: VuetifyButtonSize;
-    editor: Editor;
-    }, false, {}, {}, GlobalComponents, GlobalDirectives, string, {
-    imageInput: HTMLInputElement;
-    }, HTMLDivElement, ComponentProvideOptions, {
-    P: {};
-    B: {};
-    D: {};
-    C: {};
-    M: {};
-    Defaults: {};
-    }, Readonly<{
-    editor?: Editor;
-    buttonSize?: VuetifyButtonSize;
-    }> & Readonly<{}>, {}, {}, {}, {}, {
-    buttonSize: VuetifyButtonSize;
-    editor: Editor;
-    }> | null;
-    }, HTMLDivElement, ComponentProvideOptions, {
-    P: {};
-    B: {};
-    D: {};
-    C: {};
-    M: {};
-    Defaults: {};
-    }, Readonly<{
-    modelValue?: string;
-    minHeight?: string;
-    disabled?: boolean;
-    toolbarButtonSize?: VuetifyButtonSize;
-    fontFamily?: string;
-    }> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-    }>, {}, {}, {}, {}, {
-    minHeight: string;
-    disabled: boolean;
-    modelValue: string;
-    toolbarButtonSize: VuetifyButtonSize;
-    fontFamily: string;
-    }> | null;
-    }, any>;
+    }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
     readonly 'df-select': {
         new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly<DfSelectProps> & Readonly<{
         "onUpdate:modelValue"?: ((value: any) => any) | undefined;
@@ -788,17 +772,18 @@ export declare const dfInputComponentsByTag: {
 export declare type DfInputComponentTag = keyof typeof dfInputComponentsByTag;
 
 export declare const DfInputHint: DefineComponent<DfInputHintProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<DfInputHintProps> & Readonly<{}>, {
-errors: string | ValidationError[];
-message: string | ValidationError[];
+errors: string | readonly (RenderableValue | ErrorInput)[];
+message: RenderContentRef | readonly RenderableValue[];
 errorClasses: ClassTypes;
 messageClasses: ClassTypes;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 declare interface DfInputHintProps {
-    /** The errors to render. Rendered in place of {@link message} whenever there is one. */
-    errors?: string | ValidationError[];
-    /** The message to render, shown while there is no error. */
-    message?: string | ValidationError[];
+    /** The errors to render, in place of {@link message} whenever there is one. A string is text in the user's
+     * language; an error description may lack any member. */
+    errors?: string | readonly (RenderableValue | ErrorInput)[];
+    /** The message to render, shown while there is no error: content in any of its forms, or the items to render. */
+    message?: RenderContentRef | readonly RenderableValue[];
     /** Classes for the rendered errors. Defaults to `text-error`. */
     errorClasses?: ClassTypes;
     /** Classes for the rendered message. Defaults to no class. */
@@ -816,11 +801,13 @@ declare interface DfInputProps extends BaseProps {
 export declare const DfLabel: DefineComponent<DfLabelProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<DfLabelProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 declare interface DfLabelProps {
-    /** The slot data Vuetify hands a `#label` slot. Where it is given, its `label` is what is rendered. */
-    data?: DefaultInputSlot & {
-        label?: string | MdString;
+    /** The slot data Vuetify hands a `#label` slot. Its `label`, the label's text, is rendered where {@link label} has
+     * no content. */
+    data?: {
+        label?: string;
+        props?: Record<string, unknown>;
     };
-    /** The label to render where no {@link data} is given: its text, and the icon it carries. */
+    /** The label to render: its content in any of the four forms, and the icon it carries. */
     label: Label;
     /** Whether the label wraps over several lines. It is rendered on one line by default. */
     allowWrap?: boolean;
@@ -836,69 +823,7 @@ export declare const DfRtfEditor: DefineComponent<DfRtfEditorProps, {}, {}, {},
 minHeight: string;
 enabled: boolean;
 clearable: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {
-$editor: CreateComponentPublicInstanceWithMixins<Readonly<{
-modelValue?: string;
-minHeight?: string;
-disabled?: boolean;
-toolbarButtonSize?: VuetifyButtonSize;
-fontFamily?: string;
-}> & Readonly<{
-"onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-"update:modelValue": (value: string) => any;
-}, PublicProps, {
-minHeight: string;
-disabled: boolean;
-modelValue: string;
-toolbarButtonSize: VuetifyButtonSize;
-fontFamily: string;
-}, false, {}, {}, GlobalComponents, GlobalDirectives, string, {
-toolbarRef: CreateComponentPublicInstanceWithMixins<Readonly<{
-editor?: Editor;
-buttonSize?: VuetifyButtonSize;
-}> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
-buttonSize: VuetifyButtonSize;
-editor: Editor;
-}, false, {}, {}, GlobalComponents, GlobalDirectives, string, {
-imageInput: HTMLInputElement;
-}, HTMLDivElement, ComponentProvideOptions, {
-P: {};
-B: {};
-D: {};
-C: {};
-M: {};
-Defaults: {};
-}, Readonly<{
-editor?: Editor;
-buttonSize?: VuetifyButtonSize;
-}> & Readonly<{}>, {}, {}, {}, {}, {
-buttonSize: VuetifyButtonSize;
-editor: Editor;
-}> | null;
-}, HTMLDivElement, ComponentProvideOptions, {
-P: {};
-B: {};
-D: {};
-C: {};
-M: {};
-Defaults: {};
-}, Readonly<{
-modelValue?: string;
-minHeight?: string;
-disabled?: boolean;
-toolbarButtonSize?: VuetifyButtonSize;
-fontFamily?: string;
-}> & Readonly<{
-"onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, {
-minHeight: string;
-disabled: boolean;
-modelValue: string;
-toolbarButtonSize: VuetifyButtonSize;
-fontFamily: string;
-}> | null;
-}, any>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 declare interface DfRtfEditorProps extends BaseProps {
     minHeight?: string;
@@ -949,6 +874,27 @@ export declare interface DynamicFormsInputsOptions extends VuetifyInputsSettings
     registerVuetifyComponents: boolean;
 }
 
+/**
+ * An error as a component accepts it for rendering: content in one of the four forms (a string, an `MdString`, an
+ * `HtmlString` or a `SimpleComponentDef`), which renders as it is, or an error description of which any member may
+ * be missing.
+ */
+export declare type ErrorInput = RenderContentNonCallable | Partial<ErrorDescription>;
+
+/**
+ * Converts an error to the content it renders as: plain text, an `MdString` for markdown, an `HtmlString` for HTML
+ * or a `SimpleComponentDef` for a component. `undefined` renders the error's `detail`. It is called for an error with
+ * a code. It runs while the errors are rendered, so the reactive state it reads, such as the locale, is tracked.
+ */
+export declare type ErrorText = (error: ErrorDescription) => RenderContentNonCallable | undefined;
+
+/**
+ * What a component renders for `error`. Content renders as it is. An error without a code renders as its
+ * `detail`: it is text in the user's language. An error with a code renders as the `errorText` setting's answer, and
+ * as its `detail` where the setting is not given or answers `undefined`.
+ */
+export declare function errorText(error: ErrorInput, settings: VuetifyInputsSettings): RenderContentNonCallable;
+
 export declare type FieldDensity = 'default' | 'comfortable' | 'compact' | 'inline';
 
 export declare type FieldVariant = 'outlined' | 'plain' | 'underlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled';
@@ -1021,20 +967,123 @@ export declare function getBreakpointName(dp: ReturnType<typeof useDisplay>): Br
  * `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 function getRenderOptionsForBreakpoint(value: ActionValue, breakpoint: BreakpointNames): ResolvedActionRenderOptions;
+
+/**
+ * A string rendered as HTML: it is set as the `innerHTML` of a `div`. It is not sanitized, so a string holding text
+ * from a user or a server is escaped or sanitized before it is wrapped.
+ */
+export declare class HtmlString extends String {
+}
 
 export declare const InputBase: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
 
+/** What `InputBase`'s `default` slot receives: Vuetify's `v-field` slot props. `prepend-inner` receives them without
+ * `props`. */
+export declare interface InputBaseSlotProps {
+    /** Attributes for the control: its `id`, `class` and ARIA attributes. */
+    props: Record<string, unknown>;
+    isActive: Ref<boolean>;
+    isFocused: Ref<boolean>;
+    iconColor: ComputedRef<string | undefined>;
+    controlRef: Ref<HTMLElement | undefined>;
+    /** Sets the field's focused state. */
+    focus: () => void;
+    /** Clears the field's focused state. */
+    blur: () => void;
+}
+
 /** Answers whether `value` is one of the display styles. */
 export declare function isActionDisplayStyle(value: unknown): value is ActionDisplayStyle;
 
+/** True where `content` is a function answering the content. */
+export declare function isCallableFunction(content?: RenderContentRef): content is RenderContentCallable;
+
+/** True where `value` is content in one of the four forms: a string, an `MdString`, an `HtmlString` or a component. */
+export declare function isRenderContent(value: unknown): value is RenderContentNonCallable;
+
+/** True where `content` names a component to render it with. */
+export declare function isSimpleComponentDef(content?: RenderContentRef): content is SimpleComponentDef;
+
+declare type Key = keyof typeof defaults;
+
+/** A field's label: its content, and an icon shown before it. */
 export declare class Label {
-    text: string;
+    text: RenderContentNonCallable;
     icon?: string | undefined;
     iconComponent: string;
-    constructor(text: string, icon?: string | undefined, iconComponent?: string);
+    constructor(text: RenderContentNonCallable, icon?: string | undefined, iconComponent?: string);
+}
+
+/** A string rendered as markdown by `vue-markdown-render`, with its `options` and `plugins`. */
+export declare class MdString extends String {
+    plugins?: any[];
+    options?: any;
+    constructor(value: string, options?: any, plugins?: any[]);
+}
+
+export declare const MessagesWidget: DefineComponent<MessagesWidgetProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<MessagesWidgetProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare interface MessagesWidgetProps {
+    /** A plain text, or the items to render, each in its own element: a `RenderableValue` as its content, an error
+     * as `errorText()` gives it. */
+    message: string | readonly (RenderableValue | ErrorInput)[];
+    /** Classes for every rendered item, beside the item's own `extraClasses`. */
+    classes?: ClassTypes;
 }
 
+/**
+ * Content with the CSS classes it is rendered with, described as what renders it: `componentName`, its
+ * `componentBindings`, its `componentChildren`, its `componentBody` and its `extraClasses`. `componentName` is
+ * `'template'` for plain text, `'vue-markdown'` for markdown, `'html'` for an `HtmlString` and the component's name
+ * for a `SimpleComponentDef`; `componentBody` is the text of plain text and the HTML of an `HtmlString`.
+ *
+ * `MessagesWidget` renders it, and so does any component that reads those five members. A reference or a function as
+ * the content is read on every render, so what it answers reaches the screen without the value being built again.
+ */
+export declare class RenderableValue {
+    private readonly content;
+    classes: ClassTypes;
+    private readonly kindRef;
+    constructor(content?: RenderContentRef, classes?: ClassTypes);
+    /** The content as it reads now: a reference unwrapped and a function called. */
+    get resolvedText(): RenderContentNonCallable;
+    /** Which of the four forms the content takes now. */
+    get kind(): RenderContentKind;
+    get componentName(): string;
+    get componentBindings(): Record<string, any>;
+    /** The children of a component; empty for the other forms. */
+    get componentChildren(): readonly RenderContentNonCallable[];
+    get componentBody(): string;
+    get extraClasses(): ClassTypes;
+}
+
+/** Content in one of four forms - plain text, markdown, HTML or a component - or a function answering one. */
+export declare type RenderContent = RenderContentNonCallable | RenderContentCallable;
+
+export declare type RenderContentCallable = () => RenderContentNonCallable;
+
+/** Which of the four forms content takes. */
+export declare type RenderContentKind = 'string' | 'md' | 'html' | 'component';
+
+export declare type RenderContentNonCallable = string | MdString | HtmlString | SimpleComponentDef;
+
+/** `RenderContent`, or a reference to it. */
+export declare type RenderContentRef = RenderContent | Ref<RenderContent>;
+
+/**
+ * The text of `content` where only text is taken, such as an `aria-label`: a string and an `MdString` as written, an
+ * `HtmlString` without its tags, its blocks separated by a space, whitespace collapsed and trimmed, and with `&amp;`,
+ * `&lt;`, `&gt;`, `&quot;`, `&#39;` and `&nbsp;` read, and a component as the text of its children joined, whitespace
+ * collapsed and trimmed. An `&nbsp;` reads as a space that is neither collapsed nor trimmed.
+ */
+export declare function renderContentText(content: RenderContentNonCallable): string;
+
+/** `ActionRenderOptions` with the label read: a string. */
+export declare type ResolvedActionRenderOptions = Omit<ActionRenderOptions, 'label'> & {
+    label?: string;
+};
+
 export declare class ResponsiveActionRenderOptions extends ResponsiveRenderOptions<ActionRenderOptions> {
     protected cleanBreakpoint(bp?: ActionRenderOptions, defaultIfEmpty?: boolean): ActionRenderOptions | null;
 }
@@ -1063,12 +1112,10 @@ 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.
+ * The errors of `errors` a component shows now.
  *
- * 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`.
+ * By default an error is shown where `control` is sent - its `effectiveAccess` is not `'disabled'` - and either its
+ * `origin` is `'server'` 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.
  */
@@ -1083,137 +1130,42 @@ export declare function setFileGoneError(control: default_2.FieldBase | undefine
 
 declare type ShowAsGroup = 'no' | 'grouped' | 'grouped-no-borders';
 
-export declare const translatableStrings: {
-    Yes: string;
-    No: string;
-    Close: string;
-    Paragraph: string;
-    Heading1: string;
-    Heading2: string;
-    Heading3: string;
-    Heading4: string;
-    Heading5: string;
-    Heading6: string;
-    Downloadable: string;
-    ArticleCategory: string;
-    Title: string;
-    Subtitle: string;
-    InfoBox: string;
-    SideQuote: string;
-    Marker: string;
-    Spoiler: string;
-    CodeDark: string;
-    CodeBright: string;
-    Undo: string;
-    Redo: string;
-    SelectAll: string;
-    Bold: string;
-    Italic: string;
-    HorizontalLine: string;
-    Blockquote: string;
-    BulletedList: string;
-    NumberedList: string;
-    Outdent: string;
-    Indent: string;
-    AlignLeft: string;
-    AlignCenter: string;
-    AlignRight: string;
-    AlignJustify: string;
-    Link: string;
-    LinkUrl: string;
-    LinkApply: string;
-    LinkRemove: string;
-    Image: string;
-    ImageUrl: string;
-    ImageUpload: string;
-    ImageInsert: string;
-    ImageDropHint: string;
-    ImageReplace: string;
-    ImageDownload: string;
-    FileDownload: string;
-    Table: string;
-    TableInsert: string;
-    TableAddRowAbove: string;
-    TableAddRowBelow: string;
-    TableDeleteRow: string;
-    TableAddColumnBefore: string;
-    TableAddColumnAfter: string;
-    TableDeleteColumn: string;
-    TableToggleHeaderRow: string;
-    TableDeleteTable: string;
-    Style: string;
-    MediaEmbed: string;
-    MediaEmbedUrl: string;
-    MediaEmbedInsert: string;
-    InvalidHexColor: string;
-};
+/**
+ * A component to render content with: an HTML element or a registered component by its name, with its props and its
+ * children. It has no HTML content of its own; HTML is an `HtmlString`.
+ */
+export declare interface SimpleComponentDef {
+    componentName: string;
+    /** The props of the component. A listener is a prop named `on` and the event, e.g. `onClick`. `innerHTML` is not
+     * one: the component drops it. */
+    componentProps?: Record<string, unknown> & {
+        innerHTML?: never;
+    };
+    /** The children of an HTML element, or the default slot of a component. A string renders as text. */
+    children?: RenderContentNonCallable | readonly RenderContentNonCallable[];
+}
 
-export declare const translateStrings: (cb: TranslateStringsCallback<    {
-Yes: string;
-No: string;
-Close: string;
-Paragraph: string;
-Heading1: string;
-Heading2: string;
-Heading3: string;
-Heading4: string;
-Heading5: string;
-Heading6: string;
-Downloadable: string;
-ArticleCategory: string;
-Title: string;
-Subtitle: string;
-InfoBox: string;
-SideQuote: string;
-Marker: string;
-Spoiler: string;
-CodeDark: string;
-CodeBright: string;
-Undo: string;
-Redo: string;
-SelectAll: string;
-Bold: string;
-Italic: string;
-HorizontalLine: string;
-Blockquote: string;
-BulletedList: string;
-NumberedList: string;
-Outdent: string;
-Indent: string;
-AlignLeft: string;
-AlignCenter: string;
-AlignRight: string;
-AlignJustify: string;
-Link: string;
-LinkUrl: string;
-LinkApply: string;
-LinkRemove: string;
-Image: string;
-ImageUrl: string;
-ImageUpload: string;
-ImageInsert: string;
-ImageDropHint: string;
-ImageReplace: string;
-ImageDownload: string;
-FileDownload: string;
-Table: string;
-TableInsert: string;
-TableAddRowAbove: string;
-TableAddRowBelow: string;
-TableDeleteRow: string;
-TableAddColumnBefore: string;
-TableAddColumnAfter: string;
-TableDeleteColumn: string;
-TableToggleHeaderRow: string;
-TableDeleteTable: string;
-Style: string;
-MediaEmbed: string;
-MediaEmbedUrl: string;
-MediaEmbedInsert: string;
-InvalidHexColor: string;
-}>) => void;
-
-export declare function useBreakpoint(): ComputedRef<"xs" | "sm" | "md" | "lg" | "xl">;
+/**
+ * `error` with every missing member set: `code` to `''`, `params` to `{}`, `detail` to `''` and `origin` to
+ * `'application'`. Content becomes an error without a code, its text (`renderContentText`) as the `detail`.
+ */
+export declare function toErrorDescription(error: ErrorInput): ErrorDescription;
+
+/**
+ * The current translation of one of the library's strings. Called while a component sets up or renders, it
+ * translates with the `translate` setting the component reads, as it reads every other setting, where one is given,
+ * and with the function `translateStrings` set otherwise. Under server-side rendering each request's app states its
+ * own `translate`. An event handler or a timer reads no setting; it uses `useTranslate()`.
+ */
+export declare function translate(key: Key, params?: Record<string, unknown>): string;
+
+/**
+ * Sets the translation function of the library's strings for the whole process; see `@dynamicforms/translatable`.
+ * An app installed with the `translate` setting translates with that one instead.
+ */
+export declare const translateStrings: (t: TranslateFunction, namespace?: string) => void;
+
+export declare function useBreakpoint(): ComputedRef<"md" | "xs" | "sm" | "lg" | "xl">;
 
 /**
  * Runs the `comms.touch` keep-alive interval for `<df-file>`/`<df-image>` while `value` holds a file
@@ -1226,37 +1178,42 @@ export declare function useFileTouchKeepAlive(value: Ref<string | null>, comms:
     clearTouchInterval: () => void;
 };
 
-export declare function useInputBase<T = any>(props: BaseProps<T>, emit: BaseEmits<T>): {
+/**
+ * The state and Vuetify bindings an input shares with every other input. `componentErrors` are the errors the
+ * component finds in the value itself, reported where no `control` is bound; a bound control reports through its
+ * own validators.
+ */
+export declare function useInputBase<T = any>(props: BaseProps<T>, emit: BaseEmits<T>, componentErrors?: () => ValidationError[]): {
     value: WritableComputedRef<T, T>;
     valid: ComputedRef<boolean>;
     enabled: ComputedRef<boolean>;
     errors: ComputedRef<default_2.ValidationError[]>;
-    shownErrors: ComputedRef<default_2.ValidationError[]>;
+    shownErrors: ComputedRef<ErrorInput[]>;
     visibility: ComputedRef<default_2.Visibility>;
     isRendered: ComputedRef<boolean>;
-    visibilityClass: ComputedRef<    {
-    'd-none': boolean;
-    invisible: boolean;
+    visibilityClass: ComputedRef<{
+        'd-none': boolean;
+        invisible: boolean;
     }>;
     label: ComputedRef<Label>;
     touched: Ref<boolean, boolean>;
     density: ComputedRef<FieldDensity>;
     densityClass: ComputedRef<string>;
-    vuetifyBindings: ComputedRef<    {
-    name: string | undefined;
-    class: string;
-    density: VuetifyDensity;
-    variant: FieldVariant;
-    label: string;
-    errorMessages: string | undefined;
-    readonly: boolean;
-    disabled: boolean;
-    placeholder: string;
-    'persistent-placeholder': boolean;
-    hint: string;
-    persistentHint: boolean;
-    hideDetails: boolean | "auto" | undefined;
-    helpText: string;
+    vuetifyBindings: ComputedRef<{
+        name: string | undefined;
+        class: string;
+        density: VuetifyDensity;
+        variant: FieldVariant;
+        label: string;
+        errorMessages: string | undefined;
+        readonly: boolean;
+        disabled: boolean;
+        placeholder: string;
+        'persistent-placeholder': boolean;
+        hint: string;
+        persistentHint: boolean;
+        hideDetails: boolean | "auto" | undefined;
+        helpText: string;
     }>;
 };
 
@@ -1267,6 +1224,12 @@ export declare function useInputBase<T = any>(props: BaseProps<T>, emit: BaseEmi
  */
 export declare function useShownErrors(element: MaybeRefOrGetter<FieldBase | undefined>): ComputedRef<ValidationError[]>;
 
+/**
+ * `translate` bound to the settings the calling component reads, for use outside its setup and render: in an event
+ * handler or a timer. Called in a component's setup.
+ */
+export declare function useTranslate(): (key: Key, params?: Record<string, unknown>) => string;
+
 /** 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
@@ -1277,12 +1240,17 @@ export declare namespace VuetifyComponents {
     export {
         VAutocomplete,
         VBtn,
+        VBtnGroup,
+        VBtnToggle,
+        VCard,
+        VCardActions,
         VCheckbox,
         VChip,
         VCombobox,
         VColorPicker,
         VConfirmEdit,
         VDatePicker,
+        VDivider,
         VField,
         VFileInput,
         VRow,
@@ -1290,7 +1258,9 @@ export declare namespace VuetifyComponents {
         VIcon,
         VImg,
         VInput,
+        VList,
         VListItem,
+        VListItemTitle,
         VMenu,
         VNumberInput,
         VProgressLinear,
@@ -1317,6 +1287,24 @@ export declare interface VuetifyInputsSettings {
      * is synchronous and changes nothing.
      */
     shownErrors?: (error: ValidationError, control: FieldBase | undefined, shownByDefault: boolean) => boolean;
+    /**
+     * The content an error renders as; see `ErrorText`. Without it, an error renders as its `detail`.
+     */
+    errorText?: ErrorText;
+    /**
+     * The translation function of the library's strings, shaped like vue-i18n's `t`. Where it is given, `translate()`
+     * called while a component that reads these settings sets up or renders uses it in place of the one
+     * `translateStrings` set for the process. Under server-side rendering, an app per request gives each request its
+     * own.
+     */
+    translate?: TranslateFunction;
+    /** The namespace `translate` looks the library's keys up under: `${translateNamespace}.${key}`. */
+    translateNamespace?: string;
+    /**
+     * The date-fns locale `<df-date-time>` formats and parses with in this app, in place of
+     * `DateTimeLocaleConfig.dateTimeLocale`. A component's `locale` prop takes precedence.
+     */
+    dateTimeLocale?: MaybeRef<Locale>;
 }
 
 export declare const vuetifyInputsSettingsKey: unique symbol;
@@ -1337,7 +1325,7 @@ export { }
  */
 declare module '@dynamicforms/vue-forms' {
     interface Extras {
-        label?: string | Label | MdString;
+        label?: RenderContentNonCallable | Label;
         placeholder?: string;
         helpText?: string;
         hint?: string;