Skip to content

Commit bd5f193

Browse files
hsurf22hsurf22
committedOct 4, 2019
Initial commit
1 parent 30847ab commit bd5f193

31 files changed

+9362
-1
lines changed
 

‎.browserslistrc

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
> 1%
2+
last 2 versions

‎.eslintrc.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
node: true
5+
},
6+
extends: ["plugin:vue/essential", "@vue/prettier"],
7+
rules: {
8+
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
9+
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
10+
},
11+
parserOptions: {
12+
parser: "babel-eslint"
13+
}
14+
};

‎README.md

+29-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,29 @@
1-
# mew-components
1+
# mew-components
2+
3+
## Project setup
4+
```
5+
yarn install
6+
```
7+
8+
### Compiles and hot-reloads for development
9+
```
10+
yarn run serve
11+
```
12+
13+
### Compiles and minifies for production
14+
```
15+
yarn run build
16+
```
17+
18+
### Run your tests
19+
```
20+
yarn run test
21+
```
22+
23+
### Lints and fixes files
24+
```
25+
yarn run lint
26+
```
27+
28+
### Customize configuration
29+
See [Configuration Reference](https://cli.vuejs.org/config/).

‎babel.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
presets: ["@vue/app"]
3+
};

‎package.json

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "mew-components",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
9+
},
10+
"dependencies": {
11+
"core-js": "^2.6.5",
12+
"vue": "^2.6.10",
13+
"vue-router": "^3.0.3",
14+
"vuetify": "^2.0.0",
15+
"vuex": "^3.0.1"
16+
},
17+
"devDependencies": {
18+
"@vue/cli-plugin-babel": "^3.11.0",
19+
"@vue/cli-plugin-eslint": "^3.11.0",
20+
"@vue/cli-service": "^3.11.0",
21+
"@vue/eslint-config-prettier": "^5.0.0",
22+
"babel-eslint": "^10.0.1",
23+
"eslint": "^5.16.0",
24+
"eslint-plugin-prettier": "^3.1.0",
25+
"eslint-plugin-vue": "^5.0.0",
26+
"prettier": "^1.18.2",
27+
"sass": "^1.18.0",
28+
"sass-loader": "^7.1.0",
29+
"vue-cli-plugin-vuetify": "^0.6.3",
30+
"vue-template-compiler": "^2.6.10",
31+
"vuetify-loader": "^1.2.2"
32+
}
33+
}

‎postcss.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
plugins: {
3+
autoprefixer: {}
4+
}
5+
};

‎public/favicon.ico

4.19 KB
Binary file not shown.

‎public/index.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
8+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
9+
<title>mew-components</title>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
11+
<link
12+
href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap"
13+
rel="stylesheet">
14+
<link
15+
href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap"
16+
rel="stylesheet">
17+
18+
</head>
19+
20+
<body>
21+
<noscript>
22+
<strong>We're sorry but mew-components doesn't work properly without JavaScript enabled. Please enable it to
23+
continue.</strong>
24+
</noscript>
25+
<div id="app"></div>
26+
<!-- built files will be auto injected -->
27+
</body>
28+
29+
</html>

‎src/App.vue

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<v-app>
3+
<Header />
4+
<v-content>
5+
<router-view />
6+
</v-content>
7+
</v-app>
8+
</template>
9+
10+
<script>
11+
import Header from "@/views/Header";
12+
13+
export default {
14+
name: "App",
15+
components: {
16+
Header
17+
},
18+
data: () => ({})
19+
};
20+
</script>
21+
22+
<style lang="scss">
23+
.theme--light.v-application {
24+
background: white !important;
25+
}
26+
</style>

‎src/assets/logo-small.png

10 KB
Loading

‎src/components/Button/ButtonBlue.vue

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<v-btn
3+
x-large
4+
dark
5+
depressed
6+
class="the-button-component"
7+
v-text="label"
8+
:disabled="disabled"
9+
></v-btn>
10+
</template>
11+
12+
<script>
13+
export default {
14+
props: {
15+
label: String,
16+
disabled: Boolean
17+
},
18+
data: () => ({})
19+
};
20+
</script>
21+
22+
<style lang="scss" scoped>
23+
@import "@/global.scss";
24+
25+
.the-button-component {
26+
background-color: $color--primary--royal-blue !important;
27+
height: $button--height !important;
28+
min-width: $button--min-width !important;
29+
text-transform: $button--text-transform;
30+
letter-spacing: $button--letter-spacing;
31+
}
32+
33+
.theme--dark.v-btn.v-btn--disabled:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined) {
34+
background-color: $button--primary--disabled--background-color !important;
35+
color: $button--primary--disabled--text-color !important;
36+
}
37+
</style>

