@vuetify/nightly 3.0.0-beta.0 → 3.0.0-beta.10

package/lib/components/VAutocomplete/VAutocomplete.mjs

@@ -1,8 +1,9 @@
-import { createTextVNode as _createTextVNode, createVNode as _createVNode, Fragment as _Fragment } from "vue";
+import { createTextVNode as _createTextVNode, mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
 // Styles
 import "./VAutocomplete.css"; // Components
 
-import { genItem, makeSelectProps } from "../VSelect/VSelect.mjs";
+import { makeSelectProps } from "../VSelect/VSelect.mjs";
+import { VCheckboxBtn } from "../VCheckbox/index.mjs";
 import { VChip } from "../VChip/index.mjs";
 import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
 import { VList, VListItem } from "../VList/index.mjs";
@@ -11,11 +12,12 @@ import { VTextField } from "../VTextField/index.mjs"; // Composables
 
 import { makeFilterProps, useFilter } from "../../composables/filter.mjs";
 import { makeTransitionProps } from "../../composables/transition.mjs";
-import { useForwardRef } from "../../composables/forwardRef.mjs";
+import { forwardRefs } from "../../composables/forwardRefs.mjs";
+import { useItems } from "../../composables/items.mjs";
 import { useLocale } from "../../composables/locale.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utility
 
-import { computed, nextTick, ref, watch } from 'vue';
+import { computed, mergeProps, nextTick, ref, watch } from 'vue';
 import { genericComponent, useRender, wrapInArray } from "../../util/index.mjs"; // Types
 
 function highlightResult(text, matches, length) {
@@ -44,9 +46,9 @@ export const VAutocomplete = genericComponent()({
     })
   },
   emits: {
-    'click:clear': e => true,
     'update:search': val => true,
-    'update:modelValue': val => true
+    'update:modelValue': val => true,
+    'update:menu': val => true
   },
 
   setup(props, _ref) {
@@ -57,35 +59,28 @@ export const VAutocomplete = genericComponent()({
       t
     } = useLocale();
     const vTextFieldRef = ref();
-    const activator = ref();
     const isFocused = ref(false);
     const isPristine = ref(true);
-    const menu = ref(false);
-    const items = computed(() => props.items.map(genItem));
+    const menu = useProxiedModel(props, 'menu');
+    const {
+      items,
+      transformIn,
+      transformOut
+    } = useItems(props);
     const search = useProxiedModel(props, 'search', '');
-    const model = useProxiedModel(props, 'modelValue', [], v => wrapInArray(v || []), v => props.multiple ? v : v[0]);
+    const model = useProxiedModel(props, 'modelValue', [], v => transformIn(wrapInArray(v)), v => {
+      const transformed = transformOut(v);
+      return props.multiple ? transformed : transformed[0] ?? null;
+    });
     const {
       filteredItems
     } = useFilter(props, items, computed(() => isPristine.value ? undefined : search.value));
     const selections = computed(() => {
-      const array = [];
-      let index = 0;
-
-      for (const unwrapped of model.value) {
-        const item = genItem(unwrapped);
-        const found = array.find(selection => selection.value === item.value);
-
-        if (found == null) {
-          array.push({ ...item,
-            index
-          });
-          index++;
-        }
-      }
-
-      return array;
+      return model.value.map(v => {
+        return items.value.find(item => item.value === v.value) || v;
+      });
     });
-    const selected = computed(() => selections.value.map(selection => selection.value));
+    const selected = computed(() => selections.value.map(selection => selection.props.value));
 
     function onClear(e) {
       model.value = [];
@@ -98,11 +93,13 @@ export const VAutocomplete = genericComponent()({
     }
 
     function onClickControl() {
-      if (props.hideNoData && !filteredItems.value.length) return;
+      if (props.hideNoData && !items.value.length || props.readonly) return;
       menu.value = true;
     }
 
     function onKeydown(e) {
+      if (props.readonly) return;
+
       if (['Enter', 'ArrowDown'].includes(e.key)) {
         menu.value = true;
       }
@@ -116,6 +113,10 @@ export const VAutocomplete = genericComponent()({
       }
     }
 
+    function onInput(e) {
+      search.value = e.target.value;
+    }
+
     function onAfterLeave() {
       if (isFocused.value) isPristine.value = true;
     }
@@ -124,15 +125,18 @@ export const VAutocomplete = genericComponent()({
 
     function select(item) {
       if (props.multiple) {
-        const index = selections.value.findIndex(selection => selection.value === item.value);
+        const index = selected.value.findIndex(selection => selection === item.value);
 
         if (index === -1) {
-          model.value.push(item.value);
+          model.value = [...model.value, item];
+          search.value = '';
         } else {
-          model.value = selected.value.filter(selection => selection !== item.value);
+          const value = [...model.value];
+          value.splice(index, 1);
+          model.value = value;
         }
       } else {
-        model.value = [item.value];
+        model.value = [item];
         isSelecting.value = true;
         search.value = item.title;
         menu.value = false;
@@ -141,15 +145,12 @@ export const VAutocomplete = genericComponent()({
       }
     }
 
-    watch(() => vTextFieldRef.value, val => {
-      activator.value = val.$el.querySelector('.v-input__control');
-    });
     watch(isFocused, val => {
       if (val) {
-        var _model$value;
+        var _selections$value$at;
 
         isSelecting.value = true;
-        search.value = props.multiple ? '' : String((_model$value = model.value) != null ? _model$value : '');
+        search.value = props.multiple ? '' : String(((_selections$value$at = selections.value.at(-1)) == null ? void 0 : _selections$value$at.props.title) ?? '');
         isPristine.value = true;
         nextTick(() => isSelecting.value = false);
       } else {
@@ -167,14 +168,19 @@ export const VAutocomplete = genericComponent()({
       return _createVNode(VTextField, {
         "ref": vTextFieldRef,
         "modelValue": search.value,
-        "onUpdate:modelValue": $event => search.value = $event,
+        "onUpdate:modelValue": v => {
+          if (v == null) model.value = [];
+        },
+        "validationValue": props.modelValue ?? model.value,
+        "dirty": model.value.length > 0,
+        "onInput": onInput,
         "class": ['v-autocomplete', {
           'v-autocomplete--active-menu': menu.value,
           'v-autocomplete--chips': !!props.chips,
           [`v-autocomplete--${props.multiple ? 'multiple' : 'single'}`]: true
         }],
         "appendInnerIcon": props.menuIcon,
-        "dirty": selected.value.length > 0,
+        "readonly": props.readonly,
         "onClick:clear": onClear,
         "onClick:control": onClickControl,
         "onClick:input": onClickControl,
@@ -182,78 +188,109 @@ export const VAutocomplete = genericComponent()({
         "onBlur": () => isFocused.value = false,
         "onKeydown": onKeydown
       }, { ...slots,
-        default: () => _createVNode(_Fragment, null, [activator.value && _createVNode(VMenu, {
-          "modelValue": menu.value,
-          "onUpdate:modelValue": $event => menu.value = $event,
-          "activator": activator.value,
-          "contentClass": "v-autocomplete__content",
-          "eager": props.eager,
-          "openOnClick": false,
-          "transition": props.transition,
-          "onAfterLeave": onAfterLeave
-        }, {
-          default: () => [_createVNode(VList, {
-            "selected": selected.value,
-            "selectStrategy": props.multiple ? 'independent' : 'single-independent'
-          }, {
-            default: () => [!filteredItems.value.length && !props.hideNoData && _createVNode(VListItem, {
-              "title": t(props.noDataText)
-            }, null), filteredItems.value.map(_ref2 => {
-              let {
-                item,
-                matches
-              } = _ref2;
-              return _createVNode(VListItem, {
-                "value": item.value,
-                "onMousedown": e => e.preventDefault(),
-                "onClick": () => select(item)
-              }, {
-                title: () => {
-                  var _search$value$length, _search$value;
+        default: () => {
+          var _slots$noData;
 
-                  return isPristine.value ? item.title : highlightResult(item.title, matches.title, (_search$value$length = (_search$value = search.value) == null ? void 0 : _search$value.length) != null ? _search$value$length : 0);
-                }
-              });
+          return _createVNode(_Fragment, null, [_createVNode(VMenu, _mergeProps({
+            "modelValue": menu.value,
+            "onUpdate:modelValue": $event => menu.value = $event,
+            "activator": "parent",
+            "contentClass": "v-autocomplete__content",
+            "eager": props.eager,
+            "openOnClick": false,
+            "closeOnContentClick": false,
+            "transition": props.transition,
+            "onAfterLeave": onAfterLeave
+          }, props.menuProps), {
+            default: () => [_createVNode(VList, {
+              "selected": selected.value,
+              "selectStrategy": props.multiple ? 'independent' : 'single-independent',
+              "onMousedown": e => e.preventDefault()
+            }, {
+              default: () => [!filteredItems.value.length && !props.hideNoData && (((_slots$noData = slots['no-data']) == null ? void 0 : _slots$noData.call(slots)) ?? _createVNode(VListItem, {
+                "title": t(props.noDataText)
+              }, null)), filteredItems.value.map((_ref2, index) => {
+                var _slots$item;
+
+                let {
+                  item,
+                  matches
+                } = _ref2;
+                return ((_slots$item = slots.item) == null ? void 0 : _slots$item.call(slots, {
+                  item,
+                  index,
+                  props: mergeProps(item.props, {
+                    onClick: () => select(item)
+                  })
+                })) ?? _createVNode(VListItem, _mergeProps({
+                  "key": index
+                }, item.props, {
+                  "onClick": () => select(item)
+                }), {
+                  prepend: _ref3 => {
+                    let {
+                      isSelected
+                    } = _ref3;
+                    return props.multiple && !props.hideSelected ? _createVNode(VCheckboxBtn, {
+                      "modelValue": isSelected,
+                      "ripple": false
+                    }, null) : undefined;
+                  },
+                  title: () => {
+                    var _search$value;
+
+                    return isPristine.value ? item.title : highlightResult(item.title, matches.title, ((_search$value = search.value) == null ? void 0 : _search$value.length) ?? 0);
+                  }
+                });
+              })]
             })]
-          })]
-        }), selections.value.map((selection, index) => {
-          function onChipClose(e) {
-            e.stopPropagation();
-            e.preventDefault();
-            select(selection);
-          }
+          }), selections.value.map((item, index) => {
+            function onChipClose(e) {
+              e.stopPropagation();
+              e.preventDefault();
+              select(item);
+            }
 
-          const slotProps = {
-            'onClick:close': onChipClose,
-            modelValue: true
-          };
-          return _createVNode("div", {
-            "class": "v-autocomplete__selection"
-          }, [hasChips && _createVNode(VDefaultsProvider, {
-            "defaults": {
-              VChip: {
-                closable: props.closableChips,
-                size: 'small',
-                text: selection.title
+            const slotProps = {
+              'onClick:close': onChipClose,
+              modelValue: true
+            };
+            return _createVNode("div", {
+              "key": index,
+              "class": "v-autocomplete__selection"
+            }, [hasChips ? _createVNode(VDefaultsProvider, {
+              "defaults": {
+                VChip: {
+                  closable: props.closableChips,
+                  size: 'small',
+                  text: item.title
+                }
               }
-            }
-          }, {
-            default: () => [slots.chip ? slots.chip({
-              props: slotProps,
-              selection
-            }) : _createVNode(VChip, slotProps, null)]
-          }), !hasChips && (slots.selection ? slots.selection({
-            selection
-          }) : _createVNode("span", {
-            "class": "v-autocomplete__selection-text"
-          }, [selection.title, props.multiple && index < selections.value.length - 1 && _createVNode("span", {
-            "class": "v-autocomplete__selection-comma"
-          }, [_createTextVNode(",")])]))]);
-        })])
+            }, {
+              default: () => [slots.chip ? slots.chip({
+                item,
+                index,
+                props: slotProps
+              }) : _createVNode(VChip, slotProps, null)]
+            }) : slots.selection ? slots.selection({
+              item,
+              index
+            }) : _createVNode("span", {
+              "class": "v-autocomplete__selection-text"
+            }, [item.title, props.multiple && index < selections.value.length - 1 && _createVNode("span", {
+              "class": "v-autocomplete__selection-comma"
+            }, [_createTextVNode(",")])])]);
+          })]);
+        }
       });
     });
-    return useForwardRef({
-      filteredItems
+    return forwardRefs({
+      isFocused,
+      isPristine,
+      menu,
+      search,
+      filteredItems,
+      select
     }, vTextFieldRef);
   }
 

package/lib/components/VAutocomplete/VAutocomplete.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VAutocomplete/VAutocomplete.tsx"],"names":["genItem","makeSelectProps","VChip","VDefaultsProvider","VList","VListItem","VMenu","VTextField","makeFilterProps","useFilter","makeTransitionProps","useForwardRef","useLocale","useProxiedModel","computed","nextTick","ref","watch","genericComponent","useRender","wrapInArray","highlightResult","text","matches","length","Array","isArray","Error","substr","VAutocomplete","name","props","search","String","filterKeys","transition","emits","e","val","setup","slots","t","vTextFieldRef","activator","isFocused","isPristine","menu","items","map","model","v","multiple","filteredItems","value","undefined","selections","array","index","unwrapped","item","found","find","selection","push","selected","onClear","openOnClear","onClickControl","hideNoData","onKeydown","includes","key","onAfterLeave","isSelecting","select","findIndex","filter","title","$el","querySelector","hasChips","chips","chip","menuIcon","default","eager","noDataText","preventDefault","onChipClose","stopPropagation","slotProps","modelValue","closable","closableChips","size"],"mappings":"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","sourcesContent":["// Styles\nimport './VAutocomplete.sass'\n\n// Components\nimport { genItem, makeSelectProps } from '@/components/VSelect/VSelect'\nimport { VChip } from '@/components/VChip'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VList, VListItem } from '@/components/VList'\nimport { VMenu } from '@/components/VMenu'\nimport { VTextField } from '@/components/VTextField'\n\n// Composables\nimport { makeFilterProps, useFilter } from '@/composables/filter'\nimport { makeTransitionProps } from '@/composables/transition'\nimport { useForwardRef } from '@/composables/forwardRef'\nimport { useLocale } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utility\nimport { computed, nextTick, ref, watch } from 'vue'\nimport { genericComponent, useRender, wrapInArray } from '@/util'\n\n// Types\nimport type { FilterMatch } from '@/composables/filter'\nimport type { DefaultChipSlot, InternalSelectItem } from '@/components/VSelect/VSelect'\nimport type { MakeSlots } from '@/util'\n\nexport interface InternalAutocompleteItem extends InternalSelectItem {\n\n}\n\nexport interface DefaultAutocompleteSlot {\n  selection: InternalAutocompleteItem\n}\n\nfunction highlightResult (text: string, matches: FilterMatch, length: number) {\n  if (Array.isArray(matches)) throw new Error('Multiple matches is not implemented')\n\n  return typeof matches === 'number' && ~matches\n    ? (\n      <>\n        <span class=\"v-autocomplete__unmask\">{ text.substr(0, matches) }</span>\n        <span class=\"v-autocomplete__mask\">{ text.substr(matches, length) }</span>\n        <span class=\"v-autocomplete__unmask\">{ text.substr(matches + length) }</span>\n      </>\n    )\n    : text\n}\n\nexport const VAutocomplete = genericComponent<new <T>() => {\n  $slots: MakeSlots<{\n    chip: [DefaultChipSlot]\n    default: []\n    selection: [DefaultAutocompleteSlot]\n  }>\n}>()({\n  name: 'VAutocomplete',\n\n  props: {\n    // TODO: implement post keyboard support\n    // autoSelectFirst: Boolean,\n    search: String,\n\n    ...makeFilterProps({ filterKeys: ['title'] }),\n    ...makeSelectProps(),\n    ...makeTransitionProps({ transition: false }),\n  },\n\n  emits: {\n    'click:clear': (e: MouseEvent) => true,\n    'update:search': (val: any) => true,\n    'update:modelValue': (val: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const { t } = useLocale()\n    const vTextFieldRef = ref()\n    const activator = ref()\n    const isFocused = ref(false)\n    const isPristine = ref(true)\n    const menu = ref(false)\n    const items = computed(() => props.items.map(genItem))\n    const search = useProxiedModel(props, 'search', '')\n    const model = useProxiedModel(\n      props,\n      'modelValue',\n      [],\n      v => wrapInArray(v || []),\n      (v: any) => props.multiple ? v : v[0]\n    )\n    const { filteredItems } = useFilter(props, items, computed(() => isPristine.value ? undefined : search.value))\n    const selections = computed(() => {\n      const array: InternalSelectItem[] = []\n      let index = 0\n      for (const unwrapped of model.value) {\n        const item = genItem(unwrapped)\n\n        const found = array.find(selection => selection.value === item.value)\n\n        if (found == null) {\n          array.push({\n            ...item,\n            index,\n          })\n\n          index++\n        }\n      }\n\n      return array\n    })\n    const selected = computed(() => selections.value.map(selection => selection.value))\n\n    function onClear (e: MouseEvent) {\n      model.value = []\n\n      if (props.openOnClear) {\n        menu.value = true\n      }\n\n      search.value = ''\n    }\n    function onClickControl () {\n      if (props.hideNoData && !filteredItems.value.length) return\n\n      menu.value = true\n    }\n    function onKeydown (e: KeyboardEvent) {\n      if (['Enter', 'ArrowDown'].includes(e.key)) {\n        menu.value = true\n      }\n\n      if (['Escape'].includes(e.key)) {\n        menu.value = false\n      }\n\n      if (['Enter', 'Escape', 'Tab'].includes(e.key)) {\n        isPristine.value = true\n      }\n    }\n    function onAfterLeave () {\n      if (isFocused.value) isPristine.value = true\n    }\n    const isSelecting = ref(false)\n    function select (item: any) {\n      if (props.multiple) {\n        const index = selections.value.findIndex(selection => selection.value === item.value)\n\n        if (index === -1) {\n          model.value.push(item.value)\n        } else {\n          model.value = selected.value.filter(selection => selection !== item.value)\n        }\n      } else {\n        model.value = [item.value]\n\n        isSelecting.value = true\n\n        search.value = item.title\n        menu.value = false\n        isPristine.value = true\n\n        nextTick(() => (isSelecting.value = false))\n      }\n    }\n\n    watch(() => vTextFieldRef.value, val => {\n      activator.value = val.$el.querySelector('.v-input__control')\n    })\n\n    watch(isFocused, val => {\n      if (val) {\n        isSelecting.value = true\n        search.value = props.multiple ? '' : String(model.value ?? '')\n        isPristine.value = true\n\n        nextTick(() => isSelecting.value = false)\n      } else {\n        menu.value = false\n        search.value = ''\n      }\n    })\n\n    watch(search, val => {\n      if (!isFocused.value || isSelecting.value) return\n\n      if (val) menu.value = true\n\n      isPristine.value = !val\n    })\n\n    useRender(() => {\n      const hasChips = !!(props.chips || slots.chip)\n\n      return (\n        <VTextField\n          ref={ vTextFieldRef }\n          v-model={ search.value }\n          class={[\n            'v-autocomplete',\n            {\n              'v-autocomplete--active-menu': menu.value,\n              'v-autocomplete--chips': !!props.chips,\n              [`v-autocomplete--${props.multiple ? 'multiple' : 'single'}`]: true,\n            },\n          ]}\n          appendInnerIcon={ props.menuIcon }\n          dirty={ selected.value.length > 0 }\n          onClick:clear={ onClear }\n          onClick:control={ onClickControl }\n          onClick:input={ onClickControl }\n          onFocus={ () => isFocused.value = true }\n          onBlur={ () => isFocused.value = false }\n          onKeydown={ onKeydown }\n        >\n          {{\n            ...slots,\n            default: () => (\n              <>\n                { activator.value && (\n                  <VMenu\n                    v-model={ menu.value }\n                    activator={ activator.value }\n                    contentClass=\"v-autocomplete__content\"\n                    eager={ props.eager }\n                    openOnClick={ false }\n                    transition={ props.transition }\n                    onAfterLeave={ onAfterLeave }\n                  >\n                    <VList\n                      selected={ selected.value }\n                      selectStrategy={ props.multiple ? 'independent' : 'single-independent' }\n                    >\n                      { !filteredItems.value.length && !props.hideNoData && (\n                        <VListItem title={ t(props.noDataText) } />\n                      ) }\n\n                      { filteredItems.value.map(({ item, matches }) => (\n                        <VListItem\n                          value={ item.value }\n                          onMousedown={ (e: MouseEvent) => e.preventDefault() }\n                          onClick={ () => select(item) }\n                        >\n                          {{\n                            title: () => {\n                              return isPristine.value\n                                ? item.title\n                                : highlightResult(item.title, matches.title, search.value?.length ?? 0)\n                            },\n                          }}\n                        </VListItem>\n                      )) }\n                    </VList>\n                  </VMenu>\n                ) }\n                  { selections.value.map((selection, index) => {\n                    function onChipClose (e: Event) {\n                      e.stopPropagation()\n                      e.preventDefault()\n\n                      select(selection)\n                    }\n\n                    const slotProps = {\n                      'onClick:close': onChipClose,\n                      modelValue: true,\n                    }\n\n                    return (\n                      <div class=\"v-autocomplete__selection\">\n                        { hasChips && (\n                          <VDefaultsProvider\n                            defaults={{\n                              VChip: {\n                                closable: props.closableChips,\n                                size: 'small',\n                                text: selection.title,\n                              },\n                            }}\n                          >\n                            { slots.chip\n                              ? slots.chip({ props: slotProps, selection })\n                              : (<VChip { ...slotProps } />)\n                            }\n                          </VDefaultsProvider>\n                        ) }\n\n                        { !hasChips && (\n                          slots.selection\n                            ? slots.selection({ selection })\n                            : (\n                              <span class=\"v-autocomplete__selection-text\">\n                                { selection.title }\n                                { props.multiple && (index < selections.value.length - 1) && (\n                                  <span class=\"v-autocomplete__selection-comma\">,</span>\n                                ) }\n                              </span>\n                            )\n                        ) }\n                      </div>\n                    )\n                  }) }\n              </>\n            ),\n          }}\n        </VTextField>\n      )\n    })\n\n    return useForwardRef({\n      filteredItems,\n    }, vTextFieldRef)\n  },\n})\n\nexport type VAutocomplete = InstanceType<typeof VAutocomplete>\n"],"file":"VAutocomplete.mjs"}
+{"version":3,"file":"VAutocomplete.mjs","names":["makeSelectProps","VCheckboxBtn","VChip","VDefaultsProvider","VList","VListItem","VMenu","VTextField","makeFilterProps","useFilter","makeTransitionProps","forwardRefs","useItems","useLocale","useProxiedModel","computed","mergeProps","nextTick","ref","watch","genericComponent","useRender","wrapInArray","highlightResult","text","matches","length","Array","isArray","Error","substr","VAutocomplete","name","props","search","String","filterKeys","transition","emits","val","setup","slots","t","vTextFieldRef","isFocused","isPristine","menu","items","transformIn","transformOut","model","v","transformed","multiple","filteredItems","value","undefined","selections","map","find","item","selected","selection","onClear","e","openOnClear","onClickControl","hideNoData","readonly","onKeydown","includes","key","onInput","target","onAfterLeave","isSelecting","select","index","findIndex","splice","title","at","hasChips","chips","chip","modelValue","menuIcon","default","eager","menuProps","preventDefault","noDataText","onClick","prepend","isSelected","hideSelected","onChipClose","stopPropagation","slotProps","closable","closableChips","size"],"sources":["../../../src/components/VAutocomplete/VAutocomplete.tsx"],"sourcesContent":["// Styles\nimport './VAutocomplete.sass'\n\n// Components\nimport { makeSelectProps } from '@/components/VSelect/VSelect'\nimport { VCheckboxBtn } from '@/components/VCheckbox'\nimport { VChip } from '@/components/VChip'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VList, VListItem } from '@/components/VList'\nimport { VMenu } from '@/components/VMenu'\nimport { VTextField } from '@/components/VTextField'\n\n// Composables\nimport { makeFilterProps, useFilter } from '@/composables/filter'\nimport { makeTransitionProps } from '@/composables/transition'\nimport { forwardRefs } from '@/composables/forwardRefs'\nimport { useItems } from '@/composables/items'\nimport { useLocale } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utility\nimport { computed, mergeProps, nextTick, ref, watch } from 'vue'\nimport { genericComponent, useRender, wrapInArray } from '@/util'\n\n// Types\nimport type { FilterMatch } from '@/composables/filter'\nimport type { MakeSlots } from '@/util'\nimport type { VFieldSlots } from '@/components/VField/VField'\nimport type { VInputSlots } from '@/components/VInput/VInput'\n\nfunction highlightResult (text: string, matches: FilterMatch, length: number) {\n  if (Array.isArray(matches)) throw new Error('Multiple matches is not implemented')\n\n  return typeof matches === 'number' && ~matches\n    ? (\n      <>\n        <span class=\"v-autocomplete__unmask\">{ text.substr(0, matches) }</span>\n        <span class=\"v-autocomplete__mask\">{ text.substr(matches, length) }</span>\n        <span class=\"v-autocomplete__unmask\">{ text.substr(matches + length) }</span>\n      </>\n    )\n    : text\n}\n\ntype Primitive = string | number | boolean | symbol\n\ntype Val <T, ReturnObject extends boolean> = T extends Primitive\n  ? T\n  : (ReturnObject extends true ? T : any)\n\ntype Value <T, ReturnObject extends boolean, Multiple extends boolean> =\n  Multiple extends true\n    ? Val<T, ReturnObject>[]\n    : Val<T, ReturnObject>\n\nexport const VAutocomplete = genericComponent<new <\n  T,\n  ReturnObject extends boolean = false,\n  Multiple extends boolean = false,\n  V extends Value<T, ReturnObject, Multiple> = Value<T, ReturnObject, Multiple>\n>() => {\n  $props: {\n    items?: readonly T[]\n    returnObject?: ReturnObject\n    multiple?: Multiple\n    modelValue?: Readonly<V>\n    'onUpdate:modelValue'?: (val: V) => void\n  }\n  $slots: Omit<VInputSlots & VFieldSlots, 'default'> & MakeSlots<{\n    item: [{ item: T, index: number, props: Record<string, unknown> }]\n    chip: [{ item: T, index: number, props: Record<string, unknown> }]\n    selection: [{ item: T, index: number }]\n    'no-data': []\n  }>\n}>()({\n  name: 'VAutocomplete',\n\n  props: {\n    // TODO: implement post keyboard support\n    // autoSelectFirst: Boolean,\n    search: String,\n\n    ...makeFilterProps({ filterKeys: ['title'] }),\n    ...makeSelectProps(),\n    ...makeTransitionProps({ transition: false }),\n  },\n\n  emits: {\n    'update:search': (val: any) => true,\n    'update:modelValue': (val: any) => true,\n    'update:menu': (val: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const { t } = useLocale()\n    const vTextFieldRef = ref()\n    const isFocused = ref(false)\n    const isPristine = ref(true)\n    const menu = useProxiedModel(props, 'menu')\n    const { items, transformIn, transformOut } = useItems(props)\n    const search = useProxiedModel(props, 'search', '')\n    const model = useProxiedModel(\n      props,\n      'modelValue',\n      [],\n      v => transformIn(wrapInArray(v)),\n      v => {\n        const transformed = transformOut(v)\n        return props.multiple ? transformed : (transformed[0] ?? null)\n      }\n    )\n    const { filteredItems } = useFilter(props, items, computed(() => isPristine.value ? undefined : search.value))\n    const selections = computed(() => {\n      return model.value.map(v => {\n        return items.value.find(item => item.value === v.value) || v\n      })\n    })\n    const selected = computed(() => selections.value.map(selection => selection.props.value))\n\n    function onClear (e: MouseEvent) {\n      model.value = []\n\n      if (props.openOnClear) {\n        menu.value = true\n      }\n\n      search.value = ''\n    }\n    function onClickControl () {\n      if (\n        (props.hideNoData && !items.value.length) ||\n        props.readonly\n      ) return\n\n      menu.value = true\n    }\n    function onKeydown (e: KeyboardEvent) {\n      if (props.readonly) return\n\n      if (['Enter', 'ArrowDown'].includes(e.key)) {\n        menu.value = true\n      }\n\n      if (['Escape'].includes(e.key)) {\n        menu.value = false\n      }\n\n      if (['Enter', 'Escape', 'Tab'].includes(e.key)) {\n        isPristine.value = true\n      }\n    }\n\n    function onInput (e: InputEvent) {\n      search.value = (e.target as HTMLInputElement).value\n    }\n\n    function onAfterLeave () {\n      if (isFocused.value) isPristine.value = true\n    }\n\n    const isSelecting = ref(false)\n\n    function select (item: any) {\n      if (props.multiple) {\n        const index = selected.value.findIndex(selection => selection === item.value)\n\n        if (index === -1) {\n          model.value = [...model.value, item]\n          search.value = ''\n        } else {\n          const value = [...model.value]\n          value.splice(index, 1)\n          model.value = value\n        }\n      } else {\n        model.value = [item]\n\n        isSelecting.value = true\n\n        search.value = item.title\n        menu.value = false\n        isPristine.value = true\n\n        nextTick(() => (isSelecting.value = false))\n      }\n    }\n\n    watch(isFocused, val => {\n      if (val) {\n        isSelecting.value = true\n        search.value = props.multiple ? '' : String(selections.value.at(-1)?.props.title ?? '')\n        isPristine.value = true\n\n        nextTick(() => isSelecting.value = false)\n      } else {\n        menu.value = false\n        search.value = ''\n      }\n    })\n\n    watch(search, val => {\n      if (!isFocused.value || isSelecting.value) return\n\n      if (val) menu.value = true\n\n      isPristine.value = !val\n    })\n\n    useRender(() => {\n      const hasChips = !!(props.chips || slots.chip)\n\n      return (\n        <VTextField\n          ref={ vTextFieldRef }\n          modelValue={ search.value }\n          onUpdate:modelValue={ v => { if (v == null) model.value = [] } }\n          validationValue={ props.modelValue ?? model.value }\n          dirty={ model.value.length > 0 }\n          onInput={ onInput }\n          class={[\n            'v-autocomplete',\n            {\n              'v-autocomplete--active-menu': menu.value,\n              'v-autocomplete--chips': !!props.chips,\n              [`v-autocomplete--${props.multiple ? 'multiple' : 'single'}`]: true,\n            },\n          ]}\n          appendInnerIcon={ props.menuIcon }\n          readonly={ props.readonly }\n          onClick:clear={ onClear }\n          onClick:control={ onClickControl }\n          onClick:input={ onClickControl }\n          onFocus={ () => isFocused.value = true }\n          onBlur={ () => isFocused.value = false }\n          onKeydown={ onKeydown }\n        >\n          {{\n            ...slots,\n            default: () => (\n              <>\n                <VMenu\n                  v-model={ menu.value }\n                  activator=\"parent\"\n                  contentClass=\"v-autocomplete__content\"\n                  eager={ props.eager }\n                  openOnClick={ false }\n                  closeOnContentClick={ false }\n                  transition={ props.transition }\n                  onAfterLeave={ onAfterLeave }\n                  { ...props.menuProps }\n                >\n                  <VList\n                    selected={ selected.value }\n                    selectStrategy={ props.multiple ? 'independent' : 'single-independent' }\n                    onMousedown={ (e: MouseEvent) => e.preventDefault() }\n                  >\n                    { !filteredItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? (\n                      <VListItem title={ t(props.noDataText) } />\n                    )) }\n\n                    { filteredItems.value.map(({ item, matches }, index) => slots.item?.({\n                      item,\n                      index,\n                      props: mergeProps(item.props, { onClick: () => select(item) }),\n                    }) ?? (\n                      <VListItem\n                        key={ index }\n                        { ...item.props }\n                        onClick={ () => select(item) }\n                      >\n                        {{\n                          prepend: ({ isSelected }) => props.multiple && !props.hideSelected ? (\n                            <VCheckboxBtn modelValue={ isSelected } ripple={ false } />\n                          ) : undefined,\n                          title: () => {\n                            return isPristine.value\n                              ? item.title\n                              : highlightResult(item.title, matches.title, search.value?.length ?? 0)\n                          },\n                        }}\n                      </VListItem>\n                    )) }\n                  </VList>\n                </VMenu>\n\n                { selections.value.map((item, index) => {\n                  function onChipClose (e: Event) {\n                    e.stopPropagation()\n                    e.preventDefault()\n\n                    select(item)\n                  }\n\n                  const slotProps = {\n                    'onClick:close': onChipClose,\n                    modelValue: true,\n                  }\n\n                  return (\n                    <div key={ index } class=\"v-autocomplete__selection\">\n                      { hasChips ? (\n                        <VDefaultsProvider\n                          defaults={{\n                            VChip: {\n                              closable: props.closableChips,\n                              size: 'small',\n                              text: item.title,\n                            },\n                          }}\n                        >\n                          { slots.chip\n                            ? slots.chip({ item, index, props: slotProps })\n                            : (<VChip { ...slotProps } />)\n                          }\n                        </VDefaultsProvider>\n                      ) : (\n                        slots.selection\n                          ? slots.selection({ item, index })\n                          : (\n                            <span class=\"v-autocomplete__selection-text\">\n                              { item.title }\n                              { props.multiple && (index < selections.value.length - 1) && (\n                                <span class=\"v-autocomplete__selection-comma\">,</span>\n                              ) }\n                            </span>\n                          )\n                      )}\n                    </div>\n                  )\n                }) }\n              </>\n            ),\n          }}\n        </VTextField>\n      )\n    })\n\n    return forwardRefs({\n      isFocused,\n      isPristine,\n      menu,\n      search,\n      filteredItems,\n      select,\n    }, vTextFieldRef)\n  },\n})\n\nexport type VAutocomplete = InstanceType<typeof VAutocomplete>\n"],"mappings":"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"}

package/lib/components/VAutocomplete/VAutocomplete.sass

@@ -1,10 +1,8 @@
-@forward './variables'
 @use 'sass:selector'
 @use 'sass:math'
 @use '../../styles/settings'
 @use '../../styles/tools'
 @use './variables' as *
-@use '../VInput/variables' as *
 
 .v-autocomplete
   .v-field
@@ -33,6 +31,12 @@
     .v-autocomplete__selection
       margin-inline-end: 2px
 
+  .v-field--single-line
+    .v-autocomplete__selection-text
+      overflow: hidden
+      text-overflow: ellipsis
+      white-space: nowrap
+
 .v-autocomplete
   &__content
     overflow: hidden
@@ -47,6 +51,7 @@
     display: inline-flex
     letter-spacing: inherit
     line-height: inherit
+    max-width: 100%
 
   &--active-menu
     .v-field__append-inner
@@ -56,6 +61,8 @@
 
   &--chips
     .v-autocomplete__selection
+      margin-top: $autocomplete-chips-margin-top
+
       &:first-child
         margin-inline-start: 0
 
@@ -65,6 +72,7 @@
       position: absolute
       left: 0
       right: 0
+      width: 100%
       padding-inline-start: inherit
       padding-inline-end: inherit
 

package/lib/components/VAutocomplete/_variables.scss

@@ -6,3 +6,4 @@ $autocomplete-content-elevation: 4 !default;
 $autocomplete-line-height: 1.75 !default;
 $autocomplete-transition: .2s settings.$standard-easing !default;
 $autocomplete-chips-control-min-height: 64px !default;
+$autocomplete-chips-margin-top: 2px !default;

package/lib/components/VAutocomplete/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VAutocomplete/index.ts"],"names":["VAutocomplete"],"mappings":"SAASA,a","sourcesContent":["export { VAutocomplete } from './VAutocomplete'\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VAutocomplete"],"sources":["../../../src/components/VAutocomplete/index.ts"],"sourcesContent":["export { VAutocomplete } from './VAutocomplete'\n"],"mappings":"SAASA,a"}

package/lib/components/VAvatar/VAvatar.css

@@ -1,4 +1,5 @@
 .v-avatar {
+  flex: none;
   align-items: center;
   display: inline-flex;
   justify-content: center;
@@ -6,6 +7,8 @@
   overflow: hidden;
   position: relative;
   text-align: center;
+  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: width, height;
   vertical-align: middle;
   border-radius: 50%;
   background: transparent;
@@ -39,5 +42,5 @@
   width: calc(var(--v-avatar-height) + -8px);
 }
 .v-avatar--rounded {
-  @includes tools.rounded($avatar-rounded-border-radius);
+  border-radius: 4px;
 }

package/lib/components/VAvatar/VAvatar.mjs

@@ -9,23 +9,25 @@ import { makeDensityProps, useDensity } from "../../composables/density.mjs";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeSizeProps, useSize } from "../../composables/size.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
-import { useBackgroundColor } from "../../composables/color.mjs"; // Utilities
+import { useBackgroundColor } from "../../composables/color.mjs";
+import { IconValue } from "../../composables/icons.mjs"; // Utilities
 
-import { defineComponent, useRender } from "../../util/index.mjs";
+import { defineComponent, propsFactory, useRender } from "../../util/index.mjs";
 import { toRef } from 'vue';
+export const makeVAvatarProps = propsFactory({
+  color: String,
+  start: Boolean,
+  end: Boolean,
+  icon: IconValue,
+  image: String,
+  ...makeDensityProps(),
+  ...makeRoundedProps(),
+  ...makeSizeProps(),
+  ...makeTagProps()
+});
 export const VAvatar = defineComponent({
   name: 'VAvatar',
-  props: {
-    color: String,
-    left: Boolean,
-    right: Boolean,
-    icon: String,
-    image: String,
-    ...makeDensityProps(),
-    ...makeRoundedProps(),
-    ...makeSizeProps(),
-    ...makeTagProps()
-  },
+  props: makeVAvatarProps(),
 
   setup(props, _ref) {
     let {
@@ -50,8 +52,8 @@ export const VAvatar = defineComponent({
 
       return _createVNode(props.tag, {
         "class": ['v-avatar', {
-          'v-avatar--left': props.left,
-          'v-avatar--right': props.right
+          'v-avatar--start': props.start,
+          'v-avatar--end': props.end
         }, backgroundColorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value],
         "style": [backgroundColorStyles.value, sizeStyles.value]
       }, {

package/lib/components/VAvatar/VAvatar.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VAvatar/VAvatar.tsx"],"names":["VIcon","VImg","makeDensityProps","useDensity","makeRoundedProps","useRounded","makeSizeProps","useSize","makeTagProps","useBackgroundColor","defineComponent","useRender","toRef","VAvatar","name","props","color","String","left","Boolean","right","icon","image","setup","slots","backgroundColorClasses","backgroundColorStyles","densityClasses","roundedClasses","sizeClasses","sizeStyles","value","default"],"mappings":";AAAA;AACA,uB,CAEA;;SACSA,K;SACAC,I,6BAET;;SACSC,gB,EAAkBC,U;SAClBC,gB,EAAkBC,U;SAClBC,a,EAAeC,O;SACfC,Y;SACAC,kB,uCAET;;SACSC,e,EAAiBC,S;AAC1B,SAASC,KAAT,QAAsB,KAAtB;AAEA,OAAO,MAAMC,OAAO,GAAGH,eAAe,CAAC;AACrCI,EAAAA,IAAI,EAAE,SAD+B;AAGrCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAEC,MADF;AAELC,IAAAA,IAAI,EAAEC,OAFD;AAGLC,IAAAA,KAAK,EAAED,OAHF;AAILE,IAAAA,IAAI,EAAEJ,MAJD;AAKLK,IAAAA,KAAK,EAAEL,MALF;AAOL,OAAGf,gBAAgB,EAPd;AAQL,OAAGE,gBAAgB,EARd;AASL,OAAGE,aAAa,EATX;AAUL,OAAGE,YAAY;AAVV,GAH8B;;AAgBrCe,EAAAA,KAAK,CAAER,KAAF,QAAoB;AAAA,QAAX;AAAES,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA,sBAAF;AAA0BC,MAAAA;AAA1B,QAAoDjB,kBAAkB,CAACG,KAAK,CAACG,KAAD,EAAQ,OAAR,CAAN,CAA5E;AACA,UAAM;AAAEY,MAAAA;AAAF,QAAqBxB,UAAU,CAACY,KAAD,CAArC;AACA,UAAM;AAAEa,MAAAA;AAAF,QAAqBvB,UAAU,CAACU,KAAD,CAArC;AACA,UAAM;AAAEc,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAA8BvB,OAAO,CAACQ,KAAD,CAA3C;AAEAJ,IAAAA,SAAS,CAAC;AAAA;;AAAA;AAAA,iBAEC,CACL,UADK,EAEL;AACE,4BAAkBI,KAAK,CAACG,IAD1B;AAEE,6BAAmBH,KAAK,CAACK;AAF3B,SAFK,EAMLK,sBAAsB,CAACM,KANlB,EAOLJ,cAAc,CAACI,KAPV,EAQLH,cAAc,CAACG,KARV,EASLF,WAAW,CAACE,KATP,CAFD;AAAA,iBAaC,CACLL,qBAAqB,CAACK,KADjB,EAELD,UAAU,CAACC,KAFN;AAbD;AAAA,wBAmBJhB,KAAK,CAACO,KAAN;AAAA,iBACeP,KAAK,CAACO,KADrB;AAAA,iBACiC;AADjC,mBAEEP,KAAK,CAACM,IAAN;AAAA,kBACiBN,KAAK,CAACM;AADvB,qCAEEG,KAAK,CAACQ,OAFR,qBAEE,oBAAAR,KAAK,CAvBL;AAAA;AAAA,KAAD,CAAT;AA4BA,WAAO,EAAP;AACD;;AAnDoC,CAAD,CAA/B","sourcesContent":["// Styles\nimport './VAvatar.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\nimport { VImg } from '@/components/VImg'\n\n// Composables\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\nimport { useBackgroundColor } from '@/composables/color'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\nimport { toRef } from 'vue'\n\nexport const VAvatar = defineComponent({\n  name: 'VAvatar',\n\n  props: {\n    color: String,\n    left: Boolean,\n    right: Boolean,\n    icon: String,\n    image: String,\n\n    ...makeDensityProps(),\n    ...makeRoundedProps(),\n    ...makeSizeProps(),\n    ...makeTagProps(),\n  },\n\n  setup (props, { slots }) {\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { densityClasses } = useDensity(props)\n    const { roundedClasses } = useRounded(props)\n    const { sizeClasses, sizeStyles } = useSize(props)\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-avatar',\n          {\n            'v-avatar--left': props.left,\n            'v-avatar--right': props.right,\n          },\n          backgroundColorClasses.value,\n          densityClasses.value,\n          roundedClasses.value,\n          sizeClasses.value,\n        ]}\n        style={[\n          backgroundColorStyles.value,\n          sizeStyles.value,\n        ]}\n      >\n\n        { props.image\n          ? (<VImg src={ props.image } alt=\"\" />)\n          : props.icon\n            ? (<VIcon icon={ props.icon } />)\n            : slots.default?.()\n        }\n      </props.tag>\n    ))\n\n    return {}\n  },\n})\n\nexport type VAvatar = InstanceType<typeof VAvatar>\n"],"file":"VAvatar.mjs"}
+{"version":3,"file":"VAvatar.mjs","names":["VIcon","VImg","makeDensityProps","useDensity","makeRoundedProps","useRounded","makeSizeProps","useSize","makeTagProps","useBackgroundColor","IconValue","defineComponent","propsFactory","useRender","toRef","makeVAvatarProps","color","String","start","Boolean","end","icon","image","VAvatar","name","props","setup","slots","backgroundColorClasses","backgroundColorStyles","densityClasses","roundedClasses","sizeClasses","sizeStyles","value","default"],"sources":["../../../src/components/VAvatar/VAvatar.tsx"],"sourcesContent":["// Styles\nimport './VAvatar.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\nimport { VImg } from '@/components/VImg'\n\n// Composables\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\nimport { useBackgroundColor } from '@/composables/color'\nimport { IconValue } from '@/composables/icons'\n\n// Utilities\nimport { defineComponent, propsFactory, useRender } from '@/util'\nimport { toRef } from 'vue'\n\nexport const makeVAvatarProps = propsFactory({\n  color: String,\n  start: Boolean,\n  end: Boolean,\n  icon: IconValue,\n  image: String,\n\n  ...makeDensityProps(),\n  ...makeRoundedProps(),\n  ...makeSizeProps(),\n  ...makeTagProps(),\n})\n\nexport const VAvatar = defineComponent({\n  name: 'VAvatar',\n\n  props: makeVAvatarProps(),\n\n  setup (props, { slots }) {\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { densityClasses } = useDensity(props)\n    const { roundedClasses } = useRounded(props)\n    const { sizeClasses, sizeStyles } = useSize(props)\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-avatar',\n          {\n            'v-avatar--start': props.start,\n            'v-avatar--end': props.end,\n          },\n          backgroundColorClasses.value,\n          densityClasses.value,\n          roundedClasses.value,\n          sizeClasses.value,\n        ]}\n        style={[\n          backgroundColorStyles.value,\n          sizeStyles.value,\n        ]}\n      >\n        { props.image\n          ? (<VImg src={ props.image } alt=\"\" />)\n          : props.icon\n            ? (<VIcon icon={ props.icon } />)\n            : slots.default?.()\n        }\n      </props.tag>\n    ))\n\n    return {}\n  },\n})\n\nexport type VAvatar = InstanceType<typeof VAvatar>\n"],"mappings":";AAAA;AACA,uB,CAEA;;SACSA,K;SACAC,I,6BAET;;SACSC,gB,EAAkBC,U;SAClBC,gB,EAAkBC,U;SAClBC,a,EAAeC,O;SACfC,Y;SACAC,kB;SACAC,S,uCAET;;SACSC,e,EAAiBC,Y,EAAcC,S;AACxC,SAASC,KAAT,QAAsB,KAAtB;AAEA,OAAO,MAAMC,gBAAgB,GAAGH,YAAY,CAAC;EAC3CI,KAAK,EAAEC,MADoC;EAE3CC,KAAK,EAAEC,OAFoC;EAG3CC,GAAG,EAAED,OAHsC;EAI3CE,IAAI,EAAEX,SAJqC;EAK3CY,KAAK,EAAEL,MALoC;EAO3C,GAAGf,gBAAgB,EAPwB;EAQ3C,GAAGE,gBAAgB,EARwB;EAS3C,GAAGE,aAAa,EAT2B;EAU3C,GAAGE,YAAY;AAV4B,CAAD,CAArC;AAaP,OAAO,MAAMe,OAAO,GAAGZ,eAAe,CAAC;EACrCa,IAAI,EAAE,SAD+B;EAGrCC,KAAK,EAAEV,gBAAgB,EAHc;;EAKrCW,KAAK,CAAED,KAAF,QAAoB;IAAA,IAAX;MAAEE;IAAF,CAAW;IACvB,MAAM;MAAEC,sBAAF;MAA0BC;IAA1B,IAAoDpB,kBAAkB,CAACK,KAAK,CAACW,KAAD,EAAQ,OAAR,CAAN,CAA5E;IACA,MAAM;MAAEK;IAAF,IAAqB3B,UAAU,CAACsB,KAAD,CAArC;IACA,MAAM;MAAEM;IAAF,IAAqB1B,UAAU,CAACoB,KAAD,CAArC;IACA,MAAM;MAAEO,WAAF;MAAeC;IAAf,IAA8B1B,OAAO,CAACkB,KAAD,CAA3C;IAEAZ,SAAS,CAAC;MAAA;;MAAA;QAAA,SAEC,CACL,UADK,EAEL;UACE,mBAAmBY,KAAK,CAACP,KAD3B;UAEE,iBAAiBO,KAAK,CAACL;QAFzB,CAFK,EAMLQ,sBAAsB,CAACM,KANlB,EAOLJ,cAAc,CAACI,KAPV,EAQLH,cAAc,CAACG,KARV,EASLF,WAAW,CAACE,KATP,CAFD;QAAA,SAaC,CACLL,qBAAqB,CAACK,KADjB,EAELD,UAAU,CAACC,KAFN;MAbD;QAAA,gBAkBJT,KAAK,CAACH,KAAN;UAAA,OACeG,KAAK,CAACH,KADrB;UAAA,OACiC;QADjC,WAEEG,KAAK,CAACJ,IAAN;UAAA,QACiBI,KAAK,CAACJ;QADvB,6BAEEM,KAAK,CAACQ,OAFR,qBAEE,oBAAAR,KAAK,CAtBL;MAAA;IAAA,CAAD,CAAT;IA2BA,OAAO,EAAP;EACD;;AAvCoC,CAAD,CAA/B"}

package/lib/components/VAvatar/VAvatar.sass

@@ -1,9 +1,10 @@
-@forward './variables'
+@use '../../styles/settings'
 @use '../../styles/tools'
 @use './mixins' as *
 @use './variables' as *
 
 .v-avatar
+  flex: none
   align-items: center
   display: inline-flex
   justify-content: center
@@ -11,6 +12,8 @@
   overflow: hidden
   position: relative
   text-align: center
+  transition: 0.2s settings.$standard-easing
+  transition-property: width, height
   vertical-align: $avatar-vertical-align
 
   @include avatar-sizes($avatar-sizes)
@@ -19,4 +22,4 @@
   @include tools.theme($avatar-theme...)
 
   &--rounded
-    @includes tools.rounded($avatar-rounded-border-radius)
+    @include tools.rounded($avatar-rounded-border-radius)

package/lib/components/VAvatar/_mixins.scss

@@ -1,4 +1,3 @@
-@forward './variables';
 @use 'sass:map';
 @use 'sass:meta';
 @use '../../styles/settings';

package/lib/components/VAvatar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VAvatar/index.ts"],"names":["VAvatar"],"mappings":"SAASA,O","sourcesContent":["export { VAvatar } from './VAvatar'\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VAvatar"],"sources":["../../../src/components/VAvatar/index.ts"],"sourcesContent":["export { VAvatar } from './VAvatar'\n"],"mappings":"SAASA,O"}