mirror of
https://github.com/sysadminsmedia/homebox.git
synced 2025-12-21 21:33:02 +01:00
d4e28e6f3b
* feat: begin upgrading deps, still very buggy * feat: progress * feat: sort all type issues * fix: sort type issues * fix: import sonner styles * fix: nuxt is the enemy * fix: try sorting issue with workflows * fix: update vitest config for dynamic import of path and defineConfig * fix: add missing import * fix: add time out to try and fix issues * fix: add ui:ci:preview task for frontend build in CI mode * fix: i was silly * feat: add go:ci:with-frontend task for CI mode and remove ui:ci:preview from e2e workflow * fix: update baseURL in Playwright config for local testing to use port 7745 * fix: update E2E_BASE_URL and remove wait for timeout in login test for smoother execution
57 lines
1.7 KiB
Vue
57 lines
1.7 KiB
Vue
<template>
|
|
<Card>
|
|
<NuxtLink :to="`/location/${location.id}`" class="group/location-card transition duration-300">
|
|
<div
|
|
: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="{ '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 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: {
|
|
type: Object as () => LocationOutCount | LocationOut | LocationSummary,
|
|
required: true,
|
|
},
|
|
dense: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const hasCount = computed(() => {
|
|
return !!(props.location as LocationOutCount).itemCount;
|
|
});
|
|
|
|
const count = computed(() => {
|
|
return hasCount.value ? (props.location as LocationOutCount).itemCount : undefined;
|
|
});
|
|
</script>
|