style(vue): switch to eslint rule strongly-recommended for vue comp…

…onents
spring-media · Jun 5, 2020 · 2088149 · 2088149
1 parent 049790b
commit 2088149
Show file tree

Hide file tree

Showing 16 changed files with 295 additions and 77 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,14 +1,14 @@
 module.exports = {
   parser: '@typescript-eslint/parser',
-  extends: ['plugin:prettier/recommended'],
+  extends: [],
   overrides: [
     {
       files: ['*.ts'],
-      extends: ['plugin:@typescript-eslint/recommended'],
+      extends: ['plugin:prettier/recommended', 'plugin:@typescript-eslint/recommended'],
     },
     {
       files: ['*.vue'],
-      extends: ['plugin:vue/essential', '@vue/typescript/recommended'],
+      extends: ['plugin:vue/strongly-recommended', '@vue/typescript/recommended'],
     },
   ],
   parserOptions: {

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/vue/components/ConsentWrapper/ConsentWrapper.vue b/src/vue/components/ConsentWrapper/ConsentWrapper.vue
@@ -2,18 +2,21 @@
   <vendor-mapping v-slot="{ getRelations }">
     <consented-data v-slot="{ customVendors, customPurposes }">
       <consent-management
-        :vendorId="vendorId"
-        :purposeIds="getRelations(vendorId)"
-        :customVendors="customVendors"
-        :customPurposes="customPurposes"
+        :vendor-id="vendorId"
+        :purpose-ids="getRelations(vendorId)"
+        :custom-vendors="customVendors"
+        :custom-purposes="customPurposes"
       >
         <template #onReject>
           <privacy-manager v-slot="{ loadPrivacyManagerModal }">
-            <slot name="disabledContent" v-bind="{ loadPrivacyManagerModal }"></slot>
+            <slot
+              name="disabledContent"
+              v-bind="{ loadPrivacyManagerModal }"
+            />
           </privacy-manager>
         </template>
         <template #onConsent>
-          <slot name="enabledContent"></slot>
+          <slot name="enabledContent" />
         </template>
       </consent-management>
     </consented-data>

diff --git a/src/vue/components/EmbedConsent/EmbedConsent.vue b/src/vue/components/EmbedConsent/EmbedConsent.vue
@@ -1,10 +1,10 @@
 <template>
-  <consent-wrapper :vendorId="vendorId">
+  <consent-wrapper :vendor-id="vendorId">
     <template #disabledContent>
-      <embed-placeholder :customConsents="customConsents"></embed-placeholder>
+      <embed-placeholder :custom-consents="customConsents" />
     </template>
     <template #enabledContent>
-      <embed-content :content="content"></embed-content>
+      <embed-content :content="content" />
     </template>
   </consent-wrapper>
 </template>

diff --git a/src/vue/components/EmbedFacebookConsent/EmbedFacebookConsent.vue b/src/vue/components/EmbedFacebookConsent/EmbedFacebookConsent.vue
@@ -1,10 +1,10 @@
 <template>
-  <consent-wrapper :vendorId="vendorId">
+  <consent-wrapper :vendor-id="vendorId">
     <template #disabledContent>
-      <embed-facebook-placeholder :privacyManagerId="privacyManagerId"></embed-facebook-placeholder>
+      <embed-facebook-placeholder :privacy-manager-id="privacyManagerId" />
     </template>
     <template #enabledContent>
-      <embed-content :content="content"></embed-content>
+      <embed-content :content="content" />
     </template>
   </consent-wrapper>
 </template>

diff --git a/src/vue/components/EmbedFacebookPlaceholder/EmbedFacebookPlaceholder.vue b/src/vue/components/EmbedFacebookPlaceholder/EmbedFacebookPlaceholder.vue
@@ -1,13 +1,50 @@
 <template>
-  <embed-social-networks-placeholder :privacyManagerId="privacyManagerId">
+  <embed-social-networks-placeholder :privacy-manager-id="privacyManagerId">
     <template #header>
-      <svg width="100%" height="84" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="16" cy="16" r="16" fill="#E9ECEF" />
-        <rect x="40" y="7" width="60" height="10" fill="#E9ECEF" />
-        <rect x="40" y="19" width="40" height="6" fill="#E9ECEF" />
-        <rect y="44" width="100%" height="8" fill="#E9ECEF" />
-        <rect y="60" width="100%" height="8" fill="#E9ECEF" />
-        <rect y="76" width="75%" height="8" fill="#E9ECEF" />
+      <svg
+        width="100%"
+        height="84"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="16"
+          cy="16"
+          r="16"
+          fill="#E9ECEF"
+        />
+        <rect
+          x="40"
+          y="7"
+          width="60"
+          height="10"
+          fill="#E9ECEF"
+        />
+        <rect
+          x="40"
+          y="19"
+          width="40"
+          height="6"
+          fill="#E9ECEF"
+        />
+        <rect
+          y="44"
+          width="100%"
+          height="8"
+          fill="#E9ECEF"
+        />
+        <rect
+          y="60"
+          width="100%"
+          height="8"
+          fill="#E9ECEF"
+        />
+        <rect
+          y="76"
+          width="75%"
+          height="8"
+          fill="#E9ECEF"
+        />
         <path
           style="transform: translateX(calc(100% - 20px));"
           d="M20 10.0611C20 4.50451 15.5229 0 10 0C4.47715 0 0 4.50451 0 10.0611C0 15.0828 3.65684 19.2452 8.4375 20V12.9694H5.89844V10.0611H8.4375V7.84452C8.4375 5.32296 9.93047 3.93012 12.2146 3.93012C13.3088 3.93012 14.4531 4.12663 14.4531 4.12663V6.60261H13.1922C11.95 6.60261 11.5625 7.37822 11.5625 8.17387V10.0611H14.3359L13.8926 12.9694H11.5625V20C16.3432 19.2452 20 15.0828 20 10.0611Z"

diff --git a/src/vue/components/EmbedInstagram/EmbedInstagram.vue b/src/vue/components/EmbedInstagram/EmbedInstagram.vue
@@ -1,5 +1,8 @@
 <template>
-  <embed-content :content="content" @scriptLoaded="scriptLoaded"></embed-content>
+  <embed-content
+    :content="content"
+    @scriptLoaded="scriptLoaded"
+  />
 </template>
 
 <script lang="ts">

diff --git a/src/vue/components/EmbedInstagramConsent/EmbedInstagramConsent.vue b/src/vue/components/EmbedInstagramConsent/EmbedInstagramConsent.vue
@@ -1,10 +1,10 @@
 <template>
-  <consent-wrapper :vendorId="vendorId">
+  <consent-wrapper :vendor-id="vendorId">
     <template #disabledContent>
-      <embed-instagram-placeholder :privacyManagerId="privacyManagerId"></embed-instagram-placeholder>
+      <embed-instagram-placeholder :privacy-manager-id="privacyManagerId" />
     </template>
     <template #enabledContent>
-      <embed-instagram :content="content"></embed-instagram>
+      <embed-instagram :content="content" />
     </template>
   </consent-wrapper>
 </template>

diff --git a/src/vue/components/EmbedInstagramPlaceholder/EmbedInstagramPlaceholder.vue b/src/vue/components/EmbedInstagramPlaceholder/EmbedInstagramPlaceholder.vue
@@ -1,10 +1,32 @@
 <template>
-  <embed-social-networks-placeholder :privacyManagerId="privacyManagerId">
+  <embed-social-networks-placeholder :privacy-manager-id="privacyManagerId">
     <template #header>
-      <svg width="100%" height="312" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="12" cy="12" r="12" fill="#E9ECEF" />
-        <rect x="32" y="7" width="60" height="10" fill="#E9ECEF" />
-        <rect y="32" width="100%" height="100%" fill="#E9ECEF" style="height: calc(100% - 32px);" />
+      <svg
+        width="100%"
+        height="312"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="12"
+          cy="12"
+          r="12"
+          fill="#E9ECEF"
+        />
+        <rect
+          x="32"
+          y="7"
+          width="60"
+          height="10"
+          fill="#E9ECEF"
+        />
+        <rect
+          y="32"
+          width="100%"
+          height="100%"
+          fill="#E9ECEF"
+          style="height: calc(100% - 32px);"
+        />
         <path
           style="transform: translate(calc(50% - 20px), 50%);"
           d="M11.6001 0H28.4001C34.8001 0 40.0001 5.2 40.0001 11.6V28.4C40.0001 31.4765 38.778 34.427 36.6026 36.6024C34.4271 38.7779 31.4766 40 28.4001 40H11.6001C5.20012 40 0.00012207 34.8 0.00012207 28.4V11.6C0.00012207 8.52349 1.22226 5.57298 3.39768 3.39756C5.57311 1.22214 8.52361 0 11.6001 0ZM11.2001 4C9.29056 4 7.45922 4.75857 6.10895 6.10883C4.75869 7.45909 4.00012 9.29044 4.00012 11.2V28.8C4.00012 32.78 7.22012 36 11.2001 36H28.8001C30.7097 36 32.541 35.2414 33.8913 33.8912C35.2416 32.5409 36.0001 30.7096 36.0001 28.8V11.2C36.0001 7.22 32.7801 4 28.8001 4H11.2001ZM30.5001 7C31.1632 7 31.799 7.26339 32.2679 7.73223C32.7367 8.20107 33.0001 8.83696 33.0001 9.5C33.0001 10.163 32.7367 10.7989 32.2679 11.2678C31.799 11.7366 31.1632 12 30.5001 12C29.8371 12 29.2012 11.7366 28.7324 11.2678C28.2635 10.7989 28.0001 10.163 28.0001 9.5C28.0001 8.83696 28.2635 8.20107 28.7324 7.73223C29.2012 7.26339 29.8371 7 30.5001 7ZM20.0001 10C22.6523 10 25.1958 11.0536 27.0712 12.9289C28.9466 14.8043 30.0001 17.3478 30.0001 20C30.0001 22.6522 28.9466 25.1957 27.0712 27.0711C25.1958 28.9464 22.6523 30 20.0001 30C17.348 30 14.8044 28.9464 12.9291 27.0711C11.0537 25.1957 10.0001 22.6522 10.0001 20C10.0001 17.3478 11.0537 14.8043 12.9291 12.9289C14.8044 11.0536 17.348 10 20.0001 10ZM20.0001 14C18.4088 14 16.8827 14.6321 15.7575 15.7574C14.6323 16.8826 14.0001 18.4087 14.0001 20C14.0001 21.5913 14.6323 23.1174 15.7575 24.2426C16.8827 25.3679 18.4088 26 20.0001 26C21.5914 26 23.1175 25.3679 24.2428 24.2426C25.368 23.1174 26.0001 21.5913 26.0001 20C26.0001 18.4087 25.368 16.8826 24.2428 15.7574C23.1175 14.6321 21.5914 14 20.0001 14Z"

diff --git a/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue b/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue
@@ -2,14 +2,59 @@
   <div class="embed-placeholder__container">
     <div class="embed-placeholder__header">
       <slot name="header">
-        <svg width="100%" height="265" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <rect x="38" y="62" width="81" height="8" fill="#E9ECEF" />
-          <rect x="38" y="88" width="81" height="8" fill="#E9ECEF" />
-          <rect x="38" y="75" width="61" height="8" fill="#E9ECEF" />
-          <rect x="38" y="173" width="81" height="8" fill="#E9ECEF" />
-          <rect x="38" y="199" width="81" height="8" fill="#E9ECEF" />
-          <rect x="38" y="186" width="61" height="8" fill="#E9ECEF" />
-          <path d="M289.782 110.125L313 78L343 78" stroke="#868E96" stroke-width="3" />
+        <svg
+          width="100%"
+          height="265"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect
+            x="38"
+            y="62"
+            width="81"
+            height="8"
+            fill="#E9ECEF"
+          />
+          <rect
+            x="38"
+            y="88"
+            width="81"
+            height="8"
+            fill="#E9ECEF"
+          />
+          <rect
+            x="38"
+            y="75"
+            width="61"
+            height="8"
+            fill="#E9ECEF"
+          />
+          <rect
+            x="38"
+            y="173"
+            width="81"
+            height="8"
+            fill="#E9ECEF"
+          />
+          <rect
+            x="38"
+            y="199"
+            width="81"
+            height="8"
+            fill="#E9ECEF"
+          />
+          <rect
+            x="38"
+            y="186"
+            width="61"
+            height="8"
+            fill="#E9ECEF"
+          />
+          <path
+            d="M289.782 110.125L313 78L343 78"
+            stroke="#868E96"
+            stroke-width="3"
+          />
           <path
             d="M287.287 170.75C292.847 161.12 296.117 150.339 296.845 139.242C297.572 128.145 295.737 117.03 291.481 106.756C287.226 96.4817 280.663 87.3243 272.303 79.9919C263.942 72.6596 254.006 67.3489 243.264 64.4707L239.511 78.4766C248.105 80.7792 256.053 85.0278 262.742 90.8936C269.431 96.7595 274.68 104.085 278.085 112.305C281.49 120.524 282.958 129.416 282.376 138.294C281.794 147.171 279.178 155.796 274.729 163.5L287.287 170.75Z"
             fill="#868E96"
@@ -22,9 +67,27 @@
             d="M152.396 142.061C153.976 157.128 160.236 171.321 170.296 182.647C180.357 193.974 193.713 201.864 208.489 205.209C223.264 208.555 238.716 207.188 252.675 201.301C266.633 195.414 278.397 185.302 286.314 172.386L273.951 164.808C267.618 175.142 258.207 183.231 247.04 187.941C235.873 192.651 223.511 193.744 211.691 191.067C199.871 188.391 189.186 182.079 181.137 173.018C173.088 163.957 168.08 152.602 166.816 140.549L152.396 142.061Z"
             fill="#CED4DA"
           />
-          <rect x="349" y="62" width="81" height="8" fill="#868E96" />
-          <rect x="349" y="88" width="81" height="8" fill="#868E96" />
-          <rect x="349" y="75" width="61" height="8" fill="#868E96" />
+          <rect
+            x="349"
+            y="62"
+            width="81"
+            height="8"
+            fill="#868E96"
+          />
+          <rect
+            x="349"
+            y="88"
+            width="81"
+            height="8"
+            fill="#868E96"
+          />
+          <rect
+            x="349"
+            y="75"
+            width="61"
+            height="8"
+            fill="#868E96"
+          />
         </svg>
       </slot>
     </div>
@@ -40,13 +103,18 @@
     </div>
     <slot name="button">
       <consent-actions v-slot="{ customConsent }">
-        <button class="embed-placeholder__button" @click.prevent="customConsent(customConsents)">
-          <slot name="buttonLabel">externen Inhalt aktivieren</slot>
+        <button
+          class="embed-placeholder__button"
+          @click.prevent="customConsent(customConsents)"
+        >
+          <slot name="buttonLabel">
+            externen Inhalt aktivieren
+          </slot>
         </button>
       </consent-actions>
     </slot>
     <div class="embed-placeholder__footer-text">
-      <slot name="footer"></slot>
+      <slot name="footer" />
     </div>
   </div>
 </template>