lots of stuff

frontend/components/Base/ActionsDivider.vue

@@ -12,7 +12,3 @@
     </div>
   </div>
 </template>
-
-<script lang="ts" setup>
-  defineEmits(['edit', 'delete']);
-</script>

frontend/components/Base/Button.vue

@@ -1,10 +1,30 @@
 <template>
-  <button
-    :disabled="disabled || loading"
+  <NuxtLink
+    v-if="to"
+    :to="to"
+    v-bind="attributes"
     class="btn"
     ref="submitBtn"
     :class="{
       loading: loading,
+      'btn-sm': size === 'sm',
+      'btn-lg': size === 'lg',
+    }"
+  >
+    <label v-if="$slots.icon" class="swap swap-rotate mr-2" :class="{ 'swap-active': isHover }">
+      <slot name="icon" />
+    </label>
+    <slot />
+  </NuxtLink>
+  <button
+    v-else
+    v-bind="attributes"
+    class="btn"
+    ref="submitBtn"
+    :class="{
+      loading: loading,
+      'btn-sm': size === 'sm',
+      'btn-lg': size === 'lg',
     }"
   >
     <label v-if="$slots.icon" class="swap swap-rotate mr-2" :class="{ 'swap-active': isHover }">
@@ -15,7 +35,9 @@
 </template>
 
 <script setup lang="ts">
-  defineProps({
+  type Sizes = 'sm' | 'md' | 'lg';
+
+  const props = defineProps({
     loading: {
       type: Boolean,
       default: false,
@@ -24,6 +46,32 @@
       type: Boolean,
       default: false,
     },
+    size: {
+      type: String as () => Sizes,
+      default: 'md',
+    },
+    to: {
+      type: String as () => string | null,
+      default: null,
+    },
+  });
+
+  const attributes = computed(() => {
+    if (props.to) {
+      return {
+        href: props.to,
+      };
+    }
+    return {
+      disabled: props.disabled || props.loading,
+    };
+  });
+
+  const is = computed(() => {
+    if (props.to) {
+      return 'a';
+    }
+    return 'button';
   });
 
   const submitBtn = ref(null);

frontend/components/Base/Details.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="overflow-hidden card  bg-base-100 shadow-xl sm:rounded-lg">
+  <div class="overflow-hidden card bg-base-100 shadow-xl sm:rounded-lg">
     <div class="px-4 py-5 sm:px-6">
       <h3 class="text-lg font-medium leading-6">
         <slot name="title"></slot>
@@ -15,7 +15,9 @@
             {{ dKey }}
           </dt>
           <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-            {{ dValue }}
+            <slot :name="dKey" v-bind="{ key: dKey, value: dValue }">
+              {{ dValue }}
+            </slot>
           </dd>
         </div>
       </dl>
@@ -28,7 +30,7 @@
 
   defineProps({
     details: {
-      type: Object as () => Record<string, StringLike>,
+      type: Object as () => Record<string, StringLike | any>,
       required: true,
     },
   });

frontend/components/Item/Card.vue

@@ -8,7 +8,7 @@
         <Icon name="mdi-package-variant" />
         {{ item.name }}
       </h2>
-      <p>{{ item.description }}</p>
+      <p>{{ description }}</p>
       <div class="flex gap-2 flex-wrap justify-end">
         <LabelChip v-for="label in item.labels" :label="label" class="badge-primary group-hover:badge-secondary" />
       </div>
@@ -19,12 +19,13 @@
 <script setup lang="ts">
   import { Item } from '~~/lib/api/classes/items';
 
-  defineProps({
+  const props = defineProps({
     item: {
       type: Object as () => Item,
       required: true,
     },
   });
+  const description = computed(() => {
+    return truncate(props.item.description, 80);
+  });
 </script>
-
-<style scoped></style>

frontend/components/Location/Card.vue

@@ -4,14 +4,20 @@
     :to="`/location/${location.id}`"
     class="card bg-primary text-primary-content transition duration-300"
   >
-    <div class="card-body p-4">
+    <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 class="badge badge-secondary badge-lg ml-auto text-secondary-content">
+        <span v-if="location.itemCount" class="badge badge-secondary badge-lg ml-auto text-secondary-content">
           {{ location.itemCount }}</span
         >
       </h2>
@@ -27,6 +33,10 @@
       type: Object as () => Location,
       required: true,
     },
+    dense: {
+      type: Boolean,
+      default: false,
+    },
   });
 
   const card = ref(null);