Skip to content

Commit 6bfefb3

Browse files
lucasferreiralimaxlucasferreiralimax
authored
Merge pull request #3 from criar-art/modal-install
Modal install
2 parents f9d816a + e20812f commit 6bfefb3

File tree

5 files changed

+231
-82
lines changed

5 files changed

+231
-82
lines changed

‎package-lock.json

+9-7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-techs-logos",
3-
"version": "0.1.15",
3+
"version": "0.1.16",
44
"private": false,
55
"type": "module",
66
"files": [
@@ -35,11 +35,11 @@
3535
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
3636
},
3737
"dependencies": {
38+
"darkmode-vue": "^0.4.0",
3839
"jsom": "^1.0.0",
3940
"sass": "^1.77.6",
4041
"vue": "^3.4.31",
41-
"darkmode-vue": "^0.4.0",
42-
"vue-techs-logos": "^0.1.15"
42+
"vue-techs-logos": "^0.1.16"
4343
},
4444
"devDependencies": {
4545
"@rushstack/eslint-patch": "^1.10.3",
@@ -49,6 +49,7 @@
4949
"@vue/eslint-config-typescript": "^13.0.0",
5050
"@vue/test-utils": "^2.4.6",
5151
"@vue/tsconfig": "^0.5.1",
52+
"cypress": "^13.12.0",
5253
"eslint": "^9.6.0",
5354
"eslint-plugin-cypress": "^3.3.0",
5455
"eslint-plugin-vue": "^9.26.0",
@@ -60,7 +61,6 @@
6061
"vite-plugin-style-inject": "^0.0.1",
6162
"vite-svg-loader": "^5.1.0",
6263
"vitest": "^1.6.0",
63-
"vue-tsc": "^2.0.24",
64-
"cypress": "^13.12.0"
64+
"vue-tsc": "^2.0.24"
6565
}
6666
}

‎src/App.vue

+80-31
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,26 @@ import { ref, computed } from 'vue';
33
import pkg from '../package.json';
44
// import VueTechsLogos from 'vue-techs-logos'
55
import VueTechsLogos from './components/VueTechsLogos.vue'
6+
import ModalInstall from './components/ModalInstall.vue'
67
import DarkModeVue from 'darkmode-vue'
78
import techs from './techs'
89
910
const appVersion: string = pkg.version;
1011
const search = ref('');
12+
const modalInstall = ref(false);
1113
const filteredArray = computed(() =>
1214
techs
1315
.filter((item) => item.name.toLowerCase().includes(search.value.trim().toLowerCase()))
1416
.map((item) => item.name)
1517
);
18+
19+
function openModal() {
20+
modalInstall.value = true;
21+
}
22+
23+
function closeModal() {
24+
modalInstall.value = false;
25+
}
1626
</script>
1727

