feat: Add "clear-value" prop for clearable behavior quasarframework#1157

Author: rstoenescu

src/components/autocomplete/QAutocomplete.js

@@ -197,6 +197,9 @@ export default {
         case 27: // escape
           this.__clearSearch()
           break
+        case 9: // tab
+          this.hide()
+          break
       }
     },
     __moveCursor (offset, e) {

src/components/color/QColor.js

@@ -6,7 +6,6 @@ import QColorPicker from './QColorPicker'
 import { QBtn } from '../btn'
 import { QModal } from '../modal'
 import clone from '../../utils/clone'
-import { stopAndPrevent } from '../../utils/event'
 
 const contentCss = __THEME__ === 'ios'
   ? {
@@ -90,11 +89,6 @@ export default {
       this.focused = false
       return this.$refs.popup.hide()
     },
-    clear (evt) {
-      stopAndPrevent(evt)
-      this.$emit('input', null)
-      this.$emit('change', null)
-    },
 
     __onFocus () {
       this.__setModel(this.value)

src/components/datetime/QDatetime.js

@@ -87,11 +87,6 @@ export default {
       this.focused = false
       return this.$refs.popup.hide()
     },
-    clear (evt) {
-      stopAndPrevent(evt)
-      this.$emit('input', '')
-      this.$emit('change', '')
-    },
 
     __onFocus () {
       if (this.defaultView) {

src/components/input/QInput.vue

@@ -242,8 +242,9 @@ export default {
       clearTimeout(this.timer)
       this.focus()
       if (this.editable) {
-        this.model = this.isNumber ? null : ''
+        this.model = this.clearValue || (this.isNumber ? null : '')
         this.$emit('input', this.model)
+        this.$emit('clear')
       }
     },
 

src/components/search/QSearch.js

@@ -76,6 +76,7 @@ export default {
   methods: {
     clear () {
       this.$refs.input.clear()
+      this.$emit('clear')
     }
   },
   render (h) {
@@ -101,15 +102,17 @@ export default {
         maxLength: this.maxLength,
         color: this.color,
         before: this.controlBefore,
-        after: this.controlAfter
+        after: this.controlAfter,
+        clearValue: this.clearValue
       },
       on: {
         input: v => { this.model = v },
         focus: this.__onFocus,
         blur: this.__onBlur,
         keyup: this.__onKeyup,
         keydown: this.__onKeydown,
-        click: this.__onClick
+        click: this.__onClick,
+        clear: () => { this.$emit('clear') }
       }
     }, [
       this.$slots.default

src/components/select/QDialogSelect.vue

@@ -152,7 +152,10 @@ import { QList, QItemWrapper } from '../list'
 import { QCheckbox } from '../checkbox'
 import { QRadio } from '../radio'
 import { QToggle } from '../toggle'
-import SelectMixin from '../../mixins/select'
+import { QIcon } from '../components/icon'
+import { QInputFrame } from '../components/input-frame'
+import { QChip } from '../components/chip'
+import FrameMixin from './input-frame'
 import extend from '../../utils/extend'
 
 function defaultFilterFn (terms, obj) {
@@ -161,7 +164,7 @@ function defaultFilterFn (terms, obj) {
 
 export default {
   name: 'q-select',
-  mixins: [SelectMixin],
+  mixins: [FrameMixin],
   components: {
     QFieldReset,
     QSearch,
@@ -170,15 +173,47 @@ export default {
     QItemWrapper,
     QCheckbox,
     QRadio,
-    QToggle
+    QToggle,
+    QIcon,
+    QInputFrame,
+    QChip
   },
   props: {
     filter: [Function, Boolean],
     filterPlaceholder: String,
     autofocusFilter: Boolean,
     radio: Boolean,
     placeholder: String,
-    separator: Boolean
+    separator: Boolean,
+    value: { required: true },
+    multiple: Boolean,
+    toggle: Boolean,
+    chips: Boolean,
+    options: {
+      type: Array,
+      required: true,
+      validator: v => v.every(o => 'label' in o && 'value' in o)
+    },
+    frameColor: String,
+    displayValue: String,
+    clearable: Boolean,
+    clearValue: {}
+  },
+  data () {
+    return {
+      model: this.multiple && Array.isArray(this.value)
+        ? this.value.slice()
+        : this.value,
+      terms: '',
+      focused: false
+    }
+  },
+  watch: {
+    value (val) {
+      this.model = this.multiple && Array.isArray(val)
+        ? val.slice()
+        : val
+    }
   },
   computed: {
     optModel () {
@@ -205,6 +240,36 @@ export default {
       return this.multiple
         ? `.q-item-side > ${this.toggle ? '.q-toggle' : '.q-checkbox'} > .active`
         : `.q-item.active`
+    },
+    actualValue () {
+      if (this.displayValue) {
+        return this.displayValue
+      }
+      if (!this.multiple) {
+        const opt = this.options.find(opt => opt.value === this.model)
+        return opt ? opt.label : ''
+      }
+
+      const opt = this.selectedOptions.map(opt => opt.label)
+      return opt.length ? opt.join(', ') : ''
+    },
+    selectedOptions () {
+      if (this.multiple) {
+        return this.length > 0
+          ? this.options.filter(opt => this.model.includes(opt.value))
+          : []
+      }
+    },
+    hasChips () {
+      return this.multiple && this.chips
+    },
+    length () {
+      return this.multiple
+        ? this.model.length
+        : ([null, undefined, ''].includes(this.model) ? 0 : 1)
+    },
+    additionalLength () {
+      return this.displayValue && this.displayValue.length > 0
     }
   },
   methods: {
@@ -256,6 +321,33 @@ export default {
       }
       this.__emit(val)
       this.hide()
+    },
+    __toggleMultiple (value, disable) {
+      if (disable) {
+        return
+      }
+      const
+        model = this.model,
+        index = model.indexOf(value)
+
+      if (index > -1) {
+        model.splice(index, 1)
+      }
+      else {
+        model.push(value)
+      }
+
+      this.$emit('input', model)
+    },
+    __emit (val) {
+      if (this.value !== val) {
+        this.$emit('input', val)
+      }
+      this.$emit('change', val)
+    },
+    clear () {
+      this.__emit(this.clearValue || (this.multiple ? [] : null))
+      this.$emit('clear')
     }
   }
 }

src/components/select/QSelect.vue

@@ -1,11 +1,14 @@
+import { stopAndPrevent } from '../../utils/event'
+
 export default {
   props: {
     autofocus: [Boolean, String],
     name: String,
     maxLength: [Number, String],
     maxHeight: Number,
     placeholder: String,
-    loading: Boolean
+    loading: Boolean,
+    clearValue: {}
   },
   data () {
     return {
@@ -33,6 +36,13 @@ export default {
     select () {
       this.$refs.input.select()
     },
+    clear (evt) {
+      stopAndPrevent(evt)
+      const val = this.clearValue || null
+      this.$emit('input', val)
+      this.$emit('change', val)
+      this.$emit('clear')
+    },
 
     __onFocus (e) {
       clearTimeout(this.timer)