@fastkit/vui 0.18.31 → 0.18.33

package/src/components/VFormControl/VFormControl.tsx

@@ -17,6 +17,7 @@ const { props, emits } = createFormNodeWrapperSettings();
 
 export function createRequiredChipRenderer(
   required: () => boolean,
+  // eslint-disable-next-line no-shadow
   props: {
     requiredChip?: RequiredChipSource;
   },
@@ -56,6 +57,7 @@ export const VFormControl = defineComponent({
   },
   slots,
   emits,
+  // eslint-disable-next-line no-shadow
   setup(props, ctx) {
     const vui = useVui();
     const control = useFormNodeWrapper(props, ctx, {
@@ -68,6 +70,7 @@ export const VFormControl = defineComponent({
     });
 
     const hinttipDelay = computed(() => {
+      // eslint-disable-next-line no-shadow
       let { hinttipDelay } = control;
       if (hinttipDelay == null) {
         hinttipDelay = vui.setting('hinttipDelay');
@@ -100,11 +103,12 @@ export const VFormControl = defineComponent({
         'v-form-control--valid': control.valid,
       },
       colorProvider.className(
+        // eslint-disable-next-line no-nested-ternary
         props.error
           ? 'error'
           : control.invalid && !control.isReadonly
-          ? 'error'
-          : 'primary',
+            ? 'error'
+            : 'primary',
       ),
     ]);
 
@@ -142,6 +146,7 @@ export const VFormControl = defineComponent({
                     activator: (tooltip) => (
                       <a
                         class="v-form-control__label__hinttip"
+                        // eslint-disable-next-line no-script-url
                         href="javascript:void(0)"
                         {...tooltip.attrs}>
                         {hinttip.tip}

package/src/components/VFormGroup/VFormGroup.tsx

@@ -33,6 +33,7 @@ export const VFormGroup = defineComponent({
   props: createVFormGroupProps(),
   emits,
   slots: formGroupSlots,
+  // eslint-disable-next-line no-shadow
   setup(props, ctx) {
     const nodeControl = useFormGroup(props, ctx as any, {
       nodeType: VUI_FORM_GROUP_SYMBOL,

package/src/components/VGrid/schemes.ts

@@ -14,15 +14,17 @@ export function extractRawGridValueClasses<
 >(
   value: NonNullable<RawGridValue<T>>,
   prefix: string,
+  // eslint-disable-next-line no-shadow
   getter?: (value: T) => string,
 ): string | string[] {
   if (typeof value !== 'object')
     return `${prefix}${getter ? getter(value) : value}`;
-  return Object.entries(value).map(([breakpoint, breakpointValue]) => {
-    return `${prefix}${
-      getter ? getter(breakpointValue) : breakpointValue
-    }--${breakpoint}`;
-  });
+  return Object.entries(value).map(
+    ([breakpoint, breakpointValue]) =>
+      `${prefix}${
+        getter ? getter(breakpointValue) : breakpointValue
+      }--${breakpoint}`,
+  );
 }
 
 // export const DEFAULT_MEDIA_MATCH_KEY = MEDIA_MATCH_CONDITIONS[0].key;

package/src/components/VListTile/VListTile.tsx

@@ -7,7 +7,6 @@ import {
   ComputedRef,
   watch,
 } from 'vue';
-import { rawIconProp, resolveRawIconProp } from '../VIcon';
 import { createPropsOptions } from '@fastkit/vue-utils';
 import { actionableInheritProps, VAction } from '@fastkit/vue-action';
 import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
@@ -16,7 +15,9 @@ import { useVui } from '../../injections';
 // @TODO Unable to resolve dts for `actionableInheritProps`.
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
+// eslint-disable-next-line import/order
 import { RouteLocationRaw } from 'vue-router';
+import { rawIconProp, resolveRawIconProp } from '../VIcon';
 
 export function createListTileProps() {
   const icon = rawIconProp();
@@ -76,6 +77,7 @@ export const VListTile = defineComponent({
 
       return [
         color.value.className,
+        'clickable',
         {
           'v-list-tile--plain': !hasColor,
           'v-list-tile--has-color': hasColor,
@@ -86,6 +88,7 @@ export const VListTile = defineComponent({
 
     watch(
       () => isActive.value,
+      // eslint-disable-next-line no-shadow
       (isActive) => {
         ctx.emit('changeActive', isActive);
       },

package/src/components/VMenu/VMenu.tsx

@@ -20,12 +20,10 @@ export const VMenu = defineMenuComponent({
       menu: ctx,
     });
 
-    return (children) => {
-      return (
-        <div class={['v-menu__body', color.colorClasses.value]} {...ctx.attrs}>
-          {children}
-        </div>
-      );
-    };
+    return (children) => (
+      <div class={['v-menu__body', color.colorClasses.value]} {...ctx.attrs}>
+        {children}
+      </div>
+    );
   },
 });

package/src/components/VNavigation/VNavigation.tsx

@@ -7,12 +7,12 @@ import {
   onBeforeUpdate,
   ref,
 } from 'vue';
+import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
+import { createPropsOptions, ExtractPropInput } from '@fastkit/vue-utils';
 import {
   NavigationItemInput,
   renderNavigationItemInput,
 } from './VNavigationItem';
-import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
-import { createPropsOptions, ExtractPropInput } from '@fastkit/vue-utils';
 
 export function createNavigationProps() {
   return createPropsOptions({
@@ -56,6 +56,7 @@ export const VNavigation = defineComponent({
     }
 
     function onItemActivated(item: NavigationItemInput) {
+      // eslint-disable-next-line no-shadow
       itemsRef.value.forEach(({ key, ref }) => {
         if (key === item.key) return;
         ref.close();
@@ -71,11 +72,12 @@ export const VNavigation = defineComponent({
             renderNavigationItemInput(item, {
               class: 'v-navigation__item',
               startIconEmptySpace: startIconEmptySpace.value,
+              // eslint-disable-next-line no-shadow
               ref: (ref: any) => {
                 setItemRef(item, ref);
               },
               onChangeActive: (isActive: boolean) => {
-                if (isActive /* && item.children && item.children.length*/) {
+                if (isActive /* && item.children && item.children.length */) {
                   onItemActivated(item);
                 }
               },

package/src/components/VNavigation/VNavigationItem.tsx

@@ -9,17 +9,17 @@ import {
   ref,
   watch,
 } from 'vue';
-import { createListTileProps, listTileEmits, VListTile } from '../VListTile';
 import { ExtractPropInput } from '@fastkit/vue-utils';
 import { VExpandTransition } from '@fastkit/vue-transitions';
-import { useVui } from '../../injections';
-import { useRoute } from 'vue-router';
 import { ScopeName } from '@fastkit/color-scheme';
 
 // @TODO Unable to resolve dts for `actionableInheritProps`.
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import { RouteLocationRaw } from 'vue-router';
+// eslint-disable-next-line import/no-duplicates
+import { useRoute, RouteLocationRaw } from 'vue-router';
+import { useVui } from '../../injections';
+import { createListTileProps, listTileEmits, VListTile } from '../VListTile';
 
 export function createNavigationItemProps() {
   return {
@@ -31,10 +31,6 @@ export function createNavigationItemProps() {
     },
     nested: Boolean,
     color: String as PropType<ScopeName>,
-    // key: {
-    //   type: [String, Number],
-    //   required: true,
-    // },
   };
 }
 
@@ -47,7 +43,7 @@ export interface NavigationItemInput
 }
 
 export function resolveNavigationItemInput(input: NavigationItemInput) {
-  let label = input.label;
+  let { label } = input;
   const props: NavigationItemInput = {
     ...input,
   };
@@ -76,8 +72,8 @@ export function renderNavigationItemInput(
 
 const TRIM_END_SLASH_RE = /\/$/;
 
-function trimEndSlash<T extends string | undefined>(sorce: T) {
-  return sorce ? sorce.replace(TRIM_END_SLASH_RE, '') : sorce;
+function trimEndSlash<T extends string | undefined>(source: T) {
+  return source ? source.replace(TRIM_END_SLASH_RE, '') : source;
 }
 
 export const VNavigationItem = defineComponent({
@@ -102,7 +98,9 @@ export const VNavigationItem = defineComponent({
     const to = computed(() => ctx.attrs.to);
 
     const match = computed<string[] | undefined>(() => {
+      // eslint-disable-next-line no-shadow
       const { match } = props;
+      // eslint-disable-next-line no-shadow
       const { to } = ctx.attrs;
       if (match) {
         return (Array.isArray(match) ? match : [match]).map(trimEndSlash);
@@ -122,12 +120,6 @@ export const VNavigationItem = defineComponent({
 
     const route = useRoute();
 
-    // const classes = computed(() => [
-    //   // {
-    //   //   'v-navigation-item--matched': matched.value,
-    //   // },
-    // ]);
-
     watch(
       () => route.path,
       (newPath) => {
@@ -135,32 +127,19 @@ export const VNavigationItem = defineComponent({
         const m = match.value;
 
         if (!c || !m || !m.length) {
-          // matched.value = false;
           return;
         }
 
-        const trimedNewPath = trimEndSlash(newPath);
-        if (m.some((_) => trimedNewPath.match(_))) {
+        const trimmedNewPath = trimEndSlash(newPath);
+        if (m.some((_) => trimmedNewPath.match(_))) {
           open();
-          // matched.value = true;
         } else {
           close();
-          // matched.value = false;
         }
-
-        // if (trimEndSlash(newPath).match(m)) {
-        //   open();
-        //   // matched.value = true;
-        // } else {
-        //   close();
-        //   // matched.value = false;
-        // }
       },
       { immediate: true },
     );
 
-    // const iconPayload = () => opened.value;
-
     const _props = computed(() => {
       const c = children.value;
       let { endIcon } = props;
@@ -168,12 +147,11 @@ export const VNavigationItem = defineComponent({
         endIcon = vui.icon('navigationExpand');
         if (typeof endIcon === 'string') {
           const name = endIcon;
-          endIcon = (gen) => {
-            return gen({
+          endIcon = (gen) =>
+            gen({
               name,
               rotate: opened.value ? 180 : 0,
             });
-          };
         }
       }
 
@@ -184,16 +162,8 @@ export const VNavigationItem = defineComponent({
 
       delete __props.children;
 
-      // const _activeClass = props.activeClass;
-      // const activeClass = `v-navigation-item--active${
-      //   _activeClass ? ` ${_activeClass}` : ''
-      // }`;
-
       return {
         ...__props,
-        // activeClass,
-        // startIcon: toRawIconProp(__props.startIcon, iconPayload),
-        // endIcon: toRawIconProp(__props.endIcon, iconPayload),
       };
     });
 
@@ -214,30 +184,9 @@ export const VNavigationItem = defineComponent({
       if (!to.value) {
         return toggle();
       }
-      // console.log('★');
-      // open();
-      // if (!to.value) {
-      //   toggle();
-      // }
-      // ctx.emit('click', ev);
     };
 
     const onChangeActive = (isActive: boolean) => {
-      // if (isActive) {
-      //   // open();
-      //   // if (typeof window !== 'undefined') {
-      //   //   // open();
-      //   //   // console.log('hoge', window);
-      //   //   setTimeout(() => {
-      //   //     open();
-      //   //   }, 1000);
-      //   // }
-      //   // open();
-      //   // console.log(props);
-      //   // setTimeout(() => {
-      //   //   open();
-      //   // }, 500);
-      // }
       ctx.emit('changeActive', isActive);
     };
 
@@ -273,8 +222,6 @@ export const VNavigationItem = defineComponent({
                     {
                       startIconEmptySpace: _props.value.startIconEmptySpace,
                       depth: props.nested ? props.depth + 1 : props.depth,
-                      // onClick,
-                      // onChangeActive,
                     },
                   ),
                 )}

package/src/components/VNumberField/VNumberField.tsx

@@ -44,6 +44,7 @@ export const VNumberField = defineComponent({
     });
 
     const inputmode = computed<TextFieldInput['inputmode']>(() => {
+      // eslint-disable-next-line no-shadow
       const { inputmode } = ctx.attrs as TextFieldInput;
       if (inputmode) return inputmode;
       return hasNumberMask.value ? 'decimal' : undefined;
@@ -57,19 +58,17 @@ export const VNumberField = defineComponent({
       ctx.emit('change', toNumber(value));
     };
 
-    return () => {
-      return (
-        <VTextField
-          {...ctx.attrs}
-          type={hasNumberMask.value ? 'text' : 'number'}
-          inputmode={inputmode.value}
-          maskModel="typed"
-          modelValue={toString(props.modelValue)}
-          onUpdate:modelValue={onUpdateModelValue}
-          onChange={onChange}
-          v-slots={ctx.slots as any}
-        />
-      );
-    };
+    return () => (
+      <VTextField
+        {...ctx.attrs}
+        type={hasNumberMask.value ? 'text' : 'number'}
+        inputmode={inputmode.value}
+        maskModel="typed"
+        modelValue={toString(props.modelValue)}
+        onUpdate:modelValue={onUpdateModelValue}
+        onChange={onChange}
+        v-slots={ctx.slots as any}
+      />
+    );
   },
 });

package/src/components/VOption/VOption.tsx

@@ -16,35 +16,32 @@ export const VOption = defineComponent({
     ...createControlProps(),
   },
   emits,
+  // eslint-disable-next-line no-shadow
   setup(props, ctx) {
     const nodeControl = useFormSelectorItemControl(props, ctx, {
       nodeType: VUI_OPTION_SYMBOL,
       parentNodeType: VUI_SELECT_SYMBOL,
     });
     const control = useControl(props);
-    const classes = computed(() => {
-      return [
-        'v-option',
-        {
-          'v-option--selected': nodeControl.selected,
-          'v-option--has-not-value': !nodeControl.hasValue,
-          'v-option--disabled': nodeControl.isDisabled,
-        },
-        control.classes.value,
-      ];
-    });
+    const classes = computed(() => [
+      'v-option',
+      {
+        'v-option--selected': nodeControl.selected,
+        'v-option--has-not-value': !nodeControl.hasValue,
+        'v-option--disabled': nodeControl.isDisabled,
+      },
+      control.classes.value,
+    ]);
 
-    return () => {
-      return (
-        <label
-          class={classes.value}
-          onClick={nodeControl.handleClickElement}
-          tabindex={nodeControl.tabindex}
-          data-value={nodeControl.propValue}
-          aria-disabled={nodeControl.isDisabled}>
-          <span class="v-option__label">{ctx.slots.default?.()}</span>
-        </label>
-      );
-    };
+    return () => (
+      <label
+        class={classes.value}
+        onClick={nodeControl.handleClickElement}
+        tabindex={nodeControl.tabindex}
+        data-value={nodeControl.propValue}
+        aria-disabled={nodeControl.isDisabled}>
+        <span class="v-option__label">{ctx.slots.default?.()}</span>
+      </label>
+    );
   },
 });

package/src/components/VOptionGroup/VOptionGroup.tsx

@@ -30,17 +30,15 @@ export const VOptionGroup = defineComponent({
     const groupControl = useFormSelectorItemGroupControl(props, ctx, {
       parentNodeType: VUI_SELECT_SYMBOL,
     });
-    const labelSlot = computed(() => {
-      return resolveVNodeChildOrSlots(props.label, ctx.slots.label);
-    });
-    const classes = computed(() => {
-      return [
-        'v-option-group',
-        {
-          'v-option-group--disabled': groupControl.isDisabled,
-        },
-      ];
-    });
+    const labelSlot = computed(() =>
+      resolveVNodeChildOrSlots(props.label, ctx.slots.label),
+    );
+    const classes = computed(() => [
+      'v-option-group',
+      {
+        'v-option-group--disabled': groupControl.isDisabled,
+      },
+    ]);
 
     ctx.expose({
       control: groupControl,

package/src/components/VPagination/VPagination.tsx

@@ -15,9 +15,9 @@ import {
 } from '@fastkit/vue-utils';
 import { isPromise } from '@fastkit/helpers';
 import { useRouter, RouterLink } from 'vue-router';
-import { resolveRawIconProp } from '../VIcon';
 import { resizeDirectiveArgument } from '@fastkit/vue-resize';
 import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
+import { resolveRawIconProp } from '../VIcon';
 import { useVui } from '../../injections';
 
 export type VPaginationGuard = (
@@ -142,15 +142,16 @@ export const VPagination = defineComponent({
         const end = pageValue + left - 2 - even;
 
         return [1, 'truncate', ..._range(start, end), 'truncate', length];
-      } else if (pageValue === left) {
+      }
+      if (pageValue === left) {
         const end = pageValue + left - 1 - even;
         return [..._range(1, end), 'truncate', length];
-      } else if (pageValue === right) {
+      }
+      if (pageValue === right) {
         const start = pageValue - left + 1;
         return [1, 'truncate', ..._range(start, length)];
-      } else {
-        return [..._range(1, left), 'truncate', ..._range(right, length)];
       }
+      return [..._range(1, left), 'truncate', ..._range(right, length)];
     });
 
     const isActive = computed(() => computedLength.value > 1);
@@ -190,11 +191,10 @@ export const VPagination = defineComponent({
         return router.push(to).then((failure) => {
           !failure && ctx.emit('change', newPage);
         });
-      } else {
-        internalValue.value = newPage;
-        (ctx as any).emit('update:modelValue', newPage);
-        ctx.emit('change', newPage);
       }
+      internalValue.value = newPage;
+      (ctx as any).emit('update:modelValue', newPage);
+      ctx.emit('change', newPage);
     }
 
     function createPageInfo(source: ItemSource): {
@@ -245,6 +245,7 @@ export const VPagination = defineComponent({
     function genItem(source: ItemSource, index: number) {
       const { number, page, active, disabled } = createPageInfo(source);
       const type = number ? 'num' : source;
+      // eslint-disable-next-line no-shadow
       const classes = [
         'v-pagination__item',
         {
@@ -296,18 +297,17 @@ export const VPagination = defineComponent({
             {children}
           </RouterLink>
         );
-      } else {
-        return (
-          <button
-            class={classes}
-            type="button"
-            value={page}
-            onClick={onClick}
-            key={key}>
-            {children}
-          </button>
-        );
       }
+      return (
+        <button
+          class={classes}
+          type="button"
+          value={page}
+          onClick={onClick}
+          key={key}>
+          {children}
+        </button>
+      );
     }
 
     watch(
@@ -335,6 +335,7 @@ export const VPagination = defineComponent({
             const el = elRef.value;
             if (el) {
               const style = window.getComputedStyle(el, 'before');
+              // eslint-disable-next-line no-shadow
               const width = style.getPropertyValue('width');
               const margin = style.getPropertyValue('margin');
               const size = parseFloat(width) + parseFloat(margin) * 0.5;

package/src/components/VPaper/VPaper.tsx

@@ -1,8 +1,8 @@
 import './VPaper.scss';
 import { defineComponent, computed, PropType, VNodeProps } from 'vue';
-import { createElevationProps, useElevation } from '../../composables';
 import { renderSlotOrEmpty, defineSlots } from '@fastkit/vue-utils';
 import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
+import { createElevationProps, useElevation } from '../../composables';
 
 export const paperBaseSlots = defineSlots<{
   header?: () => void;

package/src/components/VRadio/VRadio.tsx

@@ -17,6 +17,7 @@ export const VRadio = defineComponent({
     ...createControlProps(),
   },
   emits,
+  // eslint-disable-next-line no-shadow
   setup(props, ctx) {
     const nodeControl = useFormSelectorItemControl(props, ctx, {
       nodeType: VUI_RADIO_SYMBOL,
@@ -36,17 +37,15 @@ export const VRadio = defineComponent({
       label: () => ctx.slots.default?.(),
     };
 
-    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}
+      />
+    );
   },
 });