@fastkit/vui 0.6.19 → 0.6.31

package/dist/vui.cjs.js

@@ -3,12 +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 vueUtils = require('@fastkit/vue-utils');
 var vueLoading = require('@fastkit/vue-loading');
 var iconFont = require('@fastkit/icon-font');
-var vueRouter = require('vue-router');
+var helpers = require('@fastkit/helpers');
+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'];
@@ -162,7 +165,7 @@ const VFormControl = vue.defineComponent({
         }
       }, [label, control.required && vui.getRequiredChip()]), vue.createVNode("div", {
         "class": "v-form-control__body"
-      }, [vueKit.renderSlotOrEmpty(ctx.slots, 'default', control), vue.createVNode("div", {
+      }, [vueKit.renderSlotOrEmpty(ctx.slots, 'default', control), !props.hiddenInfo && vue.createVNode("div", {
         "class": "v-form-control__info"
       }, [!!message && vue.createVNode("div", {
         "class": "v-form-control__message"
@@ -215,6 +218,7 @@ function defineFormSelectorComponent(opts) {
       return vue.createVNode(VFormControl, {
         "nodeControl": this.nodeControl,
         "focused": this.nodeControl.focused,
+        "hiddenInfo": this.hiddenInfo,
         "class": ['v-form-selector', className, { ...this.classes,
           'v-form-selector--stacked': this.stacked
         }],
@@ -431,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,
@@ -447,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();
@@ -475,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"
@@ -531,13 +511,306 @@ const VButton = vue.defineComponent({
 
 });
 
+function _isSlot$c(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+
+const PAGINATION_ALIGNS = ['left', 'center', 'right'];
+function paginationProps() {
+  return vueUtils.createPropsOptions({
+    /**
+     * Active Pages
+     */
+    modelValue: {
+      type: vueUtils.rawNumberPropType,
+      default: 1
+    },
+
+    /**
+     * Total number of pages
+     */
+    length: {
+      type: vueUtils.rawNumberPropType,
+      default: 0
+    },
+
+    /**
+     * Maximum number of links to display.
+     */
+    totalVisible: vueUtils.rawNumberPropType,
+
+    /**
+     * true when narrowing
+     */
+    dense: Boolean,
+    disabled: Boolean,
+    align: {
+      type: String,
+      default: 'center'
+    },
+
+    /**
+     * To synchronize with a query, use the query name
+     */
+    routeQuery: String,
+    beforeChange: Function,
+    color: String
+  });
+}
+const VPagination = vue.defineComponent({
+  name: 'VPagination',
+  props: paginationProps(),
+  emits: {
+    change: page => true
+  },
+
+  setup(props, ctx) {
+    const vui = useVui();
+    const elRef = vue.ref(null);
+    const router = vueRouter.useRouter();
+    const internalValue = vue.ref(1);
+    const containerWidth = vue.ref(0);
+    const itemSize = vue.ref(0);
+    const capacityLength = vue.computed(() => {
+      const _itemSize = itemSize.value;
+      if (!_itemSize) return 0;
+      return Math.floor(containerWidth.value / _itemSize);
+    });
+    const colorScope = vueColorScheme.useScopeColorClass({
+      color: () => props.color || vui.setting('primaryScope')
+    });
+    const computedLength = vue.computed(() => vueUtils.resolveNumberish(props.length));
+    const computedTotalVisible = vue.computed(() => vueUtils.resolveNumberish(props.totalVisible));
+    const computedNumbersLength = vue.computed(() => capacityLength.value - 2 - 2);
+    const computedPage = vue.computed(() => {
+      const {
+        routeQuery
+      } = props;
+
+      if (routeQuery) {
+        return vui.location.getQuery(routeQuery, Number, 1);
+      }
+
+      return internalValue.value;
+    });
+
+    const _range = (from, to) => {
+      const range = [];
+      from = from > 0 ? from : 1;
+
+      for (let i = from; i <= to; i++) {
+        range.push(i);
+      }
+
+      return range;
+    };
+
+    const computedItems = vue.computed(() => {
+      const maxButtons = computedNumbersLength.value;
+      const totalVisible = computedTotalVisible.value;
+      const length = computedLength.value;
+      const pageValue = computedPage.value;
+      const maxLength = Math.min(Math.max(0, totalVisible || 0) || length, Math.max(0, maxButtons) || length, length);
+
+      if (length <= maxLength) {
+        return _range(1, length);
+      }
+
+      const even = maxLength % 2 === 0 ? 1 : 0;
+      const left = Math.floor(maxLength / 2);
+      const right = length - left + 1 + even;
+
+      if (pageValue > left && pageValue < right) {
+        const start = pageValue - left + 2;
+        const end = pageValue + left - 2 - even;
+        return [1, 'truncate', ..._range(start, end), 'truncate', length];
+      } else if (pageValue === left) {
+        const end = pageValue + left - 1 - even;
+        return [..._range(1, end), 'truncate', length];
+      } else if (pageValue === right) {
+        const start = pageValue - left + 1;
+        return [1, 'truncate', ..._range(start, length)];
+      } else {
+        return [..._range(1, left), 'truncate', ..._range(right, length)];
+      }
+    });
+    const isActive = vue.computed(() => computedLength.value > 1);
+    const isTransitioning = vue.computed(() => {
+      const {
+        routeQuery
+      } = props;
+      return vui.location.isQueryOnlyTransitioning(routeQuery);
+    });
+    const isDisabled = vue.computed(() => props.disabled || isTransitioning.value);
+    const classes = vue.computed(() => [{
+      'v-pagination--disabled': isDisabled.value,
+      'v-pagination--dense': props.dense,
+      [`v-pagination--${props.align}`]: true
+    }, colorScope.value.className]);
+
+    async function setPage(value) {
+      if (isDisabled.value) return;
+      const {
+        beforeChange,
+        routeQuery
+      } = props;
+      const newPage = vueUtils.resolveNumberish(value);
+      if (computedPage.value === newPage) return;
+
+      if (beforeChange) {
+        try {
+          let result = beforeChange(newPage);
+          if (helpers.isPromise(result)) result = await result;
+          if (result === false) return;
+        } catch (e) {}
+      }
+
+      if (routeQuery) {
+        const to = createRoutableLocationByPage(newPage, routeQuery);
+        return router.push(to).then(failure => {
+          !failure && ctx.emit('change', newPage);
+        });
+      } else {
+        internalValue.value = newPage;
+        ctx.emit('update:modelValue', newPage);
+        ctx.emit('change', newPage);
+      }
+    }
+
+    function createPageInfo(source) {
+      const currentPage = computedPage.value;
+      const length = computedLength.value;
+      let number;
+      let page;
+      let active;
+      let disabled;
+
+      if (typeof source === 'number') {
+        number = true;
+        page = source;
+        active = currentPage === page;
+        disabled = false;
+      } else if (source === 'truncate') {
+        number = false;
+        active = false;
+        disabled = false;
+      } else {
+        number = false;
+        const isPrev = source === 'prev';
+        const ammount = isPrev ? -1 : 1;
+        page = currentPage + ammount;
+        active = false;
+        disabled = page < 1 || page > length;
+      }
+
+      return {
+        number,
+        page,
+        active,
+        disabled
+      };
+    }
+
+    function createRoutableLocationByPage(page, routeQuery) {
+      return vui.location.getQueryMergedLocation({
+        [routeQuery]: page
+      });
+    }
+
+    function genItem(source, index) {
+      const {
+        number,
+        page,
+        active,
+        disabled
+      } = createPageInfo(source);
+      const type = number ? 'num' : source;
+      const classes = ['v-pagination__item', {
+        [`v-pagination__item--${type}`]: true,
+        'v-pagination__item--active': active,
+        'v-pagination__item--disabled': disabled
+      }];
+      const children = number ? page : (() => {
+        if (type === 'truncate') {
+          return vue.createVNode("span", null, [vue.createTextVNode("...")]);
+        }
+
+        const isPrev = type === 'prev';
+        const icon = isPrev ? vui.icon('prev') : vui.icon('next');
+        return resolveRawIconProp(false, icon, {
+          class: 'v-pagination__item__icon'
+        });
+      })();
+
+      const onClick = ev => {
+        ev.preventDefault();
+        if (page === undefined || active || disabled) return;
+        setPage(page);
+      };
+
+      const key = `${source}-${index}`;
+      const {
+        routeQuery
+      } = props;
+
+      if (page !== undefined && routeQuery) {
+        const to = createRoutableLocationByPage(page, routeQuery);
+        return vue.createVNode(vueRouter.RouterLink, {
+          "class": classes,
+          "to": to,
+          "key": key
+        }, _isSlot$c(children) ? children : {
+          default: () => [children]
+        });
+      } else {
+        return vue.createVNode("button", {
+          "class": classes,
+          "type": "button",
+          "value": page,
+          "onClick": onClick,
+          "key": key
+        }, [children]);
+      }
+    }
+
+    vue.watch(() => props.modelValue, modelValue => {
+      internalValue.value = vueUtils.resolveNumberish(modelValue);
+    }, {
+      immediate: true
+    });
+    return () => {
+      if (!isActive.value) return undefined;
+      const $items = ['prev', ...computedItems.value, 'next'].map((i, index) => genItem(i, index));
+      return vue.withDirectives(vue.createVNode("nav", {
+        "class": ['v-pagination', classes.value],
+        "ref": elRef
+      }, [$items]), [vueUtils.resizeDirectiveArgument(({
+        width
+      }) => {
+        const el = elRef.value;
+
+        if (el) {
+          const style = window.getComputedStyle(el, 'before');
+          const width = style.getPropertyValue('width');
+          const margin = style.getPropertyValue('margin');
+          const size = parseFloat(width) + parseFloat(margin) * 0.5;
+          itemSize.value = size;
+        }
+
+        containerWidth.value = width;
+      })]);
+    };
+  }
+
+});
+
 function createListTileProps() {
   const icon = rawIconProp();
-  return { ...vueUtils.navigationableProps,
+  return { ...vueUtils.navigationableInheritProps,
     ...vueUtils.createPropsOptions({
       startIcon: icon,
       endIcon: icon,
-      fallbackTag: {
+      linkFallbackTag: {
         type: String,
         default: 'div'
       },
@@ -547,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
   },
@@ -567,7 +841,6 @@ 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 link = vueRouter.useLink({
       to: props.to || ''
@@ -580,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
@@ -597,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"
@@ -651,7 +914,52 @@ const VDrawerLayout = vue.defineComponent({
 
 });
 
-function _isSlot$6(s) {
+function _isSlot$b(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+
+const VHero = vue.defineComponent({
+  name: 'VHero',
+  props: {
+    color: {
+      type: String,
+      default: 'primary'
+    },
+    tag: {
+      type: String,
+      default: 'header'
+    },
+    hTag: {
+      type: String,
+      default: 'h1'
+    }
+  },
+
+  setup(props, ctx) {
+    return () => {
+      let _slot;
+
+      const TagName = props.tag;
+      const HTagName = props.hTag;
+      return vue.createVNode(vueAppLayout.VAppContainer, {
+        "pulled": true
+      }, {
+        default: () => [vue.createVNode(TagName, {
+          "class": ['v-hero', vueColorScheme.toScopeColorClass(props.color)]
+        }, {
+          default: () => [vue.createVNode(HTagName, {
+            "class": "v-hero__title"
+          }, _isSlot$b(_slot = vueUtils.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
+            default: () => [_slot]
+          })]
+        })]
+      });
+    };
+  }
+
+});
+
+function _isSlot$a(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
@@ -682,7 +990,7 @@ function renderNavigationItemInput(input, extraProps) {
   } = resolveNavigationItemInput(input);
   return vue.createVNode(VNavigationItem, { ...props,
     ...extraProps
-  }, _isSlot$6(label) ? label : {
+  }, _isSlot$a(label) ? label : {
     default: () => [label]
   });
 }
@@ -791,9 +1099,8 @@ const VNavigationItem = vue.defineComponent({
     const onClick = ev => {
       if (!to.value) {
         toggle();
-      }
+      } // ctx.emit('click', ev);
 
-      ctx.emit('click', ev);
     };
 
     const onChangeActive = isActive => {
@@ -820,13 +1127,13 @@ const VNavigationItem = vue.defineComponent({
 
       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", {
@@ -974,7 +1281,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);
 }
 
@@ -986,7 +1293,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]
   })
 });
@@ -1038,7 +1345,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);
 }
 
@@ -1049,7 +1356,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]
   })
 });
@@ -1111,7 +1418,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);
 }
 
@@ -1123,7 +1430,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]
   })
 });
@@ -1407,6 +1714,7 @@ const VSelect = vue.defineComponent({
       "class": ['v-select', this.classes],
       "label": this.label,
       "hint": this.hint,
+      "hiddenInfo": this.hiddenInfo,
       "onClickLabel": ev => {
         this.focus();
       }
@@ -1433,7 +1741,20 @@ const VSelect = vue.defineComponent({
           "focused": this.menuOpened,
           "onClick": ev => {
             if (this.canOperation && !control.isActive) {
-              control.show(ev);
+              let t = ev.target;
+              const count = 0;
+              let hit = false;
+
+              while (count < 5) {
+                if (t.classList.contains('v-select__input')) {
+                  hit = true;
+                  break;
+                }
+
+                t = t.parentElement;
+              }
+
+              control.show(hit ? t : ev);
             }
           }
         }, { ...this.$slots,
@@ -1518,6 +1839,7 @@ const VTextField = vue.defineComponent({
     return vue.createVNode(VFormControl, {
       "nodeControl": this.nodeControl,
       "focused": this.nodeControl.focused,
+      "hiddenInfo": this.hiddenInfo,
       "class": ['v-text-field', this.classes],
       "label": this.label,
       "hint": this.hint,
@@ -1581,6 +1903,7 @@ const VTextarea = vue.defineComponent({
       "class": ['v-textarea', this.classes],
       "label": this.label,
       "hint": this.hint,
+      "hiddenInfo": this.hiddenInfo,
       "onClickLabel": ev => {
         this.focus();
       }
@@ -1666,93 +1989,1311 @@ const VForm = vue.defineComponent({
 
 });
 
-function _isSlot$2(s) {
+function _isSlot$6(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
 
-const VApp = vue.defineComponent({
-  name: 'VApp',
+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) {
-    vueKit.useInjectTheme();
+    const classesRef = vue.computed(() => ({
+      'v-tab--active': props.active
+    }));
+    const exposeValues = {
+      value: props.value,
+      active: props.active
+    };
+    ctx.expose(exposeValues);
     return () => {
-      let _slot;
-
-      return vue.createVNode(vueKit.VStackRoot, null, _isSlot$2(_slot = vueKit.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
-        default: () => [_slot]
-      });
+      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]);
+      }
     };
   }
 
 });
 
-const VToolbar = vue.defineComponent({
-  name: 'VToolbar',
-  props: { ...createElevationProps(),
-    ...vueColorScheme.colorSchemeProps(),
-    dense: Boolean
+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 elevation = useElevation(props, {
-      defaultValue: 4
+    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 dense = vue.computed(() => props.dense);
-    const color = vueColorScheme.useColorClasses({
-      color: () => props.color,
-      variant: () => props.variant || vui.setting('containedVariant')
+    const colorScope = vueColorScheme.useScopeColorClass({
+      color: () => props.color || vui.setting('tabDefault').color
     });
-    const classes = vue.computed(() => {
-      return [elevation.elevationClassName.value, color.colorClasses.value, {
-        'v-toolbar--plain': !color.color.value.value,
-        'v-toolbar--dense': dense.value
-      }];
+    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
+        };
+      });
     });
-    return () => {
-      return vue.createVNode("div", {
-        "class": ['v-toolbar', classes.value]
-      }, [vueUtils.renderSlotOrEmpty(ctx.slots, 'default')]);
-    };
-  }
 
-});
+    const setTabRef = ref => {
+      tabRefs.value.push(ref);
+    }; // const isMountedRef = ref(false);
 
-function _isSlot$1(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
-}
 
-const VToolbarMenu = vue.defineComponent({
-  name: 'VToolbarMenu',
-  inheritAttrs: false,
-  props: {},
+    function setupInternalValue(routable) {
+      let value = props.modelValue;
 
-  setup(props, ctx) {
-    const vui = useVui();
-    const plain = vui.setting('plainVariant');
-    return () => {
-      let _slot;
+      if (value == null || value === '') {
+        const firstItem = props.items[0];
+        if (!firstItem) return;
+        value = firstItem.value;
+      }
 
-      const variant = props.variant || plain;
-      return vue.createVNode(VButton, vue.mergeProps(ctx.attrs, {
-        "variant": variant,
-        "class": ['v-toolbar-menu']
-      }), _isSlot$1(_slot = vueUtils.renderSlotOrEmpty(ctx.slots)) ? _slot : {
-        default: () => [_slot]
-      });
-    };
-  }
+      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;
+    }
 
-const VToolbarEdge = vue.defineComponent({
-  name: 'VToolbarEdge',
-  props: {
-    edge: {
-      type: String,
-      required: true
+    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',
+  sortQuery: 'sort',
+  orderQuery: 'order',
+  limitQuery: 'limit',
+  defaultOrder: 'ASC',
+  ascQueryValue: 'ASC',
+  descQueryValue: 'DESC',
+  limits: [5, 10, 20, 50, 100],
+  limitDefault: 20,
+  contorolThreshold: 10
+};
+function configureDataTableDefaults(defaults) {
+  Object.assign(DATA_TABLE_DEFAULTS, defaults);
+
+  if (!defaults.defaultOrder && defaults.ascQueryValue) {
+    DATA_TABLE_DEFAULTS.defaultOrder = defaults.ascQueryValue;
+  }
+}
+const SELECTABLE_HEADER_SYMBOL = '__selectable_header__';
+const VDataTable = vue.defineComponent({
+  name: 'VDataTable',
+  props: {
+    /** 選択中のkeyの配列 */
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    itemKey: {
+      type: String,
+      default: () => DATA_TABLE_DEFAULTS.itemKey
+    },
+
+    /**
+     * ページネーションクエリ名
+     */
+    pageQuery: {
+      type: String,
+      default: () => DATA_TABLE_DEFAULTS.pageQuery
+    },
+
+    /**
+     * ソートクエリ名
+     */
+    sortQuery: {
+      type: String,
+      default: () => DATA_TABLE_DEFAULTS.sortQuery
+    },
+
+    /**
+     * 表示順クエリ名
+     */
+    orderQuery: {
+      type: String,
+      default: () => DATA_TABLE_DEFAULTS.orderQuery
+    },
+
+    /**
+     * リミット件数クエリ名
+     */
+    limitQuery: {
+      type: String,
+      default: () => DATA_TABLE_DEFAULTS.limitQuery
+    },
+    defaultOrder: {
+      type: String,
+      default: () => DATA_TABLE_DEFAULTS.defaultOrder
+    },
+    ascQueryValue: {
+      type: String,
+      default: () => DATA_TABLE_DEFAULTS.ascQueryValue
+    },
+    descQueryValue: {
+      type: String,
+      default: () => DATA_TABLE_DEFAULTS.descQueryValue
+    },
+    limits: {
+      type: Array,
+      default: () => DATA_TABLE_DEFAULTS.limits
+    },
+    limitDefault: {
+      type: Number,
+      default: () => DATA_TABLE_DEFAULTS.limitDefault
+    },
+    contorolThreshold: {
+      type: Number,
+      default: () => DATA_TABLE_DEFAULTS.contorolThreshold
+    },
+    headers: {
+      type: Array,
+      required: true
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    selectable: Boolean,
+    fixedHeader: Boolean,
+    maxHeight: [Number, String]
+  },
+  emits: {
+    input: selecteds => true
+  },
+
+  setup(props, ctx) {
+    const vui = useVui();
+    const bootedRef = vue.ref(false);
+    const footerHeightRef = vue.ref(0);
+    const internalValues = vue.ref(props.modelValue.slice());
+    const sortedItemKeysRef = vue.computed(() => props.items.map(item => item[props.itemKey]));
+    const isEmptyRef = vue.computed(() => props.items.length === 0);
+    const headersRef = vue.computed(() => {
+      const {
+        headers,
+        selectable
+      } = props;
+      const ret = [];
+
+      if (selectable) {
+        ret.push({
+          key: SELECTABLE_HEADER_SYMBOL
+        });
+      }
+
+      ret.push(...headers.filter(h => !h.hidden));
+      return ret;
+    });
+    const classesRef = vue.computed(() => [{
+      'v-data-table--fixed-header': props.fixedHeader
+    }]);
+    const layout = vueAppLayout.VAppLayoutControl.use();
+    const bodyInnerStylesRef = vue.computed(() => {
+      if (!bootedRef.value) return;
+      const {
+        fixedHeader,
+        maxHeight
+      } = props;
+      const footerHeight = footerHeightRef.value;
+
+      const _maxHeight = maxHeight || (fixedHeader ? '100%' : maxHeight);
+
+      if (!_maxHeight) {
+        return;
+      }
+
+      return {
+        maxHeight: layout.calicurateViewHeight(_maxHeight, -footerHeight - 100, 200)
+      };
+    });
+    const defaultOrderQueryRef = vue.computed(() => props.defaultOrder === props.ascQueryValue ? props.ascQueryValue : props.descQueryValue);
+    const isTransitioningRef = vue.computed(() => {
+      return vui.location.isQueryOnlyTransitioning([props.pageQuery, props.sortQuery, props.orderQuery, props.limitQuery]);
+    });
+    const pageRef = vue.computed(() => vui.location.getQuery(props.pageQuery, Number, 1));
+    const needShowHeaderControlRef = vue.computed(() => props.items.length > props.contorolThreshold);
+    const sortByRef = vue.computed({
+      get: () => {
+        return vui.location.getQuery(props.sortQuery);
+      },
+
+      set(value) {
+        vui.location.pushQuery({
+          [props.sortQuery]: value || null,
+          [props.pageQuery]: 1
+        });
+      }
+
+    });
+    const ordersRef = vue.computed(() => [props.ascQueryValue, props.descQueryValue]);
+    const usePaigingRef = vue.computed(() => props.limits.length > 0);
+    const orderByRef = vue.computed({
+      get: () => {
+        const value = vui.location.getQuery(props.orderQuery);
+
+        if (typeof value !== 'string' || !ordersRef.value.includes(value)) {
+          return;
+        }
+
+        return value;
+      },
+
+      set(value) {
+        vui.location.pushQuery({
+          [props.orderQuery]: value || null,
+          [props.pageQuery]: 1
+        });
+      }
+
+    });
+    const offsetRef = vue.computed(() => (pageRef.value - 1) * limitRef.value);
+    const limitRef = vue.computed({
+      get: () => vui.location.getQuery(props.limitQuery, Number, props.limitDefault),
+      set: value => {
+        const page = Math.floor(offsetRef.value / value) + 1;
+        vui.location.pushQuery({
+          [props.limitQuery]: value,
+          [props.pageQuery]: page
+        });
+      }
+    });
+    const pageLengthRef = vue.computed(() => {
+      const {
+        total
+      } = props;
+      const _limit = limitRef.value;
+      if (!total) return 0;
+      return Math.ceil(total / _limit);
+    });
+    const lengthRef = vue.computed(() => props.items.length);
+    const isASCRef = vue.computed(() => orderByRef.value === props.ascQueryValue); // const isDESCRef = computed(() => orderByRef.value === props.descQueryValue);
+
+    const sortIconRef = vue.computed(() => {
+      let icon = vui.icon('sort');
+
+      if (typeof icon === 'string') {
+        const name = icon;
+
+        icon = gen => {
+          return gen({
+            name,
+            rotate: isASCRef.value ? 180 : 0
+          });
+        };
+      }
+
+      return icon;
+    });
+    const isIndeterminateRef = vue.computed(() => {
+      const {
+        length
+      } = internalValues.value;
+      return length > 0 && length < sortedItemKeysRef.value.length;
+    });
+    const isAllSelectedRef = vue.computed(() => internalValues.value.length === sortedItemKeysRef.value.length);
+
+    function setSort(settings) {
+      const {
+        sort,
+        order
+      } = settings;
+      if ((sort === undefined || sortByRef.value === sort) && (order === undefined || orderByRef.value === order)) return;
+      const queries = {};
+
+      if (sort) {
+        queries[props.sortQuery] = sort;
+      }
+
+      if (order) {
+        queries[props.orderQuery] = order;
+      }
+
+      vui.location.pushQuery({ ...queries,
+        [props.pageQuery]: 1
+      });
+    }
+
+    function toggleOrderBy() {
+      return setSort({
+        order: orderByRef.value === props.ascQueryValue ? props.descQueryValue : props.ascQueryValue
+      });
+    }
+
+    function isSelected(key) {
+      return internalValues.value.includes(key);
+    }
+
+    function select(key) {
+      if (!internalValues.value.includes(key)) {
+        const values = internalValues.value.slice();
+        values.push(key);
+        const sortedKeys = sortedItemKeysRef.value;
+        values.sort((a, b) => {
+          const ai = sortedKeys.indexOf(a);
+          const bi = sortedKeys.indexOf(b);
+          if (ai < bi) return -1;
+          if (ai > bi) return 1;
+          return 0;
+        });
+        internalValues.value = values;
+        ctx.emit('input', values);
+      }
+    }
+
+    function selectAll() {
+      if (!isAllSelectedRef.value) {
+        const values = sortedItemKeysRef.value.slice();
+        internalValues.value = values;
+        ctx.emit('input', values);
+      }
+    }
+
+    function deselectAll() {
+      if (internalValues.value.length) {
+        const values = [];
+        internalValues.value = values;
+        ctx.emit('input', values);
+      }
+    }
+
+    function deselect(key) {
+      const values = internalValues.value.slice();
+      const index = values.indexOf(key);
+
+      if (index !== -1) {
+        values.splice(index, 1);
+        internalValues.value = values;
+        ctx.emit('input', values);
+      }
+    }
+
+    function handleClickSortHeader(header, ev) {
+      const {
+        sortQuery
+      } = header;
+      if (!sortQuery) return;
+
+      if (sortByRef.value === sortQuery) {
+        return toggleOrderBy();
+      }
+
+      return setSort({
+        sort: sortQuery,
+        order: defaultOrderQueryRef.value
+      });
+    }
+
+    function genPagination() {
+      return vue.createVNode(VPagination, {
+        "class": "v-data-table__pagination",
+        "dense": true,
+        "align": "right",
+        "routeQuery": props.pageQuery,
+        "modelValue": pageRef.value,
+        "length": pageLengthRef.value
+      }, null);
+    }
+
+    function genControls() {
+      const {
+        total
+      } = props;
+      const offset = offsetRef.value;
+      const length = lengthRef.value;
+      return vue.createVNode("div", {
+        "class": "v-data-table__controls"
+      }, [vue.createVNode("div", {
+        "class": "v-data-table__controls__info"
+      }, [vue.createVNode("small", {
+        "class": "v-data-table__controls__info__length"
+      }, [vue.createTextVNode("\u5168 "), total, vue.createTextVNode(" \u4EF6\u4E2D "), offset + 1, vue.createTextVNode(" \u4EF6 \u301C "), offset + length, vue.createTextVNode(" \u4EF6\u3092\u8868\u793A")])]), vue.createVNode("div", {
+        "class": "v-data-table__controls__select-limit"
+      }, [vue.createVNode("span", {
+        "class": "v-data-table__controls__select-limit__prefix"
+      }, [vue.createTextVNode("1\u30DA\u30FC\u30B8\u306B")]), vue.createVNode(VSelect, {
+        "class": "v-data-table__controls__select-limit__node",
+        "size": "sm",
+        "hiddenInfo": true,
+        "disabled": isTransitioningRef.value,
+        "items": props.limits.map(limit => {
+          return {
+            label: `${limit}件`,
+            value: limit
+          };
+        }),
+        "modelValue": limitRef.value,
+        "onUpdate:modelValue": $event => limitRef.value = $event
+      }, null)]), vue.createVNode("div", {
+        "class": "v-data-table__controls__pagination"
+      }, [genPagination()])]);
+    }
+
+    function genTableHeader() {
+      const sortBy = sortByRef.value;
+      const isIndeterminate = isIndeterminateRef.value;
+      const isAllSelected = isAllSelectedRef.value;
+      const {
+        defaultOrder,
+        ascQueryValue
+      } = props;
+      const usePaiging = usePaigingRef.value;
+      const children = headersRef.value.map(header => {
+        const {
+          label,
+          sortQuery,
+          align,
+          key
+        } = header;
+        const headerChildren = [];
+
+        if (label != null && typeof label !== 'boolean') {
+          let _children = typeof label === 'function' ? label(vui) : label;
+
+          if (_children && !Array.isArray(_children) && typeof _children === 'object') {
+            _children = JSON.stringify(_children);
+          }
+
+          headerChildren.push(_children);
+        }
+
+        if (key === SELECTABLE_HEADER_SYMBOL) {
+          headerChildren.push(vue.createVNode(VCheckbox, {
+            "modelValue": isAllSelected,
+            "indeterminate": isIndeterminate,
+            "onChange": ev => {
+              if (isAllSelectedRef.value) {
+                deselectAll();
+              } else {
+                selectAll();
+              }
+            }
+          }, null));
+        } // if (key === DELETOR_HEADER_SYMBOL) {
+        //   headerChildren.push('削除');
+        // }
+
+
+        const sortActive = sortBy === sortQuery;
+
+        if (sortQuery && usePaiging) {
+          const isASC = sortActive ? isASCRef.value : defaultOrder === ascQueryValue;
+          headerChildren.unshift(vue.createVNode(VIcon, {
+            "class": "v-data-table__table__sort-icon v-data-table__table__sort-icon--empty",
+            "name": "$empty"
+          }, null));
+          headerChildren.push(resolveRawIconProp(false, sortIconRef.value, {
+            class: ['v-data-table__table__sort-icon v-data-table__table__sort-icon--arrow', {
+              'v-data-table__table__sort-icon--asc': isASC,
+              'v-data-table__table__sort-icon--desc': !isASC
+            }]
+          }));
+        }
+
+        const classes = ['v-data-table__table__cell', {
+          'v-data-table__table__cell--active': sortActive
+        }];
+
+        if (align) {
+          classes.push(`v-data-table__table__cell--${align}`);
+        }
+
+        return vue.createVNode("th", {
+          "class": classes,
+          "key": header.key,
+          "tabindex": sortQuery && usePaiging ? 0 : undefined,
+          "onClick": ev => {
+            if (!sortQuery || !usePaiging) return;
+            handleClickSortHeader(header);
+          }
+        }, [vue.createVNode("div", {
+          "class": "v-data-table__table__cell__tile"
+        }, [headerChildren])]);
+      });
+      return vue.createVNode("thead", {
+        "class": "v-data-table__table__header"
+      }, [vue.createVNode("tr", null, [children])]);
+    }
+
+    function toggleSelect(key) {
+      return isSelected(key) ? deselect(key) : select(key);
+    }
+
+    function defaultItemSlot(payload) {
+      const {
+        key,
+        item,
+        selected
+      } = payload;
+      const headers = headersRef.value; // const { $scopedSlots, $createElement, deletor } = this;
+
+      const children = headers.map(header => {
+        const {
+          cell,
+          align,
+          key: headerKey
+        } = header;
+        const cellSlot = cell || ctx.slots.cell;
+        let cellChildren;
+
+        if (cellSlot) {
+          const cellPayload = {
+            vui,
+            item,
+            selected
+          };
+
+          let _children = cellSlot(cellPayload);
+
+          if (_children && !Array.isArray(_children) && typeof _children === 'object') {
+            _children = JSON.stringify(_children);
+          }
+
+          cellChildren = _children;
+        }
+
+        if (!cellChildren) {
+          switch (headerKey) {
+            case SELECTABLE_HEADER_SYMBOL:
+              {
+                cellChildren = [vue.createVNode(VCheckbox, {
+                  "modelValue": selected,
+                  "onChange": ev => {
+                    toggleSelect(key);
+                  }
+                }, null)];
+                break;
+              }
+            // case DELETOR_HEADER_SYMBOL: {
+            //   if (deletor) {
+            //     const onClick = async (event: MouseEvent) => {
+            //       if (
+            //         await this.$confirm(`${key}を削除します。よろしいですか？`)
+            //       ) {
+            //         this.deletingTargets.push(key);
+            //         await deletor(item);
+            //         this.deletingTargets.splice(
+            //           this.deletingTargets.indexOf(key),
+            //           1,
+            //         );
+            //       }
+            //     };
+            //     cellChildren = [
+            //       <VBtn
+            //         icon="trush"
+            //         onClick={onClick}
+            //         disabled={this.deletingTargets.includes(key)}
+            //       />,
+            //     ];
+            //   }
+            //   break;
+            // }
+          }
+        }
+
+        const classes = align ? {
+          [`v-data-table__table__cell--${align}`]: true
+        } : undefined;
+        return vue.createVNode("td", {
+          "class": ['v-data-table__table__cell', classes],
+          "key": header.key
+        }, [cellChildren]);
+      });
+      return vue.createVNode("tr", {
+        "class": ['v-data-table__table__item', {
+          'v-data-table__table__item--selected': selected
+        }],
+        "key": key
+      }, [children]);
+    }
+
+    function genBody() {
+      const {
+        items,
+        itemKey
+      } = props;
+      const {
+        item: itemSlot = defaultItemSlot
+      } = ctx.slots;
+      const children = items.map(item => {
+        const key = item[itemKey];
+        const payload = {
+          key,
+          item,
+          selected: isSelected(key)
+        };
+        return itemSlot(payload);
+      });
+      return vue.createVNode("tbody", {
+        "class": "v-data-table__table__body"
+      }, [children]);
+    }
+
+    vue.watch(() => props.modelValue, modelValue => {
+      internalValues.value = modelValue.slice();
+    });
+    vue.watch(() => props.items, items => {
+      internalValues.value = internalValues.value.filter(key => {
+        return sortedItemKeysRef.value.includes(key);
+      });
+    });
+    vue.onMounted(() => {
+      bootedRef.value = true;
+    });
+    return () => {
+      const isEmpty = isEmptyRef.value;
+      const usePaiging = usePaigingRef.value;
+      return vue.createVNode("div", {
+        "class": ['v-data-table', classesRef.value]
+      }, [!isEmpty && usePaiging && needShowHeaderControlRef.value && vue.createVNode("div", {
+        "class": "v-data-table__header"
+      }, [genControls()]), vue.createVNode("div", {
+        "class": "v-data-table__body container-pull"
+      }, [isEmpty ? vue.createVNode("div", {
+        "class": "v-data-table__empty--message"
+      }, null) : vue.createVNode(VPaper, {
+        "class": "v-data-table__body__inner",
+        "style": bodyInnerStylesRef.value
+      }, {
+        default: () => [vue.createVNode("div", {
+          "class": "v-data-table__table-wrapper"
+        }, [vue.createVNode("table", {
+          "class": "v-data-table__table"
+        }, [genTableHeader(), genBody()])])]
+      }), vue.createVNode(vue.Transition, {
+        "name": "fade"
+      }, {
+        default: () => [isTransitioningRef.value && vue.createVNode("div", {
+          "class": "v-data-table__loading"
+        }, [vue.createVNode(vueLoading.VProgressCircular, {
+          "indeterminate": true
+        }, null)])]
+      })]), !isEmpty && usePaiging && vue.withDirectives(vue.createVNode("div", {
+        "class": "v-data-table__footer"
+      }, [genControls()]), [vueUtils.resizeDirectiveArgument(({
+        height
+      }) => {
+        footerHeightRef.value = height;
+      })])]);
+    };
+  }
+
+});
+
+function _isSlot$2(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+
+const VApp = vue.defineComponent({
+  name: 'VApp',
+
+  setup(props, ctx) {
+    vueKit.useInjectTheme();
+    return () => {
+      let _slot;
+
+      return vue.createVNode(vueKit.VStackRoot, null, _isSlot$2(_slot = vueKit.renderSlotOrEmpty(ctx.slots, 'default')) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+  }
+
+});
+
+const VToolbar = vue.defineComponent({
+  name: 'VToolbar',
+  props: { ...createElevationProps(),
+    ...vueColorScheme.colorSchemeProps(),
+    dense: Boolean
+  },
+
+  setup(props, ctx) {
+    const vui = useVui();
+    const elevation = useElevation(props, {
+      defaultValue: 4
+    });
+    const dense = vue.computed(() => props.dense);
+    const color = vueColorScheme.useColorClasses({
+      color: () => props.color,
+      variant: () => props.variant || vui.setting('containedVariant')
+    });
+    const classes = vue.computed(() => {
+      return [elevation.elevationClassName.value, color.colorClasses.value, {
+        'v-toolbar--plain': !color.color.value.value,
+        'v-toolbar--dense': dense.value
+      }];
+    });
+    return () => {
+      return vue.createVNode("div", {
+        "class": ['v-toolbar', classes.value]
+      }, [vueUtils.renderSlotOrEmpty(ctx.slots, 'default')]);
+    };
+  }
+
+});
+
+function _isSlot$1(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+
+const VToolbarMenu = vue.defineComponent({
+  name: 'VToolbarMenu',
+  inheritAttrs: false,
+  props: {},
+
+  setup(props, ctx) {
+    const vui = useVui();
+    const plain = vui.setting('plainVariant');
+    return () => {
+      let _slot;
+
+      const variant = props.variant || plain;
+      return vue.createVNode(VButton, vue.mergeProps(ctx.attrs, {
+        "variant": variant,
+        "class": ['v-toolbar-menu']
+      }), _isSlot$1(_slot = vueUtils.renderSlotOrEmpty(ctx.slots)) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+  }
+
+});
+
+const VToolbarEdge = vue.defineComponent({
+  name: 'VToolbarEdge',
+  props: {
+    edge: {
+      type: String,
+      required: true
+    }
+  },
 
   setup(props, ctx) {
     const edge = vue.computed(() => props.edge);
@@ -1807,13 +3348,27 @@ class VuiService {
     autoScrollToElementOffsetTop;
     textareaRows;
     requiredChip;
+    router;
+    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;
         this.textareaRows = textareaRows;
         this.requiredChip = requiredChip;
+        this.router = options.router;
+        this.location = new vueUtils.LocationService({
+            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];
@@ -1897,27 +3452,34 @@ exports.VSnackbar = vueKit.VSnackbar;
 exports.ICON_NAMES = iconFont.ICON_NAMES;
 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;
+exports.VHero = VHero;
 exports.VIcon = VIcon;
 exports.VListTile = VListTile;
 exports.VNavigation = VNavigation;
 exports.VNavigationItem = VNavigationItem;
 exports.VOption = VOption;
 exports.VOptionGroup = VOptionGroup;
+exports.VPagination = VPagination;
 exports.VPaper = VPaper;
 exports.VRadio = VRadio;
 exports.VRadioGroup = VRadioGroup;
 exports.VSelect = VSelect;
 exports.VSwitch = VSwitch;
 exports.VSwitchGroup = VSwitchGroup;
+exports.VTabs = VTabs;
 exports.VTextField = VTextField;
 exports.VTextarea = VTextarea;
 exports.VToolbar = VToolbar;
@@ -1941,6 +3503,7 @@ exports.VuiControlInjectionKey = VuiControlInjectionKey;
 exports.VuiInjectionKey = VuiInjectionKey;
 exports.VuiPlugin = VuiPlugin;
 exports.VuiService = VuiService;
+exports.configureDataTableDefaults = configureDataTableDefaults;
 exports.createCardProps = createCardProps;
 exports.createControlFieldProviderProps = createControlFieldProviderProps;
 exports.createControlProps = createControlProps;
@@ -1953,6 +3516,7 @@ exports.defineFormSelectorComponent = defineFormSelectorComponent;
 exports.iconProps = iconProps;
 exports.installVuiPlugin = installVuiPlugin;
 exports.listTileEmits = listTileEmits;
+exports.paginationProps = paginationProps;
 exports.rawIconProp = rawIconProp;
 exports.renderNavigationItemInput = renderNavigationItemInput;
 exports.resolveNavigationItemInput = resolveNavigationItemInput;