feat: rewrite to use app config and rework docs (#143)

Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Sébastien Chopin <seb@nuxt.com>

src/runtime/components/layout/Card.vue

@@ -1,114 +1,50 @@
 <template>
   <component
     :is="$attrs.onSubmit ? 'form': 'div'"
-    :class="cardClass"
+    :class="[ui.base, ui.rounded, ui.divide, ui.ring, ui.shadow, ui.background]"
     v-bind="$attrs"
   >
-    <div
-      v-if="$slots.header"
-      :class="[headerClass, headerBackgroundClass, borderColorClass, !!$slots.default && 'border-b']"
-    >
+    <div v-if="$slots.header" :class="[ui.header.base, ui.header.spacing, ui.header.background]">
       <slot name="header" />
     </div>
-    <div :class="[bodyClass, bodyBackgroundClass]">
+    <div :class="[ui.body.base, ui.body.spacing, ui.body.background]">
       <slot />
     </div>
-    <div
-      v-if="$slots.footer"
-      :class="[footerClass, footerBackgroundClass, borderColorClass, (!!$slots.default || (!$slots.default && !!$slots.header)) && 'border-t']"
-    >
+    <div v-if="$slots.footer" :class="[ui.footer.base, ui.footer.spacing, ui.footer.background]">
       <slot name="footer" />
     </div>
   </component>
 </template>
 
-<script setup lang="ts">
-import { computed } from 'vue'
-import { classNames } from '../../utils'
-import $ui from '#build/ui'
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import { defu } from 'defu'
+import { useAppConfig } from '#imports'
+// TODO: Remove
+// @ts-expect-error
+import appConfig from '#build/app.config'
 
-const props = defineProps({
-  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
-  },
-  roundedClass: {
-    type: String,
-    default: () => $ui.card.rounded,
-    validator (value: string) {
-      return !value || ['sm', 'md', 'lg', 'xl', '2xl', '3xl'].map(size => `rounded-${size}`).includes(value)
+// const appConfig = useAppConfig()
+
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    ui: {
+      type: Object as PropType<Partial<typeof appConfig.ui.card>>,
+      default: () => appConfig.ui.card
     }
   },
-  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) {
+    // TODO: Remove
+    const appConfig = useAppConfig()
+
+    const ui = computed<Partial<typeof appConfig.ui.card>>(() => defu({}, props.ui, appConfig.ui.card))
+
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui
+    }
   }
 })
-
-const cardClass = computed(() => {
-  return classNames(
-    props.baseClass,
-    props.padded && props.rounded && props.roundedClass,
-    !props.padded && props.rounded && props.roundedClass && `sm:${props.roundedClass}`,
-    props.ringClass,
-    props.shadowClass,
-    props.backgroundClass,
-    props.customClass
-  )
-})
-</script>
-
-<script lang="ts">
-export default {
-  name: 'UCard',
-  inheritAttrs: false
-}
 </script>

src/runtime/components/layout/Container.vue

@@ -1,38 +1,37 @@
 <template>
-  <div :class="containerClass">
+  <div :class="[ui.base, ui.spacing, ui.constrained]">
     <slot />
   </div>
 </template>
 
-<script setup lang="ts">
-import { computed } from 'vue'
-import { classNames } from '../../utils'
-import $ui from '#build/ui'
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import { defu } from 'defu'
+import { useAppConfig } from '#imports'
+// TODO: Remove
+// @ts-expect-error
+import appConfig from '#build/app.config'
 
-const props = defineProps({
-  padded: {
-    type: Boolean,
-    default: false
+// const appConfig = useAppConfig()
+
+export default defineComponent({
+  props: {
+    ui: {
+      type: Object as PropType<Partial<typeof appConfig.ui.container>>,
+      default: () => appConfig.ui.container
+    }
   },
-  constrained: {
-    type: Boolean,
-    default: true
-  },
-  constrainedClass: {
-    type: String,
-    default: () => $ui.container.constrained
+  setup (props) {
+    // TODO: Remove
+    const appConfig = useAppConfig()
+
+    const ui = computed<Partial<typeof appConfig.ui.container>>(() => defu({}, props.ui, appConfig.ui.container))
+
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui
+    }
   }
 })
-
-const containerClass = computed(() => {
-  return classNames(
-    'mx-auto sm:px-6 lg:px-8',
-    props.padded && 'px-4',
-    props.constrained && props.constrainedClass
-  )
-})
-</script>
-
-<script lang="ts">
-export default { name: 'UContainer' }
 </script>