@fastkit/vui 0.6.30 → 0.6.34

package/dist/vui.cjs.prod.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vueKit = require('@fastkit/vue-kit');
+var vueRouter = require('vue-router');
 var vueUtils = require('@fastkit/vue-utils');
 var vue = require('vue');
 var vueColorScheme = require('@fastkit/vue-color-scheme');
 var vueLoading = require('@fastkit/vue-loading');
 var iconFont = require('@fastkit/icon-font');
 var helpers = require('@fastkit/helpers');
-var vueRouter = require('vue-router');
 var vueAppLayout = require('@fastkit/vue-app-layout');
 var vueScroller = require('@fastkit/vue-scroller');
 
@@ -435,7 +435,7 @@ function resolveRawVButtonIcon(raw, type = 'main') {
 }
 
 const vueButtonProps = vueUtils.createPropsOptions({ ...vueColorScheme.colorSchemeProps(),
-  ...vueUtils.navigationableProps,
+  ...vueUtils.navigationableInheritProps,
   spacer: [Boolean, String],
   loading: Boolean,
   rounded: Boolean,
@@ -451,9 +451,8 @@ const LOADING_SIZE_MAP = {
 };
 const VButton = vue.defineComponent({
   name: 'VButton',
+  inheritAttrs: false,
   props: vueButtonProps,
-  emits: { ...vueUtils.navigationableEmits
-  },
 
   setup(props, ctx) {
     const vui = useVui();
@@ -479,48 +478,25 @@ const VButton = vue.defineComponent({
       variant: () => props.variant || (icon.value ? vui.setting('plainVariant') : defaults.variant)
     });
     const isPlain = vue.computed(() => color.variant.value.value === vui.setting('plainVariant') && color.color.value.value === defaults.color);
-    const navigationable = vueUtils.useNavigationable(props);
-    const isLoading = vue.computed(() => props.loading);
-    const isDisabled = vue.computed(() => props.disabled);
+    const isLoading = vue.computed(() => props.loading); // const isDisabled = computed(() => props.disabled);
+
     const isRounded = vue.computed(() => props.rounded || !!icon.value);
     const spacer = vue.computed(() => {
       const _spacer = props.spacer;
       if (!_spacer) return;
       return _spacer === true ? 'left' : _spacer;
     });
-    const classes = vue.computed(() => [color.colorClasses.value, navigationable.value.classes, spacer.value ? `v-button--spacer-${spacer.value}` : undefined, `v-button--${control.size.value}`, {
+    const classes = vue.computed(() => [color.colorClasses.value, // navigationable.value.classes,
+    spacer.value ? `v-button--spacer-${spacer.value}` : undefined, `v-button--${control.size.value}`, {
       'v-button--loading': isLoading.value,
       'v-button--icon': !!icon.value,
       'v-button--rounded': isRounded.value,
       'v-button--plain': isPlain.value
     }]);
     return () => {
-      const {
-        Tag,
-        attrs
-      } = navigationable.value;
-      const children = vueUtils.renderSlotOrEmpty(ctx.slots, 'default');
-      const _attrs = { ...attrs
-      };
-
-      if (isDisabled.value) {
-        _attrs.disabled = true;
-      }
-
-      return vue.createVNode(Tag, vue.mergeProps({
+      const children = vueUtils.renderSlotOrEmpty(ctx.slots);
+      return vue.createVNode(vueUtils.VLink, vue.mergeProps(ctx.attrs, {
         "class": ['v-button', classes.value]
-      }, _attrs, {
-        "onClick": ev => {
-          if (isDisabled.value || isLoading.value) {
-            ev.preventDefault();
-
-            if (isDisabled.value) {
-              return;
-            }
-          }
-
-          ctx.emit('click', ev);
-        }
       }), {
         default: () => [vue.createVNode("span", {
           "class": "v-button__content"
@@ -535,7 +511,7 @@ const VButton = vue.defineComponent({
 
 });
 
-function _isSlot$b(s) {
+function _isSlot$c(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -783,7 +759,7 @@ const VPagination = vue.defineComponent({
           "class": classes,
           "to": to,
           "key": key
-        }, _isSlot$b(children) ? children : {
+        }, _isSlot$c(children) ? children : {
           default: () => [children]
         });
       } else {
@@ -830,11 +806,11 @@ const VPagination = vue.defineComponent({
 
 function createListTileProps() {
   const icon = rawIconProp();
-  return { ...vueUtils.navigationableProps,
+  return { ...vueUtils.navigationableInheritProps,
     ...vueUtils.createPropsOptions({
       startIcon: icon,
       endIcon: icon,
-      fallbackTag: {
+      linkFallbackTag: {
         type: String,
         default: 'div'
       },
@@ -844,11 +820,12 @@ function createListTileProps() {
     })
   };
 }
-const listTileEmits = { ...vueUtils.navigationableEmits,
+const listTileEmits = {
   changeActive: isActive => true
 };
 const VListTile = vue.defineComponent({
   name: 'VListTile',
+  inheritAttrs: false,
   props: createListTileProps(),
   emits: { ...listTileEmits
   },
@@ -864,10 +841,9 @@ const VListTile = vue.defineComponent({
       return icon;
     });
     const endIcon = vue.computed(() => resolveRawIconProp(false, props.endIcon));
-    const navigationable = vueUtils.useNavigationable(props, () => props.fallbackTag, ctx);
-    const hasTo = vue.computed(() => !!props.to);
+    const hasTo = vue.computed(() => !!ctx.attrs.to);
     const link = vueRouter.useLink({
-      to: props.to || ''
+      to: ctx.attrs.to || ''
     });
     const isActive = vue.computed(() => {
       if (!hasTo.value) return false;
@@ -877,10 +853,7 @@ const VListTile = vue.defineComponent({
     const classes = vue.computed(() => {
       const _color = color.value;
       const hasColor = !!_color.value;
-      const _navigationable = navigationable.value;
-      const clickable = _navigationable.clickable;
-      return [color.value.className, _navigationable.classes, {
-        'v-list-tile--clickable': clickable,
+      return [color.value.className, {
         'v-list-tile--plain': !hasColor,
         'v-list-tile--has-color': hasColor,
         'v-list-tile--active': isActive.value
@@ -894,16 +867,9 @@ const VListTile = vue.defineComponent({
     return () => {
       const _startIcon = startIcon.value;
       const _endIcon = endIcon.value;
-      const {
-        Tag,
-        attrs
-      } = navigationable.value;
-      return vue.createVNode(Tag, vue.mergeProps({
-        "class": ['v-list-tile', classes.value]
-      }, attrs, {
-        "onClick": ev => {
-          ctx.emit('click', ev);
-        }
+      return vue.createVNode(vueUtils.VLink, vue.mergeProps(ctx.attrs, {
+        "class": ['v-list-tile', classes.value],
+        "clickableClassName": "v-list-tile--clickable"
       }), {
         default: () => [_startIcon && vue.createVNode("span", {
           "class": "v-list-tile__icon v-list-tile__icon--start"
@@ -948,7 +914,7 @@ const VDrawerLayout = vue.defineComponent({
 
 });
 
-function _isSlot$a(s) {
+function _isSlot$b(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -983,7 +949,7 @@ const VHero = vue.defineComponent({
         }, {
           default: () => [vue.createVNode(HTagName, {
             "class": "v-hero__title"
-          }, _isSlot$a(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
+          }, _isSlot$b(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
             default: () => [_slot]
           })]
         })]
@@ -993,13 +959,17 @@ const VHero = vue.defineComponent({
 
 });
 
-function _isSlot$9(s) {
+function _isSlot$a(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
 function createNavigationItemProps() {
   return { ...createListTileProps(),
-    match: String
+    match: String // key: {
+    //   type: [String, Number],
+    //   required: true,
+    // },
+
   };
 }
 function resolveNavigationItemInput(input) {
@@ -1024,7 +994,7 @@ function renderNavigationItemInput(input, extraProps) {
   } = resolveNavigationItemInput(input);
   return vue.createVNode(VNavigationItem, { ...props,
     ...extraProps
-  }, _isSlot$9(label) ? label : {
+  }, _isSlot$a(label) ? label : {
     default: () => [label]
   });
 }
@@ -1044,7 +1014,7 @@ const VNavigationItem = vue.defineComponent({
       const c = props.children;
       return c && c.length ? c : undefined;
     });
-    const to = vue.computed(() => props.to);
+    const to = vue.computed(() => ctx.attrs.to);
     const match = vue.computed(() => {
       const {
         match,
@@ -1119,6 +1089,7 @@ const VNavigationItem = vue.defineComponent({
     });
 
     function open() {
+      if (!children.value) return;
       opened.value = true;
     }
 
@@ -1132,10 +1103,13 @@ const VNavigationItem = vue.defineComponent({
 
     const onClick = ev => {
       if (!to.value) {
-        toggle();
+        return toggle();
       }
 
-      ctx.emit('click', ev);
+      open(); // if (!to.value) {
+      //   toggle();
+      // }
+      // ctx.emit('click', ev);
     };
 
     const onChangeActive = isActive => {
@@ -1157,18 +1131,21 @@ const VNavigationItem = vue.defineComponent({
       ctx.emit('changeActive', isActive);
     };
 
+    ctx.expose({
+      close
+    });
     return () => {
       let _slot;
 
       const _children = children.value;
       const fallbackTag = _children ? 'button' : undefined;
-      return vue.createVNode(vue.Fragment, null, [vue.createVNode(VListTile, vue.mergeProps(_props.value, {
+      return vue.createVNode(vue.Fragment, null, [vue.createVNode(VListTile, vue.mergeProps(ctx.attrs, _props.value, {
         "fallbackTag": fallbackTag,
         "endIcon": _props.value.endIcon,
         "class": ['v-navigation-item', classes.value],
         "onClick": onClick,
         "onChangeActive": onChangeActive
-      }), _isSlot$9(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
+      }), _isSlot$a(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
         default: () => [_slot]
       }), _children && vue.createVNode(vueUtils.VExpandTransition, null, {
         default: () => [vue.withDirectives(vue.createVNode("div", {
@@ -1208,6 +1185,28 @@ const VNavigation = vue.defineComponent({
       const c = props.caption;
       return typeof c === 'function' ? c() : c;
     });
+    const itemsRef = vue.ref([]);
+    vue.onBeforeUpdate(() => {
+      itemsRef.value = [];
+    });
+
+    function setItemRef(item, itemRef) {
+      itemsRef.value.push({
+        key: item.key,
+        ref: itemRef
+      });
+    }
+
+    function onItemActivated(item) {
+      itemsRef.value.forEach(({
+        key,
+        ref
+      }) => {
+        if (key === item.key) return;
+        ref.close();
+      });
+    }
+
     return () => {
       const $caption = caption.value;
       return vue.createVNode("nav", {
@@ -1216,7 +1215,17 @@ const VNavigation = vue.defineComponent({
         "class": "v-navigation__caption"
       }, [$caption]), items.value.map(item => renderNavigationItemInput(item, {
         class: 'v-navigation__item',
-        startIconEmptySpace: startIconEmptySpace.value
+        startIconEmptySpace: startIconEmptySpace.value,
+        ref: ref => {
+          setItemRef(item, ref);
+        },
+        onChangeActive: isActive => {
+          if (isActive
+          /* && item.children && item.children.length*/
+          ) {
+            onItemActivated(item);
+          }
+        }
       }))]);
     };
   }
@@ -1316,7 +1325,7 @@ const VCheckbox = vue.defineComponent({
 
 });
 
-function _isSlot$8(s) {
+function _isSlot$9(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -1328,7 +1337,7 @@ const VCheckboxGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => vue.createVNode(VCheckbox, attrs, _isSlot$8(slots) ? slots : {
+  }) => vue.createVNode(VCheckbox, attrs, _isSlot$9(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -1380,7 +1389,7 @@ const VRadio = vue.defineComponent({
 
 });
 
-function _isSlot$7(s) {
+function _isSlot$8(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -1391,7 +1400,7 @@ const VRadioGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => vue.createVNode(VRadio, attrs, _isSlot$7(slots) ? slots : {
+  }) => vue.createVNode(VRadio, attrs, _isSlot$8(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -1453,7 +1462,7 @@ const VSwitch = vue.defineComponent({
 
 });
 
-function _isSlot$6(s) {
+function _isSlot$7(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -1465,7 +1474,7 @@ const VSwitchGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => vue.createVNode(VSwitch, attrs, _isSlot$6(slots) ? slots : {
+  }) => vue.createVNode(VSwitch, attrs, _isSlot$7(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -2024,7 +2033,7 @@ const VForm = vue.defineComponent({
 
 });
 
-function _isSlot$5(s) {
+function _isSlot$6(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -2073,7 +2082,7 @@ const VTab = vue.defineComponent({
           "class": classes,
           "to": to,
           "replace": replace
-        }, _isSlot$5(children) ? children : {
+        }, _isSlot$6(children) ? children : {
           default: () => [children]
         });
       } else {
@@ -2091,7 +2100,7 @@ const VTab = vue.defineComponent({
 
 });
 
-function _isSlot$4(s) {
+function _isSlot$5(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -2346,7 +2355,7 @@ const VTabs = vue.defineComponent({
               to(value);
             }
           }
-        }, _isSlot$4(children) ? children : {
+        }, _isSlot$5(children) ? children : {
           default: () => [children]
         });
       });
@@ -2368,6 +2377,119 @@ const VTabs = vue.defineComponent({
 
 });
 
+function _isSlot$4(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+
+const VBreadcrumbs = vue.defineComponent({
+  name: 'VBreadcrumbs',
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    divider: [String, Function] // ...defineSlotsProps<{}>(),
+
+  },
+
+  setup(props, ctx) {
+    const vui = useVui();
+    const computedItemsRef = vue.computed(() => {
+      const items = props.items.map(rawItem => {
+        return typeof rawItem === 'string' ? {
+          text: rawItem
+        } : rawItem;
+      });
+      return items.map(item => {
+        const {
+          to,
+          text
+        } = item;
+        const {
+          disabled = vui.location.match(to) || !vui.location.isAvairable(to)
+        } = item;
+        return { ...item,
+          disabled,
+          text: typeof text === 'function' ? text(vui) : text
+        };
+      });
+    });
+    const lengthRef = vue.computed(() => computedItemsRef.value.length);
+
+    const defaultDividerSlot = () => {
+      return [vue.createVNode("i", {
+        "class": "v-breadcrumbs__divider__icon"
+      }, null)];
+    };
+
+    return () => {
+      if (lengthRef.value < 1) return;
+      let dividerSlot;
+      const propDivider = props.divider;
+
+      if (propDivider) {
+        dividerSlot = typeof propDivider === 'function' ? propDivider : () => propDivider;
+      } else {
+        dividerSlot = defaultDividerSlot;
+      }
+
+      const children = [];
+      computedItemsRef.value.forEach((item, index) => {
+        const {
+          text,
+          icon,
+          disabled,
+          to
+        } = item;
+
+        if (index > 0) {
+          const divider = dividerSlot(vui);
+
+          if (divider) {
+            children.push(vue.createVNode("li", {
+              "class": "v-breadcrumbs__divider",
+              "key": `divider-${index}`
+            }, [divider]));
+          }
+        }
+
+        const myChildren = [];
+
+        if (icon) {
+          const $icon = resolveRawIconProp(false, icon, {
+            class: 'v-breadcrumbs__icon'
+          });
+
+          if ($icon) {
+            myChildren.push($icon);
+          }
+        }
+
+        if (text) myChildren.push(text);
+        const itemChild = to ? vue.createVNode(vueUtils.VLink, {
+          "class": "v-breadcrumbs__link",
+          "to": to,
+          "exactActiveClass": "v-breadcrumbs__link--active"
+        }, _isSlot$4(myChildren) ? myChildren : {
+          default: () => [myChildren]
+        }) : myChildren;
+        children.push(vue.createVNode("li", {
+          "class": ['v-breadcrumbs__item', {
+            'v-breadcrumbs__item--disabled': disabled
+          }],
+          "key": `link-${index}`
+        }, [itemChild]));
+      });
+      return vue.createVNode("nav", {
+        "class": "v-breadcrumbs"
+      }, [vue.createVNode("ul", {
+        "class": "v-breadcrumbs__list"
+      }, [children])]);
+    };
+  }
+
+});
+
 function _isSlot$3(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
@@ -3274,6 +3396,7 @@ class VuiService {
     location;
     constructor(options) {
         this.options = options;
+        this.configure();
         const { selectionSeparator = () => ', ', autoScrollToElementOffsetTop = DEFAULT_AUTO_SCROLL_TO_ELEMENT_OFFSET_TOP, textareaRows = DEFAULT_TEXTAREA_ROWS, requiredChip = () => '*', } = options;
         this.selectionSeparator = selectionSeparator;
         this.autoScrollToElementOffsetTop = autoScrollToElementOffsetTop;
@@ -3284,6 +3407,13 @@ class VuiService {
             router: this.router,
         });
     }
+    configure(options) {
+        options && Object.assign(this.options, options);
+        vueUtils.setDefaultRouterLink(this.getRouterLink());
+    }
+    getRouterLink() {
+        return this.options.RouterLink || vueRouter.RouterLink;
+    }
     setting(key) {
         return this.options.uiSettings[key];
     }
@@ -3368,6 +3498,7 @@ exports.CONTROL_FIELD_VARIANTS = CONTROL_FIELD_VARIANTS;
 exports.CONTROL_SIZES = CONTROL_SIZES;
 exports.PAGINATION_ALIGNS = PAGINATION_ALIGNS;
 exports.VApp = VApp;
+exports.VBreadcrumbs = VBreadcrumbs;
 exports.VButton = VButton;
 exports.VCard = VCard;
 exports.VCardActions = VCardActions;

package/dist/vui.css

@@ -409,6 +409,7 @@ template {
   --typo-subtitle2-weight: 500;
   --typo-subtitle2-height: 1.57;
   --typo-subtitle2-spacing: 0.00714em;
+  --typo-sm-size: calc(var(--root-em) * 0.875);
   --control-field-rem-sm: 0.875rem;
   --control-field-rem-md: 1rem;
   --control-field-rem-lg: 1.125rem;
@@ -543,6 +544,7 @@ template {
   --tabs-height: calc(var(--root-em) * 3);
   --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);
 }
 
 :root,
@@ -1809,6 +1811,57 @@ thead th {
 .v-tab--active::before {
   transform: scaleX(1);
 }
+.v-breadcrumbs {
+  display: block;
+  margin: 1.5em auto;
+  font-size: var(--breadcrumbs-font-size);
+}
+.v-breadcrumbs__list {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  vertical-align: bottom;
+  list-style: none;
+}
+.v-breadcrumbs__item, .v-breadcrumbs__divider {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.v-breadcrumbs__link {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+.v-breadcrumbs__item--disabled .v-breadcrumbs__link {
+  color: inherit;
+  pointer-events: none;
+}
+.v-breadcrumbs__icon {
+  margin-right: 0.2em;
+  font-size: 140%;
+}
+.v-breadcrumbs__divider {
+  position: relative;
+  top: 1px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 1.25em;
+}
+.v-breadcrumbs__divider__icon {
+  display: block;
+  width: 0.5em;
+  height: 0.5em;
+  margin-left: -0.25em;
+  border-top: solid 1px currentColor;
+  border-right: solid 1px currentColor;
+  transform: rotate(45deg);
+}
 .v-content-switcher {
   position: relative;
   display: block;