vbatts/homebox
1
0
Fork 0
forked from mirrors/homebox
Code Pull requests Activity

update styles

Browse source
This commit is contained in:
Hayden 2022-08-30 21:22:32 -08:00
parent 939d0a429d
commit 890eb55d27
5 changed files with 235 additions and 196 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/components.d.ts vendored
View file

@ -8,14 +8,12 @@ export {}
declare module '@vue/runtime-core' { declare module '@vue/runtime-core' {
export interface GlobalComponents { export interface GlobalComponents {
AppHeader: typeof import('./src/components/AppHeader.vue')['default'] AppHeader: typeof import('./src/components/AppHeader.vue')['default']
Icon: typeof import('./src/components/Icon.vue')['default'] AppToast: typeof import('./src/components/App/Toast.vue')['default']
FormTextField: typeof import('./src/components/Form/TextField.vue')['default']
'Icon:bx:bxMoon': typeof import('~icons/bx/bx-moon')['default'] 'Icon:bx:bxMoon': typeof import('~icons/bx/bx-moon')['default']
'Icon:bx:bxsMoon': typeof import('~icons/bx/bxs-moon')['default'] 'Icon:bx:bxsMoon': typeof import('~icons/bx/bxs-moon')['default']
'IconAkarIcons:githubFill': typeof import('~icons/akar-icons/github-fill')['default'] 'IconAkarIcons:githubFill': typeof import('~icons/akar-icons/github-fill')['default']
Notifier: typeof import('./src/components/App/Notifier.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView'] RouterView: typeof import('vue-router')['RouterView']
TextField: typeof import('./src/components/Form/TextField.vue')['default']
Toast: typeof import('./src/components/App/Toast.vue')['default']
} }
} }

48
frontend/index.html
View file

@ -1,34 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" data-theme="night"> <html lang="en" data-theme="garden">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> <title>Vitailse | Opinionated vite starter template with TailwindCSS</title>
Vitailse | Opinionated vite starter template with TailwindCSS
</title>
<meta <meta name="description" content="Opinionated vite starter template with TailwindCSS" />
name="description" <link rel="icon" href="/favicon.ico" />
content="Opinionated vite starter template with TailwindCSS" <link rel="icon" href="/favicon.png" type="image/png" />
/> <link rel="alternate icon" href="/favicon.ico" type="image/png" sizes="16x16" />
<link rel="icon" href="/favicon.ico" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
<link rel="icon" href="/favicon.png" type="image/png" /> <link rel="mask-icon" href="/favicon.png" color="#076AE0" />
<link <meta name="theme-color" content="#076AE0" />
rel="alternate icon" </head>
href="/favicon.ico" <body>
type="image/png" <div id="app"></div>
sizes="16x16" <script type="module" src="/src/main.ts"></script>
/> </body>
<link
rel="apple-touch-icon"
href="/apple-touch-icon.png"
sizes="180x180"
/>
<link rel="mask-icon" href="/favicon.png" color="#076AE0" />
<meta name="theme-color" content="#076AE0" />
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html> </html>

76
frontend/src/pages/home.vue
View file

