@dynamicforms/vuetify-inputs 0.11.3 → 0.11.5

package/dist/index.d.ts

@@ -14,6 +14,7 @@ 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 { FirstWeekContainsDate } from 'date-fns';
 import { FormatDistanceFn } from 'date-fns';
@@ -377,7 +378,8 @@ export declare const defaultBaseProps: {
 export declare const defaultDisplayStyle = ActionDisplayStyle.BUTTON;
 
 export declare const DfActions: DefineComponent<DfActionsProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<DfActionsProps> & Readonly<{}>, {
-buttonSize: string | number;
+buttonSize: VuetifyButtonSize;
+buttonDensity: VuetifyDensity;
 showAsGroup: "no" | "grouped" | "grouped-no-borders";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
@@ -385,7 +387,9 @@ declare interface DfActionsProps {
     /** 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;
+    buttonSize?: VuetifyButtonSize;
+    /** Forwarded to each button's `density` prop. See https://vuetifyjs.com/en/api/v-btn/#props-density */
+    buttonDensity?: VuetifyDensity;
     showAsGroup?: ShowAsGroup;
 }
 
@@ -547,7 +551,8 @@ export declare namespace DfInputComponents {
  */
 export declare const dfInputComponentsByTag: {
     readonly 'df-actions': DefineComponent<DfActionsProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<DfActionsProps> & Readonly<{}>, {
-    buttonSize: string | number;
+    buttonSize: VuetifyButtonSize;
+    buttonDensity: VuetifyDensity;
     showAsGroup: "no" | "grouped" | "grouped-no-borders";
     }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
     readonly 'df-checkbox': DefineComponent<DfCheckboxProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
@@ -644,7 +649,8 @@ export declare const dfInputComponentsByTag: {
     modelValue?: string;
     minHeight?: string;
     disabled?: boolean;
-    toolbarButtonSize?: string | number;
+    toolbarButtonSize?: VuetifyButtonSize;
+    fontFamily?: string;
     }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
@@ -653,8 +659,32 @@ export declare const dfInputComponentsByTag: {
     minHeight: string;
     modelValue: string;
     disabled: boolean;
-    toolbarButtonSize: string | number;
-    }, false, {}, {}, GlobalComponents, GlobalDirectives, string, {}, HTMLDivElement, ComponentProvideOptions, {
+    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: {};
@@ -665,14 +695,16 @@ export declare const dfInputComponentsByTag: {
     modelValue?: string;
     minHeight?: string;
     disabled?: boolean;
-    toolbarButtonSize?: string | number;
+    toolbarButtonSize?: VuetifyButtonSize;
+    fontFamily?: string;
     }> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     }>, {}, {}, {}, {}, {
     minHeight: string;
     modelValue: string;
     disabled: boolean;
-    toolbarButtonSize: string | number;
+    toolbarButtonSize: VuetifyButtonSize;
+    fontFamily: string;
     }> | null;
     }, any>;
     readonly 'df-select': {
@@ -813,7 +845,8 @@ $editor: CreateComponentPublicInstanceWithMixins<Readonly<{
 modelValue?: string;
 minHeight?: string;
 disabled?: boolean;
-toolbarButtonSize?: string | number;
+toolbarButtonSize?: VuetifyButtonSize;
+fontFamily?: string;
 }> & Readonly<{
 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
@@ -822,8 +855,32 @@ toolbarButtonSize?: string | number;
 minHeight: string;
 modelValue: string;
 disabled: boolean;
-toolbarButtonSize: string | number;
-}, false, {}, {}, GlobalComponents, GlobalDirectives, string, {}, HTMLDivElement, ComponentProvideOptions, {
+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: {};
@@ -834,14 +891,16 @@ Defaults: {};
 modelValue?: string;
 minHeight?: string;
 disabled?: boolean;
-toolbarButtonSize?: string | number;
+toolbarButtonSize?: VuetifyButtonSize;
+fontFamily?: string;
 }> & Readonly<{
 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, {
 minHeight: string;
 modelValue: string;
 disabled: boolean;
-toolbarButtonSize: string | number;
+toolbarButtonSize: VuetifyButtonSize;
+fontFamily: string;
 }> | null;
 }, any>;
 
@@ -849,7 +908,12 @@ declare interface DfRtfEditorProps extends BaseProps {
     minHeight?: string;
     /** Size of the toolbar's buttons, forwarded to each one's `size` prop (`v-btn`'s, or `<df-actions>`'s
      * `buttonSize` for the grouped clusters). See https://vuetifyjs.com/en/api/v-btn/#props-size */
-    toolbarButtonSize?: string | number;
+    toolbarButtonSize?: VuetifyButtonSize;
+    /** `font-family` of the editing area and its named block styles (Title, Subtitle, Info box, Side quote, article
+     * category). Defaults to `'inherit'`: the component loads no font of its own, so the editor renders in whatever
+     * font the surrounding page already set. Pass any valid CSS `font-family` value to override it; loading the
+     * font itself, if it isn't a system font, is the application's responsibility. */
+    fontFamily?: string;
 }
 
 export declare const DfSelect: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
@@ -1185,6 +1249,12 @@ export declare function useInputBase<T = any>(props: BaseProps<T>, emit: BaseEmi
     }>;
 };
 
+/** 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
+ *  suggest the literals instead of collapsing them into `string`. */
+export declare type VuetifyButtonSize = 'x-small' | 'small' | 'default' | 'large' | 'x-large' | (string & {}) | number;
+
 export declare namespace VuetifyComponents {
     export {
         VAutocomplete,

package/package.json

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