@fastkit/vui 0.18.30 → 0.18.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.18.30",
+  "version": "0.18.32",
   "description": "A simple, extensible UI kit for Vue applications.",
   "keywords": [
     "fastkit",
@@ -44,31 +44,31 @@
     "src"
   ],
   "dependencies": {
-    "@fastkit/color-scheme": "1.0.14",
-    "@fastkit/dom": "0.1.7",
-    "@fastkit/color-scheme-gen": "0.13.14",
-    "@fastkit/helpers": "0.13.7",
-    "@fastkit/media-match": "1.0.9",
-    "@fastkit/media-match-gen": "0.13.14",
-    "@fastkit/icon-font": "1.0.9",
+    "@fastkit/color-scheme": "1.0.15",
+    "@fastkit/dom": "0.1.8",
+    "@fastkit/color-scheme-gen": "0.13.15",
+    "@fastkit/helpers": "0.13.8",
+    "@fastkit/icon-font": "1.0.10",
+    "@fastkit/media-match": "1.0.10",
+    "@fastkit/media-match-gen": "0.13.15",
+    "@fastkit/rules": "0.13.10",
+    "@fastkit/tiny-logger": "0.13.8",
+    "@fastkit/vue-action": "0.2.21",
+    "@fastkit/vue-app-layout": "0.14.22",
+    "@fastkit/vue-body-scroll-lock": "0.1.19",
+    "@fastkit/vue-color-scheme": "0.14.19",
+    "@fastkit/vue-form-control": "0.19.19",
+    "@fastkit/vue-keyboard": "0.1.8",
+    "@fastkit/vue-location": "0.1.26",
+    "@fastkit/vue-resize": "0.1.19",
+    "@fastkit/vue-media-match": "0.13.15",
+    "@fastkit/vue-scroller": "0.14.21",
+    "@fastkit/vue-transitions": "0.1.23",
+    "@fastkit/vue-utils": "0.14.17",
+    "@fastkit/vue-click-outside": "0.1.20",
+    "@fastkit/vue-loading": "0.14.20",
     "@fastkit/stylebase": "0.13.1",
-    "@fastkit/rules": "0.13.9",
-    "@fastkit/tiny-logger": "0.13.7",
-    "@fastkit/vue-action": "0.2.20",
-    "@fastkit/vue-app-layout": "0.14.21",
-    "@fastkit/vue-color-scheme": "0.14.18",
-    "@fastkit/vue-click-outside": "0.1.19",
-    "@fastkit/vue-body-scroll-lock": "0.1.18",
-    "@fastkit/vue-keyboard": "0.1.7",
-    "@fastkit/vue-loading": "0.14.19",
-    "@fastkit/vue-form-control": "0.19.18",
-    "@fastkit/vue-location": "0.1.25",
-    "@fastkit/vue-media-match": "0.13.14",
-    "@fastkit/vue-resize": "0.1.18",
-    "@fastkit/vue-scroller": "0.14.20",
-    "@fastkit/vue-transitions": "0.1.22",
-    "@fastkit/vue-stack": "0.15.51",
-    "@fastkit/vue-utils": "0.14.16"
+    "@fastkit/vue-stack": "0.15.53"
   },
   "peerDependencies": {
     "vue": "^3.3.0",

package/src/components/VApp/VApp.tsx

@@ -8,12 +8,10 @@ export const VApp = defineComponent({
   setup(_props, ctx) {
     useInjectTheme();
 
-    return () => {
-      return (
-        <VDynamicStacks>
-          <VAppLayout v-slots={ctx.slots} />
-        </VDynamicStacks>
-      );
-    };
+    return () => (
+      <VDynamicStacks>
+        <VAppLayout v-slots={ctx.slots} />
+      </VDynamicStacks>
+    );
   },
 });

package/src/components/VAvatar/VAvatar.tsx

@@ -8,6 +8,7 @@ import { VBusyImage } from '../VBusyImage';
 // @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 const AVATAR_SIZES = ['sm', 'md', 'lg'] as const;

package/src/components/VBreadcrumbs/VBreadcrumbs.tsx

@@ -33,13 +33,13 @@ export const VBreadcrumbs = defineComponent({
     const vui = useVui();
 
     const computedItemsRef = computed(() => {
-      const items: BreadcrumbsItem[] = props.items.map((rawItem) => {
-        return typeof rawItem === 'string'
+      const items: BreadcrumbsItem[] = props.items.map((rawItem) =>
+        typeof rawItem === 'string'
           ? {
               text: rawItem,
             }
-          : rawItem;
-      });
+          : rawItem,
+      );
 
       return items.map((item) => {
         const { to, text } = item;
@@ -56,12 +56,13 @@ export const VBreadcrumbs = defineComponent({
 
     const lengthRef = computed(() => computedItemsRef.value.length);
 
-    const defaultDividerSlot = () => {
-      return [<i class="v-breadcrumbs__divider__icon" />];
-    };
+    const defaultDividerSlot = () => [
+      <i class="v-breadcrumbs__divider__icon" />,
+    ];
 
     return () => {
       if (lengthRef.value < 1) return;
+      // eslint-disable-next-line no-shadow
       let dividerSlot: (vui: VuiService) => VNodeChild;
       const propDivider = props.divider;
       if (propDivider) {

package/src/components/VButton/VButton.tsx

@@ -19,6 +19,7 @@ import type { IconName } from '../VIcon';
 // @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 VButtonSpacer = 'left' | 'right';
@@ -129,33 +130,31 @@ export const VButton = defineComponent({
       },
     ]);
 
-    return () => {
-      return (
-        <VAction
-          {...ctx.attrs}
-          class={['v-button', classes.value]}
-          guardInProgressClass="v-button--guard-in-progress"
-          v-slots={{
-            default: () => (
-              <>
-                <span class="v-button__content">
-                  {startIcon.value}
-                  {ctx.slots.default?.()}
-                  {icon.value}
-                  {endIcon.value}
-                </span>
-                {isLoading.value && (
-                  <VProgressCircular
-                    class="v-button__loading"
-                    indeterminate
-                    size={LOADING_SIZE_MAP[control.size.value]}
-                  />
-                )}
-              </>
-            ),
-          }}
-        />
-      );
-    };
+    return () => (
+      <VAction
+        {...ctx.attrs}
+        class={['v-button', classes.value]}
+        guardInProgressClass="v-button--guard-in-progress"
+        v-slots={{
+          default: () => (
+            <>
+              <span class="v-button__content">
+                {startIcon.value}
+                {ctx.slots.default?.()}
+                {icon.value}
+                {endIcon.value}
+              </span>
+              {isLoading.value && (
+                <VProgressCircular
+                  class="v-button__loading"
+                  indeterminate
+                  size={LOADING_SIZE_MAP[control.size.value]}
+                />
+              )}
+            </>
+          ),
+        }}
+      />
+    );
   },
 });

package/src/components/VButton/VButtonGroup.tsx

@@ -2,8 +2,8 @@ import './VButtonGroup.scss';
 
 import { defineComponent, isVNode, cloneVNode, VNodeChild, VNode } from 'vue';
 import { colorSchemeProps } from '@fastkit/vue-color-scheme';
-import { createControlProps } from '../../composables';
 import { renderSlotOrEmpty, isFragment } from '@fastkit/vue-utils';
+import { createControlProps } from '../../composables';
 import { VButton } from './VButton';
 
 type VButtonGroupChild =
@@ -68,7 +68,7 @@ export const VButtonGroup = defineComponent({
           return cloneVNode(child.node, {
             ...props,
             ...childProps,
-            rouded: false,
+            rounded: false,
             class: [
               'v-button-group__item',
               {

package/src/components/VCard/VCard.tsx

@@ -1,12 +1,12 @@
 import './VCard.scss';
 import { defineComponent, computed } from 'vue';
-import { VPaper, createPaperProps } from '../VPaper';
 import { actionableInheritProps, VAction } from '@fastkit/vue-action';
 
 // @TODO Unable to resolve dts for `actionableInheritProps`.
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { RouteLocationRaw } from 'vue-router';
+import { VPaper, createPaperProps } from '../VPaper';
 
 export function createCardProps() {
   return {
@@ -45,17 +45,6 @@ export const VCard = defineComponent({
       return { attrs };
     });
 
-    return () => {
-      return (
-        <VPaper
-          {...data.value.attrs}
-          // {..._props.value}
-          // {...ctx.attrs}
-          // class="v-card"
-          // tag={VLink}
-          v-slots={ctx.slots}
-        />
-      );
-    };
+    return () => <VPaper {...data.value.attrs} v-slots={ctx.slots} />;
   },
 });

package/src/components/VCard/VCardActions.tsx

@@ -4,8 +4,6 @@ import { defineComponent } from 'vue';
 export const VCardActions = defineComponent({
   name: 'VCardActions',
   setup(_props, ctx) {
-    return () => {
-      return <div class="v-card-actions">{ctx.slots.default?.()}</div>;
-    };
+    return () => <div class="v-card-actions">{ctx.slots.default?.()}</div>;
   },
 });

package/src/components/VCard/VCardContent.tsx

@@ -4,8 +4,6 @@ import { defineComponent } from 'vue';
 export const VCardContent = defineComponent({
   name: 'VCardContent',
   setup(_props, ctx) {
-    return () => {
-      return <div class="v-card-content">{ctx.slots.default?.()}</div>;
-    };
+    return () => <div class="v-card-content">{ctx.slots.default?.()}</div>;
   },
 });

package/src/components/VCheckable/VCheckable.tsx

@@ -1,8 +1,8 @@
 import './VCheckable.scss';
 import { computed, defineComponent } from 'vue';
 import { defineSlots } from '@fastkit/vue-utils';
-import { useVuiColorProvider } from '../../injections';
 import { FormNodeErrorSlotsSource } from '@fastkit/vue-form-control';
+import { useVuiColorProvider } from '../../injections';
 
 export const CHECKABLE_SLOTS = defineSlots<
   {
@@ -31,19 +31,17 @@ export const VCheckable = defineComponent({
     const readonly = computed(() => props.readonly);
     const checked = computed(() => props.checked);
     // const autoWidth = computed(() => props.autoWidth);
-    const classes = computed(() => {
-      return [
-        {
-          'v-checkable--invalid': invalid.value,
-          'v-checkable--disabled': disabled.value,
-          'v-checkable--readonly': readonly.value,
-          'v-checkable--checked': checked.value,
-          'v-checkable--custom-icon': !!ctx.slots.icon,
-          disabled: disabled.value,
-        },
-        colorProvider.className(invalid.value ? 'error' : 'primary'),
-      ];
-    });
+    const classes = computed(() => [
+      {
+        'v-checkable--invalid': invalid.value,
+        'v-checkable--disabled': disabled.value,
+        'v-checkable--readonly': readonly.value,
+        'v-checkable--checked': checked.value,
+        'v-checkable--custom-icon': !!ctx.slots.icon,
+        disabled: disabled.value,
+      },
+      colorProvider.className(invalid.value ? 'error' : 'primary'),
+    ]);
 
     return () => (
       <label class={['v-checkable', classes.value]}>

package/src/components/VCheckbox/VCheckbox.tsx

@@ -21,6 +21,7 @@ export const VCheckbox = defineComponent({
     indeterminate: Boolean,
   },
   emits,
+  // eslint-disable-next-line no-shadow
   setup(props, ctx) {
     const nodeControl = useFormSelectorItemControl(props, ctx, {
       nodeType: VUI_CHECKBOX_SYMBOL,
@@ -53,17 +54,15 @@ export const VCheckbox = defineComponent({
       label: () => ctx.slots.default?.(),
     };
 
-    return () => {
-      return (
-        <VCheckable
-          class={classes.value}
-          checked={nodeControl.selected || isIndeterminate.value}
-          invalid={nodeControl.invalid}
-          disabled={nodeControl.isDisabled}
-          readonly={nodeControl.isReadonly}
-          v-slots={slots}
-        />
-      );
-    };
+    return () => (
+      <VCheckable
+        class={classes.value}
+        checked={nodeControl.selected || isIndeterminate.value}
+        invalid={nodeControl.invalid}
+        disabled={nodeControl.isDisabled}
+        readonly={nodeControl.isReadonly}
+        v-slots={slots}
+      />
+    );
   },
 });

package/src/components/VChip/VChip.tsx

@@ -9,6 +9,7 @@ import { VIcon } from '../VIcon';
 // @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';
 
 export const CHIP_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const;

package/src/components/VContentSwitcher/VContentSwitcher.tsx

@@ -44,9 +44,7 @@ export const VContentSwitcher = defineComponent({
     const elRef = ref<HTMLElement | null>(null);
     const anchorRef = ref<HTMLElement | null>(null);
     const computedOrderRef = computed(() =>
-      props.order.map((row) => {
-        return typeof row === 'string' ? row : row.value;
-      }),
+      props.order.map((row) => (typeof row === 'string' ? row : row.value)),
     );
     const currentRef = computed({
       get: () => internalValueRef.value,
@@ -69,10 +67,10 @@ export const VContentSwitcher = defineComponent({
     });
 
     function seeTop(options?: ContentSwitcherSeeTopOptions) {
-      const scoller = getDocumentScroller();
+      const scroller = getDocumentScroller();
       const { value: anchor } = anchorRef;
       if (anchor) {
-        scoller.toElement(anchor, options);
+        scroller.toElement(anchor, options);
       }
     }
 
@@ -132,10 +130,10 @@ export const VContentSwitcher = defineComponent({
           <Transition
             name={transitionRef.value}
             onBeforeLeave={(el) => {
-              getEl().style.height = (el as HTMLElement).offsetHeight + 'px';
+              getEl().style.height = `${(el as HTMLElement).offsetHeight}px`;
             }}
             onEnter={(el) => {
-              getEl().style.height = (el as HTMLElement).offsetHeight + 'px';
+              getEl().style.height = `${(el as HTMLElement).offsetHeight}px`;
             }}
             onAfterEnter={() => {
               getEl().style.height = '';

package/src/components/VControlField/VControlField.tsx

@@ -83,7 +83,7 @@ export const VControlField = defineComponent({
     const colorProvider = useVuiColorProvider();
 
     const classes = computed(() => {
-      const classes = [
+      const _classes = [
         'v-control-field',
         `v-control-field--${inputBox.variant.value}`,
         {
@@ -95,23 +95,24 @@ export const VControlField = defineComponent({
         },
         control.classes.value,
         colorProvider.className(
+          // eslint-disable-next-line no-nested-ternary
           props.error
             ? 'error'
             : invalid.value && !readonly.value
-            ? 'error'
-            : 'primary',
+              ? 'error'
+              : 'primary',
         ),
       ];
-      return classes;
+      return _classes;
     });
 
     const resolvedSlots = computed(() => {
-      const slots: ResolvedSlots = {};
+      const _slots: ResolvedSlots = {};
       ADORNMENT_POSITIONS.forEach((position) => {
         const key = `${position}Adornment` as const;
-        slots[position] = resolveVNodeChildOrSlots(props[key], ctx.slots[key]);
+        _slots[position] = resolveVNodeChildOrSlots(props[key], ctx.slots[key]);
       });
-      return slots;
+      return _slots;
     });
 
     const renderAdornment = (position: AdornmentPosition) => {
@@ -140,18 +141,16 @@ export const VControlField = defineComponent({
 
     const handleClick = (ev: MouseEvent) => ctx.emit('click', ev);
 
-    return () => {
-      return (
-        <div
-          class={classes.value}
-          onClick={handleClick}
-          // tabindex={this.computedTabindex}
-          ref={hostElRef}>
-          {renderAdornment('start')}
-          <div class="v-control-field__body">{ctx.slots.default?.()}</div>
-          {renderAdornment('end')}
-        </div>
-      );
-    };
+    return () => (
+      <div
+        class={classes.value}
+        onClick={handleClick}
+        // tabindex={this.computedTabindex}
+        ref={hostElRef}>
+        {renderAdornment('start')}
+        <div class="v-control-field__body">{ctx.slots.default?.()}</div>
+        {renderAdornment('end')}
+      </div>
+    );
   },
 });

package/src/components/VDataTable/VDataTable.tsx

@@ -15,6 +15,10 @@ import {
   isVNode,
   HTMLAttributes,
 } from 'vue';
+import { VNodeChildOrSlot } from '@fastkit/vue-utils';
+import { resizeDirectiveArgument } from '@fastkit/vue-resize';
+import { VueAppLayout } from '@fastkit/vue-app-layout';
+import { ScopeName, toScopeColorClass } from '@fastkit/vue-color-scheme';
 import { useVui } from '../../injections';
 import type { VuiService } from '../../service';
 import { VSelect } from '../VSelect';
@@ -22,10 +26,6 @@ import { VPagination } from '../VPagination';
 import { VCheckbox } from '../VCheckbox';
 import { VIcon, resolveRawIconProp } from '../VIcon';
 import { VProgressCircular } from '../loading';
-import { VNodeChildOrSlot } from '@fastkit/vue-utils';
-import { resizeDirectiveArgument } from '@fastkit/vue-resize';
-import { VueAppLayout } from '@fastkit/vue-app-layout';
-import { ScopeName, toScopeColorClass } from '@fastkit/vue-color-scheme';
 import { VPaper } from '../VPaper';
 
 export type DataTableHeaderAlign = 'left' | 'center' | 'right';
@@ -213,6 +213,7 @@ export const VDataTable = defineComponent({
     const footerHeightRef = ref(0);
     const internalValues = ref<string[]>(props.modelValue.slice());
     const rowSettings = computed<DataTableRowSettingsFn>(() => {
+      // eslint-disable-next-line no-shadow
       const { rowSettings } = props;
       if (!rowSettings) return () => ({});
       return typeof rowSettings === 'function'
@@ -314,14 +315,14 @@ export const VDataTable = defineComponent({
         : props.descQueryValue,
     );
 
-    const isTransitioningRef = computed(() => {
-      return vui.location.isQueryOnlyTransitioning([
+    const isTransitioningRef = computed(() =>
+      vui.location.isQueryOnlyTransitioning([
         props.pageQuery,
         props.sortQuery,
         props.orderQuery,
         props.limitQuery,
-      ]);
-    });
+      ]),
+    );
 
     const pageRef = computed(() =>
       vui.location.getQuery(props.pageQuery, Number, 1),
@@ -332,9 +333,7 @@ export const VDataTable = defineComponent({
     );
 
     const sortByRef = computed({
-      get: () => {
-        return vui.location.getQuery(props.sortQuery);
-      },
+      get: () => vui.location.getQuery(props.sortQuery),
       set(value) {
         vui.location.pushQuery({
           [props.sortQuery]: value || null,
@@ -395,12 +394,11 @@ export const VDataTable = defineComponent({
       let icon = vui.icon('sort');
       if (typeof icon === 'string') {
         const name = icon;
-        icon = (gen) => {
-          return gen({
+        icon = (gen) =>
+          gen({
             name,
             rotate: isASCRef.value ? 180 : 0,
           });
-        };
       }
       return icon;
     });
@@ -544,12 +542,10 @@ export const VDataTable = defineComponent({
               size="sm"
               hiddenInfo
               disabled={isTransitioningRef.value}
-              items={props.limits.map((limit) => {
-                return {
-                  label: `${limit}件`,
-                  value: limit,
-                };
-              })}
+              items={props.limits.map((limit) => ({
+                label: `${limit}件`,
+                value: limit,
+              }))}
               v-model={limitRef.value}
             />
           </div>
@@ -693,6 +689,7 @@ export const VDataTable = defineComponent({
         }
 
         if (!cellChildren) {
+          // eslint-disable-next-line default-case
           switch (headerKey) {
             case SELECTABLE_HEADER_SYMBOL: {
               cellChildren = [
@@ -766,9 +763,9 @@ export const VDataTable = defineComponent({
     watch(
       () => props.items,
       (items) => {
-        internalValues.value = internalValues.value.filter((key) => {
-          return sortedItemKeysRef.value.includes(key);
-        });
+        internalValues.value = internalValues.value.filter((key) =>
+          sortedItemKeysRef.value.includes(key),
+        );
       },
     );
 

package/src/components/VDialog/VDialog.tsx

@@ -24,9 +24,8 @@ export const VDialog = defineDialogComponent({
       resolver: (actions) => {
         if (actions.length === 0) {
           return [vui.stackAction('close')];
-        } else {
-          return actions;
         }
+        return actions;
       },
     });
     const color = useColorClasses(props, { useRootThemeDefault: true });

package/src/components/VForm/VForm.tsx

@@ -31,23 +31,22 @@ export const VForm = defineComponent({
   props: createVFormProps(),
   emits,
   slots: formSlots,
+  // eslint-disable-next-line no-shadow
   setup(props, ctx) {
     const nodeControl = useForm(props, ctx as any, {
       nodeType: VUI_FORM_SYMBOL,
     });
-    const classes = computed(() => {
-      return [
-        'v-form',
-        {
-          'v-form--valid': nodeControl.valid,
-          'v-form--invalid': nodeControl.invalid,
-          'v-form--disabled': nodeControl.isDisabled,
-          'v-form--validating': nodeControl.validating,
-          'v-form--pending': nodeControl.pending,
-          'v-form--sending': nodeControl.sending,
-        },
-      ];
-    });
+    const classes = computed(() => [
+      'v-form',
+      {
+        'v-form--valid': nodeControl.valid,
+        'v-form--invalid': nodeControl.invalid,
+        'v-form--disabled': nodeControl.isDisabled,
+        'v-form--validating': nodeControl.validating,
+        'v-form--pending': nodeControl.pending,
+        'v-form--sending': nodeControl.sending,
+      },
+    ]);
     useControl(props);
 
     ctx.expose({