v2.0.0

src/renderer/components/base/Input.vue

@@ -1,15 +1,16 @@
 <template>
-<input
-  :class="$style.input"
-  ref="dom_input"
-  :type="type"
-  :placeholder="placeholder"
-  :value="modelValue"
-  :disabled="disabled"
-  @input="handleInput"
-  @change="$emit('change', $event.target.value.trim())"
-  @keyup.enter="$emit('submit', $event.target.value.trim())"
-  />
+  <input
+    ref="dom_input"
+    :class="$style.input"
+    :type="type"
+    :placeholder="placeholder"
+    :value="modelValue"
+    :disabled="disabled"
+    tabindex="0"
+    @input="handleInput"
+    @change="$emit('change', $event.target.value.trim())"
+    @keyup.enter="$emit('submit', $event.target.value.trim())"
+  >
 </template>
 
 <script>
@@ -55,10 +56,10 @@ export default {
   border: none;
   border-radius: @form-radius;
   padding: 7px 8px;
-  color: @color-btn;
+  color: var(--color-button-font);
   outline: none;
   transition: background-color 0.2s ease;
-  background-color: @color-btn-background;
+  background-color: var(--color-primary-background);
   font-size: 13.3px;
 
   &::-webkit-outer-spin-button,
@@ -72,10 +73,10 @@ export default {
   }
 
   &:hover, &:focus {
-    background-color: @color-theme_2-hover;
+    background-color: var(--color-primary-background-hover);
   }
   &:active {
-    background-color: @color-theme_2-active;
+    background-color: var(--color-primary-background-active);
   }
 }
 
@@ -84,19 +85,4 @@ export default {
   font-size: 12px;
 }
 
-each(@themes, {
-  :global(#root.@{value}) {
-    .input {
-      color: ~'@{color-@{value}-btn}';
-      background-color: ~'@{color-@{value}-btn-background}';
-      &:hover, &:focus {
-        background-color: ~'@{color-@{value}-theme_2-hover}';
-      }
-      &:active {
-        background-color: ~'@{color-@{value}-theme_2-active}';
-      }
-    }
-  }
-})
-
 </style>