@fastkit/vui 0.6.28 → 0.6.33

package/dist/vui.esm-bundler.js

@@ -1,15 +1,16 @@
-import { createPropsOptions, createFormControlSettings, defineSlotsProps, useFormControl, renderSlotOrEmpty, createFormSelectorSettings, createFormControlProps, useFormSelectorControl, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, resolveVNodeChildOrSlots, useParentFormNode, VMenu, createTextInputSettings, useTextInputControl, createTextareaSettings, useTextareaControl, createFormSettings, useForm, getDocumentScroller, useInjectTheme, VStackRoot, VueColorSchemePlugin, installVueStackPlugin } from '@fastkit/vue-kit';
+import { createPropsOptions, createFormControlSettings, defineSlotsProps, useFormControl, renderSlotOrEmpty, createFormSelectorSettings, createFormControlProps, useFormSelectorControl, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, resolveVNodeChildOrSlots, useParentFormNode, VMenu, createTextInputSettings, useTextInputControl, createTextareaSettings, useTextareaControl, createFormSettings, useForm, getDocumentScroller, useVScrollerRef, VScroller, useInjectTheme, VStackRoot, VueColorSchemePlugin, installVueStackPlugin } from '@fastkit/vue-kit';
 export * from '@fastkit/vue-kit';
 export { VDialog, VMenu, VSnackbar } from '@fastkit/vue-kit';
-import { createPropsOptions as createPropsOptions$1, defineSlotsProps as defineSlotsProps$1, renderSlotOrEmpty as renderSlotOrEmpty$1, navigationableProps, navigationableEmits, useNavigationable, rawNumberPropType, resolveNumberish, resizeDirectiveArgument, VExpandTransition, LocationService } from '@fastkit/vue-utils';
-import { inject, computed, provide, defineComponent, createVNode, mergeProps, ref, watch, withDirectives, createTextVNode, isVNode, Fragment, vShow, vModelSelect, onMounted, Transition } from 'vue';
+import { useRouter, RouterLink, useLink, useRoute } from 'vue-router';
+import { createPropsOptions as createPropsOptions$1, defineSlotsProps as defineSlotsProps$1, renderSlotOrEmpty as renderSlotOrEmpty$1, navigationableInheritProps, VLink, rawNumberPropType, resolveNumberish, resizeDirectiveArgument, VExpandTransition, LocationService, setDefaultRouterLink } from '@fastkit/vue-utils';
+import { inject, computed, provide, defineComponent, createVNode, mergeProps, ref, watch, withDirectives, createTextVNode, isVNode, Fragment, vShow, onBeforeUpdate, vModelSelect, onMounted, onBeforeUnmount, Transition } from 'vue';
 import { useScopeColorClass, colorSchemeProps, useColorClasses, toScopeColorClass } from '@fastkit/vue-color-scheme';
 import { VProgressCircular } from '@fastkit/vue-loading';
 export * from '@fastkit/vue-loading';
 export { ICON_NAMES } from '@fastkit/icon-font';
 import { isPromise } from '@fastkit/helpers';
-import { useRouter, RouterLink, useLink, useRoute } from 'vue-router';
 import { VAppContainer, VAppLayoutControl } from '@fastkit/vue-app-layout';
+import { getDocumentScroller as getDocumentScroller$1 } from '@fastkit/vue-scroller';
 
 const CONTROL_SIZES = ['sm', 'md', 'lg'];
 const CONTROL_FIELD_VARIANTS = ['outlined', 'filled', 'flat'];
