Disabled and tabindex for new inputs in controls (quasarframework#1524)

Author: pdanpdan

dev/components/components/uploader.vue

@@ -34,23 +34,27 @@
       <q-uploader style="max-width: 320px" no-thumbnails color="amber" :url="url" />
 
       <q-toggle v-model="inverted" label="Inverted" />
+      <q-toggle v-model="dark" label="Dark" />
       <p class="caption">Multiple File Upload</p>
-      <q-uploader
-        :inverted="inverted"
-        auto-expand
-        style="max-width: 320px"
-        float-label="Upload files"
-        multiple
-        :url="url"
-        ref="upld"
-        @start="emit('start')"
-        @finish="emit('finish')"
-        @uploaded="uploaded"
-        @add="add"
-        @remove:done="removeDone"
-        @remove:abort="removeAbort"
-        @remove:cancel="removeCancel"
-      />
+      <div class="q-pa-sm" :class="this.dark ? 'bg-grey-10 text-orange' : ''">
+        <q-uploader
+          :inverted="inverted"
+          :dark="dark"
+          auto-expand
+          style="max-width: 320px"
+          float-label="Upload files"
+          multiple
+          :url="url"
+          ref="upld"
+          @start="emit('start')"
+          @finish="emit('finish')"
+          @uploaded="uploaded"
+          @add="add"
+          @remove:done="removeDone"
+          @remove:abort="removeAbort"
+          @remove:cancel="removeCancel"
+        />
+      </div>
 
       <q-btn color="primary" @click="pick" style="margin-top: 15px">Pick Files</q-btn>
       <q-btn color="primary" @click="reset" style="margin-top: 15px">Reset the above Uploader</q-btn>
@@ -102,7 +106,7 @@
 
       <div class="absolute-right no-pointer-events">
         <q-btn @click="clear" style="pointer-events: all" color="primary">Clear Debug Log</q-btn>
-        <div v-for="evt in events">
+        <div v-for="evt in events" :key="evt">
           {{evt}}
         </div>
       </div>
@@ -116,7 +120,8 @@ export default {
     return {
       url: 'http://1.1.1.195/upload.php',
       events: [],
-      inverted: false
+      inverted: false,
+      dark: false
     }
   },
   methods: {

dev/components/form/all.vue

@@ -61,14 +61,17 @@
         <q-chips-input :dark="dark" class="q-my-sm" v-model="chips" float-label="Float Label" clearable suffix="SUF" prefix="PRE" />
         <q-chips-input :dark="dark" class="q-my-sm" v-model="chips" placeholder="Placeholder" float-label="With placeholder" clearable suffix="SUF" prefix="PRE" />
         <q-chips-input :dark="dark" class="q-my-sm" v-model="chips" placeholder="Placeholder" clearable suffix="SUF" prefix="PRE" />
-        <q-chips-input :dark="dark" class="q-my-sm" color="amber-2" chips-color="amber-2" chips-bg-color="dark" v-model="chips" stack-label="Stack Label" clearable suffix="SUF" prefix="PRE" />
+        <q-chips-input :dark="dark" class="q-my-sm" color="amber-2" v-model="chips" stack-label="Stack Label" clearable suffix="SUF" prefix="PRE" />
+        <q-chips-input :dark="dark" class="q-my-sm" color="amber-2" v-model="chips" stack-label="Stack Label" clearable suffix="SUF" prefix="PRE" />
         <q-chips-input :dark="dark" class="q-my-sm" v-model="chips" inverted stack-label="Stack Label" clearable />
         <q-chips-input :dark="dark" class="q-my-sm" v-model="chips" inverted stack-label="Stack Label" clearable suffix="SUF" prefix="PRE" />
         <q-chips-input :dark="dark" class="q-my-sm" v-model="chips" inverted color="secondary" stack-label="With placeholder" placeholder="Placeholder" clearable suffix="SUF" prefix="PRE" />
         <q-chips-input :dark="dark" class="q-my-sm" color="amber-2" v-model="chips" inverted-light stack-label="Stack Label" clearable suffix="SUF" prefix="PRE" />
         <q-chips-input :dark="dark" class="q-my-sm" color="amber-2" v-model="chips" inverted-light float-label="With placeholder" placeholder="Placeholder" clearable suffix="SUF" prefix="PRE" />
         <q-chips-input :dark="dark" class="q-my-sm" color="white" v-model="chips" inverted-light stack-label="Stack Label" clearable suffix="SUF" prefix="PRE" />
-        <q-chips-input :dark="dark" class="q-my-sm" inverted color="dark" chips-color="black" chips-bg-color="lime" v-model="chips" stack-label="Stack Label" clearable suffix="SUF" prefix="PRE" />
+        <q-chips-input :dark="dark" class="q-my-sm" inverted color="grey-10" v-model="chips" stack-label="Stack Label" clearable suffix="SUF" prefix="PRE" />
+        <q-chips-input :dark="dark" class="q-my-sm" inverted color="orange" v-model="chips" stack-label="Stack Label" clearable suffix="SUF" prefix="PRE" />
+        <q-chips-input :dark="dark" class="q-my-sm" color="orange" v-model="chips" stack-label="Stack Label" clearable suffix="SUF" prefix="PRE" />
       </div>
       <q-toggle v-model="dark" label="Dark" class="fixed-top-left bg-grey-5 q-pa-sm" style="top: 18px; left: 18px;" />
     </div>

dev/components/form/all2.vue

@@ -231,7 +231,9 @@ export default {
         attrs: {
           value: this.actualValue,
           placeholder: this.inputPlaceholder,
-          readonly: true
+          readonly: true,
+          disabled: this.disable,
+          tabindex: -1
         }
       }),
 

src/components/color/QColor.js

@@ -146,7 +146,7 @@ export default {
 
     __getPicker (h, modal) {
       return [
-        h(QFieldReset, [
+        h(QFieldReset, { staticClass: 'flex' }, [
           h(QDatetimePicker, {
             ref: 'target',
             staticClass: `no-border`,
@@ -246,7 +246,9 @@ export default {
         attrs: {
           value: this.actualValue,
           placeholder: this.inputPlaceholder,
-          readonly: true
+          readonly: true,
+          disabled: this.disable,
+          tabindex: -1
         }
       }),
 

src/components/datetime/QDatetime.js

@@ -57,6 +57,8 @@
       :value="actualValue"
       :placeholder="inputPlaceholder"
       readonly
+      :disabled="this.disable"
+      tabindex="-1"
     />
 
     <q-icon
@@ -76,7 +78,7 @@
       :anchor-click="false"
       class="column no-wrap"
       :class="dark ? 'bg-dark' : null"
-      @show="__onFocus"
+      @show="__onShow"
       @hide="__onClose"
     >
       <q-field-reset>
@@ -350,10 +352,16 @@ export default {
         return
       }
       this.focused = true
+      this.$emit('focus')
+    },
+    __onShow () {
+      if (this.disable) {
+        return
+      }
+      this.__onFocus()
       if (this.filter && this.autofocusFilter) {
         this.$refs.filter.focus()
       }
-      this.$emit('focus')
       const selected = this.$refs.popover.$el.querySelector(this.activeItemSelector)
       if (selected) {
         selected.scrollIntoView()
@@ -372,8 +380,8 @@ export default {
       }, 1)
     },
     __onClose () {
-      this.focused = false
       this.terms = ''
+      this.focused = false
       this.$emit('blur')
       this.$nextTick(() => {
         if (JSON.stringify(this.model) !== JSON.stringify(this.value)) {

src/components/select/QSelect.vue

@@ -31,6 +31,8 @@
         :class="alignClass"
         :value="label"
         readonly
+        :disabled="this.disable"
+        tabindex="-1"
       />
 
       <q-spinner

src/components/uploader/QUploader.vue

@@ -13,10 +13,6 @@
     display block
     background $backdrop-background
 
-.no-border
-  border 0 !important
-.no-outline
-  outline 0 !important
 .round-borders
   border-radius $generic-border-radius !important
 

src/css/core/helpers.styl

@@ -8,6 +8,8 @@
   border-radius 0 !important
 .no-box-shadow
   box-shadow none !important
+.no-outline
+  outline 0 !important
 
 .ellipsis
   text-overflow ellipsis