Update ESLint rules & Fix linter errors after vue-eslint upgrade

See https://github.com/vuejs/eslint-plugin-vue/releases/tag/v9.0.0 for ESLint rule changes. Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
openhab · Mar 21, 2024 · 64bd43e · 64bd43e
1 parent 3e57f89
commit 64bd43e
Show file tree

Hide file tree

Showing 99 changed files with 1,082 additions and 829 deletions.
diff --git a/bundles/org.openhab.ui/web/.eslintrc.js b/bundles/org.openhab.ui/web/.eslintrc.js
@@ -76,6 +76,7 @@ module.exports = {
     'vue/html-self-closing': 'error',
     'vue/max-attributes-per-line': 'off',
     'vue/multiline-html-element-content-newline': 'error',
+    'vue/multi-word-component-names': 'off',
     'vue/mustache-interpolation-spacing': 'error',
     'vue/no-multi-spaces': 'error',
     'vue/no-v-html': 'off',

diff --git a/bundles/org.openhab.ui/web/src/components/addons/addon-card.vue b/bundles/org.openhab.ui/web/src/components/addons/addon-card.vue
@@ -7,19 +7,22 @@
       <div class="addon-card-title">
         <div v-if="showInstallActions" class="addon-card-title-after">
           <f7-preloader v-if="addon.pending" color="blue" />
-          <f7-button v-else-if="addon.installed" class="install-button prevent-active-state-propagation" text="Remove"
-                     color="red" round small @click="buttonClicked" />
-          <f7-button v-else class="install-button prevent-active-state-propagation"
-                     :text="installActionText || 'Install'" color="blue" round small @click="buttonClicked" />
+          <f7-button
+            v-else-if="addon.installed" class="install-button prevent-active-state-propagation" text="Remove"
+            color="red" round small @click="buttonClicked" />
+          <f7-button
+            v-else class="install-button prevent-active-state-propagation"
+            :text="installActionText || 'Install'" color="blue" round small @click="buttonClicked" />
         </div>
         <div class="addon-card-label">
           {{ addon.label }}
         </div>
         <div v-if="addon.verifiedAuthor" class="addon-card-subtitle">
           {{ addon.author }}
-          <f7-icon v-if="addon.verifiedAuthor" size="15"
-                   :color="$f7.data.themeOptions.dark === 'dark' ? 'white' : 'blue'" f7="checkmark_seal_fill"
-                   style="margin-top: -3px;" />
+          <f7-icon
+            v-if="addon.verifiedAuthor" size="15"
+            :color="$f7.data.themeOptions.dark === 'dark' ? 'white' : 'blue'" f7="checkmark_seal_fill"
+            style="margin-top: -3px;" />
         </div>
         <div v-else-if="addon.properties && addon.properties.views" class="addon-card-subtitle">
           <addon-stats-line :addon="addon" :iconSize="15" />

diff --git a/bundles/org.openhab.ui/web/src/components/addons/addon-info-table.vue b/bundles/org.openhab.ui/web/src/components/addons/addon-info-table.vue
@@ -1,8 +1,9 @@
 <template>
   <f7-list v-if="addon && information && information.length > 0" class="information-table">
-    <f7-list-item v-for="line in information" :key="line.id"
-                  :title="line.title" :after="line.value"
-                  :link="line.linkUrl" external no-chevron target="_blank">
+    <f7-list-item
+      v-for="line in information" :key="line.id"
+      :title="line.title" :after="line.value"
+      :link="line.linkUrl" external no-chevron target="_blank">
       <f7-icon slot="after" v-if="line.afterIcon" :f7="line.afterIcon" />
     </f7-list-item>
   </f7-list>

diff --git a/bundles/org.openhab.ui/web/src/components/addons/addon-logo.vue b/bundles/org.openhab.ui/web/src/components/addons/addon-logo.vue
@@ -1,10 +1,12 @@
 <template>
   <div>
     <f7-icon v-show="!logoLoaded" :size="size" color="gray" :f7="addonIcon" class="default-icon" style="padding-left: 0; opacity: 0.2; position: absolute" />
-    <img v-if="!svgLogoError" class="lazy logo" :style="imgStyle" ref="svgLogo"
-         :data-src="imageUrl('svg')">
-    <img v-else-if="!pngLogoError" class="logo" :style="imgStyle" ref="pngLogo"
-         :src="imageUrl('png')" @load="logoLoaded = true" @error="pngLogoError = true">
+    <img
+      v-if="!svgLogoError" class="lazy logo" :style="imgStyle" ref="svgLogo"
+      :data-src="imageUrl('svg')">
+    <img
+      v-else-if="!pngLogoError" class="logo" :style="imgStyle" ref="pngLogo"
+      :src="imageUrl('png')" @load="logoLoaded = true" @error="pngLogoError = true">
   </div>
 </template>
 

diff --git a/bundles/org.openhab.ui/web/src/components/app.vue b/bundles/org.openhab.ui/web/src/components/app.vue
@@ -23,90 +23,106 @@
                 :title="sitemap.label" view=".view-main" panel-close>
           <f7-icon slot="media" ios="f7:menu" aurora="f7:menu" md="material:list"></f7-icon>
         </f7-list-item> -->
-          <f7-list-item v-for="page in pages" :animate="false" :key="page.uid"
-                        :class="{ currentsection: currentUrl === '/page/' + page.uid || currentUrl.indexOf('/page/' + page.uid + '/') === 0 }"
-                        :link="'/page/' + page.uid"
-                        :title="page.config.label" view=".view-main" panel-close>
+          <f7-list-item
+            v-for="page in pages" :animate="false" :key="page.uid"
+            :class="{ currentsection: currentUrl === '/page/' + page.uid || currentUrl.indexOf('/page/' + page.uid + '/') === 0 }"
+            :link="'/page/' + page.uid"
+            :title="page.config.label" view=".view-main" panel-close>
             <oh-icon slot="media" :icon="pageIcon(page)" height="18" width="18" />
           </f7-list-item>
         </f7-list>
         <f7-block-title v-if="$store.getters.isAdmin" v-t="'sidebar.administration'" />
         <!-- Settings -->
         <f7-list class="admin-links" v-if="$store.getters.isAdmin">
-          <f7-list-item link="/settings/" :title="$t('sidebar.settings')" view=".view-main" panel-close :animate="false"
-                        :class="{ currentsection: currentUrl === '/settings/' || currentUrl.indexOf('/settings/services/') === 0 || currentUrl.indexOf('/settings/addons/') === 0 || currentUrl.indexOf('/settings/persistence/') === 0 }">
+          <f7-list-item
+            link="/settings/" :title="$t('sidebar.settings')" view=".view-main" panel-close :animate="false"
+            :class="{ currentsection: currentUrl === '/settings/' || currentUrl.indexOf('/settings/services/') === 0 || currentUrl.indexOf('/settings/addons/') === 0 || currentUrl.indexOf('/settings/persistence/') === 0 }">
             <f7-icon slot="media" ios="f7:gear_alt_fill" aurora="f7:gear_alt_fill" md="material:settings" color="gray" />
           </f7-list-item>
           <li v-if="showSettingsSubmenu">
             <ul class="menu-sublinks">
-              <f7-list-item v-if="$store.getters.apiEndpoint('things')" link="/settings/things/" title="Things" view=".view-main" panel-close :animate="false" no-chevron
-                            :class="{ currentsection: currentUrl.indexOf('/settings/things') === 0 }">
+              <f7-list-item
+                v-if="$store.getters.apiEndpoint('things')" link="/settings/things/" title="Things" view=".view-main" panel-close :animate="false" no-chevron
+                :class="{ currentsection: currentUrl.indexOf('/settings/things') === 0 }">
                 <f7-icon slot="media" f7="lightbulb" color="gray" />
               </f7-list-item>
-              <f7-list-item v-if="$store.getters.apiEndpoint('items')" link="/settings/model/" title="Model" view=".view-main" panel-close :animate="false" no-chevron
-                            :class="{ currentsection: currentUrl.indexOf('/settings/model') === 0 }">
+              <f7-list-item
+                v-if="$store.getters.apiEndpoint('items')" link="/settings/model/" title="Model" view=".view-main" panel-close :animate="false" no-chevron
+                :class="{ currentsection: currentUrl.indexOf('/settings/model') === 0 }">
                 <f7-icon slot="media" f7="list_bullet_indent" color="gray" />
               </f7-list-item>
-              <f7-list-item v-if="$store.getters.apiEndpoint('items')" link="/settings/items/" title="Items" view=".view-main" panel-close :animate="false" no-chevron
-                            :class="{ currentsection: currentUrl.indexOf('/settings/items') === 0 }">
+              <f7-list-item
+                v-if="$store.getters.apiEndpoint('items')" link="/settings/items/" title="Items" view=".view-main" panel-close :animate="false" no-chevron
+                :class="{ currentsection: currentUrl.indexOf('/settings/items') === 0 }">
                 <f7-icon slot="media" f7="square_on_circle" color="gray" />
               </f7-list-item>
-              <f7-list-item v-if="$store.getters.apiEndpoint('ui')" link="/settings/pages/" title="Pages" view=".view-main" panel-close :animate="false" no-chevron
-                            :class="{ currentsection: currentUrl.indexOf('/settings/pages') === 0 }">
+              <f7-list-item
+                v-if="$store.getters.apiEndpoint('ui')" link="/settings/pages/" title="Pages" view=".view-main" panel-close :animate="false" no-chevron
+                :class="{ currentsection: currentUrl.indexOf('/settings/pages') === 0 }">
                 <f7-icon slot="media" f7="tv" color="gray" />
               </f7-list-item>
-              <f7-list-item v-if="$store.getters.apiEndpoint('rules')" link="/settings/rules/" title="Rules" view=".view-main" panel-close :animate="false" no-chevron
-                            :class="{ currentsection: currentUrl.indexOf('/settings/rules') === 0 }">
+              <f7-list-item
+                v-if="$store.getters.apiEndpoint('rules')" link="/settings/rules/" title="Rules" view=".view-main" panel-close :animate="false" no-chevron
+                :class="{ currentsection: currentUrl.indexOf('/settings/rules') === 0 }">
                 <f7-icon slot="media" f7="wand_stars" color="gray" />
               </f7-list-item>
-              <f7-list-item v-if="$store.getters.apiEndpoint('rules')" link="/settings/scenes/" title="Scenes" view=".view-main" panel-close :animate="false" no-chevron
-                            :class="{ currentsection: currentUrl.indexOf('/settings/scenes') === 0 }">
+              <f7-list-item
+                v-if="$store.getters.apiEndpoint('rules')" link="/settings/scenes/" title="Scenes" view=".view-main" panel-close :animate="false" no-chevron
+                :class="{ currentsection: currentUrl.indexOf('/settings/scenes') === 0 }">
                 <f7-icon slot="media" f7="film" color="gray" />
               </f7-list-item>
-              <f7-list-item v-if="$store.getters.apiEndpoint('rules')" link="/settings/scripts/" title="Scripts" view=".view-main" panel-close :animate="false" no-chevron
-                            :class="{ currentsection: currentUrl.indexOf('/settings/scripts') === 0 }">
+              <f7-list-item
+                v-if="$store.getters.apiEndpoint('rules')" link="/settings/scripts/" title="Scripts" view=".view-main" panel-close :animate="false" no-chevron
+                :class="{ currentsection: currentUrl.indexOf('/settings/scripts') === 0 }">
                 <f7-icon slot="media" f7="doc_plaintext" color="gray" />
               </f7-list-item>
-              <f7-list-item v-if="$store.getters.apiEndpoint('rules')" link="/settings/schedule/" title="Schedule" view=".view-main" panel-close :animate="false" no-chevron
-                            :class="{ currentsection: currentUrl.indexOf('/settings/schedule') === 0 }">
+              <f7-list-item
+                v-if="$store.getters.apiEndpoint('rules')" link="/settings/schedule/" title="Schedule" view=".view-main" panel-close :animate="false" no-chevron
+                :class="{ currentsection: currentUrl.indexOf('/settings/schedule') === 0 }">
                 <f7-icon slot="media" f7="calendar" color="gray" />
               </f7-list-item>
             </ul>
           </li>
 
           <!-- Add-on Store -->
-          <f7-list-item link="/addons/" :title="$t('sidebar.addOnStore')" view=".view-main" panel-close :animate="false"
-                        :class="{ currentsection: currentUrl === '/addons/' }">
+          <f7-list-item
+            link="/addons/" :title="$t('sidebar.addOnStore')" view=".view-main" panel-close :animate="false"
+            :class="{ currentsection: currentUrl === '/addons/' }">
             <f7-icon slot="media" ios="f7:bag_fill" aurora="f7:bag_fill" md="material:shopping_bag" color="gray" />
           </f7-list-item>
           <li v-if="showAddonsSubmenu && $store.getters.apiEndpoint('addons')">
             <ul class="menu-sublinks">
-              <f7-list-item v-for="section in Object.keys(AddonTitles)" :key="section" :link="`/addons/${section}/`"
-                            :title="AddonTitles[section]" view=".view-main" panel-close :animate="false" no-chevron
-                            :class="{ currentsection: currentUrl.indexOf(`/addons/${section}`) === 0 }">
+              <f7-list-item
+                v-for="section in Object.keys(AddonTitles)" :key="section" :link="`/addons/${section}/`"
+                :title="AddonTitles[section]" view=".view-main" panel-close :animate="false" no-chevron
+                :class="{ currentsection: currentUrl.indexOf(`/addons/${section}`) === 0 }">
                 <f7-icon slot="media" :f7="AddonIcons[section]" color="gray" />
               </f7-list-item>
             </ul>
           </li>
 
           <!-- Developer Tools -->
-          <f7-list-item link="/developer/" :title="$t('sidebar.developerTools')" panel-close :animate="false"
-                        :class="{ currentsection: currentUrl.indexOf('/developer/') === 0 && currentUrl.indexOf('/developer/widgets') < 0 &&
-                          currentUrl.indexOf('/developer/blocks') < 0 && currentUrl.indexOf('/developer/api-explorer') < 0 }">
+          <f7-list-item
+            link="/developer/" :title="$t('sidebar.developerTools')" panel-close :animate="false"
+            :class="{ currentsection: currentUrl.indexOf('/developer/') === 0 && currentUrl.indexOf('/developer/widgets') < 0 &&
+              currentUrl.indexOf('/developer/blocks') < 0 && currentUrl.indexOf('/developer/api-explorer') < 0 }">
             <f7-icon slot="media" ios="f7:wrench_fill" aurora="f7:wrench_fill" md="material:construction" color="gray" />
           </f7-list-item>
           <li v-if="showDeveloperSubmenu">
             <ul class="menu-sublinks">
