Skip to content
This repository was archived by the owner on Jul 17, 2022. It is now read-only.

Commit 6314818

Browse files
irfan-maulana-tkpirfan-maulana-tkp
committed
docs: tweak demo
1 parent 9783771 commit 6314818

File tree

13 files changed

+726
-303
lines changed

13 files changed

+726
-303
lines changed

‎package.json‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"private": false,
88
"scripts": {
99
"test": "echo \"Error: no test specified\" && exit 0",
10-
"dev:demo": "pnpm run dev --filter demo",
10+
"dev": "pnpm run build:lib && pnpm run dev --filter demo",
11+
"dev:demo": "pnpm run dev",
1112
"build:lib": "pnpm run build --filter vue2-simplert-plugin",
1213
"build:demo": "pnpm run build --filter demo",
1314
"lint": "eslint packages/** --fix"
@@ -28,30 +29,29 @@
2829
"vue popup"
2930
],
3031
"peerDependencies": {
31-
"vue": "^2.6.12",
32-
"vue-script2": "2.1.0"
32+
"vue": "^2.6.12"
3333
},
3434
"devDependencies": {
35-
"@typescript-eslint/eslint-plugin": "4.2.0",
36-
"@typescript-eslint/parser": "4.2.0",
37-
"@vue/cli-plugin-eslint": "4.5.6",
38-
"@vue/eslint-config-standard": "5.1.2",
39-
"@vue/eslint-config-typescript": "5.1.0",
40-
"@babel/core": "^7.8.7",
35+
"@typescript-eslint/eslint-plugin": "4.21.0",
36+
"@typescript-eslint/parser": "4.21.0",
37+
"@vue/cli-plugin-eslint": "4.5.12",
38+
"@vue/eslint-config-standard": "6.0.0",
39+
"@vue/eslint-config-typescript": "7.0.0",
40+
"@babel/core": "^7.13.15",
4141
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
42-
"@babel/plugin-syntax-jsx": "^7.8.3",
43-
"@babel/plugin-transform-runtime": "^7.8.3",
44-
"@babel/preset-env": "^7.8.7",
45-
"eslint": "7.9.0",
46-
"eslint-config-prettier": "^6.11.0",
47-
"eslint-plugin-import": "2.22.0",
42+
"@babel/plugin-syntax-jsx": "^7.12.13",
43+
"@babel/plugin-transform-runtime": "^7.13.15",
44+
"@babel/preset-env": "^7.13.15",
45+
"eslint": "7.24.0",
46+
"eslint-config-prettier": "^8.1.0",
47+
"eslint-plugin-import": "2.22.1",
4848
"eslint-plugin-node": "11.1.0",
49-
"eslint-plugin-promise": "4.2.1",
50-
"eslint-plugin-standard": "4.0.1",
51-
"eslint-plugin-vue": "6.2.2",
49+
"eslint-plugin-promise": "5.1.0",
50+
"eslint-plugin-standard": "5.0.0",
51+
"eslint-plugin-vue": "7.8.0",
5252
"husky": "3.1.0",
5353
"lint-staged": "9.5.0",
54-
"prettier": "^2.1.2"
54+
"prettier": "^2.2.1"
5555
},
5656
"lint-staged": {
5757
"*.{js,ts,vue}": "pnpm run lint"

‎packages/demo/package.json‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
2-
"name": "demo",
3-
"version": "0.6.0-beta.1",
4-
"description": "Vue2-Simplert as Vue.js Plugins",
5-
"author": "Irfan Maulana (https://github.com/mazipan/)",
2+
"name": "demo",
3+
"version": "0.6.0-beta.1",
4+
"description": "Vue2-Simplert as Vue.js Plugins",
5+
"author": "Irfan Maulana (https://github.com/mazipan/)",
66
"scripts": {
77
"serve": "vue-cli-service serve",
88
"build": "vue-cli-service build",
@@ -11,7 +11,9 @@
1111
},
1212
"dependencies": {
1313
"@chakra-ui/vue": "^0.6.5",
14-
"emotion": "^10.0.27"
14+
"@fortawesome/free-solid-svg-icons": "^5.15.3",
15+
"emotion": "^10.0.27",
16+
"vue-code-highlight": "^0.7.6"
1517
},
1618
"devDependencies": {
1719
"@types/node": "14.11.2",
@@ -32,13 +34,13 @@
3234
"vue": "2.6.12",
3335
"vue-class-component": "7.2.6",
3436
"vue-cli-plugin-chakra-ui": "^1.0.3",
35-
"vue2-simplert-plugin": "file:../lib",
3637
"vue-prism-component": "1.2.0",
3738
"vue-property-decorator": "9.0.0",
3839
"vue-router": "3.4.3",
3940
"vue-script2": "2.1.0",
4041
"vue-template-compiler": "2.6.12",
42+
"vue2-simplert-plugin": "file:../lib",
4143
"vuex": "3.5.1"
4244
},
4345
"license": "MIT"
44-
}
46+
}

