@vuetify/nightly 3.1.2-next-20230113.0 → 3.1.2

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.1.2-next-20230113.0
+* Vuetify v3.1.2
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -4384,9 +4384,69 @@ const Ripple = {
   updated: updated$1
 };
 
+// Composables
+
+// Types
+
+const oppositeMap = {
+  center: 'center',
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left'
+};
+const makeLocationProps = propsFactory({
+  location: String
+}, 'location');
+function useLocation(props) {
+  let opposite = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  let offset = arguments.length > 2 ? arguments[2] : undefined;
+  const {
+    isRtl
+  } = useRtl();
+  const locationStyles = computed(() => {
+    if (!props.location) return {};
+    const {
+      side,
+      align
+    } = parseAnchor(props.location.split(' ').length > 1 ? props.location : `${props.location} center`, isRtl.value);
+    function getOffset(side) {
+      return offset ? offset(side) : 0;
+    }
+    const styles = {};
+    if (side !== 'center') {
+      if (opposite) styles[oppositeMap[side]] = `calc(100% - ${getOffset(side)}px)`;else styles[side] = 0;
+    }
+    if (align !== 'center') {
+      if (opposite) styles[oppositeMap[align]] = `calc(100% - ${getOffset(align)}px)`;else styles[align] = 0;
+    } else {
+      if (side === 'center') styles.top = styles.left = '50%';else {
+        styles[{
+          top: 'left',
+          bottom: 'left',
+          left: 'top',
+          right: 'top'
+        }[side]] = '50%';
+      }
+      styles.transform = {
+        top: 'translateX(-50%)',
+        bottom: 'translateX(-50%)',
+        left: 'translateY(-50%)',
+        right: 'translateY(-50%)',
+        center: 'translate(-50%, -50%)'
+      }[side];
+    }
+    return styles;
+  });
+  return {
+    locationStyles
+  };
+}
+
 const VProgressLinear = defineComponent({
   name: 'VProgressLinear',
   props: {
+    absolute: Boolean,
     active: {
       type: Boolean,
       default: true
@@ -4416,6 +4476,9 @@ const VProgressLinear = defineComponent({
     stream: Boolean,
     striped: Boolean,
     roundedBar: Boolean,
+    ...makeLocationProps({
+      location: 'top'
+    }),
     ...makeRoundedProps(),
     ...makeTagProps(),
     ...makeThemeProps()
@@ -4434,6 +4497,9 @@ const VProgressLinear = defineComponent({
     const {
       themeClasses
     } = provideTheme(props);
+    const {
+      locationStyles
+    } = useLocation(props);
     const {
       textColorClasses,
       textColorStyles
@@ -4475,6 +4541,7 @@ const VProgressLinear = defineComponent({
     useRender(() => createVNode(props.tag, {
       "ref": intersectionRef,
       "class": ['v-progress-linear', {
+        'v-progress-linear--absolute': props.absolute,
         'v-progress-linear--active': props.active && isIntersecting.value,
         'v-progress-linear--reverse': isReversed.value,
         'v-progress-linear--rounded': props.rounded,
@@ -4482,8 +4549,11 @@ const VProgressLinear = defineComponent({
         'v-progress-linear--striped': props.striped
       }, roundedClasses.value, themeClasses.value],
       "style": {
+        bottom: props.location === 'bottom' ? 0 : undefined,
+        top: props.location === 'top' ? 0 : undefined,
         height: props.active ? convertToUnit(height.value) : 0,
-        '--v-progress-linear-height': convertToUnit(height.value)
+        '--v-progress-linear-height': convertToUnit(height.value),
+        ...locationStyles.value
       },
       "role": "progressbar",
       "aria-hidden": props.active ? 'false' : 'true',
@@ -4569,65 +4639,6 @@ function LoaderSlot(props, _ref) {
   }, null)]);
 }
 
-// Composables
-
-// Types
-
-const oppositeMap = {
-  center: 'center',
-  top: 'bottom',
-  bottom: 'top',
-  left: 'right',
-  right: 'left'
-};
-const makeLocationProps = propsFactory({
-  location: String
-}, 'location');
-function useLocation(props) {
-  let opposite = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  let offset = arguments.length > 2 ? arguments[2] : undefined;
-  const {
-    isRtl
-  } = useRtl();
-  const locationStyles = computed(() => {
-    if (!props.location) return {};
-    const {
-      side,
-      align
-    } = parseAnchor(props.location.split(' ').length > 1 ? props.location : `${props.location} center`, isRtl.value);
-    function getOffset(side) {
-      return offset ? offset(side) : 0;
-    }
-    const styles = {};
-    if (side !== 'center') {
-      if (opposite) styles[oppositeMap[side]] = `calc(100% - ${getOffset(side)}px)`;else styles[side] = 0;
-    }
-    if (align !== 'center') {
-      if (opposite) styles[oppositeMap[align]] = `calc(100% - ${getOffset(align)}px)`;else styles[align] = 0;
-    } else {
-      if (side === 'center') styles.top = styles.left = '50%';else {
-        styles[{
-          top: 'left',
-          bottom: 'left',
-          left: 'top',
-          right: 'top'
-        }[side]] = '50%';
-      }
-      styles.transform = {
-        top: 'translateX(-50%)',
-        bottom: 'translateX(-50%)',
-        left: 'translateY(-50%)',
-        right: 'translateY(-50%)',
-        center: 'translate(-50%, -50%)'
-      }[side];
-    }
-    return styles;
-  });
-  return {
-    locationStyles
-  };
-}
-
 // Utilities
 
 // Types
@@ -4833,8 +4844,14 @@ const VBtn = defineComponent({
     const group = useGroupItem(props, props.symbol, false);
     const link = useLink(props, attrs);
     const isActive = computed(() => {
-      var _link$isActive;
-      return props.active !== false && (props.active || ((_link$isActive = link.isActive) == null ? void 0 : _link$isActive.value) || (group == null ? void 0 : group.isSelected.value));
+      if (props.active !== undefined) {
+        return props.active;
+      }
+      if (link.isLink.value) {
+        var _link$isActive;
+        return (_link$isActive = link.isActive) == null ? void 0 : _link$isActive.value;
+      }
+      return group == null ? void 0 : group.isSelected.value;
     });
     const isDisabled = computed(() => (group == null ? void 0 : group.disabled.value) || props.disabled);
     const isElevated = computed(() => {
@@ -4844,7 +4861,7 @@ const VBtn = defineComponent({
     useRender(() => {
       var _slots$prepend, _slots$default, _slots$append, _slots$loader;
       const Tag = link.isLink.value ? 'a' : props.tag;
-      const hasColor = !group || group.isSelected.value;
+      const hasColor = !group || isActive.value;
       const hasPrepend = !!(props.prependIcon || slots.prepend);
       const hasAppend = !!(props.appendIcon || slots.append);
       const hasIcon = !!(props.icon && props.icon !== true);
@@ -7579,6 +7596,10 @@ const VListItem = genericComponent()({
     nav: Boolean,
     prependAvatar: String,
     prependIcon: IconValue,
+    ripple: {
+      type: Boolean,
+      default: true
+    },
     subtitle: [String, Number, Boolean],
     title: [String, Number, Boolean],
     value: null,
@@ -7770,7 +7791,7 @@ const VListItem = genericComponent()({
             "key": "append-avatar"
           }, null)])]
         })]
-      }), [[resolveDirective("ripple"), isClickable.value]]);
+      }), [[resolveDirective("ripple"), isClickable.value && props.ripple]]);
     });
     return {};
   }
@@ -9938,6 +9959,7 @@ const VSelect = genericComponent()({
             "activator": "parent",
             "contentClass": "v-select__content",
             "eager": props.eager,
+            "maxHeight": 310,
             "openOnClick": false,
             "closeOnContentClick": false,
             "transition": props.transition
@@ -10053,7 +10075,7 @@ function filterItems(items, query, options) {
   const customFiltersLength = Object.keys((options == null ? void 0 : options.customKeyFilter) ?? {}).length;
   if (!(items != null && items.length)) return array;
   loop: for (let i = 0; i < items.length; i++) {
-    const item = items[i].raw;
+    const item = items[i];
     const customMatches = {};
     const defaultMatches = {};
     let match = -1;
@@ -10093,7 +10115,7 @@ function filterItems(items, query, options) {
   }
   return array;
 }
-function useFilter(props, items, query) {
+function useFilter(props, items, query, options) {
   const strQuery = computed(() => typeof (query == null ? void 0 : query.value) !== 'string' && typeof (query == null ? void 0 : query.value) !== 'number' ? '' : String(query.value));
   const filteredItems = ref([]);
   const filteredMatches = ref(new Map());
@@ -10104,7 +10126,7 @@ function useFilter(props, items, query) {
     const results = filterItems(transformedItems, strQuery.value, {
       customKeyFilter: props.customKeyFilter,
       default: props.customFilter,
-      filterKeys: props.filterKeys,
+      filterKeys: unref(options == null ? void 0 : options.filterKeys) ?? props.filterKeys,
       filterMode: props.filterMode,
       noFilter: props.noFilter
     });
@@ -10327,6 +10349,7 @@ const VAutocomplete = genericComponent()({
             "activator": "parent",
             "contentClass": "v-autocomplete__content",
             "eager": props.eager,
+            "maxHeight": 310,
             "openOnClick": false,
             "closeOnContentClick": false,
             "transition": props.transition,
@@ -11035,7 +11058,10 @@ const VCard = defineComponent({
     },
     prependAvatar: String,
     prependIcon: IconValue,
-    ripple: Boolean,
+    ripple: {
+      type: Boolean,
+      default: true
+    },
     subtitle: String,
     text: String,
     title: String,
@@ -11156,7 +11182,7 @@ const VCard = defineComponent({
         }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), slots.actions && createVNode(VCardActions, null, {
           default: slots.actions
         }), genOverlays(isClickable.value, 'v-card')]
-      }), [[resolveDirective("ripple"), isClickable.value]]);
+      }), [[resolveDirective("ripple"), isClickable.value && props.ripple]]);
     });
     return {};
   }
@@ -12449,6 +12475,10 @@ const VSliderThumb = defineComponent({
     position: {
       type: Number,
       required: true
+    },
+    ripple: {
+      type: Boolean,
+      default: true
     }
   },
   emits: {
@@ -12549,7 +12579,7 @@ const VSliderThumb = defineComponent({
       }, null), withDirectives(createVNode("div", {
         "class": ['v-slider-thumb__ripple', textColorClasses.value],
         "style": textColorStyles.value
-      }, null), [[resolveDirective("ripple"), true, null, {
+      }, null), [[resolveDirective("ripple"), props.ripple, null, {
         circle: true,
         center: true
       }]]), createVNode(VScaleTransition, {
@@ -13601,7 +13631,7 @@ const VCombobox = genericComponent()({
           vTextFieldRef.value.setSelectionRange(0, 0);
         }
       }
-      if (e.key === 'Enter') {
+      if (e.key === 'Enter' && search.value) {
         select(transformItem$1(props, search.value));
         search.value = '';
       }
@@ -13690,6 +13720,7 @@ const VCombobox = genericComponent()({
             "activator": "parent",
             "contentClass": "v-combobox__content",
             "eager": props.eager,
+            "maxHeight": 310,
             "openOnClick": false,
             "closeOnContentClick": false,
             "transition": props.transition,
@@ -18519,9 +18550,13 @@ function createGroupBy(props, groupBy, sortBy) {
       order: val.order ?? false
     })).concat(sortBy.value);
   });
-  function toggleGroup(group, value) {
-    const open = value == null ? !opened.value.has(group) : value;
-    if (open) opened.value.add(group);else opened.value.delete(group);
+  function isGroupOpen(group) {
+    return opened.value.has(group.id);
+  }
+  function toggleGroup(group) {
+    const newOpened = new Set(opened.value);
+    if (!isGroupOpen(group)) newOpened.add(group.id);else newOpened.delete(group.id);
+    opened.value = newOpened;
   }
   function extractRows(items) {
     function dive(group) {
@@ -18554,7 +18589,8 @@ function createGroupBy(props, groupBy, sortBy) {
     toggleGroup,
     opened,
     groupBy,
-    extractRows
+    extractRows,
+    isGroupOpen
   };
   provide(VDataTableGroupSymbol, data);
   return data;
@@ -18640,7 +18676,7 @@ const VDataTableGroupHeaderRow = defineComponent({
       slots
     } = _ref;
     const {
-      opened,
+      isGroupOpen,
       toggleGroup,
       extractRows
     } = useGroupBy();
@@ -18663,8 +18699,8 @@ const VDataTableGroupHeaderRow = defineComponent({
     }, [columns.value.map(column => {
       if (column.key === 'data-table-group') {
         var _slots$dataTableGro;
-        const icon = opened.value.has(props.item.id) ? '$expand' : '$next';
-        const onClick = () => toggleGroup(props.item.id);
+        const icon = isGroupOpen(props.item) ? '$expand' : '$next';
+        const onClick = () => toggleGroup(props.item);
         return ((_slots$dataTableGro = slots['data-table-group']) == null ? void 0 : _slots$dataTableGro.call(slots, {
           item: props.item,
           count: rows.value.length,
@@ -18857,10 +18893,18 @@ const VDataTableRows = defineComponent({
       columns
     } = useHeaders();
     const {
-      expanded,
-      expand,
-      expandOnClick
+      expandOnClick,
+      toggleExpand,
+      isExpanded
     } = useExpanded();
+    const {
+      isSelected,
+      toggleSelect
+    } = useSelection();
+    const {
+      toggleGroup,
+      isGroupOpen
+    } = useGroupBy();
     const {
       t
     } = useLocale();
@@ -18879,23 +18923,41 @@ const VDataTableRows = defineComponent({
       })), props.items.map((item, index) => {
         var _slots$expandedRow;
         if (item.type === 'group-header') {
-          return createVNode(VDataTableGroupHeaderRow, {
+          return slots['group-header'] ? slots['group-header']({
+            index,
+            item,
+            columns: columns.value,
+            isExpanded,
+            toggleExpand,
+            isSelected,
+            toggleSelect,
+            toggleGroup,
+            isGroupOpen
+          }) : createVNode(VDataTableGroupHeaderRow, {
             "key": `group-header_${item.id}`,
             "item": item
           }, slots);
         }
-        return createVNode(Fragment, null, [createVNode(VDataTableRow, {
+        return createVNode(Fragment, null, [slots.item ? slots.item({
+          index,
+          item,
+          columns: columns.value,
+          isExpanded,
+          toggleExpand,
+          isSelected,
+          toggleSelect
+        }) : createVNode(VDataTableRow, {
           "key": `item_${item.value}`,
           "onClick": event => {
             if (expandOnClick.value) {
-              expand(item, !expanded.value.has(item.value));
+              toggleExpand(item.value);
             }
             emit('click:row', event, {
               item
             });
           },
           "item": item
-        }, slots), expanded.value.has(item.value) && ((_slots$expandedRow = slots['expanded-row']) == null ? void 0 : _slots$expandedRow.call(slots, {
+        }, slots), isExpanded(item.value) && ((_slots$expandedRow = slots['expanded-row']) == null ? void 0 : _slots$expandedRow.call(slots, {
           item,
           columns: columns.value
         }))]);
@@ -19193,9 +19255,12 @@ const VDataTable = defineComponent({
     const {
       items
     } = useDataTableItems(props, columns);
+    const filterKeys = computed(() => columns.value.map(c => 'columns.' + c.key));
     const {
       filteredItems
-    } = useFilter(props, items, toRef(props, 'search'));
+    } = useFilter(props, items, toRef(props, 'search'), {
+      filterKeys
+    });
     const {
       sortBy
     } = createSort(props);
@@ -19385,9 +19450,12 @@ const VDataTableVirtual = defineComponent({
     const {
       items
     } = useDataTableItems(props, columns);
+    const filterKeys = computed(() => columns.value.map(c => 'columns.' + c.key));
     const {
       filteredItems
-    } = useFilter(props, items, toRef(props, 'search'));
+    } = useFilter(props, items, toRef(props, 'search'), {
+      filterKeys
+    });
     const {
       sortBy
     } = createSort(props);
@@ -20085,7 +20153,7 @@ function createVuetify$1() {
     locale
   };
 }
-const version$1 = "3.1.2-next-20230113.0";
+const version$1 = "3.1.2";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -20098,7 +20166,7 @@ function inject(key) {
   }
 }
 
-const version = "3.1.2-next-20230113.0";
+const version = "3.1.2";
 
 const createVuetify = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};