@dynamicforms/vuetify-inputs 0.10.0 → 0.10.2

package/dist/index.d.ts

@@ -454,6 +454,34 @@ clearable: boolean;
 
 declare interface DfFileProps extends BaseProps {
     comms: FileComms;
+    /** Milliseconds between keep-alive touches. Overrides `defaultTouchInterval` from the plugin's
+     *  `VuetifyInputsSettings`, which in turn overrides the baked-in default of 60000. */
+    touchInterval?: number;
+}
+
+export declare const DfImage: DefineComponent<DfImageProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"update:modelValue": (value: any) => any;
+"click:clear": () => any;
+}, string, PublicProps, Readonly<DfImageProps> & Readonly<{
+"onUpdate:modelValue"?: ((value: any) => any) | undefined;
+"onClick:clear"?: (() => any) | undefined;
+}>, {
+enabled: boolean;
+clearable: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+fileInputRef: HTMLInputElement;
+}, any>;
+
+/**
+ * `comms.upload` must resolve to a value directly usable as an `<img>` src (typically the URL your backend
+ * serves the image from): the component has no separate lookup for turning an identifier into a display URL,
+ * so it renders `modelValue` itself as the preview once a file has been uploaded.
+ */
+declare interface DfImageProps extends BaseProps {
+    comms: FileComms;
+    /** Milliseconds between keep-alive touches. Overrides `defaultTouchInterval` from the plugin's
+     *  `VuetifyInputsSettings`, which in turn overrides the baked-in default of 60000. */
+    touchInterval?: number;
 }
 
 export declare const DfInput: DefineComponent<DfInputProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
@@ -479,6 +507,7 @@ export declare namespace DfInputComponentProps {
         DfColorProps,
         DfDateTimeProps,
         DfFileProps,
+        DfImageProps,
         DfInputProps,
         DfInputHintProps,
         DfLabelProps,
@@ -495,6 +524,7 @@ export declare namespace DfInputComponents {
         DfColor,
         DfDateTime,
         DfFile,
+        DfImage,
         DfInput,
         DfInputHint,
         DfLabel,
@@ -564,6 +594,18 @@ export declare const dfInputComponentsByTag: {
     enabled: boolean;
     clearable: boolean;
     }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+    readonly 'df-image': DefineComponent<DfImageProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: any) => any;
+    "click:clear": () => any;
+    }, string, PublicProps, Readonly<DfImageProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onClick:clear"?: (() => any) | undefined;
+    }>, {
+    enabled: boolean;
+    clearable: boolean;
+    }, {}, {}, {}, string, ComponentProvideOptions, false, {
+    fileInputRef: HTMLInputElement;
+    }, any>;
     readonly 'df-input': DefineComponent<DfInputProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
     "update:modelValue": (value: any) => any;
     "click:clear": () => any;
@@ -855,16 +897,36 @@ export declare interface FileComms {
     upload: (file: File, progressCallback?: FileProgressCallback) => Promise<string>;
     /**
      * delete is called when the file is removed from the input and needs to be deleted at the backend
+     *
+     * throw {@link FileGoneError} if the backend reports the file identifier is already gone; any other thrown
+     * error is treated as a transient failure
+     *
      * @param fileIdentifier the identifier that was returned by upload
      */
     delete: (fileIdentifier: string) => Promise<void>;
     /**
-     * touch is called once per minute to let the backend know that the file is still in play and must not be discarded
+     * touch is called at a regular interval (see the `touchInterval` prop / `defaultTouchInterval` setting) to let
+     * the backend know that the file is still in play and must not be discarded
+     *
+     * throw {@link FileGoneError} if the backend reports the file identifier no longer exists; any other thrown
+     * error is treated as a transient failure and left to the consumer to act on, if at all
+     *
      * @param fileIdentifier the identifier that was returned by upload
      */
     touch: (fileIdentifier: string) => Promise<void>;
 }
 
+/**
+ * Thrown by `FileComms.touch` or `FileComms.delete` when the backend confirms the file identifier no longer
+ * exists there (e.g. its keep-alive TTL expired). The component reacts to this specific type by clearing the
+ * field and, where a `control` is bound, showing `errorText` as a validation error. Any other thrown error is
+ * treated as transient and left entirely to the consumer.
+ */
+export declare class FileGoneError extends Error {
+    errorText: string;
+    constructor(errorText: string);
+}
+
 export declare type FileProgressCallback = (loaded: number, total: number) => void;
 
 export declare function getBreakpointName(dp: ReturnType<typeof useDisplay>): BreakpointNames;
@@ -916,6 +978,13 @@ export declare interface SelectChoice {
 
 export declare type SelectFetchChoices<T1 = any, T2 = any> = (queryValue?: T1, idValue?: T2) => Promise<SelectChoice[]>;
 
+/**
+ * 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
+ * goes through `Form.FieldBase`'s own setter, the same way `useInputBase`'s `touched` does.
+ */
+export declare function setFileGoneError(control: default_2.FieldBase | undefined, errorText: string): void;
+
 declare type ShowAsGroup = 'no' | 'grouped' | 'grouped-no-borders';
 
 export declare const translatableStrings: {
@@ -962,6 +1031,8 @@ export declare const translatableStrings: {
     ImageUrl: string;
     ImageUpload: string;
     ImageInsert: string;
+    ImageDropHint: string;
+    ImageReplace: string;
     Table: string;
     TableInsert: string;
     TableAddRowAbove: string;
@@ -982,6 +1053,17 @@ export declare function translateStrings(translationCallback: (s: string) => str
 
 export declare function useBreakpoint(): ComputedRef<"xs" | "sm" | "md" | "lg" | "xl">;
 
+/**
+ * Runs the `comms.touch` keep-alive interval for `<df-file>`/`<df-image>` while `value` holds a file
+ * identifier: starts it once `value` becomes truthy, stops it once it doesn't, and stops it on unmount.
+ * `onGone` is called with `err.errorText` whenever a touch rejects with a {@link FileGoneError}; any other
+ * rejection is left unhandled beyond that (it's a transient failure, for the consumer to act on if at all).
+ */
+export declare function useFileTouchKeepAlive(value: Ref<string | null>, comms: () => FileComms, touchIntervalProp: () => number | undefined, onGone: (errorText: string) => void): {
+    setupTouchInterval: () => void;
+    clearTouchInterval: () => void;
+};
+
 export declare function useInputBase<T = any>(props: BaseProps<T>, emit: BaseEmits<T>): {
     value: WritableComputedRef<T, T>;
     valid: ComputedRef<boolean>;
@@ -1050,6 +1132,9 @@ export declare type VuetifyDensity = 'default' | 'comfortable' | 'compact';
 export declare interface VuetifyInputsSettings {
     defaultVariant?: FieldVariant;
     defaultDensity?: FieldDensity;
+    /** 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;
 }
 
 export declare const vuetifyInputsSettingsKey: unique symbol;

package/package.json

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