@fastkit/vui 0.7.31 → 0.7.34

package/dist/vui.cjs.js

@@ -4332,24 +4332,19 @@ class VuiService {
     return this.stack.snackbar(...args);
   }
 
-  prompt(rawOptions = {}) {
-    const options = typeof rawOptions === 'string' ? {
-      input: {
-        label: rawOptions
-      }
-    } : { ...rawOptions
-    };
-    options.input = { ...options.input
+  formPrompt(settings, slot) {
+    let form;
+    const options = {
+      dense: true,
+      ...settings
     };
-    options.dense = true;
-    let {
-      initialValue: value = ''
-    } = options.input;
     const {
-      size
-    } = options.input;
-    delete options.input.initialValue;
-    let form;
+      size,
+      state
+    } = options;
+
+    const _state = vue.reactive(state);
+
     options.actions = options.actions || [this.stack.action('cancel', undefined, {
       size
     }), this.stack.action('ok', undefined, {
@@ -4373,22 +4368,50 @@ class VuiService {
             form = undefined;
           },
           "onSubmit": ev => {
-            stack.resolve(value);
+            stack.resolve(_state);
           }
         }, {
-          default: () => [vue.createVNode(VTextField, vue.mergeProps(options.input, {
-            "modelValue": value,
-            "onChange": ev => {
-              stack.value = ev;
-              value = ev;
-            }
-          }), null)]
+          default: form => slot(_state, {
+            form,
+            stack
+          })
         });
       }
     });
     return this.dialog(resolved);
   }
 
+  prompt(rawOptions = {}) {
+    const options = typeof rawOptions === 'string' ? {
+      input: {
+        label: rawOptions
+      }
+    } : { ...rawOptions
+    };
+    options.input = { ...options.input
+    };
+    options.dense = true;
+    const {
+      initialValue: value = ''
+    } = options.input;
+    const {
+      size
+    } = options.input;
+    delete options.input.initialValue;
+    return this.formPrompt({
+      size,
+      ...options,
+      state: {
+        input: value
+      }
+    }, state => vue.createVNode(VTextField, vue.mergeProps(options.input, {
+      "modelValue": state.input,
+      "onUpdate:modelValue": $event => state.input = $event
+    }), null)).then(result => {
+      return result ? result.input : result;
+    });
+  }
+
 }
 
 function mergeVuiPluginOptions(base, override) {
@@ -4555,6 +4578,7 @@ exports.rawIconProp = rawIconProp;
 exports.renderNavigationItemInput = renderNavigationItemInput;
 exports.resolveNavigationItemInput = resolveNavigationItemInput;
 exports.resolveRawIconProp = resolveRawIconProp;
+exports.resolveRawWysiwygEditorTools = resolveRawWysiwygEditorTools;
 exports.useControl = useControl;
 exports.useControlField = useControlField;
 exports.useElevation = useElevation;

package/dist/vui.cjs.prod.js

@@ -4332,24 +4332,19 @@ class VuiService {
     return this.stack.snackbar(...args);
   }
 
-  prompt(rawOptions = {}) {
-    const options = typeof rawOptions === 'string' ? {
-      input: {
-        label: rawOptions
-      }
-    } : { ...rawOptions
-    };
-    options.input = { ...options.input
+  formPrompt(settings, slot) {
+    let form;
+    const options = {
+      dense: true,
+      ...settings
     };
-    options.dense = true;
-    let {
-      initialValue: value = ''
-    } = options.input;
     const {
-      size
-    } = options.input;
-    delete options.input.initialValue;
-    let form;
+      size,
+      state
+    } = options;
+
+    const _state = vue.reactive(state);
+
     options.actions = options.actions || [this.stack.action('cancel', undefined, {
       size
     }), this.stack.action('ok', undefined, {
@@ -4373,22 +4368,50 @@ class VuiService {
             form = undefined;
           },
           "onSubmit": ev => {
-            stack.resolve(value);
+            stack.resolve(_state);
           }
         }, {
-          default: () => [vue.createVNode(VTextField, vue.mergeProps(options.input, {
-            "modelValue": value,
-            "onChange": ev => {
-              stack.value = ev;
-              value = ev;
-            }
-          }), null)]
+          default: form => slot(_state, {
+            form,
+            stack
+          })
         });
       }
     });
     return this.dialog(resolved);
   }
 
