ziggi/m5app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

import code

Browse Source
This commit is contained in:
Oleg Borodin
2023-07-30 14:32:17 +02:00
commit 4ece201d17
21 changed files with 6279 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.browserslistrc Normal file
View File

@@ -0,0 +1,4 @@
> 1%
last 2 versions
not dead
not ie 11

6
.gitignore vendored Normal file
View File

@@ -0,0 +1,6 @@
*~
/dist
/node_modules
.env.local
.env.*.local
*.log*

3
README.md Normal file
View File

@@ -0,0 +1,3 @@
# m5 app template
![](screen01.png)

5
babel.config.js Normal file
View File

@@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

19
jsconfig.json Normal file
View File

@@ -0,0 +1,19 @@
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}

30
package.json Normal file
View File

@@ -0,0 +1,30 @@
{
"name": "m5app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"@fortawesome/fontawesome-common-types": "^6.4.0",
"@fortawesome/fontawesome-free": "^6.4.0",
"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-brands-svg-icons": "^6.4.0",
"@fortawesome/free-regular-svg-icons": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"axios": "^1.4.0",
"bootstrap": "^5.3.1",
"core-js": "^3.8.3",
"pinia": "^2.1.6",
"vue": "^3.2.13",
"vue-router": "^4.0.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"sass": "^1.32.7",
"sass-loader": "^12.0.0"
}
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

17
public/index.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

BIN
screen01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

33
src/About.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<layout>
<div id="about">
<h5>About</h5>
<div class="d-grid gap-2 col-1">
<button type="button" class="btn btn-primary" @click="increment">
{{ store.count }}
</button>
</div>
</div>
</layout>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import Layout from '@/Layout.vue'
import { useCounterStore } from '@/store'
const count = ref(0)
const store = useCounterStore()
function increment() {
store.increment()
console.log("count:", store.count)
}
onMounted(() => {
console.log("mounted")
})
</script>

9
src/App.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<div id="app">
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
</div>
</template>

32
src/Home.vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<layout>
<div id="home">
<h5>Home</h5>
<div class="d-grid gap-2 col-1">
<button type="button" class="btn btn-primary" @click="increment">
{{ store.count }}
</button>
</div>
</div>
</layout>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import Layout from '@/Layout.vue'
import { useCounterStore } from '@/store'
const count = ref(0)
const store = useCounterStore()
function increment() {
store.increment()
console.log("count:", store.count)
}
onMounted(() => {
console.log("mounted")
})
</script>

56
src/Layout.vue Normal file
View File

@@ -0,0 +1,56 @@
<template>
<div id="layout">
<nav class="navbar navbar-expand-sm navbar-my sticky-top">
<button class="btn">
<div>
<i class="fa-solid fa-bars fa-lg"></i>
</div>
</button>
<div class="navbar-brand">
<i class="fa-brands fa-old-republic fa-lg"></i> M5
</div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link"><router-link to="/">Home</router-link></a>
</li>
<li class="nav-item">
<a class="nav-link"><router-link to="/about">About</router-link></a>
</li>
<li class="nav-item">
<a class="nav-link"><router-link to="/login">Login</router-link></a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col col-10 my-3 mx-auto">
<slot/>
</div>
</div>
</div>
</div>
</template>
<style lang="scss">
$steel-blue: #4682b4;
.navbar-my {
background-color: darken($steel-blue, 12%) !important;
}
</style>

72
src/Login.vue Normal file
View File

@@ -0,0 +1,72 @@
<template>
<div>
<nav class="navbar navbar-expand-sm navbar-my sticky-top mb-4">
<div class="navbar-brand px-3">
<i class="fa-brands fa-old-republic fa-lg"></i>
M5
</div>
<span class="navbar-text">
Login
</span>
<ul class="nav justify-content-end ml-auto"></ul>
</nav>
<div class="container">
<div class="row justify-content-center">
<div class="col-8 col-sm-6 col-md-4 px-3 py-3 border">
<form accept-charset="UTF-8" v-on:submit.prevent="createSession">
<div class="form-group px-1 py-1">
<label for="username">Username:</label>
<input id="username" class="form-control" type="text" v-model="username"/>
</div>
<div class="form-group px-1 py-1">
<label for="password">Password:</label>
<input id="password" class="form-control" type="password" v-model="password"/>
</div>
<div class="text-center mt-3 mb-1">
<button class="btn btn-primary btn-sm" type="submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col mt-5">
<hr class="justify-content-sm-center" />
<div class="text-center">
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
const username = ref("")
const password = ref("")
function createSession() {
console.log("data", username.value, password.value)
}
</script>
<style lang="scss">
$steel-blue: #4682b4;
.navbar-my {
background-color: darken($steel-blue, 12%) !important;
}
</style>

