@fastkit/vui 0.6.42 → 0.6.46

package/src/components/VNavigation/VNavigationItem.tsx

@@ -22,6 +22,11 @@ export function createNavigationItemProps() {
   return {
     ...createListTileProps(),
     match: String,
+    depth: {
+      type: Number,
+      default: 0,
+    },
+    nested: Boolean,
     // key: {
     //   type: [String, Number],
     //   required: true,
@@ -98,6 +103,7 @@ export const VNavigationItem = defineComponent({
     const classes = computed(() => [
       {
         'v-navigation-item--opened': opened.value,
+        [`v-navigation-item--depth-${props.depth}`]: props.depth > 0,
       },
     ]);
 
@@ -238,6 +244,7 @@ export const VNavigationItem = defineComponent({
                 {_children.map((child) =>
                   renderNavigationItemInput(child, {
                     startIconEmptySpace: _props.value.startIconEmptySpace,
+                    depth: props.nested ? props.depth + 1 : props.depth,
                     // onClick,
                     // onChangeActive,
                   }),

package/src/components/VPagination/VPagination.tsx

@@ -77,6 +77,7 @@ export const VPagination = defineComponent({
   props: paginationProps(),
   emits: {
     change: (page: number) => true,
+    'update:modelValue': (page: number) => true,
   },
   setup(props, ctx) {
     const vui = useVui();

package/src/components/VPaper/VPaper.scss

@@ -13,17 +13,23 @@
     --paper-link-color: var(--nav-color);
   }
 
+  display: block;
   color: var(--paper-text-color);
   background-color: var(--paper-background--color);
   border-radius: var(--paper-radius);
 
+  &__inner {
+    position: relative;
+    border-radius: inherit;
+  }
+
   &--square {
     --paper-radius: 0px;
   }
 
-  a {
-    color: var(--paper-link-color);
-  }
+  // a:not(.v-paper) {
+  //   color: var(--paper-link-color);
+  // }
 
   &__header {
     border-top-left-radius: inherit;

package/src/components/VPaper/VPaper.tsx

@@ -1,14 +1,19 @@
 import './VPaper.scss';
 import { defineComponent, computed, PropType, VNodeProps } from 'vue';
 import { createElevationProps, useElevation } from '../../composables';
-import { renderSlotOrEmpty, defineSlotsProps } from '@fastkit/vue-utils';
+import {
+  renderSlotOrEmpty,
+  defineSlotsProps,
+  htmlAttributesPropOptions,
+} from '@fastkit/vue-utils';
 import { useScopeColorClass, ScopeName } from '@fastkit/vue-color-scheme';
 
 export function createPaperBaseProps() {
   return {
+    ...htmlAttributesPropOptions,
     color: String as PropType<ScopeName>,
     tag: {
-      type: String,
+      type: [String, Object] as PropType<any>,
       default: 'div',
     },
     ...defineSlotsProps<{
@@ -29,11 +34,13 @@ export function createPaperProps() {
     headerProps: Object as PropType<ARGS>,
     bodyProps: Object as PropType<ARGS>,
     footerProps: Object as PropType<ARGS>,
+    innerClass: [String, Array, Object] as PropType<any>,
   };
 }
 
 export const VPaper = defineComponent({
   name: 'VPaper',
+  inheritAttrs: false,
   props: createPaperProps(),
   setup(props, ctx) {
     const tag = computed(() => props.tag);
@@ -44,7 +51,7 @@ export const VPaper = defineComponent({
       scope.value.className,
       {
         'v-paper--plain': !scope.value.value,
-        'v-paper--has-color': !!scope.value.value,
+        'v-paper--has-color': !!scope.value.value || !!ctx.attrs.disabled,
         'v-paper--square': props.square,
       },
     ]);
@@ -57,20 +64,22 @@ export const VPaper = defineComponent({
       const header = renderSlotOrEmpty(ctx.slots, 'header');
       const footer = renderSlotOrEmpty(ctx.slots, 'footer');
       return (
-        <TagName class={['v-paper', classes.value]}>
-          {header && (
-            <div class="v-paper__header" {...headerProps.value}>
-              {header}
+        <TagName class={['v-paper', classes.value]} {...ctx.attrs}>
+          <div class={['v-paper__inner', props.innerClass]}>
+            {header && (
+              <div class="v-paper__header" {...headerProps.value}>
+                {header}
+              </div>
+            )}
+            <div class="v-paper__body" {...bodyProps.value}>
+              {renderSlotOrEmpty(ctx.slots, 'default')}
             </div>
-          )}
-          <div class="v-paper__body" {...bodyProps.value}>
-            {renderSlotOrEmpty(ctx.slots, 'default')}
+            {footer && (
+              <div class="v-paper__footer" {...footerProps.value}>
+                {footer}
+              </div>
+            )}
           </div>
-          {footer && (
-            <div class="v-paper__footer" {...footerProps.value}>
-              {footer}
-            </div>
-          )}
         </TagName>
       );
     };

package/src/styles/variables.scss

@@ -296,6 +296,11 @@
 
   // breadcrumbs
   --breadcrumbs-font-size: var(--typo-sm-size);
+
+  // =============================================
+  // tiles
+  // =============================================
+  --list-tile-padding: calc(var(--root-em) * 0.625);
 }
 
 :root,

package/src/tool/vite-plugin.ts

@@ -106,8 +106,8 @@ export interface ViteVuiPluginOptions
   mediaMatch?: string;
   iconFont?: RawIconFontEntry[];
   iconFontDefaults?: IconFontSettings;
-  onBooted?: () => any;
-  onBootError?: (err: unknown) => any;
+  onBooted?: (() => any) | (() => Promise<any>);
+  onBootError?: ((err: unknown) => any) | ((err: unknown) => Promise<any>);
   __dev?: boolean;
 }