+  prompt(rawOptions = {}) {
+    const options = typeof rawOptions === 'string' ? {
+      input: {
+        label: rawOptions
+      }
+    } : { ...rawOptions
+    };
+    options.input = { ...options.input
+    };
+    options.dense = true;
+    const {
+      initialValue: value = ''
+    } = options.input;
+    const {
+      size
+    } = options.input;
+    delete options.input.initialValue;
+    return this.formPrompt({
+      size,
+      ...options,
+      state: {
+        input: value
+      }
+    }, state => vue.createVNode(VTextField, vue.mergeProps(options.input, {
+      "modelValue": state.input,
+      "onUpdate:modelValue": $event => state.input = $event
+    }), null)).then(result => {
+      return result ? result.input : result;
+    });
+  }
+
 }
 
 function mergeVuiPluginOptions(base, override) {
@@ -4555,6 +4578,7 @@ exports.rawIconProp = rawIconProp;
 exports.renderNavigationItemInput = renderNavigationItemInput;
 exports.resolveNavigationItemInput = resolveNavigationItemInput;
 exports.resolveRawIconProp = resolveRawIconProp;
+exports.resolveRawWysiwygEditorTools = resolveRawWysiwygEditorTools;
 exports.useControl = useControl;
 exports.useControlField = useControlField;
 exports.useElevation = useElevation;

package/dist/vui.d.ts

@@ -70,6 +70,7 @@ import { TextareaControl } from '@fastkit/vue-kit';
 import { TextInputControl } from '@fastkit/vue-kit';
 import { TypedSlot } from '@fastkit/vue-kit';
 import { UnderlineOptions } from '@tiptap/extension-underline';
+import { UnwrapNestedRefs } from 'vue';
 import { useLink } from 'vue-router';
 import { ValidateTiming } from '@fastkit/vue-kit';
 import { ValidationResult } from '@fastkit/vue-kit';
@@ -81,9 +82,11 @@ import { VNodeChild } from 'vue';
 import { VNodeChildOrSlot } from '@fastkit/vue-kit';
 import { VNodeProps } from 'vue';
 import { VSnackbar } from '@fastkit/vue-kit';
+import { VStackControl } from '@fastkit/vue-kit';
 import { VTooltip } from '@fastkit/vue-kit';
 import { VueColorSchemePluginSettings } from '@fastkit/vue-kit';
-import { VueForm } from '@fastkit/vue-kit';
+import { VueForm } from '@fastkit/vue-form-control';
+import { VueForm as VueForm_2 } from '@fastkit/vue-kit';
 import { VueStackService } from '@fastkit/vue-kit';
 import { VueStackServiceOptions } from '@fastkit/vue-kit';
 import { WritableComputedRef } from 'vue';
@@ -1330,12 +1333,17 @@ export declare interface RawVuiServiceOptions extends Omit<Partial<VuiServiceOpt
 
 export declare type RawVuiServiceUISettings = Partial<VuiServiceUISettings>;
 
-declare type RawWysiwygEditorTool = WysiwygEditorTool | WysiwygEditorToolFactory<any>;
+export declare type RawWysiwygEditorTool = WysiwygEditorTool | WysiwygEditorToolFactory<any>;
 
 declare type RecursiveArray<T> = T | RecursiveArray<T>[];
 
 export declare function renderNavigationItemInput(input: NavigationItemInput, extraProps?: Record<string, unknown> & VNodeProps): JSX.Element;
 
+export declare interface ResolvedWysiwygEditorSettings {
+    tools: WysiwygEditorTool[];
+    extensions: Extensions;
+}
+
 export declare function resolveNavigationItemInput(input: NavigationItemInput): {
     label: VNodeChild;
     props: NavigationItemInput;
@@ -1343,6 +1351,8 @@ export declare function resolveNavigationItemInput(input: NavigationItemInput):
 
 export declare function resolveRawIconProp(payload: boolean, prop?: RawIconProp, extraProps?: Record<string, unknown> & VNodeProps): VNodeChild;
 
+export declare function resolveRawWysiwygEditorTools(raws: RawWysiwygEditorTool[], vui: VuiService): ResolvedWysiwygEditorSettings;
+
 declare interface Rule<C extends any = any> {
     <EC extends C = C>(constraints: Partial<EC>, overRides?: string | Partial<RuleSettings<EC>>): Rule<EC>;
     $name: string;
@@ -4602,7 +4612,7 @@ export declare const VForm: DefineComponent<{
         'v-form--pending': boolean;
         'v-form--submiting': boolean;
     })[]>;
-    form: VueForm;
+    form: VueForm_2;
     formRef: () => Ref<HTMLFormElement | null>;
     nativeAction: ComputedRef<string | undefined>;
     nodeControl: FormNodeControl<any, any>;
@@ -4637,8 +4647,8 @@ export declare const VForm: DefineComponent<{
     validateSelf: (force?: boolean | undefined) => Promise<ValidationResult>;
     validate: () => Promise<boolean>;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-    submit: (form: VueForm, ev: Event) => boolean;
-    'update:submiting': (submiting: boolean, form: VueForm) => boolean;
+    submit: (form: VueForm_2, ev: Event) => boolean;
+    'update:submiting': (submiting: boolean, form: VueForm_2) => boolean;
     'update:modelValue': (value: unknown) => boolean;
     'update:errors': (errors: FormNodeError[]) => boolean;
     change: (value: unknown) => boolean;
@@ -4690,8 +4700,8 @@ export declare const VForm: DefineComponent<{
 }> & {
     onBlur?: ((ev: FocusEvent) => any) | undefined;
     onChange?: ((value: unknown) => any) | undefined;
-    onSubmit?: ((form: VueForm, ev: Event) => any) | undefined;
-    "onUpdate:submiting"?: ((submiting: boolean, form: VueForm) => any) | undefined;
+    onSubmit?: ((form: VueForm_2, ev: Event) => any) | undefined;
+    "onUpdate:submiting"?: ((submiting: boolean, form: VueForm_2) => any) | undefined;
     "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
     "onUpdate:errors"?: ((errors: FormNodeError[]) => any) | undefined;
     onFocus?: ((ev: FocusEvent) => any) | undefined;
@@ -4811,7 +4821,7 @@ export declare const VFormControl: DefineComponent<{
 }>;
 
 export declare interface VFormSlots {
-    default: VueForm;
+    default: VueForm_2;
 }
 
 export declare const VGridContainer: DefineComponent<{
@@ -10037,6 +10047,15 @@ export declare const VuiControlInjectionKey: InjectionKey<ControlProvider>;
 
 export declare type VuiElevationValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
 
+export declare interface VuiFormPromptSettings<T extends {
+    [key: string]: any;
+} = {
+    [key: string]: any;
+}> extends Partial<VDialogProps> {
+    state: T;
+    size?: ControlSize;
+}
+
 export declare const VuiInjectionKey: InjectionKey<VuiService>;
 
 export declare class VuiPlugin {
@@ -10145,7 +10164,15 @@ export declare class VuiService {
     alert(...args: Parameters<VueStackService['alert']>): Promise<any>;
     confirm(...args: Parameters<VueStackService['confirm']>): Promise<any>;
     snackbar(...args: Parameters<VueStackService['snackbar']>): Promise<any>;
-    prompt(rawOptions?: RawVuiPromptOptions): Promise<any>;
+    formPrompt<T extends {
+        [key: string]: any;
+    } = {
+        [key: string]: any;
+    }>(settings: VuiFormPromptSettings<T>, slot: (state: UnwrapNestedRefs<T>, ctx: {
+        form: VueForm;
+        stack: VStackControl;
+    }) => VNodeChild): Promise<T | false | undefined>;
+    prompt(rawOptions?: RawVuiPromptOptions): Promise<string | false | undefined>;
 }
 
 export declare interface VuiServiceIconSettings {
@@ -10480,12 +10507,12 @@ export declare const VWysiwygEditor: DefineComponent<{
 
 export declare const WysiwygBulletListTool: WysiwygEditorToolFactory<BulletListOptions>;
 
-declare interface WysiwygEditorContext {
+export declare interface WysiwygEditorContext {
     editor: Editor;
     vui: VuiService;
 }
 
-declare interface WysiwygEditorTool {
+export declare interface WysiwygEditorTool {
     key: string;
     icon: IconName | ((ctx: WysiwygEditorContext) => IconName);
     active?: boolean | ((ctx: WysiwygEditorContext) => boolean);
@@ -10495,7 +10522,7 @@ declare interface WysiwygEditorTool {
     extensions?: Extensions;
 }
 
-declare type WysiwygEditorToolFactory<Options = void> = (vui: VuiService, options?: Options) => WysiwygEditorTool | WysiwygEditorTool[];
+export declare type WysiwygEditorToolFactory<Options = void> = (vui: VuiService, options?: Options) => WysiwygEditorTool | WysiwygEditorTool[];
 
 export declare const WysiwygFormatBoldTool: WysiwygEditorToolFactory<BoldOptions>;
 

package/dist/vui.mjs

@@ -1,7 +1,7 @@
 import { createPropsOptions, createFormControlSettings, defineSlotsProps, useFormControl, VTooltip, renderSlotOrEmpty, createFormSelectorSettings, createFormControlProps, useFormSelectorControl, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, resolveVNodeChildOrSlots, useParentFormNode, VMenu, createTextInputSettings, useTextInputControl, createTextareaSettings, useTextareaControl, createFormSettings, useForm, getDocumentScroller, useVScrollerRef, VScroller, useInjectTheme, VStackRoot, resolveVStackDynamicInput, VueColorSchemePlugin, installVueStackPlugin } from '@fastkit/vue-kit';
 export * from '@fastkit/vue-kit';
 export { VDialog, VMenu, VSnackbar, VTooltip } from '@fastkit/vue-kit';
-import { inject, computed, provide, createVNode, mergeProps, defineComponent, isVNode, cloneVNode, ref, watch, withDirectives, createTextVNode, Fragment, vShow, onBeforeUpdate, vModelSelect, onMounted, onBeforeUnmount, Transition } from 'vue';
+import { inject, computed, provide, createVNode, mergeProps, defineComponent, isVNode, cloneVNode, ref, watch, withDirectives, createTextVNode, Fragment, vShow, onBeforeUpdate, vModelSelect, onMounted, onBeforeUnmount, Transition, reactive } from 'vue';
 import { useRouter, RouterLink, useLink, useRoute } from 'vue-router';
 import { createPropsOptions as createPropsOptions$1, htmlAttributesPropOptions, defineSlotsProps as defineSlotsProps$1, renderSlotOrEmpty as renderSlotOrEmpty$1, navigationableInheritProps, VLink, isFragment, rawNumberPropType, resolveNumberish, resizeDirectiveArgument, VExpandTransition, LocationService, setDefaultRouterLink } from '@fastkit/vue-utils';
 import { getDocumentScroller as getDocumentScroller$1 } from '@fastkit/vue-scroller';
@@ -4327,24 +4327,19 @@ class VuiService {
     return this.stack.snackbar(...args);
   }
 
-  prompt(rawOptions = {}) {
-    const options = typeof rawOptions === 'string' ? {
-      input: {
-        label: rawOptions
-      }
-    } : { ...rawOptions
-    };
-    options.input = { ...options.input
+  formPrompt(settings, slot) {
+    let form;
+    const options = {
+      dense: true,
+      ...settings
     };
-    options.dense = true;
-    let {
-      initialValue: value = ''
-    } = options.input;
     const {
-      size
-    } = options.input;
-    delete options.input.initialValue;
-    let form;
+      size,
+      state
+    } = options;
+
+    const _state = reactive(state);
+
     options.actions = options.actions || [this.stack.action('cancel', undefined, {
       size
     }), this.stack.action('ok', undefined, {
@@ -4368,22 +4363,50 @@ class VuiService {
             form = undefined;
           },
           "onSubmit": ev => {
-            stack.resolve(value);
+            stack.resolve(_state);
           }
         }, {
-          default: () => [createVNode(VTextField, mergeProps(options.input, {
-            "modelValue": value,
-            "onChange": ev => {
-              stack.value = ev;
-              value = ev;
-            }
-          }), null)]
+          default: form => slot(_state, {
+            form,
+            stack
+          })
         });
       }
     });
     return this.dialog(resolved);
   }
 
+  prompt(rawOptions = {}) {
+    const options = typeof rawOptions === 'string' ? {
+      input: {
+        label: rawOptions
+      }
+    } : { ...rawOptions
+    };
+    options.input = { ...options.input
+    };
+    options.dense = true;
+    const {
+      initialValue: value = ''
+    } = options.input;
+    const {
+      size
+    } = options.input;
+    delete options.input.initialValue;
+    return this.formPrompt({
+      size,
+      ...options,
+      state: {
+        input: value
+      }
+    }, state => createVNode(VTextField, mergeProps(options.input, {
+      "modelValue": state.input,
+      "onUpdate:modelValue": $event => state.input = $event
+    }), null)).then(result => {
+      return result ? result.input : result;
+    });
+  }
+
 }
 
 function mergeVuiPluginOptions(base, override) {
@@ -4455,4 +4478,4 @@ function installVuiPlugin(app, opts) {
   return app.use(VuiPlugin, opts);
 }
 
-export { CONTROL_FIELD_VARIANTS, CONTROL_SIZES, PAGINATION_ALIGNS, VApp, VBreadcrumbs, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VFormControl, VGridContainer, VGridItem, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSwitch, VSwitchGroup, VTabs, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VUI_WYSIWYG_EDITOR_SYMBOL, VWysiwygEditor, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, WysiwygBulletListTool, WysiwygFormatBoldTool, WysiwygFormatItalicTool, WysiwygFormatUnderlineTool, WysiwygHistoryTool, WysiwygLinkTool, WysiwygOrderedListTool, WysiwygTextColorTool, configureDataTableDefaults, createCardProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, mergeVuiPluginOptions, mergeVuiServiceIconSettings, mergeVuiServiceOptions, mergeVuiServiceUISettings, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };
+export { CONTROL_FIELD_VARIANTS, CONTROL_SIZES, PAGINATION_ALIGNS, VApp, VBreadcrumbs, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VFormControl, VGridContainer, VGridItem, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSwitch, VSwitchGroup, VTabs, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VUI_WYSIWYG_EDITOR_SYMBOL, VWysiwygEditor, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, WysiwygBulletListTool, WysiwygFormatBoldTool, WysiwygFormatItalicTool, WysiwygFormatUnderlineTool, WysiwygHistoryTool, WysiwygLinkTool, WysiwygOrderedListTool, WysiwygTextColorTool, configureDataTableDefaults, createCardProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, mergeVuiPluginOptions, mergeVuiServiceIconSettings, mergeVuiServiceOptions, mergeVuiServiceUISettings, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, resolveRawWysiwygEditorTools, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.7.31",
+  "version": "0.7.34",
   "description": "@fastkit/vui",
   "buildOptions": {
     "name": "Vui",
@@ -32,11 +32,11 @@
     "vue": "^3.2.26"
   },
   "dependencies": {
-    "@fastkit/color-scheme": "0.7.31",
-    "@fastkit/icon-font": "0.7.31",
-    "@fastkit/tiny-logger": "0.7.31",
-    "@fastkit/vite-kit": "0.7.31",
-    "@fastkit/vue-kit": "0.7.31",
+    "@fastkit/color-scheme": "0.7.34",
+    "@fastkit/icon-font": "0.7.34",
+    "@fastkit/tiny-logger": "0.7.34",
+    "@fastkit/vite-kit": "0.7.34",
+    "@fastkit/vue-kit": "0.7.34",
     "@tiptap/extension-link": "^2.0.0-beta.36",
     "@tiptap/extension-underline": "^2.0.0-beta.23",
     "@tiptap/starter-kit": "^2.0.0-beta.183",

package/src/components/VWysiwygEditor/index.ts

@@ -1,2 +1,3 @@
 export * from './VWysiwygEditor';
 export * from './tools';
+export * from './schemes';

package/src/service.tsx

@@ -1,12 +1,13 @@
 export { VuiInjectionKey } from './injections';
 
-import { VNodeChild } from 'vue';
+import { VNodeChild, reactive, UnwrapNestedRefs } from 'vue';
 import { ScopeName, ColorVariant } from '@fastkit/color-scheme';
 import type { IconName, RawIconProp } from './components/VIcon';
 import {
   type VueColorSchemePluginSettings,
   type VueStackService,
   type VDialogProps,
+  type VStackControl,
   resolveVStackDynamicInput,
 } from '@fastkit/vue-kit';
 import type { Router } from 'vue-router';
@@ -16,6 +17,14 @@ import { VForm } from './components/VForm';
 import { VTextField, TextFieldInput } from './components/VTextField';
 import { VueForm, FormControlHinttipDelay } from '@fastkit/vue-form-control';
 import { getDocumentScroller } from '@fastkit/vue-scroller';
+import { ControlSize } from './schemes';
+
+export interface VuiFormPromptSettings<
+  T extends { [key: string]: any } = { [key: string]: any },
+> extends Partial<VDialogProps> {
+  state: T;
+  size?: ControlSize;
+}
 
 export interface VuiPromptOptions extends Partial<VDialogProps> {
   input?: Omit<TextFieldInput, 'modelValue'> & { initialValue?: string };
@@ -245,30 +254,23 @@ export class VuiService {
     return this.stack.snackbar(...args);
   }
 
-  prompt(rawOptions: RawVuiPromptOptions = {}) {
-    const options: VuiPromptOptions =
-      typeof rawOptions === 'string'
-        ? {
-            input: {
-              label: rawOptions,
-            },
-          }
-        : {
-            ...rawOptions,
-          };
+  formPrompt<T extends { [key: string]: any } = { [key: string]: any }>(
+    settings: VuiFormPromptSettings<T>,
+    slot: (
+      state: UnwrapNestedRefs<T>,
+      ctx: { form: VueForm; stack: VStackControl },
+    ) => VNodeChild,
+  ): Promise<T | false | undefined> {
+    let form: VueForm | undefined;
 
-    options.input = {
-      ...options.input,
+    const options = {
+      dense: true,
+      ...settings,
     };
 
-    options.dense = true;
+    const { size, state } = options;
 
-    let { initialValue: value = '' } = options.input;
-    const { size } = options.input;
-
-    delete options.input.initialValue;
-
-    let form: VueForm | undefined;
+    const _state = reactive(state);
 
     options.actions = options.actions || [
       this.stack.action('cancel', undefined, { size }),
@@ -297,21 +299,53 @@ export class VuiService {
               form = undefined;
             }}
             onSubmit={(ev) => {
-              stack.resolve(value);
-            }}>
-            <VTextField
-              {...options.input}
-              modelValue={value}
-              onChange={(ev) => {
-                stack.value = ev;
-                value = ev;
-              }}
-            />
-          </VForm>
+              stack.resolve(_state);
+            }}
+            v-slots={{
+              default: (form) => slot(_state, { form, stack }),
+            }}
+          />
         );
       },
     });
 
     return this.dialog(resolved);
   }
+
+  prompt(rawOptions: RawVuiPromptOptions = {}) {
+    const options: VuiPromptOptions =
+      typeof rawOptions === 'string'
+        ? {
+            input: {
+              label: rawOptions,
+            },
+          }
+        : {
+            ...rawOptions,
+          };
+
+    options.input = {
+      ...options.input,
+    };
+
+    options.dense = true;
+
+    const { initialValue: value = '' } = options.input;
+    const { size } = options.input;
+
+    delete options.input.initialValue;
+
+    return this.formPrompt(
+      {
+        size,
+        ...options,
+        state: {
+          input: value,
+        },
+      },
+      (state) => <VTextField {...options.input} v-model={state.input} />,
+    ).then((result) => {
+      return result ? result.input : result;
+    });
+  }
 }