tethys.backend/resources/js/Components/CardBox.vue

<script setup>
import { mdiCog } from '@mdi/js'
import { computed, useSlots } from 'vue'
import BaseIcon from '@/Components/BaseIcon.vue'

const props = defineProps({
  title: {
    type: String,
    default: null
  },
  icon: {
    type: String,
    default: null
  },
  headerIcon: {
    type: String,
    default: null
  },
  rounded: {
    type: String,
    default: 'rounded-xl'
  },
  hasTable: Boolean,
  empty: Boolean,
  form: Boolean,
  hoverable: Boolean,
  modal: Boolean
})

const emit = defineEmits(['header-icon-click', 'submit'])

const is = computed(() => props.form ? 'form' : 'div')

const slots = useSlots()

const footer = computed(() => slots.footer && !!slots.footer())

const componentClass = computed(() => {
  const base = [
    props.rounded,
    props.modal ? 'dark:bg-slate-900' : 'dark:bg-slate-900/70'
  ]

  if (props.hoverable) {
    base.push('hover:shadow-lg transition-shadow duration-500')
  }

  return base
})

const computedHeaderIcon = computed(() => props.headerIcon ?? mdiCog)

const headerIconClick = () => {
  emit('header-icon-click')
}

const submit = e => {
  emit('submit', e)
}
</script>

<template>
  <component
    :is="is"
    :class="componentClass"
    class="bg-white flex flex-col"
    @submit="submit"
  >
    <header
      v-if="title"
      class="flex items-stretch border-b border-gray-100 dark:border-slate-800"
    >
      <div
        class="flex items-center py-3 grow font-bold"
        :class="[ icon ? 'px-4' : 'px-6' ]"
      >
        <BaseIcon
          v-if="icon"
          :path="icon"
          class="mr-3"
        />
        {{ title }}
      </div>
      <button
        class="flex items-center py-3 px-4 justify-center ring-blue-700 focus:ring"
        @click="headerIconClick"
      >
        <BaseIcon :path="computedHeaderIcon" />
      </button>
    </header>
    <div
      v-if="empty"
      class="text-center py-24 text-gray-500 dark:text-slate-400"
    >
      <p>Nothing's here…</p>
    </div>
    <div
      v-else
      class="flex-1"
      :class="{'p-6':!hasTable}"
    >
      <slot />
    </div>
    <div
      v-if="footer"
      class="p-6 border-t border-gray-100 dark:border-slate-800"
    >
      <slot name="footer" />
    </div>
  </component>
</template>