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

package/lib/components/VSelect/VSelect.mjs

@@ -1,4 +1,4 @@
-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 "./VSelect.css"; // Components
 
@@ -8,6 +8,7 @@ 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 { useForwardRef } from "../../composables/forwardRef.mjs";
 import { useLocale } from "../../composables/locale.mjs";
@@ -16,24 +17,12 @@ import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utility
 import { computed, ref, watch } from 'vue';
 import { genericComponent, propsFactory, useRender, wrapInArray } from "../../util/index.mjs"; // Types
 
-export function genItem(item) {
-  var _ref;
-
-  return {
-    title: String((_ref = typeof item === 'object' ? item.title : item) != null ? _ref : ''),
-    value: typeof item === 'object' ? item.value : item
-  };
-}
 export const makeSelectProps = propsFactory({
   chips: Boolean,
   closableChips: Boolean,
   eager: Boolean,
   hideNoData: Boolean,
   hideSelected: Boolean,
-  items: {
-    type: Array,
-    default: () => []
-  },
   menuIcon: {
     type: String,
     default: '$dropdown'
@@ -47,7 +36,8 @@ export const makeSelectProps = propsFactory({
     type: String,
     default: '$vuetify.noDataText'
   },
-  openOnClear: Boolean
+  openOnClear: Boolean,
+  ...makeItemsProps()
 }, 'select');
 export const VSelect = genericComponent()({
   name: 'VSelect',
@@ -60,36 +50,21 @@ export const VSelect = genericComponent()({
     'update:modelValue': val => true
   },
 
-  setup(props, _ref2) {
+  setup(props, _ref) {
     let {
       slots
-    } = _ref2;
+    } = _ref;
     const {
       t
     } = useLocale();
     const vTextFieldRef = ref();
     const activator = ref();
     const menu = ref(false);
-    const items = computed(() => props.items.map(genItem));
+    const {
+      items
+    } = useItems(props);
     const model = useProxiedModel(props, 'modelValue', [], v => wrapInArray(v), v => props.multiple ? v : v[0]);
-    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;
-    });
+    const selections = computed(() => items.value.filter(item => model.value.includes(item.value)));
     const selected = computed(() => selections.value.map(selection => selection.value));
 
     function onClear(e) {
@@ -117,12 +92,14 @@ export const VSelect = 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];
@@ -151,62 +128,64 @@ export const VSelect = genericComponent()({
         "modelValue": model.value.join(', '),
         "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-select__content",
-          "eager": props.eager,
-          "openOnClick": false,
-          "transition": props.transition
-        }, {
-          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-select__content",
+            "eager": props.eager,
+            "openOnClick": false,
+            "transition": props.transition
           }, {
-            default: () => [!items.value.length && !props.hideNoData && _createVNode(VListItem, {
-              "title": t(props.noDataText)
-            }, null), items.value.map(item => _createVNode(VListItem, {
-              "title": item.title,
-              "value": item.value,
-              "onMousedown": e => e.preventDefault(),
-              "onClick": () => select(item)
-            }, null))]
-          })]
-        }), 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-select__selection"
-          }, [hasChips && _createVNode(VDefaultsProvider, {
-            "defaults": {
-              VChip: {
-                closable: props.closableChips,
-                size: 'small',
-                text: selection.title
-              }
+            default: () => [_createVNode(VList, {
+              "selected": selected.value,
+              "selectStrategy": props.multiple ? 'independent' : 'single-independent'
+            }, {
+              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, {
+                "title": t(props.noDataText)
+              }, null)), items.value.map(item => _createVNode(VListItem, _mergeProps(item, {
+                "onMousedown": e => e.preventDefault(),
+                "onClick": () => select(item)
+              }), null))]
+            })]
+          }), selections.value.map((selection, index) => {
+            function onChipClose(e) {
+              e.stopPropagation();
+              e.preventDefault();
+              select(selection);
             }
-          }, {
-            default: () => [slots.chip ? slots.chip({
-              props: slotProps,
+
+            const slotProps = {
+              'onClick:close': onChipClose,
+              modelValue: true
+            };
+            return _createVNode("div", {
+              "class": "v-select__selection"
+            }, [hasChips && _createVNode(VDefaultsProvider, {
+              "defaults": {
+                VChip: {
+                  closable: props.closableChips,
+                  size: 'small',
+                  text: selection.title
+                }
+              }
+            }, {
+              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-select__selection-text"
-          }, [selection.title, props.multiple && index < selections.value.length - 1 && _createVNode("span", {
-            "class": "v-select__selection-comma"
-          }, [_createTextVNode(",")])]))]);
-        })])
+            }) : _createVNode("span", {
+              "class": "v-select__selection-text"
+            }, [selection.title, props.multiple && index < selections.value.length - 1 && _createVNode("span", {
+              "class": "v-select__selection-comma"
+            }, [_createTextVNode(",")])]))]);
+          })]);
+        }
       });
     });
     return useForwardRef({}, vTextFieldRef);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VSelect/VSelect.tsx"],"names":["VChip","VDefaultsProvider","VList","VListItem","VMenu","VTextField","makeTransitionProps","useForwardRef","useLocale","useProxiedModel","computed","ref","watch","genericComponent","propsFactory","useRender","wrapInArray","genItem","item","title","String","value","makeSelectProps","chips","Boolean","closableChips","eager","hideNoData","hideSelected","items","type","Array","default","menuIcon","modelValue","Number","multiple","noDataText","openOnClear","VSelect","name","props","transition","emits","val","setup","slots","t","vTextFieldRef","activator","menu","map","model","v","selections","array","index","unwrapped","found","find","selection","push","selected","onClear","e","onClickControl","length","onKeydown","includes","key","select","findIndex","filter","$el","querySelector","hasChips","chip","join","preventDefault","onChipClose","stopPropagation","slotProps","closable","size","text"],"mappings":"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","sourcesContent":["// Styles\nimport './VSelect.sass'\n\n// Components\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 { makeTransitionProps } from '@/composables/transition'\nimport { useForwardRef } from '@/composables/forwardRef'\nimport { useLocale } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utility\nimport { computed, ref, watch } from 'vue'\nimport { genericComponent, propsFactory, useRender, wrapInArray } from '@/util'\n\n// Types\nimport type { LinkProps } from '@/composables/router'\nimport type { MakeSlots } from '@/util'\nimport type { PropType } from 'vue'\n\nexport interface InternalSelectItem {\n  title: string\n  value: any\n  index: number\n}\n\nexport interface DefaultSelectionSlot {\n  selection: InternalSelectItem\n}\n\nexport interface DefaultChipSlot extends DefaultSelectionSlot {\n  props: {\n    'onClick:close': (e: Event) => void\n    modelValue: any\n  }\n}\n\nexport type SelectItem = string | (string | number)[] | ((item: Record<string, any>, fallback?: any) => any) | (LinkProps & {\n  text: string\n})\n\nexport function genItem (item: any) {\n  return {\n    title: String((typeof item === 'object' ? item.title : item) ?? ''),\n    value: (typeof item === 'object' ? item.value : item),\n  }\n}\n\nexport const makeSelectProps = propsFactory({\n  chips: Boolean,\n  closableChips: Boolean,\n  eager: Boolean,\n  hideNoData: Boolean,\n  hideSelected: Boolean,\n  items: {\n    type: Array as PropType<SelectItem[]>,\n    default: () => ([]),\n  },\n  menuIcon: {\n    type: String,\n    default: '$dropdown',\n  },\n  modelValue: {\n    type: [Number, String, Array],\n    default: () => ([]),\n  },\n  multiple: Boolean,\n  noDataText: {\n    type: String,\n    default: '$vuetify.noDataText',\n  },\n  openOnClear: Boolean,\n}, 'select')\n\nexport const VSelect = genericComponent<new <T>() => {\n  $slots: MakeSlots<{\n    chip: [DefaultChipSlot]\n    default: []\n    selection: [DefaultSelectionSlot]\n  }>\n}>()({\n  name: 'VSelect',\n\n  props: {\n    ...makeSelectProps(),\n    ...makeTransitionProps({ transition: 'scale-transition' }),\n  },\n\n  emits: {\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 menu = ref(false)\n    const items = computed(() => props.items.map(genItem))\n    const model = useProxiedModel(\n      props,\n      'modelValue',\n      [],\n      v => wrapInArray(v),\n      (v: any) => props.multiple ? v : v[0]\n    )\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    function onClickControl () {\n      if (props.hideNoData && !items.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', 'Tab'].includes(e.key)) {\n        menu.value = false\n      }\n    }\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        menu.value = false\n      }\n    }\n\n    watch(() => vTextFieldRef.value, val => {\n      activator.value = val.$el.querySelector('.v-input__control')\n    })\n\n    useRender(() => {\n      const hasChips = !!(props.chips || slots.chip)\n\n      return (\n        <VTextField\n          ref={ vTextFieldRef }\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:input={ onClickControl }\n          onClick:control={ onClickControl }\n          onBlur={ () => menu.value = false }\n          modelValue={ model.value.join(', ') }\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-select__content\"\n                    eager={ props.eager }\n                    openOnClick={ false }\n                    transition={ props.transition }\n                  >\n                    <VList\n                      selected={ selected.value }\n                      selectStrategy={ props.multiple ? 'independent' : 'single-independent' }\n                    >\n                      { !items.value.length && !props.hideNoData && (\n                        <VListItem title={ t(props.noDataText) } />\n                      ) }\n\n                      { items.value.map(item => (\n                        <VListItem\n                          title={ item.title }\n                          value={ item.value }\n                          onMousedown={ (e: MouseEvent) => e.preventDefault() }\n                          onClick={ () => select(item) }\n                        />\n                      )) }\n                    </VList>\n                  </VMenu>\n                ) }\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-select__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-select__selection-text\">\n                              { selection.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 useForwardRef({}, vTextFieldRef)\n  },\n})\n\nexport type VSelect = InstanceType<typeof VSelect>\n"],"file":"VSelect.mjs"}
+{"version":3,"sources":["../../../src/components/VSelect/VSelect.tsx"],"names":["VChip","VDefaultsProvider","VList","VListItem","VMenu","VTextField","makeItemsProps","useItems","makeTransitionProps","useForwardRef","useLocale","useProxiedModel","computed","ref","watch","genericComponent","propsFactory","useRender","wrapInArray","makeSelectProps","chips","Boolean","closableChips","eager","hideNoData","hideSelected","menuIcon","type","String","default","modelValue","Number","Array","multiple","noDataText","openOnClear","VSelect","name","props","transition","emits","val","setup","slots","t","vTextFieldRef","activator","menu","items","model","v","selections","value","filter","item","includes","selected","map","selection","onClear","e","onClickControl","length","onKeydown","key","select","index","findIndex","splice","$el","querySelector","hasChips","chip","join","preventDefault","onChipClose","stopPropagation","slotProps","closable","size","text","title"],"mappings":";AAAA;AACA,uB,CAEA;;SACSA,K;SACAC,iB;SACAC,K,EAAOC,S;SACPC,K;SACAC,U,mCAET;;SACSC,c,EAAgBC,Q;SAChBC,mB;SACAC,a;SACAC,S;SACAC,e,8CAET;;AACA,SAASC,QAAT,EAAmBC,GAAnB,EAAwBC,KAAxB,QAAqC,KAArC;SACSC,gB,EAAkBC,Y,EAAcC,S,EAAWC,W,gCAEpD;;AAyBA,OAAO,MAAMC,eAAe,GAAGH,YAAY,CAAC;AAC1CI,EAAAA,KAAK,EAAEC,OADmC;AAE1CC,EAAAA,aAAa,EAAED,OAF2B;AAG1CE,EAAAA,KAAK,EAAEF,OAHmC;AAI1CG,EAAAA,UAAU,EAAEH,OAJ8B;AAK1CI,EAAAA,YAAY,EAAEJ,OAL4B;AAM1CK,EAAAA,QAAQ,EAAE;AACRC,IAAAA,IAAI,EAAEC,MADE;AAERC,IAAAA,OAAO,EAAE;AAFD,GANgC;AAU1CC,EAAAA,UAAU,EAAE;AACVH,IAAAA,IAAI,EAAE,CAACI,MAAD,EAASH,MAAT,EAAiBI,KAAjB,CADI;AAEVH,IAAAA,OAAO,EAAE,MAAO;AAFN,GAV8B;AAc1CI,EAAAA,QAAQ,EAAEZ,OAdgC;AAe1Ca,EAAAA,UAAU,EAAE;AACVP,IAAAA,IAAI,EAAEC,MADI;AAEVC,IAAAA,OAAO,EAAE;AAFC,GAf8B;AAmB1CM,EAAAA,WAAW,EAAEd,OAnB6B;AAqB1C,KAAGf,cAAc;AArByB,CAAD,EAsBxC,QAtBwC,CAApC;AAwBP,OAAO,MAAM8B,OAAO,GAAGrB,gBAAgB,GAMlC;AACHsB,EAAAA,IAAI,EAAE,SADH;AAGHC,EAAAA,KAAK,EAAE,EACL,GAAGnB,eAAe,EADb;AAEL,OAAGX,mBAAmB,CAAC;AAAE+B,MAAAA,UAAU,EAAE;AAAd,KAAD;AAFjB,GAHJ;AAQHC,EAAAA,KAAK,EAAE;AACL,yBAAsBC,GAAD,IAAc;AAD9B,GARJ;;AAYHC,EAAAA,KAAK,CAAEJ,KAAF,QAAoB;AAAA,QAAX;AAAEK,MAAAA;AAAF,KAAW;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAQlC,SAAS,EAAvB;AACA,UAAMmC,aAAa,GAAGhC,GAAG,EAAzB;AACA,UAAMiC,SAAS,GAAGjC,GAAG,EAArB;AACA,UAAMkC,IAAI,GAAGlC,GAAG,CAAC,KAAD,CAAhB;AACA,UAAM;AAAEmC,MAAAA;AAAF,QAAYzC,QAAQ,CAAC+B,KAAD,CAA1B;AACA,UAAMW,KAAK,GAAGtC,eAAe,CAC3B2B,KAD2B,EAE3B,YAF2B,EAG3B,EAH2B,EAI3BY,CAAC,IAAIhC,WAAW,CAACgC,CAAD,CAJW,EAK1BA,CAAD,IAAYZ,KAAK,CAACL,QAAN,GAAiBiB,CAAjB,GAAqBA,CAAC,CAAC,CAAD,CALP,CAA7B;AAOA,UAAMC,UAAU,GAAGvC,QAAQ,CAAC,MAAMoC,KAAK,CAACI,KAAN,CAAYC,MAAZ,CAAmBC,IAAI,IAAIL,KAAK,CAACG,KAAN,CAAYG,QAAZ,CAAqBD,IAAI,CAACF,KAA1B,CAA3B,CAAP,CAA3B;AACA,UAAMI,QAAQ,GAAG5C,QAAQ,CAAC,MAAMuC,UAAU,CAACC,KAAX,CAAiBK,GAAjB,CAAqBC,SAAS,IAAIA,SAAS,CAACN,KAA5C,CAAP,CAAzB;;AAEA,aAASO,OAAT,CAAkBC,CAAlB,EAAiC;AAC/BX,MAAAA,KAAK,CAACG,KAAN,GAAc,EAAd;;AAEA,UAAId,KAAK,CAACH,WAAV,EAAuB;AACrBY,QAAAA,IAAI,CAACK,KAAL,GAAa,IAAb;AACD;AACF;;AACD,aAASS,cAAT,GAA2B;AACzB,UAAIvB,KAAK,CAACd,UAAN,IAAoB,CAACwB,KAAK,CAACI,KAAN,CAAYU,MAArC,EAA6C;AAE7Cf,MAAAA,IAAI,CAACK,KAAL,GAAa,IAAb;AACD;;AACD,aAASW,SAAT,CAAoBH,CAApB,EAAsC;AACpC,UAAI,CAAC,OAAD,EAAU,WAAV,EAAuB,GAAvB,EAA4BL,QAA5B,CAAqCK,CAAC,CAACI,GAAvC,CAAJ,EAAiD;AAC/CjB,QAAAA,IAAI,CAACK,KAAL,GAAa,IAAb;AACD;;AAED,UAAI,CAAC,QAAD,EAAW,KAAX,EAAkBG,QAAlB,CAA2BK,CAAC,CAACI,GAA7B,CAAJ,EAAuC;AACrCjB,QAAAA,IAAI,CAACK,KAAL,GAAa,KAAb;AACD;AACF;;AACD,aAASa,MAAT,CAAiBX,IAAjB,EAA4B;AAC1B,UAAIhB,KAAK,CAACL,QAAV,EAAoB;AAClB,cAAMiC,KAAK,GAAGV,QAAQ,CAACJ,KAAT,CAAee,SAAf,CAAyBT,SAAS,IAAIA,SAAS,KAAKJ,IAAI,CAACF,KAAzD,CAAd;;AAEA,YAAIc,KAAK,KAAK,CAAC,CAAf,EAAkB;AAChBjB,UAAAA,KAAK,CAACG,KAAN,GAAc,CAAC,GAAGH,KAAK,CAACG,KAAV,EAAiBE,IAAI,CAACF,KAAtB,CAAd;AACD,SAFD,MAEO;AACL,gBAAMA,KAAK,GAAG,CAAC,GAAGH,KAAK,CAACG,KAAV,CAAd;AACAA,UAAAA,KAAK,CAACgB,MAAN,CAAaF,KAAb,EAAoB,CAApB;AACAjB,UAAAA,KAAK,CAACG,KAAN,GAAcA,KAAd;AACD;AACF,OAVD,MAUO;AACLH,QAAAA,KAAK,CAACG,KAAN,GAAc,CAACE,IAAI,CAACF,KAAN,CAAd;AACAL,QAAAA,IAAI,CAACK,KAAL,GAAa,KAAb;AACD;AACF;;AAEDtC,IAAAA,KAAK,CAAC,MAAM+B,aAAa,CAACO,KAArB,EAA4BX,GAAG,IAAI;AACtCK,MAAAA,SAAS,CAACM,KAAV,GAAkBX,GAAG,CAAC4B,GAAJ,CAAQC,aAAR,CAAsB,mBAAtB,CAAlB;AACD,KAFI,CAAL;AAIArD,IAAAA,SAAS,CAAC,MAAM;AACd,YAAMsD,QAAQ,GAAG,CAAC,EAAEjC,KAAK,CAAClB,KAAN,IAAeuB,KAAK,CAAC6B,IAAvB,CAAlB;AAEA;AAAA,eAEU3B,aAFV;AAAA,iBAGW,CACL,UADK,EAEL;AACE,mCAAyBE,IAAI,CAACK,KADhC;AAEE,6BAAmB,CAAC,CAACd,KAAK,CAAClB,KAF7B;AAGE,WAAE,aAAYkB,KAAK,CAACL,QAAN,GAAiB,UAAjB,GAA8B,QAAS,EAArD,GAAyD;AAH3D,SAFK,CAHX;AAAA,2BAWsBK,KAAK,CAACZ,QAX5B;AAAA;AAAA,yBAaoBiC,OAbpB;AAAA,yBAcoBE,cAdpB;AAAA,2BAesBA,cAftB;AAAA,kBAgBa,MAAMd,IAAI,CAACK,KAAL,GAAa,KAhBhC;AAAA,sBAiBiBH,KAAK,CAACG,KAAN,CAAYqB,IAAZ,CAAiB,IAAjB,CAjBjB;AAAA,qBAkBgBV;AAlBhB,WAqBM,GAAGpB,KArBT;AAsBMd,QAAAA,OAAO,EAAE;AAAA;;AAAA,gDAEHiB,SAAS,CAACM,KAAV;AAAA,0BAEYL,IAAI,CAACK,KAFjB;AAAA,6CAEYL,IAAI,CAACK,KAFjB;AAAA,yBAGcN,SAAS,CAACM,KAHxB;AAAA,4BAIe,mBAJf;AAAA,qBAKUd,KAAK,CAACf,KALhB;AAAA,2BAMgB,KANhB;AAAA,0BAOee,KAAK,CAACC;AAPrB;AAAA;AAAA,0BAUeiB,QAAQ,CAACJ,KAVxB;AAAA,gCAWqBd,KAAK,CAACL,QAAN,GAAiB,aAAjB,GAAiC;AAXtD;AAAA,8BAaM,CAACe,KAAK,CAACI,KAAN,CAAYU,MAAb,IAAuB,CAACxB,KAAK,CAACd,UAA9B,wCAA6CmB,KAAK,CAAC,SAAD,CAAlD,qBAA6C,oBAAAA,KAAK,CAAlD;AAAA,yBACmBC,CAAC,CAACN,KAAK,CAACJ,UAAP;AADpB,uBAbN,EAiBMc,KAAK,CAACI,KAAN,CAAYK,GAAZ,CAAgBH,IAAI,wCAEbA,IAFa;AAAA,+BAGHM,CAAD,IAAmBA,CAAC,CAACc,cAAF,EAHf;AAAA,2BAIR,MAAMT,MAAM,CAACX,IAAD;AAJJ,uBAApB,CAjBN;AAAA;AAAA,YAFG,EA8BHH,UAAU,CAACC,KAAX,CAAiBK,GAAjB,CAAqB,CAACC,SAAD,EAAYQ,KAAZ,KAAsB;AAC3C,qBAASS,WAAT,CAAsBf,CAAtB,EAAgC;AAC9BA,cAAAA,CAAC,CAACgB,eAAF;AACAhB,cAAAA,CAAC,CAACc,cAAF;AAEAT,cAAAA,MAAM,CAACP,SAAD,CAAN;AACD;;AAED,kBAAMmB,SAAS,GAAG;AAChB,+BAAiBF,WADD;AAEhB7C,cAAAA,UAAU,EAAE;AAFI,aAAlB;AAKA;AAAA,uBACa;AADb,gBAEMyC,QAAQ;AAAA,0BAEI;AACRvE,gBAAAA,KAAK,EAAE;AACL8E,kBAAAA,QAAQ,EAAExC,KAAK,CAAChB,aADX;AAELyD,kBAAAA,IAAI,EAAE,OAFD;AAGLC,kBAAAA,IAAI,EAAEtB,SAAS,CAACuB;AAHX;AADC;AAFJ;AAAA,8BAUJtC,KAAK,CAAC6B,IAAN,GACE7B,KAAK,CAAC6B,IAAN,CAAW;AAAElC,gBAAAA,KAAK,EAAEuC,SAAT;AAAoBnB,gBAAAA;AAApB,eAAX,CADF,uBAEemB,SAFf,OAVI;AAAA,cAFd,EAmBM,CAACN,QAAD,KACA5B,KAAK,CAACe,SAAN,GACIf,KAAK,CAACe,SAAN,CAAgB;AAAEA,cAAAA;AAAF,aAAhB,CADJ;AAAA,uBAGgB;AAHhB,gBAIQA,SAAS,CAACuB,KAJlB,EAKQ3C,KAAK,CAACL,QAAN,IAAmBiC,KAAK,GAAGf,UAAU,CAACC,KAAX,CAAiBU,MAAjB,GAA0B,CAArD;AAAA,uBACY;AADZ,uCALR,EADA,CAnBN;AAiCD,WA9CC,CA9BG;AAAA;AAtBf;AAwGD,KA3GQ,CAAT;AA6GA,WAAOrD,aAAa,CAAC,EAAD,EAAKoC,aAAL,CAApB;AACD;;AApLE,CANkC,CAAhC","sourcesContent":["// Styles\nimport './VSelect.sass'\n\n// Components\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 { useForwardRef } from '@/composables/forwardRef'\nimport { useLocale } from '@/composables/locale'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utility\nimport { computed, ref, watch } from 'vue'\nimport { genericComponent, propsFactory, useRender, wrapInArray } from '@/util'\n\n// Types\nimport type { LinkProps } from '@/composables/router'\nimport type { MakeSlots } from '@/util'\n\nexport interface InternalSelectItem {\n  title: string\n  value: any\n  index: number\n}\n\nexport interface DefaultSelectionSlot {\n  selection: InternalSelectItem\n}\n\nexport interface DefaultChipSlot extends DefaultSelectionSlot {\n  props: {\n    'onClick:close': (e: Event) => void\n    modelValue: any\n  }\n}\n\nexport type SelectItem = string | (string | number)[] | ((item: Record<string, any>, fallback?: any) => any) | (LinkProps & {\n  text: string\n})\n\nexport const makeSelectProps = propsFactory({\n  chips: Boolean,\n  closableChips: Boolean,\n  eager: Boolean,\n  hideNoData: Boolean,\n  hideSelected: Boolean,\n  menuIcon: {\n    type: String,\n    default: '$dropdown',\n  },\n  modelValue: {\n    type: [Number, String, Array],\n    default: () => ([]),\n  },\n  multiple: Boolean,\n  noDataText: {\n    type: String,\n    default: '$vuetify.noDataText',\n  },\n  openOnClear: Boolean,\n\n  ...makeItemsProps(),\n}, 'select')\n\nexport const VSelect = genericComponent<new <T>() => {\n  $slots: MakeSlots<{\n    chip: [DefaultChipSlot]\n    default: []\n    selection: [DefaultSelectionSlot]\n  }>\n}>()({\n  name: 'VSelect',\n\n  props: {\n    ...makeSelectProps(),\n    ...makeTransitionProps({ transition: 'scale-transition' }),\n  },\n\n  emits: {\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 menu = ref(false)\n    const { items } = useItems(props)\n    const model = useProxiedModel(\n      props,\n      'modelValue',\n      [],\n      v => wrapInArray(v),\n      (v: any) => props.multiple ? v : v[0]\n    )\n    const selections = computed(() => items.value.filter(item => model.value.includes(item.value)))\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    function onClickControl () {\n      if (props.hideNoData && !items.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', 'Tab'].includes(e.key)) {\n        menu.value = false\n      }\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.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        menu.value = false\n      }\n    }\n\n    watch(() => vTextFieldRef.value, val => {\n      activator.value = val.$el.querySelector('.v-input__control')\n    })\n\n    useRender(() => {\n      const hasChips = !!(props.chips || slots.chip)\n\n      return (\n        <VTextField\n          ref={ vTextFieldRef }\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:input={ onClickControl }\n          onClick:control={ onClickControl }\n          onBlur={ () => menu.value = false }\n          modelValue={ model.value.join(', ') }\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-select__content\"\n                    eager={ props.eager }\n                    openOnClick={ false }\n                    transition={ props.transition }\n                  >\n                    <VList\n                      selected={ selected.value }\n                      selectStrategy={ props.multiple ? 'independent' : 'single-independent' }\n                    >\n                      { !items.value.length && !props.hideNoData && (slots['no-data']?.() ?? (\n                        <VListItem title={ t(props.noDataText) } />\n                      )) }\n\n                      { items.value.map(item => (\n                        <VListItem\n                          { ...item }\n                          onMousedown={ (e: MouseEvent) => e.preventDefault() }\n                          onClick={ () => select(item) }\n                        />\n                      )) }\n                    </VList>\n                  </VMenu>\n                ) }\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-select__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-select__selection-text\">\n                              { selection.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 useForwardRef({}, vTextFieldRef)\n  },\n})\n\nexport type VSelect = InstanceType<typeof VSelect>\n"],"file":"VSelect.mjs"}

package/lib/components/VSelectionControl/VSelectionControl.mjs

@@ -63,6 +63,7 @@ export function useSelectionControl(props) {
     },
 
     set(val) {
+      if (props.readonly) return;
       const currentValue = val ? trueValue.value : falseValue.value;
       let newVal = currentValue;
 
@@ -177,7 +178,7 @@ export const VSelectionControl = genericComponent()({
         "id": id.value,
         "onBlur": onBlur,
         "onFocus": onFocus,
-        "readonly": props.readonly,
+        "aria-readonly": props.readonly,
         "type": type,
         "value": trueValue.value,
         "name": (_group$name$value = group == null ? void 0 : group.name.value) != null ? _group$name$value : props.name,

package/lib/components/VSelectionControl/VSelectionControl.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VSelectionControl/VSelectionControl.tsx"],"names":["VIcon","VLabel","VSelectionControlGroupSymbol","makeDensityProps","useDensity","makeThemeProps","useProxiedModel","useTextColor","Ripple","computed","inject","ref","deepEqual","genericComponent","getUid","pick","propsFactory","SUPPORTS_FOCUS_VISIBLE","useRender","wrapInArray","makeSelectionControlProps","color","String","disabled","Boolean","error","id","inline","label","falseIcon","trueIcon","ripple","type","default","multiple","name","readonly","trueValue","falseValue","modelValue","value","valueComparator","Function","useSelectionControl","props","group","undefined","densityClasses","isMultiple","Array","isArray","model","get","val","some","v","set","currentValue","newVal","filter","item","textColorClasses","textColorStyles","icon","VSelectionControl","directives","inheritAttrs","emits","setup","attrs","slots","uid","isFocused","isFocusVisible","input","onFocus","e","target","matches","onBlur","for","filterControlProps","Object","keys"],"mappings":";AAAA;AACA,iC,CAEA;;SACSA,K;SACAC,M;SACAC,4B,gEAET;;SACSC,gB,EAAkBC,U;SAClBC,c;SACAC,e;SACAC,Y,uCAET;;SACSC,M,6CAET;;AACA,SAASC,QAAT,EAAmBC,MAAnB,EAA2BC,GAA3B,QAAsC,KAAtC;SAEEC,S,EACAC,gB,EACAC,M,EACAC,I,EACAC,Y,EACAC,sB,EACAC,S,EACAC,W,gCAGF;;AAgBA,OAAO,MAAMC,yBAAyB,GAAGJ,YAAY,CAAC;AACpDK,EAAAA,KAAK,EAAEC,MAD6C;AAEpDC,EAAAA,QAAQ,EAAEC,OAF0C;AAGpDC,EAAAA,KAAK,EAAED,OAH6C;AAIpDE,EAAAA,EAAE,EAAEJ,MAJgD;AAKpDK,EAAAA,MAAM,EAAEH,OAL4C;AAMpDI,EAAAA,KAAK,EAAEN,MAN6C;AAOpDO,EAAAA,SAAS,EAAEP,MAPyC;AAQpDQ,EAAAA,QAAQ,EAAER,MAR0C;AASpDS,EAAAA,MAAM,EAAE;AACNC,IAAAA,IAAI,EAAER,OADA;AAENS,IAAAA,OAAO,EAAE;AAFH,GAT4C;AAapDC,EAAAA,QAAQ,EAAE;AACRF,IAAAA,IAAI,EAAER,OADE;AAERS,IAAAA,OAAO,EAAE;AAFD,GAb0C;AAiBpDE,EAAAA,IAAI,EAAEb,MAjB8C;AAkBpDc,EAAAA,QAAQ,EAAEZ,OAlB0C;AAmBpDa,EAAAA,SAAS,EAAE,IAnByC;AAoBpDC,EAAAA,UAAU,EAAE,IApBwC;AAqBpDC,EAAAA,UAAU,EAAE,IArBwC;AAsBpDP,EAAAA,IAAI,EAAEV,MAtB8C;AAuBpDkB,EAAAA,KAAK,EAAE,IAvB6C;AAwBpDC,EAAAA,eAAe,EAAE;AACfT,IAAAA,IAAI,EAAEU,QADS;AAEfT,IAAAA,OAAO,EAAErB;AAFM,GAxBmC;AA6BpD,KAAGP,cAAc,EA7BmC;AA8BpD,KAAGF,gBAAgB;AA9BiC,CAAD,CAA9C;AAiCP,OAAO,SAASwC,mBAAT,CACLC,KADK,EAIL;AACA,QAAMC,KAAK,GAAGnC,MAAM,CAACR,4BAAD,EAA+B4C,SAA/B,CAApB;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAqB3C,UAAU,CAACwC,KAAD,CAArC;AACA,QAAML,UAAU,GAAGjC,eAAe,CAACsC,KAAD,EAAQ,YAAR,CAAlC;AACA,QAAMP,SAAS,GAAG5B,QAAQ,CAAC,MACzBmC,KAAK,CAACP,SAAN,KAAoBS,SAApB,GAAgCF,KAAK,CAACP,SAAtC,GACEO,KAAK,CAACJ,KAAN,KAAgBM,SAAhB,GAA4BF,KAAK,CAACJ,KAAlC,GACA,IAHsB,CAA1B;AAKA,QAAMF,UAAU,GAAG7B,QAAQ,CAAC,MAAMmC,KAAK,CAACN,UAAN,KAAqBQ,SAArB,GAAiCF,KAAK,CAACN,UAAvC,GAAoD,KAA3D,CAA3B;AACA,QAAMU,UAAU,GAAGvC,QAAQ,CAAC,MAC1B,CAAAoC,KAAK,QAAL,YAAAA,KAAK,CAAEX,QAAP,CAAgBM,KAAhB,KACA,CAAC,CAACI,KAAK,CAACV,QADR,IAECU,KAAK,CAACV,QAAN,IAAkB,IAAlB,IAA0Be,KAAK,CAACC,OAAN,CAAcX,UAAU,CAACC,KAAzB,CAHF,CAA3B;AAKA,QAAMW,KAAK,GAAG1C,QAAQ,CAAC;AACrB2C,IAAAA,GAAG,GAAI;AACL,YAAMC,GAAG,GAAGR,KAAK,GAAGA,KAAK,CAACN,UAAN,CAAiBC,KAApB,GAA4BD,UAAU,CAACC,KAAxD;AAEA,aAAOQ,UAAU,CAACR,KAAX,GACHa,GAAG,CAACC,IAAJ,CAAUC,CAAD,IAAYX,KAAK,CAACH,eAAN,CAAsBc,CAAtB,EAAyBlB,SAAS,CAACG,KAAnC,CAArB,CADG,GAEHI,KAAK,CAACH,eAAN,CAAsBY,GAAtB,EAA2BhB,SAAS,CAACG,KAArC,CAFJ;AAGD,KAPoB;;AAQrBgB,IAAAA,GAAG,CAAEH,GAAF,EAAgB;AACjB,YAAMI,YAAY,GAAGJ,GAAG,GAAGhB,SAAS,CAACG,KAAb,GAAqBF,UAAU,CAACE,KAAxD;AAEA,UAAIkB,MAAM,GAAGD,YAAb;;AAEA,UAAIT,UAAU,CAACR,KAAf,EAAsB;AACpBkB,QAAAA,MAAM,GAAGL,GAAG,GACR,CAAC,GAAGlC,WAAW,CAACoB,UAAU,CAACC,KAAZ,CAAf,EAAmCiB,YAAnC,CADQ,GAERtC,WAAW,CAACoB,UAAU,CAACC,KAAZ,CAAX,CAA8BmB,MAA9B,CAAsCC,IAAD,IAAe,CAAChB,KAAK,CAACH,eAAN,CAAsBmB,IAAtB,EAA4BvB,SAAS,CAACG,KAAtC,CAArD,CAFJ;AAGD;;AAED,UAAIK,KAAJ,EAAW;AACTA,QAAAA,KAAK,CAACN,UAAN,CAAiBC,KAAjB,GAAyBkB,MAAzB;AACD,OAFD,MAEO;AACLnB,QAAAA,UAAU,CAACC,KAAX,GAAmBkB,MAAnB;AACD;AACF;;AAxBoB,GAAD,CAAtB;AA0BA,QAAM;AAAEG,IAAAA,gBAAF;AAAoBC,IAAAA;AAApB,MAAwCvD,YAAY,CAACE,QAAQ,CAAC,MAAM;AACxE,WACE0C,KAAK,CAACX,KAAN,IACA,CAACI,KAAK,CAACnB,KADP,IAEA,CAACmB,KAAK,CAACrB,QAHF,GAIHqB,KAAK,CAACvB,KAJH,GAIWyB,SAJlB;AAKD,GANkE,CAAT,CAA1D;AAOA,QAAMiB,IAAI,GAAGtD,QAAQ,CAAC,MAAM;AAAA;;AAC1B,WAAO0C,KAAK,CAACX,KAAN,4BACHK,KADG,oBACHA,KAAK,CAAEf,QAAP,CAAgBU,KADb,oCACsBI,KAAK,CAACd,QAD5B,4BAEHe,KAFG,oBAEHA,KAAK,CAAEhB,SAAP,CAAiBW,KAFd,oCAEuBI,KAAK,CAACf,SAFpC;AAGD,GAJoB,CAArB;AAMA,SAAO;AACLgB,IAAAA,KADK;AAELE,IAAAA,cAFK;AAGLV,IAAAA,SAHK;AAILC,IAAAA,UAJK;AAKLa,IAAAA,KALK;AAMLU,IAAAA,gBANK;AAOLC,IAAAA,eAPK;AAQLC,IAAAA;AARK,GAAP;AAUD;AAED,OAAO,MAAMC,iBAAiB,GAAGnD,gBAAgB,GAS5C;AACHsB,EAAAA,IAAI,EAAE,mBADH;AAGH8B,EAAAA,UAAU,EAAE;AAAEzD,IAAAA;AAAF,GAHT;AAKH0D,EAAAA,YAAY,EAAE,KALX;AAOHtB,EAAAA,KAAK,EAAExB,yBAAyB,EAP7B;AASH+C,EAAAA,KAAK,EAAE;AACL,yBAAsBd,GAAD,IAAc;AAD9B,GATJ;;AAaHe,EAAAA,KAAK,CAAExB,KAAF,QAA2B;AAAA,QAAlB;AAAEyB,MAAAA,KAAF;AAASC,MAAAA;AAAT,KAAkB;AAC9B,UAAM;AACJvB,MAAAA,cADI;AAEJF,MAAAA,KAFI;AAGJkB,MAAAA,IAHI;AAIJZ,MAAAA,KAJI;AAKJU,MAAAA,gBALI;AAMJC,MAAAA,eANI;AAOJzB,MAAAA;AAPI,QAQFM,mBAAmB,CAACC,KAAD,CARvB;AASA,UAAM2B,GAAG,GAAGzD,MAAM,EAAlB;AACA,UAAMY,EAAE,GAAGjB,QAAQ,CAAC,MAAMmC,KAAK,CAAClB,EAAN,IAAa,SAAQ6C,GAAI,EAAhC,CAAnB;AACA,UAAMC,SAAS,GAAG7D,GAAG,CAAC,KAAD,CAArB;AACA,UAAM8D,cAAc,GAAG9D,GAAG,CAAC,KAAD,CAA1B;AACA,UAAM+D,KAAK,GAAG/D,GAAG,EAAjB;;AAEA,aAASgE,OAAT,CAAkBC,CAAlB,EAAiC;AAC/BJ,MAAAA,SAAS,CAAChC,KAAV,GAAkB,IAAlB;;AACA,UACE,CAACvB,sBAAD,IACCA,sBAAsB,IAAK2D,CAAC,CAACC,MAAH,CAA0BC,OAA1B,CAAkC,gBAAlC,CAF7B,EAGE;AACAL,QAAAA,cAAc,CAACjC,KAAf,GAAuB,IAAvB;AACD;AACF;;AAED,aAASuC,MAAT,GAAmB;AACjBP,MAAAA,SAAS,CAAChC,KAAV,GAAkB,KAAlB;AACAiC,MAAAA,cAAc,CAACjC,KAAf,GAAuB,KAAvB;AACD;;AAEDtB,IAAAA,SAAS,CAAC,MAAM;AAAA;;AACd,YAAMU,KAAK,GAAG0C,KAAK,CAAC1C,KAAN,GACV0C,KAAK,CAAC1C,KAAN,CAAY;AACZA,QAAAA,KAAK,EAAEgB,KAAK,CAAChB,KADD;AAEZgB,QAAAA,KAAK,EAAE;AAAEoC,UAAAA,GAAG,EAAEtD,EAAE,CAACc;AAAV;AAFK,OAAZ,CADU,GAKVI,KAAK,CAAChB,KALV;AAMA,YAAMI,IAAI,wBAAGa,KAAH,oBAAGA,KAAK,CAAEb,IAAP,CAAYQ,KAAf,gCAAwBI,KAAK,CAACZ,IAAxC;AAEA;AAAA,iBAEW,CACL,qBADK,EAEL;AACE,wCAA8BmB,KAAK,CAACX,KADtC;AAEE,2CAAiCI,KAAK,CAACrB,QAFzC;AAGE,wCAA8BqB,KAAK,CAACnB,KAHtC;AAIE,0CAAgC+C,SAAS,CAAChC,KAJ5C;AAKE,gDAAsCiC,cAAc,CAACjC,KALvD;AAME,yCAA+B,CAAAK,KAAK,QAAL,YAAAA,KAAK,CAAElB,MAAP,CAAca,KAAd,KAAuBI,KAAK,CAACjB;AAN9D,SAFK,EAULoB,cAAc,CAACP,KAVV;AAFX;AAAA,iBAegB,CACV,8BADU,EAEVqB,gBAAgB,CAACrB,KAFP;AAfhB,4BAoBQ8B,KAAK,CAACrC,OApBd,qBAoBQ,oBAAAqC,KAAK,CApBb;AAAA,iBAuBe,CACL,4BADK,CAvBf;AAAA,iBA0BgBR,eAAe,CAACtB;AA1BhC,UAiCUuB,IAAI,CAACvB,KAAL;AAAA,gBAA4BuB,IAAI,CAACvB;AAAjC,cAjCV;AAAA,yCAoCoBW,KAAK,CAACX,KApC1B;AAAA,eAqCgBkC,KArChB;AAAA,oBAsCqB9B,KAAK,CAACrB,QAtC3B;AAAA,cAuCeG,EAAE,CAACc,KAvClB;AAAA,kBAwCmBuC,MAxCnB;AAAA,mBAyCoBJ,OAzCpB;AAAA,oBA0CqB/B,KAAK,CAACR,QA1C3B;AAAA,gBA2CiBJ,IA3CjB;AAAA,iBA4CkBK,SAAS,CAACG,KA5C5B;AAAA,qCA6CiBK,KA7CjB,oBA6CiBA,KAAK,CAAEV,IAAP,CAAYK,KA7C7B,gCA6CsCI,KAAK,CAACT,IA7C5C;AAAA,wBA8CyBH,IAAI,KAAK,UAAT,GAAsBmB,KAAK,CAACX,KAA5B,GAAoCM;AA9C7D,SA+CeuB,KA/Cf,4BAoCoBlB,KAAK,CAACX,KApC1B,qBAkDU8B,KAAK,CAACI,KAlDhB,qBAkDU,kBAAAJ,KAAK,EAAS;AACdnB,QAAAA,KADc;AAEdU,QAAAA,gBAFc;AAGdjB,QAAAA,KAAK,EAAE;AACL+B,UAAAA,OADK;AAELI,UAAAA,MAFK;AAGLrD,UAAAA,EAAE,EAAEA,EAAE,CAACc;AAHF;AAHO,OAAT,CAlDf,mCA2BmBI,KAAK,CAACb,MAAN,IAAgB,CACzB,CAACa,KAAK,CAACrB,QAAP,IAAmB,CAACqB,KAAK,CAACR,QADD,EAEzB,IAFyB,EAGzB,CAAC,QAAD,EAAW,QAAX,CAHyB,CA3BnC;AAAA,eA8DkBV,EAAE,CAACc;AA9DrB;AAAA,wBA+DQZ,KA/DR;AAAA;AAmED,KA5EQ,CAAT;AA8EA,WAAO;AACL4C,MAAAA,SADK;AAELE,MAAAA;AAFK,KAAP;AAID;;AA9HE,CAT4C,CAA1C;AA4IP,OAAO,SAASO,kBAAT,CAA6BrC,KAA7B,EAAoG;AACzG,SAAO7B,IAAI,CAAC6B,KAAD,EAAQsC,MAAM,CAACC,IAAP,CAAYnB,iBAAiB,CAACpB,KAA9B,CAAR,CAAX;AACD","sourcesContent":["// Styles\nimport './VSelectionControl.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\nimport { VLabel } from '@/components/VLabel'\nimport { VSelectionControlGroupSymbol } from '@/components/VSelectionControlGroup/VSelectionControlGroup'\n\n// Composables\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeThemeProps } from '@/composables/theme'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useTextColor } from '@/composables/color'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Utilities\nimport { computed, inject, ref } from 'vue'\nimport {\n  deepEqual,\n  genericComponent,\n  getUid,\n  pick,\n  propsFactory,\n  SUPPORTS_FOCUS_VISIBLE,\n  useRender,\n  wrapInArray,\n} from '@/util'\n\n// Types\nimport type { ComputedRef, ExtractPropTypes, PropType, Ref, WritableComputedRef } from 'vue'\nimport type { MakeSlots } from '@/util'\n\nexport type SelectionControlSlot = {\n  model: WritableComputedRef<any>\n  isReadonly: ComputedRef<boolean>\n  isDisabled: ComputedRef<boolean>\n  textColorClasses: Ref<string[]>\n  props: {\n    onBlur: (e: Event) => void\n    onFocus: (e: FocusEvent) => void\n    id: string\n  }\n}\n\nexport const makeSelectionControlProps = propsFactory({\n  color: String,\n  disabled: Boolean,\n  error: Boolean,\n  id: String,\n  inline: Boolean,\n  label: String,\n  falseIcon: String,\n  trueIcon: String,\n  ripple: {\n    type: Boolean,\n    default: true,\n  },\n  multiple: {\n    type: Boolean as PropType<boolean | null>,\n    default: null,\n  },\n  name: String,\n  readonly: Boolean,\n  trueValue: null,\n  falseValue: null,\n  modelValue: null,\n  type: String,\n  value: null,\n  valueComparator: {\n    type: Function as PropType<typeof deepEqual>,\n    default: deepEqual,\n  },\n\n  ...makeThemeProps(),\n  ...makeDensityProps(),\n})\n\nexport function useSelectionControl (\n  props: ExtractPropTypes<ReturnType<typeof makeSelectionControlProps>> & {\n    'onUpdate:modelValue': ((val: any) => void) | undefined\n  }\n) {\n  const group = inject(VSelectionControlGroupSymbol, undefined)\n  const { densityClasses } = useDensity(props)\n  const modelValue = useProxiedModel(props, 'modelValue')\n  const trueValue = computed(() => (\n    props.trueValue !== undefined ? props.trueValue\n    : props.value !== undefined ? props.value\n    : true\n  ))\n  const falseValue = computed(() => props.falseValue !== undefined ? props.falseValue : false)\n  const isMultiple = computed(() => (\n    group?.multiple.value ||\n    !!props.multiple ||\n    (props.multiple == null && Array.isArray(modelValue.value))\n  ))\n  const model = computed({\n    get () {\n      const val = group ? group.modelValue.value : modelValue.value\n\n      return isMultiple.value\n        ? val.some((v: any) => props.valueComparator(v, trueValue.value))\n        : props.valueComparator(val, trueValue.value)\n    },\n    set (val: boolean) {\n      const currentValue = val ? trueValue.value : falseValue.value\n\n      let newVal = currentValue\n\n      if (isMultiple.value) {\n        newVal = val\n          ? [...wrapInArray(modelValue.value), currentValue]\n          : wrapInArray(modelValue.value).filter((item: any) => !props.valueComparator(item, trueValue.value))\n      }\n\n      if (group) {\n        group.modelValue.value = newVal\n      } else {\n        modelValue.value = newVal\n      }\n    },\n  })\n  const { textColorClasses, textColorStyles } = useTextColor(computed(() => {\n    return (\n      model.value &&\n      !props.error &&\n      !props.disabled\n    ) ? props.color : undefined\n  }))\n  const icon = computed(() => {\n    return model.value\n      ? group?.trueIcon.value ?? props.trueIcon\n      : group?.falseIcon.value ?? props.falseIcon\n  })\n\n  return {\n    group,\n    densityClasses,\n    trueValue,\n    falseValue,\n    model,\n    textColorClasses,\n    textColorStyles,\n    icon,\n  }\n}\n\nexport const VSelectionControl = genericComponent<new <T>() => {\n  $props: {\n    modelValue?: T\n    'onUpdate:modelValue'?: (val: T) => any\n  }\n  $slots: MakeSlots<{\n    default: []\n    input: [SelectionControlSlot]\n  }>\n}>()({\n  name: 'VSelectionControl',\n\n  directives: { Ripple },\n\n  inheritAttrs: false,\n\n  props: makeSelectionControlProps(),\n\n  emits: {\n    'update:modelValue': (val: any) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const {\n      densityClasses,\n      group,\n      icon,\n      model,\n      textColorClasses,\n      textColorStyles,\n      trueValue,\n    } = useSelectionControl(props)\n    const uid = getUid()\n    const id = computed(() => props.id || `input-${uid}`)\n    const isFocused = ref(false)\n    const isFocusVisible = ref(false)\n    const input = ref<HTMLInputElement>()\n\n    function onFocus (e: FocusEvent) {\n      isFocused.value = true\n      if (\n        !SUPPORTS_FOCUS_VISIBLE ||\n        (SUPPORTS_FOCUS_VISIBLE && (e.target as HTMLElement).matches(':focus-visible'))\n      ) {\n        isFocusVisible.value = true\n      }\n    }\n\n    function onBlur () {\n      isFocused.value = false\n      isFocusVisible.value = false\n    }\n\n    useRender(() => {\n      const label = slots.label\n        ? slots.label({\n          label: props.label,\n          props: { for: id.value },\n        })\n        : props.label\n      const type = group?.type.value ?? props.type\n\n      return (\n        <div\n          class={[\n            'v-selection-control',\n            {\n              'v-selection-control--dirty': model.value,\n              'v-selection-control--disabled': props.disabled,\n              'v-selection-control--error': props.error,\n              'v-selection-control--focused': isFocused.value,\n              'v-selection-control--focus-visible': isFocusVisible.value,\n              'v-selection-control--inline': group?.inline.value || props.inline,\n            },\n            densityClasses.value,\n          ]}\n        >\n          <div class={[\n            'v-selection-control__wrapper',\n            textColorClasses.value,\n          ]}\n          >\n            { slots.default?.() }\n\n            <div\n              class={[\n                'v-selection-control__input',\n              ]}\n              style={ textColorStyles.value }\n              v-ripple={ props.ripple && [\n                !props.disabled && !props.readonly,\n                null,\n                ['center', 'circle'],\n              ]}\n            >\n              { icon.value && <VIcon icon={ icon.value } /> }\n\n              <input\n                v-model={ model.value }\n                ref={ input }\n                disabled={ props.disabled }\n                id={ id.value }\n                onBlur={ onBlur }\n                onFocus={ onFocus }\n                readonly={ props.readonly }\n                type={ type }\n                value={ trueValue.value }\n                name={ group?.name.value ?? props.name }\n                aria-checked={ type === 'checkbox' ? model.value : undefined }\n                { ...attrs }\n              />\n\n              { slots.input?.({\n                model,\n                textColorClasses,\n                props: {\n                  onFocus,\n                  onBlur,\n                  id: id.value,\n                },\n              }) }\n            </div>\n          </div>\n\n          <VLabel for={ id.value }>\n            { label }\n          </VLabel>\n        </div>\n      )\n    })\n\n    return {\n      isFocused,\n      input,\n    }\n  },\n})\n\nexport type VSelectionControl = InstanceType<typeof VSelectionControl>\n\nexport function filterControlProps (props: ExtractPropTypes<ReturnType<typeof makeSelectionControlProps>>) {\n  return pick(props, Object.keys(VSelectionControl.props) as any)\n}\n"],"file":"VSelectionControl.mjs"}
+{"version":3,"sources":["../../../src/components/VSelectionControl/VSelectionControl.tsx"],"names":["VIcon","VLabel","VSelectionControlGroupSymbol","makeDensityProps","useDensity","makeThemeProps","useProxiedModel","useTextColor","Ripple","computed","inject","ref","deepEqual","genericComponent","getUid","pick","propsFactory","SUPPORTS_FOCUS_VISIBLE","useRender","wrapInArray","makeSelectionControlProps","color","String","disabled","Boolean","error","id","inline","label","falseIcon","trueIcon","ripple","type","default","multiple","name","readonly","trueValue","falseValue","modelValue","value","valueComparator","Function","useSelectionControl","props","group","undefined","densityClasses","isMultiple","Array","isArray","model","get","val","some","v","set","currentValue","newVal","filter","item","textColorClasses","textColorStyles","icon","VSelectionControl","directives","inheritAttrs","emits","setup","attrs","slots","uid","isFocused","isFocusVisible","input","onFocus","e","target","matches","onBlur","for","filterControlProps","Object","keys"],"mappings":"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","sourcesContent":["// Styles\nimport './VSelectionControl.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\nimport { VLabel } from '@/components/VLabel'\nimport { VSelectionControlGroupSymbol } from '@/components/VSelectionControlGroup/VSelectionControlGroup'\n\n// Composables\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeThemeProps } from '@/composables/theme'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useTextColor } from '@/composables/color'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Utilities\nimport { computed, inject, ref } from 'vue'\nimport {\n  deepEqual,\n  genericComponent,\n  getUid,\n  pick,\n  propsFactory,\n  SUPPORTS_FOCUS_VISIBLE,\n  useRender,\n  wrapInArray,\n} from '@/util'\n\n// Types\nimport type { ComputedRef, ExtractPropTypes, PropType, Ref, WritableComputedRef } from 'vue'\nimport type { MakeSlots } from '@/util'\n\nexport type SelectionControlSlot = {\n  model: WritableComputedRef<any>\n  isReadonly: ComputedRef<boolean>\n  isDisabled: ComputedRef<boolean>\n  textColorClasses: Ref<string[]>\n  props: {\n    onBlur: (e: Event) => void\n    onFocus: (e: FocusEvent) => void\n    id: string\n  }\n}\n\nexport const makeSelectionControlProps = propsFactory({\n  color: String,\n  disabled: Boolean,\n  error: Boolean,\n  id: String,\n  inline: Boolean,\n  label: String,\n  falseIcon: String,\n  trueIcon: String,\n  ripple: {\n    type: Boolean,\n    default: true,\n  },\n  multiple: {\n    type: Boolean as PropType<boolean | null>,\n    default: null,\n  },\n  name: String,\n  readonly: Boolean,\n  trueValue: null,\n  falseValue: null,\n  modelValue: null,\n  type: String,\n  value: null,\n  valueComparator: {\n    type: Function as PropType<typeof deepEqual>,\n    default: deepEqual,\n  },\n\n  ...makeThemeProps(),\n  ...makeDensityProps(),\n})\n\nexport function useSelectionControl (\n  props: ExtractPropTypes<ReturnType<typeof makeSelectionControlProps>> & {\n    'onUpdate:modelValue': ((val: any) => void) | undefined\n  }\n) {\n  const group = inject(VSelectionControlGroupSymbol, undefined)\n  const { densityClasses } = useDensity(props)\n  const modelValue = useProxiedModel(props, 'modelValue')\n  const trueValue = computed(() => (\n    props.trueValue !== undefined ? props.trueValue\n    : props.value !== undefined ? props.value\n    : true\n  ))\n  const falseValue = computed(() => props.falseValue !== undefined ? props.falseValue : false)\n  const isMultiple = computed(() => (\n    group?.multiple.value ||\n    !!props.multiple ||\n    (props.multiple == null && Array.isArray(modelValue.value))\n  ))\n  const model = computed({\n    get () {\n      const val = group ? group.modelValue.value : modelValue.value\n\n      return isMultiple.value\n        ? val.some((v: any) => props.valueComparator(v, trueValue.value))\n        : props.valueComparator(val, trueValue.value)\n    },\n    set (val: boolean) {\n      if (props.readonly) return\n\n      const currentValue = val ? trueValue.value : falseValue.value\n\n      let newVal = currentValue\n\n      if (isMultiple.value) {\n        newVal = val\n          ? [...wrapInArray(modelValue.value), currentValue]\n          : wrapInArray(modelValue.value).filter((item: any) => !props.valueComparator(item, trueValue.value))\n      }\n\n      if (group) {\n        group.modelValue.value = newVal\n      } else {\n        modelValue.value = newVal\n      }\n    },\n  })\n  const { textColorClasses, textColorStyles } = useTextColor(computed(() => {\n    return (\n      model.value &&\n      !props.error &&\n      !props.disabled\n    ) ? props.color : undefined\n  }))\n  const icon = computed(() => {\n    return model.value\n      ? group?.trueIcon.value ?? props.trueIcon\n      : group?.falseIcon.value ?? props.falseIcon\n  })\n\n  return {\n    group,\n    densityClasses,\n    trueValue,\n    falseValue,\n    model,\n    textColorClasses,\n    textColorStyles,\n    icon,\n  }\n}\n\nexport const VSelectionControl = genericComponent<new <T>() => {\n  $props: {\n    modelValue?: T\n    'onUpdate:modelValue'?: (val: T) => any\n  }\n  $slots: MakeSlots<{\n    default: []\n    input: [SelectionControlSlot]\n  }>\n}>()({\n  name: 'VSelectionControl',\n\n  directives: { Ripple },\n\n  inheritAttrs: false,\n\n  props: makeSelectionControlProps(),\n\n  emits: {\n    'update:modelValue': (val: any) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const {\n      densityClasses,\n      group,\n      icon,\n      model,\n      textColorClasses,\n      textColorStyles,\n      trueValue,\n    } = useSelectionControl(props)\n    const uid = getUid()\n    const id = computed(() => props.id || `input-${uid}`)\n    const isFocused = ref(false)\n    const isFocusVisible = ref(false)\n    const input = ref<HTMLInputElement>()\n\n    function onFocus (e: FocusEvent) {\n      isFocused.value = true\n      if (\n        !SUPPORTS_FOCUS_VISIBLE ||\n        (SUPPORTS_FOCUS_VISIBLE && (e.target as HTMLElement).matches(':focus-visible'))\n      ) {\n        isFocusVisible.value = true\n      }\n    }\n\n    function onBlur () {\n      isFocused.value = false\n      isFocusVisible.value = false\n    }\n\n    useRender(() => {\n      const label = slots.label\n        ? slots.label({\n          label: props.label,\n          props: { for: id.value },\n        })\n        : props.label\n      const type = group?.type.value ?? props.type\n\n      return (\n        <div\n          class={[\n            'v-selection-control',\n            {\n              'v-selection-control--dirty': model.value,\n              'v-selection-control--disabled': props.disabled,\n              'v-selection-control--error': props.error,\n              'v-selection-control--focused': isFocused.value,\n              'v-selection-control--focus-visible': isFocusVisible.value,\n              'v-selection-control--inline': group?.inline.value || props.inline,\n            },\n            densityClasses.value,\n          ]}\n        >\n          <div class={[\n            'v-selection-control__wrapper',\n            textColorClasses.value,\n          ]}\n          >\n            { slots.default?.() }\n\n            <div\n              class={[\n                'v-selection-control__input',\n              ]}\n              style={ textColorStyles.value }\n              v-ripple={ props.ripple && [\n                !props.disabled && !props.readonly,\n                null,\n                ['center', 'circle'],\n              ]}\n            >\n              { icon.value && <VIcon icon={ icon.value } /> }\n\n              <input\n                v-model={ model.value }\n                ref={ input }\n                disabled={ props.disabled }\n                id={ id.value }\n                onBlur={ onBlur }\n                onFocus={ onFocus }\n                aria-readonly={ props.readonly }\n                type={ type }\n                value={ trueValue.value }\n                name={ group?.name.value ?? props.name }\n                aria-checked={ type === 'checkbox' ? model.value : undefined }\n                { ...attrs }\n              />\n\n              { slots.input?.({\n                model,\n                textColorClasses,\n                props: {\n                  onFocus,\n                  onBlur,\n                  id: id.value,\n                },\n              }) }\n            </div>\n          </div>\n\n          <VLabel for={ id.value }>\n            { label }\n          </VLabel>\n        </div>\n      )\n    })\n\n    return {\n      isFocused,\n      input,\n    }\n  },\n})\n\nexport type VSelectionControl = InstanceType<typeof VSelectionControl>\n\nexport function filterControlProps (props: ExtractPropTypes<ReturnType<typeof makeSelectionControlProps>>) {\n  return pick(props, Object.keys(VSelectionControl.props) as any)\n}\n"],"file":"VSelectionControl.mjs"}

package/lib/components/VSelectionControlGroup/VSelectionControlGroup.mjs

@@ -4,8 +4,8 @@ import "./VSelectionControlGroup.css"; // Composables
 
 import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utility
 
-import { computed, defineComponent, provide, toRef } from 'vue';
-import { getUid, useRender } from "../../util/index.mjs"; // Types
+import { computed, provide, toRef } from 'vue';
+import { defineComponent, getUid, useRender } from "../../util/index.mjs"; // Types
 
 export const VSelectionControlGroupSymbol = Symbol.for('vuetify:selection-control-group');
 export const VSelectionControlGroup = defineComponent({

package/lib/components/VSelectionControlGroup/VSelectionControlGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VSelectionControlGroup/VSelectionControlGroup.tsx"],"names":["useProxiedModel","computed","defineComponent","provide","toRef","getUid","useRender","VSelectionControlGroupSymbol","Symbol","for","VSelectionControlGroup","name","props","disabled","Boolean","id","String","inline","falseIcon","trueIcon","multiple","type","default","readonly","modelValue","emits","val","setup","slots","uid","value","Array","isArray","undefined"],"mappings":";AAAA;AACA,sC,CAEA;;SACSA,e,8CAET;;AACA,SAASC,QAAT,EAAmBC,eAAnB,EAAoCC,OAApC,EAA6CC,KAA7C,QAA0D,KAA1D;SACSC,M,EAAQC,S,gCAEjB;;AAeA,OAAO,MAAMC,4BAAkE,GAAGC,MAAM,CAACC,GAAP,CAAW,iCAAX,CAA3E;AAEP,OAAO,MAAMC,sBAAsB,GAAGR,eAAe,CAAC;AACpDS,EAAAA,IAAI,EAAE,wBAD8C;AAGpDC,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAEC,OADL;AAELC,IAAAA,EAAE,EAAEC,MAFC;AAGLC,IAAAA,MAAM,EAAEH,OAHH;AAILH,IAAAA,IAAI,EAAEK,MAJD;AAKLE,IAAAA,SAAS,EAAEF,MALN;AAMLG,IAAAA,QAAQ,EAAEH,MANL;AAOLI,IAAAA,QAAQ,EAAE;AACRC,MAAAA,IAAI,EAAEP,OADE;AAERQ,MAAAA,OAAO,EAAE;AAFD,KAPL;AAWLC,IAAAA,QAAQ,EAAET,OAXL;AAYLO,IAAAA,IAAI,EAAEL,MAZD;AAaLQ,IAAAA,UAAU,EAAE;AAbP,GAH6C;AAmBpDC,EAAAA,KAAK,EAAE;AACL,yBAAsBC,GAAD,IAAc;AAD9B,GAnB6C;;AAuBpDC,EAAAA,KAAK,CAAEf,KAAF,QAAoB;AAAA,QAAX;AAAEgB,MAAAA;AAAF,KAAW;AACvB,UAAMJ,UAAU,GAAGxB,eAAe,CAACY,KAAD,EAAQ,YAAR,CAAlC;AACA,UAAMiB,GAAG,GAAGxB,MAAM,EAAlB;AACA,UAAMU,EAAE,GAAGd,QAAQ,CAAC,MAAMW,KAAK,CAACG,EAAN,IAAa,6BAA4Bc,GAAI,EAApD,CAAnB;AACA,UAAMlB,IAAI,GAAGV,QAAQ,CAAC,MAAMW,KAAK,CAACD,IAAN,IAAcI,EAAE,CAACe,KAAxB,CAArB;AAEA3B,IAAAA,OAAO,CAACI,4BAAD,EAA+B;AACpCM,MAAAA,QAAQ,EAAET,KAAK,CAACQ,KAAD,EAAQ,UAAR,CADqB;AAEpCK,MAAAA,MAAM,EAAEb,KAAK,CAACQ,KAAD,EAAQ,QAAR,CAFuB;AAGpCY,MAAAA,UAHoC;AAIpCJ,MAAAA,QAAQ,EAAEnB,QAAQ,CAAC,MAAM,CAAC,CAACW,KAAK,CAACQ,QAAR,IAAqBR,KAAK,CAACQ,QAAN,IAAkB,IAAlB,IAA0BW,KAAK,CAACC,OAAN,CAAcR,UAAU,CAACM,KAAzB,CAAtD,CAJkB;AAKpCnB,MAAAA,IALoC;AAMpCO,MAAAA,SAAS,EAAEd,KAAK,CAACQ,KAAD,EAAQ,WAAR,CANoB;AAOpCO,MAAAA,QAAQ,EAAEf,KAAK,CAACQ,KAAD,EAAQ,UAAR,CAPqB;AAQpCW,MAAAA,QAAQ,EAAEnB,KAAK,CAACQ,KAAD,EAAQ,UAAR,CARqB;AASpCS,MAAAA,IAAI,EAAEjB,KAAK,CAACQ,KAAD,EAAQ,MAAR;AATyB,KAA/B,CAAP;AAYAN,IAAAA,SAAS,CAAC,MAAM;AAAA;;AACd;AAAA,iBAEU,2BAFV;AAAA,4BAGuBM,KAAK,CAACS,IAAN,KAAe,OAAf,GAAyBN,EAAE,CAACe,KAA5B,GAAoCG,SAH3D;AAAA,gBAIWrB,KAAK,CAACS,IAAN,KAAe,OAAf,GAAyB,YAAzB,GAAwCY;AAJnD,UAMML,KANN,sCAMMA,KAAK,CAAEN,OANb,qBAMM,oBAAAM,KAAK,CANX;AASD,KAVQ,CAAT;AAYA,WAAO,EAAP;AACD;;AAtDmD,CAAD,CAA9C","sourcesContent":["// Styles\nimport './VSelectionControlGroup.sass'\n\n// Composables\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utility\nimport { computed, defineComponent, provide, toRef } from 'vue'\nimport { getUid, useRender } from '@/util'\n\n// Types\nimport type { InjectionKey, PropType, Ref } from 'vue'\n\nexport interface VSelectionGroupContext {\n  disabled: Ref<boolean>\n  inline: Ref<boolean>\n  name: Ref<string | undefined>\n  modelValue: Ref<any>\n  multiple: Ref<boolean>\n  trueIcon: Ref<string | undefined>\n  falseIcon: Ref<string | undefined>\n  readonly: Ref<boolean>\n  type: Ref<string | undefined>\n}\n\nexport const VSelectionControlGroupSymbol: InjectionKey<VSelectionGroupContext> = Symbol.for('vuetify:selection-control-group')\n\nexport const VSelectionControlGroup = defineComponent({\n  name: 'VSelectionControlGroup',\n\n  props: {\n    disabled: Boolean,\n    id: String,\n    inline: Boolean,\n    name: String,\n    falseIcon: String,\n    trueIcon: String,\n    multiple: {\n      type: Boolean as PropType<boolean | null>,\n      default: null,\n    },\n    readonly: Boolean,\n    type: String,\n    modelValue: null,\n  },\n\n  emits: {\n    'update:modelValue': (val: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const modelValue = useProxiedModel(props, 'modelValue')\n    const uid = getUid()\n    const id = computed(() => props.id || `v-selection-control-group-${uid}`)\n    const name = computed(() => props.name || id.value)\n\n    provide(VSelectionControlGroupSymbol, {\n      disabled: toRef(props, 'disabled'),\n      inline: toRef(props, 'inline'),\n      modelValue,\n      multiple: computed(() => !!props.multiple || (props.multiple == null && Array.isArray(modelValue.value))),\n      name,\n      falseIcon: toRef(props, 'falseIcon'),\n      trueIcon: toRef(props, 'trueIcon'),\n      readonly: toRef(props, 'readonly'),\n      type: toRef(props, 'type'),\n    })\n\n    useRender(() => {\n      return (\n        <div\n          class=\"v-selection-control-group\"\n          aria-labelled-by={ props.type === 'radio' ? id.value : undefined }\n          role={ props.type === 'radio' ? 'radiogroup' : undefined }\n        >\n          { slots?.default?.() }\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSelectionControlGroup = InstanceType<typeof VSelectionControlGroup>\n"],"file":"VSelectionControlGroup.mjs"}
+{"version":3,"sources":["../../../src/components/VSelectionControlGroup/VSelectionControlGroup.tsx"],"names":["useProxiedModel","computed","provide","toRef","defineComponent","getUid","useRender","VSelectionControlGroupSymbol","Symbol","for","VSelectionControlGroup","name","props","disabled","Boolean","id","String","inline","falseIcon","trueIcon","multiple","type","default","readonly","modelValue","emits","val","setup","slots","uid","value","Array","isArray","undefined"],"mappings":";AAAA;AACA,sC,CAEA;;SACSA,e,8CAET;;AACA,SAASC,QAAT,EAAmBC,OAAnB,EAA4BC,KAA5B,QAAyC,KAAzC;SACSC,e,EAAiBC,M,EAAQC,S,gCAElC;;AAeA,OAAO,MAAMC,4BAAkE,GAAGC,MAAM,CAACC,GAAP,CAAW,iCAAX,CAA3E;AAEP,OAAO,MAAMC,sBAAsB,GAAGN,eAAe,CAAC;AACpDO,EAAAA,IAAI,EAAE,wBAD8C;AAGpDC,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAEC,OADL;AAELC,IAAAA,EAAE,EAAEC,MAFC;AAGLC,IAAAA,MAAM,EAAEH,OAHH;AAILH,IAAAA,IAAI,EAAEK,MAJD;AAKLE,IAAAA,SAAS,EAAEF,MALN;AAMLG,IAAAA,QAAQ,EAAEH,MANL;AAOLI,IAAAA,QAAQ,EAAE;AACRC,MAAAA,IAAI,EAAEP,OADE;AAERQ,MAAAA,OAAO,EAAE;AAFD,KAPL;AAWLC,IAAAA,QAAQ,EAAET,OAXL;AAYLO,IAAAA,IAAI,EAAEL,MAZD;AAaLQ,IAAAA,UAAU,EAAE;AAbP,GAH6C;AAmBpDC,EAAAA,KAAK,EAAE;AACL,yBAAsBC,GAAD,IAAc;AAD9B,GAnB6C;;AAuBpDC,EAAAA,KAAK,CAAEf,KAAF,QAAoB;AAAA,QAAX;AAAEgB,MAAAA;AAAF,KAAW;AACvB,UAAMJ,UAAU,GAAGxB,eAAe,CAACY,KAAD,EAAQ,YAAR,CAAlC;AACA,UAAMiB,GAAG,GAAGxB,MAAM,EAAlB;AACA,UAAMU,EAAE,GAAGd,QAAQ,CAAC,MAAMW,KAAK,CAACG,EAAN,IAAa,6BAA4Bc,GAAI,EAApD,CAAnB;AACA,UAAMlB,IAAI,GAAGV,QAAQ,CAAC,MAAMW,KAAK,CAACD,IAAN,IAAcI,EAAE,CAACe,KAAxB,CAArB;AAEA5B,IAAAA,OAAO,CAACK,4BAAD,EAA+B;AACpCM,MAAAA,QAAQ,EAAEV,KAAK,CAACS,KAAD,EAAQ,UAAR,CADqB;AAEpCK,MAAAA,MAAM,EAAEd,KAAK,CAACS,KAAD,EAAQ,QAAR,CAFuB;AAGpCY,MAAAA,UAHoC;AAIpCJ,MAAAA,QAAQ,EAAEnB,QAAQ,CAAC,MAAM,CAAC,CAACW,KAAK,CAACQ,QAAR,IAAqBR,KAAK,CAACQ,QAAN,IAAkB,IAAlB,IAA0BW,KAAK,CAACC,OAAN,CAAcR,UAAU,CAACM,KAAzB,CAAtD,CAJkB;AAKpCnB,MAAAA,IALoC;AAMpCO,MAAAA,SAAS,EAAEf,KAAK,CAACS,KAAD,EAAQ,WAAR,CANoB;AAOpCO,MAAAA,QAAQ,EAAEhB,KAAK,CAACS,KAAD,EAAQ,UAAR,CAPqB;AAQpCW,MAAAA,QAAQ,EAAEpB,KAAK,CAACS,KAAD,EAAQ,UAAR,CARqB;AASpCS,MAAAA,IAAI,EAAElB,KAAK,CAACS,KAAD,EAAQ,MAAR;AATyB,KAA/B,CAAP;AAYAN,IAAAA,SAAS,CAAC,MAAM;AAAA;;AACd;AAAA,iBAEU,2BAFV;AAAA,4BAGuBM,KAAK,CAACS,IAAN,KAAe,OAAf,GAAyBN,EAAE,CAACe,KAA5B,GAAoCG,SAH3D;AAAA,gBAIWrB,KAAK,CAACS,IAAN,KAAe,OAAf,GAAyB,YAAzB,GAAwCY;AAJnD,UAMML,KANN,sCAMMA,KAAK,CAAEN,OANb,qBAMM,oBAAAM,KAAK,CANX;AASD,KAVQ,CAAT;AAYA,WAAO,EAAP;AACD;;AAtDmD,CAAD,CAA9C","sourcesContent":["// Styles\nimport './VSelectionControlGroup.sass'\n\n// Composables\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utility\nimport { computed, provide, toRef } from 'vue'\nimport { defineComponent, getUid, useRender } from '@/util'\n\n// Types\nimport type { InjectionKey, PropType, Ref } from 'vue'\n\nexport interface VSelectionGroupContext {\n  disabled: Ref<boolean>\n  inline: Ref<boolean>\n  name: Ref<string | undefined>\n  modelValue: Ref<any>\n  multiple: Ref<boolean>\n  trueIcon: Ref<string | undefined>\n  falseIcon: Ref<string | undefined>\n  readonly: Ref<boolean>\n  type: Ref<string | undefined>\n}\n\nexport const VSelectionControlGroupSymbol: InjectionKey<VSelectionGroupContext> = Symbol.for('vuetify:selection-control-group')\n\nexport const VSelectionControlGroup = defineComponent({\n  name: 'VSelectionControlGroup',\n\n  props: {\n    disabled: Boolean,\n    id: String,\n    inline: Boolean,\n    name: String,\n    falseIcon: String,\n    trueIcon: String,\n    multiple: {\n      type: Boolean as PropType<boolean | null>,\n      default: null,\n    },\n    readonly: Boolean,\n    type: String,\n    modelValue: null,\n  },\n\n  emits: {\n    'update:modelValue': (val: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const modelValue = useProxiedModel(props, 'modelValue')\n    const uid = getUid()\n    const id = computed(() => props.id || `v-selection-control-group-${uid}`)\n    const name = computed(() => props.name || id.value)\n\n    provide(VSelectionControlGroupSymbol, {\n      disabled: toRef(props, 'disabled'),\n      inline: toRef(props, 'inline'),\n      modelValue,\n      multiple: computed(() => !!props.multiple || (props.multiple == null && Array.isArray(modelValue.value))),\n      name,\n      falseIcon: toRef(props, 'falseIcon'),\n      trueIcon: toRef(props, 'trueIcon'),\n      readonly: toRef(props, 'readonly'),\n      type: toRef(props, 'type'),\n    })\n\n    useRender(() => {\n      return (\n        <div\n          class=\"v-selection-control-group\"\n          aria-labelled-by={ props.type === 'radio' ? id.value : undefined }\n          role={ props.type === 'radio' ? 'radiogroup' : undefined }\n        >\n          { slots?.default?.() }\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSelectionControlGroup = InstanceType<typeof VSelectionControlGroup>\n"],"file":"VSelectionControlGroup.mjs"}

package/lib/components/VSlideGroup/VSlideGroup.css

@@ -2,11 +2,6 @@
   display: flex;
 }
 
-.v-slide-item {
-  display: inline-flex;
-  flex: 0 1 auto;
-}
-
 .v-slide-group__next,
 .v-slide-group__prev {
   align-items: center;

package/lib/components/VSlideGroup/VSlideGroup.mjs

@@ -19,10 +19,6 @@ export const VSlideGroupSymbol = Symbol.for('vuetify:v-slide-group');
 export const VSlideGroup = defineComponent({
   name: 'VSlideGroup',
   props: {
-    activeClass: {
-      type: String,
-      default: 'v-slide-item--active'
-    },
     centerActive: Boolean,
     direction: {
       type: String,
@@ -45,7 +41,9 @@ export const VSlideGroup = defineComponent({
       validator: v => typeof v === 'boolean' || ['always', 'desktop', 'mobile'].includes(v)
     },
     ...makeTagProps(),
-    ...makeGroupProps()
+    ...makeGroupProps({
+      selectedClass: 'v-slide-group-item--active'
+    })
   },
   emits: {
     'update:modelValue': value => true
@@ -71,21 +69,31 @@ export const VSlideGroup = defineComponent({
       resizeRef: containerRef,
       contentRect: containerRect
     } = useResizeObserver();
-    const contentRef = ref();
+    const {
+      resizeRef: contentRef,
+      contentRect
+    } = useResizeObserver();
     watchEffect(() => {
-      if (!containerRect.value || !contentRef.value) return;
+      if (!containerRect.value || !contentRect.value) return;
       const sizeProperty = isHorizontal.value ? 'width' : 'height';
       containerSize.value = containerRect.value[sizeProperty];
-      contentSize.value = contentRef.value.getBoundingClientRect()[sizeProperty];
+      contentSize.value = contentRect.value[sizeProperty];
       isOverflowing.value = containerSize.value + 1 < contentSize.value;
     });
-    watch(group.selected, selected => {
-      if (!selected.length || !contentRef.value) return;
-      const index = group.items.value.findIndex(item => item.id === selected[selected.length - 1]); // TODO: Is this too naive? Should we store element references in group composable?
+    const firstSelectedIndex = computed(() => {
+      if (!group.selected.value.length) return -1;
+      return group.items.value.findIndex(item => item.id === group.selected.value[0]);
+    });
+    const lastSelectedIndex = computed(() => {
+      if (!group.selected.value.length) return -1;
+      return group.items.value.findIndex(item => item.id === group.selected.value[group.selected.value.length - 1]);
+    });
+    watch(group.selected, () => {
+      if (firstSelectedIndex.value < 0 || !contentRef.value) return; // TODO: Is this too naive? Should we store element references in group composable?
 
-      const selectedElement = contentRef.value.children[index];
+      const selectedElement = contentRef.value.children[lastSelectedIndex.value];
 
-      if (index === 0 || !isOverflowing.value) {
+      if (firstSelectedIndex.value === 0 || !isOverflowing.value) {
         scrollOffset.value = 0;
       } else if (props.centerActive) {
         scrollOffset.value = calculateCenteredOffset({
@@ -106,6 +114,20 @@ export const VSlideGroup = defineComponent({
         });
       }
     });
+    let firstOverflow = true;
+    watch(isOverflowing, () => {
+      if (!firstOverflow || !contentRef.value || firstSelectedIndex.value < 0) return;
+      firstOverflow = false; // TODO: Is this too naive? Should we store element references in group composable?
+
+      const selectedElement = contentRef.value.children[firstSelectedIndex.value];
+      scrollOffset.value = calculateCenteredOffset({
+        selectedElement,
+        containerSize: containerSize.value,
+        contentSize: contentSize.value,
+        isRtl: isRtl.value,
+        isHorizontal: isHorizontal.value
+      });
+    });
     const disableTransition = ref(false);
     let startTouch = 0;
     let startOffset = 0;
@@ -253,7 +275,7 @@ export const VSlideGroup = defineComponent({
         // Always show arrows on desktop
 
         case 'desktop':
-          return mobile.value;
+          return !mobile.value;
         // Show arrows on mobile when overflowing.
         // This matches the default 2.2 behavior