@ -1,6 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { useUserApi } from '@/composables/use-api';
import { useAuthStore } from '@/store/auth'; import { useAuthStore } from '@/store/auth';
import { type Location } from '@/api/classes/locations';
import { Icon } from '@iconify/vue';
import { useUserApi } from '@/composables/use-api';
useHead({ useHead({
title: 'Homebox | Home', title: 'Homebox | Home',
}); });
@ -17,6 +19,17 @@
} }
}); });
const locations = ref<Location[]>([]);
onMounted(async () => {
const { data } = await api.locations.getAll();
if (data) {
console.log(data);
locations.value = data.items;
}
});
const authStore = useAuthStore(); const authStore = useAuthStore();
const router = useRouter(); const router = useRouter();
@ -42,13 +55,28 @@
last: true, last: true,
}, },
]; ];
const dropdown = [
{
name: 'Location',
action: () => {},
},
{
name: 'Item / Asset',
action: () => {},
},
{
name: 'Label',
action: () => {},
},
];
</script> </script>
<template> <template>
<section class="max-w-7xl mx-auto"> <section class="max-w-6xl mx-auto">
<header class="sm:px-6 py-2 lg:p-14 sm:py-6"> <header class="sm:px-6 py-2 lg:px-14 sm:py-6">
<h2 class="mt-1 text-4xl font-bold tracking-tight text-gray-200 sm:text-5xl lg:text-6xl">Homebox</h2> <h2 class="mt-1 text-4xl font-bold tracking-tight text-base-content sm:text-5xl lg:text-6xl">Homebox</h2>
<div class="ml-1 text-lg text-gray-400 space-x-2"> <div class="ml-1 mt-2 text-lg text-base-content/50 space-x-2">
<template v-for="link in links"> <template v-for="link in links">
<router-link <router-link
v-if="!link.action" v-if="!link.action"
@ -63,10 +91,44 @@
<span v-if="!link.last"> / </span> <span v-if="!link.last"> / </span>
</template> </template>
</div> </div>
<div class="flex mt-6">
<div class="dropdown">
<label tabindex="0" class="btn btn-sm">
<span>
<Icon icon="mdi-plus" class="w-5 h-5 mr-2" />
</span>
Create
</label>
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
<li v-for="btn in dropdown">
<button @click="btn.action">
{{ btn.name }}
</button>
</li>
</ul>
</div>
</div>
</header> </header>
</section> </section>
<section class="max-w-7xl mx-auto sm:px-6 lg:px-14"> <section class="max-w-6xl mx-auto sm:px-6 lg:px-14">
{{ user }} <div class="border-b border-gray-600 pb-3 mb-3">
<h3 class="text-lg text-base-content font-medium leading-6">Storage Locations</h3>
</div>
<div class="grid grid-cols-3 gap-4">
<a
:href="`#${l.id}`"
class="card bg-primary text-primary-content hover:-translate-y-1 focus:-translate-y-1 transition duration-300"
v-for="l in locations"
>
<div class="card-body p-4">
<h2 class="flex items-center gap-2">
<Icon icon="mdi-light:home" class="h-5 w-5" height="25" />
{{ l.name }}
<span class="badge badge-accent badge-lg ml-auto text-accent-content text-lg">0</span>
</h2>
</div>
</a>
</div>
</section> </section>
</template> </template>

64
frontend/tsconfig.json
View file

@ -1,34 +1,34 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "esnext", "target": "esnext",
"useDefineForClassFields": true, "useDefineForClassFields": true,
"module": "esnext", "module": "esnext",
"moduleResolution": "node", "moduleResolution": "node",
"strict": true, "strict": true,
"jsx": "preserve", "jsx": "preserve",
"sourceMap": true, "sourceMap": true,
"resolveJsonModule": true, "resolveJsonModule": true,
"esModuleInterop": true, "esModuleInterop": true,
"lib": ["esnext", "dom"], "lib": ["esnext", "dom"],
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"@/*": ["src/*"] "@/*": ["src/*"]
}, },
"types": [ "types": [
"vite/client", "vite/client",
"vite-plugin-vue-layouts/client", "vite-plugin-vue-layouts/client",
"unplugin-icons/types/vue", "unplugin-icons/types/vue",
"vite-plugin-pwa/client", "vite-plugin-pwa/client",
"@intlify/vite-plugin-vue-i18n/client" "@intlify/vite-plugin-vue-i18n/client"
] ]
}, },
"include": [ "include": [
"src/**/*.ts", "src/**/*.ts",
"src/**/*.d.ts", "src/**/*.d.ts",
"src/**/*.tsx", "src/**/*.tsx",
"src/**/*.vue", "src/**/*.vue",
"components.d.ts", "components.d.ts",
"auto-imports.d.ts", "auto-imports.d.ts",
"typed-router.d.ts" "typed-router.d.ts"
] ]
} }

237
frontend/vite.config.ts
View file