1828
<template>
@@ -23,42 +33,34 @@ const filteredArray = computed(() =>
2333
<h1>{{ `vue-techs-logos@${appVersion}` }}</h1>
2434
</a href="">
2535
</header>
26-
27-
<main>
28-
<div>
29-
<h1>Install</h1>
30-
<code class="code-wrapper">
31-
{{ `npm run install vue-techs-logos` }}
32-
</code>
33-
<h2>Usage</h2>
34-
<code class="code-wrapper">
35-
{{ `import VueTechsLogos from 'vue-techs-logos'
36-
37-
<VueTechsLogos name="vue" />` }}
38-
</code>
39-
<h2>Hidden label</h2>
40-
<code class="code-wrapper">
41-
{{ `<VueTechsLogos name="vue" :hiddenLabel="true" />` }}
42-
</code>
43-
<h2>List of technologies limited</h2>
44-
<code class="code-wrapper">
45-
{{ `<VueTechsLogos :list="['vue','JavaScript', 'react', 'angular']" />` }}
46-
</code>
47-
<h2>List of technologies full with hiddenLogos</h2>
36+
<main class="content">
37+
<ModalInstall :active="modalInstall" :closeModal="closeModal"/>
38+
<h2>List of techs</h2>
39+
<div class="install">
4840
<code class="code-wrapper">
49-
{{ `<VueTechsLogos :hiddenLogos="['vue','javascript', 'react', 'angular', 'android']" />` }}
41+
{{ `<VueTechsLogos />` }}
5042
</code>
43+
<button class="button-modal" type="button" @click="openModal">
44+
<svg
45+
xmlns="http://www.w3.org/2000/svg"
46+
version="1.1"
47+
width="40px"
48+
height="40px"
49+
viewBox="0 0 512 512"
50+
fill="var(--vtl-background-svg)"
51+
>
52+
<path d="m499.139 318.571-37.178-5.407a6.15 6.15 0 0 1-5.228-3.8l-12.054-29.086a6.116 6.116 0 0 1 1-6.379l22.243-29.88c3.533-4.141 3.301-10.314-.554-14.168l-17.602-17.594c-3.846-3.854-10.029-4.104-14.159-.553l-29.889 22.233a6.159 6.159 0 0 1-6.38 1.018l-29.094-12.062a6.213 6.213 0 0 1-3.81-5.228l-5.389-37.169c-.428-5.442-4.96-9.635-10.402-9.635H325.75c-5.45 0-9.983 4.193-10.402 9.635l-5.407 37.169a6.142 6.142 0 0 1-3.792 5.228l-29.103 12.062a6.176 6.176 0 0 1-6.388-1.018l-29.872-22.233c-4.13-3.542-10.304-3.302-14.167.553l-17.594 17.594c-3.854 3.854-4.086 10.028-.554 14.168l22.234 29.888a6.143 6.143 0 0 1 1.009 6.371l-12.054 29.086c-.874 2.159-2.908 3.622-5.219 3.81l-37.195 5.398a10.445 10.445 0 0 0-9.618 10.412v24.883c0 5.442 4.194 9.993 9.618 10.403l37.195 5.398a6.177 6.177 0 0 1 5.219 3.81l12.054 29.086c.901 2.159.5 4.63-1.009 6.388l-22.234 29.889a10.45 10.45 0 0 0 .554 14.168l17.594 17.594c3.863 3.854 10.037 4.086 14.167.544l29.872-22.243a6.191 6.191 0 0 1 6.388-.998l29.103 12.044a6.208 6.208 0 0 1 3.802 5.246l5.398 37.169c.428 5.433 4.952 9.636 10.402 9.636h24.893c5.451 0 9.974-4.203 10.402-9.636l5.389-37.169a6.23 6.23 0 0 1 3.81-5.246l29.103-12.044a6.173 6.173 0 0 1 6.379.998l29.881 22.243c4.13 3.542 10.314 3.31 14.159-.544l17.602-17.594a10.441 10.441 0 0 0 .554-14.168l-22.243-29.889a6.186 6.186 0 0 1-1-6.388l12.054-29.086a6.19 6.19 0 0 1 5.228-3.81l37.178-5.398c5.434-.41 9.627-4.961 9.627-10.403v-24.883a10.448 10.448 0 0 0-9.628-10.413zm-120.046 63.757c-10.93 10.912-25.445 16.926-40.898 16.926-15.444 0-29.978-6.014-40.898-16.926-10.92-10.938-16.943-25.454-16.943-40.907 0-15.444 6.022-29.969 16.943-40.89 10.92-10.939 25.454-16.934 40.898-16.934 15.454 0 29.969 5.995 40.898 16.934 10.92 10.92 16.934 25.446 16.934 40.89 0 15.453-6.013 29.969-16.934 40.907z" />
53+
<path d="M187.351 252.156a8.174 8.174 0 0 0 5.122-9.868l-5.898-28.854a4.896 4.896 0 0 1 1.419-4.88l18.263-16.621a4.855 4.855 0 0 1 4.97-.946l27.961 8.466c3.989 1.508 8.485-.294 10.306-4.166l8.297-17.656a8.15 8.15 0 0 0-3.346-10.591l-24.339-16.14c-1.58-.91-2.535-2.632-2.436-4.452l1.16-24.66a4.873 4.873 0 0 1 2.838-4.194l26.008-13.874c3.898-1.74 5.781-6.218 4.336-10.215l-6.603-18.371a8.194 8.194 0 0 0-9.876-5.121l-28.863 5.879c-1.767.5-3.632-.053-4.871-1.41L195.185 56.23a4.795 4.795 0 0 1-.955-4.978l8.468-27.944c1.507-4.006-.294-8.494-4.175-10.306l-17.648-8.306c-3.872-1.821-8.494-.366-10.608 3.354l-16.131 24.34a4.86 4.86 0 0 1-4.444 2.445l-24.66-1.169a4.878 4.878 0 0 1-4.202-2.847L106.974 4.821A8.186 8.186 0 0 0 96.74.485L78.379 7.096a8.158 8.158 0 0 0-5.112 9.859l5.888 28.872a4.83 4.83 0 0 1-1.418 4.862l-18.264 16.63a4.884 4.884 0 0 1-4.987.955l-27.944-8.476c-3.988-1.516-8.476.304-10.305 4.175L7.939 81.622c-1.82 3.872-.366 8.494 3.346 10.599l24.339 16.14a4.806 4.806 0 0 1 2.436 4.435l-1.16 24.66a4.814 4.814 0 0 1-2.837 4.193L8.055 155.522a8.167 8.167 0 0 0-4.336 10.216l6.611 18.37a8.19 8.19 0 0 0 9.859 5.131l28.881-5.906a4.835 4.835 0 0 1 4.862 1.427l16.612 18.255a4.845 4.845 0 0 1 .954 4.987l-8.466 27.944c-1.499 3.997.304 8.485 4.175 10.305l17.648 8.297a8.19 8.19 0 0 0 10.608-3.346l16.122-24.348c.91-1.57 2.623-2.534 4.452-2.428l24.661 1.16a4.873 4.873 0 0 1 4.211 2.846l13.847 25.989c1.767 3.9 6.219 5.8 10.233 4.354l18.362-6.619zm-39.122-79.86c-11.394 4.095-23.714 3.524-34.68-1.633-10.965-5.157-19.245-14.275-23.358-25.678-4.095-11.402-3.524-23.714 1.634-34.67 5.156-10.974 14.283-19.254 25.677-23.357 11.402-4.105 23.714-3.534 34.67 1.641 10.956 5.139 19.254 14.258 23.366 25.66 4.096 11.403 3.516 23.706-1.632 34.672-5.175 10.955-14.285 19.252-25.677 23.365z" />
54+
</svg>
55+
Learn install
56+
</button>
5157
</div>
52-
<h2>Full list of techs</h2>
53-
<code class="code-wrapper">
54-
{{ `<VueTechsLogos />` }}
55-
</code>
5658
<input type="text" class="input-search" v-model="search" placeholder="Search logos..." />
5759
<VueTechsLogos :list="filteredArray" />
5860
</main>
5961
</template>
6062

61-
<style>
63+
<style lang="scss">
6264
body {
6365
--vtl-background: rgba(0, 0, 0, .05);
6466
--vtl-background-tooltip: #444;
@@ -86,13 +88,25 @@ body.darkmode {
8688
}
8789
8890
.darkmode-button {
89-
position: absolute;
91+
margin: 1rem;
92+
position: fixed;
9093
top: 0;
9194
right: 0;
95+
padding: .6rem !important;
9296
}
9397
9498
h2 {
95-
margin: 1rem 0 1rem;
99+
margin: 0 0 1rem;
100+
}
101+
102+
.content {
103+
background: var(--vtl-background);
104+
background: var(--vtl-background-gradient);
105+
padding: 1rem 1rem;
106+
margin: 1rem;
107+
border-radius: 10px;
108+
border: 1px solid var(--vtl-background);
109+
box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 10px 20px rgba(0,0,0,.1);
96110
}
97111
98112
.code-wrapper {
@@ -103,6 +117,7 @@ h2 {
103117
display: inline-block;
104118
margin-bottom: 1rem;
105119
border: 1px solid rgba(255, 255, 255, .2);
120+
white-space: break-spaces;
106121
}
107122
108123
header {
@@ -112,19 +127,53 @@ header {
112127
.logo {
113128
display: inline-flex;
114129
align-items: center;
130+
h1 {
131+
font-weight: bold;
132+
font-size: 1.5rem;
133+
color: var(--color-text);
134+
margin-left: 1rem;
135+
}
115136
}
116137
117138
.logo:hover {
118139
background: transparent;
119140
}
120141
142+
@media screen and (max-width: 800px) {
143+
.logo h1 {
144+
font-size: 1rem;
145+
}
146+
}
147+
148+
.button-modal {
149+
background: var(--vtl-background-gradient);
150+
color: var(--color-text);
151+
display: flex;
152+
justify-content: center;
153+
align-items: center;
154+
border-radius: 10px;
155+
border: 1px solid var(--vtl-background);
156+
padding: .5rem 1rem .5rem .5rem;
157+
cursor: pointer;
158+
margin-bottom: 1rem;
159+
margin-left: 1rem;
160+
svg {
161+
margin-right: 1rem;
162+
}
163+
}
164+
121165
.input-search {
122166
padding: 1rem;
123167
margin: 1rem 0;
168+
margin-top: 0;
124169
border-radius: 10px;
125170
background: var(--vtl-background);
126171
border: 2px solid var(--vtl-background);
127172
color: var(--color-text);
128-
width: calc(100% - 2rem);
173+
width: calc(100% - 1rem);
174+
}
175+
176+
.install {
177+
display: flex;
129178
}
130179
</style>

‎src/components/ModalInstall.vue

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<script setup>
2+
// import { computed } from 'vue';
3+
const props = defineProps(['active', 'closeModal'])
4+
</script>
5+
6+
<template>
7+
<div class="modal" :class="{ active: active }">
8+
<button className="modal-button" @click="closeModal">
9+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
10+
<path fill="#f00"
11+
d="M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2Zm3.36 12.3c.29.29.29.77 0 1.06-.15.15-.34.22-.53.22s-.38-.07-.53-.22l-2.3-2.3-2.3 2.3c-.15.15-.34.22-.53.22s-.38-.07-.53-.22a.754.754 0 0 1 0-1.06l2.3-2.3-2.3-2.3a.754.754 0 0 1 0-1.06c.29-.29.77-.29 1.06 0l2.3 2.3 2.3-2.3c.29-.29.77-.29 1.06 0 .29.29.29.77 0 1.06l-2.3 2.3 2.3 2.3Z" />
12+
</svg>
13+
</button>
14+
<div class="modal-content">
15+
<h1>Install</h1>
16+
<code class="code-wrapper">
17+
{{ `npm run install vue-techs-logos` }}
18+
</code>
19+
<h2>Usage</h2>
20+
<code class="code-wrapper">
21+
{{ `import VueTechsLogos from 'vue-techs-logos'
22+
23+
<VueTechsLogos name="vue" />` }}
24+
</code>
25+
<h2>Hidden label</h2>
26+
<code class="code-wrapper">
27+
{{ `<VueTechsLogos name="vue" :hiddenLabel="true" />` }}
28+
</code>
29+
<h2>List of technologies limited</h2>
30+
<code class="code-wrapper">
31+
{{ `<VueTechsLogos :list="['vue','JavaScript', 'react', 'angular']" />` }}
32+
</code>
33+
<h2>List of technologies full with hiddenLogos</h2>
34+
<code class="code-wrapper">
35+
{{ `<VueTechsLogos :hiddenLogos="['vue','javascript', 'react', 'angular', 'android']" />` }}
36+
</code>
37+
</div>
38+
</div>
39+
</template>
40+
41+
<style lang="scss">
42+
.modal {
43+
background: var(--vtl-background);
44+
position: fixed;
45+
top: 0;
46+
bottom: 0;
47+
left: 0;
48+
right: 0;
49+
z-index: 11;
50+
backdrop-filter: blur(20px);
51+
opacity: 0;
52+
pointer-events: none;
53+
transition: .5s all;
54+
55+
&.active {
56+
opacity: 1;
57+
pointer-events: all;
58+
}
59+
}
60+
61+
.modal-content {
62+
background: var(--vtl-background);
63+
overflow: auto;
64+
border-radius: 20px;
65+
margin: 3rem;
66+
padding: 2rem;
67+
height: calc(100% - 5rem);
68+
69+
h2:first-of-type {
70+
margin-top: 0;
71+
}
72+
73+
code:last-of-type {
74+
margin-bottom: 0;
75+
}
76+
}
77+
78+
.modal-button {
79+
position: absolute;
80+
top: 2.5rem;
81+
right: 2.5rem;
82+
z-index: 11;
83+
cursor: pointer;
84+
background-color: #fff;
85+
border: 0;
86+
border-radius: 100px;
87+
padding: 0;
88+
display: flex;
89+
justify-content: center;
90+
align-items: center;
91+
transform: scale(2);
92+
}
93+
</style>

0 commit comments

Comments
 (0)