Feature, limit props added

sagalbot · Mar 5, 2024 · cd7d4dc · cd7d4dc
1 parent 8577536
commit cd7d4dc
Show file tree

Hide file tree

Showing 6 changed files with 168 additions and 30 deletions.
diff --git a/dev/Dev.vue b/dev/Dev.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <v-select v-model="selected" v-bind="config" />
+    <v-select v-model="selected" v-bind="config"/>
   </div>
 </template>
 

diff --git a/docs/.vuepress/components/SlotLimit.vue b/docs/.vuepress/components/SlotLimit.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <v-select
+      v-model="selected"
+      :options="books"
+      :limit="2"
+      multiple
+      label="title"
+   >
+      <template #option="{ title, author }">
+        <h3 style="margin: 0">{{ title }}</h3>
+        <em>{{ author.firstName }} {{ author.lastName }}</em>
+      </template>
+      <template #limit="{ length }">
+        <span>and {{ length }} more</span>
+      </template>
+    </v-select>
+  </div>
+</template>
+<script>
+const books = [
+  {
+    title: "Old Man's War",
+    author: {
+      firstName: 'John',
+      lastName: 'Scalzi',
+    },
+  },
+  {
+    title: 'To Kill a Mockingbird',
+    author: {
+      firstName: 'Harper',
+      lastName: 'Lee',
+    },
+  },
+  {
+    title: 'The Great Gatsby',
+    author: {
+      firstName: 'F. Scott',
+      lastName: 'Fitzgerald',
+    },
+  },
+]
+
+export default {
+  data: () => ({
+    books: books,
+    selected: books,
+  }),
+}
+</script>
diff --git a/docs/api/props.md b/docs/api/props.md
@@ -605,3 +605,13 @@ value: {
 	default: null
 },
 ```
+
+## limit
+
+It will limit the display of selected options. The rest will be hidden. only work when multiple selections are made.
+
+```js
+limit: {
+	default: 0
+},
+```
diff --git a/docs/api/slots.md b/docs/api/slots.md
@@ -185,4 +185,11 @@ or have fine grain control over the markup.
 <SlotSpinner />
 <<< @/.vuepress/components/SlotSpinner.vue
 
+## `limit`
+
+- `limit {Number}` - if the limit props is provided
+
+<SlotLimit />
+<<< @/.vuepress/components/SlotLimit.vue
+
 </div>
diff --git a/src/components/Select.vue b/src/components/Select.vue
@@ -16,36 +16,85 @@
       @mousedown="toggleDropdown($event)"
     >
       <div ref="selectedOptions" class="vs__selected-options">
-        <slot
-          v-for="option in selectedValue"
-          name="selected-option-container"
-          :option="normalizeOptionForSlot(option)"
-          :deselect="deselect"
-          :multiple="multiple"
-          :disabled="disabled"
-        >
-          <span :key="getOptionKey(option)" class="vs__selected">
-            <slot
-              name="selected-option"
-              v-bind="normalizeOptionForSlot(option)"
-            >
-              {{ getOptionLabel(option) }}
-            </slot>
-            <button
-              v-if="multiple"
-              ref="deselectButtons"
-              :disabled="disabled"
-              type="button"
-              class="vs__deselect"
-              :title="`Deselect ${getOptionLabel(option)}`"
-              :aria-label="`Deselect ${getOptionLabel(option)}`"
-              @click="deselect(option)"
-            >
-              <component :is="childComponents.Deselect" />
-            </button>
-          </span>
-        </slot>
+        <template v-if="multiple">
+          <slot
+            v-for="option in selectedValue.slice(0, limit > 0 ? limit : selectedValue.length)"
+            name="selected-option-container"
+            :option="normalizeOptionForSlot(option)"
+            :deselect="deselect"
+            :multiple="multiple"
+            :disabled="disabled"
+          >
+            <span :key="getOptionKey(option)" class="vs__selected">
+              <slot
+                name="selected-option"
+                v-bind="normalizeOptionForSlot(option)"
+              >
+                {{ getOptionLabel(option) }}
+              </slot>
+              <button
+                v-if="multiple"
+                ref="deselectButtons"
+                :disabled="disabled"
+                type="button"
+                class="vs__deselect"
+                :title="`Deselect ${getOptionLabel(option)}`"
+                :aria-label="`Deselect ${getOptionLabel(option)}`"
+                @click="deselect(option)"
+              >
+                <component :is="childComponents.Deselect" />
+              </button>
+            </span>
+          </slot>
 
+          <template v-if="selectedValue.length > limit && limit > 0">
+            <span class="vs__limit-label">
+              <slot
+                v-if="$slots.limit"
+                name="limit"
+                :length="scope.limit.length"
+              >
+                <template #default="{ length }">
+                  {{ selectedValue.length - length }} more
+                </template>
+              </slot>
+              <template v-else>
+                {{ selectedValue.length - limit }} more
+              </template>
+            </span>
+          </template>
+        </template>
+        <template v-else>
+          <slot
+            v-for="option in selectedValue"
+            name="selected-option-container"
+            :option="normalizeOptionForSlot(option)"
+            :deselect="deselect"
+            :multiple="multiple"
+            :disabled="disabled"
+          >
+            <span :key="getOptionKey(option)" class="vs__selected">
+              <slot
+                name="selected-option"
+                v-bind="normalizeOptionForSlot(option)"
+              >
+                {{ getOptionLabel(option) }}
+              </slot>
+              <button
+                v-if="multiple"
+                ref="deselectButtons"
+                :disabled="disabled"
+                type="button"
+                class="vs__deselect"
+                :title="`Deselect ${getOptionLabel(option)}`"
+                :aria-label="`Deselect ${getOptionLabel(option)}`"
+                @click="deselect(option)"
+              >
+                <component :is="childComponents.Deselect" />
+              </button>
+            </span>
+          </slot>
+        </template>
         <slot name="search" v-bind="scope.search">
           <input
             class="vs__search"
@@ -668,6 +717,15 @@ export default {
       type: [String, Number],
       default: () => uniqueId(),
     },
+
+    /**
+     * To limit the visibility with multiple options.
+     * @type {Number}
+     */
+    limit: {
+      type: Number,
+      default: 0,
+    },
   },
 
   data() {
@@ -780,6 +838,9 @@ export default {
         spinner: {
           loading: this.mutableLoading,
         },
+        limit: {
+          length: this.selectedValue.length,
+        },
         noOptions: {
           search: this.search,
           loading: this.mutableLoading,

diff --git a/src/css/modules/selected.css b/src/css/modules/selected.css
@@ -41,3 +41,12 @@
         display: none;
     }
 }
+
+.vs__limit-label {
+    display: flex;
+    align-items: center;
+    color: var(--vs-selected-color);
+    line-height: var(--vs-line-height);
+    padding: 0 0.25em;
+    z-index: 0;
+}