‎packages/demo/public/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta charset="utf-8">
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width,initial-scale=1.0">
8+
<link rel="preconnect" href="https://fonts.gstatic.com">
89

910
<title>Vue 2 Simple Alert Plugin (SweetAlert Inspired)</title>
1011

@@ -32,6 +33,8 @@
3233

3334
<link rel="icon" type="image/png" sizes="16x16" href="https://mazipan.github.io/favicon/favicon-16x16.png">
3435

36+
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
37+
3538
<!-- Global site tag (gtag.js) - Google Analytics -->
3639
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-25065548-2"></script>
3740
<script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-25065548-2');</script>

‎packages/demo/src/App.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,9 @@ export default {
1717
}
1818
}
1919
</script>
20+
21+
<style>
22+
.pacifico {
23+
font-family: "Pacifico", cursive;
24+
}
25+
</style>

‎packages/demo/src/assets/undraw_Notify_re_65on.png‎

23.2 KB
Loading

‎packages/demo/src/components/BasicType.vue‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,17 @@
11
<template>
22
<c-stack :spacing="5" :mt="5" justify="space-between">
3-
<c-box width="100%" :p="5" rounded="lg" shadow="md" border-width="1px" v-for="typeV in typeVariants" :key="typeV.type">
4-
<c-text font-size="xl" :mb="2">Type: {{ typeV.type }}</c-text>
3+
<c-box
4+
width="100%"
5+
:p="5"
6+
rounded="lg"
7+
shadow="md"
8+
border-width="1px"
9+
v-for="typeV in typeVariants"
10+
:key="typeV.type"
11+
>
12+
<c-text font-size="xl" :mb="2"
13+
>Type: <c-code :variant-color="typeV.color">{{ typeV.type }}</c-code></c-text
14+
>
515

616
<c-button
717
:variant-color="typeV.color"
@@ -15,14 +25,15 @@
1525
</template>
1626