‎src/components/Button/ButtonBlueBorder.vue

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<v-btn
3+
x-large
4+
outlined
5+
class="the-button-component"
6+
v-text="label"
7+
:disabled="disabled"
8+
></v-btn>
9+
</template>
10+
11+
<script>
12+
export default {
13+
props: {
14+
label: String,
15+
disabled: Boolean
16+
},
17+
data: () => ({})
18+
};
19+
</script>
20+
21+
<style lang="scss" scoped>
22+
@import "@/global.scss";
23+
24+
.the-button-component {
25+
border: 2px solid $color--primary--royal-blue;
26+
color: $color--primary--royal-blue;
27+
height: $button--height !important;
28+
min-width: $button--min-width !important;
29+
text-transform: $button--text-transform;
30+
letter-spacing: $button--letter-spacing;
31+
}
32+
33+
.theme--light.v-btn.v-btn--disabled {
34+
border: 2px solid $button--secondary--disabled--border-color !important;
35+
color: $button--secondary--disabled--text-color !important;
36+
}
37+
</style>

‎src/components/Button/ButtonGreen.vue

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<v-btn
3+
x-large
4+
dark
5+
depressed
6+
class="the-button-component"
7+
v-text="label"
8+
:disabled="disabled"
9+
></v-btn>
10+
</template>
11+
12+
<script>
13+
export default {
14+
props: {
15+
label: String,
16+
disabled: Boolean
17+
},
18+
data: () => ({})
19+
};
20+
</script>
21+
22+
<style lang="scss" scoped>
23+
@import "@/global.scss";
24+
25+
.the-button-component {
26+
background-color: $color--primary--emerald !important;
27+
height: $button--height !important;
28+
min-width: $button--min-width !important;
29+
text-transform: $button--text-transform;
30+
letter-spacing: $button--letter-spacing;
31+
}
32+
33+
.theme--dark.v-btn.v-btn--disabled:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined) {
34+
background-color: $button--primary--disabled--background-color !important;
35+
color: $button--primary--disabled--text-color !important;
36+
}
37+
</style>

‎src/components/Button/ButtonGreenBorder.vue

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<v-btn
3+
x-large
4+
outlined
5+
class="the-button-component"
6+
v-text="label"
7+
:disabled="disabled"
8+
></v-btn>
9+
</template>
10+
11+
<script>
12+
export default {
13+
props: {
14+
label: String,
15+
disabled: Boolean
16+
},
17+
data: () => ({})
18+
};
19+
</script>
20+
21+
<style lang="scss" scoped>
22+
@import "@/global.scss";
23+
24+
.the-button-component {
25+
border: 2px solid $color--primary--emerald;
26+
color: $color--primary--emerald;
27+
height: $button--height !important;
28+
min-width: $button--min-width !important;
29+
text-transform: $button--text-transform;
30+
letter-spacing: $button--letter-spacing;
31+
}
32+
33+
.theme--light.v-btn.v-btn--disabled {
34+
border: 2px solid $button--secondary--disabled--border-color !important;
35+
color: $button--secondary--disabled--text-color !important;
36+
}
37+
</style>

‎src/components/Checkbox/Checkbox.vue

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<template>
2+
<v-checkbox
3+
class="the-checkbox-component-aaeff97c707f505af0ea3e32e276dcd7"
4+
:label="checkbox1 ? labelChecked : labelUnchecked"
5+
v-model="checkbox1"
6+
color="teal accent-4"
7+
></v-checkbox>
8+
</template>
9+
10+
<script>
11+
export default {
12+
props: {
13+
labelChecked: String,
14+
labelUnchecked: String
15+
},
16+
data: () => ({
17+
checkbox1: false
18+
}),
19+
watch: {
20+
checkbox1(newValue) {
21+
this.$emit("input", newValue);
22+
}
23+
}
24+
};
25+
</script>
26+
27+
<style lang="scss">
28+
@import "@/global.scss";
29+
.the-checkbox-component-aaeff97c707f505af0ea3e32e276dcd7 {
30+
.v-icon.v-icon {
31+
//font-size: 30px;
32+
}
33+
.theme--light.v-icon {
34+
color: #e0e0e0;
35+
}
36+
.v-input--selection-controls__ripple {
37+
//left: -10px;
38+
}
39+
.v-input--selection-controls__input {
40+
//margin-right: 12px;
41+
}
42+
.theme--light.v-label {
43+
color: $checkbox--inactive--font-color;
44+
}
45+
46+
&.v-input--is-label-active {
47+
.theme--light.v-label {
48+
color: $checkbox--active--font-color;
49+
}
50+
}
51+
}
52+
</style>

