lint

src/components/palette_editor/palette_editor.vue

@@ -15,14 +15,14 @@
         class="btn button-default"
         @click="importPalette"
       >
-        <FAIcon icon="file-import"/>
+        <FAIcon icon="file-import" />
         {{ $t('settings.style.themes3.palette.import') }}
       </button>
       <button
         class="btn button-default"
         @click="exportPalette"
       >
-        <FAIcon icon="file-export"/>
+        <FAIcon icon="file-export" />
         {{ $t('settings.style.themes3.palette.export') }}
       </button>
     </div>

src/components/settings_modal/tabs/appearance_tab.vue

@@ -1,16 +1,19 @@
 <template>
-  <div class="appearance-tab" :label="$t('settings.general')">
+  <div
+    class="appearance-tab"
+    :label="$t('settings.general')"
+  >
     <div class="setting-item">
       <h2>{{ $t('settings.theme') }}</h2>
       <ul
-        class="theme-list"
         ref="themeList"
+        class="theme-list"
       >
         <button
           class="button-default theme-preview"
           data-theme-key="stock"
-          @click="resetTheming"
           :class="{ toggled: isStyleActive('stock') }"
+          @click="resetTheming"
         >
           <!-- eslint-disable vue/no-v-text-v-html-on-component -->
           <component
@@ -37,8 +40,8 @@
         </button>
         <button
           v-for="style in availableStyles"
-          :data-theme-key="style.key"
           :key="style.key"
+          :data-theme-key="style.key"
           class="button-default theme-preview"
           :class="{ toggled: isThemeActive(style.key) }"
           @click="setTheme(style.key)"
@@ -50,7 +53,7 @@
             v-html="previewTheme(style.key, style.data)"
           />
           <!-- eslint-enable vue/no-v-text-v-html-on-component -->
-          <preview :id="'theme-preview-' + style.key"/>
+          <preview :id="'theme-preview-' + style.key" />
           <h4 class="theme-name">
             {{ style.name }}
             <span class="alert neutral version">{{ style.version }}</span>
@@ -61,9 +64,9 @@
       <div class="palettes">
         <button
           v-for="p in availablePalettes"
+          :key="p.name"
           class="btn button-default palette-entry"
           :class="{ toggled: isPaletteActive(p.key) }"
-          :key="p.name"
           @click="() => setPalette(p.key)"
         >
           <label>
@@ -104,7 +107,7 @@
                 <code>px</code>
                 <code>rem</code>
               </i18n-t>
-              <br/>
+              <br>
               <i18n-t
                 scope="global"
                 keypath="settings.text_size_tip2"

src/components/settings_modal/tabs/style_tab/style_tab.vue

@@ -58,13 +58,19 @@
           {{ ' ' }}
         </label>
         <Select
-          v-model="editedPalette"
           id="palette-selector"
+          v-model="editedPalette"
         >
-          <option key="dark" value="dark">
+          <option
+            key="dark"
+            value="dark"
+          >
             {{ $t('settings.style.themes3.palette.dark') }}
           </option>
-          <option key="light" value="light">
+          <option
+            key="light"
+            value="light"
+          >
             {{ $t('settings.style.themes3.palette.light') }}
           </option>
         </Select>
@@ -78,8 +84,8 @@
           {{ ' ' }}
         </label>
         <Select
-          v-model="selectedComponentKey"
           id="component-selector"
+          v-model="selectedComponentKey"
         >
           <option
             v-for="key in componentKeys"
@@ -91,8 +97,8 @@
         </Select>
       </div>
       <div
-        class="variant-selector"
         v-if="selectedComponentVariantsAll.length > 1"
+        class="variant-selector"
       >
         <label for="variant-selector">
           {{ $t('settings.style.themes3.editor.variant_selector') }}
@@ -102,32 +108,32 @@
         >
           <option
             v-for="variant in selectedComponentVariantsAll"
-            :value="variant"
             :key="'component-variant-' + variant"
+            :value="variant"
           >
-            {{ fallbackI18n($t(getVariantPath(selectedComponentName, variant)), variant)  }}
+            {{ fallbackI18n($t(getVariantPath(selectedComponentName, variant)), variant) }}
           </option>
         </Select>
       </div>
       <div
-        class="state-selector"
         v-if="selectedComponentStates.length > 0"
+        class="state-selector"
       >
         <label>
           {{ $t('settings.style.themes3.editor.states_selector') }}
         </label>
         <ul
           class="state-selector-list"
-          >
+        >
           <li
             v-for="state in selectedStates"
             :key="'component-variant-' + state"
-            >
+          >
             <Checkbox
               :value="selectedStates.has(state)"
-                @update:modelValue="(v) => updateSelectedStates(state, v)"
+              @update:modelValue="(v) => updateSelectedStates(state, v)"
-              >
+            >
-              {{ fallbackI18n($t(getStatePath(selectedComponentName, state)), state)  }}
+              {{ fallbackI18n($t(getStatePath(selectedComponentName, state)), state) }}
             </Checkbox>
           </li>
         </ul>
@@ -141,10 +147,10 @@
         <!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
         <ComponentPreview
           class="component-preview"
-          :showText="componentHas('Text')"
+          :show-text="componentHas('Text')"
-          :shadowControl="isShadowTabOpen"
+          :shadow-control="isShadowTabOpen"
-          :previewClass="previewClass"
+          :preview-class="previewClass"
-          :previewStyle="editorHintStyle"
+          :preview-style="editorHintStyle"
           :disabled="!editedSubShadow"
           :shadow="editedSubShadow"
           @update:shadow="({ axis, value }) => updateSubShadow(axis, value)"
@@ -156,9 +162,9 @@
         :on-switch="onTabSwitch"
       >
         <div
+          key="main"
           class="editor-tab"
           :label="$t('settings.style.themes3.editor.main_tab')"
-          key="main"
         >
           <ColorInput
             v-model="editedBackgroundColor"
@@ -177,10 +183,10 @@
             <Checkbox v-model="isOpacityPresent" />
           </Tooltip>
           <ColorInput
+            v-if="componentHas('Text')"
             v-model="editedTextColor"
             :label="$t('settings.style.themes3.editor.text_color')"
             :disabled="!isTextColorPresent"
-            v-if="componentHas('Text')"
           />
           <Tooltip
             v-if="componentHas('Text')"
@@ -225,10 +231,10 @@
             <!-- spacer for missing checkbox -->
           </div>
           <ColorInput
+            v-if="componentHas('Link')"
             v-model="editedLinkColor"
             :label="$t('settings.style.themes3.editor.link_color')"
             :disabled="!isLinkColorPresent"
-            v-if="componentHas('Link')"
           />
           <Tooltip
             v-if="componentHas('Link')"
@@ -237,10 +243,10 @@
             <Checkbox v-model="isLinkColorPresent" />
           </Tooltip>
           <ColorInput
+            v-if="componentHas('Icon')"
             v-model="editedIconColor"
             :label="$t('settings.style.themes3.editor.icon_color')"
             :disabled="!isIconColorPresent"
-            v-if="componentHas('Icon')"
           />
           <Tooltip
             v-if="componentHas('Icon')"
@@ -250,13 +256,13 @@
           </Tooltip>
         </div>
         <div
+          key="shadow"
           class="editor-tab shadow-tab"
           :label="$t('settings.style.themes3.editor.shadows_tab')"
-          key="shadow"
         >
           <Checkbox
-            class="style-control"
             v-model="isShadowPresent"
+            class="style-control"
           >
             {{ $t('settings.style.themes3.editor.include_in_rule') }}
           </checkbox>