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.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.