-              <f7-list-item v-if="$store.getters.apiEndpoint('ui')" link="/developer/widgets/" title="Widgets" view=".view-main" panel-close :animate="false" no-chevron
-                            :class="{ currentsection: currentUrl.indexOf('/developer/widgets') === 0 }">
+              <f7-list-item
+                v-if="$store.getters.apiEndpoint('ui')" link="/developer/widgets/" title="Widgets" view=".view-main" panel-close :animate="false" no-chevron
+                :class="{ currentsection: currentUrl.indexOf('/developer/widgets') === 0 }">
                 <f7-icon slot="media" f7="rectangle_on_rectangle_angled" color="gray" />
               </f7-list-item>
-              <f7-list-item v-if="$store.getters.apiEndpoint('ui')" link="/developer/blocks/" title="Block Libraries" view=".view-main" panel-close :animate="false" no-chevron
-                            :class="{ currentsection: currentUrl.indexOf('/developer/blocks') === 0 }">
+              <f7-list-item
+                v-if="$store.getters.apiEndpoint('ui')" link="/developer/blocks/" title="Block Libraries" view=".view-main" panel-close :animate="false" no-chevron
+                :class="{ currentsection: currentUrl.indexOf('/developer/blocks') === 0 }">
                 <f7-icon slot="media" f7="ticket" color="gray" />
               </f7-list-item>
