Merge pull request #135 from socialblue/vue3-vite-app

Introduce vue3 vite app

.gitignore

@@ -1,4 +1,3 @@
-build
 docs
 vendor
 coverage

config/config.php

@@ -6,7 +6,7 @@
 return [
  'cache' => [
  'key' => env('QUERY_ADVISER_CACHE_KEY', 'query_adviser_recent'),
- 'ttl' => env('QUERY_ADVISER_CACHE_TTL', 3600),
+ 'ttl' => env('QUERY_ADVISER_CACHE_TTL', 25200),
  'max_entries' => env('QUERY_ADVISER_CACHE_MAX_ENTRIES', 10000),
  'display_key' => env('QUERY_ADVISER_CACHE_DISPLAY_KEY', 'query_adviser_display'),
  'session_id' => env('QUERY_ADVISER_CACHE_SESSION_ID', 'query_advisor_sessions_id'),

package.json

@@ -1,28 +1,20 @@
 {
  "private": true,
  "scripts": {
- "development": "mix",
- "build": "npm run production",
- "production": "mix --production",
- "watch": "mix watch"
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite preview"
  },
  "devDependencies": {
- "bulma": "^0.9.4",
- "bulma-extensions": "^6.2.7",
- "cross-env": "^5.2.1",
- "laravel-mix": "^6.0.49",
- "node-sass": "^7.0.3",
- "postcss": "^8.4.16",
- "resolve-url-loader": "^4.0.0",
- "sass": "^1.56.2",
- "sass-loader": "^12.6.0",
- "sql-formatter": "^12.0.3",
- "sql-highlight": "^4.2.1",
- "v-clipboard": "^2.2.3",
- "vue": "^2.7.14",
- "vue-loader": "^15.10.1",
- "vue-router": "^3.6.5",
- "vue-template-compiler": "^2.7.14"
+ "@vitejs/plugin-vue": "^4.2.3",
+ "laravel-vite-plugin": "^0.7.8",
+ "sass": "^1.63.6",
+ "vite": "^4.4.3"
  },
- "dependencies": {}
+ "dependencies": {
+ "sql-formatter": "^12.2.3",
+ "sql-highlight": "^4.3.3",
+ "vue": "^3.3.4",
+ "vue-router": "^4.2.4"
+ }
 }

public/build/manifest.json

@@ -0,0 +1,14 @@
+{
+ "resources/app/app.css": {
+ "file": "assets/app-f8d133f2.css",
+ "src": "resources/app/app.css"
+ },
+ "resources/app/app.js": {
+ "css": [
+ "assets/app-f8d133f2.css"
+ ],
+ "file": "assets/app-381aa937.js",
+ "isEntry": true,
+ "src": "resources/app/app.js"
+ }
+}

resources/app/app.js

@@ -0,0 +1,9 @@
+import { createApp } from 'vue';
+import router from "./routes/web";
+import layoutMain from "./layouts/main.vue";
+
+const app = createApp(layoutMain);
+app.use(router);
+app.mount('#app')
+
+export default app;

resources/app/layouts/main.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { RouterView } from "vue-router";
+import IconSheet from "../modules/default/components/icon-sheet.vue";
+import PageFooter from "../modules/default/components/page-footer.vue";
+
+defineProps({
+ msg: String,
+});
+
+</script>
+
+<template>
+ <main class="laravel-query-adviser">
+ <router-view />
+ <page-footer />
+ <icon-sheet />
+ </main>
+</template>
+
+<style lang="scss">
+ body, html {
+ padding: 0;
+ margin: 0;
+ }
+
+ * {
+ box-sizing: border-box;
+ }
+
+ .laravel-query-adviser {
+ color: #4a4a4a;
+ font-size: 1em;
+ display: flex;
+ font-weight: 400;
+ line-height: 1.5;
+ font-family: "Roboto Condensed", serif;
+ flex-direction: column;
+ min-height: 100vh;
+ max-height: 100vh;
+
+ .container {
+ flex-grow: 1;
+ margin: 0 auto;
+ position: relative;
+ width: auto;
+ max-width: 1344px;
+ padding: 2px 20px;
+ }
+
+ h1 {
+ color: #363636;
+ font-size: 2rem;
+ font-weight: 600;
+ line-height: 1.125rem;
+ }
+
+ h2 {
+ color: #363636;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 14px;
+ }
+ }
+</style>

resources/assets/js/modules/default/api/defaultApi.js → resources/app/modules/default/api/default-api.js

@@ -3,3 +3,4 @@ export function serverInfo() {
  return fetch(`${defaultApiPath}/server-info`)
  .then((response) => response.json());
 }
+

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

@@ -0,0 +1,60 @@
+<template>
+ <div class="button" :title="title" v-on:click="emit">
+ <span class="icon">
+ <span class="material-icons">{{ icon }}</span>
+ </span>
+ </div>
+</template>
+
+<script setup>
+
+ defineProps({
+ title: {
+ type: String
+ },
+ icon : {
+ type: String,
+ default: 'close'
+ }
+ })
+
+ const emits = defineEmits(['button:click'])
+
+ function emit() {
+ emits('button:click');
+ }
+
+</script>
+
+<style lang="scss">
+ .button {
+ font-size: 12px;
+ line-height: 20px;
+ transition: all .2s;
+ text-align: center;
+ justify-content: center;
+ white-space: nowrap;
+ background-color: rgba(233,233,233, 0.5);
+ display: flex;
+ border-radius: 6px;
+ margin-right: 6px;
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ .icon {
+ margin-right: 14px;
+ margin-left: 14px;
+ margin-top: 2px;
+
+ .material-icons {
+ font-size: 12px;
+ }
+ }
+
+ &:hover {
+ background-color: rgba(233,233,233, 0.9);
+ }
+ }
+</style>

resources/assets/js/components/icon-sheet.vue → resources/app/modules/default/components/icon-sheet.vue

@@ -217,10 +217,7 @@
  </svg>
 </template>
 
-<script>
- export default {
- name: 'iconSheet',
- }
+<script setup>
 </script>
 
 <style scoped>

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

@@ -0,0 +1,39 @@
+<template>
+ <div class="loader-container">
+ <span class="material-symbols-outlined loader">
+ progress_activity
+ </span>
+ </div>
+</template>
+
+<style lang="scss">
+ .loader-container {
+ position: relative;
+ height: 40px;
+ width: 100%;
+ overflow: hidden;
+ padding: 4px;
+ text-align: center;
+
+ .loader {
+ font-size: 32px;
+ font-weight: 900;
+ color: #333;
+ animation: loader_spin 1s linear infinite;
+ transform-origin: 50% 50%;
+
+ }
+ }
+
+
+
+ @keyframes loader_spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+
+</style>