refactor: Form components improvements

Author: rstoenescu

dev/components/form/chips-input.vue

@@ -13,6 +13,7 @@
         on Chips Textbox below to start adding Chips.
       </p>
       <q-chips-input color="secondary" float-label="Float Label" v-model="model" placeholder="Some placeholder" />
+      <q-chips-input inverted color="dark" bg-color="amber" float-label="Float Label" v-model="model" placeholder="Some placeholder" />
       <!--
       <q-chips-input chip-classes="bg-primary text-white" v-model="model"/>
 

dev/components/form/datetime-range.vue

@@ -21,6 +21,10 @@
         Date Range
       </p>
       <q-datetime-range type="date" v-model="first.range" :min="first.min" :max="first.max" />
+      <div class="bg-grey-8" style="width: 300px; padding: 25px">
+        <q-datetime-range color="secondary" dark type="date" v-model="first.range" :min="first.min" :max="first.max" />
+      </div>
+      <q-datetime-range inverted color="amber" type="date" v-model="first.range" :min="first.min" :max="first.max" />
 
       <p class="caption">
         Datetime Range

dev/components/form/datetime.vue

@@ -35,10 +35,13 @@
         </small>
       </p>
       <q-datetime v-model="model" type="date" />
-
       <q-datetime stack-label="Stack Label" v-model="model" type="date" />
       <q-datetime float-label="Float Label" v-model="model" type="date" />
 
+      <q-datetime inverted v-model="model" type="date" />
+      <q-datetime inverted color="secondary" stack-label="Stack Label" v-model="model" type="date" />
+      <q-datetime inverted color="amber" float-label="Float Label" v-model="model" type="date" />
+
       <p class="caption">
         Time
         <br>

dev/components/form/numeric.vue

@@ -6,6 +6,11 @@
       <q-select v-model="select" :options="selectOptions" delimiter></q-select>
       <q-select v-model="select" :options="selectListOptions"></q-select>
 
+      <p class="caption">Coloring</p>
+      <q-select color="amber" v-model="select" :options="selectListOptions"></q-select>
+      <q-select inverted color="secondary" v-model="select" :options="selectListOptions"></q-select>
+      <q-select inverted float-label="Float Label" color="amber" v-model="select" :options="selectListOptions"></q-select>
+
       <p class="caption">Single Selection with Radio</p>
       <q-field label="gogu">
         <q-select v-model="select" float-label="Gogu" radio :options="selectListOptions" :count="10"></q-select>
@@ -18,6 +23,7 @@
       <q-field label="gogu" :count="10">
         <q-select multiple chips v-model="multipleSelect" :options="selectListOptions" float-label="Some label" max-height="36px"></q-select>
       </q-field>
+      <q-select inverted color="dark" bgColor="amber" multiple chips v-model="multipleSelect" :options="selectListOptions" float-label="Some label" max-height="36px"></q-select>
 
       <p class="caption">Multiple Selection with Checkboxes</p>
       <q-select multiple checkbox v-model="multipleSelect" :options="selectListOptions" @input="inputChange"></q-select>

dev/components/form/select.vue

@@ -8,6 +8,11 @@
     :float-label="floatLabel"
     :error="error"
     :disable="disable"
+    :inverted="inverted"
+    :dark="dark"
+    :before="before"
+    :after="after"
+    :color="inverted ? bgColor || color : color"
 
     :focused="focused"
     :length="length"
@@ -50,7 +55,7 @@
       name="send"
       slot="control"
       class="q-if-control self-end"
-      :class="{hidden: !input.length}"
+      :class="{invisible: !input.length}"
       @click="add()"
     ></q-icon>
   </q-input-frame>
@@ -75,7 +80,8 @@ export default {
     value: {
       type: Array,
       required: true
-    }
+    },
+    bgColor: String
   },
   data () {
     return {

src/components/chips-input/QChipsInput.vue

@@ -8,6 +8,11 @@
     :float-label="floatLabel"
     :error="error"
     :disable="disable"
+    :inverted="inverted"
+    :dark="dark"
+    :before="before"
+    :after="after"
+    :color="color"
 
     :focused="focused"
     focusable
@@ -17,7 +22,7 @@
     @focus.native="__onFocus"
     @blur.native="__onBlur"
   >
-    <div class="col" :class="[`text-${align}`]">{{ actualValue }}</div>
+    <div class="col q-input-target" :class="[`text-${align}`]">{{ actualValue }}</div>
 
     <q-popover
       v-if="desktop"

src/components/datetime/QDatetime.vue

@@ -15,6 +15,11 @@
       :stack-label="stackLabel"
       :placeholder="placeholder"
       :disable="disable"
+      :inverted="inverted"
+      :dark="dark"
+      :before="before"
+      :after="after"
+      :color="color"
       :align="align"
       :format24h="format24h"
       :monday-first="mondayFirst"
@@ -38,6 +43,11 @@
       :stack-label="stackLabel"
       :placeholder="placeholder"
       :disable="disable"
+      :inverted="inverted"
+      :dark="dark"
+      :before="before"
+      :after="after"
+      :color="color"
       :align="align"
       :format24h="format24h"
       :monday-first="mondayFirst"

src/components/datetime/QDatetimeRange.vue

@@ -11,6 +11,11 @@ $input-transition ?= all .45s cubic-bezier(.23, 1, .32, 1)
   padding-bottom 8px
   color $primary
 
+  /* Remove browser controller for input type="number" */
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button // @stylint ignore
+    -webkit-appearance none
+
   &:before, &:after
     content ''
     position absolute

src/components/input-frame/input-frame.ios.styl

@@ -11,6 +11,11 @@ $input-transition ?= all .45s cubic-bezier(.23, 1, .32, 1)
   padding-bottom 8px
   color $primary
 
+  /* Remove browser controller for input type="number" */
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button // @stylint ignore
+    -webkit-appearance none
+
   &:before, &:after
     content ''
     position absolute