@fastkit/vui 0.6.41 → 0.6.45

package/dist/tool/vite-plugin.d.ts

@@ -7,8 +7,8 @@ export interface ViteVuiPluginOptions extends Partial<Pick<VuiServiceOptions, 'u
     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;
 }
 export interface ViteVuiPluginResultSettings extends Pick<VuiServiceOptions, 'uiSettings' | 'icons'> {

package/dist/tool/vite-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vite-plugin.d.ts","sourceRoot":"","sources":["../../../../../../../packages/vui/src/tool/vite-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAK9B,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AA+F/C,MAAM,WAAW,oBACf,SAAQ,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,GAAG,CAAC;IACpC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAGD,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC;IACvD,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,2BAA2B,CAAC;IACtC,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,EAAE,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAC3B,OAAO,GAAE,oBAAyB,GACjC,mBAAmB,CAuJrB"}
+{"version":3,"file":"vite-plugin.d.ts","sourceRoot":"","sources":["../../../../../../../packages/vui/src/tool/vite-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAK9B,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AA+F/C,MAAM,WAAW,oBACf,SAAQ,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,OAAO,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IACzE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAGD,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,CAAC;IACvD,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,2BAA2B,CAAC;IACtC,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,CAAC,EAAE,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAC3B,OAAO,GAAE,oBAAyB,GACjC,mBAAmB,CAuJrB"}

package/dist/vui.cjs.js

@@ -439,10 +439,10 @@ const VGridContainer = vue.defineComponent({
 });
 
 function createPaperBaseProps() {
-  return {
+  return { ...vueUtils.htmlAttributesPropOptions,
     color: String,
     tag: {
-      type: String,
+      type: [String, Object],
       default: 'div'
     },
     ...vueUtils.defineSlotsProps()
@@ -459,6 +459,7 @@ function createPaperProps() {
 }
 const VPaper = vue.defineComponent({
   name: 'VPaper',
+  inheritAttrs: false,
   props: createPaperProps(),
 
   setup(props, ctx) {
@@ -469,7 +470,7 @@ const VPaper = vue.defineComponent({
     const scope = vueColorScheme.useScopeColorClass(props);
     const classes = vue.computed(() => [elevation.elevationClassName.value, 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
     }]);
     const headerProps = vue.computed(() => props.headerProps);
@@ -479,16 +480,18 @@ const VPaper = vue.defineComponent({
       const TagName = tag.value;
       const header = vueUtils.renderSlotOrEmpty(ctx.slots, 'header');
       const footer = vueUtils.renderSlotOrEmpty(ctx.slots, 'footer');
-      return vue.createVNode(TagName, {
+      return vue.createVNode(TagName, vue.mergeProps({
         "class": ['v-paper', classes.value]
-      }, {
-        default: () => [header && vue.createVNode("div", vue.mergeProps({
+      }, ctx.attrs), {
+        default: () => [vue.createVNode("div", {
+          "class": "v-paper__inner"
+        }, [header && vue.createVNode("div", vue.mergeProps({
           "class": "v-paper__header"
         }, headerProps.value), [header]), vue.createVNode("div", vue.mergeProps({
           "class": "v-paper__body"
         }, bodyProps.value), [vueUtils.renderSlotOrEmpty(ctx.slots, 'default')]), footer && vue.createVNode("div", vue.mergeProps({
           "class": "v-paper__footer"
-        }, footerProps.value), [footer])]
+        }, footerProps.value), [footer])])]
       });
     };
   }
@@ -496,20 +499,42 @@ const VPaper = vue.defineComponent({
 });
 
 function createCardProps() {
-  return { ...createPaperProps()
+  return { ...createPaperProps(),
+    ...vueUtils.navigationableInheritProps,
+    disabled: Boolean
   };
 }
 const VCard = vue.defineComponent({
   name: 'VCard',
+  inheritAttrs: false,
   props: createCardProps(),
 
   setup(props, ctx) {
     const _props = vue.computed(() => props);
 
+    const data = vue.computed(() => {
+      const hasLink = !!ctx.attrs.href || !!ctx.attrs.to;
+      const attrs = { ..._props.value,
+        ...ctx.attrs,
+        class: ['v-card', ctx.attrs.class, typeof ctx.attrs.onClick === 'function' && 'clickable'],
+        tag: hasLink ? vueUtils.VLink : 'div'
+      };
+
+      if (props.disabled) {
+        attrs.disabled = 'disabled';
+        delete attrs.onClick;
+        delete attrs.href;
+        delete attrs.to;
+      } else {
+        delete attrs.disabled;
+      }
+
+      return {
+        attrs
+      };
+    });
     return () => {
-      return vue.createVNode(VPaper, vue.mergeProps({
-        "class": "v-card"
-      }, _props.value), ctx.slots);
+      return vue.createVNode(VPaper, data.value.attrs, ctx.slots);
     };
   }
 
@@ -1209,7 +1234,12 @@ function _isSlot$b(s) {
 
 function createNavigationItemProps() {
   return { ...createListTileProps(),
-    match: String // key: {
+    match: String,
+    depth: {
+      type: Number,
+      default: 0
+    },
+    nested: Boolean // key: {
     //   type: [String, Number],
     //   required: true,
     // },
@@ -1272,7 +1302,8 @@ const VNavigationItem = vue.defineComponent({
       return to.path;
     });
     const classes = vue.computed(() => [{
-      'v-navigation-item--opened': opened.value
+      'v-navigation-item--opened': opened.value,
+      [`v-navigation-item--depth-${props.depth}`]: props.depth > 0
     }]);
     const route = vueRouter.useRoute(); // const classes = computed(() => [
     //   // {
@@ -1397,7 +1428,8 @@ const VNavigationItem = vue.defineComponent({
         default: () => [vue.withDirectives(vue.createVNode("div", {
           "class": "v-navigation-item__expand"
         }, [_children.map(child => renderNavigationItemInput(child, {
-          startIconEmptySpace: _props.value.startIconEmptySpace // onClick,
+          startIconEmptySpace: _props.value.startIconEmptySpace,
+          depth: props.nested ? props.depth + 1 : props.depth // onClick,
           // onChangeActive,
 
         }))]), [[vue.vShow, opened.value]])]

package/dist/vui.cjs.prod.js

@@ -439,10 +439,10 @@ const VGridContainer = vue.defineComponent({
 });
 
 function createPaperBaseProps() {
-  return {
+  return { ...vueUtils.htmlAttributesPropOptions,
     color: String,
     tag: {
-      type: String,
+      type: [String, Object],
       default: 'div'
     },
     ...vueUtils.defineSlotsProps()
@@ -459,6 +459,7 @@ function createPaperProps() {
 }
 const VPaper = vue.defineComponent({
   name: 'VPaper',
+  inheritAttrs: false,
   props: createPaperProps(),
 
   setup(props, ctx) {
@@ -469,7 +470,7 @@ const VPaper = vue.defineComponent({
     const scope = vueColorScheme.useScopeColorClass(props);
     const classes = vue.computed(() => [elevation.elevationClassName.value, 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
     }]);
     const headerProps = vue.computed(() => props.headerProps);
@@ -479,16 +480,18 @@ const VPaper = vue.defineComponent({
       const TagName = tag.value;
       const header = vueUtils.renderSlotOrEmpty(ctx.slots, 'header');
       const footer = vueUtils.renderSlotOrEmpty(ctx.slots, 'footer');
-      return vue.createVNode(TagName, {
+      return vue.createVNode(TagName, vue.mergeProps({
         "class": ['v-paper', classes.value]
-      }, {
-        default: () => [header && vue.createVNode("div", vue.mergeProps({
+      }, ctx.attrs), {
+        default: () => [vue.createVNode("div", {
+          "class": "v-paper__inner"
+        }, [header && vue.createVNode("div", vue.mergeProps({
           "class": "v-paper__header"
         }, headerProps.value), [header]), vue.createVNode("div", vue.mergeProps({
           "class": "v-paper__body"
         }, bodyProps.value), [vueUtils.renderSlotOrEmpty(ctx.slots, 'default')]), footer && vue.createVNode("div", vue.mergeProps({
           "class": "v-paper__footer"
-        }, footerProps.value), [footer])]
+        }, footerProps.value), [footer])])]
       });
     };
   }
@@ -496,20 +499,42 @@ const VPaper = vue.defineComponent({
 });
 
 function createCardProps() {
-  return { ...createPaperProps()
+  return { ...createPaperProps(),
+    ...vueUtils.navigationableInheritProps,
+    disabled: Boolean
   };
 }
 const VCard = vue.defineComponent({
   name: 'VCard',
+  inheritAttrs: false,
   props: createCardProps(),
 
   setup(props, ctx) {
     const _props = vue.computed(() => props);
 
+    const data = vue.computed(() => {
+      const hasLink = !!ctx.attrs.href || !!ctx.attrs.to;
+      const attrs = { ..._props.value,
+        ...ctx.attrs,
+        class: ['v-card', ctx.attrs.class, typeof ctx.attrs.onClick === 'function' && 'clickable'],
+        tag: hasLink ? vueUtils.VLink : 'div'
+      };
+
+      if (props.disabled) {
+        attrs.disabled = 'disabled';
+        delete attrs.onClick;
+        delete attrs.href;
+        delete attrs.to;
+      } else {
+        delete attrs.disabled;
+      }
+
+      return {
+        attrs
+      };
+    });
     return () => {
-      return vue.createVNode(VPaper, vue.mergeProps({
-        "class": "v-card"
-      }, _props.value), ctx.slots);
+      return vue.createVNode(VPaper, data.value.attrs, ctx.slots);
     };
   }
 
@@ -1209,7 +1234,12 @@ function _isSlot$b(s) {
 
 function createNavigationItemProps() {
   return { ...createListTileProps(),
-    match: String // key: {
+    match: String,
+    depth: {
+      type: Number,
+      default: 0
+    },
+    nested: Boolean // key: {
     //   type: [String, Number],
     //   required: true,
     // },
@@ -1272,7 +1302,8 @@ const VNavigationItem = vue.defineComponent({
       return to.path;
     });
     const classes = vue.computed(() => [{
-      'v-navigation-item--opened': opened.value
+      'v-navigation-item--opened': opened.value,
+      [`v-navigation-item--depth-${props.depth}`]: props.depth > 0
     }]);
     const route = vueRouter.useRoute(); // const classes = computed(() => [
     //   // {
@@ -1397,7 +1428,8 @@ const VNavigationItem = vue.defineComponent({
         default: () => [vue.withDirectives(vue.createVNode("div", {
           "class": "v-navigation-item__expand"
         }, [_children.map(child => renderNavigationItemInput(child, {
-          startIconEmptySpace: _props.value.startIconEmptySpace // onClick,
+          startIconEmptySpace: _props.value.startIconEmptySpace,
+          depth: props.nested ? props.depth + 1 : props.depth // onClick,
           // onChangeActive,
 
         }))]), [[vue.vShow, opened.value]])]

package/dist/vui.css

@@ -551,6 +551,7 @@ template {
   --tabs-bar-height: calc(var(--root-em) * 0.375);
   --tabs-font-size: calc(var(--root-em) * 0.875);
   --breadcrumbs-font-size: var(--typo-sm-size);
+  --list-tile-padding: calc(var(--root-em) * 0.625);
 }
 
 :root,
@@ -898,6 +899,7 @@ thead th {
 }
 .v-paper {
   --paper-radius: var(--control-field-radius);
+  display: block;
   color: var(--paper-text-color);
   background-color: var(--paper-background--color);
   border-radius: var(--paper-radius);
@@ -912,10 +914,14 @@ thead th {
   --paper-text-color: var(--text-color);
   --paper-link-color: var(--nav-color);
 }
+.v-paper__inner {
+  position: relative;
+  border-radius: inherit;
+}
 .v-paper--square {
   --paper-radius: 0px;
 }
-.v-paper a {
+.v-paper a:not(.v-paper) {
   color: var(--paper-link-color);
 }
 .v-paper__header {
@@ -926,7 +932,48 @@ thead th {
   border-bottom-right-radius: inherit;
   border-bottom-left-radius: inherit;
 }
-
+.v-card {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  position: relative;
+  width: 100%;
+  padding: 0;
+  text-align: left;
+  touch-action: manipulation;
+  user-select: none;
+  border: 0;
+  outline: 0;
+  appearance: none;
+}
+.v-card::-moz-focus-inner {
+  border: 0;
+}
+.v-card, .v-card:hover, .v-card:focus {
+  text-decoration: none;
+}
+.v-card.clickable {
+  cursor: pointer;
+}
+.v-card.clickable::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  background: currentColor;
+  border-radius: inherit;
+  opacity: 0;
+  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+.v-card.clickable:hover::before, .v-card.clickable:focus::before {
+  opacity: 0.125;
+}
+.v-card[disabled] {
+  pointer-events: none;
+}
+.v-card[disabled]::before {
+  content: none;
+}
 .v-card-content {
   padding: var(--card-content-padding);
 }
@@ -1178,10 +1225,12 @@ thead th {
   --tile-text-active-color: var(--text-color);
   --tile-pin-color: transparent;
   --paper-link-color: var(--tile-text-color);
+  --depth-padding: var(--list-tile-padding);
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 10px;
+  padding: var(--list-tile-padding);
+  padding-left: var(--depth-padding);
   color: var(--tile-text-color);
   text-align: left;
   text-decoration: none;
@@ -1276,6 +1325,15 @@ thead th {
 .v-navigation-item__expand .v-navigation-item {
   --tile-background: var(--tile-active-background);
 }
+.v-navigation-item--depth-1 {
+  --depth-padding: calc(var(--list-tile-padding) * 2);
+}
+.v-navigation-item--depth-2 {
+  --depth-padding: calc(var(--list-tile-padding) * 3);
+}
+.v-navigation-item--depth-3 {
+  --depth-padding: calc(var(--list-tile-padding) * 4);
+}
 .v-navigation__caption {
   display: block;
   padding: calc(var(--root-em) * 0.625) calc(var(--root-em) * 1.5625);