0.1.4: MyFeaturePanel props

Author: eagleoflqj

.eslintrc.cjs

@@ -17,6 +17,8 @@ module.exports = {
     '@typescript-eslint'
   ],
   rules: {
+    "func-call-spacing": "off",
+    "@typescript-eslint/func-call-spacing": "error",
     "no-unused-vars": 0,
     "@typescript-eslint/no-unused-vars": "error",
     "no-undef": 0,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@libreservice/my-widget",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "main": "dist/index.js",
   "type": "module",
   "files": [

src/MyFeature.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { Component } from 'vue'
+import { Component, VNode, defineComponent } from 'vue'
 import { NIcon, NH3 } from 'naive-ui'
 
 defineProps<{
   icon: Component,
   title: string,
-  description: string
+  content?: () => VNode
+  description?: string
 }>()
 </script>
 
@@ -17,5 +18,11 @@ defineProps<{
       style="margin-right: 8px"
     />{{ title }}
   </n-h3>
-  {{ description }}
+  <component
+    :is="defineComponent(() => content!)"
+    v-if="content"
+  />
+  <template v-else>
+    {{ description }}
+  </template>
 </template>

src/MyFeaturePanel.vue

@@ -1,31 +1,40 @@
-<script setup lang="ts">
-import { Component } from 'vue'
+<script lang="ts">
+import { Component, VNode } from 'vue'
 import { NCard, NH2, NGrid, NGi } from 'naive-ui'
 import MyFeature from './MyFeature.vue'
 
-defineProps<{
+interface Props {
+  title: string
   features: {
     icon: Component,
     title: string,
-    description: string
+    content?: () => VNode
+    description?: string
   }[]
-}>()
+}
+</script>
+
+<script setup lang="ts">
+withDefaults(defineProps<Props>(), {
+  title: 'Features'
+})
 </script>
 
 <template>
   <n-card>
     <div style="text-align: center">
-      <n-h2>Features</n-h2>
+      <n-h2>{{ title }}</n-h2>
     </div>
     <n-grid
       :x-gap="16"
       :y-gap="24"
       cols="1 400:2 600:3"
     >
-      <n-gi v-for="{ icon, title, description } of features">
+      <n-gi v-for="{ icon, title: panelTitle, content, description } of features">
         <my-feature
           :icon="icon"
-          :title="title"
+          :title="panelTitle"
+          :content="content"
           :description="description"
         />
       </n-gi>