feat: Allow normal and inverted setup for QSearch

Author: rstoenescu

dev/components/form/search.vue

@@ -14,6 +14,15 @@
         <q-search stack-label="Stack Label" v-model="search" color="amber" icon="local_hotel" placeholder="Hotels"></q-search>
       </div>
 
+      <div style="margin-top: 15px">
+        <q-search inverted v-model="search" align="right" suffix="Quasar" style="width: 300px"></q-search>
+        <q-search inverted v-model="search" color="orange"></q-search>
+        <q-search inverted v-model="search" color="secondary" icon="explore" placeholder="PlacesPlacesPlacesPlacesPlacesPlacesPlaces"></q-search>
+        <q-search inverted v-model="search" color="primary" icon="local_airport" placeholder="Airports"></q-search>
+        <q-search inverted v-model="search" color="dark" icon="local_hotel" placeholder="Hotels"></q-search>
+        <q-search inverted stack-label="Stack Label" v-model="search" color="amber" 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>

src/components/input-frame/QInputFrame.vue

@@ -8,7 +8,7 @@
       <q-icon
         v-for="item in before"
         :key="item"
-        class="q-if-control"
+        class="q-if-control q-if-control-before"
         :class="{hidden: item.content && !length}"
         :name="item.icon"
         @click="item.handler"

src/components/search/QSearch.vue

@@ -97,7 +97,11 @@ export default {
       return [{icon: this.icon, handler: this.focus}]
     },
     controlAfter () {
-      return [{icon: 'clear', content: true, handler: this.clearAndFocus}]
+      return [{
+        icon: this.inverted ? 'clear' : 'cancel',
+        content: true,
+        handler: this.clearAndFocus
+      }]
     }
   },
   methods: {