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

package/lib/components/VAutocomplete/VAutocomplete.mjs

@@ -2,7 +2,7 @@ import { createTextVNode as _createTextVNode, createVNode as _createVNode, Fragm
 // Styles
 import "./VAutocomplete.css"; // Components
 
-import { genItem, makeSelectProps } from "../VSelect/VSelect.mjs";
+import { makeSelectProps } from "../VSelect/VSelect.mjs";
 import { VChip } from "../VChip/index.mjs";
 import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
 import { VList, VListItem } from "../VList/index.mjs";
@@ -11,6 +11,7 @@ import { VTextField } from "../VTextField/index.mjs"; // Composables
 
 import { makeFilterProps, useFilter } from "../../composables/filter.mjs";
 import { makeTransitionProps } from "../../composables/transition.mjs";
+import { transformItem, useItems } from "../../composables/items.mjs";
 import { useForwardRef } from "../../composables/forwardRef.mjs";
 import { useLocale } from "../../composables/locale.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utility
@@ -61,7 +62,9 @@ export const VAutocomplete = genericComponent()({
     const isFocused = ref(false);
     const isPristine = ref(true);
     const menu = ref(false);
-    const items = computed(() => props.items.map(genItem));
+    const {
+      items
+    } = useItems(props);
     const search = useProxiedModel(props, 'search', '');
     const model = useProxiedModel(props, 'modelValue', [], v => wrapInArray(v || []), v => props.multiple ? v : v[0]);
     const {
@@ -72,7 +75,7 @@ export const VAutocomplete = genericComponent()({
       let index = 0;
 
       for (const unwrapped of model.value) {
-        const item = genItem(unwrapped);
+        const item = transformItem(props, unwrapped);
         const found = array.find(selection => selection.value === item.value);
 
         if (found == null) {
@@ -116,6 +119,10 @@ export const VAutocomplete = genericComponent()({
       }
     }
 
+    function onInput(e) {
+      search.value = e.target.value;
+    }
+
     function onAfterLeave() {
       if (isFocused.value) isPristine.value = true;
     }
@@ -124,12 +131,14 @@ 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.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];
@@ -167,7 +176,7 @@ export const VAutocomplete = genericComponent()({
       return _createVNode(VTextField, {
         "ref": vTextFieldRef,
         "modelValue": search.value,
-        "onUpdate:modelValue": $event => search.value = $event,
+        "onInput": onInput,
         "class": ['v-autocomplete', {
           'v-autocomplete--active-menu': menu.value,
           'v-autocomplete--chips': !!props.chips,
@@ -182,74 +191,78 @@ 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: () => {
+          var _slots$noData, _slots$noData2;
+
+          return _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: () => [!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: () => [_createVNode(VList, {
+              "selected": selected.value,
+              "selectStrategy": props.multiple ? 'independent' : 'single-independent'
+            }, {
+              default: () => [!filteredItems.value.length && !props.hideNoData && ((_slots$noData = (_slots$noData2 = slots['no-data']) == null ? void 0 : _slots$noData2.call(slots)) != null ? _slots$noData : _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;
 
-                  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 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);
+                  }
+                });
+              })]
             })]
-          })]
-        }), selections.value.map((selection, index) => {
-          function onChipClose(e) {
-            e.stopPropagation();
-            e.preventDefault();
-            select(selection);
-          }
+          }), selections.value.map((selection, index) => {
+            function onChipClose(e) {
+              e.stopPropagation();
+              e.preventDefault();
+              select(selection);
+            }
 
-          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", {
+              "class": "v-autocomplete__selection"
+            }, [hasChips && _createVNode(VDefaultsProvider, {
+              "defaults": {
+                VChip: {
+                  closable: props.closableChips,
+                  size: 'small',
+                  text: selection.title
+                }
               }
-            }
-          }, {
-            default: () => [slots.chip ? slots.chip({
-              props: slotProps,
+            }, {
+              default: () => [slots.chip ? slots.chip({
+                props: slotProps,
+                selection
+              }) : _createVNode(VChip, slotProps, null)]
+            }), !hasChips && (slots.selection ? slots.selection({
               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(",")])]))]);
-        })])
+            }) : _createVNode("span", {
+              "class": "v-autocomplete__selection-text"
+            }, [selection.title, props.multiple && index < selections.value.length - 1 && _createVNode("span", {
+              "class": "v-autocomplete__selection-comma"
+            }, [_createTextVNode(",")])]))]);
+          })]);
+        }
       });
     });
     return useForwardRef({

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,"sources":["../../../src/components/VAutocomplete/VAutocomplete.tsx"],"names":["makeSelectProps","VChip","VDefaultsProvider","VList","VListItem","VMenu","VTextField","makeFilterProps","useFilter","makeTransitionProps","transformItem","useItems","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","model","v","multiple","filteredItems","value","undefined","selections","array","index","unwrapped","item","found","find","selection","push","selected","map","onClear","openOnClear","onClickControl","hideNoData","onKeydown","includes","key","onInput","target","onAfterLeave","isSelecting","select","findIndex","splice","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 { 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 { transformItem, useItems } from '@/composables/items'\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 } = useItems(props)\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 = transformItem(props, 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 onInput (e: InputEvent) {\n      search.value = (e.target as HTMLInputElement).value\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 = selected.value.findIndex(selection => selection === item.value)\n\n        if (index === -1) {\n          model.value = [...model.value, item.value]\n        } else {\n          const value = [...model.value]\n          value.splice(index, 1)\n          model.value = 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          modelValue={ search.value }\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          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 && (slots['no-data']?.() ?? (\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"}

package/lib/components/VAvatar/VAvatar.mjs

@@ -11,21 +11,22 @@ import { makeSizeProps, useSize } from "../../composables/size.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
 import { useBackgroundColor } from "../../composables/color.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: String,
+  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 +51,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,"sources":["../../../src/components/VAvatar/VAvatar.tsx"],"names":["VIcon","VImg","makeDensityProps","useDensity","makeRoundedProps","useRounded","makeSizeProps","useSize","makeTagProps","useBackgroundColor","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"],"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,Y,EAAcC,S;AACxC,SAASC,KAAT,QAAsB,KAAtB;AAEA,OAAO,MAAMC,gBAAgB,GAAGH,YAAY,CAAC;AAC3CI,EAAAA,KAAK,EAAEC,MADoC;AAE3CC,EAAAA,KAAK,EAAEC,OAFoC;AAG3CC,EAAAA,GAAG,EAAED,OAHsC;AAI3CE,EAAAA,IAAI,EAAEJ,MAJqC;AAK3CK,EAAAA,KAAK,EAAEL,MALoC;AAO3C,KAAGd,gBAAgB,EAPwB;AAQ3C,KAAGE,gBAAgB,EARwB;AAS3C,KAAGE,aAAa,EAT2B;AAU3C,KAAGE,YAAY;AAV4B,CAAD,CAArC;AAaP,OAAO,MAAMc,OAAO,GAAGZ,eAAe,CAAC;AACrCa,EAAAA,IAAI,EAAE,SAD+B;AAGrCC,EAAAA,KAAK,EAAEV,gBAAgB,EAHc;;AAKrCW,EAAAA,KAAK,CAAED,KAAF,QAAoB;AAAA,QAAX;AAAEE,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA,sBAAF;AAA0BC,MAAAA;AAA1B,QAAoDnB,kBAAkB,CAACI,KAAK,CAACW,KAAD,EAAQ,OAAR,CAAN,CAA5E;AACA,UAAM;AAAEK,MAAAA;AAAF,QAAqB1B,UAAU,CAACqB,KAAD,CAArC;AACA,UAAM;AAAEM,MAAAA;AAAF,QAAqBzB,UAAU,CAACmB,KAAD,CAArC;AACA,UAAM;AAAEO,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAA8BzB,OAAO,CAACiB,KAAD,CAA3C;AAEAZ,IAAAA,SAAS,CAAC;AAAA;;AAAA;AAAA,iBAEC,CACL,UADK,EAEL;AACE,6BAAmBY,KAAK,CAACP,KAD3B;AAEE,2BAAiBO,KAAK,CAACL;AAFzB,SAFK,EAMLQ,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,wBAmBJT,KAAK,CAACH,KAAN;AAAA,iBACeG,KAAK,CAACH,KADrB;AAAA,iBACiC;AADjC,mBAEEG,KAAK,CAACJ,IAAN;AAAA,kBACiBI,KAAK,CAACJ;AADvB,qCAEEM,KAAK,CAACQ,OAFR,qBAEE,oBAAAR,KAAK,CAvBL;AAAA;AAAA,KAAD,CAAT;AA4BA,WAAO,EAAP;AACD;;AAxCoC,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, propsFactory, useRender } from '@/util'\nimport { toRef } from 'vue'\n\nexport const makeVAvatarProps = propsFactory({\n  color: String,\n  start: Boolean,\n  end: Boolean,\n  icon: String,\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\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"}

package/lib/components/VBanner/VBanner.css

@@ -1,10 +1,17 @@
 .v-banner {
-  display: flex;
-  flex-wrap: wrap;
+  align-items: center;
+  display: grid;
+  flex: 1 1;
   font-size: 0.875rem;
-  padding-bottom: 8px;
+  grid-template-areas: "prepend text actions";
+  grid-template-columns: max-content auto max-content;
+  grid-template-rows: max-content max-content;
+  line-height: 1.375rem;
+  overflow: hidden;
+  padding-inline-start: 16px;
   padding-inline-end: 8px;
-  padding-inline-start: 24px;
+  padding-top: 16px;
+  padding-bottom: 16px;
   position: relative;
   width: 100%;
   border-color: rgba(var(--v-border-color), var(--v-border-opacity));
@@ -28,106 +35,123 @@
 .v-banner--sticky {
   position: sticky;
 }
-.v-banner--border {
-  border-width: thin;
-}
-.v-banner--mobile {
-  align-items: center;
-  padding-inline-end: 8px;
-  padding-inline-start: 16px;
-}
 .v-banner--rounded {
   border-radius: 4px;
 }
-.v-banner--density-default {
+.v-banner--stacked:not(.v-banner--one-line) {
+  grid-template-areas: "prepend text" ". actions";
+}
+.v-banner--stacked .v-banner-text {
+  padding-inline-end: 36px;
+}
+.v-banner--density-default .v-banner-actions {
+  margin-bottom: -8px;
+}
+.v-banner--density-default.v-banner--one-line {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.v-banner--density-default.v-banner--one-line .v-banner-actions {
+  margin-bottom: 0;
+}
+.v-banner--density-default.v-banner--one-line {
   padding-top: 10px;
 }
 .v-banner--density-default.v-banner--two-line {
-  padding-top: 24px;
+  padding-top: 16px;
+  padding-bottom: 16px;
 }
 .v-banner--density-default.v-banner--three-line {
   padding-top: 24px;
+  padding-bottom: 16px;
+}
+.v-banner--density-default:not(.v-banner--one-line) .v-banner-actions, .v-banner--density-default.v-banner--two-line .v-banner-actions, .v-banner--density-default.v-banner--three-line .v-banner-actions {
+  margin-top: 20px;
 }
 
-.v-banner--density-comfortable {
-  padding-top: 6px;
+.v-banner--density-comfortable .v-banner-actions {
+  margin-bottom: -4px;
+}
+.v-banner--density-comfortable.v-banner--one-line {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+.v-banner--density-comfortable.v-banner--one-line .v-banner-actions {
+  margin-bottom: 0;
 }
 .v-banner--density-comfortable.v-banner--two-line {
-  padding-top: 20px;
+  padding-top: 12px;
+  padding-bottom: 12px;
 }
 .v-banner--density-comfortable.v-banner--three-line {
   padding-top: 20px;
+  padding-bottom: 12px;
+}
+.v-banner--density-comfortable:not(.v-banner--one-line) .v-banner-actions, .v-banner--density-comfortable.v-banner--two-line .v-banner-actions, .v-banner--density-comfortable.v-banner--three-line .v-banner-actions {
+  margin-top: 16px;
 }
 
-.v-banner--density-compact {
-  padding-top: 2px;
+.v-banner--density-compact .v-banner-actions {
+  margin-bottom: 0px;
+}
+.v-banner--density-compact.v-banner--one-line {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.v-banner--density-compact.v-banner--one-line .v-banner-actions {
+  margin-bottom: 0;
 }
 .v-banner--density-compact.v-banner--two-line {
-  padding-top: 16px;
+  padding-top: 8px;
+  padding-bottom: 8px;
 }
 .v-banner--density-compact.v-banner--three-line {
   padding-top: 16px;
+  padding-bottom: 8px;
+}
+.v-banner--density-compact:not(.v-banner--one-line) .v-banner-actions, .v-banner--density-compact.v-banner--two-line .v-banner-actions, .v-banner--density-compact.v-banner--three-line .v-banner-actions {
+  margin-top: 12px;
 }
 
 .v-banner--sticky {
   top: 0;
 }
 
+.v-banner-avatar,
+.v-banner-icon,
+.v-banner__prepend {
+  align-self: flex-start;
+  grid-area: prepend;
+  margin-inline-end: 24px;
+}
+
 .v-banner-actions {
-  align-items: flex-end;
+  align-self: flex-end;
   display: flex;
   flex: 0 1;
+  grid-area: actions;
   justify-content: flex-end;
 }
-.v-banner--mobile .v-banner-actions {
-  flex: 1 0;
-}
-
-.v-banner__content {
-  display: flex;
-  flex: 1 1;
-  min-width: 0;
-  padding-inline-end: 90px;
-}
-.v-banner--mobile .v-banner__content {
-  flex: 1 1 auto;
-  padding-inline-end: 8px;
-}
-.v-banner--two-line .v-banner__content {
-  margin-bottom: 4px;
-}
-.v-banner--three-line .v-banner__content {
-  margin-bottom: 8px;
-}
-
-.v-banner__avatar {
-  align-self: flex-start;
-  border-radius: 50%;
-  margin-inline-end: 24px;
-  margin-inline-start: 0;
-  position: relative;
-}
-.v-banner--mobile .v-banner__avatar {
-  margin-inline-end: 16px;
-}
-.v-banner--one-line .v-banner__avatar {
-  align-self: center;
+.v-banner--two-line .v-banner-actions, .v-banner--three-line .v-banner-actions {
+  margin-top: 20px;
 }
 
 .v-banner-text {
   -webkit-box-orient: vertical;
-  align-self: center;
   display: -webkit-box;
-  line-height: 1.375rem;
+  grid-area: text;
   overflow: hidden;
+  padding-inline-end: 90px;
 }
 .v-banner--one-line .v-banner-text {
   -webkit-line-clamp: 1;
 }
-.v-banner--two-line .v-banner-text, .v-banner--three-line .v-banner-text {
-  align-self: flex-start;
+.v-banner--two-line .v-banner-text {
   -webkit-line-clamp: 2;
 }
 .v-banner--three-line .v-banner-text {
   -webkit-line-clamp: 3;
+}
+.v-banner--two-line .v-banner-text, .v-banner--three-line .v-banner-text {
+  align-self: flex-start;
 }