fix(ui): readonly not tabable

- pushed before adding to the previous commit

src/components/Controls/AutoComplete.vue

@@ -34,6 +34,7 @@
           @keydown.enter="selectHighlightedItem"
           @keydown.tab="toggleDropdown(false)"
           @keydown.esc="toggleDropdown(false)"
+          :tabindex="isReadOnly ? '-1' : '0'"
         />
         <svg
           v-if="!isReadOnly && !canLink"

src/components/Controls/Base.vue

@@ -20,6 +20,7 @@
         @blur="(e) => !isReadOnly && triggerChange(e.target.value)"
         @focus="(e) => !isReadOnly && $emit('focus', e)"
         @input="(e) => !isReadOnly && $emit('input', e)"
+        :tabindex="isReadOnly ? '-1' : '0'"
       />
     </div>
   </div>
@@ -131,11 +132,17 @@ export default {
       return '';
     },
     borderClasses() {
-      if (this.border) {
-        return 'bg-gray-50 border border-gray-200';
+      if (!this.border) {
+        return '';
       }
 
-      return '';
+      const border = 'border border-gray-200';
+      let background = 'bg-gray-25';
+      if (this.isReadOnly) {
+        background = 'bg-gray-50';
+      }
+
+      return border + ' ' + background;
     },
     inputPlaceholder() {
       return this.placeholder || this.df.placeholder || this.df.label;

src/components/Controls/Check.vue

@@ -62,6 +62,7 @@
           type="checkbox"
           :checked="value"
           :readonly="isReadOnly"
+          :tabindex="isReadOnly ? '-1' : '0'"
           @change="(e) => !isReadOnly && triggerChange(e.target.checked)"
           @focus="(e) => $emit('focus', e)"
         />

src/components/Controls/Currency.vue

@@ -12,6 +12,7 @@
       :value="value?.round()"
       :placeholder="inputPlaceholder"
       :readonly="isReadOnly"
+      :tabindex="isReadOnly ? '-1' : '0'"
       @blur="onBlur"
       @focus="onFocus"
       @input="(e) => $emit('input', e)"

src/components/Controls/Text.vue

@@ -12,6 +12,7 @@
         :placeholder="inputPlaceholder"
         style="vertical-align: top"
         :readonly="isReadOnly"
+        :tabindex="isReadOnly ? '-1' : '0'"
         @blur="(e) => triggerChange(e.target.value)"
         @focus="(e) => $emit('focus', e)"
         @input="(e) => $emit('input', e)"