22
src/main.js Normal file
View File

@@ -0,0 +1,22 @@
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from '@/App.vue'
import router from '@/router'
import '@/main.scss'
import { library, icon } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
library.add(fas, far, fab)
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.use(router)
app.mount('#app')

60
src/main.scss Normal file
View File

@@ -0,0 +1,60 @@
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/brands';// required to get $orange variable
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee0de;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
$blue: #1779ca;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #e83e8c;
$red: #c11111;
$orange: #fd7e14;
$yellow: #f0c117;
$green: #28a745;
$teal: #20c997;
$cyan: #1192a8;
$cadet-blue: #5f9ea0;
$midnight-blue: #191970;
$navy: #191970;
$steel-blue: #4682b4;
$primary: lighten($blue, 15%);
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-300;
$dark: $gray-700;
$theme-colors: map-merge($theme-colors, (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
));
@import "~bootstrap/scss/bootstrap";

29
src/router.js Normal file
View File

@@ -0,0 +1,29 @@
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from './Home.vue'
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: () => import('./About.vue')
},
{
path: '/login',
name: 'login',
component: () => import('./Login.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router

14
src/store.js Normal file
View File

@@ -0,0 +1,14 @@
import { defineStore } from 'pinia';
import { ref } from 'vue';
export const useCounterStore = defineStore('counter', () => {
const count = ref(0);
function increment() {
count.value++;
}
return { count, increment };
})

63
v4-app.geany Normal file
View File

@@ -0,0 +1,63 @@
[editor]
line_wrapping=false
line_break_column=124
auto_continue_multiline=true
[file_prefs]
final_new_line=true
ensure_convert_new_lines=false
strip_trailing_spaces=true
replace_tabs=true
[indentation]
indent_width=4
indent_type=2
indent_hard_tab_width=8
detect_indent=false
detect_indent_width=true
indent_mode=2
[project]
name=v4-app
base_path=/home/ziggi/Projects/v4-app/
description=
file_patterns=
[long line marker]
long_line_behaviour=1
long_line_column=96
[files]
current_page=7
FILE_NAME_0=149;Javascript;0;EUTF-8;0;1;0;%2Fhome%2Fziggi%2FProjects%2Fv4-app%2Fsrc%2Fmain.js;0;4
FILE_NAME_1=263;HTML;0;EUTF-8;2;1;0;%2Fhome%2Fziggi%2FProjects%2Fv4-app%2Fsrc%2FLayout.vue;0;4
FILE_NAME_2=795;None;0;EUTF-8;2;1;0;%2Fhome%2Fziggi%2FProjects%2Fv4-app%2Fsrc%2Fmain.scss;0;4
FILE_NAME_3=283;Javascript;0;EUTF-8;0;1;0;%2Fhome%2Fziggi%2FProjects%2Fv4-app%2Fsrc%2Frouter.js;0;2
FILE_NAME_4=642;HTML;0;EUTF-8;2;1;0;%2Fhome%2Fziggi%2FProjects%2Fv4-app%2Fsrc%2FLogin.vue;0;4
FILE_NAME_5=342;HTML;0;EUTF-8;2;1;0;%2Fhome%2Fziggi%2FProjects%2Fv4-app%2Fsrc%2FHome.vue;0;4
FILE_NAME_6=0;JSON;0;EUTF-8;2;1;0;%2Fhome%2Fziggi%2FProjects%2Fv4-app%2Fjsconfig.json;0;2
FILE_NAME_7=15;JSON;0;EUTF-8;2;1;0;%2Fhome%2Fziggi%2FProjects%2Fv4-app%2Fpackage.json;0;4
[VTE]
last_dir=/home/ziggi
[prjorg]
source_patterns=*.c;*.C;*.cpp;*.cxx;*.c++;*.cc;*.m;
header_patterns=*.h;*.H;*.hpp;*.hxx;*.h++;*.hh;
ignored_dirs_patterns=.*;CVS;
ignored_file_patterns=*~;*.o;*.obj;*.a;*.lib;*.so;*.dll;*.lo;*.la;*.class;*.jar;*.pyc;*.mo;*.gmo;
generate_tag_prefs=0
show_empty_dirs=true
external_dirs=
[build-menu]
JavascriptFT_00_LB=Build
JavascriptFT_00_CM=yarn build --mode devel
JavascriptFT_00_WD=
JavascriptFT_01_LB=Build
JavascriptFT_01_CM=yarn build --mode devel
JavascriptFT_01_WD=
filetypes=Javascript;
EX_00_LB=_Execute
EX_00_CM=yarn serve
EX_00_WD=

6
vue.config.js Normal file
View File

@@ -0,0 +1,6 @@
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})

5799
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff