@fastkit/vui 0.7.33 → 0.7.36

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, {
@@ -4366,29 +4361,57 @@ class VuiService {
         return vue.createVNode(VForm, {
           "disableAutoScroll": true,
           "size": size,
-          "onVnodeMounted": vnode => {
-            form = vnode.component.ctx.form;
-          },
           "onVnodeBeforeUnmount": () => {
             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 => {
+            form = _form;
+            return 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) {

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, {
@@ -4366,29 +4361,57 @@ class VuiService {
         return vue.createVNode(VForm, {
           "disableAutoScroll": true,
           "size": size,
-          "onVnodeMounted": vnode => {
-            form = vnode.component.ctx.form;
-          },
           "onVnodeBeforeUnmount": () => {
             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 => {
+            form = _form;
+            return 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) {

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';
@@ -4609,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>;
@@ -4644,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;
@@ -4697,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;
@@ -4818,7 +4821,7 @@ export declare const VFormControl: DefineComponent<{
 }>;
 
 export declare interface VFormSlots {
-    default: VueForm;
+    default: VueForm_2;
 }
 
 export declare const VGridContainer: DefineComponent<{
@@ -10044,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 {
@@ -10152,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 {

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, {
@@ -4361,29 +4356,57 @@ class VuiService {
         return createVNode(VForm, {
           "disableAutoScroll": true,
           "size": size,
-          "onVnodeMounted": vnode => {
-            form = vnode.component.ctx.form;
-          },
           "onVnodeBeforeUnmount": () => {
             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 => {
+            form = _form;
+            return 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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.7.33",
+  "version": "0.7.36",
   "description": "@fastkit/vui",
   "buildOptions": {
     "name": "Vui",
@@ -32,11 +32,11 @@
     "vue": "^3.2.26"
   },
   "dependencies": {
-    "@fastkit/color-scheme": "0.7.33",
-    "@fastkit/icon-font": "0.7.33",
-    "@fastkit/tiny-logger": "0.7.33",
-    "@fastkit/vite-kit": "0.7.33",
-    "@fastkit/vue-kit": "0.7.33",
+    "@fastkit/color-scheme": "0.7.36",
+    "@fastkit/icon-font": "0.7.36",
+    "@fastkit/tiny-logger": "0.7.36",
+    "@fastkit/vite-kit": "0.7.36",
+    "@fastkit/vue-kit": "0.7.36",
     "@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/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 }),
@@ -290,28 +292,63 @@ export class VuiService {
           <VForm
             disableAutoScroll
             size={size}
-            onVnodeMounted={(vnode) => {
-              form = (vnode.component as any).ctx.form as VueForm;
-            }}
+            // onVnodeMounted={(vnode) => {
+            //   form = (vnode.component as any).ctx.form as VueForm;
+            // }}
             onVnodeBeforeUnmount={() => {
               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) => {
+                form = _form;
+                return 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;
+    });
+  }
 }