@dynamicforms/vuetify-inputs 0.9.0 → 0.9.2

package/dist/index.d.ts

@@ -1,8 +1,11 @@
 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';
 import { ComponentProvideOptions } from 'vue';
 import { ComputedRef } from 'vue';
@@ -50,6 +53,7 @@ import { VImg } from 'vuetify/components/VImg';
 import { VInput } from 'vuetify/components/VInput';
 import { VListItem } from 'vuetify/components/VList';
 import { VMenu } from 'vuetify/components/VMenu';
+import { VNodeProps } from 'vue';
 import { VNumberInput } from 'vuetify/components/VNumberInput';
 import { VProgressLinear } from 'vuetify/components/VProgressLinear';
 import { VRow } from 'vuetify/components/VGrid';
@@ -80,25 +84,17 @@ fetchChoices: SelectFetchChoices;
 dfSelectRef: unknown;
 }, any>;
 
-declare const __VLS_component_2: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+declare const __VLS_component_2: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 blur: () => any;
 "update:modelValue": (value: any) => any;
 "click:clear": () => any;
-}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
 onBlur?: (() => any) | undefined;
 "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 "onClick:clear"?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare type __VLS_Props = {
-    data?: DefaultInputSlot & {
-        label?: string | MdString;
-    };
-    label: Label;
-    allowWrap?: boolean;
-};
-
-declare type __VLS_Props_2 = BaseProps & {
+declare type __VLS_Props = BaseProps & {
     loading?: boolean;
 };
 
@@ -179,6 +175,7 @@ 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;
@@ -209,7 +206,14 @@ export declare class Action extends Action_2<ActionBreakpointOptions> {
     static noAction(data?: Partial<IFieldConstructorParams<ActionBreakpointOptions>>): Action;
 }
 
-export declare type ActionBreakpointOptions = BreakpointsJSON<ActionRenderOptions>;
+export declare type ActionBreakpointOptions = BreakpointsJSON<ActionRenderOptions, ActionBreakpointRenderOptions>;
+
+/**
+ * What one breakpoint of an action's value may state: the members that describe how the action is drawn.
+ * `name`, `defaultConfirm` and `defaultReject` are not among them - which key a modal resolves with, and which
+ * key fires the action, are properties of the action itself and do not depend on the width of the screen.
+ */
+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
@@ -289,7 +293,12 @@ export declare interface BaseProps<T = any> {
 
 export declare type BreakpointNames = (typeof responsiveBreakpoints)[number];
 
-export declare type BreakpointsJSON<T extends Record<string, any>> = T & Partial<Record<BreakpointNames, T>>;
+/**
+ * A set of options and the per-breakpoint sets that restate parts of it. `B` is what a breakpoint may state,
+ * and defaults to the whole of `T`; a subclass narrows it where a member belongs to the object as a whole rather
+ * than to one screen width.
+ */
+export declare type BreakpointsJSON<T extends Record<string, any>, B extends Record<string, any> = T> = T & Partial<Record<BreakpointNames, B>>;
 
 export declare const ckEditorLanguage: {
     language: string;
@@ -378,7 +387,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;
 }
@@ -475,6 +486,8 @@ export declare namespace DfInputComponentProps {
         DfDateTimeProps,
         DfFileProps,
         DfInputProps,
+        DfInputHintProps,
+        DfLabelProps,
         DfRtfEditorProps,
         DfSelectProps,
         DfTextAreaProps
@@ -490,19 +503,245 @@ export declare namespace DfInputComponents {
         DfFile,
         DfInput,
         DfInputHint,
+        DfLabel,
         DfRtfEditor,
         DfSelect,
         DfTextArea
     }
 }
 
-export declare const DfInputHint: DefineComponent<Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props> & Readonly<{}>, {
+/**
+ * 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.
+ *
+ * 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.
+ */
+export declare const dfInputComponentsByTag: {
+    readonly 'df-actions': DefineComponent<DfActionsProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<DfActionsProps> & Readonly<{}>, {
+    buttonSize: string | number;
+    showAsGroup: "no" | "grouped" | "grouped-no-borders";
+    }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+    readonly 'df-checkbox': DefineComponent<DfCheckboxProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: any) => any;
+    "click:clear": () => any;
+    }, string, PublicProps, Readonly<DfCheckboxProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onClick:clear"?: (() => any) | undefined;
+    }>, {
+    enabled: boolean;
+    clearable: boolean;
+    allowNull: boolean;
+    }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+    readonly 'df-color': DefineComponent<DfColorProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: any) => any;
+    "click:clear": () => any;
+    }, string, PublicProps, Readonly<DfColorProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onClick:clear"?: (() => any) | undefined;
+    }>, {
+    enabled: boolean;
+    clearable: boolean;
+    allowNull: boolean;
+    }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+    readonly 'df-date-time': DefineComponent<DfDateTimeProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: any) => any;
+    "click:clear": () => any;
+    }, string, PublicProps, Readonly<DfDateTimeProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onClick:clear"?: (() => any) | undefined;
+    }>, {
+    enabled: boolean;
+    clearable: boolean;
+    inputType: "datetime" | "date" | "time";
+    displayFormatDate: string;
+    displayFormatTime: string;
+    }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+    readonly 'df-file': DefineComponent<DfFileProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: any) => any;
+    "click:clear": () => any;
+    }, string, PublicProps, Readonly<DfFileProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onClick:clear"?: (() => any) | undefined;
+    }>, {
+    enabled: boolean;
+    clearable: boolean;
+    }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+    readonly 'df-input': DefineComponent<DfInputProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: any) => any;
+    "click:clear": () => any;
+    }, string, PublicProps, Readonly<DfInputProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onClick:clear"?: (() => any) | undefined;
+    }>, {
+    enabled: boolean;
+    clearable: boolean;
+    inputType: "text" | "password" | "email" | "url" | "number";
+    precision: number | null;
+    step: number;
+    min: number;
+    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[];
+    errorClasses: ClassTypes;
+    messageClasses: ClassTypes;
+    }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+    readonly 'df-label': DefineComponent<DfLabelProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<DfLabelProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+    readonly 'df-rtf-editor': DefineComponent<DfRtfEditorProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: any) => any;
+    "click:clear": () => any;
+    }, string, PublicProps, Readonly<DfRtfEditorProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onClick:clear"?: (() => any) | undefined;
+    }>, {
+    minHeight: string;
+    enabled: boolean;
+    clearable: boolean;
+    }, {}, {}, {}, string, ComponentProvideOptions, false, {
+    $editor: CreateComponentPublicInstanceWithMixins<Readonly<{
+    modelValue?: string;
+    minHeight?: string;
+    disabled?: boolean;
+    }> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    }>, {
+    onEditorReady: (editorReady: Editor) => void;
+    }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+    }, PublicProps, {
+    minHeight: string;
+    modelValue: string;
+    disabled: boolean;
+    }, false, {}, {}, GlobalComponents, GlobalDirectives, string, {
+    editorElement: HTMLDivElement;
+    }, HTMLDivElement, ComponentProvideOptions, {
+    P: {};
+    B: {};
+    D: {};
+    C: {};
+    M: {};
+    Defaults: {};
+    }, Readonly<{
+    modelValue?: string;
+    minHeight?: string;
+    disabled?: boolean;
+    }> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    }>, {
+    onEditorReady: (editorReady: Editor) => void;
+    }, {}, {}, {}, {
+    minHeight: string;
+    modelValue: string;
+    disabled: boolean;
+    }> | null;
+    }, any>;
+    readonly 'df-select': {
+        new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly<DfSelectProps> & Readonly<{
+        "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+        "onClick:clear"?: (() => any) | undefined;
+        "onUpdate:modelValueDisplay"?: ((value: SelectChoice[]) => any) | undefined;
+        }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+        "update:modelValue": (value: any) => any;
+        "click:clear": () => any;
+        "update:modelValueDisplay": (value: SelectChoice[]) => any;
+        }, PublicProps, {
+        enabled: boolean;
+        clearable: boolean;
+        allowNull: boolean;
+        choices: SelectChoice[];
+        multiple: boolean;
+        allowTags: boolean;
+        fetchChoices: SelectFetchChoices;
+        }, false, {}, {}, GlobalComponents, GlobalDirectives, string, {
+        dfSelectRef: unknown;
+        }, any, ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+        }, Readonly<DfSelectProps> & Readonly<{
+        "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+        "onClick:clear"?: (() => any) | undefined;
+        "onUpdate:modelValueDisplay"?: ((value: SelectChoice[]) => any) | undefined;
+        }>, {}, {}, {}, {}, {
+        enabled: boolean;
+        clearable: boolean;
+        allowNull: boolean;
+        choices: SelectChoice[];
+        multiple: boolean;
+        allowTags: boolean;
+        fetchChoices: SelectFetchChoices;
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & ComponentOptionsBase<Readonly<DfSelectProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onClick:clear"?: (() => any) | undefined;
+    "onUpdate:modelValueDisplay"?: ((value: SelectChoice[]) => any) | undefined;
+    }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: any) => any;
+    "click:clear": () => any;
+    "update:modelValueDisplay": (value: SelectChoice[]) => any;
+    }, string, {
+    enabled: boolean;
+    clearable: boolean;
+    allowNull: boolean;
+    choices: SelectChoice[];
+    multiple: boolean;
+    allowTags: boolean;
+    fetchChoices: SelectFetchChoices;
+    }, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
+        $slots: Readonly<{
+            'append-inner'?: (props: any) => any;
+            'prepend-inner'?: (props: any) => any;
+        }> & {
+            'append-inner'?: (props: any) => any;
+            'prepend-inner'?: (props: any) => any;
+        };
+    });
+    readonly 'df-text-area': DefineComponent<DfTextAreaProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: any) => any;
+    "click:clear": () => any;
+    }, string, PublicProps, Readonly<DfTextAreaProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onClick:clear"?: (() => any) | undefined;
+    }>, {
+    enabled: boolean;
+    clearable: boolean;
+    rows: number;
+    maxRows: number;
+    }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+};
+
+/** The tags {@link dfInputComponentsByTag} answers for. */
+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[];
 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[];