@ -13,128 +13,121 @@ import VueRouter from 'unplugin-vue-router/vite';
import { VueRouterExports } from 'unplugin-vue-router'; import { VueRouterExports } from 'unplugin-vue-router';
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
vue(), vue(),
VueRouter({ VueRouter({
dts: true, dts: true,
routesFolder: 'src/pages', routesFolder: 'src/pages',
}), }),
Components({ Components({
dts: true, dts: true,
resolvers: [ dirs: ['src/components'],
IconsResolver({ directoryAsNamespace: true,
prefix: 'icon', resolvers: [
}), IconsResolver({
], prefix: 'icon',
}), }),
Icons({ ],
compiler: 'vue3', }),
}), Icons({
AutoImport({ compiler: 'vue3',
dts: true, }),
// targets to transform AutoImport({
include: [ dts: true,
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx // targets to transform
/\.vue\??/, // .vue include: [
], /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
/\.vue\??/, // .vue
],
dirs: ['./composables'],
// global imports to register // global imports to register
imports: [ imports: [
// presets // presets
'vue', 'vue',
{ '@vue-router': VueRouterExports }, { '@vue-router': VueRouterExports },
'vue-i18n', 'vue-i18n',
'@vueuse/core', '@vueuse/core',
'@vueuse/head', '@vueuse/head',
// custom // custom
], ],
// custom resolvers // custom resolvers
// see https://github.com/antfu/unplugin-auto-import/pull/23/ // see https://github.com/antfu/unplugin-auto-import/pull/23/
resolvers: [], resolvers: [],
}), }),
Layouts(), Layouts(),
VitePWA({ VitePWA({
includeAssets: [ includeAssets: ['favicon-16x16.png', 'favicon-32x32.png', 'favicon.ico', 'robots.txt', 'apple-touch-icon.png'],
'favicon-16x16.png', manifest: {
'favicon-32x32.png', name: 'Vitailse',
'favicon.ico', short_name: 'Vitailse',
'robots.txt', description: 'Opinionated vite template with TailwindCSS',
'apple-touch-icon.png', theme_color: '#076AE0',
], icons: [
manifest: { {
name: 'Vitailse', src: 'pwa-192x192.png',
short_name: 'Vitailse', sizes: '192x192',
description: 'Opinionated vite template with TailwindCSS', type: 'image/png',
theme_color: '#076AE0', },
icons: [ {
{ src: 'pwa-512x512.png',
src: 'pwa-192x192.png', sizes: '512x512',
sizes: '192x192', type: 'image/png',
type: 'image/png', },
}, {
{ src: 'pwa-512x512.png',
src: 'pwa-512x512.png', sizes: '512x512',
sizes: '512x512', type: 'image/png',
type: 'image/png', purpose: 'any maskable',
}, },
{ ],
src: 'pwa-512x512.png', },
sizes: '512x512', }),
type: 'image/png', VueI18n({
purpose: 'any maskable', runtimeOnly: true,
}, compositionOnly: true,
], include: [resolve(__dirname, 'locales/**')],
}, }),
}), ],
VueI18n({ resolve: {
runtimeOnly: true, alias: {
compositionOnly: true, '@': resolve(__dirname, './src'),
include: [resolve(__dirname, 'locales/**')], },
}), },
], server: {
resolve: { fs: {
alias: { strict: true,
'@': resolve(__dirname, './src'), },
}, proxy: {
}, '/api': {
server: { target: 'http://localhost:7745',
fs: { },
strict: true, },
}, },
proxy: { optimizeDeps: {
'/api': { include: ['vue', 'vue-router', '@vueuse/core', '@vueuse/head'],
target: 'http://localhost:7745', },
}, // @ts-ignore
}, ssgOptions: {
}, script: 'async',
optimizeDeps: { formatting: 'minify',
include: ['vue', 'vue-router', '@vueuse/core', '@vueuse/head'], format: 'cjs',
}, onFinished() {
// @ts-ignore generateSitemap();
ssgOptions: { },
script: 'async', mock: true,
formatting: 'minify', },
format: 'cjs', // https://github.com/vitest-dev/vitest
onFinished() { test: {
generateSitemap(); include: ['src/__test__/**/*.test.ts', 'src/**/*.test.ts', 'src/__test__/**/*.spec.ts'],
}, environment: 'jsdom',
mock: true, deps: {
}, inline: ['@vue', '@vueuse', 'vue-demi'],
// https://github.com/vitest-dev/vitest },
test: { },
include: [ ssr: {
'src/__test__/**/*.test.ts', // TODO: workaround until they support native ESM
'src/**/*.test.ts', noExternal: ['workbox-window', /vue-i18n/],
'src/__test__/**/*.spec.ts', },
],
environment: 'jsdom',
deps: {
inline: ['@vue', '@vueuse', 'vue-demi'],
},
},
ssr: {
// TODO: workaround until they support native ESM
noExternal: ['workbox-window', /vue-i18n/],
},
}); });