@fastkit/vui 0.11.0 → 0.12.1

package/dist/vui.css

@@ -1544,10 +1544,10 @@ thead th {
 }
 .v-drawer-layout__header {
   display: flex;
-  flex: 0 0 var(--v-app-layout-vertial-fixed-height);
+  flex: 0 0 var(--val-topToolbar-height);
   align-items: center;
   justify-content: center;
-  height: var(--v-app-layout-vertial-fixed-height);
+  height: var(--val-topToolbar-height);
 }
 .v-drawer-layout__body {
   flex: 1 1 100%;

package/dist/vui.d.ts

@@ -1,9 +1,13 @@
 import { AllowedComponentProps } from 'vue';
 import { AnyExtension } from '@tiptap/vue-3';
 import { App } from 'vue';
+import { BodyScrollLockDirectiveBindingValue } from '@fastkit/vue-utils';
+import { BodyScrollLockDirectiveBindingValue as BodyScrollLockDirectiveBindingValue_2 } from '@fastkit/vue-kit';
 import { BoldOptions } from '@tiptap/extension-bold';
 import { BulletListOptions } from '@tiptap/extension-bullet-list';
 import { ChainedCommands } from '@tiptap/vue-3';
+import { ClickOutsideDirectiveBindingValue } from '@fastkit/vue-utils';
+import { ClickOutsideDirectiveBindingValue as ClickOutsideDirectiveBindingValue_2 } from '@fastkit/vue-kit';
 import {  ColorVariant , ThemeName, PaletteName } from '@fastkit/color-scheme';
 import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
@@ -54,6 +58,8 @@ import { OrderedListOptions } from '@tiptap/extension-ordered-list';
 import { Prop } from 'vue';
 import { PropType } from 'vue';
 import { RawFormSelectorItems } from '@fastkit/vue-kit';
+import { RawResizeDirectiveBindingValue } from '@fastkit/vue-utils';
+import { RawResizeDirectiveBindingValue as RawResizeDirectiveBindingValue_2 } from '@fastkit/vue-kit';
 import { RawTextableFinishingProp } from '@fastkit/vue-kit';
 import { RawTextareaAutosizeSettings } from '@fastkit/vue-kit';
 import { Ref } from 'vue';
@@ -419,6 +425,9 @@ export declare function createCardProps(): {
     onAnimationiteration: PropType<((payload: AnimationEvent) => void) | undefined>;
     onTransitionend: PropType<((payload: TransitionEvent) => void) | undefined>;
     onTransitionstart: PropType<((payload: TransitionEvent) => void) | undefined>;
+    'v-click-outside': PropType<ClickOutsideDirectiveBindingValue | undefined>;
+    'v-body-scroll-lock': PropType<BodyScrollLockDirectiveBindingValue>;
+    'v-resize': PropType<RawResizeDirectiveBindingValue | undefined>;
     elevation: PropType<VuiElevationValue>;
 };
 
@@ -762,6 +771,9 @@ export declare function createPaperBaseProps(): {
     onAnimationiteration: PropType<((payload: AnimationEvent) => void) | undefined>;
     onTransitionend: PropType<((payload: TransitionEvent) => void) | undefined>;
     onTransitionstart: PropType<((payload: TransitionEvent) => void) | undefined>;
+    'v-click-outside': PropType<ClickOutsideDirectiveBindingValue | undefined>;
+    'v-body-scroll-lock': PropType<BodyScrollLockDirectiveBindingValue>;
+    'v-resize': PropType<RawResizeDirectiveBindingValue | undefined>;
 };
 
 export declare function createPaperProps(): {
@@ -949,6 +961,9 @@ export declare function createPaperProps(): {
     onAnimationiteration: PropType<((payload: AnimationEvent) => void) | undefined>;
     onTransitionend: PropType<((payload: TransitionEvent) => void) | undefined>;
     onTransitionstart: PropType<((payload: TransitionEvent) => void) | undefined>;
+    'v-click-outside': PropType<ClickOutsideDirectiveBindingValue | undefined>;
+    'v-body-scroll-lock': PropType<BodyScrollLockDirectiveBindingValue>;
+    'v-resize': PropType<RawResizeDirectiveBindingValue | undefined>;
     elevation: PropType<VuiElevationValue>;
 };
 
@@ -2707,6 +2722,9 @@ export declare const VBusyImage: DefineComponent<{
     onAnimationiteration: PropType<((payload: AnimationEvent) => void) | undefined>;
     onTransitionend: PropType<((payload: TransitionEvent) => void) | undefined>;
     onTransitionstart: PropType<((payload: TransitionEvent) => void) | undefined>;
+    'v-click-outside': PropType<ClickOutsideDirectiveBindingValue | undefined>;
+    'v-body-scroll-lock': PropType<BodyScrollLockDirectiveBindingValue>;
+    'v-resize': PropType<RawResizeDirectiveBindingValue | undefined>;
 }, () => JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     load: (ev: Event) => true;
     error: (ev: Event) => true;
@@ -2895,6 +2913,9 @@ export declare const VBusyImage: DefineComponent<{
     onAnimationiteration: PropType<((payload: AnimationEvent) => void) | undefined>;
     onTransitionend: PropType<((payload: TransitionEvent) => void) | undefined>;
     onTransitionstart: PropType<((payload: TransitionEvent) => void) | undefined>;
+    'v-click-outside': PropType<ClickOutsideDirectiveBindingValue | undefined>;
+    'v-body-scroll-lock': PropType<BodyScrollLockDirectiveBindingValue>;
+    'v-resize': PropType<RawResizeDirectiveBindingValue | undefined>;
 }>> & {
     onLoad?: ((ev: Event) => any) | undefined;
     onError?: ((ev: Event) => any) | undefined;
@@ -3114,6 +3135,9 @@ export declare const VButton: DefineComponent<{
     onAnimationiteration: PropType<((payload: AnimationEvent) => void) | undefined>;
     onTransitionend: PropType<((payload: TransitionEvent) => void) | undefined>;
     onTransitionstart: PropType<((payload: TransitionEvent) => void) | undefined>;
+    'v-click-outside': PropType<ClickOutsideDirectiveBindingValue | undefined>;
+    'v-body-scroll-lock': PropType<BodyScrollLockDirectiveBindingValue>;
+    'v-resize': PropType<RawResizeDirectiveBindingValue | undefined>;
 }, () => JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     size: {
         type: PropType<"sm" | "md" | "lg">;
@@ -3326,6 +3350,9 @@ export declare const VButton: DefineComponent<{
     onAnimationiteration: PropType<((payload: AnimationEvent) => void) | undefined>;
     onTransitionend: PropType<((payload: TransitionEvent) => void) | undefined>;
     onTransitionstart: PropType<((payload: TransitionEvent) => void) | undefined>;
+    'v-click-outside': PropType<ClickOutsideDirectiveBindingValue | undefined>;
+    'v-body-scroll-lock': PropType<BodyScrollLockDirectiveBindingValue>;
+    'v-resize': PropType<RawResizeDirectiveBindingValue | undefined>;
 }>>, {
     rounded: boolean;
     align: "left" | "right" | "center";
@@ -3576,6 +3603,9 @@ export declare const VCard: DefineComponent<{
     onAnimationiteration: PropType<((payload: AnimationEvent) => void) | undefined>;
     onTransitionend: PropType<((payload: TransitionEvent) => void) | undefined>;
     onTransitionstart: PropType<((payload: TransitionEvent) => void) | undefined>;
+    'v-click-outside': PropType<ClickOutsideDirectiveBindingValue | undefined>;
+    'v-body-scroll-lock': PropType<BodyScrollLockDirectiveBindingValue>;
+    'v-resize': PropType<RawResizeDirectiveBindingValue | undefined>;
     elevation: PropType<VuiElevationValue>;
 }, () => JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     disabled: BooleanConstructor;
@@ -3781,6 +3811,9 @@ export declare const VCard: DefineComponent<{
     onAnimationiteration: PropType<((payload: AnimationEvent) => void) | undefined>;
     onTransitionend: PropType<((payload: TransitionEvent) => void) | undefined>;
     onTransitionstart: PropType<((payload: TransitionEvent) => void) | undefined>;
+    'v-click-outside': PropType<ClickOutsideDirectiveBindingValue | undefined>;
+    'v-body-scroll-lock': PropType<BodyScrollLockDirectiveBindingValue>;
+    'v-resize': PropType<RawResizeDirectiveBindingValue | undefined>;
     elevation: PropType<VuiElevationValue>;
 }>>, {
     disabled: boolean;
@@ -4643,6 +4676,9 @@ export declare const VDrawerLayout: DefineComponent<{
     onAnimationiteration: PropType<((payload: AnimationEvent) => void) | undefined>;
     onTransitionend: PropType<((payload: TransitionEvent) => void) | undefined>;
     onTransitionstart: PropType<((payload: TransitionEvent) => void) | undefined>;
+    'v-click-outside': PropType<ClickOutsideDirectiveBindingValue_2 | undefined>;
+    'v-body-scroll-lock': PropType<BodyScrollLockDirectiveBindingValue_2>;
+    'v-resize': PropType<RawResizeDirectiveBindingValue_2 | undefined>;
 }, () => JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     'v-slots': PropType<ResolveRawSlots<{
         header: void;
@@ -4823,6 +4859,9 @@ export declare const VDrawerLayout: DefineComponent<{
     onAnimationiteration: PropType<((payload: AnimationEvent) => void) | undefined>;
     onTransitionend: PropType<((payload: TransitionEvent) => void) | undefined>;
     onTransitionstart: PropType<((payload: TransitionEvent) => void) | undefined>;
+    'v-click-outside': PropType<ClickOutsideDirectiveBindingValue_2 | undefined>;
+    'v-body-scroll-lock': PropType<BodyScrollLockDirectiveBindingValue_2>;
+    'v-resize': PropType<RawResizeDirectiveBindingValue_2 | undefined>;
 }>>, {
     tag: any;
 }>;
@@ -5251,6 +5290,9 @@ export declare const VGridContainer: DefineComponent<{
     onAnimationiteration: PropType<((payload: AnimationEvent) => void) | undefined>;
     onTransitionend: PropType<((payload: TransitionEvent) => void) | undefined>;
     onTransitionstart: PropType<((payload: TransitionEvent) => void) | undefined>;
+    'v-click-outside': PropType<ClickOutsideDirectiveBindingValue | undefined>;
+    'v-body-scroll-lock': PropType<BodyScrollLockDirectiveBindingValue>;
+    'v-resize': PropType<RawResizeDirectiveBindingValue | undefined>;
 }, () => JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     wrapperTag: {
         type: StringConstructor;
@@ -5437,6 +5479,9 @@ export declare const VGridContainer: DefineComponent<{
     onAnimationiteration: PropType<((payload: AnimationEvent) => void) | undefined>;
     onTransitionend: PropType<((payload: TransitionEvent) => void) | undefined>;
     onTransitionstart: PropType<((payload: TransitionEvent) => void) | undefined>;
+    'v-click-outside': PropType<ClickOutsideDirectiveBindingValue | undefined>;
+    'v-body-scroll-lock': PropType<BodyScrollLockDirectiveBindingValue>;
+    'v-resize': PropType<RawResizeDirectiveBindingValue | undefined>;
 }>>, {
     wrapperTag: string;
     tag: string;
@@ -5621,6 +5666,9 @@ export declare const VGridItem: DefineComponent<{
     onAnimationiteration: PropType<((payload: AnimationEvent) => void) | undefined>;
     onTransitionend: PropType<((payload: TransitionEvent) => void) | undefined>;
     onTransitionstart: PropType<((payload: TransitionEvent) => void) | undefined>;
+    'v-click-outside': PropType<ClickOutsideDirectiveBindingValue | undefined>;
+    'v-body-scroll-lock': PropType<BodyScrollLockDirectiveBindingValue>;
+    'v-resize': PropType<RawResizeDirectiveBindingValue | undefined>;
 }, () => JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     tag: {
         type: StringConstructor;
@@ -5800,6 +5848,9 @@ export declare const VGridItem: DefineComponent<{
     onAnimationiteration: PropType<((payload: AnimationEvent) => void) | undefined>;
     onTransitionend: PropType<((payload: TransitionEvent) => void) | undefined>;
     onTransitionstart: PropType<((payload: TransitionEvent) => void) | undefined>;
+    'v-click-outside': PropType<ClickOutsideDirectiveBindingValue | undefined>;
+    'v-body-scroll-lock': PropType<BodyScrollLockDirectiveBindingValue>;
+    'v-resize': PropType<RawResizeDirectiveBindingValue | undefined>;
 }>>, {
     tag: string;
 }>;
@@ -5990,6 +6041,9 @@ export declare const VHero: DefineComponent<{
     onAnimationiteration: PropType<((payload: AnimationEvent) => void) | undefined>;
     onTransitionend: PropType<((payload: TransitionEvent) => void) | undefined>;
     onTransitionstart: PropType<((payload: TransitionEvent) => void) | undefined>;
+    'v-click-outside': PropType<ClickOutsideDirectiveBindingValue | undefined>;
+    'v-body-scroll-lock': PropType<BodyScrollLockDirectiveBindingValue>;
+    'v-resize': PropType<RawResizeDirectiveBindingValue | undefined>;
 }, () => JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     'v-slots': PropType<ResolveRawSlots_2<{
         default: void;
@@ -6176,6 +6230,9 @@ export declare const VHero: DefineComponent<{
     onAnimationiteration: PropType<((payload: AnimationEvent) => void) | undefined>;
     onTransitionend: PropType<((payload: TransitionEvent) => void) | undefined>;
     onTransitionstart: PropType<((payload: TransitionEvent) => void) | undefined>;
+    'v-click-outside': PropType<ClickOutsideDirectiveBindingValue | undefined>;
+    'v-body-scroll-lock': PropType<BodyScrollLockDirectiveBindingValue>;
+    'v-resize': PropType<RawResizeDirectiveBindingValue | undefined>;
 }>>, {
     color: ScopeName;
     tag: string;
@@ -7046,6 +7103,9 @@ export declare const VPaper: DefineComponent<{
     onAnimationiteration: PropType<((payload: AnimationEvent) => void) | undefined>;
     onTransitionend: PropType<((payload: TransitionEvent) => void) | undefined>;
     onTransitionstart: PropType<((payload: TransitionEvent) => void) | undefined>;
+    'v-click-outside': PropType<ClickOutsideDirectiveBindingValue | undefined>;
+    'v-body-scroll-lock': PropType<BodyScrollLockDirectiveBindingValue>;
+    'v-resize': PropType<RawResizeDirectiveBindingValue | undefined>;
     elevation: PropType<VuiElevationValue>;
 }, () => JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     square: BooleanConstructor;
@@ -7232,6 +7292,9 @@ export declare const VPaper: DefineComponent<{
     onAnimationiteration: PropType<((payload: AnimationEvent) => void) | undefined>;
     onTransitionend: PropType<((payload: TransitionEvent) => void) | undefined>;
     onTransitionstart: PropType<((payload: TransitionEvent) => void) | undefined>;
+    'v-click-outside': PropType<ClickOutsideDirectiveBindingValue | undefined>;
+    'v-body-scroll-lock': PropType<BodyScrollLockDirectiveBindingValue>;
+    'v-resize': PropType<RawResizeDirectiveBindingValue | undefined>;
     elevation: PropType<VuiElevationValue>;
 }>>, {
     square: boolean;
@@ -9043,6 +9106,9 @@ export declare const VToolbarMenu: DefineComponent<{
     onAnimationiteration: PropType<((payload: AnimationEvent) => void) | undefined>;
     onTransitionend: PropType<((payload: TransitionEvent) => void) | undefined>;
     onTransitionstart: PropType<((payload: TransitionEvent) => void) | undefined>;
+    'v-click-outside': PropType<ClickOutsideDirectiveBindingValue | undefined>;
+    'v-body-scroll-lock': PropType<BodyScrollLockDirectiveBindingValue>;
+    'v-resize': PropType<RawResizeDirectiveBindingValue | undefined>;
 }, () => JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     size: {
         type: PropType<"sm" | "md" | "lg">;
@@ -9255,6 +9321,9 @@ export declare const VToolbarMenu: DefineComponent<{
     onAnimationiteration: PropType<((payload: AnimationEvent) => void) | undefined>;
     onTransitionend: PropType<((payload: TransitionEvent) => void) | undefined>;
     onTransitionstart: PropType<((payload: TransitionEvent) => void) | undefined>;
+    'v-click-outside': PropType<ClickOutsideDirectiveBindingValue | undefined>;
+    'v-body-scroll-lock': PropType<BodyScrollLockDirectiveBindingValue>;
+    'v-resize': PropType<RawResizeDirectiveBindingValue | undefined>;
 }>>, {
     rounded: boolean;
     align: "left" | "right" | "center";
@@ -9492,6 +9561,9 @@ export declare const vueButtonProps: {
     onAnimationiteration: PropType<((payload: AnimationEvent) => void) | undefined>;
     onTransitionend: PropType<((payload: TransitionEvent) => void) | undefined>;
     onTransitionstart: PropType<((payload: TransitionEvent) => void) | undefined>;
+    'v-click-outside': PropType<ClickOutsideDirectiveBindingValue | undefined>;
+    'v-body-scroll-lock': PropType<BodyScrollLockDirectiveBindingValue>;
+    'v-resize': PropType<RawResizeDirectiveBindingValue | undefined>;
 };
 
 export declare const VUI_CHECKBOX_GROUP_SYMBOL = "vui-checkbox-group";

package/dist/vui.mjs

@@ -1,4 +1,4 @@
-import { createPropsOptions, createFormControlSettings, defineSlotsProps, useFormControl, VTooltip, renderSlotOrEmpty, createFormSelectorSettings, createFormControlProps, useFormSelectorControl, resolveVNodeChildOrSlots, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, useParentFormNode, useKeyboard, VMenu, createTextInputSettings, useTextInputControl, createTextareaSettings, useTextareaControl, createFormSettings, useForm, getDocumentScroller, useVScrollerRef, VScroller, useInjectTheme, VStackRoot, resolveVStackDynamicInput, VueColorSchemePlugin, installVueStackPlugin, onAppUnmount } from '@fastkit/vue-kit';
+import { createPropsOptions, createFormControlSettings, defineSlotsProps, useFormControl, VTooltip, renderSlotOrEmpty, createFormSelectorSettings, createFormControlProps, useFormSelectorControl, resolveVNodeChildOrSlots, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, useParentFormNode, useKeyboard, VMenu, createTextInputSettings, useTextInputControl, createTextareaSettings, useTextareaControl, createFormSettings, useForm, getDocumentScroller, useVScrollerRef, VScroller, useInjectTheme, VStackRoot, VAppLayout, resolveVStackDynamicInput, VueColorSchemePlugin, installVueStackPlugin, installVueAppLayout, onAppUnmount } from '@fastkit/vue-kit';
 export * from '@fastkit/vue-kit';
 export { VDialog, VMenu, VSnackbar, VTooltip } from '@fastkit/vue-kit';
 import { inject, computed, provide, createVNode, mergeProps, defineComponent, Fragment, isVNode, ref, watch, onMounted, onBeforeUnmount, cloneVNode, withDirectives, createTextVNode, vShow, onBeforeUpdate, vModelSelect, nextTick, Transition, reactive } from 'vue';
@@ -10,7 +10,7 @@ export * from '@fastkit/vue-loading';
 import { useScopeColorClass, colorSchemeProps, useColorClasses, toScopeColorClass } from '@fastkit/vue-color-scheme';
 import { loadImage, IN_WINDOW, isPromise } from '@fastkit/helpers';
 export { ICON_NAMES } from '@fastkit/icon-font';
-import { VAppContainer, VAppLayoutControl } from '@fastkit/vue-app-layout';
+import { VAppContainer, VueAppLayout } from '@fastkit/vue-app-layout';
 import { createTextableProps, createTextableEmits, TextableControl } from '@fastkit/vue-form-control';
 import { useEditor, EditorContent, BubbleMenu } from '@tiptap/vue-3';
 import { StarterKit } from '@tiptap/starter-kit';
@@ -441,7 +441,7 @@ function useElevation(props, opts = {}) {
     };
 }
 
-function _isSlot$f(s) {
+function _isSlot$e(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 const VSkeltonLoaderBone = /* @__PURE__ */ defineComponent({
@@ -459,7 +459,7 @@ const VSkeltonLoaderBone = /* @__PURE__ */ defineComponent({
       const TagName = props.tag;
       return createVNode(TagName, mergeProps(ctx.attrs, {
         "class": "v-skelton-loader-bone"
-      }), _isSlot$f(_slot = renderSlotOrEmpty$1(ctx.slots)) ? _slot : {
+      }), _isSlot$e(_slot = renderSlotOrEmpty$1(ctx.slots)) ? _slot : {
         default: () => [_slot]
       });
     };
@@ -1237,7 +1237,7 @@ const VButtonGroup = /* @__PURE__ */ defineComponent({
   }
 });
 
-function _isSlot$e(s) {
+function _isSlot$d(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 const PAGINATION_ALIGNS = ['left', 'center', 'right'];
@@ -1459,7 +1459,7 @@ const VPagination = /* @__PURE__ */ defineComponent({
           "class": classes,
           "to": to,
           "key": key
-        }, _isSlot$e(children) ? children : {
+        }, _isSlot$d(children) ? children : {
           default: () => [children]
         });
       } else {
@@ -1610,7 +1610,7 @@ const VDrawerLayout = /* @__PURE__ */ defineComponent({
 });
 
 // Adornment
-function _isSlot$d(s) {
+function _isSlot$c(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 const VHero = /* @__PURE__ */ defineComponent({
@@ -1645,7 +1645,7 @@ const VHero = /* @__PURE__ */ defineComponent({
         }, {
           default: () => [createVNode(HTagName, {
             "class": "v-hero__title"
-          }, _isSlot$d(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
+          }, _isSlot$c(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
             default: () => [_slot]
           }), adornment && createVNode("div", {
             "class": "v-hero__adornment"
@@ -1656,7 +1656,7 @@ const VHero = /* @__PURE__ */ defineComponent({
   }
 });
 
-function _isSlot$c(s) {
+function _isSlot$b(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 function createNavigationItemProps() {
@@ -1698,7 +1698,7 @@ function renderNavigationItemInput(input, extraProps) {
   return createVNode(VNavigationItem, {
     ...props,
     ...extraProps
-  }, _isSlot$c(label) ? label : {
+  }, _isSlot$b(label) ? label : {
     default: () => [label]
   });
 }
@@ -1862,7 +1862,7 @@ const VNavigationItem = /* @__PURE__ */ defineComponent({
         "class": ['v-navigation-item', classes.value],
         "onClick": onClick,
         "onChangeActive": onChangeActive
-      }), _isSlot$c(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
+      }), _isSlot$b(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
         default: () => [_slot]
       }), _children && createVNode(VExpandTransition, null, {
         default: () => [withDirectives(createVNode("div", {
@@ -2039,7 +2039,7 @@ const VCheckbox = /* @__PURE__ */ defineComponent({
   }
 });
 
-function _isSlot$b(s) {
+function _isSlot$a(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 const VCheckboxGroup = defineFormSelectorComponent({
@@ -2050,7 +2050,7 @@ const VCheckboxGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => createVNode(VCheckbox, attrs, _isSlot$b(slots) ? slots : {
+  }) => createVNode(VCheckbox, attrs, _isSlot$a(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -2101,7 +2101,7 @@ const VRadio = /* @__PURE__ */ defineComponent({
   }
 });
 
-function _isSlot$a(s) {
+function _isSlot$9(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 const VRadioGroup = defineFormSelectorComponent({
@@ -2111,7 +2111,7 @@ const VRadioGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => createVNode(VRadio, attrs, _isSlot$a(slots) ? slots : {
+  }) => createVNode(VRadio, attrs, _isSlot$9(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -2170,7 +2170,7 @@ const VSwitch = /* @__PURE__ */ defineComponent({
   }
 });
 
-function _isSlot$9(s) {
+function _isSlot$8(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 const VSwitchGroup = defineFormSelectorComponent({
@@ -2181,7 +2181,7 @@ const VSwitchGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => createVNode(VSwitch, attrs, _isSlot$9(slots) ? slots : {
+  }) => createVNode(VSwitch, attrs, _isSlot$8(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -2376,7 +2376,7 @@ const VControlField = /* @__PURE__ */ defineComponent({
   }
 });
 
-function _isSlot$8(s) {
+function _isSlot$7(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 const ARROW_KEY_TYPES = useKeyboard.Key(['ArrowUp', 'ArrowDown']);
@@ -2583,7 +2583,7 @@ const VSelect = /* @__PURE__ */ defineComponent({
         "groupId": group.id,
         "label": group.label(selectorControl),
         "disabled": group.disabled
-      }, _isSlot$8(_slot = group.items.map(item => createVNode(VOption, {
+      }, _isSlot$7(_slot = group.items.map(item => createVNode(VOption, {
         "disabled": item.disabled,
         "value": item.value,
         "key": item.value
@@ -3013,7 +3013,7 @@ function resolveRawWysiwygEditorTools(rawTools, vui) {
     };
 }
 
-function _isSlot$7(s) {
+function _isSlot$6(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 const VWysiwygEditor = /* @__PURE__ */ defineComponent({
@@ -3151,7 +3151,7 @@ const VWysiwygEditor = /* @__PURE__ */ defineComponent({
           'v-wysiwyg-editor__floating-toolbar': props.floatingToolbar
         }],
         "variant": variant
-      }, _isSlot$7(_slot = tools.map(({
+      }, _isSlot$6(_slot = tools.map(({
         key,
         icon,
         onClick,
@@ -3182,7 +3182,7 @@ const VWysiwygEditor = /* @__PURE__ */ defineComponent({
           "onClick": ev => onClick(context, ev),
           "color": isActive ? toolButtonActiveColor : undefined,
           "disabled": isDisabled
-        }, _isSlot$7(child) ? child : {
+        }, _isSlot$6(child) ? child : {
           default: () => [child]
         });
       })) ? _slot : {
@@ -3247,7 +3247,7 @@ const VWysiwygEditor = /* @__PURE__ */ defineComponent({
               class: 'v-wysiwyg-editor__bubble-menu'
             }, {
               "editor": editor
-            }), _isSlot$7(_slot2 = this.createTools(true)) ? _slot2 : {
+            }), _isSlot$6(_slot2 = this.createTools(true)) ? _slot2 : {
               default: () => [_slot2]
             })]);
           }
@@ -3875,7 +3875,7 @@ const VForm = /* @__PURE__ */ defineComponent({
   }
 });
 
-function _isSlot$6(s) {
+function _isSlot$5(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 const VTab = /* @__PURE__ */ defineComponent({
@@ -3920,7 +3920,7 @@ const VTab = /* @__PURE__ */ defineComponent({
           "class": classes,
           "to": to,
           "replace": replace
-        }, _isSlot$6(children) ? children : {
+        }, _isSlot$5(children) ? children : {
           default: () => [children]
         });
       } else {
@@ -3937,7 +3937,7 @@ const VTab = /* @__PURE__ */ defineComponent({
   }
 });
 
-function _isSlot$5(s) {
+function _isSlot$4(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 const VTabs = /* @__PURE__ */ defineComponent({
@@ -4190,7 +4190,7 @@ const VTabs = /* @__PURE__ */ defineComponent({
               to(value);
             }
           }
-        }, _isSlot$5(children) ? children : {
+        }, _isSlot$4(children) ? children : {
           default: () => [children]
         });
       });
@@ -4211,7 +4211,7 @@ const VTabs = /* @__PURE__ */ defineComponent({
   }
 });
 
-function _isSlot$4(s) {
+function _isSlot$3(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 const VBreadcrumbs = /* @__PURE__ */ defineComponent({
@@ -4294,7 +4294,7 @@ const VBreadcrumbs = /* @__PURE__ */ defineComponent({
           "class": "v-breadcrumbs__link",
           "to": to,
           "exactActiveClass": "v-breadcrumbs__link--active"
-        }, _isSlot$4(myChildren) ? myChildren : {
+        }, _isSlot$3(myChildren) ? myChildren : {
           default: () => [myChildren]
         }) : myChildren;
         children.push(createVNode("li", {
@@ -4313,7 +4313,7 @@ const VBreadcrumbs = /* @__PURE__ */ defineComponent({
   }
 });
 
-function _isSlot$3(s) {
+function _isSlot$2(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 const VContentSwitcher = /* @__PURE__ */ defineComponent({
@@ -4427,7 +4427,7 @@ const VContentSwitcher = /* @__PURE__ */ defineComponent({
         "onLeaveCancelled": () => {
           getEl().style.height = '';
         }
-      }, _isSlot$3(children) ? children : {
+      }, _isSlot$2(children) ? children : {
         default: () => [children]
       })]);
     };
@@ -4606,7 +4606,7 @@ const VDataTable = /* @__PURE__ */ defineComponent({
     const classesRef = computed(() => [{
       'v-data-table--fixed-header': props.fixedHeader
     }]);
-    const layout = VAppLayoutControl.use();
+    const layout = VueAppLayout.use();
     const bodyInnerStylesRef = computed(() => {
       if (!bootedRef.value) return;
       const {
@@ -5053,17 +5053,13 @@ const VDataTable = /* @__PURE__ */ defineComponent({
   }
 });
 
-function _isSlot$2(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
-}
 const VApp = /* @__PURE__ */ defineComponent({
   name: 'VApp',
   setup(props, ctx) {
     useInjectTheme();
     return () => {
-      let _slot;
-      return createVNode(VStackRoot, null, _isSlot$2(_slot = renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
-        default: () => [_slot]
+      return createVNode(VStackRoot, null, {
+        default: () => [createVNode(VAppLayout, null, ctx.slots)]
       });
     };
   }
@@ -5408,6 +5404,7 @@ class VuiPlugin {
       },
       ...stack
     });
+    installVueAppLayout(app);
     // Vui
     const $vui = new VuiService(opts, app.config.globalProperties.$vstack);
     app.provide(VuiInjectionKey, $vui);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.11.0",
+  "version": "0.12.1",
   "description": "A simple, extensible UI kit for Vue applications.",
   "buildOptions": {
     "name": "Vui",
@@ -59,11 +59,11 @@
     "vue": "^3.2.45"
   },
   "dependencies": {
-    "@fastkit/color-scheme": "0.11.0",
-    "@fastkit/icon-font": "0.11.0",
-    "@fastkit/tiny-logger": "0.11.0",
-    "@fastkit/vite-kit": "0.11.0",
-    "@fastkit/vue-kit": "0.11.0",
+    "@fastkit/color-scheme": "0.12.1",
+    "@fastkit/icon-font": "0.12.1",
+    "@fastkit/tiny-logger": "0.12.1",
+    "@fastkit/vite-kit": "0.12.1",
+    "@fastkit/vue-kit": "0.12.1",
     "@tiptap/extension-link": "^2.0.0-beta.209",
     "@tiptap/extension-text-style": "^2.0.0-beta.209",
     "@tiptap/extension-underline": "^2.0.0-beta.209",

package/src/components/VApp/VApp.tsx

@@ -1,9 +1,5 @@
 import { defineComponent } from 'vue';
-import {
-  VStackRoot,
-  useInjectTheme,
-  renderSlotOrEmpty,
-} from '@fastkit/vue-kit';
+import { VAppLayout, VStackRoot, useInjectTheme } from '@fastkit/vue-kit';
 
 export const VApp = defineComponent({
   name: 'VApp',
@@ -11,7 +7,11 @@ export const VApp = defineComponent({
     useInjectTheme();
 
     return () => {
-      return <VStackRoot>{renderSlotOrEmpty(ctx.slots, 'default')}</VStackRoot>;
+      return (
+        <VStackRoot>
+          <VAppLayout v-slots={ctx.slots} />
+        </VStackRoot>
+      );
     };
   },
 });

package/src/components/VDataTable/VDataTable.tsx

@@ -21,7 +21,7 @@ import { VCheckbox } from '../VCheckbox';
 import { VIcon, resolveRawIconProp } from '../VIcon';
 import { VProgressCircular } from '../loading';
 import { resizeDirectiveArgument, VNodeChildOrSlot } from '@fastkit/vue-utils';
-import { VAppLayoutControl } from '@fastkit/vue-app-layout';
+import { VueAppLayout } from '@fastkit/vue-app-layout';
 import { VPaper } from '../VPaper';
 
 export type DataTableHeaderAlign = 'left' | 'center' | 'right';
@@ -254,7 +254,7 @@ export const VDataTable = defineComponent({
       },
     ]);
 
-    const layout = VAppLayoutControl.use();
+    const layout = VueAppLayout.use();
 
     const bodyInnerStylesRef = computed<CSSProperties | undefined>(() => {
       if (!bootedRef.value) return;

package/src/components/VDrawerLayout/VDrawerLayout.scss

@@ -1,7 +1,4 @@
 .v-drawer-layout {
-  // display: flex;
-  // flex-direction: column;
-  // align-items: stretch;
   display: block;
   width: 100%;
   height: 100%;
@@ -16,10 +13,10 @@
 
   &__header {
     display: flex;
-    flex: 0 0 var(--v-app-layout-vertial-fixed-height);
+    flex: 0 0 var(--val-topToolbar-height);
     align-items: center;
     justify-content: center;
-    height: var(--v-app-layout-vertial-fixed-height);
+    height: var(--val-topToolbar-height);
   }
 
   &__body {

package/src/components/VSelect/VSelect.tsx

@@ -37,7 +37,7 @@ import { VIcon } from '../VIcon';
 import { VMenu } from '../kits';
 import { VOptionGroup } from '../VOptionGroup';
 import { VOption } from '../VOption';
-import { VButton } from '..';
+import { VButton } from '../VButton';
 import { VMenuControl } from '@fastkit/vue-stack';
 
 export const ARROW_KEY_TYPES = useKeyboard.Key(['ArrowUp', 'ArrowDown']);

package/src/plugin.tsx

@@ -7,6 +7,7 @@ import {
   VuiInjectionKey,
 } from './service';
 import {
+  installVueAppLayout,
   installVueStackPlugin,
   VueStackServiceOptions,
   VueColorSchemePlugin,
@@ -77,6 +78,8 @@ export class VuiPlugin {
       ...stack,
     });
 
+    installVueAppLayout(app);
+
     // Vui
     const $vui = new VuiService(opts, app.config.globalProperties.$vstack);
     app.provide(VuiInjectionKey, $vui);