feat: match prose component to related plugin (#72)

Co-authored-by: BIYA Paul <bpsmartdesign@hotmail.com>

components/base/BaseProse.vue

@@ -15,26 +15,15 @@ const shape = computed(
   () => props.shape ?? appConfig.nui.defaultShapes?.progress
 )
 
-const shapeClasses = computed(() => {
-  switch (shape.value) {
-    case 'straight': {
-      return 'prose-img:rounded-none prose-pre:rounded-none prose-table:rounded-none'
-    }
-    case 'rounded': {
-      return 'prose-img:rounded-md prose-pre:rounded-md prose-table:rounded-md prose-table:border-separate prose-table:border-spacing-0 prose-td:border-t prose-td:border-muted-200 dark:prose-td:border-muted-700'
-    }
-    case 'curved': {
-      return 'prose-img:rounded-xl prose-pre:rounded-xl prose-table:rounded-xl prose-table:border-separate prose-table:border-spacing-0 prose-td:border-t prose-td:border-muted-200 dark:prose-td:border-muted-700'
-    }
-  }
-})
+const shapeStyle = {
+  straight: 'nui-prose-straight',
+  rounded: 'nui-prose-rounded',
+  curved: 'nui-prose-curved',
+}
 </script>
 
 <template>
-  <div
-    class="prose prose-primary prose-muted dark:prose-invert prose-th:p-4 prose-td:p-4 prose-table:bg-white dark:prose-table:bg-muted-800 prose-table:border prose-table:border-muted-200 dark:prose-table:border-muted-700"
-    :class="[shapeClasses]"
-  >
+  <div class="nui-prose" :class="shape && shapeStyle[shape]">
     <slot></slot>
   </div>
 </template>