@fastkit/vui 0.6.28 → 0.6.33

package/dist/vui.cjs.js

@@ -3,14 +3,15 @@
 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');
 
 const CONTROL_SIZES = ['sm', 'md', 'lg'];
 const CONTROL_FIELD_VARIANTS = ['outlined', 'filled', 'flat'];
@@ -434,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,
@@ -450,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();
@@ -478,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"
@@ -534,7 +511,7 @@ const VButton = vue.defineComponent({
 
 });
 
-function _isSlot$8(s) {
+function _isSlot$c(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -782,7 +759,7 @@ const VPagination = vue.defineComponent({
           "class": classes,
           "to": to,
           "key": key
-        }, _isSlot$8(children) ? children : {
+        }, _isSlot$c(children) ? children : {
           default: () => [children]
         });
       } else {
@@ -829,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'
       },
@@ -843,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
   },
@@ -863,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;
@@ -876,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
@@ -893,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"
@@ -947,7 +914,7 @@ const VDrawerLayout = vue.defineComponent({
 
 });
 
-function _isSlot$7(s) {
+function _isSlot$b(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -982,7 +949,7 @@ const VHero = vue.defineComponent({
         }, {
           default: () => [vue.createVNode(HTagName, {
             "class": "v-hero__title"
-          }, _isSlot$7(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
+          }, _isSlot$b(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
             default: () => [_slot]
           })]
         })]
@@ -992,13 +959,17 @@ const VHero = vue.defineComponent({
 
 });
 
-function _isSlot$6(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) {
@@ -1023,7 +994,7 @@ function renderNavigationItemInput(input, extraProps) {
   } = resolveNavigationItemInput(input);
   return vue.createVNode(VNavigationItem, { ...props,
     ...extraProps
-  }, _isSlot$6(label) ? label : {
+  }, _isSlot$a(label) ? label : {
     default: () => [label]
   });
 }
@@ -1043,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,
@@ -1118,6 +1089,7 @@ const VNavigationItem = vue.defineComponent({
     });
 
     function open() {
+      if (!children.value) return;
       opened.value = true;
     }
 
@@ -1131,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 => {
@@ -1156,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$6(_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", {
@@ -1207,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", {
@@ -1215,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);
+          }
+        }
       }))]);
     };
   }
@@ -1315,7 +1325,7 @@ const VCheckbox = vue.defineComponent({
 
 });
 
