From 69d46b0c8a44bcfeb8d5fa45b6b21139ce51ad09 Mon Sep 17 00:00:00 2001
From: Soitora <simon.mattila@protonmail.com>
Date: Sun, 23 Aug 2020 20:02:35 +0200
Subject: [PATCH] Add Element UI (#323)

---
 package-lock.json                 |  61 ++++++++--
 package.json                      |   2 +
 src/.vuepress/config.js           |   1 +
 src/.vuepress/config/plugins.js   |   1 +
 src/.vuepress/config/sideBar.js   |  10 ++
 src/.vuepress/enhanceApp.js       |   2 +
 src/.vuepress/styles/index.styl   |  33 ++++++
 src/.vuepress/styles/palette.styl |   6 +-
 src/sandbox/README.md             |  13 ++
 src/sandbox/element-ui.md         | 189 ++++++++++++++++++++++++++++++
 10 files changed, 309 insertions(+), 9 deletions(-)
 create mode 100644 src/sandbox/README.md
 create mode 100644 src/sandbox/element-ui.md

diff --git a/package-lock.json b/package-lock.json
index a8f7c294..49ab8658 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3664,6 +3664,14 @@
 			"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
 			"dev": true
 		},
+		"async-validator": {
+			"version": "1.8.5",
+			"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
+			"integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+			"requires": {
+				"babel-runtime": "6.x"
+			}
+		},
 		"asynckit": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -3743,6 +3751,11 @@
 				"babylon": "^6.18.0"
 			}
 		},
+		"babel-helper-vue-jsx-merge-props": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+			"integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+		},
 		"babel-loader": {
 			"version": "8.1.0",
 			"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.1.0.tgz",
@@ -3804,7 +3817,6 @@
 			"version": "6.26.0",
 			"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
 			"integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-			"dev": true,
 			"requires": {
 				"core-js": "^2.4.0",
 				"regenerator-runtime": "^0.11.0"
@@ -3813,8 +3825,7 @@
 				"regenerator-runtime": {
 					"version": "0.11.1",
 					"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-					"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
-					"dev": true
+					"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
 				}
 			}
 		},
@@ -5131,8 +5142,7 @@
 		"core-js": {
 			"version": "2.6.11",
 			"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
-			"integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==",
-			"dev": true
+			"integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
 		},
 		"core-js-compat": {
 			"version": "3.6.5",
@@ -5638,8 +5648,7 @@
 		"deepmerge": {
 			"version": "1.5.2",
 			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
-			"integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
-			"dev": true
+			"integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
 		},
 		"default-gateway": {
 			"version": "4.2.0",
@@ -6025,6 +6034,19 @@
 			"integrity": "sha512-D4/3l5DpciddD92IDRtpLearQSGzly8FwBJv+nITvLH8YJrFabpDFe4yuiOJh2MS4/EsXqyQTXyw1toeYPtshQ==",
 			"dev": true
 		},
+		"element-ui": {
+			"version": "2.13.2",
+			"resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.13.2.tgz",
+			"integrity": "sha512-r761DRPssMPKDiJZWFlG+4e4vr0cRG/atKr3Eqr8Xi0tQMNbtmYU1QXvFnKiFPFFGkgJ6zS6ASkG+sellcoHlQ==",
+			"requires": {
+				"async-validator": "~1.8.1",
+				"babel-helper-vue-jsx-merge-props": "^2.0.0",
+				"deepmerge": "^1.2.0",
+				"normalize-wheel": "^1.0.1",
+				"resize-observer-polyfill": "^1.5.0",
+				"throttle-debounce": "^1.0.1"
+			}
+		},
 		"elliptic": {
 			"version": "6.5.3",
 			"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
@@ -10012,6 +10034,11 @@
 				"sort-keys": "^2.0.0"
 			}
 		},
+		"normalize-wheel": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+			"integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+		},
 		"npm-run-path": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -11839,6 +11866,11 @@
 			"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
 			"dev": true
 		},
+		"resize-observer-polyfill": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+			"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+		},
 		"resolve": {
 			"version": "1.17.0",
 			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
@@ -13216,6 +13248,11 @@
 			"integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
 			"dev": true
 		},
+		"throttle-debounce": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+			"integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
+		},
 		"through": {
 			"version": "2.3.8",
 			"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -14298,6 +14335,16 @@
 				"markdown-it-container": "^2.0.0"
 			}
 		},
+		"vuepress-plugin-element-ui": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/vuepress-plugin-element-ui/-/vuepress-plugin-element-ui-1.1.0.tgz",
+			"integrity": "sha512-HUtB9SNmXaY8vQCZWCLUZxtRkvh+Ks+mRnUqEVsM4AJEQD6yCNN3osdKoO+zfyWdpq7Sei+tDaxlM0NOHiIbRQ==",
+			"dev": true,
+			"requires": {
+				"element-ui": "^2.13.0",
+				"markdown-it-container": "^2.0.0"
+			}
+		},
 		"vuepress-plugin-robots": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/vuepress-plugin-robots/-/vuepress-plugin-robots-1.0.1.tgz",
