Skip to content

Commit 305109e

Browse files
mbroersenmbroersen
authored
Merge pull request #135 from socialblue/vue3-vite-app
Introduce vue3 vite app
2 parents 1b7bc06 + 53a1bed commit 305109e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+3107
-11298
lines changed

‎.gitignore

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
build
21
docs
32
vendor
43
coverage

‎config/config.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
return [
77
'cache' => [
88
'key' => env('QUERY_ADVISER_CACHE_KEY', 'query_adviser_recent'),
9-
'ttl' => env('QUERY_ADVISER_CACHE_TTL', 3600),
9+
'ttl' => env('QUERY_ADVISER_CACHE_TTL', 25200),
1010
'max_entries' => env('QUERY_ADVISER_CACHE_MAX_ENTRIES', 10000),
1111
'display_key' => env('QUERY_ADVISER_CACHE_DISPLAY_KEY', 'query_adviser_display'),
1212
'session_id' => env('QUERY_ADVISER_CACHE_SESSION_ID', 'query_advisor_sessions_id'),

‎package-lock.json

+448-8,872
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+13-21
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,20 @@
11
{
22
"private": true,
33
"scripts": {
4-
"development": "mix",
5-
"build": "npm run production",
6-
"production": "mix --production",
7-
"watch": "mix watch"
4+
"dev": "vite",
5+
"build": "vite build",
6+
"preview": "vite preview"
87
},
98
"devDependencies": {
10-
"bulma": "^0.9.4",
11-
"bulma-extensions": "^6.2.7",
12-
"cross-env": "^5.2.1",
13-
"laravel-mix": "^6.0.49",
14-
"node-sass": "^7.0.3",
15-
"postcss": "^8.4.16",
16-
"resolve-url-loader": "^4.0.0",
17-
"sass": "^1.56.2",
18-
"sass-loader": "^12.6.0",
19-
"sql-formatter": "^12.0.3",
20-
"sql-highlight": "^4.2.1",
21-
"v-clipboard": "^2.2.3",
22-
"vue": "^2.7.14",
23-
"vue-loader": "^15.10.1",
24-
"vue-router": "^3.6.5",
25-
"vue-template-compiler": "^2.7.14"
9+
"@vitejs/plugin-vue": "^4.2.3",
10+
"laravel-vite-plugin": "^0.7.8",
11+
"sass": "^1.63.6",
12+
"vite": "^4.4.3"
2613
},
27-
"dependencies": {}
14+
"dependencies": {
15+
"sql-formatter": "^12.2.3",
16+
"sql-highlight": "^4.3.3",
17+
"vue": "^3.3.4",
18+
"vue-router": "^4.2.4"
19+
}
2820
}

‎public/build/assets/app-381aa937.js

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

‎public/build/assets/app-f8d133f2.css

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

‎public/build/manifest.json

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"resources/app/app.css": {
3+
"file": "assets/app-f8d133f2.css",
4+
"src": "resources/app/app.css"
5+
},
6+
"resources/app/app.js": {
7+
"css": [
8+
"assets/app-f8d133f2.css"
9+
],
10+
"file": "assets/app-381aa937.js",
11+
"isEntry": true,
12+
"src": "resources/app/app.js"
13+
}
14+
}

‎public/css/app.css

-2
This file was deleted.

‎public/js/app.js

-2
This file was deleted.

‎public/js/app.js.LICENSE.txt

-5
This file was deleted.

‎public/mix-manifest.json

-4
This file was deleted.

‎resources/app/app.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { createApp } from 'vue';
2+
import router from "./routes/web";
3+
import layoutMain from "./layouts/main.vue";
4+
5+
const app = createApp(layoutMain);
6+
app.use(router);
7+
app.mount('#app')
8+
9+
export default app;

‎resources/app/layouts/main.vue

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<script setup>
2+
import { RouterView } from "vue-router";
3+
import IconSheet from "../modules/default/components/icon-sheet.vue";
4+
import PageFooter from "../modules/default/components/page-footer.vue";
5+
6+
defineProps({
7+
msg: String,
8+
});
9+
10+
</script>
11+
12+
<template>
13+
<main class="laravel-query-adviser">
14+
<router-view />
15+
<page-footer />
16+
<icon-sheet />
17+
</main>
18+
</template>
19+
20+
<style lang="scss">
21+
body, html {
22+
padding: 0;
23+
margin: 0;
24+
}
25+
26+
* {
27+
box-sizing: border-box;
28+
}
29+
30+
.laravel-query-adviser {
31+
color: #4a4a4a;
32+
font-size: 1em;
33+
display: flex;
34+
font-weight: 400;
35+
line-height: 1.5;
36+
font-family: "Roboto Condensed", serif;
37+
flex-direction: column;
38+
min-height: 100vh;
39+
max-height: 100vh;
40+
41+
.container {
42+
flex-grow: 1;
43+
margin: 0 auto;
44+
position: relative;
45+
width: auto;
46+
max-width: 1344px;
47+
padding: 2px 20px;
48+
}
49+
50+
h1 {
51+
color: #363636;
52+
font-size: 2rem;
53+
font-weight: 600;
54+
line-height: 1.125rem;
55+
}
56+
57+
h2 {
58+
color: #363636;
59+
font-size: 14px;
60+
font-weight: 600;
61+
line-height: 14px;
62+
}
63+
}
64+
</style>

‎resources/assets/js/modules/default/api/defaultApi.js renamed to ‎resources/app/modules/default/api/default-api.js

+1
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ export function serverInfo() {
33
return fetch(`${defaultApiPath}/server-info`)
44
.then((response) => response.json());
55
}
6+

‎resources/app/modules/default/components/button-icon.vue

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<template>
2+
<div class="button" :title="title" v-on:click="emit">
3+
<span class="icon">
4+
<span class="material-icons">{{ icon }}</span>
5+
</span>
6+
</div>
7+
</template>
8+
9+
<script setup>
10+
11+
defineProps({
12+
title: {
13+
type: String
14+
},
15+
icon : {
16+
type: String,
17+
default: 'close'
18+
}
19+
})
20+
21+
const emits = defineEmits(['button:click'])
22+
23+
function emit() {
24+
emits('button:click');
25+
}
26+
27+
</script>
28+
29+
<style lang="scss">
30+
.button {
31+
font-size: 12px;
32+
line-height: 20px;
33+
transition: all .2s;
34+
text-align: center;
35+
justify-content: center;
36+
white-space: nowrap;
37+
background-color: rgba(233,233,233, 0.5);
38+
display: flex;
39+
border-radius: 6px;
40+
margin-right: 6px;
41+
42+
&:hover {
43+
cursor: pointer;
44+
}
45+
46+
.icon {
47+
margin-right: 14px;
48+
margin-left: 14px;
49+
margin-top: 2px;
50+
51+
.material-icons {
52+
font-size: 12px;
53+
}
54+
}
55+
56+
&:hover {
57+
background-color: rgba(233,233,233, 0.9);
58+
}
59+
}
60+
</style>

‎resources/assets/js/components/icon-sheet.vue renamed to ‎resources/app/modules/default/components/icon-sheet.vue

+1-4
Original file line numberDiff line numberDiff line change
@@ -217,10 +217,7 @@
217217
</svg>
218218
</template>
219219

220-
<script>
221-
export default {
222-
name: 'iconSheet',
223-
}
220+
<script setup>
224221
</script>
225222

226223
<style scoped>

‎resources/app/modules/default/components/loader.vue

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<div class="loader-container">
3+
<span class="material-symbols-outlined loader">
4+
progress_activity
5+
</span>
6+
</div>
7+
</template>
8+
9+
<style lang="scss">
10+
.loader-container {
11+
position: relative;
12+
height: 40px;
13+
width: 100%;
14+
overflow: hidden;
15+
padding: 4px;
16+
text-align: center;
17+
18+
.loader {
19+
font-size: 32px;
20+
font-weight: 900;
21+
color: #333;
22+
animation: loader_spin 1s linear infinite;
23+
transform-origin: 50% 50%;
24+
25+
}
26+
}
27+
28+
29+
30+
@keyframes loader_spin {
31+
0% {
32+
transform: rotate(0deg);
33+
}
34+
100% {
35+
transform: rotate(360deg);
36+
}
37+
}
38+
39+
</style>

0 commit comments

Comments
 (0)