1727
<script lang="js">
18-
import { CBox, CButton, CText, CStack } from '@chakra-ui/vue'
28+
import { CBox, CButton, CText, CCode, CStack } from '@chakra-ui/vue'
1929
2030
export default {
2131
name: 'BasicType',
2232
components: {
2333
CBox,
2434
CButton,
2535
CText,
36+
CCode,
2637
CStack,
2738
},
2839
data () {

‎packages/demo/src/components/Footer.vue‎

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,44 @@
11
<template>
22
<footer class="footer">
3-
<c-flex mt="8" mb="4" align="center" justify="center">
4-
<c-text textAlign="center"
5-
>Built by <a href="https://mazipan.space">Irfan Maulana</a></c-text
6-
>
7-
</c-flex>
3+
<c-box
4+
bg="gray.50"
5+
color="gray.700"
6+
py="8"
7+
mt="8">
8+
<c-flex
9+
p="4"
10+
spacing="4"
11+
:justify="['center','space-between','space-between','space-between']"
12+
align="center">
13+
<c-text>© 2017-present by Irfan Maulana.<br/>All rights reserved</c-text>
14+
<c-box direction='row' spacing=6>
15+
<c-icon-button
16+
as="a"
17+
display="inline-flex"
18+
align-items="center"
19+
justify-content="center"
20+
rounded="full"
21+
aria-label="Github"
22+
icon="github"
23+
bg="blackAlpha.100"
24+
href="https://github.com/mazipan"
25+
/>
26+
</c-box>
27+
</c-flex>
28+
</c-box>
829
</footer>
930
</template>
1031

1132
<script>
12-
import { CFlex, CText } from "@chakra-ui/vue";
33+
import { CBox, CFlex, CText, CIconButton } from "@chakra-ui/vue";
1334
1435
export default {
1536
name: "Footer",
1637
components: {
38+
CBox,
1739
CFlex,
1840
CText,
41+
CIconButton,
1942
},
2043
};
2144
</script>

‎packages/demo/src/components/Header.vue‎

Lines changed: 88 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,103 @@
11
<template>
22
<div class="hero">
3+
<c-flex
4+
align="center"
5+
justify="center"
6+
:direction="{ base: 'column', md: 'row' }"
7+
>
8+
<c-stack :spacing="5" m="4" align="center" justify="center">
9+
<c-text as="h1" display="flex" textAlign="center">
10+
<c-text
11+
as="span"
12+
color="gray.500"
13+
class="pacifico"
14+
fontWeight="400"
15+
:fontSize="{ base: '2xl', sm: '4xl', md: '6xl' }"
16+
lineHeight="110%"
17+
>Vue2</c-text
18+
><c-text
19+
as="span"
20+
color="orange.500"
21+
class="pacifico"
22+
fontWeight="400"
23+
:fontSize="{ base: '2xl', sm: '4xl', md: '6xl' }"
24+
lineHeight="110%"
25+
>Simplert</c-text
26+
>
27+
</c-text>
328

4-
<c-flex mb="4" textAlign="center" align="center" justify="center" direction="column">
5-
<img
6-
src="https://mazipan.github.io/vue2-simplert/images/vue2-simplert-logo.png"
7-
alt="Vue2-Simplert"
8-
title="Vue2-Simplert">
9-
<c-heading as="h2">Vue 2 Simple Alert Plugin (SweetAlert Inspired)</c-heading>
10-
</c-flex>
29+
<c-text as="h2" color="gray.500" fontSize="lg" textAlign="center"
30+
>Vue 2 Simple Alert Plugin (SweetAlert Inspired)</c-text
31+
>
1132

12-
<c-flex mb="2" align="center" justify="center" direction="column">
13-
<a href="https://github.com/mazipan/vue2-simplert-plugin">
14-
<c-button variant-color="green">Github Repo</c-button>
15-
</a>
16-
</c-flex>
33+
<a href="https://github.com/mazipan/vue2-simplert-plugin">
34+
<c-button
35+
left-icon="github"
36+
variant-color="orange"
37+
variant="outline"
38+
rounded="full"
39+
>
40+
Github Repo
41+
</c-button>
42+
</a>
43+
44+
<c-flex align="center" justify="center">
45+
<a
46+
href="https://www.npmjs.com/package/vue2-simplert-plugin"
47+
target="_blank"
48+
rel="noopener noreferer"
49+
style="margin-right: 0.5rem"
50+
>
51+
<img
52+
alt="NPM Version"
53+
src="https://img.shields.io/npm/v/vue2-simplert-plugin.svg"
54+
/>
55+
</a>
56+
<a
57+
href="https://github.com/mazipan/vue2-simplert-plugin"
58+
target="_blank"
59+
rel="noopener noreferer"
60+
>
61+
<img
62+
alt="GitHub Stars"
63+
src="https://img.shields.io/github/stars/mazipan/vue2-simplert-plugin.svg?style=social"
64+
/>
65+
</a>
66+
</c-flex>
67+
</c-stack>
1768

18-
<c-flex align="center" justify="center">
19-
<a
20-
href="https://www.npmjs.com/package/vue2-simplert-plugin"
21-
target="_blank"
22-
rel="noopener noreferer"
23-
style="margin-right: 0.5rem;"
24-
>
25-
<img alt="NPM Version" src="https://img.shields.io/npm/v/vue2-simplert-plugin.svg" />
26-
</a>
27-
<a
28-
href="https://github.com/mazipan/vue2-simplert-plugin"
29-
target="_blank"
30-
rel="noopener noreferer"
31-
>
32-
<img
33-
alt="GitHub Stars"
34-
src="https://img.shields.io/github/stars/mazipan/vue2-simplert-plugin.svg?style=social"
35-
/>
36-
</a>
69+
<c-box>
70+
<c-flex align="center" justify="center">
71+
<img :src="unDrawUrl" />
72+
</c-flex>
73+
</c-box>
3774
</c-flex>
3875
</div>
3976
</template>
4077

4178
<script>
42-
import { CFlex, CHeading, CButton } from '@chakra-ui/vue'
79+
import {
80+
CFlex,
81+
CStack,
82+
CBox,
83+
CText,
84+
CButton,
85+
} from "@chakra-ui/vue";
86+
import unDraw from "../assets/undraw_Notify_re_65on.png";
4387
4488
export default {
45-
name: 'Header',
89+
name: "Header",
4690
components: {
4791
CFlex,
48-
CHeading,
49-
CButton
50-
}
51-
}
92+
CBox,
93+
CStack,
94+
CText,
95+
CButton,
96+
},
97+
data() {
98+
return {
99+
unDrawUrl: unDraw,
100+
};
101+
},
102+
};
52103
</script>

0 commit comments

Comments
 (0)