lint

src/components/settings_modal/helpers/color_setting.vue

@@ -44,6 +44,7 @@
   </label>
 </template>
 
+<script src="./color_setting.js"></script>
 <style lang="scss">
 .ColorSetting {
   .color-setting-input {
@@ -51,4 +52,3 @@
   }
 }
 </style>
-<script src="./color_setting.js"></script>

src/components/settings_modal/helpers/draft_buttons.vue

@@ -2,8 +2,8 @@
 <!-- TODO make it reusable -->
 <template>
   <span
-    class="DraftButtons"
     v-if="$parent.isDirty || $parent.canHardReset"
+    class="DraftButtons"
   >
     <Popover
       v-if="$parent.isDirty"

src/components/settings_modal/helpers/list_setting.vue

@@ -23,7 +23,10 @@
       {{ backendDescriptionDescription + ' ' }}
     </p>
     <ul class="setting-list">
-      <li v-for="item in builtinEntries">
+      <li
+        v-for="(item, i) in builtinEntries"
+        :key="i"
+      >
         <Checkbox
           :disabled="shouldBeDisabled"
           :model-value="optionPresent(item.value)"
@@ -32,7 +35,10 @@
           {{ item.label }}
         </Checkbox>
       </li>
-      <li v-for="(item, index) in extraEntries">
+      <li
+        v-for="(item, index) in extraEntries"
+        :key="index"
+      >
         <div class="btn-group">
           <input
             class="input string-input"
@@ -51,10 +57,10 @@
       <li v-if="showNew">
         <div class="btn-group">
           <input
+            v-model="newValue"
             class="input string-input"
             :class="{ disabled: shouldBeDisabled }"
             :disabled="shouldBeDisabled"
-            v-model="newValue"
           >
           <button
             class="button-default"
@@ -74,6 +80,7 @@
   </div>
 </template>
 
+<script src="./list_setting.js"></script>
 <style lang="scss">
 .ListSetting {
   .btn-group {
@@ -81,4 +88,3 @@
   }
 }
 </style>
-<script src="./list_setting.js"></script>

src/components/settings_modal/helpers/list_tuple_setting.vue

@@ -23,7 +23,10 @@
       {{ backendDescriptionDescription + ' ' }}
     </p>
     <ul class="setting-list">
-      <li v-for="(item, index) in visibleState">
+      <li
+        v-for="(item, index) in visibleState"
+        :key="index"
+      >
         <div class="btn-group">
           <input
             class="input string-input"
@@ -48,18 +51,18 @@
       <li>
         <div class="btn-group">
           <input
+            v-model="newValue[0]"
             class="input string-input"
             :class="{ disabled: shouldBeDisabled }"
             :disabled="shouldBeDisabled"
             :placeholder="backendDescriptionSuggestions[0][0]"
-            v-model="newValue[0]"
           >
           <input
+            v-model="newValue[1]"
             class="input string-input"
             :class="{ disabled: shouldBeDisabled }"
             :disabled="shouldBeDisabled"
             :placeholder="backendDescriptionSuggestions[0][1]"
-            v-model="newValue[1]"
           >
           <button
             class="button-default"
@@ -79,6 +82,7 @@
   </div>
 </template>
 
+<script src="./list_tuple_setting.js"></script>
 <style lang="scss">
 .ListTupleSetting {
   .btn-group {
@@ -107,4 +111,3 @@
   }
 }
 </style>
-<script src="./list_tuple_setting.js"></script>

src/components/settings_modal/helpers/map_setting.vue

@@ -23,7 +23,10 @@
       {{ backendDescriptionDescription + ' ' }}
     </p>
     <ul class="setting-list">
-      <li v-for="item in displayState">
+      <li
+        v-for="(item, i) in displayState"
+        :key="i"
+      >
         <div class="btn-group">
           <input
             class="input string-input"
@@ -48,18 +51,18 @@
       <li v-if="allowNew">
         <div class="btn-group">
           <input
+            v-model="newValue[0]"
             class="input string-input"
             :class="{ disabled: shouldBeDisabled }"
             :disabled="shouldBeDisabled"
             :placeholder="backendDescriptionSuggestions[0][0]"
-            v-model="newValue[0]"
           >
           <input
+            v-model="newValue[1]"
             class="input string-input"
             :class="{ disabled: shouldBeDisabled }"
             :disabled="shouldBeDisabled"
             :placeholder="backendDescriptionSuggestions[0][1]"
-            v-model="newValue[1]"
           >
           <button
             class="button-default"
@@ -79,6 +82,7 @@
   </div>
 </template>
 
+<script src="./map_setting.js"></script>
 <style lang="scss">
 .ListSetting {
   .btn-group {
@@ -106,4 +110,3 @@
   }
 }
 </style>
-<script src="./map_setting.js"></script>

src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue

@@ -23,7 +23,10 @@
       {{ backendDescriptionDescription + ' ' }}
     </p>
     <ul class="setting-list">
-      <li v-for="(item, index) in visibleState">
+      <li
+        v-for="(item, index) in visibleState"
+        :key="index"
+      >
         <div>
           <dl>
             <dt><code>purpose</code></dt>
@@ -90,6 +93,7 @@
   </div>
 </template>
 
+<script src="./pwa_manifest_icons_setting.js"></script>
 <style lang="scss">
 .PWAManifestIconsSetting {
   display: inline-block;
@@ -132,4 +136,3 @@
   }
 }
 </style>
-<script src="./pwa_manifest_icons_setting.js"></script>