mirrors/homebox
1
0
Fork 0
mirror of https://github.com/sysadminsmedia/homebox.git synced 2025-12-24 06:28:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

migrate pages to shadcn (#628)

Browse Source 
* feat: migrate tools page and label generator to shadcn

* chore: lint issues

* feat: also do profile page

* feat: shadcn 404 page

* feat: login page shadcn

* fix: daisyui ironically breaks the z height for the login page

* feat: componentise the language selector and add it to the login page

* feat: use nuxtlink

* feat: card and table made more shadcn

* feat: shadcn statscard

* chore: lint

* feat: shadcn labelchip and locationcard

* feat: shadcn locations page

* refactor: remove unused new item page

* chore: lint

* feat: shadcn item card

* fix: wrapping of location and lint

* feat: ctrl enter in text area in form submits form

* feat: begin shadcn locations page and remove pageqrcode comp in favour of integrating it into labelmaker

* chore: lint + remove unused code

* fix: remove uneeded margin

* feat: shadcn labels page and fix some issues with location

* feat: shadcn scanner

* chore: lint

* feat: begin shadcning item pages

* feat: shadcn maintenance page

* feat: begin shadcn search page

* fix: quick switch blurry text and crashing page when switching + incorrect z height for create menu

* feat: finish shadcn search page

* chore: lint

* feat: shadcn edit item page

* fix: quickmenumodal bug

* feat: shadcn item details page

* feat: remove all non-color related daisyui classes

* fix: type error

* fix: quick menu modal again :(
This commit is contained in:
Tonya
2025-04-20 08:58:03 +01:00
committed by GitHub
parent 400bc3f341
commit cbaf483788
114 changed files with 2818 additions and 2479 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
frontend/components/Location/Card.vue
View File

@@ -1,36 +1,40 @@
<template>
<NuxtLink
ref="card"
:to="`/location/${location.id}`"
class="card rounded-md bg-base-100 text-base-content shadow-md transition duration-300"
>
<div
class="card-body"
:class="{
'p-4': !dense,
'px-3 py-2': dense,
}"
>
<h2 class="flex items-center justify-between gap-2">
<label class="swap swap-rotate" :class="isActive ? 'swap-active' : ''">
<MdiArrowRight class="swap-on size-6" />
<MdiMapMarkerOutline class="swap-off size-6" />
</label>
<span class="mx-auto">
{{ location.name }}
</span>
<span class="badge badge-primary badge-lg h-6" :class="{ 'opacity-0': !hasCount }">
{{ count }}
</span>
</h2>
</div>
</NuxtLink>
<Card>
<NuxtLink :to="`/location/${location.id}`" class="group/location-card transition duration-300">
<div
class=""
:class="{
'p-4': !dense,
'px-3 py-2': dense,
}"
>
<h2 class="flex items-center justify-between gap-2">
<div class="relative size-6">
<div
class="absolute inset-0 flex items-center justify-center transition-transform duration-300 group-hover/location-card:-rotate-90"
>
<MdiMapMarkerOutline class="size-6 group-hover/location-card:hidden" />
<MdiArrowUp class="hidden size-6 group-hover/location-card:block" />
</div>
</div>
<span class="mx-auto">
{{ location.name }}
</span>
<Badge class="" :class="{ 'opacity-0': !hasCount }">
{{ count }}
</Badge>
</h2>
</div>
</NuxtLink>
</Card>
</template>
<script lang="ts" setup>
import type { LocationOut, LocationOutCount, LocationSummary } from "~~/lib/api/types/data-contracts";
import MdiArrowRight from "~icons/mdi/arrow-right";
import MdiArrowUp from "~icons/mdi/arrow-down";
import MdiMapMarkerOutline from "~icons/mdi/map-marker-outline";
import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
const props = defineProps({
location: {
@@ -52,10 +56,4 @@
return (props.location as LocationOutCount).itemCount;
}
});
const card = ref(null);
const isHover = useElementHover(card);
const { focused } = useFocus(card);
const isActive = computed(() => isHover.value || focused.value);
</script>