From 0361c436dc9a99030135adebf2d78734d577d706 Mon Sep 17 00:00:00 2001
From: Andrew Scott <andrew.scott@intellitect.com>
Date: Mon, 2 Dec 2024 13:04:46 -0800
Subject: [PATCH] feat: add `multiple` support to `c-select`. (#499)

---
 CHANGELOG.md                                  |   5 +
 .../components/c-input.md                     |   1 +
 .../components/c-select-many-to-many.md       |  43 +-
 .../components/c-select.md                    |  36 +-
 playground/Coalesce.Domain/Case.cs            |   9 +
 playground/Coalesce.Domain/Person.cs          |   2 +-
 .../Api/Generated/PersonController.g.cs       |  13 +-
 .../Coalesce.Web.Vue2/src/api-clients.g.ts    |   3 +-
 .../Coalesce.Web.Vue2/src/metadata.g.ts       |  23 +
 playground/Coalesce.Web.Vue2/src/models.g.ts  |   4 +
 .../Coalesce.Web.Vue2/src/viewmodels.g.ts     |   6 +-
 .../Coalesce.Web.Vue3/.vscode/settings.json   |   4 +
 .../Api/Generated/PersonController.g.cs       |  13 +-
 playground/Coalesce.Web.Vue3/src/App.vue      |  12 +-
 .../Coalesce.Web.Vue3/src/api-clients.g.ts    |   3 +-
 .../src/components/Examples.vue               |  67 ++
 .../Coalesce.Web.Vue3/src/components/test.vue |  42 +-
 .../c-select-many-to-many/binding.vue         |  53 ++
 .../c-select-many-to-many/styling.vue         |  33 +
 .../examples/c-select/multiple-binding.vue    | 121 +++
 .../src/examples/c-select/single-binding.vue  |  88 ++
 .../src/examples/c-select/styling.vue         |  69 ++
 playground/Coalesce.Web.Vue3/src/main.ts      |  13 +-
 .../Coalesce.Web.Vue3/src/metadata.g.ts       |  23 +
 playground/Coalesce.Web.Vue3/src/models.g.ts  |   4 +
 .../src/styles/_variables.scss                |   2 -
 .../Coalesce.Web.Vue3/src/viewmodels.g.ts     |   6 +-
 src/coalesce-vue-vuetify3/package-lock.json   | 132 +--
 src/coalesce-vue-vuetify3/package.json        |   2 +-
 .../src/components/c-metadata-component.ts    | 216 +++--
 .../src/components/input/c-input.vue          |  86 +-
 .../input/c-select-many-to-many.vue           | 311 +++---
 .../src/components/input/c-select.spec.tsx    |  85 +-
 .../src/components/input/c-select.vue         | 899 ++++++++++++------
 34 files changed, 1621 insertions(+), 808 deletions(-)
 create mode 100644 playground/Coalesce.Web.Vue3/src/components/Examples.vue
 create mode 100644 playground/Coalesce.Web.Vue3/src/examples/c-select-many-to-many/binding.vue
 create mode 100644 playground/Coalesce.Web.Vue3/src/examples/c-select-many-to-many/styling.vue
 create mode 100644 playground/Coalesce.Web.Vue3/src/examples/c-select/multiple-binding.vue
 create mode 100644 playground/Coalesce.Web.Vue3/src/examples/c-select/single-binding.vue
 create mode 100644 playground/Coalesce.Web.Vue3/src/examples/c-select/styling.vue
 delete mode 100644 playground/Coalesce.Web.Vue3/src/styles/_variables.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7f64e0ff7..8739babab 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,8 @@
+# 5.3.0
+
+- Added `multiple` prop to `c-select`, allowing for the selection of multiple models.
+- `c-select-many-to-many` is now based on `c-select` rather than `v-autocomplete`. As a result, it has gained support for all of the props and slots of `c-select`.
+
 # 5.2.1
 
 ## Fixes
diff --git a/docs/stacks/vue/coalesce-vue-vuetify/components/c-input.md b/docs/stacks/vue/coalesce-vue-vuetify/components/c-input.md
index 627766487..00cb2f9bb 100644
--- a/docs/stacks/vue/coalesce-vue-vuetify/components/c-input.md
+++ b/docs/stacks/vue/coalesce-vue-vuetify/components/c-input.md
@@ -20,6 +20,7 @@ A summary of the components delegated to, by type:
 - date: [c-datetime-picker](/stacks/vue/coalesce-vue-vuetify/components/c-datetime-picker.md)
 - model: [c-select](/stacks/vue/coalesce-vue-vuetify/components/c-select.md)
 - [[ManyToMany]](/modeling/model-components/attributes/many-to-many.md) collection: [c-select-many-to-many](/stacks/vue/coalesce-vue-vuetify/components/c-select-many-to-many.md)
+- Model collection (not many-to-many): [c-select](/stacks/vue/coalesce-vue-vuetify/components/c-select.md)
 - Non-object collection: [c-select-values](/stacks/vue/coalesce-vue-vuetify/components/c-select-values.md)
 
 Any other unsupported type will simply be displayed with [c-display](/stacks/vue/coalesce-vue-vuetify/components/c-display.md), unless a [default slot](https://vuejs.org/guide/components/slots.html) is provided - in that case, the default slot will be rendered instead.
diff --git a/docs/stacks/vue/coalesce-vue-vuetify/components/c-select-many-to-many.md b/docs/stacks/vue/coalesce-vue-vuetify/components/c-select-many-to-many.md
index fc50426c1..59f12072d 100644
--- a/docs/stacks/vue/coalesce-vue-vuetify/components/c-select-many-to-many.md
+++ b/docs/stacks/vue/coalesce-vue-vuetify/components/c-select-many-to-many.md
@@ -19,50 +19,17 @@ It is unlikely that you'll ever need to use this component directly - it is high
 ``` vue-html
 <c-select-many-to-many 
     :model="case" 
-    for="caseProducts" 
-    dense
-    outlined
-/>
-```
-
-``` vue-html
-<c-select-many-to-many 
-    v-model="case.caseProducts" 
-    for="Case.caseProducts" 
+    for="caseProducts"
+    variant="outlined"
+    density="compact"
 />
 ```
 
 ## Props
 
-<Prop def="for: string | Property | Value" lang="ts" />
-
-A metadata specifier for the value being bound. One of:
-    
-- A string with the name of the value belonging to `model`.
-- A direct reference to a metadata object.
-- A string in dot-notation that starts with a type name.
-
-::: tip Note
-c-select-many-to-many expects metadata for the "real" collection navigation property on a model. If you provide it the string you passed to [[ManyToMany]](/modeling/model-components/attributes/many-to-many.md), an error wil be thrown.
-:::
+See [c-select / Props](./c-select.md#props). 
 
-<Prop def="model?: Model" lang="ts" />
-
-An object owning the value that was specified by the `for` prop. If provided, the input will be bound to the corresponding property on the `model` object.
-
-<Prop def="value?: any // Vue 2
-modelValue?: any // Vue 3" lang="ts" />
-
-If binding the component with ``v-model``, accepts the ``value`` part of ``v-model``.
-    
-<Prop def="params?: ListParameters" lang="ts" />
-
-An optional set of [Data Source Standard Parameters](/modeling/model-components/data-sources.md#standard-parameters) to pass to API calls made to the server.
-
-<Prop def="cache?: ResponseCachingConfiguration | boolean" lang="ts" />
-
-If provided and non-false, enables [response caching](/stacks/vue/layers/api-clients.md#response-caching) on the component's internal API caller.
-    
+Since `c-select-many-to-many` internally uses `c-select` as its implementation, all props of `c-select` are also supported by `c-select-many-to-many`.
 
 ## Events
 
diff --git a/docs/stacks/vue/coalesce-vue-vuetify/components/c-select.md b/docs/stacks/vue/coalesce-vue-vuetify/components/c-select.md
index 8737e08ab..ec274deb6 100644
--- a/docs/stacks/vue/coalesce-vue-vuetify/components/c-select.md
+++ b/docs/stacks/vue/coalesce-vue-vuetify/components/c-select.md
@@ -29,6 +29,17 @@ Binding an arbitrary primary key value or an arbitrary object:
   <c-select for="Person" v-model="selectedPerson" />
 ```
 
+Multi-select:
+
+``` vue-html
+  <!-- Binding selected primary keys: -->
+  <c-select for="Person" multiple v-model:key-value="selectedPeopleIds" />
+
+  <!-- Binding selected objects: -->
+  <c-select for="Person" multiple v-model="selectedPeople" />
+  <c-select for="Person" multiple v-model:object-value="selectedPeople" />
+```
+
 Examples of other props:
 
 ``` vue-html
@@ -48,6 +59,8 @@ Examples of other props:
 
 ## Props
 
+Note: In addition to the below props, `c-select` also supports most props that are supported by Vuetify's [v-text-field](https://vuetifyjs.com/en/components/text-fields/).
+
 <Prop def="for: string | ForeignKeyProperty | ModelReferenceNavigationProperty | ModelType" lang="ts" />
 
 A metadata specifier for the value being bound. One of:
@@ -55,10 +68,9 @@ A metadata specifier for the value being bound. One of:
 - The name of a foreign key or reference navigation property belonging to `model`. 
 - The name of a model type.
 - A direct reference to a metadata object.
-- A string in dot-notation that starts with a type name that resolves to a foreign key or reference navigation property.
 
 ::: tip
-When binding by a key value, if the corresponding object cannot be found (e.g. there is no navigation property, or the navigation property is null), c-select will automatically attempt to load the object from the server so it can be displayed in the UI.
+When the binding can only locate a PK value and the corresponding object cannot be found (e.g. there is no navigation property, or the navigation property is null), c-select will automatically attempt to load the object from the server so it can be displayed in the UI.
 :::
 
 <Prop def="model?: Model" lang="ts" />
@@ -72,13 +84,19 @@ modelValue?: any // Vue 3" lang="ts" />
 
 When binding the component with ``v-model``, accepts the ``value`` part of ``v-model``. If `for` was specified as a foreign key, this will expect a key; likewise, if `for` was specified as a type or as a navigation property, this will expect an object.
 
-<Prop def="keyValue?: any" lang="ts" />
+<Prop def="multiple?: boolean" lang="ts" />
+
+Enables multi-select functionality. Bindings for `modelValue`, `keyValue`, and `objectValue` will accept and emit arrays instead of single values.
+
+<Prop def="keyValue?: TKey
+'onUpdate:keyValue': (value: TKey) => void" lang="ts" />
 
-When bound with `v-model:key-value="keyValue"`, allows binding the primary key of the selected object explicitly.
+When bound with `v-model:key-value="keyValue"`, allows binding the primary key of the selected object explicitly. Binds an array when in multi-select mode.
 
-<Prop def="objectValue?: any" lang="ts" />
+<Prop def="objectValue?: TModel
+'onUpdate:objectValue': (value: TModel) => void" lang="ts" />
 
-When bound with `v-model:object-value="objectValue"`, allows binding the selected object explicitly.
+When bound with `v-model:object-value="objectValue"`, allows binding the selected object explicitly. Binds an array when in multi-select mode.
 
 <Prop def="clearable?: boolean" lang="ts" />
 
@@ -149,8 +167,8 @@ createMethods = {
 
 ## Slots
 
-`#item="{ item, search }"` - Slot used to customize the text of both items inside the list, as well as the text of selected items. By default, items are rendered with [c-display](/stacks/vue/coalesce-vue-vuetify/components/c-display.md). Slot is passed a parameter `item` containing a [model instance](/stacks/vue/layers/models.md), and `search` containing the current search query.
+`#item="{ item: TModel, search: string }"` - Slot used to customize the text of both items inside the list, as well as the text of selected items. By default, items are rendered with [c-display](/stacks/vue/coalesce-vue-vuetify/components/c-display.md). Slot is passed a parameter `item` containing a [model instance](/stacks/vue/layers/models.md), and `search` containing the current search query.
 
-`#list-item="{ item, search }"` - Slot used to customize the text of items inside the list. If not provided, falls back to the `item` slot.
+`#list-item="{ item: TModel, search: string, selected: boolean }"` - Slot used to customize the text of items inside the list. If not provided, falls back to the `item` slot. Contents are wrapped in a `v-list-item-title`.
 
-`#selected-item="{ item, search }"` - Slot used to customize the text of selected items. If not provided, falls back to the `item` slot.
\ No newline at end of file
+`#selected-item="{ item: TModel, search: string, index:  number, remove: () => void }"` - Slot used to customize the text of selected items. If not provided, falls back to the `item` slot. The `remove` function will deselect the item and is only valid when using multi-select.
\ No newline at end of file
diff --git a/playground/Coalesce.Domain/Case.cs b/playground/Coalesce.Domain/Case.cs
index 79538474c..63d49549a 100644
--- a/playground/Coalesce.Domain/Case.cs
+++ b/playground/Coalesce.Domain/Case.cs
@@ -232,6 +232,15 @@ public override IQueryable<Case> GetQuery(IDataSourceParameters parameters) => D
                 .IncludeChildren();
         }
 
+        public class MissingManyToManyFarSide(CrudContext<AppDbContext> context) : StandardDataSource<Case, AppDbContext>(context)
+        {
+            public override IQueryable<Case> GetQuery(IDataSourceParameters parameters) => Db.Cases
+                .Include(c => c.CaseProducts)
+                .Include(c => c.AssignedTo)
+                .Include(c => c.ReportedBy);
+        }
+
+
         /// <summary>
         /// Returns a list of summary information about Cases
         /// </summary>
diff --git a/playground/Coalesce.Domain/Person.cs b/playground/Coalesce.Domain/Person.cs
index 660c24ed3..e9864493e 100644
--- a/playground/Coalesce.Domain/Person.cs
+++ b/playground/Coalesce.Domain/Person.cs
@@ -298,7 +298,7 @@ public static string[] MethodWithStringArrayParameter(AppDbContext db, string[]
         }
 
         [Coalesce, Execute]
-        public static Person MethodWithEntityParameter(AppDbContext db, Person person)
+        public static Person MethodWithEntityParameter(AppDbContext db, Person person, Person[] people)
         {
             return person;
         }
diff --git a/playground/Coalesce.Web.Vue2/Api/Generated/PersonController.g.cs b/playground/Coalesce.Web.Vue2/Api/Generated/PersonController.g.cs
index a39ceed94..62fc17e62 100644
--- a/playground/Coalesce.Web.Vue2/Api/Generated/PersonController.g.cs
+++ b/playground/Coalesce.Web.Vue2/Api/Generated/PersonController.g.cs
@@ -839,11 +839,13 @@ [FromBody] MethodWithStringArrayParameterParameters _params
         [Authorize]
         [Consumes("application/x-www-form-urlencoded", "multipart/form-data")]
         public virtual ItemResult<PersonResponse> MethodWithEntityParameter(
-            [FromForm(Name = "person")] PersonParameter person)
+            [FromForm(Name = "person")] PersonParameter person,
+            [FromForm(Name = "people")] PersonParameter[] people)
         {
             var _params = new
             {
-                Person = !Request.Form.HasAnyValue(nameof(person)) ? null : person
+                Person = !Request.Form.HasAnyValue(nameof(person)) ? null : person,
+                People = !Request.Form.HasAnyValue(nameof(people)) ? null : people.ToList()
             };
 
             if (Context.Options.ValidateAttributesForMethods)
@@ -857,7 +859,8 @@ public virtual ItemResult<PersonResponse> MethodWithEntityParameter(
             var _mappingContext = new MappingContext(Context);
             var _methodResult = Coalesce.Domain.Person.MethodWithEntityParameter(
                 Db,
-                _params.Person?.MapToNew(_mappingContext)
+                _params.Person?.MapToNew(_mappingContext),
+                _params.People?.Select(_m => _m.MapToNew(_mappingContext)).ToArray()
             );
             var _result = new ItemResult<PersonResponse>();
             _result.Object = Mapper.MapToDto<Coalesce.Domain.Person, PersonResponse>(_methodResult, _mappingContext, includeTree);
@@ -867,6 +870,7 @@ public virtual ItemResult<PersonResponse> MethodWithEntityParameter(
         public class MethodWithEntityParameterParameters
         {
             public PersonParameter Person { get; set; }
+            public PersonParameter[] People { get; set; }
         }
 
         /// <summary>
@@ -890,7 +894,8 @@ [FromBody] MethodWithEntityParameterParameters _params
             var _mappingContext = new MappingContext(Context);
             var _methodResult = Coalesce.Domain.Person.MethodWithEntityParameter(
                 Db,
-                _params.Person?.MapToNew(_mappingContext)
+                _params.Person?.MapToNew(_mappingContext),
+                _params.People?.Select(_m => _m.MapToNew(_mappingContext)).ToArray()
             );
             var _result = new ItemResult<PersonResponse>();
             _result.Object = Mapper.MapToDto<Coalesce.Domain.Person, PersonResponse>(_methodResult, _mappingContext, includeTree);
diff --git a/playground/Coalesce.Web.Vue2/src/api-clients.g.ts b/playground/Coalesce.Web.Vue2/src/api-clients.g.ts
index b48d2a865..ad19ae1c9 100644
--- a/playground/Coalesce.Web.Vue2/src/api-clients.g.ts
+++ b/playground/Coalesce.Web.Vue2/src/api-clients.g.ts
@@ -269,10 +269,11 @@ export class PersonApiClient extends ModelApiClient<$models.Person> {
     return this.$invoke($method, $params, $config)
   }
   
-  public methodWithEntityParameter(person: $models.Person | null, $config?: AxiosRequestConfig): AxiosPromise<ItemResult<$models.Person>> {
+  public methodWithEntityParameter(person: $models.Person | null, people: $models.Person[] | null, $config?: AxiosRequestConfig): AxiosPromise<ItemResult<$models.Person>> {
     const $method = this.$metadata.methods.methodWithEntityParameter
     const $params =  {
       person,
+      people,
     }
     return this.$invoke($method, $params, $config)
   }
diff --git a/playground/Coalesce.Web.Vue2/src/metadata.g.ts b/playground/Coalesce.Web.Vue2/src/metadata.g.ts
index 336a0b869..928dae24b 100644
--- a/playground/Coalesce.Web.Vue2/src/metadata.g.ts
+++ b/playground/Coalesce.Web.Vue2/src/metadata.g.ts
@@ -812,6 +812,13 @@ export const Case = domain.types.Case = {
         },
       },
     },
+    missingManyToManyFarSide: {
+      type: "dataSource",
+      name: "MissingManyToManyFarSide" as const,
+      displayName: "Missing Many To Many Far Side",
+      props: {
+      },
+    },
   },
 }
 export const CaseDto = domain.types.CaseDto = {
@@ -1795,6 +1802,22 @@ export const Person = domain.types.Person = {
             required: val => val != null || "Person is required.",
           }
         },
+        people: {
+          name: "people",
+          displayName: "People",
+          type: "collection",
+          itemType: {
+            name: "$collectionItem",
+            displayName: "",
+            role: "value",
+            type: "model",
+            get typeDef() { return (domain.types.Person as ModelType & { name: "Person" }) },
+          },
+          role: "value",
+          rules: {
+            required: val => val != null || "People is required.",
+          }
+        },
       },
       return: {
         name: "$return",
diff --git a/playground/Coalesce.Web.Vue2/src/models.g.ts b/playground/Coalesce.Web.Vue2/src/models.g.ts
index 0117febb4..e344abb1a 100644
--- a/playground/Coalesce.Web.Vue2/src/models.g.ts
+++ b/playground/Coalesce.Web.Vue2/src/models.g.ts
@@ -174,6 +174,10 @@ export namespace Case {
         return reactiveDataSource(this);
       }
     }
+    
+    export class MissingManyToManyFarSide implements DataSource<typeof metadata.Case.dataSources.missingManyToManyFarSide> {
+      readonly $metadata = metadata.Case.dataSources.missingManyToManyFarSide
+    }
   }
 }
 
diff --git a/playground/Coalesce.Web.Vue2/src/viewmodels.g.ts b/playground/Coalesce.Web.Vue2/src/viewmodels.g.ts
index 2686d4cd0..9f8d465ad 100644
--- a/playground/Coalesce.Web.Vue2/src/viewmodels.g.ts
+++ b/playground/Coalesce.Web.Vue2/src/viewmodels.g.ts
@@ -635,9 +635,9 @@ export class PersonListViewModel extends ListViewModel<$models.Person, $apiClien
   public get methodWithEntityParameter() {
     const methodWithEntityParameter = this.$apiClient.$makeCaller(
       this.$metadata.methods.methodWithEntityParameter,
-      (c, person: $models.Person | null) => c.methodWithEntityParameter(person),
-      () => ({person: null as $models.Person | null, }),
-      (c, args) => c.methodWithEntityParameter(args.person))
+      (c, person: $models.Person | null, people: $models.Person[] | null) => c.methodWithEntityParameter(person, people),
+      () => ({person: null as $models.Person | null, people: null as $models.Person[] | null, }),
+      (c, args) => c.methodWithEntityParameter(args.person, args.people))
     
     Object.defineProperty(this, 'methodWithEntityParameter', {value: methodWithEntityParameter});
     return methodWithEntityParameter
diff --git a/playground/Coalesce.Web.Vue3/.vscode/settings.json b/playground/Coalesce.Web.Vue3/.vscode/settings.json
index ec3b37134..a091bf3db 100644
--- a/playground/Coalesce.Web.Vue3/.vscode/settings.json
+++ b/playground/Coalesce.Web.Vue3/.vscode/settings.json
@@ -1,4 +1,8 @@
 {
+    "editor.formatOnPaste": false,
+    "editor.formatOnSave": true,
+    "editor.formatOnType": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
     "typescript.tsdk": "node_modules\\typescript\\lib",
     "dotnet.defaultSolution": "Coalesce.Web.Vue3.sln"
 }
\ No newline at end of file
diff --git a/playground/Coalesce.Web.Vue3/Api/Generated/PersonController.g.cs b/playground/Coalesce.Web.Vue3/Api/Generated/PersonController.g.cs
index eaedbdf18..8ff962edc 100644
--- a/playground/Coalesce.Web.Vue3/Api/Generated/PersonController.g.cs
+++ b/playground/Coalesce.Web.Vue3/Api/Generated/PersonController.g.cs
@@ -839,11 +839,13 @@ [FromBody] MethodWithStringArrayParameterParameters _params
         [Authorize]
         [Consumes("application/x-www-form-urlencoded", "multipart/form-data")]
         public virtual ItemResult<PersonResponse> MethodWithEntityParameter(
-            [FromForm(Name = "person")] PersonParameter person)
+            [FromForm(Name = "person")] PersonParameter person,
+            [FromForm(Name = "people")] PersonParameter[] people)
         {
             var _params = new
             {
-                Person = !Request.Form.HasAnyValue(nameof(person)) ? null : person
+                Person = !Request.Form.HasAnyValue(nameof(person)) ? null : person,
+                People = !Request.Form.HasAnyValue(nameof(people)) ? null : people.ToList()
             };
 
             if (Context.Options.ValidateAttributesForMethods)
@@ -857,7 +859,8 @@ public virtual ItemResult<PersonResponse> MethodWithEntityParameter(
             var _mappingContext = new MappingContext(Context);
             var _methodResult = Coalesce.Domain.Person.MethodWithEntityParameter(
                 Db,
-                _params.Person?.MapToNew(_mappingContext)
+                _params.Person?.MapToNew(_mappingContext),
+                _params.People?.Select(_m => _m.MapToNew(_mappingContext)).ToArray()
             );
             var _result = new ItemResult<PersonResponse>();
             _result.Object = Mapper.MapToDto<Coalesce.Domain.Person, PersonResponse>(_methodResult, _mappingContext, includeTree);
@@ -867,6 +870,7 @@ public virtual ItemResult<PersonResponse> MethodWithEntityParameter(
         public class MethodWithEntityParameterParameters
         {
             public PersonParameter Person { get; set; }
+            public PersonParameter[] People { get; set; }
         }
 
         /// <summary>
@@ -890,7 +894,8 @@ [FromBody] MethodWithEntityParameterParameters _params
             var _mappingContext = new MappingContext(Context);
             var _methodResult = Coalesce.Domain.Person.MethodWithEntityParameter(
                 Db,
-                _params.Person?.MapToNew(_mappingContext)
+                _params.Person?.MapToNew(_mappingContext),
+                _params.People?.Select(_m => _m.MapToNew(_mappingContext)).ToArray()
             );
             var _result = new ItemResult<PersonResponse>();
             _result.Object = Mapper.MapToDto<Coalesce.Domain.Person, PersonResponse>(_methodResult, _mappingContext, includeTree);
diff --git a/playground/Coalesce.Web.Vue3/src/App.vue b/playground/Coalesce.Web.Vue3/src/App.vue
index 7393653e6..15a91bd21 100644
--- a/playground/Coalesce.Web.Vue3/src/App.vue
+++ b/playground/Coalesce.Web.Vue3/src/App.vue
@@ -12,13 +12,11 @@
         label="Dark Mode"
         v-model="darkMode"
         hide-details
-        class="ml-2"
+        class="mx-3"
         density="compact"
       />
 
-      <v-btn variant="text" to="/">Home</v-btn>
-      <v-btn variant="text" to="/test">Test</v-btn>
-      <v-btn variant="text" to="/test-setup">Test2</v-btn>
+      <v-btn variant="text" to="/examples">Examples/Tests</v-btn>
       <v-btn variant="text" to="/audit-logs">Audit</v-btn>
       <v-btn variant="text" href="/swagger">Swagger</v-btn>
       <v-btn variant="text" href="/scalar/v1">OpenAPI</v-btn>
@@ -46,10 +44,8 @@
 
     <v-main>
       <router-view v-slot="{ Component }">
-        <transition name="router-transition" mode="out-in" appear>
-          <!-- https://stackoverflow.com/questions/52847979/what-is-router-view-key-route-fullpath -->
-          <component ref="routerView" :is="Component" :key="$route.path" />
-        </transition>
+        <!-- https://stackoverflow.com/questions/52847979/what-is-router-view-key-route-fullpath -->
+        <component ref="routerView" :is="Component" :key="$route.path" />
       </router-view>
     </v-main>
   </v-app>
diff --git a/playground/Coalesce.Web.Vue3/src/api-clients.g.ts b/playground/Coalesce.Web.Vue3/src/api-clients.g.ts
index b48d2a865..ad19ae1c9 100644
--- a/playground/Coalesce.Web.Vue3/src/api-clients.g.ts
+++ b/playground/Coalesce.Web.Vue3/src/api-clients.g.ts
@@ -269,10 +269,11 @@ export class PersonApiClient extends ModelApiClient<$models.Person> {
     return this.$invoke($method, $params, $config)
   }
   
-  public methodWithEntityParameter(person: $models.Person | null, $config?: AxiosRequestConfig): AxiosPromise<ItemResult<$models.Person>> {
+  public methodWithEntityParameter(person: $models.Person | null, people: $models.Person[] | null, $config?: AxiosRequestConfig): AxiosPromise<ItemResult<$models.Person>> {
     const $method = this.$metadata.methods.methodWithEntityParameter
     const $params =  {
       person,
+      people,
     }
     return this.$invoke($method, $params, $config)
   }
diff --git a/playground/Coalesce.Web.Vue3/src/components/Examples.vue b/playground/Coalesce.Web.Vue3/src/components/Examples.vue
new file mode 100644
index 000000000..5ff343140
--- /dev/null
+++ b/playground/Coalesce.Web.Vue3/src/components/Examples.vue
@@ -0,0 +1,67 @@
+<template>
+  <v-container fluid class="pa-0">
+    <div class="d-flex">
+      <v-sheet
+        class="d-flex elevation-3"
+        style="height: calc(100vh - var(--v-layout-top))"
+      >
+        <v-list density="compact" style="width: 220px">
+          <template v-for="dir in pages">
+            <div
+              class="font-weight-medium text-uppercase mt-3 mx-2 pt-3 pb-1"
+              style="border-top: 1px solid rgba(var(--v-theme-on-surface), 0.3)"
+            >
+              {{ dir.name }}
+            </div>
+            <v-list-item
+              v-for="page in dir.children"
+              :to="'/examples/' + page.path"
+              :title="page.name"
+              class="pl-8"
+            >
+            </v-list-item>
+          </template>
+        </v-list>
+      </v-sheet>
+      <div class="pa-3 flex-grow-1">
+        <router-view v-slot="{ Component }">
+          <div v-if="!Component">
+            <div class="mt-10 mx-auto text-center">
+              Select an item on the left
+            </div>
+          </div>
+          <component :is="Component" />
+        </router-view>
+      </div>
+    </div>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const examples = import.meta.glob("@/examples/**/*.vue");
+const pages = computed(() => {
+  const paths = Object.entries(examples).map((e) =>
+    e[0].replace("/src/examples/", "")
+  );
+  const directories = new Set(paths.map((e) => e.substring(0, e.indexOf("/"))));
+  return [...directories.values()]
+    .map((dir) => ({
+      name: dir,
+      children: paths
+        .filter((e) => e.startsWith(dir + "/"))
+        .map((x) => {
+          const path = x.replace(".vue", "");
+          return {
+            path: path,
+            name: path.replace(dir + "/", "").replace("-examples", ""),
+          };
+        })
+        .sort((a, b) => a.name.localeCompare(b.name)),
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name));
+});
+</script>
+
+<style scoped></style>
diff --git a/playground/Coalesce.Web.Vue3/src/components/test.vue b/playground/Coalesce.Web.Vue3/src/components/test.vue
index e94742fce..824900ed8 100644
--- a/playground/Coalesce.Web.Vue3/src/components/test.vue
+++ b/playground/Coalesce.Web.Vue3/src/components/test.vue
@@ -1,8 +1,16 @@
 <template>
   <v-container grid-list-lg>
     <c-loader-status :loaders="{ 'no-initial-content': [caseVm.$load] }">
-      <c-time-picker></c-time-picker>
-      <v-card class="my-10">
+      <c-select
+        for="Person"
+        v-model="people"
+        multiple
+        density="compact"
+        variant="outlined"
+      >
+      </c-select>
+
+      <v-card class="my-2">
         <v-row>
           <v-col>
             <c-select
@@ -27,11 +35,11 @@
           </v-col>
         </v-row>
       </v-card>
-      <c-input :model=caseVm for=title></c-input>
+      <c-input :model="caseVm" for="title"></c-input>
       <c-select-string-value
         :model="caseVm"
         for="title"
-        method="getCaseTitles" 
+        method="getCaseTitles"
       />
       <v-btn @click="disabled = !disabled">Disable Toggle</v-btn>
       <v-form :disabled="disabled">
@@ -92,31 +100,6 @@
       <br />
       {{ date }}
 
-      <c-select for="Person" v-model="caseVm.assignedTo"> </c-select>
-      <c-select :model="caseVm" for="assignedTo"> </c-select>
-      <c-select :model="caseVm" for="assignedTo" density="compact"> </c-select>
-      <c-select
-        :model="caseVm"
-        for="assignedTo"
-        density="compact"
-        variant="outlined"
-      >
-      </c-select>
-
-      <v-defaults-provider
-        :defaults="{
-          VInput: { density: 'compact' },
-          VField: { variant: 'outlined' },
-        }"
-      >
-        <c-select
-          :model="caseVm"
-          for="assignedTo"
-          label="Outlined via v-defaults-provider"
-        >
-        </c-select>
-      </v-defaults-provider>
-
       <img
         v-if="caseVm.caseKey"
         :src="caseVm.downloadImage.getResultObjectUrl()"
@@ -154,6 +137,7 @@ export default class Test extends Base {
   disabled = false;
   date = new Date(1722558611283);
   caseVm = new CaseViewModel();
+  people = [];
 
   async created() {
     this.personList.$dataSource =
diff --git a/playground/Coalesce.Web.Vue3/src/examples/c-select-many-to-many/binding.vue b/playground/Coalesce.Web.Vue3/src/examples/c-select-many-to-many/binding.vue
new file mode 100644
index 000000000..cc15b8c92
--- /dev/null
+++ b/playground/Coalesce.Web.Vue3/src/examples/c-select-many-to-many/binding.vue
@@ -0,0 +1,53 @@
+<template>
+  <h1>model/for</h1>
+  <v-row>
+    <v-col>
+      <c-select-many-to-many :model="caseVm" for="caseProducts" />
+    </v-col>
+    <v-col>
+      <v-btn @click="caseVm.$bulkSave()" :loading="caseVm.$bulkSave.isLoading">
+        Save
+      </v-btn>
+      <br />
+      <c-display :model="caseVm" for="caseProducts"></c-display>
+    </v-col>
+  </v-row>
+
+  <h1>autosave</h1>
+  <v-row>
+    <v-col>
+      <c-select-many-to-many :model="caseVm2" for="caseProducts" clearable />
+    </v-col>
+    <v-col>
+      <c-display :model="caseVm2" for="caseProducts"></c-display>
+    </v-col>
+  </v-row>
+
+  <h1>far-side not loaded</h1>
+  <v-row>
+    <v-col>
+      <c-select-many-to-many :model="caseVm3" for="caseProducts" />
+    </v-col>
+    <v-col>
+      <c-display :model="caseVm3" for="caseProducts"></c-display>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import { Case, Person } from "@/models.g";
+import { CaseViewModel, PersonListViewModel } from "@/viewmodels.g";
+import { modelDisplay, useBindToQueryString } from "coalesce-vue";
+import { ref } from "vue";
+
+const caseVm = new CaseViewModel();
+caseVm.$load(14);
+
+const caseVm2 = new CaseViewModel();
+caseVm2.$load(15);
+caseVm2.$useAutoSave();
+
+const caseVm3 = new CaseViewModel();
+caseVm3.$dataSource = new CaseViewModel.DataSources.MissingManyToManyFarSide();
+caseVm3.$load(15);
+</script>
diff --git a/playground/Coalesce.Web.Vue3/src/examples/c-select-many-to-many/styling.vue b/playground/Coalesce.Web.Vue3/src/examples/c-select-many-to-many/styling.vue
new file mode 100644
index 000000000..70d24cf6f
--- /dev/null
+++ b/playground/Coalesce.Web.Vue3/src/examples/c-select-many-to-many/styling.vue
@@ -0,0 +1,33 @@
+<template>
+  <h1>c-select slots</h1>
+  <v-row>
+    <v-col>
+      <c-select-many-to-many :model="caseVm" for="caseProducts">
+        <template #prepend>
+          <v-chip>v-input</v-chip>
+        </template>
+        <template #append-inner>
+          <v-chip>v-field</v-chip>
+        </template>
+        <template #default> Default - shouldn't be seen </template>
+
+        <template #selected-item="{ item }">
+          <div class="bg-purple text-white pa-2 mx-2">{{ item.name }}</div>
+        </template>
+        <template #list-item="{ item }">
+          <div class="bg-indigo text-white pa-2 mx-2">{{ item.name }}</div>
+        </template>
+      </c-select-many-to-many>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import { Case, Person } from "@/models.g";
+import { CaseViewModel, PersonListViewModel } from "@/viewmodels.g";
+import { modelDisplay, useBindToQueryString } from "coalesce-vue";
+import { ref } from "vue";
+
+const caseVm = new CaseViewModel();
+caseVm.$load(14);
+</script>
diff --git a/playground/Coalesce.Web.Vue3/src/examples/c-select/multiple-binding.vue b/playground/Coalesce.Web.Vue3/src/examples/c-select/multiple-binding.vue
new file mode 100644
index 000000000..a94503763
--- /dev/null
+++ b/playground/Coalesce.Web.Vue3/src/examples/c-select/multiple-binding.vue
@@ -0,0 +1,121 @@
+<template>
+  <h1>v-model:keyValue (+ query bind)</h1>
+  <v-row>
+    <v-col>
+      <c-select for="Person" multiple v-model:keyValue="selectedIds"></c-select>
+    </v-col>
+    <v-col>
+      {{ selectedIds }}
+    </v-col>
+  </v-row>
+
+  <h1>v-model:objectValue (+ create)</h1>
+  <v-row>
+    <v-col>
+      <c-select
+        for="Person"
+        multiple
+        v-model:objectValue="selectedModels"
+        :create="{
+          getLabel(search: string, items: Person[]) { return items.length == 0 ? search : false },
+          async getItem(search: string, label: string) { return new Person({ name: label }) }
+        }"
+      ></c-select>
+    </v-col>
+    <v-col>
+      [{{ selectedModels.map((x) => modelDisplay(x)).join(", ") }}]
+    </v-col>
+  </v-row>
+
+  <h1>v-model:keyValue and v-model:objectValue (+ rules)</h1>
+  <v-row>
+    <v-col>
+      <c-select
+        for="Person"
+        multiple
+        v-model:keyValue="selectedIds2"
+        v-model:objectValue="selectedModels2"
+        :rules="[(v: any) => `Rule test: rule received ${v}`]"
+      ></c-select>
+    </v-col>
+    <v-col>
+      <div>{{ selectedIds2 }}</div>
+      <div>[{{ selectedModels2.map((x) => modelDisplay(x)).join(", ") }}]</div>
+    </v-col>
+  </v-row>
+
+  <h1>v-model via c-input</h1>
+  <v-row>
+    <v-col>
+      <c-input for="Person" multiple v-model="selectedModels3"></c-input>
+    </v-col>
+    <v-col>
+      <div>[{{ selectedModels3.map((x) => modelDisplay(x)).join(", ") }}]</div>
+    </v-col>
+  </v-row>
+
+  <h1>for method parameter</h1>
+  <v-row>
+    <v-col>
+      <c-select :model="personList.methodWithEntityParameter" for="people" />
+      <h3>Via c-input</h3>
+      <c-input :model="personList.methodWithEntityParameter" for="people" />
+    </v-col>
+    <v-col>
+      <v-btn @click="personList.methodWithEntityParameter.invokeWithArgs()"
+        >Execute</v-btn
+      >
+      <div>
+        [{{
+          personList.methodWithEntityParameter.args.people
+            ?.map((x) => modelDisplay(x))
+            .join(", ")
+        }}]
+      </div>
+    </v-col>
+  </v-row>
+
+  <h1>plain v-autocomplete multiple</h1>
+  <v-row>
+    <v-col>
+      <v-autocomplete
+        multiple
+        label="Cats"
+        chips
+        closableChips
+        clearable
+        :items="['Grace', 'Freya', 'Autumn', 'Junipur', 'Molly']"
+        v-model="selectedPlain"
+      />
+    </v-col>
+    <v-col>
+      {{ selectedPlain }}
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import { Case, Person } from "@/models.g";
+import { PersonListViewModel } from "@/viewmodels.g";
+import { modelDisplay, useBindToQueryString } from "coalesce-vue";
+import { ref } from "vue";
+
+const selectedIds = ref<number[]>([]);
+useBindToQueryString(selectedIds, {
+  queryKey: "ids",
+  parse: JSON.parse,
+  stringify: JSON.stringify,
+});
+
+const personList = new PersonListViewModel();
+personList.methodWithEntityParameter.args.person = new Person({ companyId: 1 });
+
+const caseVm = new Case();
+const selectedModels = ref<Person[]>([]);
+
+const selectedIds2 = ref<number[]>([]);
+const selectedModels2 = ref<Person[]>([]);
+
+const selectedModels3 = ref<Person[]>([]);
+const selectedPlain = ref<string[]>([]);
+</script>
diff --git a/playground/Coalesce.Web.Vue3/src/examples/c-select/single-binding.vue b/playground/Coalesce.Web.Vue3/src/examples/c-select/single-binding.vue
new file mode 100644
index 000000000..a8c2091b0
--- /dev/null
+++ b/playground/Coalesce.Web.Vue3/src/examples/c-select/single-binding.vue
@@ -0,0 +1,88 @@
+<template>
+  <h1>v-model:keyValue (+ query bind)</h1>
+  <v-row>
+    <v-col>
+      <c-select for="Person" v-model:keyValue="selectedId" clearable></c-select>
+    </v-col>
+    <v-col>
+      {{ selectedId }}
+    </v-col>
+  </v-row>
+
+  <h1>v-model:objectValue</h1>
+  <v-row>
+    <v-col>
+      <c-select
+        for="Person"
+        v-model:objectValue="selectedModel"
+        clearable
+      ></c-select>
+    </v-col>
+    <v-col>
+      <div>{{ selectedModel?.name }}</div>
+    </v-col>
+  </v-row>
+
+  <h1>v-model:keyValue and v-model:objectValue</h1>
+  <v-row>
+    <v-col>
+      <c-select
+        for="Person"
+        v-model:keyValue="selectedId2"
+        v-model:objectValue="selectedModel2"
+        clearable
+      ></c-select>
+    </v-col>
+    <v-col>
+      <div>{{ selectedId2 }}</div>
+      <div>{{ selectedModel2?.name }}</div>
+    </v-col>
+  </v-row>
+
+  <h1>v-model via c-input</h1>
+  <v-row>
+    <v-col>
+      <c-input for="Person" v-model="selectedModel3" clearable></c-input>
+    </v-col>
+    <v-col>
+      {{ selectedModel3?.name }}
+    </v-col>
+  </v-row>
+
+  <h1>plain v-autocomplete</h1>
+  <v-row>
+    <v-col>
+      <v-autocomplete
+        label="Cats"
+        chips
+        closableChips
+        clearable
+        :items="['Grace', 'Freya', 'Autumn', 'Junipur', 'Molly']"
+        v-model="selectedPlain"
+      />
+    </v-col>
+    <v-col>
+      {{ selectedPlain }}
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import { Person } from "@/models.g";
+import { modelDisplay, useBindToQueryString } from "coalesce-vue";
+import { ref } from "vue";
+
+const selectedId = ref<number>();
+useBindToQueryString(selectedId, {
+  queryKey: "id",
+  parse: parseInt,
+});
+
+const selectedModel = ref<Person>();
+
+const selectedId2 = ref<number>();
+const selectedModel2 = ref<Person>();
+
+const selectedModel3 = ref<Person>();
+const selectedPlain = ref<string>();
+</script>
diff --git a/playground/Coalesce.Web.Vue3/src/examples/c-select/styling.vue b/playground/Coalesce.Web.Vue3/src/examples/c-select/styling.vue
new file mode 100644
index 000000000..02bfe7ad4
--- /dev/null
+++ b/playground/Coalesce.Web.Vue3/src/examples/c-select/styling.vue
@@ -0,0 +1,69 @@
+<template>
+  <h1>prepend/append icon props</h1>
+  <c-select
+    :model="caseVm"
+    for="assignedTo"
+    prepend-icon="fa fa-circle-chevron-left"
+    prepend-inner-icon="fa fa-chevron-left"
+    append-inner-icon="fa fa-chevron-right"
+    append-icon="fa fa-circle-chevron-right"
+  >
+  </c-select>
+
+  <c-select
+    :model="caseVm"
+    for="assignedTo"
+    prepend-icon="fa fa-circle-chevron-left"
+    prepend-inner-icon="fa fa-chevron-left"
+  >
+    <template #append> sdfsdf </template>
+  </c-select>
+
+  <h1>slots passthrough</h1>
+  <c-select
+    :model="caseVm"
+    for="assignedTo"
+    prepend-icon="fa fa-circle-chevron-left"
+    prepend-inner-icon="fa fa-chevron-left"
+    append-inner-icon="fa fa-chevron-right"
+    append-icon="fa fa-circle-chevron-right"
+  >
+    <template #prepend>
+      <v-chip>v-input</v-chip>
+    </template>
+    <template #append-inner>
+      <v-chip>v-field</v-chip>
+    </template>
+    <template #default> Default - shouldn't be seen </template>
+  </c-select>
+
+  <h1>compact/outlined via v-defaults-provider</h1>
+  <v-defaults-provider
+    :defaults="{
+      VInput: { density: 'compact' },
+      VField: { variant: 'outlined' },
+    }"
+  >
+    <c-select :model="caseVm" for="assignedTo"> </c-select>
+  </v-defaults-provider>
+
+  <h1>compact/outlined via direct props</h1>
+  <c-select
+    :model="caseVm"
+    for="assignedTo"
+    density="compact"
+    variant="outlined"
+  >
+  </c-select>
+</template>
+
+<script setup lang="ts">
+import { Person } from "@/models.g";
+import { CaseViewModel } from "@/viewmodels.g";
+import { modelDisplay, useBindToQueryString } from "coalesce-vue";
+import { ref } from "vue";
+
+const caseVm = new CaseViewModel();
+caseVm.$load(15);
+caseVm.$useAutoSave();
+</script>
diff --git a/playground/Coalesce.Web.Vue3/src/main.ts b/playground/Coalesce.Web.Vue3/src/main.ts
index 24773d571..0d877ebc5 100644
--- a/playground/Coalesce.Web.Vue3/src/main.ts
+++ b/playground/Coalesce.Web.Vue3/src/main.ts
@@ -26,6 +26,7 @@ import "@/viewmodels.g";
 import $metadata from "@/metadata.g";
 
 import testWorker from "./worker.ts?worker";
+import Examples from "./components/Examples.vue";
 new testWorker();
 
 new Worker(new URL("./worker.ts", import.meta.url));
@@ -33,10 +34,11 @@ new Worker(new URL("./worker.ts", import.meta.url));
 AxiosClient.defaults.baseURL = "/api";
 AxiosClient.defaults.withCredentials = true;
 
+const examples = import.meta.glob("@/examples/**/*.vue");
+
 const router = createRouter({
   history: createWebHistory(),
   routes: [
-    { path: "/", component: () => import("@/components/HelloWorld.vue") },
     { path: "/test", component: () => import("./components/test.vue") },
     {
       path: "/test-setup",
@@ -47,6 +49,15 @@ const router = createRouter({
       component: CAdminAuditLogPage,
       props: { type: "AuditLog" },
     },
+    {
+      path: "/examples",
+      alias: "/",
+      component: Examples,
+      children: Object.entries(examples).map((x) => ({
+        path: x[0].replace("/src/examples/", "").replace(".vue", ""),
+        component: x[1],
+      })),
+    },
     {
       path: "/admin/:type",
       name: "coalesce-admin-list",
diff --git a/playground/Coalesce.Web.Vue3/src/metadata.g.ts b/playground/Coalesce.Web.Vue3/src/metadata.g.ts
index 336a0b869..928dae24b 100644
--- a/playground/Coalesce.Web.Vue3/src/metadata.g.ts
+++ b/playground/Coalesce.Web.Vue3/src/metadata.g.ts
@@ -812,6 +812,13 @@ export const Case = domain.types.Case = {
         },
       },
     },
+    missingManyToManyFarSide: {
+      type: "dataSource",
+      name: "MissingManyToManyFarSide" as const,
+      displayName: "Missing Many To Many Far Side",
+      props: {
+      },
+    },
   },
 }
 export const CaseDto = domain.types.CaseDto = {
@@ -1795,6 +1802,22 @@ export const Person = domain.types.Person = {
             required: val => val != null || "Person is required.",
           }
         },
+        people: {
+          name: "people",
+          displayName: "People",
+          type: "collection",
+          itemType: {
+            name: "$collectionItem",
+            displayName: "",
+            role: "value",
+            type: "model",
+            get typeDef() { return (domain.types.Person as ModelType & { name: "Person" }) },
+          },
+          role: "value",
+          rules: {
+            required: val => val != null || "People is required.",
+          }
+        },
       },
       return: {
         name: "$return",
diff --git a/playground/Coalesce.Web.Vue3/src/models.g.ts b/playground/Coalesce.Web.Vue3/src/models.g.ts
index 0117febb4..e344abb1a 100644
--- a/playground/Coalesce.Web.Vue3/src/models.g.ts
+++ b/playground/Coalesce.Web.Vue3/src/models.g.ts
@@ -174,6 +174,10 @@ export namespace Case {
         return reactiveDataSource(this);
       }
     }
+    
+    export class MissingManyToManyFarSide implements DataSource<typeof metadata.Case.dataSources.missingManyToManyFarSide> {
+      readonly $metadata = metadata.Case.dataSources.missingManyToManyFarSide
+    }
   }
 }
 
diff --git a/playground/Coalesce.Web.Vue3/src/styles/_variables.scss b/playground/Coalesce.Web.Vue3/src/styles/_variables.scss
deleted file mode 100644
index 77091eda6..000000000
--- a/playground/Coalesce.Web.Vue3/src/styles/_variables.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-// Place SASS variable overrides here
-// $font-size-root: 18px;
diff --git a/playground/Coalesce.Web.Vue3/src/viewmodels.g.ts b/playground/Coalesce.Web.Vue3/src/viewmodels.g.ts
index 2686d4cd0..9f8d465ad 100644
--- a/playground/Coalesce.Web.Vue3/src/viewmodels.g.ts
+++ b/playground/Coalesce.Web.Vue3/src/viewmodels.g.ts
@@ -635,9 +635,9 @@ export class PersonListViewModel extends ListViewModel<$models.Person, $apiClien
   public get methodWithEntityParameter() {
     const methodWithEntityParameter = this.$apiClient.$makeCaller(
       this.$metadata.methods.methodWithEntityParameter,
-      (c, person: $models.Person | null) => c.methodWithEntityParameter(person),
-      () => ({person: null as $models.Person | null, }),
-      (c, args) => c.methodWithEntityParameter(args.person))
+      (c, person: $models.Person | null, people: $models.Person[] | null) => c.methodWithEntityParameter(person, people),
+      () => ({person: null as $models.Person | null, people: null as $models.Person[] | null, }),
+      (c, args) => c.methodWithEntityParameter(args.person, args.people))
     
     Object.defineProperty(this, 'methodWithEntityParameter', {value: methodWithEntityParameter});
     return methodWithEntityParameter
diff --git a/src/coalesce-vue-vuetify3/package-lock.json b/src/coalesce-vue-vuetify3/package-lock.json
index d1030ed25..1b64759e8 100644
--- a/src/coalesce-vue-vuetify3/package-lock.json
+++ b/src/coalesce-vue-vuetify3/package-lock.json
@@ -32,7 +32,7 @@
         "vitest": "^2.0.3",
         "vue": "^3.4.6",
         "vue-router": "^4.4.1",
-        "vue-tsc": "^2.1.4",
+        "vue-tsc": "^2.1.10",
         "vuetify": "^3.7.1"
       },
       "optionalDependencies": {
@@ -64,7 +64,7 @@
         "cross-blob": "^1.2.1",
         "jsdom": "^23.0.1",
         "lodash": "^4.17.15",
-        "typescript": "4.9.3",
+        "typescript": "5.6.3",
         "vite": "^5.4.6",
         "vitest": "^1.1.1",
         "vue": "2.7.8",
@@ -377,18 +377,18 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
-      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
-      "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
@@ -432,10 +432,13 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.8.tgz",
-      "integrity": "sha512-WzfbgXOkGzZiXXCqk43kKwZjzwx4oulxZi3nq2TYL9mOjQv6kYwul9mz6ID36njuL7Xkp6nJEfok848Zj10j/w==",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz",
+      "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==",
       "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.26.0"
+      },
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -527,14 +530,13 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.24.9",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.9.tgz",
-      "integrity": "sha512-xm8XrMKz0IlUdocVbYJe0Z9xEgidU7msskG8BbhnTPK/HZ2z/7FP7ykqPgrUH+C+r414mNfNWam1f2vqOjqjYQ==",
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.0.tgz",
+      "integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-string-parser": "^7.24.8",
-        "@babel/helper-validator-identifier": "^7.24.7",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1813,27 +1815,27 @@
       }
     },
     "node_modules/@volar/language-core": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.2.tgz",
