mirror of
https://github.com/sysadminsmedia/homebox.git
synced 2025-12-21 21:33:02 +01:00
cbaf483788
* 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 :(
49 lines
1.4 KiB
Vue
49 lines
1.4 KiB
Vue
<template>
|
|
<Card class="overflow-hidden shadow-xl">
|
|
<CardHeader v-if="$slots.title" class="px-4 py-5 sm:px-6">
|
|
<component :is="collapsable ? 'button' : 'div'" v-on="collapsable ? { click: toggle } : {}">
|
|
<h3 class="flex items-center text-lg font-medium leading-6">
|
|
<slot name="title"></slot>
|
|
<template v-if="collapsable">
|
|
<span class="ml-2 transition-transform" :class="{ 'rotate-180': collapsed }">
|
|
<MdiChevronDown class="size-6" />
|
|
</span>
|
|
</template>
|
|
</h3>
|
|
</component>
|
|
<div>
|
|
<p v-if="$slots.subtitle" class="mt-1 max-w-2xl text-sm text-gray-500">
|
|
<slot name="subtitle"></slot>
|
|
</p>
|
|
<template v-if="$slots['title-actions']">
|
|
<slot name="title-actions"></slot>
|
|
</template>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent
|
|
:class="{
|
|
'max-h-[9000px]': collapsable && !collapsed,
|
|
'max-h-0 overflow-hidden': collapsed,
|
|
}"
|
|
class="p-0 transition-[max-height] duration-200"
|
|
>
|
|
<slot />
|
|
</CardContent>
|
|
</Card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import MdiChevronDown from "~icons/mdi/chevron-down";
|
|
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
|
|
|
defineProps<{
|
|
collapsable?: boolean;
|
|
}>();
|
|
|
|
function toggle() {
|
|
collapsed.value = !collapsed.value;
|
|
}
|
|
|
|
const collapsed = ref(false);
|
|
</script>
|