‎src/components/Popover/Popover.vue

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<v-tooltip top>
3+
<template v-slot:activator="{ on }">
4+
<v-btn color="orange" dark v-on="on">Hover</v-btn>
5+
</template>
6+
<span>
7+
{{ text }}
8+
</span>
9+
</v-tooltip>
10+
</template>
11+
12+
<script>
13+
export default {
14+
props: {
15+
text: String
16+
},
17+
data: () => ({}),
18+
watch: {},
19+
mounted() {}
20+
};
21+
</script>
22+
23+
<style lang="scss">
24+
@import "@/global.scss";
25+
.v-tooltip__content {
26+
max-width: 300px;
27+
opacity: 1 !important;
28+
background-color: white !important;
29+
border: 1px solid $color--primary--emerald;
30+
padding: 10px 14px !important;
31+
32+
span {
33+
font-weight: 400;
34+
line-height: 17px;
35+
font-size: 12px;
36+
display: inline-block;
37+
color: $color--text--spruce;
38+
}
39+
}
40+
</style>

‎src/components/Radio/Radio.vue

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<v-radio-group
3+
v-model="radio1"
4+
:mandatory="false"
5+
class="the-radio-component-45472e5249a2adba1b1bf01d22e405c3"
6+
>
7+
<v-radio
8+
:label="i.label"
9+
v-for="(i, key) in items"
10+
:key="key"
11+
color="teal accent-4"
12+
/>
13+
</v-radio-group>
14+
</template>
15+
16+
<script>
17+
export default {
18+
props: {
19+
items: Array
20+
},
21+
data: () => ({
22+
radio1: false
23+
}),
24+
watch: {
25+
radio1(newValue) {
26+
this.$emit("input", newValue);
27+
}
28+
}
29+
};
30+
</script>
31+
32+
<style lang="scss">
33+
@import "@/global.scss";
34+
.the-radio-component-45472e5249a2adba1b1bf01d22e405c3 {
35+
}
36+
</style>

‎src/components/Switch/SwitchToggle.vue

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<v-switch
3+
class="the-switch-component-47593549909b70d53c2eb634ce982523"
4+
inset
5+
v-model="switch1"
6+
:label="switch1 ? labelOn : labelOff"
7+
color="teal accent-4"
8+
></v-switch>
9+
</template>
10+
11+
<script>
12+
export default {
13+
props: {
14+
labelOn: String,
15+
labelOff: String
16+
},
17+
data: () => ({
18+
switch1: false
19+
}),
20+
watch: {
21+
switch1(newValue) {
22+
this.$emit("input", newValue);
23+
}
24+
}
25+
};
26+
</script>
27+
28+
<style lang="scss">
29+
@import "@/global.scss";
30+
31+
.the-switch-component-47593549909b70d53c2eb634ce982523 label {
32+
color: $switch--font-color !important;
33+
font-size: $switch--font-size !important;
34+
font-weight: $switch--font-weight !important;
35+
}
36+
</style>

‎src/components/Warningbox/Warningbox.vue

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div class="warning-box">{{ text }}</div>
3+
</template>
4+
5+
<script>
6+
export default {
7+
props: {
8+
text: String
9+
},
10+
data: () => ({}),
11+
watch: {}
12+
};
13+
</script>
14+
15+
<style lang="scss" scoped>
16+
@import "@/global.scss";
17+
.warning-box {
18+
border: 2px solid $color--secondary--cardinal;
19+
padding: 15px;
20+
border-radius: 5px;
21+
text-align: center;
22+
color: $color--secondary--cardinal;
23+
background-color: #ffeef1;
24+
}
25+
</style>

‎src/global.scss

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
// COLOR PALETTE ==============================================================
2+
$color--primary--emerald: #05c0a5;
3+
$color--primary--royal-blue: #5a78f0;
4+
$color--primary--dark-sacramento: #003945;
5+
$color--primary--dark-space: #0b2840;
6+
$color--secondary--violet: #7070e3;
7+
$color--secondary--police-strobe: #25b0e8;
8+
$color--secondary--independence: #536d8b;
9+
$color--secondary--dark-independence: #334758;
10+
$color--secondary--cerise: #e96071;
11+
$color--secondary--cardinal: #a70015;
12+
$color--secondary--naples-yellow: #fcb755;
13+
$color--secondary--primary-silver: #f2f4fa;
14+
$color--secondary--mint: #cdf2ee;
15+
$color--secondary--light-mint: #f2fafa;
16+
$color--text--dark-sacramento: #003945;
17+
$color--text--spruce: #506175;
18+
$color--text--silver: #cecece;
19+
$color--disabled--1: #d8d8d8;
20+
21+
// SWITCH/CHECKBOX LABEL
22+
$label--active--color: $color--text--dark-sacramento;
23+
$label--inactive--color: $color--disabled--1;
24+
25+
// BUTTON PROPS ===============================================================
26+
$button--height: 60px;
27+
$button--min-width: 240px;
28+
$button--text-transform: none;
29+
$button--letter-spacing: 1px;
30+
31+
$button--primary--disabled--background-color: $color--disabled--1;
32+
$button--primary--disabled--text-color: white;
33+
34+
$button--secondary--disabled--background-color: white;
35+
$button--secondary--disabled--border-color: $color--disabled--1;
36+
$button--secondary--disabled--text-color: $color--disabled--1;
37+
38+
// SWITCH PROPS ===============================================================
39+
$switch--font-size: 16px;
40+
$switch--font-weight: normal;
41+
$switch--font-color: $label--active--color;
42+
43+
// CHECKBOX PROPS =============================================================
44+
$checkbox--active--font-color: $label--active--color;
45+
$checkbox--inactive--font-color: $label--inactive--color;

‎src/main.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Vue from "vue";
2+
import App from "./App.vue";
3+
import router from "./router";
4+
import store from "./store";
5+
import vuetify from "./plugins/vuetify";
6+
7+
Vue.config.productionTip = false;
8+
9+
new Vue({
10+
router,
11+
store,
12+
vuetify,
13+
render: h => h(App)
14+
}).$mount("#app");

‎src/plugins/vuetify.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Vue from "vue";
2+
import Vuetify from "vuetify/lib";
3+
4+
Vue.use(Vuetify);
5+
6+
export default new Vuetify({
7+
icons: {
8+
iconfont: "mdi"
9+
}
10+
});

‎src/router.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import Vue from "vue";
2+
import Router from "vue-router";
3+
import Home from "./views/Home.vue";
4+
5+
Vue.use(Router);
6+
7+
export default new Router({
8+
routes: [
9+
{
10+
path: "/",
11+
name: "home",
12+
component: Home
13+
},
14+
{
15+
path: "/about",
16+
name: "about",
17+
// route level code-splitting
18+
// this generates a separate chunk (about.[hash].js) for this route
19+
// which is lazy-loaded when the route is visited.
20+
component: () =>
21+
import(/* webpackChunkName: "about" */ "./views/About.vue")
22+
}
23+
]
24+
});

‎src/store.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Vue from "vue";
2+
import Vuex from "vuex";
3+
4+
Vue.use(Vuex);
5+
6+
export default new Vuex.Store({
7+
state: {},
8+
mutations: {},
9+
actions: {}
10+
});

‎src/views/About.vue

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<div class="about">
3+
<h1>This is an about page</h1>
4+
</div>
5+
</template>

‎src/views/Components.vue

