1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2024-12-23 15:26:31 +00:00
homebox/frontend/components/Location/Card.vue
Hayden 95ab14b866
feat: items-editor ()
* format readme

* update logo

* format html

* add logo to docs

* repository for document and document tokens

* add attachments type and repository

* autogenerate types via scripts

* use autogenerated types

* attachment type updates

* add insured and quantity fields for items

* implement HasID interface for entities

* implement label updates for items

* implement service update method

* WIP item update client side actions

* check err on attachment

* finish types for basic items editor

* remove unused var

* house keeping
2022-09-12 14:47:27 -08:00

47 lines
1.2 KiB
Vue

<template>
<NuxtLink
ref="card"
:to="`/location/${location.id}`"
class="card bg-primary text-primary-content transition duration-300"
>
<div
class="card-body"
:class="{
'p-4': !dense,
'py-2 px-3': dense,
}"
>
<h2 class="flex items-center gap-2">
<label class="swap swap-rotate" :class="isActive ? 'swap-active' : ''">
<Icon name="heroicons-arrow-right" class="swap-on" />
<Icon name="heroicons-map-pin" class="swap-off" />
</label>
{{ location.name }}
<span v-if="location.itemCount" class="badge badge-secondary badge-lg ml-auto text-secondary-content">
{{ location.itemCount }}</span
>
</h2>
</div>
</NuxtLink>
</template>
<script lang="ts" setup>
import { LocationCount } from "~~/lib/api/types/data-contracts";
defineProps({
location: {
type: Object as () => LocationCount,
required: true,
},
dense: {
type: Boolean,
default: false,
},
});
const card = ref(null);
const isHover = useElementHover(card);
const { focused } = useFocus(card);
const isActive = computed(() => isHover.value || focused.value);
</script>