className for QSelect, QSearch before|after, QInput focus on marginalia

- QSelect: use className from option item in list
- QSearch: combine before/after with search and clear icons (can be disabled)
- QInput and friends: focus input field in __onFocus

close quasarframework#2017, close quasarframework#2005, close quasarframework#1953

src/components/input/QInput.vue

@@ -294,7 +294,7 @@ export default {
     __setModel (val) {
       clearTimeout(this.timer)
       this.focus()
-      this.__set(val || (this.isNumber ? null : ''), true)
+      this.__set(this.isNumber && val === 0 ? val : val || (this.isNumber ? null : ''), true)
     },
     __set (e, forceUpdate) {
       let val = e && e.target ? e.target.value : e

src/components/search/QSearch.js

@@ -63,31 +63,30 @@ export default {
         : this.debounce
     },
     controlBefore () {
-      return this.before || (
-        this.noIcon
-          ? null
-          : [{
-            icon: this.icon || this.$q.icon.search.icon,
-            handler: this.focus
-          }]
-      )
+      const before = (this.before || []).slice()
+      if (!this.noIcon) {
+        before.unshift({
+          icon: this.icon || this.$q.icon.search.icon,
+          handler: this.focus
+        })
+      }
+      return before
     },
     controlAfter () {
-      if (this.after) {
-        return this.after
-      }
-      if (this.editable && this.clearable) {
-        return [{
+      const after = (this.after || []).slice()
+      if (this.isClearable) {
+        after.push({
           icon: this.$q.icon.search[`clear${this.isInverted ? 'Inverted' : ''}`],
           content: true,
           handler: this.clear
-        }]
+        })
       }
+      return after
     }
   },
   methods: {
-    clear () {
-      this.$refs.input.clear()
+    clear (evt) {
+      this.$refs.input.clear(evt)
     }
   },
   render (h) {

src/components/select/QSelect.vue

@@ -76,7 +76,7 @@
     <q-popover
       ref="popover"
       fit
-      :disable="readonly || disable"
+      :disable="!editable"
       :anchor-click="false"
       class="column no-wrap"
       :class="dark ? 'bg-dark' : null"
@@ -113,7 +113,8 @@
             :class="[
               opt.disable ? 'text-faded' : 'cursor-pointer',
               index === keyboardIndex ? 'q-select-highlight' : '',
-              opt.disable ? '' : 'cursor-pointer'
+              opt.disable ? '' : 'cursor-pointer',
+              opt.className || ''
             ]"
             slot-replace
             @click.capture.native="__toggleMultiple(opt.value, opt.disable)"
@@ -149,7 +150,8 @@
             :class="[
               opt.disable ? 'text-faded' : 'cursor-pointer',
               index === keyboardIndex ? 'q-select-highlight' : '',
-              opt.disable ? '' : 'cursor-pointer'
+              opt.disable ? '' : 'cursor-pointer',
+              opt.className || ''
             ]"
             slot-replace
             :active="value === opt.value"
@@ -215,7 +217,6 @@ export default {
     multiple: Boolean,
     toggle: Boolean,
     chips: Boolean,
-    readonly: Boolean,
     options: {
       type: Array,
       required: true,

src/mixins/input.js

@@ -35,6 +35,7 @@ export default {
         return
       }
       this.focused = true
+      this.$refs.input && this.$refs.input.focus()
       this.$emit('focus', e)
     },
     __onInputBlur (e) {