+192
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
<template>
2+
<v-container>
3+
<!--================================================================================-->
4+
<v-snackbar
5+
v-model="snackbarOpen"
6+
color="success"
7+
:timeout="1000"
8+
top
9+
class="text-capitalize"
10+
>
11+
{{ snackbarMsg }}
12+
<v-btn dark text @click="snackbarOpen = false">
13+
Close
14+
</v-btn>
15+
</v-snackbar>
16+
<!--================================================================================-->
17+
18+
<v-row>
19+
<cc subtitle="Button" title="Button Green">
20+
<ButtonGreen
21+
label="Button"
22+
@click.native="
23+
snackbarOpen = true;
24+
snackbarMsg = 'Clicked';
25+
"
26+
class="mr-1"
27+
/>
28+
<ButtonGreen
29+
label="Button"
30+
disabled
31+
@click.native="
32+
snackbarOpen = true;
33+
snackbarMsg = 'Clicked';
34+
"
35+
/>
36+
</cc>
37+
<cc subtitle="Button" title="Button Green Border">
38+
<ButtonGreenBorder
39+
label="Button"
40+
@click.native="
41+
snackbarOpen = true;
42+
snackbarMsg = 'Clicked';
43+
"
44+
class="mr-1"
45+
/>
46+
<ButtonGreenBorder
47+
label="Button"
48+
disabled
49+
@click.native="
50+
snackbarOpen = true;
51+
snackbarMsg = 'Clicked';
52+
"
53+
/>
54+
</cc>
55+
<cc subtitle="Button" title="Button Blue">
56+
<ButtonBlue
57+
label="Button"
58+
@click.native="
59+
snackbarOpen = true;
60+
snackbarMsg = 'Clicked';
61+
"
62+
class="mr-1"
63+
/>
64+
<ButtonBlue
65+
label="Button"
66+
disabled
67+
@click.native="
68+
snackbarOpen = true;
69+
snackbarMsg = 'Clicked';
70+
"
71+
/>
72+
</cc>
73+
<cc subtitle="Button" title="Button Blue Border">
74+
<ButtonBlueBorder
75+
label="Button"
76+
@click.native="
77+
snackbarOpen = true;
78+
snackbarMsg = 'Clicked';
79+
"
80+
class="mr-1"
81+
/>
82+
<ButtonBlueBorder
83+
label="Button"
84+
disabled
85+
@click.native="
86+
snackbarOpen = true;
87+
snackbarMsg = 'Clicked';
88+
"
89+
/>
90+
</cc>
91+
<cc subtitle="Switch" title="Switch Toggle">
92+
<SwitchToggle
93+
v-model="modelSwitchToggle"
94+
label-off="Off"
95+
label-on="On"
96+
/>
97+
<div>
98+
<span class="font-weight-light caption">Emitted v-model value </span>
99+
<code>{{ modelSwitchToggle }}</code>
100+
</div>
101+
</cc>
102+
<cc subtitle="Switch" title="Switch Toggle">
103+
<SwitchToggle
104+
v-model="modelSwitchToggleSquare"
105+
label-off="12 mnemonic phrases"
106+
label-on="24 mnemonic phrases"
107+
/>
108+
<div>
109+
<span class="font-weight-light caption">Emitted v-model value </span>
110+
<code>{{ modelSwitchToggleSquare }}</code>
111+
</div>
112+
</cc>
113+
<cc subtitle="Checkboxe" title="Checkboxe">
114+
<checkbox
115+
v-model="modelCheckbox1"
116+
label-unchecked="Unchecked"
117+
label-checked="Checked"
118+
/>
119+
<div>
120+
<span class="font-weight-light caption">Emitted v-model value </span>
121+
<code>{{ modelCheckbox1 }}</code>
122+
</div>
123+
</cc>
124+
<cc subtitle="Checkboxe" title="Checkboxe">
125+
<radio v-model="modelRadio1" :items="radioItems" />
126+
<div>
127+
<span class="font-weight-light caption">Emitted v-model value </span>
128+
<code>{{ modelRadio1 }}</code>
129+
</div>
130+
</cc>
131+
<cc subtitle="Popover" title="Popover">
132+
<popover
133+
text="An MD5 hash is created by taking a string of an any length and encoding it into a 128-bit fingerprint. Encoding the same string using the MD5 algorithm will always result in the same 128-bit hash output. MD5 hashes are commonly used with smaller strings when storing passwords, credit card numbers or other sensitive data in databases such as the popular MySQL. This tool provides a quick and easy way to encode an MD5 hash from a simple string of up to 256 characters in length."
134+
/>
135+
</cc>
136+
<cc subtitle="Popover" title="Popover">
137+
<Warningbox
138+
text="WARNING: You and only you are responsible for your security."
139+
/>
140+
</cc>
141+
<cc subtitle="Input" title="Input Normal">
142+
<SwitchToggle v-model="modelInputNormal" title="Off" label-on="On" />
143+
<div>
144+
<span class="font-weight-light caption">Emitted v-model value </span>
145+
<code>{{ modelSwitchToggle }}</code>
146+
</div>
147+
</cc>
148+
</v-row>
149+
</v-container>
150+
</template>
151+
152+
<script>
153+
import cc from "@/views/components/ComponentContainer";
154+
import ButtonGreen from "@/components/Button/ButtonGreen";
155+
import ButtonGreenBorder from "@/components/Button/ButtonGreenBorder";
156+
import ButtonBlue from "@/components/Button/ButtonBlue";
157+
import ButtonBlueBorder from "@/components/Button/ButtonBlueBorder";
158+
import SwitchToggle from "@/components/Switch/SwitchToggle";
159+
import Checkbox from "@/components/Checkbox/Checkbox";
160+
import Radio from "@/components/Radio/Radio";
161+
import Popover from "@/components/Popover/Popover";
162+
import Warningbox from "@/components/Warningbox/Warningbox";
163+
164+
export default {
165+
components: {
166+
cc,
167+
ButtonGreen,
168+
ButtonGreenBorder,
169+
ButtonBlue,
170+
ButtonBlueBorder,
171+
SwitchToggle,
172+
Checkbox,
173+
Radio,
174+
Popover,
175+
Warningbox
176+
},
177+
data: () => ({
178+
snackbarOpen: false,
179+
snackbarMsg: "",
180+
modelSwitchToggle: false,
181+
modelSwitchToggleSquare: false,
182+
modelCheckbox1: false,
183+
modelRadio1: false,
184+
radioItems: [
185+
{ label: "Item1", value: 1 },
186+
{ label: "Item2", value: 2 },
187+
{ label: "Item3", value: 3 }
188+
],
189+
modelInputNormal: ""
190+
})
191+
};
192+
</script>

