@fastkit/vui 0.12.11 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.12.11",
+  "version": "0.13.0",
   "description": "A simple, extensible UI kit for Vue applications.",
   "keywords": [
     "fastkit",
@@ -44,23 +44,31 @@
     "src"
   ],
   "dependencies": {
-    "@fastkit/color-scheme": "0.12.10",
-    "@fastkit/helpers": "0.12.10",
-    "@fastkit/icon-font": "0.12.10",
-    "@fastkit/media-match": "0.12.10",
-    "@fastkit/rules": "0.12.10",
-    "@fastkit/stylebase": "0.12.10",
-    "@fastkit/vue-app-layout": "0.12.11",
-    "@fastkit/vue-color-scheme": "0.12.10",
-    "@fastkit/vue-form-control": "0.12.10",
-    "@fastkit/color-scheme-gen": "0.12.10",
-    "@fastkit/vue-loading": "0.12.10",
-    "@fastkit/vue-media-match": "0.12.10",
-    "@fastkit/tiny-logger": "0.12.10",
-    "@fastkit/vue-scroller": "0.12.10",
-    "@fastkit/vue-stack": "0.12.10",
-    "@fastkit/media-match-gen": "0.12.10",
-    "@fastkit/vue-utils": "0.12.10"
+    "@fastkit/color-scheme": "1.0.0",
+    "@fastkit/color-scheme-gen": "0.13.0",
+    "@fastkit/dom": "0.1.0",
+    "@fastkit/helpers": "0.13.0",
+    "@fastkit/icon-font": "1.0.0",
+    "@fastkit/media-match": "1.0.0",
+    "@fastkit/media-match-gen": "0.13.0",
+    "@fastkit/rules": "0.13.0",
+    "@fastkit/stylebase": "0.13.0",
+    "@fastkit/tiny-logger": "0.13.0",
+    "@fastkit/vue-app-layout": "0.13.0",
+    "@fastkit/vue-body-scroll-lock": "0.1.0",
+    "@fastkit/vue-action": "0.1.0",
+    "@fastkit/vue-click-outside": "0.1.0",
+    "@fastkit/vue-color-scheme": "0.13.0",
+    "@fastkit/vue-form-control": "0.13.0",
+    "@fastkit/vue-keyboard": "0.1.0",
+    "@fastkit/vue-loading": "0.13.0",
+    "@fastkit/vue-location": "0.1.0",
+    "@fastkit/vue-media-match": "0.13.0",
+    "@fastkit/vue-resize": "0.1.0",
+    "@fastkit/vue-scroller": "0.13.0",
+    "@fastkit/vue-stack": "0.13.0",
+    "@fastkit/vue-transitions": "0.1.0",
+    "@fastkit/vue-utils": "0.13.0"
   },
   "peerDependencies": {
     "vue": "^3.2.0",

package/src/components/VAvatar/VAvatar.tsx

@@ -1,10 +1,7 @@
 import './VAvatar.scss';
 import { defineComponent, computed, PropType } from 'vue';
-import {
-  navigationableInheritProps,
-  useNavigationable,
-  renderSlotOrEmpty,
-} from '@fastkit/vue-utils';
+import { renderSlotOrEmpty } from '@fastkit/vue-utils';
+import { actionableInheritProps, useActionable } from '@fastkit/vue-action';
 import { colorSchemeProps, useColorClasses } from '@fastkit/vue-color-scheme';
 import { useVui } from '../../injections';
 import { VBusyImage } from '../VBusyImage';
@@ -21,7 +18,7 @@ export type AvatarSize = (typeof AVATAR_SIZES)[number];
 export function createAvatarProps() {
   return {
     ...colorSchemeProps(),
-    ...navigationableInheritProps,
+    ...actionableInheritProps,
     size: {
       type: [String, Number] as PropType<AvatarSize | number>,
       default: 'md',
@@ -44,7 +41,7 @@ export const VAvatar = defineComponent({
       color: () => props.color || defaults.color,
       variant: () => props.variant || defaults.variant,
     });
-    const navigationable = useNavigationable(ctx, {
+    const actionable = useActionable(ctx, {
       clickableClassName: () => 'v-avatar--clickable',
       linkFallbackTag: 'div',
     });
@@ -71,7 +68,7 @@ export const VAvatar = defineComponent({
 
     return () => {
       const { src } = props;
-      const { Tag, attrs } = navigationable.value;
+      const { Tag, attrs } = actionable.value;
       return (
         <Tag
           {...attrs}

package/src/components/VBreadcrumbs/VBreadcrumbs.tsx

@@ -1,13 +1,13 @@
 import './VBreadcrumbs.scss';
 
 import { defineComponent, PropType, VNodeChild, computed } from 'vue';
-import { VLink, NavigationableInheritProps } from '@fastkit/vue-utils';
+import { VAction, ActionableInheritProps } from '@fastkit/vue-action';
 import { useVui } from '../../injections';
 import type { VuiService } from '../../service';
 import { RawIconProp, resolveRawIconProp } from '../VIcon';
 
 export interface BreadcrumbsItem
-  extends Pick<NavigationableInheritProps, 'to' | 'disabled'> {
+  extends Pick<ActionableInheritProps, 'to' | 'disabled'> {
   /**
    * "正確なマッチモード" を強制する場合true
    */
@@ -101,14 +101,14 @@ export const VBreadcrumbs = defineComponent({
         if (text) myChildren.push(text);
 
         const itemChild = to ? (
-          <VLink
+          <VAction
             class="v-breadcrumbs__link"
             to={to}
             exactActiveClass="v-breadcrumbs__link--active"
             // exact={exact}
           >
             {myChildren}
-          </VLink>
+          </VAction>
         ) : (
           myChildren
         );

package/src/components/VBusyImage/VBusyImage.tsx

@@ -12,7 +12,8 @@ import {
   onBeforeUnmount,
   CSSProperties,
 } from 'vue';
-import { IN_WINDOW, loadImage } from '@fastkit/helpers';
+import { IN_WINDOW } from '@fastkit/helpers';
+import { loadImage } from '@fastkit/dom';
 import { defineSlotsProps } from '@fastkit/vue-utils';
 
 export declare type ImgHTMLAttributesPropOptions = {

package/src/components/VButton/VButton.tsx

@@ -12,9 +12,8 @@ import {
   createPropsOptions,
   renderSlotOrEmpty,
   htmlAttributesPropOptions,
-  VLink,
-  navigationableInheritProps,
 } from '@fastkit/vue-utils';
+import { VAction, actionableInheritProps } from '@fastkit/vue-action';
 import { useVui } from '../../injections';
 import { createControlProps, useControl } from '../../composables';
 import { VProgressCircular } from '../loading';
@@ -57,7 +56,7 @@ function resolveRawVButtonIcon(
 export const vueButtonProps = createPropsOptions({
   ...htmlAttributesPropOptions,
   ...colorSchemeProps(),
-  ...navigationableInheritProps,
+  ...actionableInheritProps,
   spacer: [Boolean, String] as PropType<RawVButtonSpacer>,
   rounded: Boolean,
   icon: [String, Function] as PropType<RawVButtonIcon>,
@@ -125,7 +124,6 @@ export const VButton = defineComponent({
 
     const classes = computed(() => [
       color.colorClasses.value,
-      // navigationable.value.classes,
       spacer.value ? `v-button--spacer-${spacer.value}` : undefined,
       `v-button--${control.size.value}`,
       `v-button--align-${props.align}`,
@@ -140,7 +138,7 @@ export const VButton = defineComponent({
     return () => {
       const children = renderSlotOrEmpty(ctx.slots);
       return (
-        <VLink {...ctx.attrs} class={['v-button', classes.value]}>
+        <VAction {...ctx.attrs} class={['v-button', classes.value]}>
           <span class="v-button__content">
             {startIcon.value}
             {children}
@@ -154,7 +152,7 @@ export const VButton = defineComponent({
               size={LOADING_SIZE_MAP[control.size.value]}
             />
           )}
-        </VLink>
+        </VAction>
       );
     };
   },

package/src/components/VCard/VCard.tsx

@@ -1,9 +1,9 @@
 import './VCard.scss';
 import { defineComponent, computed } from 'vue';
 import { VPaper, createPaperProps } from '../VPaper';
-import { navigationableInheritProps, VLink } from '@fastkit/vue-utils';
+import { actionableInheritProps, VAction } from '@fastkit/vue-action';
 
-// @TODO Unable to resolve dts for `navigationableInheritProps`.
+// @TODO Unable to resolve dts for `actionableInheritProps`.
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { RouteLocationRaw } from 'vue-router';
@@ -11,7 +11,7 @@ import { RouteLocationRaw } from 'vue-router';
 export function createCardProps() {
   return {
     ...createPaperProps(),
-    ...navigationableInheritProps,
+    ...actionableInheritProps,
     disabled: Boolean,
   };
 }
@@ -32,7 +32,7 @@ export const VCard = defineComponent({
           ctx.attrs.class,
           typeof ctx.attrs.onClick === 'function' && 'clickable',
         ],
-        tag: hasLink ? VLink : 'div',
+        tag: hasLink ? VAction : 'div',
       };
       if (props.disabled) {
         attrs.disabled = 'disabled' as any;

package/src/components/VChip/VChip.tsx

@@ -1,16 +1,13 @@
 import './VChip.scss';
 import { defineComponent, computed, PropType, VNodeChild } from 'vue';
-import {
-  navigationableInheritProps,
-  useNavigationable,
-  renderSlotOrEmpty,
-} from '@fastkit/vue-utils';
+import { renderSlotOrEmpty } from '@fastkit/vue-utils';
+import { actionableInheritProps, useActionable } from '@fastkit/vue-action';
 import { colorSchemeProps, useColorClasses } from '@fastkit/vue-color-scheme';
 import { useVui } from '../../injections';
 import type { IconName } from '../VIcon';
 import { VIcon } from '../VIcon';
 
-// @TODO Unable to resolve dts for `navigationableInheritProps`.
+// @TODO Unable to resolve dts for `actionableInheritProps`.
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { RouteLocationRaw } from 'vue-router';
@@ -26,7 +23,7 @@ export type RawVChipIcon = IconName | VChipIcon;
 export function createChipProps() {
   return {
     ...colorSchemeProps(),
-    ...navigationableInheritProps,
+    ...actionableInheritProps,
     size: {
       type: String as PropType<ChipSize>,
       default: 'md',
@@ -76,7 +73,7 @@ export const VChip = defineComponent({
       const _icon = resolveRawVChipIcon(props.endIcon, 'end');
       return _icon && _icon();
     });
-    const navigationable = useNavigationable(ctx, {
+    const actionable = useActionable(ctx, {
       clickableClassName: () => 'v-chip--clickable',
       linkFallbackTag: 'div',
     });
@@ -92,7 +89,7 @@ export const VChip = defineComponent({
     });
 
     return () => {
-      const { Tag, attrs } = navigationable.value;
+      const { Tag, attrs } = actionable.value;
       return (
         <Tag
           {...attrs}

package/src/components/VDataTable/VDataTable.tsx

@@ -22,7 +22,8 @@ import { VPagination } from '../VPagination';
 import { VCheckbox } from '../VCheckbox';
 import { VIcon, resolveRawIconProp } from '../VIcon';
 import { VProgressCircular } from '../loading';
-import { resizeDirectiveArgument, VNodeChildOrSlot } from '@fastkit/vue-utils';
+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';

package/src/components/VListTile/VListTile.tsx

@@ -8,17 +8,12 @@ import {
   watch,
 } from 'vue';
 import { rawIconProp, resolveRawIconProp } from '../VIcon';
-import {
-  renderSlotOrEmpty,
-  navigationableInheritProps,
-  createPropsOptions,
-} from '@fastkit/vue-utils';
+import { renderSlotOrEmpty, createPropsOptions } from '@fastkit/vue-utils';
+import { actionableInheritProps, VAction } from '@fastkit/vue-action';
 import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
-// import { useLink } from 'vue-router';
-import { VLink } from '@fastkit/vue-utils';
 import { useVui } from '../../injections';
 
-// @TODO Unable to resolve dts for `navigationableInheritProps`.
+// @TODO Unable to resolve dts for `actionableInheritProps`.
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { RouteLocationRaw } from 'vue-router';
@@ -26,7 +21,7 @@ import { RouteLocationRaw } from 'vue-router';
 export function createListTileProps() {
   const icon = rawIconProp();
   return {
-    ...navigationableInheritProps,
+    ...actionableInheritProps,
     ...createPropsOptions({
       startIcon: icon,
       endIcon: icon,
@@ -104,7 +99,7 @@ export const VListTile = defineComponent({
       const _endIcon = endIcon.value;
 
       return (
-        <VLink
+        <VAction
           {...ctx.attrs}
           class={['v-list-tile', classes.value]}
           clickableClassName="v-list-tile--clickable">
@@ -121,7 +116,7 @@ export const VListTile = defineComponent({
               {_endIcon}
             </span>
           )}
-        </VLink>
+        </VAction>
       );
     };
   },

package/src/components/VNavigation/VNavigationItem.tsx

@@ -10,16 +10,13 @@ import {
   watch,
 } from 'vue';
 import { createListTileProps, listTileEmits, VListTile } from '../VListTile';
-import {
-  ExtractPropInput,
-  renderSlotOrEmpty,
-  VExpandTransition,
-} from '@fastkit/vue-utils';
+import { ExtractPropInput, renderSlotOrEmpty } 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 `navigationableInheritProps`.
+// @TODO Unable to resolve dts for `actionableInheritProps`.
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { RouteLocationRaw } from 'vue-router';

package/src/components/VPagination/VPagination.tsx

@@ -16,7 +16,7 @@ import {
 import { isPromise } from '@fastkit/helpers';
 import { useRouter, RouterLink } from 'vue-router';
 import { resolveRawIconProp } from '../VIcon';
-import { resizeDirectiveArgument } from '@fastkit/vue-utils';
+import { resizeDirectiveArgument } from '@fastkit/vue-resize';
 import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
 import { useVui } from '../../injections';
 

package/src/components/VSelect/VSelect.tsx

@@ -20,9 +20,8 @@ import {
   createPropsOptions,
   VNodeChildOrSlot,
   resolveVNodeChildOrSlots,
-  useKeyboard,
 } from '@fastkit/vue-utils';
-import {} from '@fastkit/vue-scroller';
+import { useKeyboard } from '@fastkit/vue-keyboard';
 import { VFormControl } from '../VFormControl';
 import {
   VControlField,

package/src/index.ts

@@ -4,15 +4,24 @@ export * from '@fastkit/helpers';
 export * from '@fastkit/icon-font';
 export * from '@fastkit/media-match';
 export * from '@fastkit/vue-media-match';
+export * from '@fastkit/vue-keyboard';
+export * from '@fastkit/vue-transitions';
+export * from '@fastkit/vue-location';
 export * from '@fastkit/rules';
+export * from '@fastkit/vue-body-scroll-lock';
+export * from '@fastkit/vue-click-outside';
 export * from '@fastkit/vue-app-layout';
 export * from '@fastkit/vue-color-scheme';
 export * from '@fastkit/vue-form-control';
 export * from '@fastkit/vue-scroller';
 export * from '@fastkit/vue-stack';
+export * from '@fastkit/vue-action';
 export * from '@fastkit/vue-utils';
 export * from '@fastkit/vue-loading';
 
+// @MEMO Alias export
+export { VAction as VLink } from '@fastkit/vue-action';
+
 export * from './schemes';
 export * from './composables';
 export * from './components';

package/src/plugin.tsx

@@ -10,6 +10,9 @@ import {
   installVueStackPlugin,
   VueStackServiceOptions,
 } from '@fastkit/vue-stack';
+import { installBodyScrollLockDirective } from '@fastkit/vue-body-scroll-lock';
+import { installClickOutsideDirective } from '@fastkit/vue-click-outside';
+import { installResizeDirective } from '@fastkit/vue-resize';
 import { VueColorSchemePlugin } from '@fastkit/vue-color-scheme';
 import { installVueAppLayout } from '@fastkit/vue-app-layout';
 import { onAppUnmount } from '@fastkit/vue-utils';
@@ -79,6 +82,9 @@ export class VuiPlugin {
     });
 
     installVueAppLayout(app);
+    installBodyScrollLockDirective(app);
+    installClickOutsideDirective(app);
+    installResizeDirective(app);
 
     // Vui
     const $vui = new VuiService(opts, app.config.globalProperties.$vstack);

package/src/service.tsx

@@ -13,7 +13,8 @@ import { type VNodeChildOrSlot } from '@fastkit/vue-utils';
 import { type VueColorSchemePluginSettings } from '@fastkit/vue-color-scheme';
 import type { Router } from 'vue-router';
 import { RouterLink, useLink, UseLinkOptions } from 'vue-router';
-import { LocationService, setDefaultRouterLink } from '@fastkit/vue-utils';
+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, FormControlHinttipDelay } from '@fastkit/vue-form-control';