@fastkit/vui 0.18.30 → 0.18.32

package/src/components/VSelect/VSelect.tsx

@@ -22,6 +22,7 @@ import {
   resolveVNodeChildOrSlots,
 } from '@fastkit/vue-utils';
 import { useKeyboard } from '@fastkit/vue-keyboard';
+import { VStackActivatorPayload, MenuAPI } from '@fastkit/vue-stack';
 import { VFormControl } from '../VFormControl';
 import {
   VControlField,
@@ -37,11 +38,9 @@ import {
 import { VUI_SELECT_SYMBOL, useVui } from '../../injections';
 import { VIcon } from '../VIcon';
 import { VMenu } from '../VMenu';
-import { VStackActivatorPayload } from '@fastkit/vue-stack';
 import { VOptionGroup } from '../VOptionGroup';
 import { VOption } from '../VOption';
 import { VButton } from '../VButton';
-import { MenuAPI } from '@fastkit/vue-stack';
 
 export const ARROW_KEY_TYPES = useKeyboard.Key(['ArrowUp', 'ArrowDown']);
 
@@ -84,6 +83,7 @@ export const VSelect = defineComponent({
   },
   slots,
   emits,
+  // eslint-disable-next-line no-shadow
   setup(props, ctx) {
     const menuRef: Ref<{ menu: MenuAPI } | null> = ref(null);
     const menuOpened = ref(false);
@@ -247,6 +247,7 @@ export const VSelect = defineComponent({
       );
 
       if (currentEl) {
+        // eslint-disable-next-line no-shadow
         const ev = new MouseEvent('click', {
           view: window,
           bubbles: true,
@@ -288,24 +289,22 @@ export const VSelect = defineComponent({
 
     return () => {
       const children = ctx.slots.default?.() || [];
-      const propGroups = inputControl.propGroups.map((group) => {
-        return (
-          <VOptionGroup
-            key={group.id}
-            groupId={group.id}
-            label={group.label(inputControl)}
-            disabled={group.disabled}>
-            {group.items.map((item) => (
-              <VOption
-                disabled={item.disabled}
-                value={item.value}
-                key={item.value}>
-                {item.label(inputControl)}
-              </VOption>
-            ))}
-          </VOptionGroup>
-        );
-      });
+      const propGroups = inputControl.propGroups.map((group) => (
+        <VOptionGroup
+          key={group.id}
+          groupId={group.id}
+          label={group.label(inputControl)}
+          disabled={group.disabled}>
+          {group.items.map((item) => (
+            <VOption
+              disabled={item.disabled}
+              value={item.value}
+              key={item.value}>
+              {item.label(inputControl)}
+            </VOption>
+          ))}
+        </VOptionGroup>
+      ));
 
       const classes = computed(() => [
         'v-select',
@@ -315,32 +314,28 @@ export const VSelect = defineComponent({
         },
       ]);
 
-      const controlDefaultSlot = () => {
-        return [
-          <select
-            class="v-select__input__element"
-            name={inputControl.name}
-            tabindex={inputControl.tabindex}
-            disabled={inputControl.isDisabled}
-            multiple={inputControl.multiple}
-            onFocus={inputControl.focusHandler}
-            onBlur={inputControl.blurHandler}
-            v-model={inputControl.value}>
-            {inputControl.items.map((item) => {
-              return (
-                <option value={item.propValue} key={item.propValue}>
-                  {item.renderDefaultSlot()}
-                </option>
-              );
-            })}
-          </select>,
-          <div class="v-select__selections">
-            <div class="v-select__selections__inner">
-              {renderSelections(inputControl.selectedItems)}
-            </div>
-          </div>,
-        ];
-      };
+      const controlDefaultSlot = () => [
+        <select
+          class="v-select__input__element"
+          name={inputControl.name}
+          tabindex={inputControl.tabindex}
+          disabled={inputControl.isDisabled}
+          multiple={inputControl.multiple}
+          onFocus={inputControl.focusHandler}
+          onBlur={inputControl.blurHandler}
+          v-model={inputControl.value}>
+          {inputControl.items.map((item) => (
+            <option value={item.propValue} key={item.propValue}>
+              {item.renderDefaultSlot()}
+            </option>
+          ))}
+        </select>,
+        <div class="v-select__selections">
+          <div class="v-select__selections__inner">
+            {renderSelections(inputControl.selectedItems)}
+          </div>
+        </div>,
+      ];
 
       const endAdornmentSlot = () => {
         if (inputControl.itemsLoadFailed) {
@@ -380,41 +375,39 @@ export const VSelect = defineComponent({
         );
       };
 
-      const menuActivatorSlot = ({ control: menu }: VStackActivatorPayload) => {
-        return (
-          <VControlField
-            class="v-select__input"
-            ref={fieldRef}
-            loading={inputControl.itemsLoading}
-            error={inputControl.itemsLoadFailed}
-            startAdornment={props.startAdornment}
-            endAdornment={props.endAdornment}
-            size={control.size.value}
-            focused={menuOpened.value}
-            autoHeight={inputControl.multiple}
-            onClick={(ev) => {
-              if (inputControl.canOperation && !menu.isActive) {
-                let t = ev.target as HTMLElement;
-                const count = 0;
-                let hit = false;
-                while (count < 5) {
-                  if (t.classList.contains('v-select__input')) {
-                    hit = true;
-                    break;
-                  }
-                  t = t.parentElement as HTMLElement;
+      const menuActivatorSlot = ({ control: menu }: VStackActivatorPayload) => (
+        <VControlField
+          class="v-select__input"
+          ref={fieldRef}
+          loading={inputControl.itemsLoading}
+          error={inputControl.itemsLoadFailed}
+          startAdornment={props.startAdornment}
+          endAdornment={props.endAdornment}
+          size={control.size.value}
+          focused={menuOpened.value}
+          autoHeight={inputControl.multiple}
+          onClick={(ev) => {
+            if (inputControl.canOperation && !menu.isActive) {
+              let t = ev.target as HTMLElement;
+              const count = 0;
+              let hit = false;
+              while (count < 5) {
+                if (t.classList.contains('v-select__input')) {
+                  hit = true;
+                  break;
                 }
-                menu.setActivator(hit ? t : ev).show();
+                t = t.parentElement as HTMLElement;
               }
-            }}
-            v-slots={{
-              ...ctx.slots,
-              default: controlDefaultSlot,
-              endAdornment: endAdornmentSlot,
-            }}
-          />
-        );
-      };
+              menu.setActivator(hit ? t : ev).show();
+            }
+          }}
+          v-slots={{
+            ...ctx.slots,
+            default: controlDefaultSlot,
+            endAdornment: endAdornmentSlot,
+          }}
+        />
+      );
 
       const menuSlots = {
         activator: menuActivatorSlot,
@@ -426,26 +419,23 @@ export const VSelect = defineComponent({
         ),
       };
 
-      const defaultSlot = () => {
-        return (
-          <VMenu
-            width="fit"
-            maxWidth="fit"
-            closeOnNavigation={props.closeOnNavigation}
-            distance={0}
-            alwaysRender
-            v-model={menuOpened.value}
-            ref={menuRef}
-            onClose={clearKeyFocused}
-            v-slots={menuSlots}
-          />
-        );
-      };
+      const defaultSlot = () => (
+        <VMenu
+          width="fit"
+          maxWidth="fit"
+          closeOnNavigation={props.closeOnNavigation}
+          distance={0}
+          alwaysRender
+          v-model={menuOpened.value}
+          ref={menuRef}
+          onClose={clearKeyFocused}
+          v-slots={menuSlots}
+        />
+      );
 
       return (
         <VFormControl
           nodeControl={inputControl}
-          // focused={this.nodeControl.focused}
           class={classes.value}
           label={props.label}
           hint={props.hint}

package/src/components/VSheetModal/VSheetModal.tsx

@@ -1,20 +1,11 @@
 import './VSheetModal.scss';
-import {
-  defineComponent,
-  // ExtractPropTypes,
-  PropType,
-  VNodeChild,
-  computed,
-} from 'vue';
+import { defineComponent, PropType, VNodeChild, computed } from 'vue';
 import {
   createStackableDefine,
   VStackSlots,
   VStackControl,
   useStackControl,
 } from '@fastkit/vue-stack';
-// import {  } from '../schemes';
-// import { useStackControl } from '../composables';
-// import { ExtractPropInput } from '@fastkit/vue-utils';
 
 const { props, emits } = createStackableDefine({
   defaultTransition: 'v-sheet-modal',
@@ -40,6 +31,7 @@ export const VSheetModal = defineComponent({
   inheritAttrs: false,
   props: sheetModalProps,
   emits,
+  // eslint-disable-next-line no-shadow
   setup(props, ctx) {
     const stackControl = useStackControl(props, ctx, {
       stackType: SHEET_STACK_TYPE,
@@ -57,32 +49,24 @@ export const VSheetModal = defineComponent({
     };
   },
   render() {
-    const {
-      render,
-      // color,
-    } = this.stackControl;
+    const { render } = this.stackControl;
     const headerSlot = this.$slots.header || this.header;
-    return render((children) => {
-      return (
-        <div
-          class={[
-            'v-sheet-modal',
-            {
-              'v-sheet-modal--has-active-child': this.hasActiveChild,
-            },
-            // color.colorClasses.value,
-          ]}
-          tabindex="0">
-          {headerSlot && (
-            <div class="v-sheet-modal__header">
-              {headerSlot(this.stackControl)}
-            </div>
-          )}
-          <div class="v-sheet-modal__scroller">{children}</div>
-        </div>
-      );
-    });
+    return render((children) => (
+      <div
+        class={[
+          'v-sheet-modal',
+          {
+            'v-sheet-modal--has-active-child': this.hasActiveChild,
+          },
+        ]}
+        tabindex="0">
+        {headerSlot && (
+          <div class="v-sheet-modal__header">
+            {headerSlot(this.stackControl)}
+          </div>
+        )}
+        <div class="v-sheet-modal__scroller">{children}</div>
+      </div>
+    ));
   },
 });
-
-// export type VSheetModalStatic = typeof VSheetModal;

package/src/components/VSnackbar/VSnackbar.tsx

@@ -5,9 +5,8 @@ import {
   createStackActionProps,
   useStackAction,
 } from '@fastkit/vue-stack';
-import { colorSchemeProps } from '@fastkit/vue-color-scheme';
+import { colorSchemeProps, useColorClasses } from '@fastkit/vue-color-scheme';
 import { useVui } from '../../injections';
-import { useColorClasses } from '@fastkit/vue-color-scheme';
 
 const colorProps = colorSchemeProps();
 
@@ -24,9 +23,8 @@ export const VSnackbar = defineSnackbarComponent({
       resolver: (actions) => {
         if (actions.length === 0) {
           return [vui.stackAction('close')];
-        } else {
-          return actions;
         }
+        return actions;
       },
     });
     const color = useColorClasses(props, { useRootThemeDefault: true });

package/src/components/VSwitch/VSwitch.tsx

@@ -17,6 +17,7 @@ export const VSwitch = defineComponent({
     ...createControlProps(),
   },
   emits,
+  // eslint-disable-next-line no-shadow
   setup(props, ctx) {
     const nodeControl = useFormSelectorItemControl(props, ctx, {
       nodeType: VUI_SWITCH_SYMBOL,
@@ -51,17 +52,15 @@ export const VSwitch = defineComponent({
       control: nodeControl,
     });
 
-    return () => {
-      return (
-        <VCheckable
-          class={classes.value}
-          checked={nodeControl.selected}
-          invalid={nodeControl.invalid}
-          disabled={nodeControl.isDisabled}
-          readonly={nodeControl.isReadonly}
-          v-slots={slots}
-        />
-      );
-    };
+    return () => (
+      <VCheckable
+        class={classes.value}
+        checked={nodeControl.selected}
+        invalid={nodeControl.invalid}
+        disabled={nodeControl.isDisabled}
+        readonly={nodeControl.isReadonly}
+        v-slots={slots}
+      />
+    );
   },
 });

package/src/components/VTabs/VTab.tsx

@@ -6,9 +6,8 @@ import {
   computed,
   ComponentPublicInstance,
 } from 'vue';
-import { RouteLocationRaw } from 'vue-router';
+import { RouteLocationRaw, RouterLink } from 'vue-router';
 import { RawIconProp, resolveRawIconProp } from '../VIcon';
-import { RouterLink } from 'vue-router';
 
 export interface VTabExpose {
   value: string;
@@ -60,28 +59,22 @@ export const VTab = defineComponent({
       if (to) {
         const replace = typeof to === 'string' ? undefined : to.replace;
         return (
-          <RouterLink
-            class={classes}
-            to={to}
-            replace={replace}
-            // disableScrollBehavior
-          >
+          <RouterLink class={classes} to={to} replace={replace}>
             {children}
           </RouterLink>
         );
-      } else {
-        return (
-          <button
-            class={classes}
-            type="button"
-            value={value}
-            onClick={(ev) => {
-              ctx.emit('click', ev);
-            }}>
-            {children}
-          </button>
-        );
       }
+      return (
+        <button
+          class={classes}
+          type="button"
+          value={value}
+          onClick={(ev) => {
+            ctx.emit('click', ev);
+          }}>
+          {children}
+        </button>
+      );
     };
   },
 });

package/src/components/VTabs/VTabs.tsx

@@ -10,15 +10,15 @@ import {
   onBeforeUpdate,
   onMounted,
 } from 'vue';
-import { RawIconProp } from '../VIcon';
-import { VuiService } from '../../service';
-import { useVui } from '../../injections';
 import { defineSlots } from '@fastkit/vue-utils';
 import { RouteLocationRaw, RouteLocation } from 'vue-router';
-import { VTab, VTabRef } from './VTab';
 import { VScroller, ScrollResult } from '@fastkit/vue-scroller';
 import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
 import { isPromise } from '@fastkit/helpers';
+import { VTab, VTabRef } from './VTab';
+import { useVui } from '../../injections';
+import { VuiService } from '../../service';
+import { RawIconProp } from '../VIcon';
 
 export interface VTabsItemLabelSlotCtx {
   value: string;
@@ -53,9 +53,6 @@ export const VTabs = defineComponent({
     items: {
       type: Array as PropType<VTabsItem[]>,
       required: true,
-      // validator: (value: VTabsItem[]) => {
-      //   return Array.isArray(value) && value.length > 0;
-      // },
     },
 
     /**
@@ -127,6 +124,7 @@ export const VTabs = defineComponent({
           | undefined;
 
         if (router) {
+          // eslint-disable-next-line no-shadow
           const to = router(value);
           const route = vui.router.resolve(to);
           location = { to, route };
@@ -140,12 +138,11 @@ export const VTabs = defineComponent({
       });
     });
 
+    // eslint-disable-next-line no-shadow
     const setTabRef = (ref: VTabRef) => {
       tabRefs.value.push(ref);
     };
 
-    // const isMountedRef = ref(false);
-
     function setupInternalValue(routable?: boolean) {
       let value = props.modelValue;
       if (value == null || value === '') {
@@ -165,6 +162,7 @@ export const VTabs = defineComponent({
           if (!hit) return;
           const { location } = hit;
           if (!location) return;
+          // eslint-disable-next-line no-shadow
           const { to, route } = location;
           if (route.fullPath === vui.location.currentRoute.fullPath) return;
           vui.router[to.replace ? 'replace' : 'push'](to);
@@ -200,9 +198,7 @@ export const VTabs = defineComponent({
       }
     }
 
-    const findTab = (tab: string) => {
-      return tabRefs.value.find((t) => t.value === tab);
-    };
+    const findTab = (tab: string) => tabRefs.value.find((t) => t.value === tab);
 
     function scrollToTab(tabValue: string) {
       const tab = findTab(tabValue);
@@ -267,9 +263,9 @@ export const VTabs = defineComponent({
       (route) => {
         if (!props.router) return;
         const path = props.withQuery ? route.fullPath : route.path;
-        const hit = computedItemsRef.value.find(({ location }) => {
-          return location && location.route.fullPath === path;
-        });
+        const hit = computedItemsRef.value.find(
+          ({ location }) => location && location.route.fullPath === path,
+        );
         if (hit) {
           currentRef.value = hit.value;
         }
@@ -299,6 +295,7 @@ export const VTabs = defineComponent({
           label = itemSlot;
         }
 
+        // eslint-disable-next-line no-shadow
         const children =
           typeof label === 'function' ? label({ value, active, vui }) : label;
 

package/src/components/VTextField/VTextField.tsx

@@ -51,6 +51,7 @@ export const VTextField = defineComponent({
   props: createTextFieldProps(),
   emits,
   slots,
+  // eslint-disable-next-line no-shadow
   setup(props, ctx) {
     const inputControl = useTextInputNodeControl(props, ctx, {
       nodeType: VUI_TEXT_FIELD_SYMBOL,
@@ -64,23 +65,21 @@ export const VTextField = defineComponent({
       inputControl.focus();
     };
 
-    const defaultSlot = () => {
-      return (
-        <VControlField
-          class="v-text-field__input"
-          startAdornment={props.startAdornment}
-          endAdornment={props.endAdornment}
-          size={control.size.value}
-          v-slots={{
-            ...ctx.slots,
-            default: () =>
-              inputControl.createInputElement({
-                class: 'v-text-field__input__element',
-              }),
-          }}
-        />
-      );
-    };
+    const defaultSlot = () => (
+      <VControlField
+        class="v-text-field__input"
+        startAdornment={props.startAdornment}
+        endAdornment={props.endAdornment}
+        size={control.size.value}
+        v-slots={{
+          ...ctx.slots,
+          default: () =>
+            inputControl.createInputElement({
+              class: 'v-text-field__input__element',
+            }),
+        }}
+      />
+    );
 
     const infoAppendsSlot = () => {
       const { counterResult } = inputControl;
@@ -92,25 +91,23 @@ export const VTextField = defineComponent({
       control: inputControl,
     });
 
-    return () => {
-      return (
-        <VFormControl
-          nodeControl={inputControl}
-          // focused={inputControl.focused}
-          hiddenInfo={props.hiddenInfo}
-          class={classes.value}
-          label={props.label}
-          hint={props.hint}
-          hinttip={props.hinttip}
-          requiredChip={props.requiredChip}
-          onClickLabel={handleClickLabel}
-          v-slots={{
-            ...ctx.slots,
-            default: defaultSlot,
-            infoAppends: infoAppendsSlot,
-          }}
-        />
-      );
-    };
+    return () => (
+      <VFormControl
+        nodeControl={inputControl}
+        // focused={inputControl.focused}
+        hiddenInfo={props.hiddenInfo}
+        class={classes.value}
+        label={props.label}
+        hint={props.hint}
+        hinttip={props.hinttip}
+        requiredChip={props.requiredChip}
+        onClickLabel={handleClickLabel}
+        v-slots={{
+          ...ctx.slots,
+          default: defaultSlot,
+          infoAppends: infoAppendsSlot,
+        }}
+      />
+    );
   },
 });