‎src/views/Header.vue

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div>
3+
<v-app-bar color="transparent" class="headline text-uppercase">
4+
<v-app-bar-nav-icon hidden></v-app-bar-nav-icon>
5+
<v-toolbar-title hidden>MEW Components</v-toolbar-title>
6+
<v-img
7+
src="@/assets/logo-small.png"
8+
aspect-ratio="1"
9+
max-width="120"
10+
class="mr-2"
11+
></v-img>
12+
<span class="mr-2">MEW</span>
13+
<span class="font-weight-light">Components</span>
14+
<v-spacer></v-spacer>
15+
<v-btn
16+
text
17+
href="https://github.com/vuetifyjs/vuetify/releases/latest"
18+
target="_blank"
19+
>
20+
<span class="mr-2">Github</span>
21+
</v-btn>
22+
</v-app-bar>
23+
</div>
24+
</template>
25+
26+
<script>
27+
export default {
28+
name: "Header",
29+
components: {},
30+
data: () => ({})
31+
};
32+
</script>
33+
34+
<style lang="scss" scoped></style>

‎src/views/Home.vue

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<div>
3+
<Typography />
4+
<Components />
5+
</div>
6+
</template>
7+
8+
<script>
9+
import Typography from "./Typography";
10+
import Components from "./Components";
11+
12+
export default {
13+
components: {
14+
Typography,
15+
Components
16+
}
17+
};
18+
</script>

‎src/views/Typography.vue

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<v-container>
3+
<v-row no-gutters class="justify-space-between">
4+
<v-col cols="12" sm="6" md="4">
5+
<h1>H1 Heading</h1>
6+
<h2>H2 Heading</h2>
7+
<h3>H3 Heading</h3>
8+
<h4>H4 Heading</h4>
9+
<h5>H5 Heading</h5>
10+
<p>Body</p>
11+
</v-col>
12+
</v-row>
13+
</v-container>
14+
</template>
15+
16+
<script>
17+
export default {
18+
data: () => ({})
19+
};
20+
</script>

‎src/views/components/ComponentContainer.vue

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<v-col cols="12" sm="6" md="6">
3+
<v-card class="py-12" flat>
4+
<div class="dark-sacramento caption" :text="subtitle">
5+
{{ subtitle }}
6+
</div>
7+
<div class="dark-sacramento title mb-3 mt-n1">
8+
{{ title }}
9+
</div>
10+
<slot />
11+
</v-card>
12+
</v-col>
13+
</template>
14+
15+
<script>
16+
export default {
17+
props: {
18+
subtitle: String,
19+
title: String
20+
},
21+
data: () => ({})
22+
};
23+
</script>
24+
25+
<style lang="scss" scoped>
26+
@import "@/global.scss";
27+
.dark-sacramento {
28+
color: $color--text--dark-sacramento;
29+
}
30+
</style>

‎yarn.lock

+8,482
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
Please sign in to comment.