-              <f7-list-item link="/developer/api-explorer" title="API Explorer" view=".view-main" panel-close :animate="false" no-chevron
-                            :class="{ currentsection: currentUrl.indexOf('/developer/api-explorer') === 0 }">
+              <f7-list-item
+                link="/developer/api-explorer" title="API Explorer" view=".view-main" panel-close :animate="false" no-chevron
+                :class="{ currentsection: currentUrl.indexOf('/developer/api-explorer') === 0 }">
                 <f7-icon slot="media" f7="burn" color="gray" />
               </f7-list-item>
               <!-- <f7-list-item link="" @click="$f7.emit('toggleDeveloperDock')" title="Dock" view=".view-main" panel-close :animate="false" no-chevron>
@@ -117,8 +133,9 @@
         </f7-list>
 
         <f7-list class="admin-links">
-          <f7-list-item link="/about/" :title="$t('sidebar.helpAbout')" view=".view-main" panel-close
-                        :class="{ currentsection: currentUrl.indexOf('/about') >= 0 }">
+          <f7-list-item
+            link="/about/" :title="$t('sidebar.helpAbout')" view=".view-main" panel-close
+            :class="{ currentsection: currentUrl.indexOf('/about') >= 0 }">
             <f7-icon slot="media" ios="f7:question_circle_fill" aurora="f7:question_circle_fill" md="material:help" color="gray" />
           </f7-list-item>
         </f7-list>
