vuetify 3.0.0-beta.9 → 3.0.1

package/lib/components/VSelect/VSelect.mjs

@@ -1,25 +1,24 @@
 import { createTextVNode as _createTextVNode, mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
 // Styles
-import "./VSelect.css"; // Components
+import "./VSelect.css";
 
-import { VDialogTransition } from "../transitions/index.mjs";
+// Components
+import { filterVTextFieldProps, makeVTextFieldProps } from "../VTextField/VTextField.mjs";
 import { VCheckboxBtn } from "../VCheckbox/index.mjs";
 import { VChip } from "../VChip/index.mjs";
 import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
+import { VDialogTransition } from "../transitions/index.mjs";
 import { VList, VListItem } from "../VList/index.mjs";
 import { VMenu } from "../VMenu/index.mjs";
 import { VTextField } from "../VTextField/index.mjs"; // Composables
-
 import { makeItemsProps, useItems } from "../../composables/items.mjs";
 import { makeTransitionProps } from "../../composables/transition.mjs";
 import { forwardRefs } from "../../composables/forwardRefs.mjs";
 import { useLocale } from "../../composables/locale.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs";
 import { IconValue } from "../../composables/icons.mjs"; // Utility
-
 import { computed, mergeProps, ref } from 'vue';
-import { genericComponent, propsFactory, useRender, wrapInArray } from "../../util/index.mjs"; // Types
-
+import { genericComponent, omit, propsFactory, useRender, wrapInArray } from "../../util/index.mjs"; // Types
 export const makeSelectProps = propsFactory({
   chips: Boolean,
   closableChips: Boolean,
@@ -34,10 +33,6 @@ export const makeSelectProps = propsFactory({
   menuProps: {
     type: Object
   },
-  modelValue: {
-    type: null,
-    default: () => []
-  },
   multiple: Boolean,
   noDataText: {
     type: String,
@@ -47,10 +42,14 @@ export const makeSelectProps = propsFactory({
   ...makeItemsProps({
     itemChildren: false
   })
-}, 'select');
+}, 'v-select');
 export const VSelect = genericComponent()({
   name: 'VSelect',
-  props: { ...makeSelectProps(),
+  props: {
+    ...makeSelectProps(),
+    ...omit(makeVTextFieldProps({
+      modelValue: null
+    }), ['validationValue', 'dirty', 'appendInnerIcon']),
     ...makeTransitionProps({
       transition: {
         component: VDialogTransition
@@ -61,7 +60,6 @@ export const VSelect = genericComponent()({
     'update:modelValue': val => true,
     'update:menu': val => true
   },
-
   setup(props, _ref) {
     let {
       slots
@@ -77,10 +75,8 @@ export const VSelect = genericComponent()({
       transformOut
     } = useItems(props);
     const model = useProxiedModel(props, 'modelValue', [], v => transformIn(wrapInArray(v)), v => {
-      var _transformed$;
-
       const transformed = transformOut(v);
-      return props.multiple ? transformed : (_transformed$ = transformed[0]) != null ? _transformed$ : null;
+      return props.multiple ? transformed : transformed[0] ?? null;
     });
     const selections = computed(() => {
       return model.value.map(v => {
@@ -88,34 +84,46 @@ export const VSelect = genericComponent()({
       });
     });
     const selected = computed(() => selections.value.map(selection => selection.props.value));
-
+    const listRef = ref();
     function onClear(e) {
       model.value = [];
-
       if (props.openOnClear) {
         menu.value = true;
       }
     }
-
     function onClickControl() {
-      if (props.hideNoData && !items.value.length) return;
+      if (props.hideNoData && !items.value.length || props.readonly) return;
       menu.value = !menu.value;
     }
-
     function onKeydown(e) {
+      if (props.readonly) return;
       if (['Enter', 'ArrowDown', ' '].includes(e.key)) {
+        e.preventDefault();
         menu.value = true;
       }
-
       if (['Escape', 'Tab'].includes(e.key)) {
         menu.value = false;
       }
+      if (e.key === 'ArrowDown') {
+        var _listRef$value;
+        (_listRef$value = listRef.value) == null ? void 0 : _listRef$value.focus('next');
+      } else if (e.key === 'ArrowUp') {
+        var _listRef$value2;
+        e.preventDefault();
+        (_listRef$value2 = listRef.value) == null ? void 0 : _listRef$value2.focus('prev');
+      } else if (e.key === 'Home') {
+        var _listRef$value3;
+        e.preventDefault();
+        (_listRef$value3 = listRef.value) == null ? void 0 : _listRef$value3.focus('first');
+      } else if (e.key === 'End') {
+        var _listRef$value4;
+        e.preventDefault();
+        (_listRef$value4 = listRef.value) == null ? void 0 : _listRef$value4.focus('last');
+      }
     }
-
     function select(item) {
       if (props.multiple) {
         const index = selected.value.findIndex(selection => selection === item.value);
-
         if (index === -1) {
           model.value = [...model.value, item];
         } else {
@@ -128,31 +136,46 @@ export const VSelect = genericComponent()({
         menu.value = false;
       }
     }
-
+    function onBlur(e) {
+      var _listRef$value5;
+      if (!((_listRef$value5 = listRef.value) != null && _listRef$value5.$el.contains(e.relatedTarget))) {
+        menu.value = false;
+      }
+    }
+    function onFocusout(e) {
+      if (e.relatedTarget == null) {
+        var _vTextFieldRef$value;
+        (_vTextFieldRef$value = vTextFieldRef.value) == null ? void 0 : _vTextFieldRef$value.focus();
+      }
+    }
     useRender(() => {
       const hasChips = !!(props.chips || slots.chip);
-      return _createVNode(VTextField, {
-        "ref": vTextFieldRef,
+      const [textFieldProps] = filterVTextFieldProps(props);
+      return _createVNode(VTextField, _mergeProps({
+        "ref": vTextFieldRef
+      }, textFieldProps, {
         "modelValue": model.value.map(v => v.props.value).join(', '),
         "onUpdate:modelValue": v => {
           if (v == null) model.value = [];
         },
-        "validationValue": props.modelValue,
+        "validationValue": model.externalValue,
+        "dirty": model.value.length > 0,
         "class": ['v-select', {
           'v-select--active-menu': menu.value,
           'v-select--chips': !!props.chips,
-          [`v-select--${props.multiple ? 'multiple' : 'single'}`]: true
+          [`v-select--${props.multiple ? 'multiple' : 'single'}`]: true,
+          'v-select--selected': model.value.length
         }],
         "appendInnerIcon": props.menuIcon,
         "readonly": true,
         "onClick:clear": onClear,
         "onClick:control": onClickControl,
-        "onBlur": () => menu.value = false,
+        "onBlur": onBlur,
         "onKeydown": onKeydown
-      }, { ...slots,
+      }), {
+        ...slots,
         default: () => {
-          var _slots$noData, _slots$noData2, _slots$prependItem, _slots$appendItem;
-
+          var _slots$noData, _slots$prependItem, _slots$appendItem;
           return _createVNode(_Fragment, null, [_createVNode(VMenu, _mergeProps({
             "modelValue": menu.value,
             "onUpdate:modelValue": $event => menu.value = $event,
@@ -164,22 +187,23 @@ export const VSelect = genericComponent()({
             "transition": props.transition
           }, props.menuProps), {
             default: () => [_createVNode(VList, {
+              "ref": listRef,
               "selected": selected.value,
               "selectStrategy": props.multiple ? 'independent' : 'single-independent',
-              "onMousedown": e => e.preventDefault()
+              "onMousedown": e => e.preventDefault(),
+              "onFocusout": onFocusout
             }, {
-              default: () => [!items.value.length && !props.hideNoData && ((_slots$noData = (_slots$noData2 = slots['no-data']) == null ? void 0 : _slots$noData2.call(slots)) != null ? _slots$noData : _createVNode(VListItem, {
+              default: () => [!items.value.length && !props.hideNoData && (((_slots$noData = slots['no-data']) == null ? void 0 : _slots$noData.call(slots)) ?? _createVNode(VListItem, {
                 "title": t(props.noDataText)
               }, null)), (_slots$prependItem = slots['prepend-item']) == null ? void 0 : _slots$prependItem.call(slots), items.value.map((item, index) => {
-                var _slots$item, _slots$item2;
-
-                return (_slots$item = (_slots$item2 = slots.item) == null ? void 0 : _slots$item2.call(slots, {
+                var _slots$item;
+                return ((_slots$item = slots.item) == null ? void 0 : _slots$item.call(slots, {
                   item,
                   index,
                   props: mergeProps(item.props, {
                     onClick: () => select(item)
                   })
-                })) != null ? _slots$item : _createVNode(VListItem, _mergeProps({
+                })) ?? _createVNode(VListItem, _mergeProps({
                   "key": index
                 }, item.props, {
                   "onClick": () => select(item)
@@ -202,13 +226,13 @@ export const VSelect = genericComponent()({
               e.preventDefault();
               select(item);
             }
-
             const slotProps = {
               'onClick:close': onChipClose,
-              modelValue: true
+              modelValue: true,
+              'onUpdate:modelValue': undefined
             };
             return _createVNode("div", {
-              "key": index,
+              "key": item.value,
               "class": "v-select__selection"
             }, [hasChips ? _createVNode(VDefaultsProvider, {
               "defaults": {
@@ -241,6 +265,5 @@ export const VSelect = genericComponent()({
       select
     }, vTextFieldRef);
   }
-
 });
 //# sourceMappingURL=VSelect.mjs.map

package/lib/components/VSelect/VSelect.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VSelect.mjs","names":["VDialogTransition","VCheckboxBtn","VChip","VDefaultsProvider","VList","VListItem","VMenu","VTextField","makeItemsProps","useItems","makeTransitionProps","forwardRefs","useLocale","useProxiedModel","IconValue","computed","mergeProps","ref","genericComponent","propsFactory","useRender","wrapInArray","makeSelectProps","chips","Boolean","closableChips","eager","hideNoData","hideSelected","menu","menuIcon","type","default","menuProps","Object","modelValue","multiple","noDataText","String","openOnClear","itemChildren","VSelect","name","props","transition","component","emits","val","setup","slots","t","vTextFieldRef","items","transformIn","transformOut","model","v","transformed","selections","value","map","find","item","selected","selection","onClear","e","onClickControl","length","onKeydown","includes","key","select","index","findIndex","splice","hasChips","chip","join","preventDefault","onClick","prepend","isSelected","undefined","onChipClose","stopPropagation","slotProps","closable","size","text","title"],"sources":["../../../src/components/VSelect/VSelect.tsx"],"sourcesContent":["// Styles\nimport './VSelect.sass'\n\n// Components\nimport { VDialogTransition } from '@/components/transitions'\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 { makeItemsProps, useItems } from '@/composables/items'\nimport { makeTransitionProps } from '@/composables/transition'\nimport { forwardRefs } from '@/composables/forwardRefs'\nimport { useLocale } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { IconValue } from '@/composables/icons'\n\n// Utility\nimport { computed, mergeProps, ref } from 'vue'\nimport { genericComponent, propsFactory, useRender, wrapInArray } from '@/util'\n\n// Types\nimport type { VInputSlots } from '@/components/VInput/VInput'\nimport type { VFieldSlots } from '@/components/VField/VField'\nimport type { InternalItem } from '@/composables/items'\nimport type { MakeSlots } from '@/util'\nimport type { PropType } from 'vue'\n\nexport const makeSelectProps = propsFactory({\n  chips: Boolean,\n  closableChips: Boolean,\n  eager: Boolean,\n  hideNoData: Boolean,\n  hideSelected: Boolean,\n  menu: Boolean,\n  menuIcon: {\n    type: IconValue,\n    default: '$dropdown',\n  },\n  menuProps: {\n    type: Object as PropType<VMenu['$props']>,\n  },\n  modelValue: {\n    type: null,\n    default: () => ([]),\n  },\n  multiple: Boolean,\n  noDataText: {\n    type: String,\n    default: '$vuetify.noDataText',\n  },\n  openOnClear: Boolean,\n\n  ...makeItemsProps({ itemChildren: false }),\n}, 'select')\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 VSelect = 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: 'VSelect',\n\n  props: {\n    ...makeSelectProps(),\n    ...makeTransitionProps({ transition: { component: VDialogTransition } }),\n  },\n\n  emits: {\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<VTextField>()\n    const menu = useProxiedModel(props, 'menu')\n    const { items, transformIn, transformOut } = useItems(props)\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 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    function onClickControl () {\n      if (props.hideNoData && !items.value.length) return\n\n      menu.value = !menu.value\n    }\n    function onKeydown (e: KeyboardEvent) {\n      if (['Enter', 'ArrowDown', ' '].includes(e.key)) {\n        menu.value = true\n      }\n\n      if (['Escape', 'Tab'].includes(e.key)) {\n        menu.value = false\n      }\n    }\n    function select (item: InternalItem) {\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        } else {\n          const value = [...model.value]\n          value.splice(index, 1)\n          model.value = value\n        }\n      } else {\n        model.value = [item]\n        menu.value = false\n      }\n    }\n\n    useRender(() => {\n      const hasChips = !!(props.chips || slots.chip)\n\n      return (\n        <VTextField\n          ref={ vTextFieldRef }\n          modelValue={ model.value.map(v => v.props.value).join(', ') }\n          onUpdate:modelValue={ v => { if (v == null) model.value = [] } }\n          validationValue={ props.modelValue }\n          class={[\n            'v-select',\n            {\n              'v-select--active-menu': menu.value,\n              'v-select--chips': !!props.chips,\n              [`v-select--${props.multiple ? 'multiple' : 'single'}`]: true,\n            },\n          ]}\n          appendInnerIcon={ props.menuIcon }\n          readonly\n          onClick:clear={ onClear }\n          onClick:control={ onClickControl }\n          onBlur={ () => menu.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-select__content\"\n                  eager={ props.eager }\n                  openOnClick={ false }\n                  closeOnContentClick={ false }\n                  transition={ props.transition }\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                    { !items.value.length && !props.hideNoData && (slots['no-data']?.() ?? (\n                      <VListItem title={ t(props.noDataText) } />\n                    )) }\n\n                    { slots['prepend-item']?.() }\n\n                    { items.value.map((item, 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                        }}\n                      </VListItem>\n                    )) }\n\n                    { slots['append-item']?.() }\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-select__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-select__selection-text\">\n                              { item.title }\n                              { props.multiple && (index < selections.value.length - 1) && (\n                                <span class=\"v-select__selection-comma\">,</span>\n                              ) }\n                            </span>\n                          )\n                      )}\n                    </div>\n                  )\n                }) }\n              </>\n            ),\n          }}\n        </VTextField>\n      )\n    })\n\n    return forwardRefs({\n      menu,\n      select,\n    }, vTextFieldRef)\n  },\n})\n\nexport type VSelect = InstanceType<typeof VSelect>\n"],"mappings":"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"}
+{"version":3,"file":"VSelect.mjs","names":["filterVTextFieldProps","makeVTextFieldProps","VCheckboxBtn","VChip","VDefaultsProvider","VDialogTransition","VList","VListItem","VMenu","VTextField","makeItemsProps","useItems","makeTransitionProps","forwardRefs","useLocale","useProxiedModel","IconValue","computed","mergeProps","ref","genericComponent","omit","propsFactory","useRender","wrapInArray","makeSelectProps","chips","Boolean","closableChips","eager","hideNoData","hideSelected","menu","menuIcon","type","default","menuProps","Object","multiple","noDataText","String","openOnClear","itemChildren","VSelect","name","props","modelValue","transition","component","emits","val","setup","slots","t","vTextFieldRef","items","transformIn","transformOut","model","v","transformed","selections","value","map","find","item","selected","selection","listRef","onClear","e","onClickControl","length","readonly","onKeydown","includes","key","preventDefault","focus","select","index","findIndex","splice","onBlur","$el","contains","relatedTarget","onFocusout","hasChips","chip","textFieldProps","join","externalValue","onClick","prepend","isSelected","undefined","onChipClose","stopPropagation","slotProps","closable","size","text","title"],"sources":["../../../src/components/VSelect/VSelect.tsx"],"sourcesContent":["// Styles\nimport './VSelect.sass'\n\n// Components\nimport { filterVTextFieldProps, makeVTextFieldProps } from '@/components/VTextField/VTextField'\nimport { VCheckboxBtn } from '@/components/VCheckbox'\nimport { VChip } from '@/components/VChip'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VDialogTransition } from '@/components/transitions'\nimport { VList, VListItem } from '@/components/VList'\nimport { VMenu } from '@/components/VMenu'\nimport { VTextField } from '@/components/VTextField'\n\n// Composables\nimport { makeItemsProps, useItems } from '@/composables/items'\nimport { makeTransitionProps } from '@/composables/transition'\nimport { forwardRefs } from '@/composables/forwardRefs'\nimport { useLocale } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { IconValue } from '@/composables/icons'\n\n// Utility\nimport { computed, mergeProps, ref } from 'vue'\nimport { genericComponent, omit, propsFactory, useRender, wrapInArray } from '@/util'\n\n// Types\nimport type { VInputSlots } from '@/components/VInput/VInput'\nimport type { VFieldSlots } from '@/components/VField/VField'\nimport type { InternalItem } from '@/composables/items'\nimport type { MakeSlots, SlotsToProps } from '@/util'\nimport type { PropType } from 'vue'\n\nexport const makeSelectProps = propsFactory({\n  chips: Boolean,\n  closableChips: Boolean,\n  eager: Boolean,\n  hideNoData: Boolean,\n  hideSelected: Boolean,\n  menu: Boolean,\n  menuIcon: {\n    type: IconValue,\n    default: '$dropdown',\n  },\n  menuProps: {\n    type: Object as PropType<VMenu['$props']>,\n  },\n  multiple: Boolean,\n  noDataText: {\n    type: String,\n    default: '$vuetify.noDataText',\n  },\n  openOnClear: Boolean,\n\n  ...makeItemsProps({ itemChildren: false }),\n}, 'v-select')\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    ? readonly Val<T, ReturnObject>[]\n    : Val<T, ReturnObject>\n\nexport const VSelect = 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?: V\n    'onUpdate:modelValue'?: (val: V) => void\n  } & SlotsToProps<\n    Omit<VInputSlots & VFieldSlots, 'default'> & MakeSlots<{\n      item: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]\n      chip: [{ item: InternalItem<T>, index: number, props: Record<string, unknown> }]\n      selection: [{ item: InternalItem<T>, index: number }]\n      'prepend-item': []\n      'append-item': []\n      'no-data': []\n    }>\n  >\n}>()({\n  name: 'VSelect',\n\n  props: {\n    ...makeSelectProps(),\n    ...omit(makeVTextFieldProps({\n      modelValue: null,\n    }), ['validationValue', 'dirty', 'appendInnerIcon']),\n    ...makeTransitionProps({ transition: { component: VDialogTransition } }),\n  },\n\n  emits: {\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 menu = useProxiedModel(props, 'menu')\n    const { items, transformIn, transformOut } = useItems(props)\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 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    const listRef = ref<VList>()\n\n    function onClear (e: MouseEvent) {\n      model.value = []\n\n      if (props.openOnClear) {\n        menu.value = true\n      }\n    }\n    function onClickControl () {\n      if (\n        (props.hideNoData && !items.value.length) ||\n        props.readonly\n      ) return\n\n      menu.value = !menu.value\n    }\n    function onKeydown (e: KeyboardEvent) {\n      if (props.readonly) return\n\n      if (['Enter', 'ArrowDown', ' '].includes(e.key)) {\n        e.preventDefault()\n        menu.value = true\n      }\n\n      if (['Escape', 'Tab'].includes(e.key)) {\n        menu.value = false\n      }\n\n      if (e.key === 'ArrowDown') {\n        listRef.value?.focus('next')\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault()\n        listRef.value?.focus('prev')\n      } else if (e.key === 'Home') {\n        e.preventDefault()\n        listRef.value?.focus('first')\n      } else if (e.key === 'End') {\n        e.preventDefault()\n        listRef.value?.focus('last')\n      }\n    }\n    function select (item: InternalItem) {\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        } else {\n          const value = [...model.value]\n          value.splice(index, 1)\n          model.value = value\n        }\n      } else {\n        model.value = [item]\n        menu.value = false\n      }\n    }\n    function onBlur (e: FocusEvent) {\n      if (!listRef.value?.$el.contains(e.relatedTarget as HTMLElement)) {\n        menu.value = false\n      }\n    }\n    function onFocusout (e: FocusEvent) {\n      if (e.relatedTarget == null) {\n        vTextFieldRef.value?.focus()\n      }\n    }\n\n    useRender(() => {\n      const hasChips = !!(props.chips || slots.chip)\n      const [textFieldProps] = filterVTextFieldProps(props)\n\n      return (\n        <VTextField\n          ref={ vTextFieldRef }\n          { ...textFieldProps }\n          modelValue={ model.value.map(v => v.props.value).join(', ') }\n          onUpdate:modelValue={ v => { if (v == null) model.value = [] } }\n          validationValue={ model.externalValue }\n          dirty={ model.value.length > 0 }\n          class={[\n            'v-select',\n            {\n              'v-select--active-menu': menu.value,\n              'v-select--chips': !!props.chips,\n              [`v-select--${props.multiple ? 'multiple' : 'single'}`]: true,\n              'v-select--selected': model.value.length,\n            },\n          ]}\n          appendInnerIcon={ props.menuIcon }\n          readonly\n          onClick:clear={ onClear }\n          onClick:control={ onClickControl }\n          onBlur={ onBlur }\n          onKeydown={ onKeydown }\n        >\n          {{\n            ...slots,\n            default: () => (\n              <>\n                <VMenu\n                  v-model={ menu.value }\n                  activator=\"parent\"\n                  contentClass=\"v-select__content\"\n                  eager={ props.eager }\n                  openOnClick={ false }\n                  closeOnContentClick={ false }\n                  transition={ props.transition }\n                  { ...props.menuProps }\n                >\n                  <VList\n                    ref={ listRef }\n                    selected={ selected.value }\n                    selectStrategy={ props.multiple ? 'independent' : 'single-independent' }\n                    onMousedown={ (e: MouseEvent) => e.preventDefault() }\n                    onFocusout={ onFocusout }\n                  >\n                    { !items.value.length && !props.hideNoData && (slots['no-data']?.() ?? (\n                      <VListItem title={ t(props.noDataText) } />\n                    )) }\n\n                    { slots['prepend-item']?.() }\n\n                    { items.value.map((item, 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                        }}\n                      </VListItem>\n                    )) }\n\n                    { slots['append-item']?.() }\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                    'onUpdate:modelValue': undefined,\n                  }\n\n                  return (\n                    <div key={ item.value } class=\"v-select__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-select__selection-text\">\n                              { item.title }\n                              { props.multiple && (index < selections.value.length - 1) && (\n                                <span class=\"v-select__selection-comma\">,</span>\n                              ) }\n                            </span>\n                          )\n                      )}\n                    </div>\n                  )\n                }) }\n              </>\n            ),\n          }}\n        </VTextField>\n      )\n    })\n\n    return forwardRefs({\n      menu,\n      select,\n    }, vTextFieldRef)\n  },\n})\n\nexport type VSelect = InstanceType<typeof VSelect>\n"],"mappings":"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"}

package/lib/components/VSelect/VSelect.sass

@@ -4,6 +4,10 @@
 @use '../../styles/tools'
 @use './variables' as *
 
+@at-root
+  @include tools.density('v-input', $select-chips-margin-bottom) using ($modifier)
+    --select-chips-margin-bottom: #{0px + math.div($modifier, 2)}
+
 .v-select
   .v-field
     .v-text-field__prefix,
@@ -16,9 +20,12 @@
     .v-field__input
       > input
         align-self: flex-start
-        opacity: 0
+        opacity: 1
         flex: 0 0
         position: absolute
+        width: 100%
+        transition: none
+        pointer-events: none
 
     .v-field__append-inner
       > .v-icon
@@ -56,6 +63,14 @@
   &--chips
     .v-select__selection
       margin-top: $select-chips-margin-top
+      margin-bottom: var(--select-chips-margin-bottom)
 
       &:first-child
         margin-inline-start: 0
+
+  &--selected
+    .v-field
+      .v-field__input
+        > input
+          opacity: 0
+

package/lib/components/VSelect/_variables.scss

@@ -7,3 +7,4 @@ $select-line-height: 1.75 !default;
 $select-transition: .2s settings.$standard-easing !default;
 $select-chips-control-min-height: 64px !default;
 $select-chips-margin-top: 2px !default;
+$select-chips-margin-bottom: ('default': 0, 'comfortable': 1, 'compact': 2) !default;