el-cms · mtancoigne · Sep 1, 2021 · Sep 5, 2021 · Sep 3, 2021 · Sep 3, 2021
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,14 +1,14 @@
 module.exports = {
-	root: true,
-	env: {
-		node: true
-	},
-	extends: ['plugin:vue/strongly-recommended', '@vue/prettier'],
-	rules: {
-		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-		'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-	},
-	parserOptions: {
-		parser: 'babel-eslint'
-	}
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: ['plugin:vue/strongly-recommended', '@vue/prettier'],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+  },
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
 }
diff --git a/.github/workflows/actions.yml b/.github/workflows/actions.yml
@@ -32,3 +32,5 @@ jobs:
       run: yarn build:lib
     - name: Build documentation
       run: yarn build
+    - name: Build examples
+      run: cd _examples/landingpage && yarn install && yarn build
diff --git a/.postcssrc.js b/.postcssrc.js
@@ -1,5 +1,5 @@
 module.exports = {
   plugins: {
-    autoprefixer: {}
-  }
-}
+    autoprefixer: {},
+  },
+}
diff --git a/_examples/landingpage/.eslintrc.js b/_examples/landingpage/.eslintrc.js
@@ -1,14 +1,14 @@
 module.exports = {
-	root: true,
-	env: {
-		node: true
-	},
-	extends: ['plugin:vue/strongly-recommended', '@vue/prettier'],
-	rules: {
-		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-		'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-	},
-	parserOptions: {
-		parser: 'babel-eslint'
-	}
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: ['plugin:vue/strongly-recommended', '@vue/prettier'],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+  },
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
 }
diff --git a/_examples/landingpage/babel.config.js b/_examples/landingpage/babel.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['@vue/app']
+  presets: ['@vue/cli-plugin-babel/preset'],
 }
diff --git a/_examples/landingpage/docs/css/chunk-vendors.1c6898f4.css b/_examples/landingpage/docs/css/chunk-vendors.1c6898f4.css
diff --git a/_examples/landingpage/docs/css/chunk-vendors.66dacd16.css b/_examples/landingpage/docs/css/chunk-vendors.66dacd16.css
diff --git a/_examples/landingpage/docs/index.html b/_examples/landingpage/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><title>vue-cli</title><link href=/css/chunk-vendors.66dacd16.css rel=preload as=style><link href=/js/app.3a037d62.js rel=preload as=script><link href=/js/chunk-vendors.b23d3adf.js rel=preload as=script><link href=/css/chunk-vendors.66dacd16.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-cli doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.b23d3adf.js></script><script src=/js/app.3a037d62.js></script></body></html>
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>vue-cli</title><link href="/css/chunk-vendors.1c6898f4.css" rel="preload" as="style"><link href="/js/app.d08db2fc.js" rel="preload" as="script"><link href="/js/chunk-vendors.4ca8084e.js" rel="preload" as="script"><link href="/css/chunk-vendors.1c6898f4.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but vue-cli doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.4ca8084e.js"></script><script src="/js/app.d08db2fc.js"></script></body></html>
diff --git a/_examples/landingpage/docs/js/app.3a037d62.js b/_examples/landingpage/docs/js/app.3a037d62.js
diff --git a/_examples/landingpage/docs/js/app.3a037d62.js.map b/_examples/landingpage/docs/js/app.3a037d62.js.map
diff --git a/_examples/landingpage/docs/js/app.d08db2fc.js b/_examples/landingpage/docs/js/app.d08db2fc.js
diff --git a/_examples/landingpage/docs/js/app.d08db2fc.js.map b/_examples/landingpage/docs/js/app.d08db2fc.js.map
diff --git a/_examples/landingpage/docs/js/chunk-vendors.4ca8084e.js b/_examples/landingpage/docs/js/chunk-vendors.4ca8084e.js
diff --git a/_examples/landingpage/docs/js/chunk-vendors.4ca8084e.js.map b/_examples/landingpage/docs/js/chunk-vendors.4ca8084e.js.map
diff --git a/_examples/landingpage/docs/js/chunk-vendors.b23d3adf.js b/_examples/landingpage/docs/js/chunk-vendors.b23d3adf.js
diff --git a/_examples/landingpage/docs/js/chunk-vendors.b23d3adf.js.map b/_examples/landingpage/docs/js/chunk-vendors.b23d3adf.js.map
diff --git a/_examples/landingpage/package.json b/_examples/landingpage/package.json
@@ -8,14 +8,20 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "core-js": "^3.6.5",
     "vue": "^2.5.17",
     "vue-cion-design-system": "file:../.."
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.1",
-    "@vue/cli-plugin-eslint": "^3.0.1",
-    "@vue/cli-service": "^3.0.1",
-    "@vue/eslint-config-prettier": "^3.0.1",
+    "@vue/cli-plugin-babel": "~4.5.13",
+    "@vue/cli-plugin-eslint": "~4.5.13",
+    "@vue/cli-service": "~4.5.13",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^6.2.2",
+    "prettier": "^2.2.1",
     "vue-template-compiler": "^2.5.17"
   }
 }
