Select with type "list" proposal



  • 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


  • Admin

    @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.



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

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

    Scott



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


  • Admin

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