Skip to content
Snippets Groups Projects
Commit 5f2e207e authored by Дмитрий Малюгин's avatar Дмитрий Малюгин :clock4:
Browse files

create base menu

parent a35aabef
No related branches found
No related tags found
1 merge request!2Create base menu
This commit is part of merge request !2. Comments created here will be created in the context of that merge request.
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 5692 additions and 184 deletions
components.d.ts 0 → 100644
+ 27
− 0
View file @ 5f2e207e
/* eslint-disable */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}
/* prettier-ignore */
declare module 'vue' {
export interface GlobalComponents {
Avatar: typeof import('primevue/avatar')['default']
Button: typeof import('primevue/button')['default']
Divider: typeof import('primevue/divider')['default']
Drawer: typeof import('primevue/drawer')['default']
LogoAndLabel: typeof import('./src/components/LogoAndLabel.vue')['default']
Popover: typeof import('primevue/popover')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
ScrollPanel: typeof import('primevue/scrollpanel')['default']
SpeedDial: typeof import('primevue/speeddial')['default']
Splitter: typeof import('primevue/splitter')['default']
SplitterPanel: typeof import('primevue/splitterpanel')['default']
Textarea: typeof import('primevue/textarea')['default']
TextItem: typeof import('./src/components/entities/TextItem.vue')['default']
Tree: typeof import('primevue/tree')['default']
UserInfoHeaderWithSettings: typeof import('./src/components/UserInfoHeaderWithSettings.vue')['default']
}
}
index.html
+ 4
− 3
View file @ 5f2e207e
......@@ -4,10 +4,11 @@
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<link href="./src/output.css" rel="stylesheet">
<title>Motion</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./src/main.ts"></script>
<div id="app"></div>
<script type="module" src="./src/main.ts"></script>
</body>
</html>
package-lock.json 0 → 100644
+ 4146
− 0
View file @ 5f2e207e
This diff is collapsed.
package.json
+ 9
− 0
View file @ 5f2e207e
......@@ -13,16 +13,24 @@
"format": "prettier --write src/"
},
"dependencies": {
"@primevue/themes": "^4.0.4",
"@vueuse/core": "^10.11.0",
"@vueuse/integrations": "^10.11.0",
"pinia": "^2.1.7",
"primeicons": "^7.0.0",
"primevue": "^4.0.4",
"tailwindcss": "^3.4.7",
"universal-cookie": "^7",
"uuid": "^10.0.0",
"vue": "^3.4.29",
"vue-router": "^4.3.3"
},
"devDependencies": {
"@primevue/auto-import-resolver": "^4.0.4",
"@rushstack/eslint-patch": "^1.8.0",
"@tsconfig/node20": "^20.1.4",
"@types/node": "^20.14.5",
"@types/uuid": "^10.0.0",
"@vitejs/plugin-vue": "^5.0.5",
"@vue/eslint-config-prettier": "^9.0.0",
"@vue/eslint-config-typescript": "^13.0.0",
......@@ -33,6 +41,7 @@
"prettier": "^3.2.5",
"typescript": "~5.4.0",
"unplugin-auto-import": "^0.18.2",
"unplugin-vue-components": "^0.27.3",
"vite": "^5.3.1",
"vue-tsc": "^2.0.21"
}
......
src/App.vue
+ 17
− 17
View file @ 5f2e207e
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router';
import 'primeicons/primeicons.css';
import BaseMenu from '@/modules/BaseMenu.vue';
const baseMenu = ref();
const toggleMenu = (event) => {
baseMenu.value.toggle(event);
};
const visible = ref<boolean>(false);
</script>
<template>
<header>
<div class="wrapper">
<h1>ggggggggggggggggggggggggggggggggggggggggggggggg</h1>
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
</div>
</header>
<Button @click="toggleMenu">Menu</Button>
<BaseMenu ref="baseMenu" />
<RouterView />
<router-view />
<div class="absolute top-0 left-0">
<Button
@click.prevent="visible = !visible"
label="Menu"
iconPos="top"
icon="pi pi-bars"
severity="secondary"
/>
</div>
<Drawer v-model:visible="visible">
<template #container="{ closeCallback }">
<BaseMenu @closeCallback="closeCallback" />
</template>
</Drawer>
</template>
<style scoped></style>
src/assets/main.css
+ 94
− 5
View file @ 5f2e207e
body {
min-height: 100vh;
}
#app {
min-height: 100vh;
display: flex;
flex-flow: column;
}
#app > main {
flex: 1 1 auto;
}
/* Reset and base styles */
* {
padding: 0;
margin: 0;
border: none;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
font-weight: normal;
}
body {
min-height: 100vh;
}
\ No newline at end of file
/* Links */
a, a:link, a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
/* Common */
aside, nav, footer, header, section, main {
display: block;
}
h1, h2, h3, h4, h5, h6, p {
font-size: inherit;
font-weight: inherit;
}
ul, ul li {
list-style: none;
}
img {
vertical-align: top;
}
img, svg {
max-width: 100%;
height: auto;
}
address {
font-style: normal;
}
/* Form */
input, textarea, button, select {
font-family: inherit;
font-size: inherit;
color: inherit;
background-color: transparent;
}
input::-ms-clear {
display: none;
}
button, input[type="submit"] {
display: inline-block;
box-shadow: none;
background-color: transparent;
background: none;
cursor: pointer;
}
input:focus, input:active,
button:focus, button:active {
outline: none;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
label {
cursor: pointer;
}
legend {
display: block;
}
src/components/LogoAndLabel.vue 0 → 100644
+ 10
− 0
View file @ 5f2e207e
<script setup lang="ts"></script>
<template>
<span class="inline-flex items-center gap-2"
><img src="@/assets/Motion.svg" alt="Motion logo" class="bg-white size-12" />
<span class="font-semibold text-2xl text-primary">Motion</span></span
>
</template>
<style scoped></style>
src/components/UserInfoHeaderWithSettings.vue 0 → 100644
+ 20
− 0
View file @ 5f2e207e
<script setup lang="ts">
import { useAuthorizationStore } from '@/stores/authorization';
const authorizationStore = useAuthorizationStore();
const userNickName = computed(() => authorizationStore.userNickName);
</script>
<template>
<div>
<Avatar label="D" class="mr-2" size="large" shape="circle" style="background-color: #60a5fa" />
<span class="text-xl">@{{ userNickName }}</span>
</div>
<a
href="/settings"
class="pi pi-cog ml-auto p-2 -m-2 hover:cursor-pointer"
style="font-size: 2rem"
></a>
</template>
<style scoped></style>
src/input.css 0 → 100644
+ 3
− 0
View file @ 5f2e207e
@tailwind base;
@tailwind components;
@tailwind utilities;
\ No newline at end of file
src/interfaces/authorization.ts
+ 4
− 1
View file @ 5f2e207e
......@@ -2,7 +2,10 @@ import type { IImage, TThemes } from '@/interfaces/environment';
export interface IUserData {
uuid: string;
fullName: string;
nickName: string;
firstName: string;
lastName: string;
middleName: string;
email: string;
phoneNumber: string;
settings: IUserSettings;
......
src/main.ts
+ 11
− 4
View file @ 5f2e207e
......@@ -5,10 +5,17 @@ import { createPinia } from 'pinia';
import PrimeVue from 'primevue/config';
import App from './App.vue';
import router from './router';
import Aura from '@primevue/themes/aura';
const app = createApp(App);
app.use(createPinia());
app.use(router);
app.use(PrimeVue);
app.mount('#app');
app
.use(PrimeVue, {
theme: {
preset: Aura,
options: {}
}
})
.use(createPinia())
.use(router)
.mount('#app');
src/modules/BaseMenu.vue
+ 78
− 12
View file @ 5f2e207e
<script setup lang="ts"></script>
<script setup lang="ts">
import LogoAndLabel from '@/components/LogoAndLabel.vue';
import { useDataStore } from '@/stores/data';
import UserInfoHeaderWithSettings from '@/components/UserInfoHeaderWithSettings.vue';
const route = useRoute();
const emit = defineEmits(['closeCallback']);
const dataStore = useDataStore();
const sheets = ref();
const expandAll = () => {
for (let sheet of sheets.value) {
expandSheet(sheet);
}
expandedKeys.value = { ...expandedKeys.value };
};
const expandSheet = (sheet) => {
if (sheet.children && sheet.children.length) {
expandedKeys.value[sheet.key] = true;
for (let child of sheet.children) {
expandSheet(child);
}
}
};
onMounted(() => {
sheets.value = dataStore.sheets;
expandAll();
});
const expandedKeys = ref({});
</script>
<template>
<Popover>
<div class="h-full">
<ul>
<li>What I want</li>
<li>My targets</li>
<li>My love</li>
<li>My owns</li>
<li>My clowns</li>
</ul>
</div>
</Popover>
<div class="flex flex-col h-full p-4">
<section class="flex justify-between items-center mb-6">
<LogoAndLabel />
<Button
severity="contrast"
@click="emit('closeCallback')"
icon="pi pi-times"
rounded
outlined
></Button>
</section>
<section class="flex items-center justify-between mb-6">
<UserInfoHeaderWithSettings />
</section>
<Divider />
<nav>
<h3 class="text-xl">Menu</h3>
<div class="ml-[58px] mt-4 -mb-2 select-none font-bold">
<a v-if="route.path !== '/'" href="/"
><i class="pi pi-home text-gray-400 pr-2"></i>Главное меню</a
>
<span v-else><i class="pi pi-home text-gray-400 pr-2"></i>Главное меню</span>
</div>
<Tree
:value="sheets"
v-model:expandedKeys="expandedKeys"
pt:root:class="pl-0"
pt:sheetLabel:class="text-white"
>
<template #url="slotProps">
<a
:href="slotProps.node.data"
:class="[
'block',
{
'bg-sky-900 p-2 ml-0 -m-2 rounded-md': route.path === slotProps.node.data
}
]"
>{{ slotProps.node.label }}</a
>
</template>
</Tree>
</nav>
</div>
</template>
<style scoped></style>
src/output.css 0 → 100644
+ 941
− 0
View file @ 5f2e207e
This diff is collapsed.
src/stores/authorization.ts
+ 2
− 1
View file @ 5f2e207e
......@@ -3,11 +3,12 @@ import type { IUserData } from '@/interfaces/authorization';
export const useAuthorizationStore = defineStore('authorizationStore', () => {
const userUuid = ref<string>('e786de50-f33c-4ef9-9dfe-329eed32b023');
const userNickName = ref<string>('malyusgun');
const userData = ref<IUserData | null>();
// const doubleCount = computed(() => count.value * 2);
// function increment() {
// count.value++;
// }
return { userUuid, userData };
return { userUuid, userNickName, userData };
});
src/stores/data.ts 0 → 100644
+ 57
− 0
View file @ 5f2e207e
import { defineStore } from 'pinia';
import type { ISheet } from '@/interfaces/environment';
export const useDataStore = defineStore('dataStore', () => {
const sheets = ref([
{
key: '0',
label: 'Личная жизнь',
data: '/0a49c3f4-57d2-4c82-be20-c7bab0abd623',
icon: 'pi pi-fw pi-inbox',
type: 'url',
children: [
{
key: '0-0',
label: 'Девушка',
data: '/f22dabd2-029b-46ae-8580-a8291449a051',
icon: 'pi pi-fw pi-cog',
type: 'url',
children: [
{
key: '0-0-0',
label: 'Заморочки и проблемы и всё-всё-всё моей любимой девушки',
icon: 'pi pi-fw pi-file',
data: '/83ad3c89-64a2-428d-995c-8008d40cec8a',
type: 'url'
},
{
key: '0-0-1',
label: 'Любимые цветы девушки',
icon: 'pi pi-fw pi-file',
data: '/(uuid of sheet)',
type: 'url'
}
]
},
{
key: '0-1',
label: 'Работа',
data: '/81d8bc92-57cb-4ab2-89c2-63304bd0e5fb',
icon: 'pi pi-fw pi-home',
type: 'url',
children: [
{
key: '0-1-0',
label: 'Pet-projects',
icon: 'pi pi-fw pi-file',
data: '/(uuid of sheet)',
type: 'url'
}
]
}
]
}
]);
return { sheets };
});
tailwind.config.js 0 → 100644
+ 8
− 0
View file @ 5f2e207e
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{html,js,vue}'],
theme: {
extend: {}
},
plugins: []
};
vite.config.ts
+ 8
− 1
View file @ 5f2e207e
......@@ -3,11 +3,18 @@ import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { PrimeVueResolver } from '@primevue/auto-import-resolver';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vue({
template: {}
}),
Components({
resolvers: [PrimeVueResolver()]
}),
AutoImport({
include: [
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
......
yarn.lock
+ 253
− 140
View file @ 5f2e207e
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment