@fastkit/vui 0.18.30 → 0.18.32

package/src/components/VTextarea/VTextarea.tsx

@@ -37,6 +37,7 @@ export const VTextarea = defineComponent({
     ...slots(),
   },
   emits,
+  // eslint-disable-next-line no-shadow
   setup(props, ctx) {
     const vui = useVui();
     const inputControl = useTextareaNodeControl(props, ctx, {
@@ -50,27 +51,22 @@ export const VTextarea = defineComponent({
       control: inputControl,
     });
 
-    const defaultSlot = () => {
-      return (
-        <VControlField
-          class="v-textarea__input"
-          size={control.size.value}
-          autoHeight
-          startAdornment={props.startAdornment}
-          endAdornment={props.endAdornment}
-          // onClickHost={(ev) => {
-          //   this.focus();
-          // }}
-          v-slots={{
-            ...ctx.slots,
-            default: () =>
-              inputControl.createInputElement({
-                class: 'v-textarea__input__element',
-              }),
-          }}
-        />
-      );
-    };
+    const defaultSlot = () => (
+      <VControlField
+        class="v-textarea__input"
+        size={control.size.value}
+        autoHeight
+        startAdornment={props.startAdornment}
+        endAdornment={props.endAdornment}
+        v-slots={{
+          ...ctx.slots,
+          default: () =>
+            inputControl.createInputElement({
+              class: 'v-textarea__input__element',
+            }),
+        }}
+      />
+    );
 
     const infoAppendsSlot = () => {
       const { counterResult } = inputControl;
@@ -78,27 +74,24 @@ export const VTextarea = defineComponent({
       return <VTextCounter {...counterResult} />;
     };
 
-    return () => {
-      return (
-        <VFormControl
-          nodeControl={inputControl}
-          // focused={inputControl.focused}
-          class={['v-textarea', control.classes.value]}
-          label={props.label}
-          hint={props.hint}
-          hinttip={props.hinttip}
-          hiddenInfo={props.hiddenInfo}
-          requiredChip={props.requiredChip}
-          onClickLabel={(ev) => {
-            inputControl.focus();
-          }}
-          v-slots={{
-            ...ctx.slots,
-            default: defaultSlot,
-            infoAppends: infoAppendsSlot,
-          }}
-        />
-      );
-    };
+    return () => (
+      <VFormControl
+        nodeControl={inputControl}
+        class={['v-textarea', control.classes.value]}
+        label={props.label}
+        hint={props.hint}
+        hinttip={props.hinttip}
+        hiddenInfo={props.hiddenInfo}
+        requiredChip={props.requiredChip}
+        onClickLabel={(ev) => {
+          inputControl.focus();
+        }}
+        v-slots={{
+          ...ctx.slots,
+          default: defaultSlot,
+          infoAppends: infoAppendsSlot,
+        }}
+      />
+    );
   },
 });

package/src/components/VToolbar/VToolbar.tsx

@@ -21,21 +21,17 @@ export const VToolbar = defineComponent({
       variant: () => props.variant || vui.setting('containedVariant'),
     });
 
-    const classes = computed(() => {
-      return [
-        elevation.elevationClassName.value,
-        color.colorClasses.value,
-        {
-          'v-toolbar--plain': !color.color.value.value,
-          'v-toolbar--dense': dense.value,
-        },
-      ];
-    });
+    const classes = computed(() => [
+      elevation.elevationClassName.value,
+      color.colorClasses.value,
+      {
+        'v-toolbar--plain': !color.color.value.value,
+        'v-toolbar--dense': dense.value,
+      },
+    ]);
 
-    return () => {
-      return (
-        <div class={['v-toolbar', classes.value]}>{ctx.slots.default?.()}</div>
-      );
-    };
+    return () => (
+      <div class={['v-toolbar', classes.value]}>{ctx.slots.default?.()}</div>
+    );
   },
 });

package/src/components/VToolbar/VToolbarMenu.tsx

@@ -6,6 +6,7 @@ import { useVui } from '../../injections';
 // @TODO Unable to resolve dts for `navigationableInheritProps`.
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
+// eslint-disable-next-line import/order
 import { RouteLocationRaw } from 'vue-router';
 
 export type VToolbarMenuEdge = 'start' | 'end';

package/src/components/VTooltip/VTooltip.tsx

@@ -27,13 +27,9 @@ export const VTooltip = defineComponent({
           class="v-tooltip"
           v-slots={{
             ...ctx.slots,
-            default: (payload) => {
-              return [
-                <span class="v-tooltip__inner">
-                  {defaultSlot && defaultSlot(payload)}
-                </span>,
-              ];
-            },
+            default: (payload) => [
+              <span class="v-tooltip__inner">{defaultSlot?.(payload)}</span>,
+            ],
           }}
         />
       );

package/src/composables/control.ts

@@ -6,13 +6,13 @@ import {
   provide,
   inject,
 } from 'vue';
+import { createPropsOptions } from '@fastkit/vue-utils';
 import {
   ControlSize,
   CONTROL_SIZES,
   ControlFieldVariant,
   CONTROL_FIELD_VARIANTS,
 } from '../schemes';
-import { createPropsOptions } from '@fastkit/vue-utils';
 import {
   VuiControlInjectionKey,
   VuiControlFieldInjectionKey,
@@ -52,16 +52,10 @@ export function useControl(
   const { defaultSize = 'md' } = opts;
   const parentControl = inject(VuiControlInjectionKey, null);
   const size = computed(() => {
-    const psize = props.size;
-    return psize
-      ? psize
-      : parentControl
-      ? parentControl.size.value
-      : defaultSize;
-  });
-  const classes = computed(() => {
-    return ['v-control', `v-control--${size.value}`];
+    const propSize = props.size;
+    return propSize || (parentControl ? parentControl.size.value : defaultSize);
   });
+  const classes = computed(() => ['v-control', `v-control--${size.value}`]);
   const provider: ControlProvider = {
     parentControl,
     size,
@@ -103,12 +97,11 @@ export function useControlField(
   const { defaultVariant = 'flat' } = opts;
   const parentControlField = inject(VuiControlFieldInjectionKey, null);
   const variant = computed(() => {
-    const pvariant = props.variant;
-    return pvariant
-      ? pvariant
-      : parentControlField
-      ? parentControlField.variant.value
-      : defaultVariant;
+    const propVariant = props.variant;
+    return (
+      propVariant ||
+      (parentControlField ? parentControlField.variant.value : defaultVariant)
+    );
   });
   const provider: ControlFieldProvider = {
     parentControlField,

package/src/composables/form-selector.tsx

@@ -71,6 +71,7 @@ export function defineFormSelectorComponent(
     },
     slots,
     emits,
+    // eslint-disable-next-line no-shadow
     setup(props, ctx) {
       const selectorControl = useFormSelectorControl(props, ctx, {
         nodeType,
@@ -103,79 +104,72 @@ export function defineFormSelectorComponent(
         return slot && slot(vui);
       });
 
-      const defaultSlot = () => {
-        return (
-          <div class="v-form-selector__body">
-            {selectorControl.itemsLoadFailed && (
-              <div
-                key="failed"
-                class="v-form-selector__placeholder v-form-selector__placeholder--error">
-                {failedToLoadItemsMessageRef.value}
-              </div>
-            )}
-            {selectorControl.itemsLoading && (
-              <div key="loading" class="v-form-selector__placeholder">
-                <VProgressCircular
-                  indeterminate
-                  class="mr-1"
-                  size={
-                    CONTROL_LOADING_SPINNER_SIZES[control.size.value || 'md']
-                  }
-                />
+      const defaultSlot = () => (
+        <div class="v-form-selector__body">
+          {selectorControl.itemsLoadFailed && (
+            <div
+              key="failed"
+              class="v-form-selector__placeholder v-form-selector__placeholder--error">
+              {failedToLoadItemsMessageRef.value}
+            </div>
+          )}
+          {selectorControl.itemsLoading && (
+            <div key="loading" class="v-form-selector__placeholder">
+              <VProgressCircular
+                indeterminate
+                class="mr-1"
+                size={CONTROL_LOADING_SPINNER_SIZES[control.size.value || 'md']}
+              />
 
-                {loadingMessageRef.value}
-              </div>
-            )}
-            {selectorControl.propGroups.map((group) => {
-              const { items } = group;
-              return (
-                <>
-                  {items.map((attrs) => {
-                    const selected = selectorControl.isSelected(attrs.value);
-                    return itemRenderer({
-                      selected,
-                      control: selectorControl,
-                      attrs: {
-                        ...attrs,
-                        modelValue: selected,
-                        key: attrs.value,
-                      },
-                      slots: {
-                        default: () => attrs.label(selectorControl),
-                      },
-                    });
-                  })}
-                </>
-              );
-            })}
-            {ctx.slots.default?.()}
-          </div>
-        );
-      };
+              {loadingMessageRef.value}
+            </div>
+          )}
+          {selectorControl.propGroups.map((group) => {
+            const { items } = group;
+            return (
+              <>
+                {items.map((attrs) => {
+                  const selected = selectorControl.isSelected(attrs.value);
+                  return itemRenderer({
+                    selected,
+                    control: selectorControl,
+                    attrs: {
+                      ...attrs,
+                      modelValue: selected,
+                      key: attrs.value,
+                    },
+                    slots: {
+                      default: () => attrs.label(selectorControl),
+                    },
+                  });
+                })}
+              </>
+            );
+          })}
+          {ctx.slots.default?.()}
+        </div>
+      );
 
       ctx.expose({
         control: selectorControl,
       });
 
-      return () => {
-        return (
-          <VFormControl
-            nodeControl={selectorControl}
-            // focused={selectorControl.focused}
-            hiddenInfo={props.hiddenInfo}
-            class={classes.value}
-            label={props.label}
-            hint={props.hint}
-            hinttip={props.hinttip}
-            requiredChip={props.requiredChip}
-            error={selectorControl.itemsLoadFailed}
-            v-slots={{
-              ...ctx.slots,
-              default: defaultSlot,
-            }}
-          />
-        );
-      };
+      return () => (
+        <VFormControl
+          nodeControl={selectorControl}
+          hiddenInfo={props.hiddenInfo}
+          class={classes.value}
+          label={props.label}
+          hint={props.hint}
+          hinttip={props.hinttip}
+          requiredChip={props.requiredChip}
+          error={selectorControl.itemsLoadFailed}
+          v-slots={{
+            ...ctx.slots,
+            default: defaultSlot,
+          }}
+        />
+      );
     },
   });
 }

package/src/composables/vui.ts

@@ -1,7 +1,8 @@
 import { ComputedRef } from 'vue';
-export type { VuiService } from '../service';
 import { ScopeName } from '@fastkit/color-scheme';
 
+export type { VuiService } from '../service';
+
 export interface VuiColorProvider {
   primary: ComputedRef<ScopeName>;
   error: ComputedRef<ScopeName>;

package/src/injections.ts

@@ -6,19 +6,19 @@ import type {
   VuiColorProvider,
 } from './composables';
 
-export const VuiInjectionKey: InjectionKey<VuiService> = Symbol();
+export const VuiInjectionKey: InjectionKey<VuiService> = Symbol('Vui');
 
-export const VuiControlInjectionKey: InjectionKey<ControlProvider> = Symbol();
+export const VuiControlInjectionKey: InjectionKey<ControlProvider> =
+  Symbol('VuiControl');
 
 export const VuiControlFieldInjectionKey: InjectionKey<ControlFieldProvider> =
-  Symbol();
+  Symbol('VuiControlField');
 
 export const VuiColorProviderInjectionKey: InjectionKey<VuiColorProvider> =
-  Symbol();
+  Symbol('VuiColorProvider');
 
 export const VUI_TEXT_FIELD_SYMBOL = 'vui-text-field';
 export const VUI_TEXTAREA_SYMBOL = 'vui-textarea';
-// export const VUI_WYSIWYG_EDITOR_SYMBOL = 'vui-wysiwyg-editor';
 export const VUI_SELECT_SYMBOL = 'vui-select';
 export const VUI_OPTION_SYMBOL = 'vui-option';
 export const VUI_CHECKBOX_GROUP_SYMBOL = 'vui-checkbox-group';

package/src/plugin.tsx

@@ -1,11 +1,4 @@
 import { App } from 'vue';
-import {
-  VuiService,
-  VuiServiceOptions,
-  RawVuiServiceOptions,
-  mergeVuiServiceOptions,
-  VuiInjectionKey,
-} from './service';
 import {
   installVueStackPlugin,
   VueStackServiceOptions,
@@ -21,6 +14,13 @@ import { VueColorSchemePlugin } from '@fastkit/vue-color-scheme';
 import { installVueAppLayout } from '@fastkit/vue-app-layout';
 import { onAppUnmount } from '@fastkit/vue-utils';
 import { getDocumentScroller } from '@fastkit/vue-scroller';
+import {
+  VuiService,
+  VuiServiceOptions,
+  RawVuiServiceOptions,
+  mergeVuiServiceOptions,
+  VuiInjectionKey,
+} from './service';
 
 const scroller = getDocumentScroller();
 
@@ -78,6 +78,7 @@ export class VuiPlugin {
         options: {
           behavior: 'smooth',
         },
+        // eslint-disable-next-line no-shadow
         fn: (el, opts) => {
           const duration = opts?.behavior === 'smooth' ? undefined : 0;
           return scroller.toElement(el, {

package/src/service.tsx

@@ -1,8 +1,5 @@
-export { VuiInjectionKey } from './injections';
-
 import { VNodeChild, reactive, UnwrapNestedRefs } from 'vue';
 import { ScopeName, ColorVariant } from '@fastkit/color-scheme';
-import type { IconName, RawIconProp } from './components/VIcon';
 import {
   type VueStackService,
   type VStackControl,
@@ -18,13 +15,14 @@ import type { Router } from 'vue-router';
 import { RouterLink, useLink, UseLinkOptions } from 'vue-router';
 import { setDefaultRouterLink } from '@fastkit/vue-action';
 import { LocationService } from '@fastkit/vue-location';
-import { VForm } from './components/VForm';
-import { VTextField, TextFieldInput } from './components/VTextField';
 import {
   VueForm,
   FormNodeWrapperHinttipDelay,
 } from '@fastkit/vue-form-control';
 import { getDocumentScroller, UseScroller } from '@fastkit/vue-scroller';
+import { VForm } from './components/VForm';
+import { VTextField, TextFieldInput } from './components/VTextField';
+import type { IconName, RawIconProp } from './components/VIcon';
 import { ControlSize } from './schemes';
 import { VButton } from './components/VButton';
 import { VDialog } from './components/VDialog';
@@ -32,6 +30,8 @@ import { VSnackbar } from './components/VSnackbar';
 import { VMenu } from './components/VMenu';
 import { VSheetModal } from './components/VSheetModal';
 
+export { VuiInjectionKey } from './injections';
+
 export type UseLinkResult = ReturnType<typeof useLink>;
 
 type VDialogProps = InstanceType<typeof VDialog>['$props'];
@@ -198,19 +198,33 @@ export class VuiService {
   readonly options: VuiServiceOptions;
 
   readonly selectionSeparator: VuiVNodeResolver;
+
   readonly autoScrollToElementOffsetTop?: number | (() => number | undefined);
+
   readonly textareaRows?: number;
+
   readonly requiredChip?: VuiVNodeResolver;
+
   readonly router: Router;
+
   readonly location: LocationService;
+
   readonly stack: VueStackService;
+
   readonly useLink: typeof useLink;
+
   readonly stackActions: VStackBuiltinActions;
+
   readonly dialog: StackableLauncher<typeof VDialog>;
+
   readonly alert: StackableLauncher<typeof VDialog>;
+
   readonly confirm: StackableLauncher<typeof VDialog, boolean>;
+
   readonly snackbar: StackableLauncher<typeof VSnackbar>;
+
   readonly menu: StackableLauncher<typeof VMenu>;
+
   readonly sheet: StackableLauncher<typeof VSheetModal>;
 
   get scroller(): UseScroller {
@@ -353,29 +367,27 @@ export class VuiService {
       }),
     ];
 
-    return this.dialog(options, (stack) => {
-      return (
-        <VForm
-          disableAutoScroll
-          size={size}
-          // onVnodeMounted={(vnode) => {
-          //   form = (vnode.component as any).ctx.form as VueForm;
-          // }}
-          onVnodeBeforeUnmount={() => {
-            form = undefined;
-          }}
-          onSubmit={(ev) => {
-            stack.resolve(_state);
-          }}
-          v-slots={{
-            default: (_form) => {
-              form = _form;
-              return slot(_state, { form, stack });
-            },
-          }}
-        />
-      );
-    });
+    return this.dialog(options, (stack) => (
+      <VForm
+        disableAutoScroll
+        size={size}
+        // onVnodeMounted={(vnode) => {
+        //   form = (vnode.component as any).ctx.form as VueForm;
+        // }}
+        onVnodeBeforeUnmount={() => {
+          form = undefined;
+        }}
+        onSubmit={(ev) => {
+          stack.resolve(_state);
+        }}
+        v-slots={{
+          default: (_form) => {
+            form = _form;
+            return slot(_state, { form, stack });
+          },
+        }}
+      />
+    ));
   }
 
   prompt(rawOptions: RawVuiPromptOptions = {}) {
@@ -410,9 +422,7 @@ export class VuiService {
         },
       },
       (state) => <VTextField {...options.input} v-model={state.input} />,
-    ).then((result) => {
-      return result ? result.input : result;
-    });
+    ).then((result) => (result ? result.input : result));
   }
 
   stackAction(
@@ -424,9 +434,9 @@ export class VuiService {
     const _onClick = BUILTIN_ACTION_HANDLERS[key];
     const action: VStackAction = {
       key,
+      // eslint-disable-next-line no-shadow
       content: ({ control, key }) => {
         const onClick = (ev: MouseEvent) => _onClick(control, ev);
-        control.guardInProgress;
 
         const _attrs: any = {
           disabled: control.guardInProgress,