@@ -134,8 +151,9 @@
             <f7-button v-if="!loggedIn" large color="gray" icon-size="36" :tooltip="$t('sidebar.unlockAdmin')" icon-f7="lock_shield_fill" @click="authorize()" />
           </div>
           <f7-list v-if="$store.getters.user" media-list>
-            <f7-list-item :title="$store.getters.user.name" :footer="serverDisplayUrl" io="f7:person_alt_circle_fill" link="/profile/" no-chevron panel-close view=".view-main"
-                          :class="{ currentsection: currentUrl.indexOf('/profile') >= 0 }">
+            <f7-list-item
+              :title="$store.getters.user.name" :footer="serverDisplayUrl" io="f7:person_alt_circle_fill" link="/profile/" no-chevron panel-close view=".view-main"
+              :class="{ currentsection: currentUrl.indexOf('/profile') >= 0 }">
               <f7-icon slot="media" size="36" ios="f7:person_alt_circle_fill" aurora="f7:person_alt_circle_fill" md="f7:person_alt_circle_fill" color="gray" />
             </f7-list-item>
           </f7-list>

diff --git a/bundles/org.openhab.ui/web/src/components/cards/location-card.vue b/bundles/org.openhab.ui/web/src/components/cards/location-card.vue
@@ -9,14 +9,16 @@
       </div>
       <div class="location-stats margin-top-half" v-if="!config.disableBadges">
         <span v-for="badgeType in ['temperature', 'humidity', 'co2', 'luminance']" :key="badgeType">