@@ -433,7 +434,7 @@ function resolveRawVButtonIcon(raw, type = 'main') {
 }
 
 const vueButtonProps = createPropsOptions$1({ ...colorSchemeProps(),
-  ...navigationableProps,
+  ...navigationableInheritProps,
   spacer: [Boolean, String],
   loading: Boolean,
   rounded: Boolean,
@@ -449,9 +450,8 @@ const LOADING_SIZE_MAP = {
 };
 const VButton = defineComponent({
   name: 'VButton',
+  inheritAttrs: false,
   props: vueButtonProps,
-  emits: { ...navigationableEmits
-  },
 
   setup(props, ctx) {
     const vui = useVui();
@@ -477,48 +477,25 @@ const VButton = defineComponent({
       variant: () => props.variant || (icon.value ? vui.setting('plainVariant') : defaults.variant)
     });
     const isPlain = computed(() => color.variant.value.value === vui.setting('plainVariant') && color.color.value.value === defaults.color);
-    const navigationable = useNavigationable(props);
-    const isLoading = computed(() => props.loading);
-    const isDisabled = computed(() => props.disabled);
+    const isLoading = computed(() => props.loading); // const isDisabled = computed(() => props.disabled);
+
     const isRounded = computed(() => props.rounded || !!icon.value);
     const spacer = computed(() => {
       const _spacer = props.spacer;
       if (!_spacer) return;
       return _spacer === true ? 'left' : _spacer;
     });
-    const classes = computed(() => [color.colorClasses.value, navigationable.value.classes, spacer.value ? `v-button--spacer-${spacer.value}` : undefined, `v-button--${control.size.value}`, {
+    const classes = 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 = renderSlotOrEmpty$1(ctx.slots, 'default');
-      const _attrs = { ...attrs
-      };
-
-      if (isDisabled.value) {
-        _attrs.disabled = true;
-      }
-
-      return createVNode(Tag, mergeProps({
+      const children = renderSlotOrEmpty$1(ctx.slots);
+      return createVNode(VLink, 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: () => [createVNode("span", {
           "class": "v-button__content"
@@ -533,7 +510,7 @@ const VButton = defineComponent({
 
 });
 
-function _isSlot$8(s) {
+function _isSlot$c(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -781,7 +758,7 @@ const VPagination = defineComponent({
           "class": classes,
           "to": to,
           "key": key
-        }, _isSlot$8(children) ? children : {
+        }, _isSlot$c(children) ? children : {
           default: () => [children]
         });
       } else {
@@ -828,11 +805,11 @@ const VPagination = defineComponent({
 
 function createListTileProps() {
   const icon = rawIconProp();
-  return { ...navigationableProps,
+  return { ...navigationableInheritProps,
     ...createPropsOptions$1({
       startIcon: icon,
       endIcon: icon,
-      fallbackTag: {
+      linkFallbackTag: {
         type: String,
         default: 'div'
       },
@@ -842,11 +819,12 @@ function createListTileProps() {
     })
   };
 }
-const listTileEmits = { ...navigationableEmits,
+const listTileEmits = {
   changeActive: isActive => true
 };
 const VListTile = defineComponent({
   name: 'VListTile',
+  inheritAttrs: false,
   props: createListTileProps(),
   emits: { ...listTileEmits
   },
@@ -862,10 +840,9 @@ const VListTile = defineComponent({
       return icon;
     });
     const endIcon = computed(() => resolveRawIconProp(false, props.endIcon));
-    const navigationable = useNavigationable(props, () => props.fallbackTag, ctx);
-    const hasTo = computed(() => !!props.to);
+    const hasTo = computed(() => !!ctx.attrs.to);
     const link = useLink({
-      to: props.to || ''
+      to: ctx.attrs.to || ''
     });
     const isActive = computed(() => {
       if (!hasTo.value) return false;
@@ -875,10 +852,7 @@ const VListTile = defineComponent({
     const classes = 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
@@ -892,16 +866,9 @@ const VListTile = defineComponent({
     return () => {
       const _startIcon = startIcon.value;
       const _endIcon = endIcon.value;
-      const {
-        Tag,
-        attrs
-      } = navigationable.value;
-      return createVNode(Tag, mergeProps({
-        "class": ['v-list-tile', classes.value]
-      }, attrs, {
-        "onClick": ev => {
-          ctx.emit('click', ev);
-        }
+      return createVNode(VLink, mergeProps(ctx.attrs, {
+        "class": ['v-list-tile', classes.value],
+        "clickableClassName": "v-list-tile--clickable"
       }), {
         default: () => [_startIcon && createVNode("span", {
           "class": "v-list-tile__icon v-list-tile__icon--start"
@@ -946,7 +913,7 @@ const VDrawerLayout = defineComponent({
 
 });
 
-function _isSlot$7(s) {
+function _isSlot$b(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -981,7 +948,7 @@ const VHero = defineComponent({
         }, {
           default: () => [createVNode(HTagName, {
             "class": "v-hero__title"
-          }, _isSlot$7(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
+          }, _isSlot$b(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
             default: () => [_slot]
           })]
         })]
@@ -991,13 +958,17 @@ const VHero = defineComponent({
 
 });
 
-function _isSlot$6(s) {
+function _isSlot$a(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
 function createNavigationItemProps() {
   return { ...createListTileProps(),
-    match: String
+    match: String // key: {
+    //   type: [String, Number],
+    //   required: true,
+    // },
+
   };
 }
 function resolveNavigationItemInput(input) {
@@ -1022,7 +993,7 @@ function renderNavigationItemInput(input, extraProps) {
   } = resolveNavigationItemInput(input);
   return createVNode(VNavigationItem, { ...props,
     ...extraProps
-  }, _isSlot$6(label) ? label : {
+  }, _isSlot$a(label) ? label : {
     default: () => [label]
   });
 }
@@ -1042,7 +1013,7 @@ const VNavigationItem = defineComponent({
       const c = props.children;
       return c && c.length ? c : undefined;
     });
-    const to = computed(() => props.to);
+    const to = computed(() => ctx.attrs.to);
     const match = computed(() => {
       const {
         match,
@@ -1117,6 +1088,7 @@ const VNavigationItem = defineComponent({
     });
 
     function open() {
+      if (!children.value) return;
       opened.value = true;
     }
 
@@ -1130,10 +1102,13 @@ const VNavigationItem = 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 => {
@@ -1155,18 +1130,21 @@ const VNavigationItem = defineComponent({
       ctx.emit('changeActive', isActive);
     };
 
+    ctx.expose({
+      close
+    });
     return () => {
       let _slot;
 
       const _children = children.value;
       const fallbackTag = _children ? 'button' : undefined;
-      return createVNode(Fragment, null, [createVNode(VListTile, mergeProps(_props.value, {
+      return createVNode(Fragment, null, [createVNode(VListTile, mergeProps(ctx.attrs, _props.value, {
         "fallbackTag": fallbackTag,
         "endIcon": _props.value.endIcon,
         "class": ['v-navigation-item', classes.value],
         "onClick": onClick,
         "onChangeActive": onChangeActive
-      }), _isSlot$6(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
+      }), _isSlot$a(_slot = renderSlotOrEmpty$1(ctx.slots, 'default')) ? _slot : {
         default: () => [_slot]
       }), _children && createVNode(VExpandTransition, null, {
         default: () => [withDirectives(createVNode("div", {
@@ -1206,6 +1184,28 @@ const VNavigation = defineComponent({
       const c = props.caption;
       return typeof c === 'function' ? c() : c;
     });
+    const itemsRef = ref([]);
+    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 createVNode("nav", {
@@ -1214,7 +1214,17 @@ const VNavigation = 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);
+          }
+        }
       }))]);
     };
   }
@@ -1314,7 +1324,7 @@ const VCheckbox = defineComponent({
 
 });
 
-function _isSlot$5(s) {
+function _isSlot$9(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -1326,7 +1336,7 @@ const VCheckboxGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => createVNode(VCheckbox, attrs, _isSlot$5(slots) ? slots : {
+  }) => createVNode(VCheckbox, attrs, _isSlot$9(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -1378,7 +1388,7 @@ const VRadio = defineComponent({
 
 });
 
-function _isSlot$4(s) {
+function _isSlot$8(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -1389,7 +1399,7 @@ const VRadioGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => createVNode(VRadio, attrs, _isSlot$4(slots) ? slots : {
+  }) => createVNode(VRadio, attrs, _isSlot$8(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -1451,7 +1461,7 @@ const VSwitch = defineComponent({
 
 });
 
-function _isSlot$3(s) {
+function _isSlot$7(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
@@ -1463,7 +1473,7 @@ const VSwitchGroup = defineFormSelectorComponent({
   itemRenderer: ({
     attrs,
     slots
-  }) => createVNode(VSwitch, attrs, _isSlot$3(slots) ? slots : {
+  }) => createVNode(VSwitch, attrs, _isSlot$7(slots) ? slots : {
     default: () => [slots]
   })
 });
@@ -2022,6 +2032,597 @@ const VForm = defineComponent({
 
 });
 
+function _isSlot$6(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+
+const VTab = 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 = 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 = createVNode("span", {
+        "class": "v-tab__content"
+      }, [icon && resolveRawIconProp(active, icon, {
+        class: 'v-tab__icon'
+      }), renderSlotOrEmpty$1(ctx.slots)]);
+
+      if (to) {
+        const replace = typeof to === 'string' ? undefined : to.replace;
+        return createVNode(RouterLink, {
+          "class": classes,
+          "to": to,
+          "replace": replace
+        }, _isSlot$6(children) ? children : {
+          default: () => [children]
+        });
+      } else {
+        return 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]' && !isVNode(s);
+}
+
+const VTabs = 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,
+    ...defineSlotsProps$1(),
+    color: String
+  },
+  emits: {
+    'update:modelValue': newValue => true,
+    change: newValue => true
+  },
+
+  setup(props, ctx) {
+    const vui = useVui();
+    const internalValueRef = ref(null);
+    const scrollerRef = useVScrollerRef();
+    const elRef = ref(null);
+    let scrollResult;
+    const tabRefs = ref([]);
+    const currentRef = computed({
+      get: () => internalValueRef.value,
+      set: value => {
+        if (internalValueRef.value !== value) {
+          internalValueRef.value = value;
+          ctx.emit('update:modelValue', value);
+          ctx.emit('change', value);
+        }
+      }
+    });
+    const colorScope = useScopeColorClass({
+      color: () => props.color || vui.setting('tabDefault').color
+    });
+    const classes = computed(() => [colorScope.value.className]);
+    const computedItemsRef = 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
+        });
+      }
+    }
+
+    watch(() => props.modelValue, () => setupInternalValue(true));
+    watch(() => props.items, () => setupInternalValue(), {
+      deep: true
+    });
+    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
+    });
+    onMounted(() => {
+      scrollToTab(currentRef.value);
+    });
+    onBeforeUnmount(() => {
+      cancelScroll();
+    });
+    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 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 createVNode("div", {
+        "class": ['v-tabs', classes.value],
+        "ref": elRef
+      }, [createVNode(VScroller, {
+        "class": "v-tabs__scroller",
+        "containerClass": "v-tabs__scroller__container",
+        "guide": true,
+        "ref": scrollerRef
+      }, {
+        default: () => [createVNode("div", {
+          "class": "v-tabs__content"
+        }, [children])]
+      })]);
+    };
+  }
+
+});
+
+function _isSlot$4(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+
+const VBreadcrumbs = defineComponent({
+  name: 'VBreadcrumbs',
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    divider: [String, Function] // ...defineSlotsProps<{}>(),
+
+  },
+
+  setup(props, ctx) {
+    const vui = useVui();
+    const computedItemsRef = 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 = computed(() => computedItemsRef.value.length);
+
+    const defaultDividerSlot = () => {
+      return [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(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 ? createVNode(VLink, {
+          "class": "v-breadcrumbs__link",
+          "to": to,
+          "exactActiveClass": "v-breadcrumbs__link--active"
+        }, _isSlot$4(myChildren) ? myChildren : {
+          default: () => [myChildren]
+        }) : myChildren;
+        children.push(createVNode("li", {
+          "class": ['v-breadcrumbs__item', {
+            'v-breadcrumbs__item--disabled': disabled
+          }],
+          "key": `link-${index}`
+        }, [itemChild]));
+      });
+      return createVNode("nav", {
+        "class": "v-breadcrumbs"
+      }, [createVNode("ul", {
+        "class": "v-breadcrumbs__list"
+      }, [children])]);
+    };
+  }
+
+});
+
+function _isSlot$3(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+
+const VContentSwitcher = defineComponent({
+  name: 'VContentSwitcher',
+  props: {
+    modelValue: String,
+    order: {
+      type: Array,
+      default: () => []
+    },
+    autotop: [Boolean, Object]
+  },
+  emits: {
+    'update:modelValue': modelValue => true
+  },
+
+  setup(props, ctx) {
+    const internalValueRef = ref('');
+    const transitionRef = ref('');
+    const elRef = ref(null);
+    const anchorRef = ref(null);
+    const computedOrderRef = computed(() => props.order.map(row => {
+      return typeof row === 'string' ? row : row.value;
+    }));
+    const currentRef = computed({
+      get: () => internalValueRef.value,
+      set: current => {
+        if (internalValueRef.value !== current) {
+          internalValueRef.value = current;
+          ctx.emit('update:modelValue', current);
+        }
+      }
+    });
+    const autotopSettingsRef = computed(() => {
+      let {
+        autotop: settings
+      } = props;
+      if (settings === true) settings = {};
+      if (!settings) return;
+      return { ...settings
+      };
+    });
+
+    function seeTop(options) {
+      const scoller = getDocumentScroller$1();
+      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;
+    }
+
+    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
+    });
+    watch(currentRef, () => {
+      const autotopSettings = autotopSettingsRef.value;
+
+      if (autotopSettings && props.modelValue != null) {
+        seeTop(autotopSettings);
+      }
+    });
+    return () => {
+      const current = currentRef.value;
+      const children = renderSlotOrEmpty$1(ctx.slots) || [];
+      const currentSlot = ctx.slots[current];
+
+      if (currentSlot) {
+        children.push(createVNode("div", {
+          "class": "v-content-switcher__content",
+          "key": current
+        }, [currentSlot(this)]));
+      }
+
+      return createVNode("div", {
+        "class": "v-content-switcher",
+        "ref": elRef
+      }, [createVNode("div", {
+        "class": "v-content-switcher__anchor",
+        "ref": anchorRef
+      }, null), createVNode(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',
@@ -2794,6 +3395,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;
@@ -2804,6 +3406,13 @@ class VuiService {
             router: this.router,
         });
     }
+    configure(options) {
+        options && Object.assign(this.options, options);
+        setDefaultRouterLink(this.getRouterLink());
+    }
+    getRouterLink() {
+        return this.options.RouterLink || RouterLink;
+    }
     setting(key) {
         return this.options.uiSettings[key];
     }
@@ -2880,4 +3489,4 @@ function installVuiPlugin(app, opts) {
   return app.use(VuiPlugin, opts);
 }
 
-export { CONTROL_FIELD_VARIANTS, CONTROL_SIZES, PAGINATION_ALIGNS, VApp, VButton, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VDataTable, VDrawerLayout, VForm, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSwitch, VSwitchGroup, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, configureDataTableDefaults, createCardProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };
+export { CONTROL_FIELD_VARIANTS, CONTROL_SIZES, PAGINATION_ALIGNS, VApp, VBreadcrumbs, VButton, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSwitch, VSwitchGroup, VTabs, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, configureDataTableDefaults, createCardProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };