@fastkit/vui 0.6.20 → 0.6.28

package/dist/vui.esm-bundler.js

@@ -1,15 +1,15 @@
 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';
 export * from '@fastkit/vue-kit';
 export { VDialog, VMenu, VSnackbar } from '@fastkit/vue-kit';
-import { inject, computed, provide, defineComponent, createVNode, mergeProps, ref, watch, withDirectives, createTextVNode, isVNode, Fragment, vShow, vModelSelect } from 'vue';
+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 { useScopeColorClass, colorSchemeProps, useColorClasses, toScopeColorClass } from '@fastkit/vue-color-scheme';
-import { createPropsOptions as createPropsOptions$1, defineSlotsProps as defineSlotsProps$1, renderSlotOrEmpty as renderSlotOrEmpty$1, navigationableProps, navigationableEmits, useNavigationable, rawNumberPropType, resolveNumberish, getRouteQuery, resizeDirectiveArgument, getQueryMergedLocation, VExpandTransition } from '@fastkit/vue-utils';
 import { VProgressCircular } from '@fastkit/vue-loading';
 export * from '@fastkit/vue-loading';
 export { ICON_NAMES } from '@fastkit/icon-font';
-import { range, isPromise } from '@fastkit/helpers';
-import { useRouter, useRoute, RouterLink, useLink } from 'vue-router';
-import { VAppContainer } from '@fastkit/vue-app-layout';
+import { isPromise } from '@fastkit/helpers';
+import { useRouter, RouterLink, useLink, useRoute } from 'vue-router';
+import { VAppContainer, VAppLayoutControl } from '@fastkit/vue-app-layout';
 
 const CONTROL_SIZES = ['sm', 'md', 'lg'];
 const CONTROL_FIELD_VARIANTS = ['outlined', 'filled', 'flat'];
@@ -163,7 +163,7 @@ const VFormControl = defineComponent({
         }
       }, [label, control.required && vui.getRequiredChip()]), createVNode("div", {
         "class": "v-form-control__body"
-      }, [renderSlotOrEmpty(ctx.slots, 'default', control), createVNode("div", {
+      }, [renderSlotOrEmpty(ctx.slots, 'default', control), !props.hiddenInfo && createVNode("div", {
         "class": "v-form-control__info"
       }, [!!message && createVNode("div", {
         "class": "v-form-control__message"
@@ -216,6 +216,7 @@ function defineFormSelectorComponent(opts) {
       return 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
         }],
@@ -589,7 +590,6 @@ const VPagination = defineComponent({
     const vui = useVui();
     const elRef = ref(null);
     const router = useRouter();
-    const route = useRoute();
     const internalValue = ref(1);
     const containerWidth = ref(0);
     const itemSize = ref(0);
@@ -610,13 +610,22 @@ const VPagination = defineComponent({
       } = props;
 
       if (routeQuery) {
-        return getRouteQuery(route.query, routeQuery, Number, 1);
+        return vui.location.getQuery(routeQuery, Number, 1);
       }
 
       return internalValue.value;
     });
 
-    const _range = (from, to) => range(to - from, from);
+    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 = computed(() => {
       const maxButtons = computedNumbersLength.value;
@@ -652,10 +661,7 @@ const VPagination = defineComponent({
       const {
         routeQuery
       } = props;
-      if (!routeQuery) return false; // @TODO
-      // return this.$location.isQueryOnlyTransitioning(routeQuery);
-
-      return false;
+      return vui.location.isQueryOnlyTransitioning(routeQuery);
     });
     const isDisabled = computed(() => props.disabled || isTransitioning.value);
     const classes = computed(() => [{
@@ -728,9 +734,9 @@ const VPagination = defineComponent({
     }
 
     function createRoutableLocationByPage(page, routeQuery) {
-      return getQueryMergedLocation({
+      return vui.location.getQueryMergedLocation({
         [routeQuery]: page
-      }, route);
+      });
     }
 
     function genItem(source, index) {
@@ -740,8 +746,7 @@ const VPagination = defineComponent({
         active,
         disabled
       } = createPageInfo(source);
-      const type = number ? 'num' : source; // const staticClass = `pagination__item`;
-
+      const type = number ? 'num' : source;
       const classes = ['v-pagination__item', {
         [`v-pagination__item--${type}`]: true,
         'v-pagination__item--active': active,
@@ -753,11 +758,10 @@ const VPagination = defineComponent({
         }
 
         const isPrev = type === 'prev';
-        const name = isPrev ? 'chevron-left' : 'chevron-right';
-        return createVNode(VIcon, {
-          "class": "v-pagination__item__icon",
-          "name": name
-        }, null);
+        const icon = isPrev ? vui.icon('prev') : vui.icon('next');
+        return resolveRawIconProp(false, icon, {
+          class: 'v-pagination__item__icon'
+        });
       })();
 
       const onClick = ev => {
@@ -1743,6 +1747,7 @@ const VSelect = defineComponent({
       "class": ['v-select', this.classes],
       "label": this.label,
       "hint": this.hint,
+      "hiddenInfo": this.hiddenInfo,
       "onClickLabel": ev => {
         this.focus();
       }
@@ -1769,7 +1774,20 @@ const VSelect = 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,
@@ -1854,6 +1872,7 @@ const VTextField = defineComponent({
     return createVNode(VFormControl, {
       "nodeControl": this.nodeControl,
       "focused": this.nodeControl.focused,
+      "hiddenInfo": this.hiddenInfo,
       "class": ['v-text-field', this.classes],
       "label": this.label,
       "hint": this.hint,
@@ -1917,6 +1936,7 @@ const VTextarea = defineComponent({
       "class": ['v-textarea', this.classes],
       "label": this.label,
       "hint": this.hint,
+      "hiddenInfo": this.hiddenInfo,
       "onClickLabel": ev => {
         this.focus();
       }
@@ -2002,6 +2022,633 @@ const VForm = defineComponent({
 
 });
 
+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 = 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 = ref(false);
+    const footerHeightRef = ref(0);
+    const internalValues = ref(props.modelValue.slice());
+    const sortedItemKeysRef = computed(() => props.items.map(item => item[props.itemKey]));
+    const isEmptyRef = computed(() => props.items.length === 0);
+    const headersRef = 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 = computed(() => [{
+      'v-data-table--fixed-header': props.fixedHeader
+    }]);
+    const layout = VAppLayoutControl.use();
+    const bodyInnerStylesRef = 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 = computed(() => props.defaultOrder === props.ascQueryValue ? props.ascQueryValue : props.descQueryValue);
+    const isTransitioningRef = computed(() => {
+      return vui.location.isQueryOnlyTransitioning([props.pageQuery, props.sortQuery, props.orderQuery, props.limitQuery]);
+    });
+    const pageRef = computed(() => vui.location.getQuery(props.pageQuery, Number, 1));
+    const needShowHeaderControlRef = computed(() => props.items.length > props.contorolThreshold);
+    const sortByRef = computed({
+      get: () => {
+        return vui.location.getQuery(props.sortQuery);
+      },
+
+      set(value) {
+        vui.location.pushQuery({
+          [props.sortQuery]: value || null,
+          [props.pageQuery]: 1
+        });
+      }
+
+    });
+    const ordersRef = computed(() => [props.ascQueryValue, props.descQueryValue]);
+    const usePaigingRef = computed(() => props.limits.length > 0);
+    const orderByRef = 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 = computed(() => (pageRef.value - 1) * limitRef.value);
+    const limitRef = 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 = computed(() => {
+      const {
+        total
+      } = props;
+      const _limit = limitRef.value;
+      if (!total) return 0;
+      return Math.ceil(total / _limit);
+    });
+    const lengthRef = computed(() => props.items.length);
+    const isASCRef = computed(() => orderByRef.value === props.ascQueryValue); // const isDESCRef = computed(() => orderByRef.value === props.descQueryValue);
+
+    const sortIconRef = 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 = computed(() => {
+      const {
+        length
+      } = internalValues.value;
+      return length > 0 && length < sortedItemKeysRef.value.length;
+    });
+    const isAllSelectedRef = 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 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 createVNode("div", {
+        "class": "v-data-table__controls"
+      }, [createVNode("div", {
+        "class": "v-data-table__controls__info"
+      }, [createVNode("small", {
+        "class": "v-data-table__controls__info__length"
+      }, [createTextVNode("\u5168 "), total, createTextVNode(" \u4EF6\u4E2D "), offset + 1, createTextVNode(" \u4EF6 \u301C "), offset + length, createTextVNode(" \u4EF6\u3092\u8868\u793A")])]), createVNode("div", {
+        "class": "v-data-table__controls__select-limit"
+      }, [createVNode("span", {
+        "class": "v-data-table__controls__select-limit__prefix"
+      }, [createTextVNode("1\u30DA\u30FC\u30B8\u306B")]), 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)]), 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(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(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 createVNode("th", {
+          "class": classes,
+          "key": header.key,
+          "tabindex": sortQuery && usePaiging ? 0 : undefined,
+          "onClick": ev => {
+            if (!sortQuery || !usePaiging) return;
+            handleClickSortHeader(header);
+          }
+        }, [createVNode("div", {
+          "class": "v-data-table__table__cell__tile"
+        }, [headerChildren])]);
+      });
+      return createVNode("thead", {
+        "class": "v-data-table__table__header"
+      }, [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 = [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 createVNode("td", {
+          "class": ['v-data-table__table__cell', classes],
+          "key": header.key
+        }, [cellChildren]);
+      });
+      return 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 createVNode("tbody", {
+        "class": "v-data-table__table__body"
+      }, [children]);
+    }
+
+    watch(() => props.modelValue, modelValue => {
+      internalValues.value = modelValue.slice();
+    });
+    watch(() => props.items, items => {
+      internalValues.value = internalValues.value.filter(key => {
+        return sortedItemKeysRef.value.includes(key);
+      });
+    });
+    onMounted(() => {
+      bootedRef.value = true;
+    });
+    return () => {
+      const isEmpty = isEmptyRef.value;
+      const usePaiging = usePaigingRef.value;
+      return createVNode("div", {
+        "class": ['v-data-table', classesRef.value]
+      }, [!isEmpty && usePaiging && needShowHeaderControlRef.value && createVNode("div", {
+        "class": "v-data-table__header"
+      }, [genControls()]), createVNode("div", {
+        "class": "v-data-table__body container-pull"
+      }, [isEmpty ? createVNode("div", {
+        "class": "v-data-table__empty--message"
+      }, null) : createVNode(VPaper, {
+        "class": "v-data-table__body__inner",
+        "style": bodyInnerStylesRef.value
+      }, {
+        default: () => [createVNode("div", {
+          "class": "v-data-table__table-wrapper"
+        }, [createVNode("table", {
+          "class": "v-data-table__table"
+        }, [genTableHeader(), genBody()])])]
+      }), createVNode(Transition, {
+        "name": "fade"
+      }, {
+        default: () => [isTransitioningRef.value && createVNode("div", {
+          "class": "v-data-table__loading"
+        }, [createVNode(VProgressCircular, {
+          "indeterminate": true
+        }, null)])]
+      })]), !isEmpty && usePaiging && withDirectives(createVNode("div", {
+        "class": "v-data-table__footer"
+      }, [genControls()]), [resizeDirectiveArgument(({
+        height
+      }) => {
+        footerHeightRef.value = height;
+      })])]);
+    };
+  }
+
+});
+
 function _isSlot$2(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
@@ -2143,6 +2790,8 @@ class VuiService {
     autoScrollToElementOffsetTop;
     textareaRows;
     requiredChip;
+    router;
+    location;
     constructor(options) {
         this.options = options;
         const { selectionSeparator = () => ', ', autoScrollToElementOffsetTop = DEFAULT_AUTO_SCROLL_TO_ELEMENT_OFFSET_TOP, textareaRows = DEFAULT_TEXTAREA_ROWS, requiredChip = () => '*', } = options;
@@ -2150,6 +2799,10 @@ class VuiService {
         this.autoScrollToElementOffsetTop = autoScrollToElementOffsetTop;
         this.textareaRows = textareaRows;
         this.requiredChip = requiredChip;
+        this.router = options.router;
+        this.location = new LocationService({
+            router: this.router,
+        });
     }
     setting(key) {
         return this.options.uiSettings[key];
@@ -2227,4 +2880,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, 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, 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, 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 };