fix: [request] q-search numeric format? #365

quasarframework · Feb 2, 2017 · 370a73c · 370a73c
1 parent 224b187
commit 370a73c
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 25 deletions.
diff --git a/dev/components/form/search.vue b/dev/components/form/search.vue
@@ -2,19 +2,23 @@
   <div>
     <div class="layout-padding">
       <div class="label bg-secondary text-white">
-        Model <span class="right-detail">"<em>{{search}}</em>"</span>
+        Model <span class="right-detail"><em>{{stringModel}}</em></span>
       </div>
 
-      <br><br>
-
-      <div class="column small-gutter">
+      <div class="column small-gutter" style="margin-top: 15px">
         <q-search v-model="search"></q-search>
         <q-search v-model="search" class="orange"></q-search>
         <q-search v-model="search" class="secondary" icon="explore" placeholder="PlacesPlacesPlacesPlacesPlacesPlacesPlaces"></q-search>
         <q-search v-model="search" class="primary" icon="local_airport" placeholder="Airports"></q-search>
         <q-search v-model="search" class="dark" icon="local_hotel" placeholder="Hotels"></q-search>
       </div>
 
+      <p class="caption">Numeric Format</p>
+      <div class="label bg-secondary text-white">
+        Model <span class="right-detail"><em>{{numberModel}}</em></span>
+      </div>
+      <q-search v-model="number" numeric class="positive" style="margin-top: 15px"></q-search>
+
       <p class="caption">Disabled State</p>
       <q-search v-model="search" class="primary" disable></q-search>
 
@@ -31,7 +35,16 @@
 export default {
   data () {
     return {
-      search: ''
+      search: '',
+      number: ''
+    }
+  },
+  computed: {
+    stringModel () {
+      return this.search ? `"${this.search}"` : 'Empty'
+    },
+    numberModel () {
+      return this.number || this.number === 0 ? this.number : 'None'
     }
   }
 }

diff --git a/src/vue-components/search/Search.vue b/src/vue-components/search/Search.vue
@@ -5,23 +5,36 @@
   >
     <div class="q-search-input-container">
       <button class="q-search-icon">
-        <i>{{ icon }}</i>
-        <span v-show="$quasar.theme === 'ios' && this.value === '' && !hasText">{{placeholder}}</span>
+        <i class="on-left">{{ icon }}</i>
+        <span v-show="$quasar.theme === 'ios' && isEmpty">{{placeholder}}</span>
       </button>
       <input
+        v-if="numeric"
+        type="number"
+        class="q-search-input no-style"
+        :placeholder="$quasar.theme === 'mat' ? placeholder : ''"
+        v-model="model"
+        @focus="focus"
+        @blur="blur"
+        :disabled="disable"
+        :readonly="readonly"
+        tabindex="0"
+      >
+      <input
+        v-else
         type="text"
         class="q-search-input no-style"
         :placeholder="$quasar.theme === 'mat' ? placeholder : ''"
         v-model="model"
-        @focus="focus()"
-        @blur="blur()"
+        @focus="focus"
+        @blur="blur"
         :disabled="disable"
         :readonly="readonly"
         tabindex="0"
       >
       <button
         class="q-search-clear"
-        @click="clear()"
+        @click="clear"
         :class="{hidden: this.model === ''}"
       >
         <i class="mat-only">clear</i>
@@ -35,9 +48,10 @@
 export default {
   props: {
     value: {
-      type: String,
+      type: [String, Number],
       default: ''
     },
+    numeric: Boolean,
     debounce: {
       type: Number,
       default: 300
@@ -56,42 +70,46 @@ export default {
   data () {
     return {
       focused: false,
-      hasText: this.value.length > 0,
-      timer: null
+      timer: null,
+      isEmpty: !this.value && this.value !== 0
     }
   },
   computed: {
     model: {
       get () {
-        this.hasText = this.value.length > 0
+        this.isEmpty = !this.value && this.value !== 0
         return this.value
       },
       set (value) {
-        this.hasText = value.length > 0
         clearTimeout(this.timer)
-        if (this.value !== value) {
-          if (!this.hasText) {
-            this.$emit('input', '')
-            return
-          }
-          this.timer = setTimeout(() => {
-            this.$emit('input', value)
-          }, this.debounce)
+        this.isEmpty = !value && value !== 0
+        if (this.value === value) {
+          return
         }
+        if (this.isEmpty) {
+          this.$emit('input', '')
+          return
+        }
+        this.timer = setTimeout(() => {
+          this.$emit('input', value)
+        }, this.debounce)
       }
     },
     centered () {
       return !this.focused && this.value === ''
+    },
+    editable () {
+      return !this.disable && !this.readonly
     }
   },
   methods: {
     clear () {
-      if (!this.disable && !this.readonly) {
+      if (this.editable) {
         this.model = ''
       }
     },
     focus () {
-      if (!this.disable && !this.readonly) {
+      if (this.editable) {
         this.focused = true
       }
     },