-      "integrity": "sha512-sONt5RLvLL1SlBdhyUSthZzuKePbJ7DwFFB9zT0eyWpDl+v7GXGh/RkPxxWaR22bIhYtTzp4Ka1MWatl/53Riw==",
+      "version": "2.4.10",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.10.tgz",
+      "integrity": "sha512-hG3Z13+nJmGaT+fnQzAkS0hjJRa2FCeqZt6Bd+oGNhUkQ+mTFsDETg5rqUTxyzIh5pSOGY7FHCWUS8G82AzLCA==",
       "dev": true,
       "dependencies": {
-        "@volar/source-map": "2.4.2"
+        "@volar/source-map": "2.4.10"
       }
     },
     "node_modules/@volar/source-map": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.2.tgz",
-      "integrity": "sha512-qiGfGgeZ5DEarPX3S+HcFktFCjfDrFPCXKeXNbrlB7v8cvtPRm8YVwoXOdGG1NhaL5rMlv5BZPVQyu4EdWWIvA==",
+      "version": "2.4.10",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.10.tgz",
+      "integrity": "sha512-OCV+b5ihV0RF3A7vEvNyHPi4G4kFa6ukPmyVocmqm5QzOd8r5yAtiNvaPEjl8dNvgC/lj4JPryeeHLdXd62rWA==",
       "dev": true
     },
     "node_modules/@volar/typescript": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.2.tgz",
-      "integrity": "sha512-m2uZduhaHO1SZuagi30OsjI/X1gwkaEAC+9wT/nCNAtJ5FqXEkKvUncHmffG7ESDZPlFFUBK4vJ0D9Hfr+f2EA==",
+      "version": "2.4.10",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.10.tgz",
+      "integrity": "sha512-F8ZtBMhSXyYKuBfGpYwqA5rsONnOwAVvjyE7KPYJ7wgZqo2roASqNWUnianOomJX5u1cxeRooHV59N0PhvEOgw==",
       "dev": true,
       "dependencies": {
-        "@volar/language-core": "2.4.2",
+        "@volar/language-core": "2.4.10",
         "path-browserify": "^1.0.1",
         "vscode-uri": "^3.0.8"
       }
@@ -2002,16 +2004,16 @@
       }
     },
     "node_modules/@vue/language-core": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.1.4.tgz",
-      "integrity": "sha512-i8pfAgNjTNjabBX1xRsuV6aRw2E8bdQXwd5H8m3cUkTVJju3QN5nfdoXET0uK+yXsuloNJPzo6PXFujRRPNmMA==",
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.1.10.tgz",
+      "integrity": "sha512-DAI289d0K3AB5TUG3xDp9OuQ71CnrujQwJrQnfuZDwo6eGNf0UoRlPuaVNO+Zrn65PC3j0oB2i7mNmVPggeGeQ==",
       "dev": true,
       "dependencies": {
-        "@volar/language-core": "~2.4.1",
-        "@vue/compiler-dom": "^3.4.0",
+        "@volar/language-core": "~2.4.8",
+        "@vue/compiler-dom": "^3.5.0",
         "@vue/compiler-vue2": "^2.7.16",
-        "@vue/shared": "^3.4.0",
-        "computeds": "^0.0.1",
+        "@vue/shared": "^3.5.0",
+        "alien-signals": "^0.2.0",
         "minimatch": "^9.0.3",
         "muggle-string": "^0.4.1",
         "path-browserify": "^1.0.1"
@@ -2025,6 +2027,35 @@
         }
       }
     },
+    "node_modules/@vue/language-core/node_modules/@vue/compiler-core": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.13.tgz",
+      "integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.13",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/language-core/node_modules/@vue/compiler-dom": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz",
+      "integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==",
+      "dev": true,
+      "dependencies": {
+        "@vue/compiler-core": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "node_modules/@vue/language-core/node_modules/@vue/shared": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
+      "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
+      "dev": true
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.4.32",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.32.tgz",
@@ -2143,6 +2174,12 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/alien-signals": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-0.2.2.tgz",
+      "integrity": "sha512-cZIRkbERILsBOXTQmMrxc9hgpxglstn69zm+F1ARf4aPAzdAFYd6sBq87ErO0Fj3DV94tglcyHG5kQz9nDC/8A==",
+      "dev": true
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -2497,12 +2534,6 @@
         "node": ">=14"
       }
     },
-    "node_modules/computeds": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
-      "integrity": "sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==",
-      "dev": true
-    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -5067,15 +5098,6 @@
         "node": ">=14.0.0"
       }
     },
-    "node_modules/to-fast-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -5527,13 +5549,13 @@
       }
     },
     "node_modules/vue-tsc": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.1.4.tgz",
-      "integrity": "sha512-XTzMXQcsixAvNbpou/9qngEsZawaiJRZH3Ja+lfgRfv2A1TJv9vnZ/Kyv7XxPqv/TaZVFSnjGpM87VbWIg6yQg==",
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.1.10.tgz",
+      "integrity": "sha512-RBNSfaaRHcN5uqVqJSZh++Gy/YUzryuv9u1aFWhsammDJXNtUiJMNoJ747lZcQ68wUQFx6E73y4FY3D8E7FGMA==",
       "dev": true,
       "dependencies": {
-        "@volar/typescript": "~2.4.1",
-        "@vue/language-core": "2.1.4",
+        "@volar/typescript": "~2.4.8",
+        "@vue/language-core": "2.1.10",
         "semver": "^7.5.4"
       },
       "bin": {
diff --git a/src/coalesce-vue-vuetify3/package.json b/src/coalesce-vue-vuetify3/package.json
index ac59a798a..56f2ba7e8 100644
--- a/src/coalesce-vue-vuetify3/package.json
+++ b/src/coalesce-vue-vuetify3/package.json
@@ -67,7 +67,7 @@
     "vitest": "^2.0.3",
     "vue": "^3.4.6",
     "vue-router": "^4.4.1",
-    "vue-tsc": "^2.1.4",
+    "vue-tsc": "^2.1.10",
     "vuetify": "^3.7.1"
   },
   "postcss": {
diff --git a/src/coalesce-vue-vuetify3/src/components/c-metadata-component.ts b/src/coalesce-vue-vuetify3/src/components/c-metadata-component.ts
index e82debc4f..d3e78cd8a 100644
--- a/src/coalesce-vue-vuetify3/src/components/c-metadata-component.ts
+++ b/src/coalesce-vue-vuetify3/src/components/c-metadata-component.ts
@@ -23,6 +23,7 @@ import type {
   ApiStateTypeWithArgs,
   ListViewModel,
   ServiceViewModel,
+  ModelCollectionValue,
 } from "coalesce-vue";
 import { ApiState, ViewModel } from "coalesce-vue";
 import { computed, inject, useAttrs } from "vue";
@@ -47,7 +48,7 @@ type MethodsOf<TModel> = TModel extends {
 // prettier-ignore
 export type ForSpec<
   TModel extends ModelAllowedType | unknown = unknown,
-  ValueKind extends Value = Value
+  ValueKind extends Value | ClassType = Value | ClassType
 > = 
 // Handle binding of `:model` to a Model or ViewModel:
 TModel extends Model ? 
@@ -87,6 +88,7 @@ TModel extends Model ?
         ValueKind extends (NumberValue & {role: 'value'}) ? number :
         ValueKind extends FileValue ? File :
         ValueKind extends BooleanValue ? boolean :
+        ValueKind extends ModelCollectionValue ? (Model<ModelType>[]) :
         ValueKind extends CollectionValue ? (string[] | number[]) :
         ValueKind extends Property ? never :
         ValueKind extends Value ? any :
@@ -170,128 +172,132 @@ export function getValueMeta(
     return null;
   }
 
-  if (typeof forVal != "string") {
-    return forVal;
-  }
-
-  if (forVal.length === 0) {
-    throw `prop 'for' must not be an empty string`;
-  }
-
-  if (modelMeta && "props" in modelMeta) {
-    // Handle the 90% case: check if 'for' is a prop on 'model'
-    const matchedProp = modelMeta.props[forVal];
-    if (matchedProp) {
-      return matchedProp;
-    }
-  }
-
-  const forParts = forVal.split(".");
-
   let tail: ClassType | Method | Property | Value | undefined = undefined;
   let tailKind: "type" | "method" | "property" | "value" | undefined =
     undefined;
 
-  if (modelMeta) {
-    if ("params" in modelMeta) {
-      tail = modelMeta;
-      tailKind = "method";
-    } else if (
-      modelMeta.type == "object" ||
-      modelMeta.type == "model" ||
-      modelMeta.type == "dataSource"
-    ) {
-      tail = modelMeta;
+  if (typeof forVal != "string") {
+    if ("props" in forVal) {
+      tail = forVal;
       tailKind = "type";
+    } else {
+      return forVal;
     }
-  }
-
-  $metadata ??= useMetadata();
-
-  for (let i = 0; i < forParts.length; i++) {
-    const forPart = forParts[i];
-    const forPartNext = forParts[i + 1];
-
-    // Check if 'for' is a type name. Type name is only valid in the first position.
-    if (i == 0 && $metadata) {
-      if (forPart in $metadata.types) {
-        tail = ($metadata.types as any)[forPart];
-        tailKind = "type";
-        continue;
-      }
-      if (forPart in $metadata.enums) {
-        const type: EnumType = ($metadata.enums as any)[forPart];
-        tail = <Value>{
-          type: type.type,
-          displayName: type.displayName,
-          name: "",
-          role: "value",
-          typeDef: type,
-        };
-        tailKind = "value";
-        continue;
-      }
+  } else {
+    if (forVal.length === 0) {
+      throw `prop 'for' must not be an empty string`;
     }
 
-    if (tailKind == "type") {
-      // See if the part is a prop name.
-      const type = tail as ClassType;
-      if (type.props[forPart]) {
-        tail = type.props[forPart];
-        tailKind = "property";
-        continue;
+    if (modelMeta && "props" in modelMeta) {
+      // Handle the 90% case: check if 'for' is a prop on 'model'
+      const matchedProp = modelMeta.props[forVal];
+      if (matchedProp) {
+        return matchedProp;
       }
+    }
 
-      // See if the part is a method name.
-      if (type.type == "model" && type.methods[forPart]) {
-        tail = type.methods[forPart];
+    const forParts = forVal.split(".");
+    if (modelMeta) {
+      if ("params" in modelMeta) {
+        tail = modelMeta;
         tailKind = "method";
-        continue;
+      } else if (
+        modelMeta.type == "object" ||
+        modelMeta.type == "model" ||
+        modelMeta.type == "dataSource"
+      ) {
+        tail = modelMeta;
+        tailKind = "type";
       }
+    }
 
-      // forPart wasn't itself a method or prop.
-      // Check if forPart is the literal string "props" or "method"
-      // and the actual name is the following token.
-      if (forPart == "props" && type.props[forPartNext]) {
-        i++;
-        tail = type.props[forPartNext];
-        tailKind = "property";
-        continue;
+    $metadata ??= useMetadata();
+
+    for (let i = 0; i < forParts.length; i++) {
+      const forPart = forParts[i];
+      const forPartNext = forParts[i + 1];
+
+      // Check if 'for' is a type name. Type name is only valid in the first position.
+      if (i == 0 && $metadata) {
+        if (forPart in $metadata.types) {
+          tail = ($metadata.types as any)[forPart];
+          tailKind = "type";
+          continue;
+        }
+        if (forPart in $metadata.enums) {
+          const type: EnumType = ($metadata.enums as any)[forPart];
+          tail = <Value>{
+            type: type.type,
+            displayName: type.displayName,
+            name: "",
+            role: "value",
+            typeDef: type,
+          };
+          tailKind = "value";
+          continue;
+        }
       }
 
-      if (
-        forPart == "methods" &&
-        type.type == "model" &&
-        type.methods[forPartNext]
-      ) {
-        i++;
-        tail = type.methods[forPartNext];
-        tailKind = "method";
-        continue;
-      }
-    } else if (tailKind == "method") {
-      const method = tail as Method;
-      if (method.params[forPart]) {
-        tail = method.params[forPart];
-        tailKind = "value";
-        continue;
+      if (tailKind == "type") {
+        // See if the part is a prop name.
+        const type = tail as ClassType;
+        if (type.props[forPart]) {
+          tail = type.props[forPart];
+          tailKind = "property";
+          continue;
+        }
+
+        // See if the part is a method name.
+        if (type.type == "model" && type.methods[forPart]) {
+          tail = type.methods[forPart];
+          tailKind = "method";
+          continue;
+        }
+
+        // forPart wasn't itself a method or prop.
+        // Check if forPart is the literal string "props" or "method"
+        // and the actual name is the following token.
+        if (forPart == "props" && type.props[forPartNext]) {
+          i++;
+          tail = type.props[forPartNext];
+          tailKind = "property";
+          continue;
+        }
+
+        if (
+          forPart == "methods" &&
+          type.type == "model" &&
+          type.methods[forPartNext]
+        ) {
+          i++;
+          tail = type.methods[forPartNext];
+          tailKind = "method";
+          continue;
+        }
+      } else if (tailKind == "method") {
+        const method = tail as Method;
+        if (method.params[forPart]) {
+          tail = method.params[forPart];
+          tailKind = "value";
+          continue;
+        }
+
+        // Check if forPart is the literal string "params"
+        // and the actual name is the following token.
+        if (forPart == "params" && method.params[forPartNext]) {
+          i++;
+          tail = method.params[forPartNext];
+          tailKind = "value";
+          continue;
+        }
       }
 
-      // Check if forPart is the literal string "params"
-      // and the actual name is the following token.
-      if (forPart == "params" && method.params[forPartNext]) {
-        i++;
-        tail = method.params[forPartNext];
-        tailKind = "value";
-        continue;
-      }
+      throw Error(
+        `Could not resolve token '${forPart}'${
+          forVal != forPart ? " in " + forVal : ""
+        } from ${tailKind} '${tail?.name}'`
+      );
     }
-
-    throw Error(
-      `Could not resolve token '${forPart}'${
-        forVal != forPart ? " in " + forVal : ""
-      } from ${tailKind} '${tail?.name}'`
-    );
   }
 
   if (!tail) {
diff --git a/src/coalesce-vue-vuetify3/src/components/input/c-input.vue b/src/coalesce-vue-vuetify3/src/components/input/c-input.vue
index 6f493c49c..62a6391e1 100644
--- a/src/coalesce-vue-vuetify3/src/components/input/c-input.vue
+++ b/src/coalesce-vue-vuetify3/src/components/input/c-input.vue
@@ -32,6 +32,45 @@ function addHandler(data: any, eventName: string, handler: Function) {
     oldValue.push(handler);
   }
 }
+
+type _ValueType<
+  TModel extends Model | DataSource | AnyArgCaller | undefined,
+  TFor extends ForSpec<TModel>
+> = TFor extends string & keyof ModelTypeLookup
+  ? ModelTypeLookup[TFor]
+  : TFor extends ModelReferenceNavigationProperty | ModelValue
+  ? TFor["typeDef"]["name"] extends keyof ModelTypeLookup
+    ? ModelTypeLookup[TFor["typeDef"]["name"]]
+    : any
+  : TFor extends ForeignKeyProperty
+  ? TFor["principalType"]["name"] extends keyof ModelTypeLookup
+    ? ModelTypeLookup[TFor["principalType"]["name"]]
+    : any
+  : TModel extends ApiStateTypeWithArgs<any, any, infer TArgsObj, any>
+  ? TFor extends keyof TArgsObj
+    ? TArgsObj[TFor]
+    : any
+  : TModel extends Model
+  ? TFor extends PropNames<TModel["$metadata"]>
+    ? TModel["$metadata"]["props"][TFor] extends
+        | ModelReferenceNavigationProperty
+        | ModelValue
+      ? TModel["$metadata"]["props"][TFor]["typeDef"]["name"] extends keyof ModelTypeLookup
+        ? ModelTypeLookup[TModel["$metadata"]["props"][TFor]["typeDef"]["name"]]
+        : any
+      : TModel["$metadata"]["props"][TFor] extends ForeignKeyProperty
+      ? TModel["$metadata"]["props"][TFor]["principalType"]["name"] extends keyof ModelTypeLookup
+        ? ModelTypeLookup[TModel["$metadata"]["props"][TFor]["principalType"]["name"]]
+        : any
+      : TModel["$metadata"]["props"][TFor] extends CollectionProperty
+      ? Array<
+          TypeDiscriminatorToType<
+            TModel["$metadata"]["props"][TFor]["itemType"]["type"]
+          >
+        >
+      : TypeDiscriminatorToType<TModel["$metadata"]["props"][TFor]["type"]>
+    : any
+  : Model<ModelType>;
 </script>
 
 <script
@@ -79,41 +118,7 @@ import {
   VTextField,
 } from "vuetify/components";
 
-type ValueType = TFor extends string & keyof ModelTypeLookup
-  ? ModelTypeLookup[TFor]
-  : TFor extends ModelReferenceNavigationProperty | ModelValue
-  ? TFor["typeDef"]["name"] extends keyof ModelTypeLookup
-    ? ModelTypeLookup[TFor["typeDef"]["name"]]
-    : any
-  : TFor extends ForeignKeyProperty
-  ? TFor["principalType"]["name"] extends keyof ModelTypeLookup
-    ? ModelTypeLookup[TFor["principalType"]["name"]]
-    : any
-  : TModel extends ApiStateTypeWithArgs<any, any, infer TArgsObj, any>
-  ? TFor extends keyof TArgsObj
-    ? TArgsObj[TFor]
-    : any
-  : TModel extends Model
-  ? TFor extends PropNames<TModel["$metadata"]>
-    ? TModel["$metadata"]["props"][TFor] extends
-        | ModelReferenceNavigationProperty
-        | ModelValue
-      ? TModel["$metadata"]["props"][TFor]["typeDef"]["name"] extends keyof ModelTypeLookup
-        ? ModelTypeLookup[TModel["$metadata"]["props"][TFor]["typeDef"]["name"]]
-        : any
-      : TModel["$metadata"]["props"][TFor] extends ForeignKeyProperty
-      ? TModel["$metadata"]["props"][TFor]["principalType"]["name"] extends keyof ModelTypeLookup
-        ? ModelTypeLookup[TModel["$metadata"]["props"][TFor]["principalType"]["name"]]
-        : any
-      : TModel["$metadata"]["props"][TFor] extends CollectionProperty
-      ? Array<
-          TypeDiscriminatorToType<
-            TModel["$metadata"]["props"][TFor]["itemType"]["type"]
-          >
-        >
-      : TypeDiscriminatorToType<TModel["$metadata"]["props"][TFor]["type"]>
-    : any
-  : Model<ModelType>;
+type ValueType = _ValueType<TModel, TFor>;
 
 defineOptions({
   name: "c-input",
@@ -205,8 +210,14 @@ function render() {
           emit("update:modelValue", v)
         );
         return h(CSelectManyToMany<any>, data, slots);
+      } else if (valueMeta.itemType.type == "model") {
+        data.model = props.model;
+        data.for = props.for;
+        addHandler(data, "update:modelValue", (v: any) =>
+          emit("update:modelValue", v)
+        );
+        return h(CSelect<any>, data, slots);
       } else if (
-        valueMeta.itemType.type != "model" &&
         valueMeta.itemType.type != "object" &&
         valueMeta.itemType.type != "enum" &&
         valueMeta.itemType.type != "file"
@@ -249,7 +260,8 @@ function render() {
         // If this is a create-only property (e.g. an editable primary key),
         // emit the value on change(leaving the field)
         // instead of on every keystroke. If we were to emit on every keystroke,
-        // the very first character the user types would end up as the field value.
+        // the very first character the user types would end up as the field value
+        // when autosaves are being used.
         addHandler(data, "change", (valueOrEvent: Event | string) => {
           if (valueOrEvent instanceof Event) {
             // Vuetify3: workaround https://github.com/vuetifyjs/vuetify/issues/16637
diff --git a/src/coalesce-vue-vuetify3/src/components/input/c-select-many-to-many.vue b/src/coalesce-vue-vuetify3/src/components/input/c-select-many-to-many.vue
index 937fb5e26..35d77a00c 100644
--- a/src/coalesce-vue-vuetify3/src/components/input/c-select-many-to-many.vue
+++ b/src/coalesce-vue-vuetify3/src/components/input/c-select-many-to-many.vue
@@ -1,46 +1,42 @@
 <template>
-  <v-autocomplete
+  <c-select
     class="c-select-many-to-many"
-    :modelValue="internalValue"
-    @update:modelValue="onInput"
+    v-bind="inputBindAttrs"
+    :for="farItemModelType"
     multiple
-    chips
-    small-chips
-    :closable-chips="canDelete"
+    :modelValue="farItems"
+    @selectionChanged="selectionChanged"
+    :clearable="
+      !canDelete ? false : clearable === undefined ? false : clearable
+    "
+    :can-deselect="canDelete"
     :loading="isLoading"
     :error-messages="error"
-    :items="listItems"
-    v-model:search="search"
-    :item-title="itemText"
-    :item-value="itemValue"
-    :return-object="true"
-    :disabled="isDisabled"
-    no-filter
-    v-bind="inputBindAttrs"
+    :itemTitle="itemText"
+    :disabled="disabled || forceDisabled"
   >
-  </v-autocomplete>
+    <template v-for="(_, slot) of $slots" v-slot:[slot]="scope">
+      <slot :name="slot" v-bind="scope" />
+    </template>
+  </c-select>
 </template>
 
 <script lang="ts" setup generic="TModel extends Model">
 import { ForSpec, useMetadataProps } from "../c-metadata-component";
 import {
-  ListParameters,
   Model,
   ModelType,
   convertToModel,
-  ModelApiClient,
-  mapParamsToDto,
   modelDisplay,
   ViewModel,
   ViewModelFactory,
-  BehaviorFlags,
   ApiState,
   Indexable,
   ModelCollectionNavigationProperty,
-  ResponseCachingConfiguration,
+  BehaviorFlags,
 } from "coalesce-vue";
 
-import { computed, ref, watch } from "vue";
+import { computed, ref } from "vue";
 
 defineOptions({
   name: "c-select-many-to-many",
@@ -52,25 +48,30 @@ defineOptions({
 });
 
 const modelValue = defineModel<Model[] | null>();
-const props = defineProps<{
-  /** An object owning the value to be edited that is specified by the `for` prop. */
-  model: TModel;
-
-  /** A metadata specifier for the value being bound. One of:
-   * * A string with the name of the value belonging to `model`. E.g. `"caseProducts"`.
-   * * A direct reference to the metadata object. E.g. `model.$metadata.props.caseProducts`.
-   * * A string in dot-notation that starts with a type name. E.g. `"Case.caseProducts"`.
-   */
-  for: ForSpec<TModel, ModelCollectionNavigationProperty & { manyToMany: {} }>;
-
-  params?: ListParameters;
-
-  /** Response caching configuration for the `/get` and `/list` API calls made by the component.
-   * See https://intellitect.github.io/Coalesce/stacks/vue/layers/api-clients.html#response-caching. */
-  cache?: ResponseCachingConfiguration | boolean;
-
-  itemTitle?: (item: any) => string;
-}>();
+const props = withDefaults(
+  defineProps<{
+    /** An object owning the value to be edited that is specified by the `for` prop. */
+    model: TModel;
+
+    /** A metadata specifier for the value being bound. One of:
+     * * A string with the name of the value belonging to `model`. E.g. `"caseProducts"`.
+     * * A direct reference to the metadata object. E.g. `model.$metadata.props.caseProducts`.
+     * * A string in dot-notation that starts with a type name. E.g. `"Case.caseProducts"`.
+     */
+    for: ForSpec<
+      TModel,
+      ModelCollectionNavigationProperty & { manyToMany: {} }
+    >;
+
+    itemTitle?: (item: any) => string;
+
+    clearable?: boolean;
+    disabled?: boolean;
+  }>(),
+  {
+    clearable: undefined,
+  }
+);
 
 const emit = defineEmits<{
   (e: "deleting", vm: ViewModel): void;
@@ -79,9 +80,10 @@ const emit = defineEmits<{
   (e: "added", vm: ViewModel): void;
 }>();
 
+const fakeItemMarker = Symbol();
+
 const { inputBindAttrs, valueMeta } = useMetadataProps(props);
 
-const search = ref<string>();
 const currentLoaders = ref([] as ApiState<any, any>[]);
 
 const modelPkValue = computed(() => {
@@ -89,7 +91,7 @@ const modelPkValue = computed(() => {
   return model ? (model as any)[model.$metadata.keyProp.name] : null;
 });
 
-const isDisabled = computed(() => {
+const forceDisabled = computed(() => {
   if (props.model instanceof ViewModel && props.model.$isAutoSaveEnabled) {
     // If autosave is enabled (and therefore we're going to be calling
     // APIs on the viewmodel automatically, we can only do so if we're able
@@ -109,78 +111,21 @@ const isDisabled = computed(() => {
   }
 });
 
-const items = computed(() => {
-  const items = listCaller.result || [];
+function mapFarItemToMiddleItem(farItem: any) {
   const manyToMany = manyToManyMeta.value;
-
   const model = props.model as Model<ModelType>;
-
-  // Map the items into fake instances of the join entity.
-  return items.map((i) =>
-    convertToModel(
-      {
-        [manyToMany.farForeignKey.name]: (i as any)[
-          foreignItemKeyPropName.value!
-        ],
-        [manyToMany.farNavigationProp.name]: i,
-        [manyToMany.nearForeignKey.name]: modelPkValue.value,
-        [manyToMany.nearNavigationProp.name]: model,
-      },
-      collectionMeta.value.itemType.typeDef
-    )
+  return convertToModel(
+    {
+      [manyToMany.farForeignKey.name]: (farItem as any)[
+        farItemKeyPropName.value!
+      ],
+      [manyToMany.farNavigationProp.name]: farItem,
+      [manyToMany.nearForeignKey.name]: modelPkValue.value,
+      [manyToMany.nearNavigationProp.name]: model,
+    },
+    collectionMeta.value.itemType.typeDef
   );
-});
-
-const listItems = computed(() => {
-  const added = new Set();
-  const ret = [];
-
-  // Make a lookup of all the candidate items
-  // so we can use this to determine if a selected item
-  // matches the search criteria that the server is using.
-  const candidateItems = new Map<any, any>();
-  for (const item of items.value) {
-    const key = itemValue(item);
-    candidateItems.set(key, item);
-  }
-
-  for (const item of internalValue.value) {
-    // Put the selected values first
-    const key = itemValue(item);
-    added.add(key);
-
-    // If we're not searching, put all the selected items at the start of the list.
-    // If we are searching, add the selected item if the server returned it as a candidate for the current search query,
-    // or if it matches locally by name (to avoid weird/unexpected behavior if server search criteria is weird).
-    if (
-      !search.value ||
-      candidateItems.has(key) ||
-      itemText(item)?.toLowerCase().includes(search.value.toLowerCase())
-    ) {
-      ret.push(item);
-    }
-  }
-
-  for (const item of items.value) {
-    // Add in all the non-selected values after the selected values,
-    // excluding any items previously listed.
-    // Vuetify2 would deduplicate for us; Vuetify3 does not.
-    const key = itemValue(item);
-    if (added.has(key)) continue;
-    added.add(key);
-    ret.push(item);
-  }
-
-  return ret;
-});
-
-const listParams = computed((): Partial<ListParameters> => {
-  return {
-    pageSize: 100,
-    ...props.params,
-    search: search.value || undefined,
-  };
-});
+}
 
 const isLoading = computed((): boolean => {
   return currentLoaders.value.some((l) => l.isLoading);
@@ -230,12 +175,29 @@ const internalValue = computed((): any[] => {
   return modelValue.value || [];
 });
 
-const foreignItemModelType = computed((): ModelType => {
+const farItems = computed((): any[] => {
+  return internalValue.value.map((x) => {
+    let ret = farItemOf(x);
+    if (!ret) {
+      ret = convertToModel(
+        {
+          [farItemKeyPropName.value]:
+            x[manyToManyMeta.value.farForeignKey.name],
+        },
+        farItemModelType.value
+      );
+      (ret as any)[fakeItemMarker] = true;
+    }
+    return ret;
+  });
+});
+
+const farItemModelType = computed((): ModelType => {
   return manyToManyMeta.value.typeDef;
 });
 
-const foreignItemKeyPropName = computed((): string => {
-  return foreignItemModelType.value.keyProp.name;
+const farItemKeyPropName = computed((): string => {
+  return farItemModelType.value.keyProp.name;
 });
 
 function pushLoader(loader: ApiState<any, any>) {
@@ -252,48 +214,40 @@ function pushLoader(loader: ApiState<any, any>) {
   currentLoaders.value = newArray;
 }
 
-function itemText(item: any): string | null {
+function itemText(farItem: any): string | null {
   if (typeof props.itemTitle === "function") {
-    return props.itemTitle(item);
+    // This mapping of the foreign item back to the middle item
+    // exists for backwards compatibility with the implementation of
+    // c-select-many-to-many before it became based upon c-select[multiple].
+    // https://github.com/IntelliTect/Coalesce/issues/497
+    const middleItem = mapFarItemToMiddleItem(farItem);
+    return props.itemTitle(middleItem);
   }
 
-  const foreignItem = foreignItemOf(item);
-  if (!foreignItem) {
-    const itemFarFk = manyToManyMeta.value.farForeignKey;
-    const itemFarNav = manyToManyMeta.value.farNavigationProp;
-    console.warn(
-      `c-select-many-to-many: Unable to display the name of %o because '${itemFarNav.name}' is not loaded.`,
-      item
-    );
-
-    return item[itemFarFk.name] || modelDisplay(item);
+  if (farItem[fakeItemMarker]) {
+    // The foreign item is a "fake" item, indicating that the far side navigation property
+    // was missing from the middle model. Fall back on displaying the PK.
+    return modelDisplay(farItem) ?? farItem[farItemKeyPropName.value];
+  } else {
+    // Don't fall back to displaying the FK if the foreign item is "real",
+    // since the display property of the model might really be null.
+    return modelDisplay(farItem);
   }
-
-  return modelDisplay(foreignItem);
 }
 
-function itemValue(item: any) {
-  if (Array.isArray(item)) {
-    // Workaround for https://github.com/vuetifyjs/vuetify/issues/8793
-    return null;
-  }
-
-  const foreignItem = foreignItemOf(item);
-  if (foreignItem) {
-    return foreignItem[foreignItemKeyPropName.value];
-  }
-  return item[manyToManyMeta.value.farForeignKey.name];
-}
+function selectionChanged(farItems: any[], selected: boolean) {
+  const manyToMany = manyToManyMeta.value;
 
-function onInput(value: any[]) {
-  const existingItems = new Set(internalValue.value);
-  const newItems = new Set(value);
+  let newItems = [...internalValue.value];
 
-  const items: any[] = [];
+  for (const farItem of farItems) {
+    if (!selected) {
+      const vm = newItems.find(
+        (x) =>
+          (x as any)[manyToMany.farForeignKey.name] ==
+          farItem[farItemKeyPropName.value]
+      );
 
-  // Check for deleted existing items
-  internalValue.value.forEach((vm) => {
-    if (!newItems.has(vm)) {
       if (vm instanceof ViewModel && canDelete.value) {
         if (
           props.model instanceof ViewModel &&
@@ -329,26 +283,21 @@ function onInput(value: any[]) {
           }
         }
       }
-    } else {
-      items.push(vm);
-    }
-  });
 
-  // Check for added new items
-  newItems.forEach((i) => {
-    if (!existingItems.has(i)) {
+      newItems = newItems.filter((x) => x !== vm);
+    } else {
+      // item selected
       let vm: ViewModel | undefined = undefined;
 
       if (props.model instanceof ViewModel) {
         // Look for a matching removed item (pending bulk save deletion):
         const removedItems = props.model.$removedItems;
         if (removedItems) {
-          const manyToMany = manyToManyMeta.value;
           const itemIndex = removedItems.findIndex(
             (x) =>
-              x.$metadata == i.$metadata &&
-              i[manyToMany.farForeignKey.name] ==
-                (x as any)[manyToMany.farForeignKey.name]
+              x.$metadata == collectionMeta.value.itemType.typeDef &&
+              (x as any)[manyToMany.farForeignKey.name] ==
+                farItem[farItemKeyPropName.value]
           );
 
           if (itemIndex >= 0) {
@@ -363,16 +312,16 @@ function onInput(value: any[]) {
       }
 
       if (!vm) {
+        const middleItem = mapFarItemToMiddleItem(farItem);
         vm = ViewModelFactory.get(
-          i.$metadata.name,
-          i,
-          // All of the data of `i`, recursing into any nested objects, IS clean.
+          middleItem.$metadata.name,
+          middleItem,
+          // All of the data of `middleItem`, recursing into any nested objects, IS clean.
           // However, `vm` itself is dirty because it is a brand new object with no PK.
           true
         );
         vm.$isDirty = true;
       }
-      items.push(vm);
 
       if (props.model instanceof ViewModel && props.model.$isAutoSaveEnabled) {
         // Only perform a save if the model we're bound to is autosaving.
@@ -394,10 +343,10 @@ function onInput(value: any[]) {
             emitInput(internalValue.value.filter((i) => i != vm));
           });
       }
+      newItems = [...internalValue.value, vm];
     }
-  });
-
-  emitInput(items);
+  }
+  emitInput(newItems);
 }
 
 function emitInput(items: any[]) {
@@ -408,35 +357,7 @@ function emitInput(items: any[]) {
   modelValue.value = items;
 }
 
-function foreignItemOf(value: any): Indexable<Model> | null | undefined {
-  return value[manyToManyMeta.value!.farNavigationProp.name];
+function farItemOf(value: any): Indexable<Model> | null | undefined {
+  return value[manyToManyMeta.value.farNavigationProp.name];
 }
-
-// This needs to be late initialized so we have the correct "this" reference.
-const listCaller = new ModelApiClient(foreignItemModelType.value)
-  .$useSimultaneousRequestCaching()
-  .$makeCaller("list", (c) => {
-    return c.list(listParams.value);
-  })
-  .setConcurrency("debounce");
-
-watch(
-  () => props.cache,
-  () => {
-    listCaller.useResponseCaching(props.cache === true ? {} : props.cache);
-  },
-  { immediate: true }
-);
-
-watch(
-  () => JSON.stringify(mapParamsToDto(listParams.value)),
-  () => {
-    pushLoader(listCaller);
-    listCaller!();
-  }
-);
-
-// Access this so it will throw an error if the meta props aren't in order.
-manyToManyMeta.value;
-listCaller();
 </script>
diff --git a/src/coalesce-vue-vuetify3/src/components/input/c-select.spec.tsx b/src/coalesce-vue-vuetify3/src/components/input/c-select.spec.tsx
index b0509f213..da3368bd7 100644
--- a/src/coalesce-vue-vuetify3/src/components/input/c-select.spec.tsx
+++ b/src/coalesce-vue-vuetify3/src/components/input/c-select.spec.tsx
@@ -20,7 +20,13 @@ import { FunctionalComponent, ref } from "vue";
 import { VForm } from "vuetify/components";
 import { CSelect } from "..";
 
-import { Company, ComplexModel, EnumPkId, Test } from "@test-targets/models.g";
+import {
+  Case,
+  Company,
+  ComplexModel,
+  EnumPkId,
+  Test,
+} from "@test-targets/models.g";
 import {
   CaseViewModel,
   ComplexModelViewModel,
@@ -83,8 +89,10 @@ describe("CSelect", () => {
     const genericModel: Model = model;
 
     function receivesTestModel(model: Test | null) {}
+    function receivesTestModels(model: Test[] | null) {}
     function receivesComplexModel(model: ComplexModel | null) {}
     function receivesNumber(model: number | null) {}
+    function receivesNumbers(model: number[] | null) {}
 
     // Binding to FK or ref nav on a ViewModel:
     () => <CSelect model={complexVm} for="singleTest" />;
@@ -100,6 +108,11 @@ describe("CSelect", () => {
     // @ts-expect-error wrong event handler type.
     () => <CSelect model={complexVm} for="singleTestId" onUpdate:modelValue={receivesTestModel} />;
 
+    () => <CSelect model={complexVm} for="singleTest" create={{
+      getLabel(search: string, items: Test[]) { return items.length == 0 ? search : false },
+      async getItem(search: string, label: string) { return new Test({ testName: label }) }
+    }}/>;
+
     () => <CSelect model={complexVm} for={complexVm.$metadata.props.singleTest} />;
 
     // Against models that might be null
@@ -110,14 +123,69 @@ describe("CSelect", () => {
     () => <CSelect model={model} for="singleTestId" />;
     //@ts-expect-error wrong type of property
     () => <CSelect model={model} for="name" />;
+    //@ts-expect-error Cannot bind to many-to-many
+    () => <CSelect model={new Case} for="caseProducts" />;
     //@ts-expect-error wrong type of property
     () => <CSelect model={complexVm} for={complexVm.$metadata.props.name} />;
 
     // Untyped bindings:
     () => <CSelect model={genericModel} for={anyString} />;
     () => <CSelect model={model as any} for={anyString} />;
+    
+    //@ts-expect-error invalid `model` type
+    () => <CSelect model={123} for="num" />;
+    //@ts-expect-error invalid `for` type
+    () => <CSelect model={complexVm} for={123} />;
 
+
+
+    // ********
+    // Multiple
+    // ********
+    () => (<CSelect for="Test" multiple modelValue={[testVm]}
+      onUpdate:modelValue={receivesTestModels}
+      onUpdate:objectValue={receivesTestModels}
+      onUpdate:keyValue={receivesNumbers}
+      create={{
+        getLabel(search: string, items: Test[]) { return items.length == 0 ? search : false },
+        async getItem(search: string, label: string) { return new Test({ testName: label }) }
+      }}
+    />);
+    
+    // Explicit `multiple` for object collection
+    () => (<CSelect model={complexVm.methodWithManyParams} for="modelCollection" multiple modelValue={[testVm]} onUpdate:modelValue={receivesTestModels} />);
+    // Implicit `multiple` for object collection
+    () => (<CSelect model={complexVm.methodWithManyParams} for="modelCollection" modelValue={[testVm]} onUpdate:modelValue={receivesTestModels} />);
+    
+    //@ts-expect-error Explicit `multiple` for object non-collection is disallowed
+    () => (<CSelect model={complexVm.methodWithManyParams} for="model" multiple modelValue={[testVm]} onUpdate:modelValue={receivesTestModels} />);
+    //@ts-expect-error Explicit `multiple` for object non-collection is disallowed
+    () => (<CSelect model={complexVm.methodWithManyParams} for="model" multiple modelValue={testVm} onUpdate:modelValue={receivesTestModel} />);
+    //@ts-expect-error Arrays passed to non-multiple binding
+    () => (<CSelect model={complexVm.methodWithManyParams} for="model" modelValue={[testVm]} onUpdate:modelValue={receivesTestModels} />);
+    
+    //@ts-expect-error arrays passed to non-multiple
+    () => (<CSelect for="Test" modelValue={[testVm]} onUpdate:modelValue={receivesTestModels} />);
+    
+    //@ts-expect-error arrays required for multiple
+    () => (<CSelect for="Test" multiple modelValue={testVm}  />);
+    //@ts-expect-error arrays required for multiple
+    () => (<CSelect for="Test" multiple onUpdate:modelValue={receivesTestModel}  />);
+    //@ts-expect-error arrays required for multiple
+    () => (<CSelect for="Test" multiple objectValue={testVm} />);
+    //@ts-expect-error arrays required for multiple
+    () => (<CSelect for="Test" multiple onUpdate:objectValue={receivesTestModel} />);
+    //@ts-expect-error arrays required for multiple
+    () => (<CSelect for="Test" multiple keyValue={2} />);
+    //@ts-expect-error arrays required for multiple
+    () => (<CSelect for="Test" multiple onUpdate:keyValue={receivesNumber}  />);
+    
+
+
+    // ********
     // Binding with for + v-model
+    // ********
+    () => (<CSelect for={testVm.$metadata} modelValue={testVm} onUpdate:modelValue={receivesTestModel} />);
     () => (<CSelect for="Test" modelValue={testVm} onUpdate:modelValue={receivesTestModel} />);
     () => (<CSelect for="Test" modelValue={testVm} onUpdate:objectValue={receivesTestModel} />);
     () => (<CSelect for="Test" modelValue={testVm} onUpdate:keyValue={receivesNumber} />);
@@ -141,7 +209,9 @@ describe("CSelect", () => {
     () => (<CSelect for="EnumPk" keyValue={EnumPkId.Value10} onUpdate:keyValue={receivesComplexModel} />);
 
 
+    // ********
     // Prop types that are only weakly known, missing ability to resolve types
+    // ********
     const weakModelProp: ModelReferenceNavigationProperty = complexVm.$metadata.props.singleTest;
     () => (<CSelect for={weakModelProp} modelValue={testVm} onUpdate:modelValue={receivesTestModel} />);
     () => (<CSelect for={weakModelProp} keyValue={42} onUpdate:keyValue={receivesNumber} />);
@@ -156,6 +226,9 @@ describe("CSelect", () => {
     () => (<CSelect model={genericModel} for="singleTest" keyValue={42} onUpdate:keyValue={receivesNumber} />);
 
 
+    // ********
+    // Passing concrete metadata objects
+    // ********
     () => (<CSelect for={complexVm.$metadata.props.singleTest} modelValue={testVm} onUpdate:modelValue={receivesTestModel} />);
     // @ts-expect-error wrong modelValue and event types
     () => (<CSelect for={complexVm.$metadata.props.singleTest} modelValue={42} onUpdate:modelValue={receivesNumber} />);
@@ -189,14 +262,10 @@ describe("CSelect", () => {
     // This has to be valid when we don't have a known type for the caller
     () => (<CSelect model={complexVm.methodWithManyParams as AnyArgCaller} for="specificString" />);
 
-    //@ts-expect-error invalid model type
-    () => <CSelect model={123} for="num" />;
-    //@ts-expect-error invalid for type
-    () => <CSelect model={complexVm} for={123} />;
-
-
 
+    // ********
     // Rules
+    // ********
     () => <CSelect model={complexVm} for="singleTest" rules={[v => v === 7 || 'Must be 7']} />;
     //@ts-expect-error invalid rule func (`v` is number, equality to string is invalid).
     () => <CSelect model={complexVm} for="singleTest" rules={[v => v === "foo" || 'Must be 7']} />;
@@ -625,7 +694,7 @@ describe("CSelect", () => {
       // Pick it
       await menuInput.trigger("keydown.enter");
 
-      expect(menuWrapper.find(".v-list-item--active").text()).toBe("bar 202");
+      expect(menuWrapper.find(".pending-selection").text()).toBe("bar 202");
       expect(model.singleTestId).toBe(202); // second result in the list
       expect(wrapper.vm.menuOpen).toBeFalsy();
 
diff --git a/src/coalesce-vue-vuetify3/src/components/input/c-select.vue b/src/coalesce-vue-vuetify3/src/components/input/c-select.vue
index 220969dbe..a9d97cc4b 100644
--- a/src/coalesce-vue-vuetify3/src/components/input/c-select.vue
+++ b/src/coalesce-vue-vuetify3/src/components/input/c-select.vue
@@ -3,183 +3,223 @@
     class="c-select"
     :class="{
       'c-select--is-menu-active': menuOpen,
+      'c-select--multiple': effectiveMultiple,
     }"
-    :error-messages="error"
     :focused="focused"
     v-bind="inputBindAttrs"
     :rules="effectiveRules"
-    :modelValue="internalModelValue"
+    :modelValue="effectiveMultiple ? internalModelValue : internalModelValue[0]"
     :disabled="isDisabled"
     :readonly="isReadonly"
-    #default="{ isValid }"
   >
-    <v-field
-      :error="isValid.value === false"
-      append-inner-icon="$dropdown"
-      v-bind="fieldAttrs"
-      :clearable="isInteractive && isClearable"
-      :active="!!internalModelValue || focused || !!placeholder"
-      :dirty="!!internalModelValue"
-      :focused="focused"
-      @click:clear.stop.prevent="onInput(null, true)"
-      @keydown="onInputKey($event)"
-    >
-      <div class="v-field__input">
-        <slot
-          v-if="internalModelValue"
-          name="selected-item"
-          :item="internalModelValue"
-          :search="search"
-        >
-          <span class="v-select__selection">
-            <slot name="item" :item="internalModelValue" :search="search">
-              <c-display
-                class="v-select__selection-text"
-                :model="internalModelValue"
-              />
-            </slot>
-          </span>
-        </slot>
-
-        <input
-          type="text"
-          ref="mainInputRef"
-          v-model="mainValue"
-          @mousedown.stop.prevent="
-            // Intercept direct clicks on the input to short circuit `focused`
-            // and v-menu's activator handler, which introduce some latency before the menu opens
-            // if we allow the menu opening to be handled that way.
-            // Mousedown is needed to prevent `focused` from happening.
-            openMenu()
-          "
-          @click.stop.prevent="
-            // Prevent v-menu's activator handler from running (which is a click handler, not mousedown).
-            openMenu()
-          "
-          @focus="focused = true"
-          @blur="focused = false"
-          :autofocus="autofocus"
-          :disabled="isDisabled"
-          :readonly="isReadonly"
-          :placeholder="internalModelValue ? undefined : placeholder"
-        />
-      </div>
-    </v-field>
-
-    <v-menu
-      :modelValue="menuOpen"
-      @update:modelValue="!$event ? closeMenu() : openMenu()"
-      activator="parent"
-      :close-on-content-click="false"
-      contentClass="c-select__menu-content"
-      origin="top"
-      location="top"
-    >
-      <v-sheet
-        @keydown.capture.down.stop.prevent="
-          pendingSelection = Math.min(
-            listItems.length - 1,
-            pendingSelection + 1
-          )
-        "
-        @keydown.capture.up.stop.prevent="
-          pendingSelection = Math.max(0, pendingSelection - 1)
-        "
-        @keydown.capture.enter.stop.prevent="confirmPendingSelection"
-        @keydown.capture.tab.stop.prevent="confirmPendingSelection"
+    <template v-for="(_, slot) of passthroughSlots" v-slot:[slot]="scope">
+      <slot :name="slot" v-bind="(scope as any)" />
+    </template>
+    <template #default="{ isValid }">
+      <v-field
+        :error="isValid.value === false"
+        append-inner-icon="$dropdown"
+        v-bind="fieldAttrs"
+        :clearable="isInteractive && isClearable"
+        :active="!!selectedKeysSet.size || focused || !!placeholder"
+        :dirty="!!selectedKeysSet.size"
+        :focused="focused"
+        @click:clear.stop.prevent="onInput(null, true)"
+        @keydown="onInputKey($event)"
+      >
+        <template v-for="(_, slot) of passthroughSlots" v-slot:[slot]="scope">
+          <slot :name="slot" v-bind="(scope as any)" />
+        </template>
+
+        <template #default>
+          <div class="v-field__input">
+            <span
+              class="v-autocomplete__selection"
+              v-for="(item, index) in internalModelValue"
+              :key="item[modelObjectMeta.keyProp.name]"
+            >
+              <slot
+                name="selected-item"
+                :item="item"
+                :search="search"
+                :index
+                :remove="() => onInput(item)"
+              >
+                <slot name="item" :item="item" :search="search">
+                  <v-chip
+                    v-if="effectiveMultiple"
+                    size="small"
+                    :closable="canDeselect"
+                    @click:close="onInput(item)"
+                  >
+                    {{ itemTitle(item) }}
+                  </v-chip>
+                  <span v-else class="v-select__selection-text">
+                    {{ itemTitle(item) }}
+                  </span>
+                </slot>
+              </slot>
+            </span>
+
+            <input
+              type="text"
+              ref="mainInputRef"
+              v-model="mainValue"
+              @mousedown.stop.prevent="
+                // Intercept direct clicks on the input to short circuit `focused`
+                // and v-menu's activator handler, which introduce some latency before the menu opens
+                // if we allow the menu opening to be handled that way.
+                // Mousedown is needed to prevent `focused` from happening.
+                openMenu()
+              "
+              @click.stop.prevent="
+                // Prevent v-menu's activator handler from running (which is a click handler, not mousedown).
+                openMenu()
+              "
+              @focus="focused = true"
+              @blur="focused = false"
+              :autofocus="autofocus"
+              :disabled="isDisabled"
+              :readonly="isReadonly"
+              :placeholder="selectedKeysSet.size ? undefined : placeholder"
+            />
+          </div>
+        </template>
+      </v-field>
+
+      <v-menu
+        :modelValue="menuOpen"
+        @update:modelValue="!$event ? closeMenu() : openMenu()"
+        activator="parent"
+        :close-on-content-click="false"
+        contentClass="c-select__menu-content"
+        origin="top"
+        location="bottom"
       >
-        <v-text-field
-          v-model="search"
-          ref="searchRef"
-          hide-details="auto"
-          prepend-inner-icon="fa fa-search"
-          :loading="listCaller.isLoading"
-          :error-messages="
-            listCaller.wasSuccessful == false
-              ? listCaller.message ?? undefined
-              : ''
+        <v-sheet
+          @keydown.capture.down.stop.prevent="
+            pendingSelection = Math.min(
+              listItems.length - 1,
+              pendingSelection + 1
+            )
           "
-          clearable
-          placeholder="Search"
-          variant="filled"
-          density="compact"
+          @keydown.capture.up.stop.prevent="
+            pendingSelection = Math.max(0, pendingSelection - 1)
+          "
+          @keydown.capture.enter.stop.prevent="confirmPendingSelection"
+          @keydown.capture.tab.stop.prevent="confirmPendingSelection"
         >
-        </v-text-field>
+          <v-text-field
+            v-model="search"
+            ref="searchRef"
+            hide-details="auto"
+            prepend-inner-icon="fa fa-search"
+            :loading="listCaller.isLoading"
+            :error-messages="
+              listCaller.wasSuccessful == false
+                ? listCaller.message ?? undefined
+                : ''
+            "
+            clearable
+            placeholder="Search"
+            variant="filled"
+            density="compact"
+          >
+          </v-text-field>
 
-        <!-- TODO: i18n -->
-        <div
-          v-if="!createItemLabel && !listItems.length"
-          class="grey--text px-4 my-3 font-italic"
-        >
-          <v-fade-transition mode="out-in">
-            <span v-if="listCaller.isLoading">Loading...</span>
-            <span v-else>No results found.</span>
-          </v-fade-transition>
-        </div>
+          <!-- TODO: i18n -->
+          <div
+            v-if="!createItemLabel && !listItems.length"
+            class="grey--text px-4 my-3 font-italic"
+          >
+            <v-fade-transition mode="out-in">
+              <span v-if="listCaller.isLoading">Loading...</span>
+              <span v-else>No results found.</span>
+            </v-fade-transition>
+          </div>
 
-        <!-- This height shows 7 full items, with a final item partially out 
+          <!-- This height shows 7 full items, with a final item partially out 
         of the scroll area to improve visual hints to the user that the can scroll the list. -->
-        <v-list class="py-0" max-height="302" ref="listRef" density="compact">
-          <v-list-item
-            v-if="createItemLabel"
-            class="c-select__create-item"
-            @click="createItem"
-            :loading="createItemLoading"
+          <v-list
+            class="py-0"
+            max-height="302"
+            ref="listRef"
+            density="compact"
+            :aria-multiselectable="effectiveMultiple"
+            role="listbox"
           >
-            <template #prepend>
-              <v-progress-circular
-                class="mr-6"
-                indeterminate
-                v-if="createItemLoading"
-              ></v-progress-circular>
-              <v-icon v-else>$plus</v-icon>
-            </template>
-            <v-list-item-title>
-              {{ createItemLabel }}
-            </v-list-item-title>
-            <v-list-item-subtitle
-              v-if="createItemError"
-              class="text-error font-weight-bold"
+            <v-list-item
+              v-if="createItemLabel"
+              class="c-select__create-item"
+              @click="createItem"
+              :loading="createItemLoading"
             >
-              {{ createItemError }}
-            </v-list-item-subtitle>
-          </v-list-item>
-
-          <v-list-item
-            v-for="(item, i) in listItems"
-            :key="item[modelObjectMeta.keyProp.name]"
-            @click="onInput(item)"
-            :value="i"
-            :active="pendingSelection == i"
-          >
-            <v-list-item-title>
-              <slot name="list-item" :item="item" :search="search">
-                <slot name="item" :item="item" :search="search">
-                  <c-display :model="item" />
+              <template #prepend>
+                <v-progress-circular
+                  size="20"
+                  indeterminate
+                  v-if="createItemLoading"
+                ></v-progress-circular>
+                <v-icon v-else>$plus</v-icon>
+              </template>
+              <v-list-item-title>
+                {{ createItemLabel }}
+              </v-list-item-title>
+              <v-list-item-subtitle
+                v-if="createItemError"
+                class="text-error font-weight-bold"
+              >
+                {{ createItemError }}
+              </v-list-item-subtitle>
+            </v-list-item>
+
+            <v-list-item
+              v-for="(item, i) in listItems"
+              :key="item.key"
+              @click="onInput(item.model)"
+              :value="i"
+              :class="{ 'pending-selection': pendingSelection == i }"
+              :active="item.selected"
+              role="option"
+              :aria-selected="item.selected"
+            >
+              <template #prepend v-if="effectiveMultiple">
+                <v-checkbox-btn tabindex="-1" :modelValue="item.selected" />
+              </template>
+              <v-list-item-title>
+                <slot
+                  name="list-item"
+                  :item="item.model"
+                  :search="search"
+                  :selected="item.selected"
+                >
+                  <slot name="item" :item="item.model" :search="search">
+                    {{ itemTitle(item.model) }}
+                  </slot>
                 </slot>
-              </slot>
-            </v-list-item-title>
-          </v-list-item>
+              </v-list-item-title>
+            </v-list-item>
 
-          <!-- TODO: With this version of c-select (versus the v2 one),
+            <!-- TODO: With this version of c-select (versus the v2 one),
         we can implement infinite scroll much easier. Consider doing this instead of having this message. -->
-          <v-list-item
-            v-if="
-              // When we do know an actual page count:
-              (listCaller.pageCount && listCaller.pageCount > 1) ||
-              // When `noCount` is used or counting is disabled on the server:
-              (listCaller.pageCount == -1 &&
-                listCaller.pageSize &&
-                listItems.length >= listCaller.pageSize)
-            "
-            class="text-grey font-italic"
-          >
-            Max {{ listCaller.pageSize }} items retrieved. Refine your search to
-            view more.
-          </v-list-item>
-        </v-list>
-      </v-sheet>
-    </v-menu>
+            <v-list-item
+              v-if="
+                // When we do know an actual page count:
+                (listCaller.pageCount && listCaller.pageCount > 1) ||
+                // When `noCount` is used or counting is disabled on the server:
+                (listCaller.pageCount == -1 &&
+                  listCaller.pageSize &&
+                  listItems.length >= listCaller.pageSize)
+              "
+              class="text-grey font-italic"
+            >
+              Max {{ listCaller.pageSize }} items retrieved. Refine your search
+              to view more.
+            </v-list-item>
+          </v-list>
+        </v-sheet>
+      </v-menu>
+    </template>
   </v-input>
 </template>
 
@@ -192,7 +232,7 @@
   .v-field__field {
     align-items: center;
     .v-field__input {
-      flex-wrap: nowrap;
+      // flex-wrap: nowrap;
       input {
         min-width: 0;
         flex: 1 1;
@@ -219,17 +259,104 @@
     transform: rotate(180deg);
   }
 }
+
+.c-select__menu-content {
+  .v-list-item.pending-selection {
+    &::after {
+      opacity: calc(0.15 * var(--v-theme-overlay-multiplier));
+    }
+    &:not(.v-list-item--active) > .v-list-item__overlay {
+      opacity: calc(0.05 * var(--v-theme-overlay-multiplier));
+    }
+  }
+}
+.c-select__create-item {
+  .v-list-item__prepend {
+    width: 40px;
+  }
+}
 </style>
 
+<script lang="ts">
+// These types are declared outside the component so that vue-tsc doesn't have to inline
+// every single type declaration, which spans thousands of lines and ultimately exceeds
+// the limit on what tsc is even capable of emitting
+
+type CSelectModelSpec = Model | AnyArgCaller | undefined;
+
+type CSelectForSpec<TModel extends CSelectModelSpec> = ForSpec<
+  TModel,
+  | ForeignKeyProperty
+  | ModelReferenceNavigationProperty
+  | ModelValue
+  | (ModelCollectionValue & { manyToMany: never })
+  | ModelType
+>;
+
+type _SelectedModelType<
+  TModel extends CSelectModelSpec,
+  TFor extends CSelectForSpec<TModel>,
+  TMultiple extends boolean
+> = TFor extends string & keyof ModelTypeLookup
+  ? // `for="TypeName"`
+    TMultiple extends true
+    ? Array<ModelTypeLookup[TFor]>
+    : ModelTypeLookup[TFor]
+  : TFor extends ModelReferenceNavigationProperty | ModelValue
+  ? TFor["typeDef"]["name"] extends keyof ModelTypeLookup
+    ? ModelTypeLookup[TFor["typeDef"]["name"]]
+    : any
+  : TFor extends ForeignKeyProperty
+  ? TFor["principalType"]["name"] extends keyof ModelTypeLookup
+    ? ModelTypeLookup[TFor["principalType"]["name"]]
+    : any
+  : TModel extends ApiStateTypeWithArgs<any, any, infer TArgsObj, any>
+  ? TFor extends keyof TArgsObj
+    ? TMultiple extends true
+      ? TArgsObj[TFor] extends Array<any> | null | undefined
+        ? TArgsObj[TFor]
+        : never // Ban use of `multiple` prop when binding to something we know isn't an array
+      : TArgsObj[TFor]
+    : any
+  : TModel extends Model
+  ? TFor extends PropNames<TModel["$metadata"]>
+    ? TModel["$metadata"]["props"][TFor] extends
+        | ModelReferenceNavigationProperty
+        | ModelValue
+      ? TModel["$metadata"]["props"][TFor]["typeDef"]["name"] extends keyof ModelTypeLookup
+        ? ModelTypeLookup[TModel["$metadata"]["props"][TFor]["typeDef"]["name"]]
+        : any
+      : TModel["$metadata"]["props"][TFor] extends ForeignKeyProperty
+      ? TModel["$metadata"]["props"][TFor]["principalType"]["name"] extends keyof ModelTypeLookup
+        ? ModelTypeLookup[TModel["$metadata"]["props"][TFor]["principalType"]["name"]]
+        : any
+      : any
+    : any
+  : Model<ModelType>;
+
+type ExtractValuesOfType<T, U> = {
+  [K in keyof T]: T[K] extends U ? T[K] : never;
+}[keyof T];
+
+type FindPk<TModel extends Model> = ExtractValuesOfType<
+  TModel["$metadata"]["props"],
+  PrimaryKeyProperty
+>;
+
+type ModelToPkType<TModel extends Model> = FindPk<TModel> extends EnumValue
+  ? FindPk<TModel>["typeDef"]["name"] extends keyof EnumTypeLookup
+    ? EnumTypeLookup[FindPk<TModel>["typeDef"]["name"]]
+    : any
+  : TypeDiscriminatorToType<FindPk<TModel>["type"]>;
+</script>
+
 <script
   lang="ts"
   setup
   generic="
-  TModel extends Model | AnyArgCaller | undefined, 
-  TFor extends ForSpec<
-    TModel,
-    ForeignKeyProperty | ModelReferenceNavigationProperty | ModelValue
-  > = any"
+  TModel extends CSelectModelSpec, 
+  TFor extends CSelectForSpec<TModel> = any,
+  TMultiple extends boolean = false"
 >
 import {
   ComponentPublicInstance,
@@ -238,6 +365,7 @@ import {
   nextTick,
   watch,
   camelize,
+  useSlots,
 } from "vue";
 import {
   useMetadataProps,
@@ -256,7 +384,6 @@ import {
   getMessageForError,
   mapValueToModel,
   ViewModel,
-  Indexable,
   ModelValue,
   AnyArgCaller,
   ResponseCachingConfiguration,
@@ -267,9 +394,19 @@ import {
   PropNames,
   ApiStateTypeWithArgs,
   EnumValue,
+  ModelCollectionValue,
+  modelDisplay,
 } from "coalesce-vue";
 import { VField } from "vuetify/components";
 
+const slots = useSlots();
+const passthroughSlots = computed(() => {
+  const ret = { ...slots };
+  delete ret.default;
+  // cast to unknown needed to prevent TS errors in the template that can't be suppressed.
+  return ret as unknown;
+});
+
 defineOptions({
   name: "c-select",
   // We manually pass attrs via inputBindAttrs, so disable the default Vue behavior.
@@ -278,50 +415,19 @@ defineOptions({
   inheritAttrs: false,
 });
 
-type SelectedModelType = TFor extends string & keyof ModelTypeLookup
-  ? ModelTypeLookup[TFor]
-  : TFor extends ModelReferenceNavigationProperty | ModelValue
-  ? TFor["typeDef"]["name"] extends keyof ModelTypeLookup
-    ? ModelTypeLookup[TFor["typeDef"]["name"]]
-    : any
-  : TFor extends ForeignKeyProperty
-  ? TFor["principalType"]["name"] extends keyof ModelTypeLookup
-    ? ModelTypeLookup[TFor["principalType"]["name"]]
-    : any
-  : TModel extends ApiStateTypeWithArgs<any, any, infer TArgsObj, any>
-  ? TFor extends keyof TArgsObj
-    ? TArgsObj[TFor]
-    : any
-  : TModel extends Model
-  ? TFor extends PropNames<TModel["$metadata"]>
-    ? TModel["$metadata"]["props"][TFor] extends
-        | ModelReferenceNavigationProperty
-        | ModelValue
-      ? TModel["$metadata"]["props"][TFor]["typeDef"]["name"] extends keyof ModelTypeLookup
-        ? ModelTypeLookup[TModel["$metadata"]["props"][TFor]["typeDef"]["name"]]
-        : any
-      : TModel["$metadata"]["props"][TFor] extends ForeignKeyProperty
-      ? TModel["$metadata"]["props"][TFor]["principalType"]["name"] extends keyof ModelTypeLookup
-        ? ModelTypeLookup[TModel["$metadata"]["props"][TFor]["principalType"]["name"]]
-        : any
-      : any
-    : any
-  : Model<ModelType>;
+type SelectedModelType = _SelectedModelType<TModel, TFor, TMultiple>;
 
-type ExtractValuesOfType<T, U> = {
-  [K in keyof T]: T[K] extends U ? T[K] : never;
-}[keyof T];
+type SelectedModelTypeSingle = SelectedModelType extends Array<
+  infer U extends Model<ModelType>
+>
+  ? U
+  : SelectedModelType;
 
-type FindPk<TModel extends Model> = ExtractValuesOfType<
-  TModel["$metadata"]["props"],
-  PrimaryKeyProperty
->;
+type SelectedPkTypeSingle = ModelToPkType<SelectedModelTypeSingle>;
 
-type SelectedPkType = FindPk<SelectedModelType> extends EnumValue
-  ? FindPk<SelectedModelType>["typeDef"]["name"] extends keyof EnumTypeLookup
-    ? EnumTypeLookup[FindPk<SelectedModelType>["typeDef"]["name"]]
-    : any
-  : TypeDiscriminatorToType<FindPk<SelectedModelType>["type"]>;
+type SelectedPkType = TMultiple extends true
+  ? SelectedPkTypeSingle[]
+  : SelectedPkTypeSingle;
 
 type PrimaryBindType = TFor extends ForeignKeyProperty
   ? SelectedPkType
@@ -334,14 +440,21 @@ type PrimaryBindType = TFor extends ForeignKeyProperty
   : SelectedModelType;
 
 defineSlots<{
-  ["item"]?(props: { item: SelectedModelType; search: string | null }): any;
+  ["item"]?(props: {
+    item: SelectedModelTypeSingle;
+    search: string | null;
+  }): any;
   ["selected-item"]?(props: {
-    item: SelectedModelType;
+    item: SelectedModelTypeSingle;
     search: string | null;
+    index: number;
+    /** Remove/unselect the item. Only applicable for multiselect/multiple mode. */
+    remove: () => void;
   }): any;
   ["list-item"]?(props: {
-    item: SelectedModelType;
+    item: SelectedModelTypeSingle;
     search: string | null;
+    selected: boolean;
   }): any;
 }>();
 
@@ -357,6 +470,9 @@ const props = withDefaults(
      */
     for: TFor;
 
+    multiple?: TMultiple & boolean; // `& boolean`: https://github.com/vuejs/core/issues/9877
+    canDeselect?: boolean;
+
     readonly?: boolean | null;
     disabled?: boolean | null;
     autofocus?: boolean;
@@ -380,18 +496,33 @@ const props = withDefaults(
 
     rules?: Array<TypedValidationRule<SelectedPkType>>;
 
+    itemTitle?: (item: SelectedModelTypeSingle) => string | null;
     create?: {
-      getLabel: (search: string, items: SelectedModelType[]) => string | false;
-      getItem: (search: string, label: string) => Promise<SelectedModelType>;
+      getLabel: (
+        search: string,
+        items: SelectedModelTypeSingle[]
+      ) => string | false;
+      getItem: (
+        search: string,
+        label: string
+      ) => Promise<SelectedModelTypeSingle>;
     };
   }>(),
-  { openOnClear: true, clearable: undefined }
+  {
+    openOnClear: true,
+    canDeselect: true,
+    clearable: undefined,
+    multiple: undefined,
+    itemTitle: modelDisplay,
+  }
 );
 
 const emit = defineEmits<{
   "update:keyValue": [value: SelectedPkType | null];
   "update:objectValue": [value: SelectedModelType | null];
   "update:modelValue": [value: PrimaryBindType | null];
+  /** Fired when an item is selected or deselected in `multiple` mode. */
+  selectionChanged: [values: SelectedModelTypeSingle[], selected: boolean];
 }>();
 
 const mainInputRef = ref<HTMLInputElement>();
@@ -419,7 +550,6 @@ const { inputBindAttrs, modelMeta, valueMeta, valueOwner } = useMetadataProps(
 );
 
 const search = ref(null as string | null);
-const error = ref([] as string[]);
 const focused = ref(false);
 const menuOpen = ref(false);
 const menuOpenForced = ref(false);
@@ -429,12 +559,17 @@ const createItemLoading = ref(false);
 const createItemError = ref("" as string | null);
 const pendingSelection = ref(0);
 
-/** The model representing the current selected item
+/** The models representing the current selected item(s)
  * in the case that only the PK was provided to the component.
- * This is maintained in a variable to prevent its reference from
- * changing unexpectedly, which causes Vuetify to annoying things.
  */
-const keyFetchedModel = ref(null as any);
+const internallyFetchedModels = new Map<
+  SelectedPkTypeSingle,
+  WeakRef<SelectedModelTypeSingle>
+>();
+
+function toArray<T>(x: T | T[] | null | undefined) {
+  return Array.isArray(x) ? x : x == null ? [] : [x];
+}
 
 /** The effective clearability state of the dropdown. */
 const isClearable = computed((): boolean => {
@@ -442,6 +577,10 @@ const isClearable = computed((): boolean => {
     // If explicitly given a value, use that value.
     return props.clearable;
 
+  if (effectiveMultiple.value) {
+    return true;
+  }
+
   // Check to see if the foreign key is nullable (i.e. doesn't have a 'required' rule).
   if (modelKeyProp.value) {
     return !modelKeyProp.value.rules?.required;
@@ -472,7 +611,11 @@ const modelKeyProp = computed((): ForeignKeyProperty | null => {
 
 /** The property on `valueOwner` which holds the model object being selected for, or `null` if there is no such property. */
 const modelObjectProp = computed(
-  (): ModelReferenceNavigationProperty | ModelValue | null => {
+  ():
+    | ModelReferenceNavigationProperty
+    | ModelValue
+    | ModelCollectionValue
+    | null => {
     const meta = valueMeta.value!;
     if (meta.role == "foreignKey" && "navigationProp" in meta) {
       return meta.navigationProp || null;
@@ -480,8 +623,13 @@ const modelObjectProp = computed(
     if (meta.role == "referenceNavigation" && "foreignKey" in meta) {
       return meta;
     }
-    if (meta.role == "value" && meta.type == "model") {
-      return meta;
+    if (meta.role == "value") {
+      if (meta.type == "model") {
+        return meta;
+      }
+      if (meta.type == "collection" && meta.itemType.type == "model") {
+        return meta as ModelCollectionValue;
+      }
     }
     return null;
   }
@@ -499,7 +647,7 @@ const primaryBindKind = computed(() => {
   if (valueMeta.value.role == "foreignKey") {
     return "key";
   }
-  if (valueMeta.value.type == "model") {
+  if (valueMeta.value.type == "model" || valueMeta.value.type == "collection") {
     if (typeof props.modelValue != "object" && props.modelValue !== undefined) {
       throw (
         "Expected a model object to be bound to modelValue, but received a " +
@@ -519,101 +667,114 @@ const modelObjectMeta = computed(() => {
     return meta.principalType;
   } else if (meta.type == "model") {
     return meta.typeDef;
+  } else if (meta.type == "collection" && meta.itemType.type == "model") {
+    return meta.itemType.typeDef;
   } else {
     throw `Value ${meta.name} must be a foreignKey or model type to use c-select.`;
   }
 });
 
 /** The effective object (whose type is described by `modelObjectMeta`) that has been provided to the component. */
-const internalModelValue = computed((): SelectedModelType | null => {
+const internalModelValue = computed((): SelectedModelTypeSingle[] => {
   if (props.objectValue) {
-    return props.objectValue;
+    return toArray(props.objectValue);
   }
   if (
     valueOwner.value &&
     modelObjectProp.value &&
     valueOwner.value[modelObjectProp.value.name]
   ) {
-    return valueOwner.value[modelObjectProp.value.name];
+    return toArray(valueOwner.value[modelObjectProp.value.name]);
   }
 
   if (props.modelValue && primaryBindKind.value == "model") {
-    return props.modelValue;
+    return toArray(props.modelValue);
   }
 
-  if (internalKeyValue.value) {
+  let ret = [];
+  let needsLoad = [];
+  for (const key of internalKeyValue.value) {
     // See if we already have a model that we're using to represent a key-only binding.
     // Storing this object prevents it from flipping between different instances
     // obtained from either getCaller or listCaller,
     // which causes vuetify to reset its search when the object passed to v-select's `modelValue` prop changes.
-    if (
-      keyFetchedModel.value &&
-      internalKeyValue.value ===
-        keyFetchedModel.value[modelObjectMeta.value.keyProp.name]
-    ) {
-      return keyFetchedModel.value;
+    const keyFetchedModel = internallyFetchedModels.get(key)?.deref();
+    if (keyFetchedModel) {
+      ret.push(keyFetchedModel);
+      continue;
     }
 
     // All we have is the PK. First, check if it is already in our item array.
     // If so, capture it. If not, request the object from the server.
     const item = items.value.filter(
-      (i) =>
-        internalKeyValue.value ===
-        (i as any)[modelObjectMeta.value.keyProp.name]
+      (i) => key === i[modelObjectMeta.value.keyProp.name]
     )[0];
     if (item) {
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-      keyFetchedModel.value = item;
-      return item;
+      internallyFetchedModels.set(key, new WeakRef(item));
+      ret.push(item);
+      continue;
     }
 
     // See if we obtained the item via getCaller.
-    const singleItem = getCaller.result;
-    if (
-      singleItem &&
-      internalKeyValue.value ===
-        (singleItem as any)[modelObjectMeta.value.keyProp.name]
-    ) {
+    const singleItem = getCaller.result?.find(
+      (x) => key === x[modelObjectMeta.value.keyProp.name]
+    );
+    if (singleItem) {
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-      keyFetchedModel.value = singleItem;
-      return singleItem;
+      internallyFetchedModels.set(key, new WeakRef(singleItem));
+      ret.push(singleItem);
+      continue;
     }
 
-    if (!listCaller.isLoading && getCaller.args.id != internalKeyValue.value) {
-      // Only request the single item if the list isn't currently loading,
-      // and if the last requested key is not the key we're looking for.
-      // (this prevents an infinite loop of invokes if the call to the server fails.)
-      // The single item may end up coming back from a pending list call.
-      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-      getCaller.args.id = internalKeyValue.value;
-      getCaller.invokeWithArgs();
-    }
+    needsLoad.push(key);
   }
-  return null;
+
+  if (
+    !listCaller.isLoading &&
+    !getCaller.isLoading &&
+    needsLoad.some((needed) => !getCaller.args.ids.includes(needed))
+  ) {
+    // Only request the item if the list isn't currently loading,
+    // since the item may end up coming back from a pending list call.
+    // Also only load if any of the needed keys are missing from the last requested server call.
+    // (this prevents an infinite loop of invokes if the call to the server fails.)
+    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+    getCaller.args.ids = needsLoad;
+    getCaller.invokeWithArgs();
+  }
+
+  return ret;
 });
 
 /** The effective key (whose type is described by `modelObjectMeta`) that has been provided to the component. */
-const internalKeyValue = computed((): SelectedPkType | null => {
-  let value: any;
+const internalKeyValue = computed((): SelectedPkTypeSingle[] => {
+  let value: SelectedPkTypeSingle[];
   if (props.keyValue) {
-    value = props.keyValue;
+    value = toArray(props.keyValue) as SelectedPkTypeSingle[];
   } else if (valueOwner.value && modelKeyProp.value) {
-    value = valueOwner.value[modelKeyProp.value.name];
+    value = toArray(valueOwner.value[modelKeyProp.value.name]);
   } else if (props.modelValue && primaryBindKind.value == "key") {
-    value = props.modelValue;
+    value = toArray(props.modelValue);
   } else {
-    value = null;
+    value = [];
   }
 
-  if (value != null) {
-    // Parse the value in case we were given a string instead of a number, or something like that, via the `keyValue` prop.
-    // This prevents `internalModelValue` from getting confused and infinitely calling the `getCaller`.
-    return mapValueToModel(value, modelObjectMeta.value.keyProp);
-  }
-
-  return null;
+  // Parse the values in case we were given a string instead of a number, or something like that, via the `keyValue` prop.
+  // This prevents `internalModelValue` from getting confused and infinitely calling the `getCaller`.
+  return value.map((v) => mapValueToModel(v, modelObjectMeta.value.keyProp));
 });
 
+const selectedKeysSet = computed(
+  () =>
+    new Set([
+      ...internalKeyValue.value,
+      ...internalModelValue.value.map(
+        (x) => x[modelObjectMeta.value.keyProp.name]
+      ),
+    ])
+);
+
 /** The effective set of validation rules to pass to the v-select. */
 const effectiveRules = computed((): TypedValidationRule<SelectedPkType>[] => {
   // If we were explicitly given rules, use those.
@@ -632,7 +793,12 @@ const effectiveRules = computed((): TypedValidationRule<SelectedPkType>[] => {
     return (
       valueOwner.value
         .$getRules(modelKeyProp.value)
-        ?.map((rule) => () => rule(internalKeyValue.value)) ?? []
+        ?.map(
+          (rule) => () =>
+            effectiveMultiple.value
+              ? rule(internalKeyValue.value)
+              : rule(internalKeyValue.value[0])
+        ) ?? []
     );
   }
 
@@ -647,11 +813,16 @@ const effectiveRules = computed((): TypedValidationRule<SelectedPkType>[] => {
 });
 
 const items = computed(() => {
-  return (listCaller?.result || []) as SelectedModelType[];
+  return (listCaller?.result || []) as SelectedModelTypeSingle[];
 });
 
-const listItems = computed((): Indexable<SelectedModelType>[] => {
-  return items.value;
+const listItems = computed(() => {
+  const pkName = modelObjectMeta.value.keyProp.name;
+  return items.value.map((item) => ({
+    model: item,
+    key: item[pkName],
+    selected: selectedKeysSet.value.has(item[pkName]),
+  }));
 });
 
 const createItemLabel = computed(() => {
@@ -664,37 +835,108 @@ const createItemLabel = computed(() => {
   return null;
 });
 
-function onInput(value: SelectedModelType | null, dontFocus = false) {
+const effectiveMultiple = computed(() => {
+  let multiple: boolean = props.multiple ?? false;
+  if (valueMeta.value?.type == "collection") {
+    if ("manyToMany" in valueMeta.value) {
+      throw new Error(
+        `c-select cannot be used with the many-to-many value '${valueMeta.value.name}'. Use c-select-many-to-many instead.`
+      );
+    }
+    multiple = true;
+  } else if (valueOwner.value && valueMeta.value && multiple) {
+    throw new Error(
+      `The 'multiple' prop cannot be used with the non-collection value '${valueMeta.value.name}'.`
+    );
+  }
+
+  return multiple;
+});
+
+function onInput(value: SelectedModelTypeSingle | null, dontFocus = false) {
   value = value ?? null;
-  if (value == null && !isClearable.value) {
+
+  if (value === null && !props.canDeselect) {
     return;
   }
 
-  // Clear any manual errors
-  error.value = [];
+  const key = value ? value[modelObjectMeta.value.keyProp.name] : null;
+  let newKey, newObjectValue: any;
 
-  const key = value ? (value as any)[modelObjectMeta.value.keyProp.name] : null;
-  keyFetchedModel.value = value;
+  if (effectiveMultiple.value) {
+    if (value == null) {
+      newObjectValue = [];
+      newKey = [];
+      emit("selectionChanged", [...internalModelValue.value], false);
+    } else {
+      const selectedKeys = [...selectedKeysSet.value];
+      const selectedModels = [...internalModelValue.value];
+      if (key != null) {
+        const idx = selectedKeys.indexOf(key);
+        if (idx === -1) {
+          selectedKeys.push(key);
+          selectedModels.push(value);
+          internallyFetchedModels.set(key, new WeakRef(value));
+          emit("selectionChanged", [value], true);
+        } else {
+          if (!props.canDeselect) return;
+          selectedKeys.splice(idx, 1);
+          const modelIdx = selectedModels.indexOf(value);
+          if (modelIdx !== -1) {
+            selectedModels.splice(idx, 1);
+          }
+          emit("selectionChanged", [value], false);
+        }
+      } else {
+        // Key may be null if the item came from `props.create` and isn't saved yet.
+        const idx = selectedModels.indexOf(value);
+        if (idx === -1) {
+          selectedModels.push(value);
+          emit("selectionChanged", [value], true);
+        } else {
+          if (!props.canDeselect) return;
+          selectedModels.splice(idx, 1);
+          emit("selectionChanged", [value], false);
+        }
+      }
+
+      newObjectValue = selectedModels;
+      newKey = selectedKeys;
+    }
+  } else {
+    if (value == null && !isClearable.value) {
+      return;
+    }
+    newObjectValue = value;
+    newKey = key;
+    if (value) {
+      internallyFetchedModels.set(key, new WeakRef(value));
+    }
+  }
 
   if (valueOwner.value) {
     if (modelKeyProp.value) {
-      valueOwner.value[modelKeyProp.value.name] = key;
+      valueOwner.value[modelKeyProp.value.name] = newKey;
     }
     if (modelObjectProp.value) {
-      valueOwner.value[modelObjectProp.value.name] = value;
+      valueOwner.value[modelObjectProp.value.name] = newObjectValue;
     }
   }
 
-  emit("update:modelValue", primaryBindKind.value == "key" ? key : value);
-  emit("update:objectValue", value);
-  emit("update:keyValue", key);
-  pendingSelection.value = value ? listItems.value.indexOf(value) : 0;
+  emit(
+    "update:modelValue",
+    primaryBindKind.value == "key" ? newKey : newObjectValue
+  );
+  emit("update:objectValue", newObjectValue);
+  emit("update:keyValue", newKey);
+
+  pendingSelection.value = value ? items.value.indexOf(value) : 0;
 
   // When the input value is cleared, re-focus the dropdown
   // to allow the user to enter new search input.
   // Without this, pressing backspace to delete the current value
   // will cause the search field to lose focus and further keyboard input will do nothing.
-  if (!dontFocus) {
+  if (!dontFocus && !effectiveMultiple.value) {
     if (!value) {
       openMenu();
     } else {
@@ -711,7 +953,15 @@ function onInputKey(event: KeyboardEvent) {
     case "delete":
     case "backspace":
       if (!menuOpen.value) {
-        onInput(null, true);
+        if (effectiveMultiple.value) {
+          // Delete only the last item when deleting items with multi-select
+          const lastItem = internalModelValue.value.at(-1);
+          if (lastItem) {
+            onInput(lastItem, true);
+          }
+        } else {
+          onInput(null, true);
+        }
         event.stopPropagation();
         event.preventDefault();
       }
@@ -738,7 +988,7 @@ function onInputKey(event: KeyboardEvent) {
 }
 
 function confirmPendingSelection() {
-  var item = listItems.value[pendingSelection.value];
+  var item = items.value[pendingSelection.value];
   if (!item) return;
   onInput(item);
 }
@@ -790,8 +1040,8 @@ async function openMenu(select?: boolean) {
   menuOpenForced.value = true;
 
   while (
-    // cap waiting at 100ms
-    start + 100 > performance.now() &&
+    // cap waiting
+    start + 500 > performance.now() &&
     (!input.offsetParent || input != document.activeElement)
   ) {
     input.focus();
@@ -819,8 +1069,7 @@ function toggleMenu() {
   else openMenu();
 }
 
-const propMeta = valueMeta.value;
-if (!propMeta) {
+if (!valueMeta.value) {
   throw "c-select requires value metadata. Specify it with the 'for' prop'";
 }
 
@@ -828,19 +1077,66 @@ if (!propMeta) {
  * A caller that will be used to resolve the full object when the only thing
  * that has been provided to c-select is a primary key value.
  */
-const getCaller = new ModelApiClient<SelectedModelType>(modelObjectMeta.value)
+const getCaller = new ModelApiClient<SelectedModelTypeSingle>(
+  modelObjectMeta.value
+)
   .$useSimultaneousRequestCaching()
   .$makeCaller(
-    "item",
+    "list",
     function () {
       throw "expected calls to be made with invokeWithArgs";
     },
-    () => ({ id: null as any }),
-    (c, args) => c.get(args.id)
+    () => ({ ids: [] as SelectedPkTypeSingle[] }),
+    (c, args) => {
+      if (!args.ids.length) return;
+
+      if (args.ids.length == 1) {
+        return c.get(args.ids[0], props.params).then((res) => ({
+          ...res,
+          data: {
+            ...res.data,
+            // Convert ItemResult to ListResult
+            list: res.data.object ? [res.data.object] : [],
+          },
+        }));
+      } else if (
+        args.ids.length > 1 &&
+        modelObjectMeta.value.keyProp.type == "number"
+      ) {
+        return c.list({
+          ...props.params,
+          filter: {
+            ...props.params?.filter,
+            [modelObjectMeta.value.keyProp.name]: args.ids.join(","),
+          },
+          pageSize: args.ids.length,
+          noCount: true,
+        });
+      } else {
+        // Multiple values that we can't query with a CSV-filtered list call.
+        const promises = args.ids.map((id) => c.get(id, props.params));
+        return Promise.allSettled(promises).then((res) => {
+          const items = res
+            .filter((res) => res.status == "fulfilled")
+            .map((res) => res.value);
+          return {
+            ...items[0],
+            data: {
+              wasSuccessful: items.length > 0,
+              list: items
+                .filter((r) => r.data.object)
+                .map((r) => r.data.object!),
+            },
+          };
+        });
+      }
+    }
   )
   .setConcurrency("debounce");
 
-const listCaller = new ModelApiClient<SelectedModelType>(modelObjectMeta.value)
+const listCaller = new ModelApiClient<SelectedModelTypeSingle>(
+  modelObjectMeta.value
+)
   .$useSimultaneousRequestCaching()
   .$makeCaller("list", (c) => {
     return c.list({
@@ -852,9 +1148,6 @@ const listCaller = new ModelApiClient<SelectedModelType>(modelObjectMeta.value)
   .onFulfilled(() => {
     pendingSelection.value = 0;
   })
-  .onRejected((state) => {
-    error.value = [state.message || "Unknown Error"];
-  })
   .setConcurrency("debounce");
 
 watch(
@@ -875,7 +1168,7 @@ watch(pendingSelection, async () => {
   await nextTick();
   await nextTick();
   var listDiv = listRef.value?.$el as HTMLElement;
-  var selectedItem = listDiv?.querySelector(".v-list-item--active");
+  var selectedItem = listDiv?.querySelector(".pending-selection");
   selectedItem?.scrollIntoView?.({
     behavior: "auto",
     block: "nearest",
@@ -883,7 +1176,7 @@ watch(pendingSelection, async () => {
   });
 });
 
-watch(search, (newVal: any, oldVal: any) => {
+watch(search, (newVal, oldVal) => {
   searchChanged.value = new Date();
   if (newVal != oldVal) {
     listCaller();
@@ -910,7 +1203,7 @@ watch(createItemLabel, () => {
 
 // Load the initial contents of the list.
 listCaller().then(() => {
-  if (internalModelValue.value || internalKeyValue.value) {
+  if (selectedKeysSet.value.size) {
     // Don't preselect if there's already a value selected.
     return;
   }