mirror of
https://github.com/hay-kot/homebox.git
synced 2024-11-16 13:48:44 +00:00
update styles
This commit is contained in:
Hayden
parent
939d0a429d
commit
890eb55d27
5 changed files with 235 additions and 196 deletions
6
frontend/components.d.ts
vendored
6
frontend/components.d.ts
vendored
|
|
@ -8,14 +8,12 @@ export {}
|
|||
declare module '@vue/runtime-core' {
|
||||
export interface GlobalComponents {
|
||||
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:bxsMoon': typeof import('~icons/bx/bxs-moon')['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']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
TextField: typeof import('./src/components/Form/TextField.vue')['default']
|
||||
Toast: typeof import('./src/components/App/Toast.vue')['default']
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="night">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>
|
||||
Vitailse | Opinionated vite starter template with TailwindCSS
|
||||
</title>
|
||||
<html lang="en" data-theme="garden">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vitailse | Opinionated vite starter template with TailwindCSS</title>
|
||||
|
||||
<meta
|
||||
name="description"
|
||||
content="Opinionated vite starter template with TailwindCSS"
|
||||
/>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="icon" href="/favicon.png" type="image/png" />
|
||||
<link
|
||||
rel="alternate icon"
|
||||
href="/favicon.ico"
|
||||
type="image/png"
|
||||
sizes="16x16"
|
||||
/>
|
||||
<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>
|
||||
<meta name="description" content="Opinionated vite starter template with TailwindCSS" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="icon" href="/favicon.png" type="image/png" />
|
||||
<link rel="alternate icon" href="/favicon.ico" type="image/png" sizes="16x16" />
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useUserApi } from '@/composables/use-api';
|
||||
import { useAuthStore } from '@/store/auth';
|
||||
import { type Location } from '@/api/classes/locations';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { useUserApi } from '@/composables/use-api';
|
||||
useHead({
|
||||
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 router = useRouter();
|
||||
|
||||
|
|
@ -42,13 +55,28 @@
|
|||
last: true,
|
||||
},
|
||||
];
|
||||
|
||||
const dropdown = [
|
||||
{
|
||||
name: 'Location',
|
||||
action: () => {},
|
||||
},
|
||||
{
|
||||
name: 'Item / Asset',
|
||||
action: () => {},
|
||||
},
|
||||
{
|
||||
name: 'Label',
|
||||
action: () => {},
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="max-w-7xl mx-auto">
|
||||
<header class="sm:px-6 py-2 lg:p-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>
|
||||
<div class="ml-1 text-lg text-gray-400 space-x-2">
|
||||
<section class="max-w-6xl mx-auto">
|
||||
<header class="sm:px-6 py-2 lg:px-14 sm:py-6">
|
||||
<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 mt-2 text-lg text-base-content/50 space-x-2">
|
||||
<template v-for="link in links">
|
||||
<router-link
|
||||
v-if="!link.action"
|
||||
|
|
@ -63,10 +91,44 @@
|
|||
<span v-if="!link.last"> / </span>
|
||||
</template>
|
||||
</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>
|
||||
</section>
|
||||
<section class="max-w-7xl mx-auto sm:px-6 lg:px-14">
|
||||
{{ user }}
|
||||
<section class="max-w-6xl mx-auto sm:px-6 lg:px-14">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,34 +1,34 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"strict": true,
|
||||
"jsx": "preserve",
|
||||
"sourceMap": true,
|
||||
"resolveJsonModule": true,
|
||||
"esModuleInterop": true,
|
||||
"lib": ["esnext", "dom"],
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
},
|
||||
"types": [
|
||||
"vite/client",
|
||||
"vite-plugin-vue-layouts/client",
|
||||
"unplugin-icons/types/vue",
|
||||
"vite-plugin-pwa/client",
|
||||
"@intlify/vite-plugin-vue-i18n/client"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.d.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.vue",
|
||||
"components.d.ts",
|
||||
"auto-imports.d.ts",
|
||||
"typed-router.d.ts"
|
||||
]
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"strict": true,
|
||||
"jsx": "preserve",
|
||||
"sourceMap": true,
|
||||
"resolveJsonModule": true,
|
||||
"esModuleInterop": true,
|
||||
"lib": ["esnext", "dom"],
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
},
|
||||
"types": [
|
||||
"vite/client",
|
||||
"vite-plugin-vue-layouts/client",
|
||||
"unplugin-icons/types/vue",
|
||||
"vite-plugin-pwa/client",
|
||||
"@intlify/vite-plugin-vue-i18n/client"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.d.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.vue",
|
||||
"components.d.ts",
|
||||
"auto-imports.d.ts",
|
||||
"typed-router.d.ts"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,128 +13,121 @@ import VueRouter from 'unplugin-vue-router/vite';
|
|||
import { VueRouterExports } from 'unplugin-vue-router';
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
VueRouter({
|
||||
dts: true,
|
||||
routesFolder: 'src/pages',
|
||||
}),
|
||||
Components({
|
||||
dts: true,
|
||||
resolvers: [
|
||||
IconsResolver({
|
||||
prefix: 'icon',
|
||||
}),
|
||||
],
|
||||
}),
|
||||
Icons({
|
||||
compiler: 'vue3',
|
||||
}),
|
||||
AutoImport({
|
||||
dts: true,
|
||||
// targets to transform
|
||||
include: [
|
||||
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
|
||||
/\.vue\??/, // .vue
|
||||
],
|
||||
plugins: [
|
||||
vue(),
|
||||
VueRouter({
|
||||
dts: true,
|
||||
routesFolder: 'src/pages',
|
||||
}),
|
||||
Components({
|
||||
dts: true,
|
||||
dirs: ['src/components'],
|
||||
directoryAsNamespace: true,
|
||||
resolvers: [
|
||||
IconsResolver({
|
||||
prefix: 'icon',
|
||||
}),
|
||||
],
|
||||
}),
|
||||
Icons({
|
||||
compiler: 'vue3',
|
||||
}),
|
||||
AutoImport({
|
||||
dts: true,
|
||||
// targets to transform
|
||||
include: [
|
||||
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
|
||||
/\.vue\??/, // .vue
|
||||
],
|
||||
dirs: ['./composables'],
|
||||
|
||||
// global imports to register
|
||||
imports: [
|
||||
// presets
|
||||
'vue',
|
||||
{ '@vue-router': VueRouterExports },
|
||||
'vue-i18n',
|
||||
'@vueuse/core',
|
||||
'@vueuse/head',
|
||||
// custom
|
||||
],
|
||||
// global imports to register
|
||||
imports: [
|
||||
// presets
|
||||
'vue',
|
||||
{ '@vue-router': VueRouterExports },
|
||||
'vue-i18n',
|
||||
'@vueuse/core',
|
||||
'@vueuse/head',
|
||||
// custom
|
||||
],
|
||||
|
||||
// custom resolvers
|
||||
// see https://github.com/antfu/unplugin-auto-import/pull/23/
|
||||
resolvers: [],
|
||||
}),
|
||||
Layouts(),
|
||||
VitePWA({
|
||||
includeAssets: [
|
||||
'favicon-16x16.png',
|
||||
'favicon-32x32.png',
|
||||
'favicon.ico',
|
||||
'robots.txt',
|
||||
'apple-touch-icon.png',
|
||||
],
|
||||
manifest: {
|
||||
name: 'Vitailse',
|
||||
short_name: 'Vitailse',
|
||||
description: 'Opinionated vite template with TailwindCSS',
|
||||
theme_color: '#076AE0',
|
||||
icons: [
|
||||
{
|
||||
src: 'pwa-192x192.png',
|
||||
sizes: '192x192',
|
||||
type: 'image/png',
|
||||
},
|
||||
{
|
||||
src: 'pwa-512x512.png',
|
||||
sizes: '512x512',
|
||||
type: 'image/png',
|
||||
},
|
||||
{
|
||||
src: 'pwa-512x512.png',
|
||||
sizes: '512x512',
|
||||
type: 'image/png',
|
||||
purpose: 'any maskable',
|
||||
},
|
||||
],
|
||||
},
|
||||
}),
|
||||
VueI18n({
|
||||
runtimeOnly: true,
|
||||
compositionOnly: true,
|
||||
include: [resolve(__dirname, 'locales/**')],
|
||||
}),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve(__dirname, './src'),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
fs: {
|
||||
strict: true,
|
||||
},
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:7745',
|
||||
},
|
||||
},
|
||||
},
|
||||
optimizeDeps: {
|
||||
include: ['vue', 'vue-router', '@vueuse/core', '@vueuse/head'],
|
||||
},
|
||||
// @ts-ignore
|
||||
ssgOptions: {
|
||||
script: 'async',
|
||||
formatting: 'minify',
|
||||
format: 'cjs',
|
||||
onFinished() {
|
||||
generateSitemap();
|
||||
},
|
||||
mock: true,
|
||||
},
|
||||
// https://github.com/vitest-dev/vitest
|
||||
test: {
|
||||
include: [
|
||||
'src/__test__/**/*.test.ts',
|
||||
'src/**/*.test.ts',
|
||||
'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/],
|
||||
},
|
||||
// custom resolvers
|
||||
// see https://github.com/antfu/unplugin-auto-import/pull/23/
|
||||
resolvers: [],
|
||||
}),
|
||||
Layouts(),
|
||||
VitePWA({
|
||||
includeAssets: ['favicon-16x16.png', 'favicon-32x32.png', 'favicon.ico', 'robots.txt', 'apple-touch-icon.png'],
|
||||
manifest: {
|
||||
name: 'Vitailse',
|
||||
short_name: 'Vitailse',
|
||||
description: 'Opinionated vite template with TailwindCSS',
|
||||
theme_color: '#076AE0',
|
||||
icons: [
|
||||
{
|
||||
src: 'pwa-192x192.png',
|
||||
sizes: '192x192',
|
||||
type: 'image/png',
|
||||
},
|
||||
{
|
||||
src: 'pwa-512x512.png',
|
||||
sizes: '512x512',
|
||||
type: 'image/png',
|
||||
},
|
||||
{
|
||||
src: 'pwa-512x512.png',
|
||||
sizes: '512x512',
|
||||
type: 'image/png',
|
||||
purpose: 'any maskable',
|
||||
},
|
||||
],
|
||||
},
|
||||
}),
|
||||
VueI18n({
|
||||
runtimeOnly: true,
|
||||
compositionOnly: true,
|
||||
include: [resolve(__dirname, 'locales/**')],
|
||||
}),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve(__dirname, './src'),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
fs: {
|
||||
strict: true,
|
||||
},
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:7745',
|
||||
},
|
||||
},
|
||||
},
|
||||
optimizeDeps: {
|
||||
include: ['vue', 'vue-router', '@vueuse/core', '@vueuse/head'],
|
||||
},
|
||||
// @ts-ignore
|
||||
ssgOptions: {
|
||||
script: 'async',
|
||||
formatting: 'minify',
|
||||
format: 'cjs',
|
||||
onFinished() {
|
||||
generateSitemap();
|
||||
},
|
||||
mock: true,
|
||||
},
|
||||
// https://github.com/vitest-dev/vitest
|
||||
test: {
|
||||
include: ['src/__test__/**/*.test.ts', 'src/**/*.test.ts', '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/],
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue