Select with type "list" proposal

[fsgiudice]

Hi @RSTOENESCU,
I’m not an expert of git so now I cannot make a PR. Could you check if this can be useful? As I prefer a list of simple options instead of radio options.

diff --git a/dev/components/form/select.vue b/dev/components/form/select.vue
index 324cf56..783432d 100644
--- a/dev/components/form/select.vue
+++ b/dev/components/form/select.vue
@@ -1,6 +1,17 @@
 <template>
   <div>
     <div class="layout-padding">
+      <p class="caption">With List</p>
+      <q-select type="list" v-model="select" :options="selectOptions"></q-select>
+      <p class="caption">With List and Label</p>
+      <q-select type="list" v-model="select" :options="selectOptions" label="Pick Company"></q-select>
+      <p class="caption">With List and Placeholder</p>
+      <q-select type="list" v-model="select" :options="selectOptions" placeholder="Pick Company"></q-select>
+      <p class="caption">With List Disabled State</p>
+      <q-select disable type="list" v-model="select" :options="selectOptions"></q-select>
+      <p class="caption">With List Readonly State</p>
+      <q-select readonly type="list" v-model="select" :options="selectOptions"></q-select>
+
       <p class="caption">With Radios</p>
       <q-select type="radio" v-model="select" :options="selectOptions"></q-select>
       <p class="caption">With Checkboxes</p>
@@ -28,6 +39,19 @@
 
       <p class="caption">Inside of a List</p>
       <div class="list">
+        <div class="list-label">Single List Selection</div>
+        <div class="item two-lines">
+          <i class="item-primary">supervisor_account</i>
+          <div class="item-content">
+            <q-select
+              class="full-width"
+              type="list"
+              v-model="select"
+              :options="selectOptions"
+            ></q-select>
+          </div>
+        </div>
+        <hr>
         <div class="list-label">Single Selection</div>
         <div class="item two-lines">
           <i class="item-primary">supervisor_account</i>
diff --git a/src/vue-components/select/Select.vue b/src/vue-components/select/Select.vue
index e412a60..06fbbf8 100644
--- a/src/vue-components/select/Select.vue
+++ b/src/vue-components/select/Select.vue
@@ -29,6 +29,13 @@
             <q-toggle :value="optModel[index]" @input="toggleValue(toggle.value)"></q-toggle>
           </div>
         </label>
+
+        <div v-if="type === 'list'" class="list highlight" style="min-width: 150px; max-height: 300px;">
+          <div class="item item-link item-delimiter"
+               v-for="(option, index) in options" :key="option.value" @click="selectAndClose(index)">
+             <div class="item-content"v-html="option.label"></div>
+          </div>
+        </div>
       </div>
     </q-popover>
   </q-picker-textfield>
@@ -53,7 +60,7 @@ export default {
       type: String,
       required: true,
       validator (value) {
-        return ['radio', 'checkbox', 'toggle'].includes(value)
+        return ['radio', 'checkbox', 'toggle', 'list'].includes(value)
       }
     },
     label: String,
@@ -105,6 +112,10 @@ export default {
       else {
         this.model.push(value)
       }
+    },
+    selectAndClose (index) {
+      this.model = this.options[index].value
+      this.$refs.popover.close()
     }
   }
 }

Francesco

[rstoenescu]

@fsgiudice Hi, sure. Will integrate this in the following days. Thx for your contribution!

In any case, making a PR is easy: make a clone of the repo, push to your clone, click the “submit PR request” button from your clone.

[s.molinari]

This is a fairly good guide on how to work with Git and Github.

http://kbroman.org/github_tutorial/pages/fork.html

Scott

[fsgiudice]

@rstoenescu
Hi, thank you for have added this feature and extended it.
Francesco

[rstoenescu]

@fsgiudice Thank you for suggesting it in the first place. Will be available in next Quasar version.