diff --git a/_examples/landingpage/postcss.config.js b/_examples/landingpage/postcss.config.js
@@ -1,5 +1,5 @@
 module.exports = {
   plugins: {
-    autoprefixer: {}
-  }
+    autoprefixer: {},
+  },
 }
diff --git a/_examples/landingpage/src/App.vue b/_examples/landingpage/src/App.vue
@@ -1,63 +1,47 @@
 <template>
   <div>
-    <ds-section
-      secondary
-      fullheight
-      centered>
+    <ds-section secondary fullheight centered>
       <ds-space>
-        <ds-logo inverse/>
+        <ds-logo inverse />
       </ds-space>
-      <ds-heading>Vue Design System<br>Boilerplate</ds-heading>
+      <ds-heading>Vue Design System<br />Boilerplate</ds-heading>
       <ds-space margin-bottom="xxx-large">
-        <ds-button
-          path="https://cion.visualjerk.de"
-          icon="desktop">Styleguide Demo</ds-button>&nbsp;
+        <ds-button path="https://cion.visualjerk.de" icon="desktop"
+          >Styleguide Demo</ds-button
+        >&nbsp;
         <ds-button
           path="https://github.com/visualjerk/vue-cion-design-system"
-          icon="github">GitHub</ds-button>
+          icon="github"
+          >GitHub</ds-button
+        >
       </ds-space>
       <ds-space>
         <ds-flex
           :gutter="{ base: 'base', lg: 'xx-large' }"
-          :width="{ base: '100%', md: 1 }">
+          :width="{ base: '100%', md: 1 }"
+        >
           <ds-flex-item>
-            <ds-card
-              icon="book"
-              primary
-              centered
-              hover>
-              <ds-heading
-                slot="header"
-                tag="h3">
-                Living<br>Styleguide
+            <ds-card icon="book" primary centered hover>
+              <ds-heading slot="header" tag="h3">
+                Living<br />Styleguide
               </ds-heading>
-              See the styleguide adapt to your design system as you move forward.
+              See the styleguide adapt to your design system as you move
+              forward.
             </ds-card>
           </ds-flex-item>
           <ds-flex-item>
-            <ds-card
-              icon="file-code"
-              primary
-              centered
-              hover>
-              <ds-heading
-                slot="header"
-                tag="h3">
-                Component<br>Documentation
+            <ds-card icon="file-code" primary centered hover>
+              <ds-heading slot="header" tag="h3">
+                Component<br />Documentation
               </ds-heading>
-              Autogenerated documentation for your components with integrated playground.
+              Autogenerated documentation for your components with integrated
+              playground.
             </ds-card>
           </ds-flex-item>
           <ds-flex-item>
-            <ds-card
-              icon="cubes"
-              primary
-              centered
-              hover>
-              <ds-heading
-                slot="header"
-                tag="h3">
-                Basic<br>Components
+            <ds-card icon="cubes" primary centered hover>
+              <ds-heading slot="header" tag="h3">
+                Basic<br />Components
               </ds-heading>
               Includes lots of basic components to help you move faster.
             </ds-card>
@@ -66,22 +50,23 @@
       </ds-space>
     </ds-section>
     <ds-section>
-      <ds-heading
-        tag="h2"
-        size="h1">First steps</ds-heading>
+      <ds-heading tag="h2" size="h1">First steps</ds-heading>
       <ds-space>
-        <ds-list
-          ordered>
+        <ds-list ordered>
           <ds-list-item>
-            Download the boilerplate<br>
-            <ds-code>git clone https://github.com/visualjerk/vue-cion-design-system.git your-system-name</ds-code>
+            Download the boilerplate<br />
+            <ds-code
+              >git clone
+              https://github.com/visualjerk/vue-cion-design-system.git
+              your-system-name</ds-code
+            >
           </ds-list-item>
           <ds-list-item>
