chore: upgrade eslint config and fix issues (#29)

example/.eslintrc.js

@@ -4,9 +4,6 @@ module.exports = {
     browser: true,
     node: true
   },
-  rules: {
-    'prettierx/options': ['error', { semi: false }]
-  },
-  extends: ['macopedia/vue']
+  extends: ['macopedia/nuxt']
   // add your custom rules here
 }

example/components/Logo.vue

@@ -1,3 +1,3 @@
 <template>
-  <img src="/logo.svg" alt="nuxt-typo3 logo" />
+  <img src="/logo.svg" alt="nuxt-typo3 logo">
 </template>

example/package.json

@@ -22,7 +22,7 @@
     "@nuxtjs/stylelint-module": "^3.1.0",
     "babel-eslint": "^10.0.1",
     "eslint": "^7.20.0",
-    "eslint-config-macopedia": "^0.2.0",
+    "eslint-config-macopedia": "^0.2.0-alpha.1",
     "eslint-plugin-nuxt": ">=0.4.2",
     "sass": "^1.42.1",
     "sass-loader": "10",

example/yarn.lock

@@ -4965,10 +4965,10 @@ eslint-config-airbnb-base@^14.2.1:
     object.assign "^4.1.2"
     object.entries "^1.1.2"
 
-eslint-config-macopedia@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-macopedia/-/eslint-config-macopedia-0.2.0.tgz#7ec68c8b677f55c41001c575702a1603924de193"
-  integrity sha512-Wa2gHBCbVwG6C2wCNm2/i70bnMXMmk7pAyB7ldCBAYOGxd4cFzu3QpwjKZCsF3X7lmSbXOjjmjLslRwetPe5qg==
+eslint-config-macopedia@^0.2.0-alpha.1:
+  version "0.2.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-macopedia/-/eslint-config-macopedia-0.2.0-alpha.1.tgz#3879d5631aaaa062d64df6b5c26d385563f70abb"
+  integrity sha512-azY25FN0OfbZArZ2xMYKGQD6HCQlvLqMd849ARwBsOzqQUpOYmd7X6Lj0+Ro70OqrkfWsgga3ZX0JzzZMBXbRQ==
   dependencies:
     "@nuxtjs/eslint-config" "^5.0.0"
     "@nuxtjs/eslint-config-typescript" "^5.0.0"

packages/nuxt-typo3-ce/package.json

@@ -34,7 +34,7 @@
     "babel-loader": "^8.1.0",
     "babel-plugin-transform-require-context": "^0.1.1",
     "eslint": "^7.10.0",
-    "eslint-config-macopedia": "^0.1.0",
+    "eslint-config-macopedia": "^0.2.0-alpha.1",
     "flush-promises": "^1.0.2",
     "fork-ts-checker-webpack-plugin": "^5.2.0",
     "nuxt-typo3": "^0.9.3",

packages/nuxt-typo3-ce/src/App.vue

@@ -14,10 +14,10 @@ export default {
 
 <style lang="scss" module>
 #app {
+  color: #2c3e50;
   font-family: Avenir, Helvetica, Arial, sans-serif;
+  text-align: center;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
 }
 </style>

packages/nuxt-typo3-ce/src/components/CeBullets/CeBullets.vue

@@ -36,7 +36,7 @@ export default defineComponent({
     bulletsType: {
       type: Number,
       default: 0
-    },
+    }
   },
   setup (props: CeSharedProps) {
     const sharedProps = getSharedProps(props)

packages/nuxt-typo3-ce/src/components/CeDynamic/CeDynamic.spec.js

@@ -6,7 +6,7 @@ import CeDynamic from './CeDynamic.vue'
 const CeTextMock = {
   name: 'CeText',
   props: ['id', 'header', 'bodytext'],
-  template: `<div class="ce-text-mock"><h1>{{header}}</h1>{{bodytext}}</div>`
+  template: '<div class="ce-text-mock"><h1>{{header}}</h1>{{bodytext}}</div>'
 }
 
 describe('CeDynamic', () => {

packages/nuxt-typo3-ce/src/components/CeDynamic/CeDynamic.vue

@@ -47,7 +47,7 @@ export default defineComponent({
         this.$root.$options.components &&
         !this.$root.$options.components[componentName]
       ) {
-        componentName = `CeDefault`
+        componentName = 'CeDefault'
       }
 
       return createElement(componentName, {

packages/nuxt-typo3-ce/src/components/CeRenderer/CeRenderer.data.ts

@@ -63,9 +63,9 @@ export const CeRendererMockData = {
             padding: 0
           },
           rows: {
-            '1': {
+            1: {
               columns: {
-                '1': {
+                1: {
                   publicUrl: 'https://image.jpg',
                   properties: {
                     title: null,

packages/nuxt-typo3-ce/src/components/CeRenderer/CeRenderer.spec.js

@@ -7,7 +7,7 @@ import CeDynamic from '../CeDynamic'
 // Mock CeDynamic
 const CeDynamicMock = {
   props: ['data', 'type', 'index'],
-  template: `<div class="ce-dnymaic">{{JSON.stringify($props)}}</div>`
+  template: '<div class="ce-dnymaic">{{JSON.stringify($props)}}</div>'
 }
 
 // Mock CeFrame
@@ -17,7 +17,7 @@ const CeFrameMock = {
 
 const CeDefault = {
   props: ['data', 'type', 'index'],
-  template: `<div class="ce-default">{{JSON.stringify($props)}}</div>`
+  template: '<div class="ce-default">{{JSON.stringify($props)}}</div>'
 }
 
 describe('CeRenderer with mocked components', () => {
@@ -29,7 +29,7 @@ describe('CeRenderer with mocked components', () => {
   const wrappedRenderer = {
     inheritAttrs: false,
     components: { CeRenderer },
-    template: `<div><CeRenderer v-bind="$attrs"/></div>`
+    template: '<div><CeRenderer v-bind="$attrs"/></div>'
   }
 
   const prepareFrame = {
@@ -83,7 +83,7 @@ describe('CeRenderer with true components', () => {
   const wrappedRenderer = {
     inheritAttrs: false,
     components: { CeRenderer },
-    template: `<div><CeRenderer v-bind="$attrs"/></div>`
+    template: '<div><CeRenderer v-bind="$attrs"/></div>'
   }
 
   const prepareFrame = {

packages/nuxt-typo3-ce/src/components/CeShortcut/CeShortcut.spec.js

@@ -6,7 +6,7 @@ import CeRenderer from '../CeRenderer'
 // Mock CeDynamic
 const CeDynamicMock = {
   props: ['data', 'type', 'index'],
-  template: `<div class="ce-dnymaic">{{JSON.stringify($props)}}</div>`
+  template: '<div class="ce-dnymaic">{{JSON.stringify($props)}}</div>'
 }
 
 // Mock CeFrame

packages/nuxt-typo3-ce/src/components/CeUploads/CeUploads.spec.js

@@ -4,11 +4,11 @@ import { mockData } from './CeUploads.data'
 import CeUploads from './CeUploads.vue'
 
 const CeHeaderMock = Vue.component('CeHeader', {
-  template: `<div> hello </div>`
+  template: '<div> hello </div>'
 })
 
 const NavLinkMock = Vue.component('NavLink', {
-  template: `<div> <slot/> </div>`
+  template: '<div> <slot/> </div>'
 })
 
 const CeMediaFileMock = Vue.component('CeMediaFile', {
@@ -18,7 +18,7 @@ const CeMediaFileMock = Vue.component('CeMediaFile', {
       required: true
     }
   },
-  template: `<img :src="file.publicUrl" />`
+  template: '<img :src="file.publicUrl" />'
 })
 
 describe('CeUploads', () => {

packages/nuxt-typo3-theme/package.json

@@ -59,7 +59,7 @@
     "babel-plugin-transform-require-context": "^0.1.1",
     "cross-env": "^7.0.3",
     "eslint": "^7.10.0",
-    "eslint-config-macopedia": "^0.1.0",
+    "eslint-config-macopedia": "^0.2.0-alpha.1",
     "eslint-plugin-vuejs-accessibility": "^0.6.1",
     "flush-promises": "^1.0.2",
     "fork-ts-checker-webpack-plugin": "^5.2.0",

packages/nuxt-typo3-theme/src/components/CeDiv/CeDiv.vue

@@ -32,10 +32,10 @@ $divider-color-layout-1: $palette-gallery;
 }
 
 .ce-div {
-  height: 1px;
   display: block;
-  border: none;
+  height: 1px;
   background: var(--color-divider);
+  border: none;
 
   &--layout-1 {
     background: var(--color-divider-layout-1);

packages/nuxt-typo3-theme/src/components/CeGallery/CeGallery.vue

@@ -167,8 +167,8 @@ export default CeGalleryTheme as typeof CeGallery & typeof CeGalleryTheme
     }
 
     figcaption {
-      font-weight: var(--font-weight-medium);
       margin-bottom: var(--space-3);
+      font-weight: var(--font-weight-medium);
       text-align: left;
     }
   }

packages/nuxt-typo3-theme/src/components/CeMenuPages/CeMenuPages.vue

@@ -29,29 +29,29 @@ $color-menu-pages: $palette-mercury;
 
 .ce-menu-pages {
   ul {
-    background: var(--color-menu-pages);
     font-size: var(--font-size-lg);
+    background: var(--color-menu-pages);
 
     @include media-query(md) {
       display: flex;
       flex-wrap: wrap;
     }
 
     li {
-      padding: var(--space-4) var(--space-4);
       position: relative;
+      padding: var(--space-4) var(--space-4);
 
       ul {
         top: 100%;
+        display: none;
         min-width: 100%;
-        border-top: 1px solid var(--color-bg-secondary);
         margin-top: var(--space-4);
         margin-bottom: -1.6rem;
-        display: none;
+        border-top: 1px solid var(--color-bg-secondary);
 
         @include media-query(md) {
-          margin-top: 0;
           position: absolute;
+          margin-top: 0;
         }
 
         li {
@@ -74,38 +74,38 @@ $color-menu-pages: $palette-mercury;
           margin-right: 1rem;
 
           &::after {
-            content: '';
             position: absolute;
             top: 50%;
-            transform: translateY(-50%);
             display: block;
-            background-size: cover;
             margin-top: 0.1rem;
+            background-size: cover;
+            transform: translateY(-50%);
+            content: '';
           }
         }
 
         &[target='_blank']::after {
-          background-image: url('../../assets/icons/externalLink.svg');
+          right: -1.8rem;
           width: 1rem;
           height: 1rem;
-          right: -1.8rem;
+          background-image: url('../../assets/icons/externalLink.svg');
         }
 
         &.has-children::after {
-          background-image: url('../../assets/icons/chevron.svg');
+          right: -2.5rem;
           width: 1.7rem;
           height: 1.1rem;
-          right: -2.5rem;
+          background-image: url('../../assets/icons/chevron.svg');
         }
       }
 
       &::before {
         position: static;
-        content: '\25CF';
+        margin-right: 1em;
+        color: currentColor;
         font-size: 0.5em;
         vertical-align: middle;
-        color: currentColor;
-        margin-right: 1em;
+        content: '\25CF';
       }
     }
   }

packages/nuxt-typo3-theme/src/components/CeText/CeText.data.ts

@@ -3,6 +3,6 @@ export const mockData = {
   subheader: 'Subheader',
   headerLayout: 3,
   bodytext: `<p>Lorem ipsum Unta Dolor sit amet. Sapiente minima veritatis consequuntur perspiciatis. Consectetur adipisicing elit. Sapiente minima veritatis consequuntur perspiciatis.</p>
-    <ul> 	<li>List Element 1</li> 	<li>List Element 1 	<ol> 		<li>List Element 1</li> 		<li>List Element 1</li> 		<li>List Element 1</li> 	</ol> 	</li> 	<li>List Element 1</li> 	<li>List Element 1</li> </ul>
+    <ul><li>List Element 1</li><li>List Element 1<ol> <li>List Element 1</li><li>List Element 1</li> <li>List Element 1</li> </ol> </li><li>List Element 1</li><li>List Element 1</li> </ul>
     `
 }

packages/nuxt-typo3-theme/src/components/CeUploads/CeUploads.spec.js

@@ -5,7 +5,7 @@ import { mockData } from './CeUploads.data'
 import CeUploads from './CeUploads.vue'
 Vue.use(VueCompositionApi)
 const CeHeaderMock = Vue.component('CeHeader', {
-  template: `<div> hello </div>`
+  template: '<div> hello </div>'
 })
 
 describe('CeUploads', () => {

packages/nuxt-typo3-theme/src/components/UiBreadcrumbsList/UiBreadcrumbsList.vue

@@ -38,9 +38,9 @@ export default defineComponent({
 
 <style lang="scss">
 .ui-breadcrumbs {
-  margin: var(--space-3) 0;
   display: flex;
   align-items: baseline;
+  margin: var(--space-3) 0;
 
   &__list {
     display: flex;

packages/nuxt-typo3-theme/src/components/UiButton/UiButton.vue

@@ -74,8 +74,8 @@ export default defineComponent({
     padding: var(--space-2);
 
     @include media-query(sm) {
-      padding: var(--space-2) var(--space-10);
       min-width: 28.4rem;
+      padding: var(--space-2) var(--space-10);
     }
 
     @include text(xl);

packages/nuxt-typo3-theme/src/components/UiErrorPage/UiErrorPage.vue

@@ -42,8 +42,8 @@ export default defineComponent({
 <style lang="scss">
 .error {
   display: flex;
-  align-items: center;
   flex-direction: column;
+  align-items: center;
 
   .error__logo {
     margin: 5rem 0;

packages/nuxt-typo3-theme/src/components/UiFilesList/UiFilesList.vue

@@ -57,13 +57,13 @@ export default defineComponent({
   list-style: none;
 
   &__file {
-    align-items: flex-start;
     display: flex;
+    align-items: flex-start;
 
     .file__image {
-      text-align: center;
       flex: 0 0 auto;
       margin: 0 var(--space-5) 0 0;
+      text-align: center;
 
       img {
         width: 3em;

packages/nuxt-typo3-theme/src/components/UiFrame/UiFrame.spec.js

@@ -15,7 +15,7 @@ describe('UiFrame', () => {
       CeDiv
     },
     slots: {
-      default: `<CeDiv />`
+      default: '<CeDiv />'
     }
   }
 
@@ -52,7 +52,7 @@ describe('UiFrame', () => {
         CeDiv
       },
       slots: {
-        default: `<CeDiv />`
+        default: '<CeDiv />'
       }
     })
 

packages/nuxt-typo3-theme/src/components/UiGrid/UiContainer/UiContainer.vue

@@ -31,10 +31,10 @@ export default UiContainer as typeof UiContainer
 
 .container {
   width: 100%;
-  margin-left: auto;
   margin-right: auto;
-  padding-left: #{math.div($grid-gutter-width, 2)};
+  margin-left: auto;
   padding-right: #{math.div($grid-gutter-width, 2)};
+  padding-left: #{math.div($grid-gutter-width, 2)};
 
   @include media-query(sm) {
     max-width: map.get($container-max-widths, sm);

packages/nuxt-typo3-theme/src/components/UiGrid/UiRow/UiRow.vue

@@ -32,14 +32,14 @@ export default UiRow as typeof UiRow
   display: flex;
   flex-wrap: wrap;
   height: 100%;
-  margin-left: #{- (math.div($grid-gutter-width, 2))};
   margin-right: #{- (math.div($grid-gutter-width, 2))};
+  margin-left: #{- (math.div($grid-gutter-width, 2))};
 
   &.no-gutters {
     > .col,
     > [class*='col-'] {
-      padding-left: 0 !important;
       padding-right: 0 !important;
+      padding-left: 0 !important;
     }
   }
 }