+    /** Classes for the rendered errors. Defaults to `text-error`. */
+    errorClasses?: ClassTypes;
+    /** Classes for the rendered message. Defaults to no class. */
+    messageClasses?: ClassTypes;
+}
+
 declare interface DfInputProps extends BaseProps {
     inputType?: 'text' | 'password' | 'email' | 'url' | 'number';
     precision?: number | null;
@@ -511,7 +750,18 @@ declare interface DfInputProps extends BaseProps {
     max?: number;
 }
 
-export declare const DfLabel: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+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 label to render where no {@link data} is given: its text, and the icon it carries. */
+    label: Label;
+    /** Whether the label wraps over several lines. It is rendered on one line by default. */
+    allowWrap?: boolean;
+}
 
 export declare const DfRtfEditor: DefineComponent<DfRtfEditorProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: any) => any;
@@ -637,6 +887,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 {
@@ -646,13 +907,6 @@ export declare class Label {
     constructor(text: string, icon?: string | undefined, iconComponent?: string);
 }
 
-declare interface Props {
-    errors?: string | ValidationError[];
-    message?: string | ValidationError[];
-    errorClasses?: ClassTypes;
-    messageClasses?: ClassTypes;
-}
-
 export declare class ResponsiveActionRenderOptions extends ResponsiveRenderOptions<ActionRenderOptions> {
     protected cleanBreakpoint(bp?: ActionRenderOptions, defaultIfEmpty?: boolean): ActionRenderOptions | null;
 }
@@ -667,8 +921,7 @@ export declare abstract class ResponsiveRenderOptions<T extends Record<string, a
      * Normalizes one breakpoint's options. The merge reads `null` and `undefined` as "this breakpoint says
      * nothing about that field", so a field the breakpoint does not state has to come back as `undefined` rather
      * than as an empty value - an empty array or string returned here reads as a breakpoint deliberately emptying
-     * what it inherited. The value returned for `defaultIfEmpty` carries every field the class merges, since the
-     * field set is taken from it.
+     * what it inherited.
      */
     protected abstract cleanBreakpoint(bp?: T, defaultIfEmpty?: boolean): T | null;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dynamicforms/vuetify-inputs",
   "private": false,
-  "version": "0.9.0",
+  "version": "0.9.2",
   "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"
     },