-            Install the dependencies<br>
+            Install the dependencies<br />
             <ds-code>cd your-system-name && yarn install</ds-code>
           </ds-list-item>
           <ds-list-item>
-            Start development server<br>
+            Start development server<br />
             <ds-code>yarn dev</ds-code>
           </ds-list-item>
         </ds-list>
@@ -101,13 +86,13 @@ export default {
           children: [
             { name: 'Container' },
             { name: 'Page' },
-            { name: 'Page Title' }
-          ]
+            { name: 'Page Title' },
+          ],
         },
         { name: 'Typography' },
-        { name: 'Navigation' }
-      ]
+        { name: 'Navigation' },
+      ],
     }
-  }
+  },
 }
 </script>
diff --git a/_examples/landingpage/src/Application.vue b/_examples/landingpage/src/Application.vue
@@ -1,17 +1,19 @@
 <template>
   <ds-page ref="page">
     <template slot="brand">
-      <ds-logo/>
+      <ds-logo />
     </template>
     <ds-menu
       @navigate="$refs.page.closeDrawer()"
       slot="sidebar"
-      :routes="routes"/>
+      :routes="routes"
+    />
     <ds-menu
       @navigate="$refs.page.closeDrawer()"
       slot="drawer"
-      :routes="routes"/>
-    <ds-page-title heading="Example Application"/>
+      :routes="routes"
+    />
+    <ds-page-title heading="Example Application" />
     <ds-container>
       <ds-space margin-top="large">
         <ds-text size="x-large">
@@ -20,36 +22,28 @@
       </ds-space>
       <ds-space>
         <ds-heading tag="h2">Content</ds-heading>
-        <ds-flex
-          gutter="base"
-          :width="{ base: '100%', sm: 1 }">
+        <ds-flex gutter="base" :width="{ base: '100%', sm: 1 }">
           <ds-flex-item>
             <ds-card
               header="The header"
-              image="https://picsum.photos/400/300?image=1063">
+              image="https://picsum.photos/400/300?image=1063"
+            >
               Look ma! I'm in a card.
               <template slot="footer">
-                <ds-button
-                  icon="user"
-                  primary>User Settings</ds-button>
-                <ds-button
-                  icon="plus"
-                  ghost/>
+                <ds-button icon="user" primary>User Settings</ds-button>
+                <ds-button icon="plus" ghost />
               </template>
             </ds-card>
           </ds-flex-item>
           <ds-flex-item>
             <ds-card
               header="The header"
-              image="https://picsum.photos/400/300?image=260">
+              image="https://picsum.photos/400/300?image=260"
+            >
               Look ma! I'm in a card.
               <template slot="footer">
-                <ds-button
-                  icon="calendar"
-                  primary>Calendar</ds-button>
-                <ds-button
-                  icon="plus"
-                  ghost/>
+                <ds-button icon="calendar" primary>Calendar</ds-button>
+                <ds-button icon="plus" ghost />
               </template>
             </ds-card>
           </ds-flex-item>
@@ -70,13 +64,13 @@ export default {
           children: [
             { name: 'Container' },
             { name: 'Page' },
-            { name: 'Page Title' }
-          ]
+            { name: 'Page Title' },
+          ],
         },
         { name: 'Typography' },
-        { name: 'Navigation' }
-      ]
+        { name: 'Navigation' },
+      ],
     }
-  }
+  },
 }
 </script>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><title>vue-cli</title><link href=/css/chunk-vendors.66dacd16.css rel=preload as=style><link href=/js/app.3a037d62.js rel=preload as=script><link href=/js/chunk-vendors.b23d3adf.js rel=preload as=script><link href=/css/chunk-vendors.66dacd16.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-cli doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.b23d3adf.js></script><script src=/js/app.3a037d62.js></script></body></html>
		<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>vue-cli</title><link href="/css/chunk-vendors.1c6898f4.css" rel="preload" as="style"><link href="/js/app.d08db2fc.js" rel="preload" as="script"><link href="/js/chunk-vendors.4ca8084e.js" rel="preload" as="script"><link href="/css/chunk-vendors.1c6898f4.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but vue-cli doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.4ca8084e.js"></script><script src="/js/app.d08db2fc.js"></script></body></html>