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,
     },
   });