-          <measurement-badge v-if="!config.badges || !config.badges.length || config.badges.indexOf(badgeType) >= 0"
-                             :store="context.store" :element="element" :type="badgeType" :invert-color="config.invertText" :badgeOverrides="badgeOverrides" />
+          <measurement-badge
+            v-if="!config.badges || !config.badges.length || config.badges.indexOf(badgeType) >= 0"
+            :store="context.store" :element="element" :type="badgeType" :invert-color="config.invertText" :badgeOverrides="badgeOverrides" />
         </span>
       </div>
       <div class="location-stats margin-top" :class="config.invertText ? 'invert-text' : ''" v-if="!config.disableBadges">
         <span v-for="badgeType in ['alarms', 'battery', 'lights', 'windows', 'doors', 'garagedoors', 'blinds', 'presence', 'lock', 'climate', 'screens', 'projectors', 'speakers']" :key="badgeType">
-          <status-badge v-if="!config.badges || !config.badges.length || config.badges.indexOf(badgeType) >= 0"
-                        :store="context.store" :element="element" :type="badgeType" :invert-color="config.invertText" :badgeOverrides="badgeOverrides" />
+          <status-badge
+            v-if="!config.badges || !config.badges.length || config.badges.indexOf(badgeType) >= 0"
+            :store="context.store" :element="element" :type="badgeType" :invert-color="config.invertText" :badgeOverrides="badgeOverrides" />
         </span>
       </div>
     </template>

diff --git a/bundles/org.openhab.ui/web/src/components/config/config-parameter.vue b/bundles/org.openhab.ui/web/src/components/config/config-parameter.vue
@@ -1,6 +1,7 @@
 <template>
-  <f7-list ref="parameter" class="config-parameter" :no-hairlines-md="configDescription.type !== 'BOOLEAN' && (!configDescription.options || !configDescription.options.length) && ['item'].indexOf(configDescription.context) < 0"
-           v-show="(configDescription.visible) ? configDescription.visible(value, configuration, configDescription, parameters) : true">
+  <f7-list
+    ref="parameter" class="config-parameter" :no-hairlines-md="configDescription.type !== 'BOOLEAN' && (!configDescription.options || !configDescription.options.length) && ['item'].indexOf(configDescription.context) < 0"
+    v-show="(configDescription.visible) ? configDescription.visible(value, configuration, configDescription, parameters) : true">
     <component v-if="!readOnly && !configDescription.readOnly" :is="control" :config-description="configDescription" :value="value" :parameters="parameters" :configuration="configuration" :title="configDescription.title" @input="updateValue" />
     <f7-list-item v-else-if="readOnly && (configDescription.context === 'password')" :is="passwords" :config-description="configDescription" :value="value" :parameters="parameters" :configuration="configuration" :title="configDescription.title" />
     <f7-list-item v-else :title="configDescription.label" :after="(value !== undefined && value !== null) ? value.toString() : 'N/A'" />