diff --git a/package.json b/package.json
index d9dbf0a4..5e7752d5 100644
--- a/package.json
+++ b/package.json
@@ -30,10 +30,12 @@
 		"vuepress": "^1.5.3",
 		"vuepress-plugin-clean-urls": "^1.1.1",
 		"vuepress-plugin-container": "^2.1.4",
+		"vuepress-plugin-element-ui": "^1.1.0",
 		"vuepress-plugin-zooming": "^1.1.7"
 	},
 	"dependencies": {
 		"axios": "^0.19.2",
+		"element-ui": "^2.13.2",
 		"iso-639-1": "^2.1.4",
 		"lodash.groupby": "^4.6.0",
 		"lodash.sortby": "^4.7.0",
diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index a93ff3bf..4f780e04 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -43,6 +43,7 @@ module.exports = {
 			"/help/contribution": sideBarConfig.contribution,
 			"/extensions": sideBarConfig.extensions,
 			"/forks": sideBarConfig.forks,
+			"/sandbox": sideBarConfig.sandbox,
 		},
 	},
 	plugins: pluginsConfig,
diff --git a/src/.vuepress/config/plugins.js b/src/.vuepress/config/plugins.js
index 35c97f2c..fe07f5aa 100644
--- a/src/.vuepress/config/plugins.js
+++ b/src/.vuepress/config/plugins.js
@@ -1,5 +1,6 @@
 module.exports = [
 	["@vuepress/back-to-top"],
+	["element-ui"],
 	[
 		"vuepress-plugin-zooming",
 		{
diff --git a/src/.vuepress/config/sideBar.js b/src/.vuepress/config/sideBar.js
index 18cce308..a14e21e4 100644
--- a/src/.vuepress/config/sideBar.js
+++ b/src/.vuepress/config/sideBar.js
@@ -146,4 +146,14 @@ module.exports = {
 			path: "/extensions/",
 		},
 	],
+	sandbox: [
+		"/",
+		{
+			title: "Sandbox",
+			path: "/sandbox/",
+			collapsable: false,
+			sidebarDepth: 2,
+			children: ["/sandbox/element-ui"],
+		},
+	],
 };
diff --git a/src/.vuepress/enhanceApp.js b/src/.vuepress/enhanceApp.js
index 76419e66..f198cfcd 100644
--- a/src/.vuepress/enhanceApp.js
+++ b/src/.vuepress/enhanceApp.js
@@ -6,6 +6,7 @@ import "vue-material-design-icons/styles.css";
 import { VueAgile } from "vue-agile";
 import VueSweetalert2 from "vue-sweetalert2";
 import VueMoment from "vue-moment";
+import Element from "element-ui";
 
 import store from "./store";
 
@@ -19,5 +20,6 @@ export default ({
 	Vue.component("Agile", VueAgile);
 	Vue.use(VueSweetalert2);
 	Vue.use(VueMoment);
+	Vue.use(Element);
 	Vue.mixin({ store });
 };
diff --git a/src/.vuepress/styles/index.styl b/src/.vuepress/styles/index.styl
index 8700f670..028e2364 100644
--- a/src/.vuepress/styles/index.styl
+++ b/src/.vuepress/styles/index.styl
@@ -177,3 +177,36 @@ font-feature-settings()
 // Hotfix Mobile Dropdown
 .sidebar .dropdown-wrapper .dropdown-title
 	pointer-events auto
+
+// Fix weird header spacing
+.theme-default-content:not(.custom) >
+	h2,
+	h3
+		margin-bottom .2rem !important
+
+.el-collapse,
+.el-tabs,
+.el-alert,
+.el-button,
+.el-tag
+	margin-top 0.8rem !important
+
+// Fix Element-UI styling
+.el-divider__text,
+.el-step__icon
+	background-color $backgroundColor !important
+
+.el-collapse-item__header
+	background-color transparent !important
+	border-bottom 1px solid $borderColor
+	padding-left 10px
+	&.is-active
+		color $elementAccentColor
+	&:not(.is-active):hover
+		color $elementAccentColor
+
+.el-collapse-item__wrap
+	background-color transparent !important
+
+.el-collapse-item__content
+	padding-left 10px
diff --git a/src/.vuepress/styles/palette.styl b/src/.vuepress/styles/palette.styl
index a01b5ba7..83175368 100644
--- a/src/.vuepress/styles/palette.styl
+++ b/src/.vuepress/styles/palette.styl
@@ -2,7 +2,6 @@
 $accentColor = #2E84BF
 $accentColorSecondary = #476582
 $textColor = #2c3e50
-$textColorLight = #4E6E8E
 $borderColor = #eaecef
 $codeBgColor = #282c34
 $arrowBgColor = #ccc
@@ -11,6 +10,7 @@ $badgeWarningColor = darken(#ffe564, 35%)
 $badgeErrorColor = #DA5961
 $badgeVersionColor = #000000
 $containerBackgroundColor = #f0f4f8
+$backgroundColor = #FDFDFD
 // Layout
 $navbarHeight = 3.6rem
 $sidebarWidth = 20rem
@@ -35,4 +35,6 @@ $syAccentColor = #BE0F6E
 // Links
 $discordAccentColor = #7289DA
 $redditAccentColor = #FF5700
-$githubAccentColor = #333333
\ No newline at end of file
+$githubAccentColor = #333333
+// Element-UI
+$elementAccentColor = #409EFF
diff --git a/src/sandbox/README.md b/src/sandbox/README.md
new file mode 100644
index 00000000..cdfea8a9
--- /dev/null
+++ b/src/sandbox/README.md
@@ -0,0 +1,13 @@
+---
+title: Sandbox
+description: Sandbox playground for demonstrating and documenting how different website functions work for easier integration by contributors.
+lang: en-US
+sidebar: false
+sitemap:
+  exclude: true
+---
+
+# Sandbox
+Sandbox playground for demonstrating and documenting how different website functions work for easier integration by contributors.
+
+- [Element-UI](element-ui.md)
diff --git a/src/sandbox/element-ui.md b/src/sandbox/element-ui.md
new file mode 100644
index 00000000..c77e6de4
--- /dev/null
+++ b/src/sandbox/element-ui.md
@@ -0,0 +1,189 @@
+---
+title: Element-UI
+description: Demonstrations of different Element-UI features.
+lang: en-US
+sitemap:
+  exclude: true
+---
+
+# Element-UI
+View more by pressing the headers for the specified item.
+
+## [Button](https://element.eleme.io/#/en-US/component/button)
+<el-row>
+  <el-button plain>Plain</el-button>
+  <el-button type="primary" plain>Primary</el-button>
+  <el-button type="success" plain>Success</el-button>
+  <el-button type="info" plain>Info</el-button>
+  <el-button type="warning" plain>Warning</el-button>
+  <el-button type="danger" plain>Danger</el-button>
+</el-row>
+
+```html
+<el-row>
+  <el-button plain>Plain</el-button>
+  <el-button type="primary" plain>Primary</el-button>
+  <el-button type="success" plain>Success</el-button>
+  <el-button type="info" plain>Info</el-button>
+  <el-button type="warning" plain>Warning</el-button>
+  <el-button type="danger" plain>Danger</el-button>
+</el-row>
+```
+
+## [Link](https://element.eleme.io/#/en-US/component/link)
+<div>
+  <el-link href="/sandbox/" target="_blank">default</el-link>
+  <el-link href="/download/" type="primary">primary</el-link>
+  <el-link type="success">success</el-link>
+  <el-link type="warning">warning</el-link>
+  <el-link type="danger">danger</el-link>
+  <el-link type="info">info</el-link>
+</div>
+
+```html
+<div>
+  <el-link href="/sandbox/" target="_blank">default</el-link>
+  <el-link href="/download/" type="primary">primary</el-link>
+  <el-link type="success">success</el-link>
+  <el-link type="warning">warning</el-link>
+  <el-link type="danger">danger</el-link>
+  <el-link type="info">info</el-link>
+</div>
+```
+
+## [Tag](https://element.eleme.io/#/en-US/component/tag)
+<el-tag>Neutral</el-tag>
+<el-tag type="success">Success</el-tag>
+<el-tag type="info">Info</el-tag>
+<el-tag type="warning">Warning</el-tag>
+<el-tag type="danger">Danger</el-tag>
+
+```html
+<el-tag>Neutral</el-tag>
+<el-tag type="success">Success</el-tag>
+<el-tag type="info">Info</el-tag>
+<el-tag type="warning">Warning</el-tag>
+<el-tag type="danger">Danger</el-tag>
+```
+
+## [Alert](https://element.eleme.io/#/en-US/component/alert)
+<el-alert type="success" title="Success alert!" :closable="false"></el-alert>
+<el-alert type="info" title="Info alert!" :closable="false"></el-alert>
+<el-alert type="warning" title="Warning alert!" :closable="false"></el-alert>
+<el-alert type="error" title="Error alert!" :closable="false"></el-alert>
+<el-alert type="success" title="Success alert!" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." show-icon :closable="false"></el-alert>
+<el-alert type="info" title="Info alert!" description="Magna fringilla urna porttitor rhoncus dolor purus non." show-icon :closable="false"></el-alert>
+<el-alert type="warning" title="Warning alert!" description="Non consectetur a erat nam at." show-icon :closable="false"></el-alert>
+<el-alert type="error" title="Error alert!" description="Pellentesque habitant morbi tristique senectus et netus." show-icon :closable="false"></el-alert>
+
+```html
+<el-alert type="success" title="Success alert!" :closable="false"></el-alert>
+<el-alert type="info" title="Info alert!" :closable="false"></el-alert>
+<el-alert type="warning" title="Warning alert!" :closable="false"></el-alert>
+<el-alert type="error" title="Error alert!" :closable="false"></el-alert>
+<el-alert type="success" title="Success alert!" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." show-icon :closable="false"></el-alert>
+<el-alert type="info" title="Info alert!" description="Magna fringilla urna porttitor rhoncus dolor purus non." show-icon :closable="false"></el-alert>
+<el-alert type="warning" title="Warning alert!" description="Non consectetur a erat nam at." show-icon :closable="false"></el-alert>
+<el-alert type="error" title="Error alert!" description="Pellentesque habitant morbi tristique senectus et netus." show-icon :closable="false"></el-alert>
+```
+
+## [Tabs](https://element.eleme.io/#/en-US/component/tabs)
+:::: el-tabs
+::: el-tab-pane label="Lorem ipsum"
+**Lorem ipsum** dolor sit amet, _consectetur_ adipiscing **elit**.
+:::
+::: el-tab-pane label="Pellentesque"
+**Pellentesque** _habitant_ morbi tristique **senectus** et netus.
+:::
+::::
+
+```
+:::: el-tabs
+::: el-tab-pane label="Lorem ipsum"
+**Lorem ipsum** dolor sit amet, _consectetur_ adipiscing **elit**.
+:::
+::: el-tab-pane label="Pellentesque"
+**Pellentesque** _habitant_ morbi tristique **senectus** et netus.
+:::
+::::
+```
+
+## [Collapse](https://element.eleme.io/#/en-US/component/collapse)
+:::: el-collapse
+::: el-collapse-item title="Lorem ipsum"
+**Lorem ipsum** dolor sit amet, _consectetur_ adipiscing **elit**.
+:::
+::: el-collapse-item title="Pellentesque"
+**Pellentesque** _habitant_ morbi tristique **senectus** et netus.
+:::
+::::
+
+```
+:::: el-collapse
+::: el-collapse-item title="Lorem ipsum"
+**Lorem ipsum** dolor sit amet, _consectetur_ adipiscing **elit**.
+:::
+::: el-collapse-item title="Pellentesque"
+**Pellentesque** _habitant_ morbi tristique **senectus** et netus.
+:::
+::::
+```
+
+## [Tooltip](https://element.eleme.io/#/en-US/component/tooltip)
+### Text
+<el-tooltip placement="top">
+  <div slot="content">First line<br/>Second line</div>
+  <span>Try hovering me!</span>
+</el-tooltip>
+
+```html
+<el-tooltip placement="top">
+  <div slot="content">First line<br/>Second line</div>
+  <span>Try hovering me!</span>
+</el-tooltip>
+```
+
+### Button
+<el-tooltip placement="top">
+  <div slot="content">First line<br/>Second line</div>
+  <el-button type="primary" plain>Hover me!</el-button>
+</el-tooltip>
+
+```html
+<el-tooltip placement="top">
+  <div slot="content">First line<br/>Second line</div>
+  <el-button type="primary" plain>Hover me!</el-button>
+</el-tooltip>
+```
+
+## [Steps](https://element.eleme.io/#/en-US/component/steps)
+
+### Step bar with icon
+<el-steps :active="1">
+  <el-step title="Step 1" icon="el-icon-edit"></el-step>
+  <el-step title="Step 2" icon="el-icon-upload"></el-step>
+  <el-step title="Step 3" icon="el-icon-picture"></el-step>
+</el-steps>
+
+```html
+<el-steps :active="1">
+  <el-step title="Step 1" icon="el-icon-edit"></el-step>
+  <el-step title="Step 2" icon="el-icon-upload"></el-step>
+  <el-step title="Step 3" icon="el-icon-picture"></el-step>
+</el-steps>
+```
+
+### Step bar with description
+<el-steps :active="2" finish-status="success">
+  <el-step title="Step 1" description="First you do this"></el-step>
+  <el-step title="Step 2" description="Then you do this"></el-step>
+  <el-step title="Step 3" description="Then you do that"></el-step>
+</el-steps>
+
+```html
+<el-steps :active="2" finish-status="success">
+  <el-step title="Step 1" description="Some description"></el-step>
+  <el-step title="Step 2" description="Some description"></el-step>
+  <el-step title="Step 3" description="Some description"></el-step>
+</el-steps>
+```