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/elements/Badge.vue

@@ -4,50 +4,69 @@
   </span>
 </template>
 
-<script setup lang="ts">
-import { computed } from 'vue'
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import { defu } from 'defu'
 import { classNames } from '../../utils'
-import $ui from '#build/ui'
+import { useAppConfig } from '#imports'
+// TODO: Remove
+// @ts-expect-error
+import appConfig from '#build/app.config'
 
-const props = defineProps({
-  size: {
-    type: String,
-    default: 'md',
-    validator (value: string) {
-      return Object.keys($ui.badge.size).includes(value)
+// const appConfig = useAppConfig()
+
+export default defineComponent({
+  props: {
+    size: {
+      type: String,
+      default: () => appConfig.ui.badge.default.size,
+      validator (value: string) {
+        return Object.keys(appConfig.ui.badge.size).includes(value)
+      }
+    },
+    color: {
+      type: String,
+      default: () => appConfig.ui.badge.default.color,
+      validator (value: string) {
+        return appConfig.ui.colors.includes(value)
+      }
+    },
+    variant: {
+      type: String,
+      default: () => appConfig.ui.badge.default.variant,
+      validator (value: string) {
+        return Object.keys(appConfig.ui.badge.variant).includes(value)
+      }
+    },
+    label: {
+      type: String,
+      default: null
+    },
+    ui: {
+      type: Object as PropType<Partial<typeof appConfig.ui.badge>>,
+      default: () => appConfig.ui.badge
     }
   },
-  variant: {
-    type: String,
-    default: 'primary',
-    validator (value: string) {
-      return Object.keys($ui.badge.variant).includes(value)
+  setup (props) {
+    // TODO: Remove
+    const appConfig = useAppConfig()
+
+    const ui = computed<Partial<typeof appConfig.ui.badge>>(() => defu({}, props.ui, appConfig.ui.badge))
+
+    const badgeClass = computed(() => {
+      return classNames(
+        ui.value.base,
+        ui.value.font,
+        ui.value.rounded,
+        ui.value.size[props.size],
+        ui.value.variant[props.variant]?.replaceAll('{color}', props.color)
+      )
+    })
+
+    return {
+      badgeClass
     }
-  },
-  baseClass: {
-    type: String,
-    default: () => $ui.badge.base
-  },
-  rounded: {
-    type: Boolean,
-    default: false
-  },
-  label: {
-    type: String,
-    default: null
   }
 })
-
-const badgeClass = computed(() => {
-  return classNames(
-    props.baseClass,
-    $ui.badge.size[props.size],
-    $ui.badge.variant[props.variant],
-    props.rounded ? 'rounded-full' : 'rounded-md'
-  )
-})
-</script>
-
-<script lang="ts">
-export default { name: 'UBadge' }
 </script>