-function _isSlot$5(s) {
+function _isSlot$9(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -1327,7 +1337,7 @@ const VCheckboxGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => vue.createVNode(VCheckbox, attrs, _isSlot$5(slots) ? slots : {
+  }) => vue.createVNode(VCheckbox, attrs, _isSlot$9(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -1379,7 +1389,7 @@ const VRadio = vue.defineComponent({
 
 });
 
-function _isSlot$4(s) {
+function _isSlot$8(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -1390,7 +1400,7 @@ const VRadioGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => vue.createVNode(VRadio, attrs, _isSlot$4(slots) ? slots : {
+  }) => vue.createVNode(VRadio, attrs, _isSlot$8(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -1452,7 +1462,7 @@ const VSwitch = vue.defineComponent({
 
 });
 
-function _isSlot$3(s) {
+function _isSlot$7(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -1464,7 +1474,7 @@ const VSwitchGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => vue.createVNode(VSwitch, attrs, _isSlot$3(slots) ? slots : {
+  }) => vue.createVNode(VSwitch, attrs, _isSlot$7(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -2023,6 +2033,597 @@ const VForm = vue.defineComponent({
 
 });
 
+function _isSlot$6(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+
+const VTab = vue.defineComponent({
+  name: 'VTab',
+  props: {
+    value: {
+      type: String,
+      required: true
+    },
+    active: Boolean,
+    to: [String, Object],
+    icon: [String, Function]
+  },
+  emits: {
+    click: ev => true
+  },
+
+  setup(props, ctx) {
+    const classesRef = vue.computed(() => ({
+      'v-tab--active': props.active
+    }));
+    const exposeValues = {
+      value: props.value,
+      active: props.active
+    };
+    ctx.expose(exposeValues);
+    return () => {
+      const {
+        to,
+        value,
+        icon,
+        active
+      } = props;
+      const classes = ['v-tab', classesRef.value];
+
+      const children = vue.createVNode("span", {
+        "class": "v-tab__content"
+      }, [icon && resolveRawIconProp(active, icon, {
+        class: 'v-tab__icon'
+      }), vueUtils.renderSlotOrEmpty(ctx.slots)]);
+
+      if (to) {
+        const replace = typeof to === 'string' ? undefined : to.replace;
+        return vue.createVNode(vueRouter.RouterLink, {
+          "class": classes,
+          "to": to,
+          "replace": replace
+        }, _isSlot$6(children) ? children : {
+          default: () => [children]
+        });
+      } else {
+        return vue.createVNode("button", {
+          "class": classes,
+          "type": "button",
+          "value": value,
+          "onClick": ev => {
+            ctx.emit('click', ev);
+          }
+        }, [children]);
+      }
+    };
+  }
+
+});
+
+function _isSlot$5(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+
+const VTabs = vue.defineComponent({
+  name: 'VTabs',
+  props: {
+    modelValue: String,
+    items: {
+      type: Array,
+      required: true // validator: (value: VTabsItem[]) => {
+      //   return Array.isArray(value) && value.length > 0;
+      // },
+
+    },
+
+    /**
+     * 自動スクロールする際の余剰オフセット幅（px）
+     */
+    autoScrollOffset: {
+      type: Number,
+      default: 20
+    },
+
+    /**
+     * ルーター同期する場合設定する
+     */
+    router: Function,
+
+    /**
+     * ルーティング連携を行う際に、クエリベースのURLマッチングを行う
+     * タブのURLが /page1?tab=xxx のようになる時に設定する
+     */
+    withQuery: Boolean,
+    ...vueUtils.defineSlotsProps(),
+    color: String
+  },
+  emits: {
+    'update:modelValue': newValue => true,
+    change: newValue => true
+  },
+
+  setup(props, ctx) {
+    const vui = useVui();
+    const internalValueRef = vue.ref(null);
+    const scrollerRef = vueKit.useVScrollerRef();
+    const elRef = vue.ref(null);
+    let scrollResult;
+    const tabRefs = vue.ref([]);
+    const currentRef = vue.computed({
+      get: () => internalValueRef.value,
+      set: value => {
+        if (internalValueRef.value !== value) {
+          internalValueRef.value = value;
+          ctx.emit('update:modelValue', value);
+          ctx.emit('change', value);
+        }
+      }
+    });
+    const colorScope = vueColorScheme.useScopeColorClass({
+      color: () => props.color || vui.setting('tabDefault').color
+    });
+    const classes = vue.computed(() => [colorScope.value.className]);
+    const computedItemsRef = vue.computed(() => {
+      const current = currentRef.value;
+      const {
+        router
+      } = props;
+      return props.items.map(item => {
+        const {
+          value
+        } = item;
+        const active = current === value;
+        let location;
+
+        if (router) {
+          const to = router(value);
+          const route = vui.router.resolve(to);
+          location = {
+            to,
+            route
+          };
+        }
+
+        return { ...item,
+          active,
+          location
+        };
+      });
+    });
+
+    const setTabRef = ref => {
+      tabRefs.value.push(ref);
+    }; // const isMountedRef = ref(false);
+
+
+    function setupInternalValue(routable) {
+      let value = props.modelValue;
+
+      if (value == null || value === '') {
+        const firstItem = props.items[0];
+        if (!firstItem) return;
+        value = firstItem.value;
+      }
+
+      if (internalValueRef.value !== value) {
+        internalValueRef.value = value;
+
+        if (routable) {
+          const {
+            router
+          } = props;
+          if (!router) return;
+          const hit = computedItemsRef.value.find(item => item.value === value);
+          if (!hit) return;
+          const {
+            location
+          } = hit;
+          if (!location) return;
+          const {
+            to,
+            route
+          } = location;
+          if (route.fullPath === vui.location.currentRoute.fullPath) return;
+          vui.router[to.replace ? 'replace' : 'push'](to);
+        } else if (!props.router && props.modelValue !== value) {
+          ctx.emit('update:modelValue', value);
+          ctx.emit('change', value);
+        }
+      }
+    }
+
+    function to(value) {
+      currentRef.value = value;
+    }
+
+    function cancelScroll() {
+      if (scrollResult) {
+        scrollResult.cancel();
+        scrollResult = undefined;
+      }
+    }
+
+    const findTab = tab => {
+      return tabRefs.value.find(t => t.value === tab);
+    };
+
+    function scrollToTab(tabValue) {
+      const tab = findTab(tabValue);
+      if (!tab) return;
+      const $tab = tab.$el;
+      if (!$tab) return;
+      const scroller = scrollerRef.value;
+      if (!scroller) return;
+      const container = scroller.scroller.element();
+      if (!container) return;
+      const {
+        autoScrollOffset
+      } = props;
+      const tabLeft = $tab.offsetLeft;
+      const tabWidth = $tab.offsetWidth;
+      const tabRight = tabLeft + tabWidth;
+      let hiddenLeft = 0;
+      let hiddenRight = 0;
+      const {
+        scrollLeft,
+        offsetWidth: scrollerWidth
+      } = container;
+      hiddenLeft = Math.max(scrollLeft - tabLeft, 0);
+      hiddenRight = Math.max(tabRight - scrollerWidth - scrollLeft, 0);
+      if (hiddenLeft > 0) hiddenLeft += autoScrollOffset;
+      if (hiddenRight > 0) hiddenRight += autoScrollOffset;
+      let scrollAmmount = 0;
+
+      if (hiddenRight > 0) {
+        scrollAmmount = hiddenRight;
+      }
+
+      if (hiddenLeft > 0) {
+        scrollAmmount = -hiddenLeft;
+      }
+
+      if (Math.abs(scrollAmmount) > 0) {
+        cancelScroll();
+        scrollResult = scroller.scroller.by(scrollAmmount, 0, {
+          duration: 150
+        });
+      }
+    }
+
+    vue.watch(() => props.modelValue, () => setupInternalValue(true));
+    vue.watch(() => props.items, () => setupInternalValue(), {
+      deep: true
+    });
+    vue.watch(() => internalValueRef.value, newValue => {
+      scrollToTab(newValue);
+    });
+    vui.location.watchRoute(route => {
+      if (!props.router) return;
+      const path = props.withQuery ? route.fullPath : route.path;
+      const hit = computedItemsRef.value.find(({
+        location
+      }) => {
+        return location && location.route.fullPath === path;
+      });
+
+      if (hit) {
+        currentRef.value = hit.value;
+      }
+    }, {
+      immediate: true
+    });
+    vue.onMounted(() => {
+      scrollToTab(currentRef.value);
+    });
+    vue.onBeforeUnmount(() => {
+      cancelScroll();
+    });
+    vue.onBeforeUpdate(() => {
+      tabRefs.value = [];
+    });
+    setupInternalValue();
+    return () => {
+      const items = computedItemsRef.value;
+      const itemSlot = ctx.slots.item;
+      const children = items.map(({
+        value,
+        active,
+        label,
+        icon,
+        location
+      }) => {
+        if (!label) {
+          label = itemSlot;
+        }
+
+        const children = typeof label === 'function' ? label({
+          value,
+          active,
+          vui
+        }) : label;
+
+        const _to = location && location.to || undefined;
+
+        return vue.createVNode(VTab, {
+          "value": value,
+          "to": _to,
+          "icon": icon,
+          "active": active,
+          "ref": setTabRef,
+          "onClick": e => {
+            if (!e.defaultPrevented) {
+              to(value);
+            }
+          }
+        }, _isSlot$5(children) ? children : {
+          default: () => [children]
+        });
+      });
+      return vue.createVNode("div", {
+        "class": ['v-tabs', classes.value],
+        "ref": elRef
+      }, [vue.createVNode(vueKit.VScroller, {
+        "class": "v-tabs__scroller",
+        "containerClass": "v-tabs__scroller__container",
+        "guide": true,
+        "ref": scrollerRef
+      }, {
+        default: () => [vue.createVNode("div", {
+          "class": "v-tabs__content"
+        }, [children])]
+      })]);
+    };
+  }
+
+});
+
+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);
+}
+
+const VContentSwitcher = vue.defineComponent({
+  name: 'VContentSwitcher',
+  props: {
+    modelValue: String,
+    order: {
+      type: Array,
+      default: () => []
+    },
+    autotop: [Boolean, Object]
+  },
+  emits: {
+    'update:modelValue': modelValue => true
+  },
+
+  setup(props, ctx) {
+    const internalValueRef = vue.ref('');
+    const transitionRef = vue.ref('');
+    const elRef = vue.ref(null);
+    const anchorRef = vue.ref(null);
+    const computedOrderRef = vue.computed(() => props.order.map(row => {
+      return typeof row === 'string' ? row : row.value;
+    }));
+    const currentRef = vue.computed({
+      get: () => internalValueRef.value,
+      set: current => {
+        if (internalValueRef.value !== current) {
+          internalValueRef.value = current;
+          ctx.emit('update:modelValue', current);
+        }
+      }
+    });
+    const autotopSettingsRef = vue.computed(() => {
+      let {
+        autotop: settings
+      } = props;
+      if (settings === true) settings = {};
+      if (!settings) return;
+      return { ...settings
+      };
+    });
+
+    function seeTop(options) {
+      const scoller = vueScroller.getDocumentScroller();
+      const {
+        value: anchor
+      } = anchorRef;
+
+      if (anchor) {
+        scoller.toElement(anchor, options);
+      }
+    }
+
+    function getEl() {
+      const el = elRef.value;
+
+      if (!el) {
+        throw new Error('missing element');
+      }
+
+      return el;
+    }
+
+    vue.watch(() => props.modelValue, (value, beforeValue) => {
+      if (value == null) return;
+      internalValueRef.value = value;
+      if (beforeValue == null) return;
+      const order = computedOrderRef.value;
+      const index = order.indexOf(value);
+      const beforeIndex = order.indexOf(beforeValue);
+      let transition = 'fade';
+
+      if (index !== -1 && beforeIndex !== -1) {
+        if (index > beforeIndex) transition = 'v-content-switcher-next';
+        if (index < beforeIndex) transition = 'v-content-switcher-prev';
+      }
+
+      transitionRef.value = transition;
+    }, {
+      immediate: true
+    });
+    vue.watch(currentRef, () => {
+      const autotopSettings = autotopSettingsRef.value;
+
+      if (autotopSettings && props.modelValue != null) {
+        seeTop(autotopSettings);
+      }
+    });
+    return () => {
+      const current = currentRef.value;
+      const children = vueUtils.renderSlotOrEmpty(ctx.slots) || [];
+      const currentSlot = ctx.slots[current];
+
+      if (currentSlot) {
+        children.push(vue.createVNode("div", {
+          "class": "v-content-switcher__content",
+          "key": current
+        }, [currentSlot(this)]));
+      }
+
+      return vue.createVNode("div", {
+        "class": "v-content-switcher",
+        "ref": elRef
+      }, [vue.createVNode("div", {
+        "class": "v-content-switcher__anchor",
+        "ref": anchorRef
+      }, null), vue.createVNode(vue.Transition, {
+        "name": transitionRef.value,
+        "onBeforeLeave": el => {
+          getEl().style.height = el.offsetHeight + 'px';
+        },
+        "onEnter": el => {
+          getEl().style.height = el.offsetHeight + 'px';
+        },
+        "onAfterEnter": () => {
+          getEl().style.height = '';
+        },
+        "onEnterCancelled": () => {
+          getEl().style.height = '';
+        },
+        "onLeaveCancelled": () => {
+          getEl().style.height = '';
+        }
+      }, _isSlot$3(children) ? children : {
+        default: () => [children]
+      })]);
+    };
+  }
+
+});
+
 const DATA_TABLE_DEFAULTS = {
   itemKey: 'id',
   pageQuery: 'page',
@@ -2795,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;
@@ -2805,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];
     }
@@ -2889,12 +3498,14 @@ 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;
 exports.VCardContent = VCardContent;
 exports.VCheckbox = VCheckbox;
 exports.VCheckboxGroup = VCheckboxGroup;
+exports.VContentSwitcher = VContentSwitcher;
 exports.VDataTable = VDataTable;
 exports.VDrawerLayout = VDrawerLayout;
 exports.VForm = VForm;
@@ -2912,6 +3523,7 @@ exports.VRadioGroup = VRadioGroup;
 exports.VSelect = VSelect;
 exports.VSwitch = VSwitch;
 exports.VSwitchGroup = VSwitchGroup;
+exports.VTabs = VTabs;
 exports.VTextField = VTextField;
 exports.VTextarea = VTextarea;
 exports.VToolbar = VToolbar;