feat: module improvements

src/runtime/components/layout/Card.vue

@@ -0,0 +1,107 @@
+<template>
+  <component
+    :is="$attrs.onSubmit ? 'form': 'div'"
+    :class="cardClass"
+    v-bind="$attrs"
+  >
+    <div
+      v-if="$slots.header"
+      :class="[headerClass, headerBackgroundClass, borderColorClass, !!$slots.default && 'border-b']"
+    >
+      <slot name="header" />
+    </div>
+    <div :class="[bodyClass, bodyBackgroundClass]">
+      <slot />
+    </div>
+    <div
+      v-if="$slots.footer"
+      :class="[footerClass, footerBackgroundClass, borderColorClass, (!!$slots.default || (!$slots.default && !!$slots.header)) && 'border-t']"
+    >
+      <slot name="footer" />
+    </div>
+  </component>
+</template>
+
+<script>
+import { computed } from 'vue'
+import { classNames } from '../../utils/'
+import $ui from '#build/ui'
+
+export default {
+  props: {
+    padded: {
+      type: Boolean,
+      default: false
+    },
+    rounded: {
+      type: Boolean,
+      default: true
+    },
+    baseClass: {
+      type: String,
+      default: () => $ui.card.base
+    },
+    backgroundClass: {
+      type: String,
+      default: () => $ui.card.background
+    },
+    borderColorClass: {
+      type: String,
+      default: () => $ui.card.border
+    },
+    shadowClass: {
+      type: String,
+      default: () => $ui.card.shadow
+    },
+    ringClass: {
+      type: String,
+      default: () => $ui.card.ring
+    },
+    bodyClass: {
+      type: String,
+      default: () => $ui.card.body
+    },
+    bodyBackgroundClass: {
+      type: String,
+      default: null
+    },
+    headerClass: {
+      type: String,
+      default: () => $ui.card.header
+    },
+    headerBackgroundClass: {
+      type: String,
+      default: null
+    },
+    footerClass: {
+      type: String,
+      default: () => $ui.card.footer
+    },
+    footerBackgroundClass: {
+      type: String,
+      default: null
+    },
+    customClass: {
+      type: String,
+      default: null
+    }
+  },
+  setup (props) {
+    const cardClass = computed(() => {
+      return classNames(
+        props.baseClass,
+        props.padded && props.rounded && 'rounded-md',
+        !props.padded && props.rounded && 'sm:rounded-md',
+        props.ringClass,
+        props.shadowClass,
+        props.backgroundClass,
+        props.customClass
+      )
+    })
+
+    return {
+      cardClass
+    }
+  }
+}
+</script>

src/runtime/components/layout/Container.vue

@@ -0,0 +1,41 @@
+<template>
+  <div :class="containerClass">
+    <slot />
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue'
+import { classNames } from '../../utils/'
+import $ui from '#build/ui'
+
+export default {
+  props: {
+    padded: {
+      type: Boolean,
+      default: false
+    },
+    constrained: {
+      type: Boolean,
+      default: true
+    },
+    constrainedClass: {
+      type: String,
+      default: () => $ui.container.constrained
+    }
+  },
+  setup (props) {
+    const containerClass = computed(() => {
+      return classNames(
+        'mx-auto sm:px-6 lg:px-8',
+        props.padded && 'px-4',
+        props.constrained && props.constrainedClass
+      )
+    })
+
+    return {
+      containerClass
+    }
+  }
+}
+</script>