feat: add PrimeLabel component with help text support for FormKit nodes showing custom plugin sample for demo

sfxcode · sfxcode · commit d4023e355747 · 2025-07-28T23:13:33.000+02:00
diff --git a/dev/components.d.ts b/dev/components.d.ts
@@ -12,6 +12,7 @@ declare module 'vue' {
     AppTopbar: typeof import('./components/app/AppTopbar.vue')['default']
     PrimeData: typeof import('./components/demo/PrimeData.vue')['default']
     PrimeInput: typeof import('./components/demo/PrimeInput.vue')['default']
+    PrimeLabel: typeof import('./components/demo/PrimeLabel.vue')['default']
     PrimeOutput: typeof import('./components/demo/PrimeOutput.vue')['default']
     PrimeSchemaEditor: typeof import('./components/demo/PrimeSchemaEditor.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/dev/components/demo/PrimeLabel.vue b/dev/components/demo/PrimeLabel.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+defineProps({
+  label: {
+    type: String,
+  },
+  help: {
+    type: String,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  requiredSymbol: {
+    type: String,
+    default: '*',
+  },
+})
+</script>
+
+<template>
+  <span v-if="help" v-tooltip="help" class="p-formkit-label">{{ label }}</span>
+  <span v-else class="p-formkit-label">{{ label }}</span>
+  <span class="p-formkit-required">{{ requiredSymbol }}</span>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/dev/modules/formkit.ts b/dev/modules/formkit.ts
@@ -1,12 +1,40 @@
+import type { FormKitExtendableSchemaRoot, FormKitNode } from '@formkit/core'
 import type { UserModule } from '@/types'
 import { createAutoAnimatePlugin, createMultiStepPlugin } from '@formkit/addons'
-import { de, en } from '@formkit/i18n'
 
+import { de, en } from '@formkit/i18n'
 import { defaultConfig, plugin } from '@formkit/vue'
 import { primeInputs, primeOutputs } from 'my-library/definitions'
-import { addPrimeAsteriskPlugin } from 'my-library/plugins'
 import '@formkit/addons/css/multistep'
 
+export function addPrimeLabelPlugin(node: FormKitNode): void {
+  if (!node.props.type.startsWith('prime'))
+    return
+
+  node.on('created', () => {
+    if (node.props.definition?.schema) {
+      const schemaFn = node.props.definition?.schema as FormKitExtendableSchemaRoot
+      node.props.definition!.schema = (sectionsSchema = {}) => {
+        sectionsSchema.label = {
+          children: [
+            {
+              $cmp: 'PrimeLabel',
+              props: {
+                label: '$label',
+                help: '$help',
+              },
+            },
+          ],
+        }
+        sectionsSchema.help = {
+        }
+
+        return schemaFn(sectionsSchema)
+      }
+    }
+  })
+}
+
 export const install: UserModule = ({ app }) => {
   app.use(plugin, defaultConfig({
     locales: { de, en },
@@ -29,7 +57,7 @@ export const install: UserModule = ({ app }) => {
           repeater: ['items'],
         },
       ),
-      addPrimeAsteriskPlugin,
+      addPrimeLabelPlugin,
       createMultiStepPlugin(),
     ],
   }))
diff --git a/dev/modules/primevue.ts b/dev/modules/primevue.ts
@@ -20,6 +20,7 @@ import Toast from 'primevue/toast'
 import ToastService from 'primevue/toastservice'
 import Toolbar from 'primevue/toolbar'
 import Tooltip from 'primevue/tooltip'
+import PrimeLabel from '../components/demo/PrimeLabel.vue'
 import 'primeicons/primeicons.css'
 
 export const install: UserModule = ({ app }) => {
@@ -41,6 +42,8 @@ export const install: UserModule = ({ app }) => {
   app.component('Toast', Toast)
   app.component('Toolbar', Toolbar)
 
+  app.component('PrimeLabel', PrimeLabel)
+
   app.use(PrimeVue, {
     theme: {
       preset: Aura,
