@sfxcode/formkit-primevue 2.4.2 → 2.4.4

package/README.md

@@ -1,14 +1,16 @@
 # Formkit - Primevue
 
-PrimeVue based formkit inputs for using [FormKit](https://formkit.com/) with the [PrimeVue UI Framework](https://www.primefaces.org/primevue/#/).
+PrimeVue based [FormKit Inputs](https://sfxcode.github.io/formkit-primevue/guide/inputs.html) for using [FormKit](https://formkit.com/) with the [PrimeVue UI Framework](https://www.primefaces.org/primevue/#/).
 
 Main focus of this project is to provide configuration based forms with validation.
 
+In addition, you can use the same pattern for **data output** from **schema** using [PrimeOutputs](https://sfxcode.github.io/formkit-primevue/guide/outputs.html).
+
 ## PrimeVue Versions
 
-Actual PrimeVue Version in the main branch is *4.x.*
+Actual PrimeVue Version of the main branch is *4.x.*
 
-PrimeVue 3 is in the prime3 branch.
+PrimeVue 3 is in the prime3 branch, but future development will only focus on PrimeVue 4
 
 ## Docs
 
@@ -30,13 +32,29 @@ app.use(plugin, defaultConfig({
   locales: { de, en },
   // Define the active locale
   locale: 'en',
-  inputs: primeInputs,
+  inputs: primeInputs, 
 }))
 ```
 
+or if using also the output part
+
+```typescript
+import { defaultConfig, plugin } from '@formkit/vue'
+import { primeInputs, primeOutputs } from '@sfxcode/formkit-primevue'
+
+app.use(plugin, defaultConfig({
+  locales: { de, en },
+  // Define the active locale
+  locale: 'en',
+    inputs: { ...primeInputs, ...primeOutputs },
+}))
+```
+
+Important: output elements depends on vue-i18n to style numbers, dates, ...
+
 ### Nuxt
 
-Important: use *autoimport: false* if using primevue formkit validation and include or
+Important: use *autoimport: false* if using PrimeVue-FormKit validation and include or
 exclude not needed components as usual.
 
 Autoimport true prevents elements lookup correctly.
@@ -72,7 +90,7 @@ Prefixing of the PrimeVue component names is not supported.
 
 ### Basic Styling
 
-Basic styling is provided with the [formkit-primevue.scss](https://github.com/sfxcode/formkit-primevue/blob/main/src/sass/formkit-primevue.scss) file.
+Basic styling is provided with the [formkit-primevue.scss](https://github.com/sfxcode/formkit-primevue/blob/main/src/sass/formkit-primevue.scss) file or the corresponding css file in the package.
 
 Features:
 
@@ -84,20 +102,20 @@ You can use it or take it as base for your own styling.
 
 ### Extended Styling
 
-- All inputs are wrapped in a div with a **p-formkit** class
-- Use *wrapperClass* to add additional styleclasses to wrapper div
-- Most Prime Components have access to class / styles attributes
-- Most Prime Components have access to class / styles attributes
+- Styling outerClas, innerClass .... is provided by FormKit
+- All inputs, outputs are wrapped in a div with a **p-formkit** class
+- Most of the Prime Input Components have access to class / styles attributes
 - PT and PTOptions are available ([https://primevue.org/passthrough/](https://primevue.org/passthrough/))
 - [Styling](https://formkit-primevue.netlify.app/styling/base) and [PT](https://formkit-primevue.netlify.app/styling/passThrough) demo available
+- [Grid](https://formkit-primevue.netlify.app/styling/grid) Demo of the provided grid styling (col-[1-12])
 
 ### Samples
 
 Some samples for common tasks are available
 
-- [Repeater](https://formkit-primevue.netlify.app/samples/repeater) (with the help of the useFormKitSchema composable)
-- [Grid](https://formkit-primevue.netlify.app/samples/grid)
-- [Input Editor](https://formkit-primevue.netlify.app/samples/inputEditor) (let you test the configurations in your schema file)
+- [Repeater](https://formkit-primevue.netlify.app/samples/repeater) Use Repeater composable for using repeating values in your schema
+- [Input Editor](https://formkit-primevue.netlify.app/samples/inputEditor) Edit FormKit schema on the based on a provided composable
+- [Form Editor](https://formkit-primevue.netlify.app/samples/formEditor) Basic demo as starter to create Forms visually
 
 ## Showcases
 
@@ -131,7 +149,4 @@ Some samples for common tasks are available
 - ToggleSwitch
 - TreeSelect
 
-## Demo
-[Demo/Playground](https://formkit-primevue.netlify.app/)
-
 ![](formkit-primevue.png)

package/dist/components/PrimeOutputDate.vue

@@ -36,13 +36,13 @@ const converted = computed(() => {
   <div class="p-formkit p-output-date">
     <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
     <span v-if="hasPrefix" class="formkit-prefix">
-      {{ context?.attrs?.prefix }}
+      {{ context?.prefix }}
     </span>
     <span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
       {{ converted }}
     </span>
     <span v-if="hasSuffix" class="formkit-suffix">
-      {{ context?.attrs?.suffix }}
+      {{ context?.suffix }}
     </span>
     <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />
   </div>

package/dist/components/PrimeOutputDuration.vue

@@ -18,13 +18,13 @@ const { formattedDuration } = useOutputDuration()
   <div class="p-formkit p-output-duration">
     <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
     <span v-if="hasPrefix" class="formkit-prefix">
-      {{ context?.attrs?.prefix }}
+      {{ context?.prefix }}
     </span>
     <span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
       {{ formattedDuration(context?._value) }}
     </span>
     <span v-if="hasSuffix" class="formkit-suffix">
-      {{ context?.attrs?.suffix }}
+      {{ context?.suffix }}
     </span>
     <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />
   </div>

package/dist/components/PrimeOutputLink.vue

@@ -13,13 +13,18 @@ const props = defineProps({
 const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
 
 const url = computed(() => props.context?._value.indexOf('http') > -1 ? props.context?._value : `https://${props.context?._value}`)
+
+const title = computed(() => {
+  const value = props.context?._value ?? ''
+  return props.context?.title ?? value
+})
 </script>
 
 <template>
   <div class="p-formkit p-output-link">
     <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
     <span v-if="hasPrefix" class="formkit-prefix">
-      {{ context?.attrs?.prefix }}
+      {{ context?.prefix }}
     </span>
     <a
       :id="context?.id"
@@ -28,10 +33,10 @@ const url = computed(() => props.context?._value.indexOf('http') > -1 ? props.co
       :href="url"
       :target="context?.attrs?.target ?? '_new'"
     >
-      {{ context?._value }}
+      <span>{{ title }}</span>
     </a>
     <span v-if="hasSuffix" class="formkit-suffix">
-      {{ context?.attrs?.suffix }}
+      {{ context?.suffix }}
     </span>
     <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />
   </div>

package/dist/components/PrimeOutputList.vue

@@ -17,7 +17,7 @@ const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection
   <div class="p-formkit p-output-list">
     <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
     <span v-if="hasPrefix" class="formkit-prefix">
-      {{ context?.attrs?.prefix }}
+      {{ context?.prefix }}
     </span>
     <span :id="context?.id" :style="context?.attrs?.style" class="p-output-list-items" :class="context?.attrs?.class">
       <template v-for="(value, index) of context?._value" :key="index">
@@ -26,7 +26,7 @@ const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection
       </template>
     </span>
     <span v-if="hasSuffix" class="formkit-suffix">
-      {{ context?.attrs?.suffix }}
+      {{ context?.suffix }}
     </span>
     <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />
   </div>

package/dist/components/PrimeOutputNumber.vue

@@ -44,13 +44,13 @@ const converted = computed(() => {
   <div class="p-formkit p-output-number">
     <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
     <span v-if="hasPrefix" class="formkit-prefix">
-      {{ context?.attrs?.prefix }}
+      {{ context?.prefix }}
     </span>
     <span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
       {{ converted }}
     </span>
     <span v-if="hasSuffix" class="formkit-suffix">
-      {{ context?.attrs?.suffix }}
+      {{ context?.suffix }}
     </span>
     <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />
   </div>

package/dist/components/PrimeOutputReference.vue

@@ -0,0 +1,62 @@
+<script setup lang='ts'>
+import { type PropType, computed } from 'vue'
+import type { FormKitFrameworkContext } from '@formkit/core'
+import { RouterLink } from 'vue-router'
+import { useFormKitSection } from '../composables'
+
+const props = defineProps({
+  context: {
+    type: Object as PropType<FormKitFrameworkContext>,
+    required: true,
+  },
+})
+
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
+
+const reference = computed(() => {
+  const value = props.context?._value ?? ''
+  let result = props.context?.reference ? `${props.context?.reference}` : 'reference-must-be-set'
+  if (!props.context?.internal && !result.includes('http'))
+    result = `https://${result}`
+  return result.replace(/\{\{.*\}\}/, value)
+})
+
+const title = computed(() => {
+  const value = props.context?._value ?? ''
+  const result = props.context?.title ?? value
+  return `${result}`.replace(/\{\{.*\}\}/, value)
+})
+</script>
+
+<template>
+  <div class="p-formkit p-output-reference">
+    <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
+    <span v-if="hasPrefix" class="formkit-prefix">
+      {{ context?.prefix }}
+    </span>
+    <component
+      :is="context?.linkComponentName ? context?.linkComponentName : RouterLink"
+      v-if="context?.internal"
+      :style="context?.attrs?.style"
+      :class="context?.attrs?.class"
+      :to="reference"
+      v-bind="context?.attrs"
+    >
+      {{ title }}
+    </component>
+    <a
+      v-else
+      :id="context?.id"
+      :style="context?.attrs?.style"
+      :class="context?.attrs?.class"
+      :href="reference"
+      :target="context?.attrs?.target ?? '_new'"
+    >
+      {{ title }}
+    </a>
+    <span v-if="hasSuffix" class="formkit-suffix">
+      {{ context?.suffix }}
+    </span>
+    <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />
+  </div>
+</template>

package/dist/components/PrimeOutputText.vue

@@ -17,17 +17,18 @@ const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection
   <div class="p-formkit p-output-text">
     <i v-if="hasPrefixIcon" class="formkit-prefix-icon" :class="context?.iconPrefix" />
     <span v-if="hasPrefix" class="formkit-prefix">
-      {{ context?.attrs?.prefix }}
+      {{ context?.prefix }}
     </span>
     <span
       :id="context?.id"
       :style="context?.attrs?.style"
       :class="context?.attrs?.class"
     >
-      {{ context?._value }}
+      <span v-if="context?.html" v-html="context?._value" />
+      <span v-else v-text="context?._value" />
     </span>
     <span v-if="hasSuffix" class="formkit-suffix">
-      {{ context?.attrs?.suffix }}
+      {{ context?.suffix }}
     </span>
     <i v-if="hasSuffixIcon" class="formkit-suffix-icon" :class="context?.iconSuffix" />
   </div>

package/dist/composables/useInputEditor.js

@@ -7,7 +7,7 @@ exports.useInputEditor = useInputEditor;
 function useInputEditor() {
   const primeInputWithOptionNames = ["CascadeSelect", "Listbox", "MultiSelect", "RadioButton", "Select", "SelectButton", "TreeSelect"];
   const primeInputNames = [...primeInputWithOptionNames, "AutoComplete", "Checkbox", "ColorPicker", "DatePicker", "Editor", "InputMask", "InputNumber", "InputOtp", "InputText", "Knob", "Password", "Rating", "Slider", "Textarea", "ToggleButton", "ToggleSwitch"].sort();
-  const primeOutputNames = ["OutputBoolean", "OutputDate", "OutputDuration", "OutputLink", "OutputList", "OutputNumber", "OutputText"];
+  const primeOutputNames = ["OutputBoolean", "OutputDate", "OutputDuration", "OutputLink", "OutputList", "OutputNumber", "OutputReference", "OutputText"];
   function editorDataToSchema(data) {
     if (!data) return {};
     const formkitInput = data?._dollar_formkit;
@@ -32,16 +32,17 @@ function useInputEditor() {
       preserve: preserveValue
     };
     let outerClass = "";
-    if (data.outerClassGrid && data.outerClassGrid !== "col-12") outerClass = data.outerClassGrid;
-    if (data.outerClass) outerClass = `${outerClass} ${data.outerClass}`;
-    if (outerClass.trim().length === 0) outerClass = void 0;
+    if (data.outerClass) outerClass = `${outerClass} ${data.outerClass}`.trim();
+    let wrapperClass = "";
+    if (data.wrapperClass) wrapperClass = `${wrapperClass} ${data.wrapperClass}`.trim();
+    let innerClass = "";
+    if (data.innerClass) innerClass = `${innerClass} ${data.innerClass}`.trim();
     const undefinedObject = {
       prime: void 0,
       schemaResultFormKey: void 0,
       _dollar_formkit: void 0,
       slots: void 0,
-      selectButton: void 0,
-      outerClassGrid: void 0
+      selectButton: void 0
     };
     const useOptions = primeInputWithOptionNames.map(s => `prime${s}`).includes(formkitInput);
     let result = {};
@@ -52,6 +53,8 @@ function useInputEditor() {
       ...undefinedObject,
       ...defaultObject,
       outerClass,
+      wrapperClass,
+      innerClass,
       optionLabel: "label",
       optionValue: "value"
     };else result = {
@@ -61,8 +64,16 @@ function useInputEditor() {
       ...undefinedObject,
       ...defaultObject,
       outerClass,
+      wrapperClass,
+      innerClass,
       options: void 0
     };
+    for (const key in result) {
+      const value = result[key];
+      if (typeof value === "string" || value instanceof String) {
+        if (value.trim().length === 0) result[key] = void 0;
+      }
+    }
     return result;
   }
   function dataToSchema(data) {

package/dist/composables/useInputEditor.mjs

@@ -1,7 +1,7 @@
 export function useInputEditor() {
   const primeInputWithOptionNames = ["CascadeSelect", "Listbox", "MultiSelect", "RadioButton", "Select", "SelectButton", "TreeSelect"];
   const primeInputNames = [...primeInputWithOptionNames, "AutoComplete", "Checkbox", "ColorPicker", "DatePicker", "Editor", "InputMask", "InputNumber", "InputOtp", "InputText", "Knob", "Password", "Rating", "Slider", "Textarea", "ToggleButton", "ToggleSwitch"].sort();
-  const primeOutputNames = ["OutputBoolean", "OutputDate", "OutputDuration", "OutputLink", "OutputList", "OutputNumber", "OutputText"];
+  const primeOutputNames = ["OutputBoolean", "OutputDate", "OutputDuration", "OutputLink", "OutputList", "OutputNumber", "OutputReference", "OutputText"];
   function editorDataToSchema(data) {
     if (!data)
       return {};
@@ -22,19 +22,28 @@ export function useInputEditor() {
     const preserveValue = data.preserve ? true : void 0;
     const defaultObject = { readonly: readonlyValue, disabled: disabledValue, preserve: preserveValue };
     let outerClass = "";
-    if (data.outerClassGrid && data.outerClassGrid !== "col-12")
-      outerClass = data.outerClassGrid;
     if (data.outerClass)
-      outerClass = `${outerClass} ${data.outerClass}`;
-    if (outerClass.trim().length === 0)
-      outerClass = void 0;
-    const undefinedObject = { prime: void 0, schemaResultFormKey: void 0, _dollar_formkit: void 0, slots: void 0, selectButton: void 0, outerClassGrid: void 0 };
+      outerClass = `${outerClass} ${data.outerClass}`.trim();
+    let wrapperClass = "";
+    if (data.wrapperClass)
+      wrapperClass = `${wrapperClass} ${data.wrapperClass}`.trim();
+    let innerClass = "";
+    if (data.innerClass)
+      innerClass = `${innerClass} ${data.innerClass}`.trim();
+    const undefinedObject = { prime: void 0, schemaResultFormKey: void 0, _dollar_formkit: void 0, slots: void 0, selectButton: void 0 };
     const useOptions = primeInputWithOptionNames.map((s) => `prime${s}`).includes(formkitInput);
     let result = {};
     if (useOptions)
-      result = { ...data, $formkit: formkitInput, ...tempData, ...undefinedObject, ...defaultObject, outerClass, optionLabel: "label", optionValue: "value" };
+      result = { ...data, $formkit: formkitInput, ...tempData, ...undefinedObject, ...defaultObject, outerClass, wrapperClass, innerClass, optionLabel: "label", optionValue: "value" };
     else
-      result = { ...data, $formkit: formkitInput, ...tempData, ...undefinedObject, ...defaultObject, outerClass, options: void 0 };
+      result = { ...data, $formkit: formkitInput, ...tempData, ...undefinedObject, ...defaultObject, outerClass, wrapperClass, innerClass, options: void 0 };
+    for (const key in result) {
+      const value = result[key];
+      if (typeof value === "string" || value instanceof String) {
+        if (value.trim().length === 0)
+          result[key] = void 0;
+      }
+    }
     return result;
   }
   function dataToSchema(data) {

package/dist/composables/useInputEditorSchema.d.ts

@@ -138,7 +138,6 @@ export declare function useInputEditorSchema(): {
         $formkit: string;
         if: string;
         name: string;
-        value: string;
         label: string;
         optionLabel: string;
         optionValue: string;
@@ -150,6 +149,7 @@ export declare function useInputEditorSchema(): {
         outerClass: string;
         preserve: boolean;
         id?: undefined;
+        value?: undefined;
         filter?: undefined;
         validation?: undefined;
         validationVisibility?: undefined;

package/dist/composables/useInputEditorSchema.js

@@ -60,43 +60,6 @@ function useInputEditorSchema() {
     label: "Submit",
     value: "submit"
   }];
-  const colOptions = [{
-    label: "Col-1",
-    value: "col-1"
-  }, {
-    label: "Col-2",
-    value: "col-2"
-  }, {
-    label: "Col-3",
-    value: "col-3"
-  }, {
-    label: "Col-4",
-    value: "col-4"
-  }, {
-    label: "Col-5",
-    value: "col-5"
-  }, {
-    label: "Col-6",
-    value: "col-6"
-  }, {
-    label: "Col-7",
-    value: "col-7"
-  }, {
-    label: "Col-8",
-    value: "col-8"
-  }, {
-    label: "Col-9",
-    value: "col-9"
-  }, {
-    label: "Col-10",
-    value: "col-10"
-  }, {
-    label: "Col-11",
-    value: "col-11"
-  }, {
-    label: "Col-12",
-    value: "col-12"
-  }];
   function editorSchema(inputOptions = primeInputOptions([...primeInputNames, ...primeOutputNames])) {
     return [{
       $formkit: "primeSelect",
@@ -274,19 +237,20 @@ function useInputEditorSchema() {
       name: "outerClass",
       label: "Outer Class",
       key: "schema_outerClass",
-      outerClass: "col-6",
       preserve: true
     }, {
-      $formkit: "primeSelect",
+      $formkit: "primeInputText",
       if: "$get(selectButton).value === 'showStyle'",
-      name: "outerClassGrid",
-      value: "col-12",
-      label: "Grid Options",
-      optionLabel: "label",
-      optionValue: "value",
-      options: colOptions,
-      key: "schema_outer-class-grid",
-      outerClass: "col-6",
+      name: "wrapperClass",
+      label: "Wrapper Class",
+      key: "schema_wrapperClass",
+      preserve: true
+    }, {
+      $formkit: "primeInputText",
+      if: "$get(selectButton).value === 'showStyle'",
+      name: "innerClass",
+      label: "Inner Class",
+      key: "schema_innerClass",
       preserve: true
     }, {
       $formkit: "primeInputText",
@@ -301,7 +265,6 @@ function useInputEditorSchema() {
       if: "$get(selectButton).value === 'showValidation'",
       name: "validation-visibility",
       label: "Field Validation Visibility",
-      value: "blur",
       optionLabel: "label",
       optionValue: "value",
       options: validationOptions,

package/dist/composables/useInputEditorSchema.mjs

@@ -24,20 +24,6 @@ export function useInputEditorSchema() {
     { label: "Dirty", value: "dirty" },
     { label: "Submit", value: "submit" }
   ];
-  const colOptions = [
-    { label: "Col-1", value: "col-1" },
-    { label: "Col-2", value: "col-2" },
-    { label: "Col-3", value: "col-3" },
-    { label: "Col-4", value: "col-4" },
-    { label: "Col-5", value: "col-5" },
-    { label: "Col-6", value: "col-6" },
-    { label: "Col-7", value: "col-7" },
-    { label: "Col-8", value: "col-8" },
-    { label: "Col-9", value: "col-9" },
-    { label: "Col-10", value: "col-10" },
-    { label: "Col-11", value: "col-11" },
-    { label: "Col-12", value: "col-12" }
-  ];
   function editorSchema(inputOptions = primeInputOptions([...primeInputNames, ...primeOutputNames])) {
     return [
       {
@@ -236,20 +222,22 @@ export function useInputEditorSchema() {
         name: "outerClass",
         label: "Outer Class",
         key: "schema_outerClass",
-        outerClass: "col-6",
         preserve: true
       },
       {
-        $formkit: "primeSelect",
+        $formkit: "primeInputText",
         if: "$get(selectButton).value === 'showStyle'",
-        name: "outerClassGrid",
-        value: "col-12",
-        label: "Grid Options",
-        optionLabel: "label",
-        optionValue: "value",
-        options: colOptions,
-        key: "schema_outer-class-grid",
-        outerClass: "col-6",
+        name: "wrapperClass",
+        label: "Wrapper Class",
+        key: "schema_wrapperClass",
+        preserve: true
+      },
+      {
+        $formkit: "primeInputText",
+        if: "$get(selectButton).value === 'showStyle'",
+        name: "innerClass",
+        label: "Inner Class",
+        key: "schema_innerClass",
         preserve: true
       },
       {
@@ -266,7 +254,6 @@ export function useInputEditorSchema() {
         if: "$get(selectButton).value === 'showValidation'",
         name: "validation-visibility",
         label: "Field Validation Visibility",
-        value: "blur",
         optionLabel: "label",
         optionValue: "value",
         options: validationOptions,

package/dist/definitions/index.d.ts

@@ -26,6 +26,7 @@ export declare const primeInputs: {
 export declare const primeOutputs: {
     primeOutputText: import("@formkit/core").FormKitTypeDefinition;
     primeOutputLink: import("@formkit/core").FormKitTypeDefinition;
+    primeOutputReference: import("@formkit/core").FormKitTypeDefinition;
     primeOutputNumber: import("@formkit/core").FormKitTypeDefinition;
     primeOutputDate: import("@formkit/core").FormKitTypeDefinition;
     primeOutputBoolean: import("@formkit/core").FormKitTypeDefinition;

package/dist/definitions/index.js

@@ -34,6 +34,7 @@ const primeInputs = exports.primeInputs = {
 const primeOutputs = exports.primeOutputs = {
   primeOutputText: _output.primeOutputTextDefinition,
   primeOutputLink: _output.primeOutputLinkDefinition,
+  primeOutputReference: _output.primeOutputReferenceDefinition,
   primeOutputNumber: _output.primeOutputNumberDefinition,
   primeOutputDate: _output.primeOutputDateDefinition,
   primeOutputBoolean: _output.primeOutputBooleanDefinition,

package/dist/definitions/index.mjs

@@ -30,6 +30,7 @@ import {
   primeOutputLinkDefinition,
   primeOutputListDefinition,
   primeOutputNumberDefinition,
+  primeOutputReferenceDefinition,
   primeOutputTextDefinition
 } from "./output.mjs";
 export const primeInputs = {
@@ -60,6 +61,7 @@ export const primeInputs = {
 export const primeOutputs = {
   primeOutputText: primeOutputTextDefinition,
   primeOutputLink: primeOutputLinkDefinition,
+  primeOutputReference: primeOutputReferenceDefinition,
   primeOutputNumber: primeOutputNumberDefinition,
   primeOutputDate: primeOutputDateDefinition,
   primeOutputBoolean: primeOutputBooleanDefinition,

package/dist/definitions/output.d.ts

@@ -3,6 +3,7 @@ export declare const primeOutputTextDefinition: FormKitTypeDefinition;
 export declare const primeOutputDateDefinition: FormKitTypeDefinition;
 export declare const primeOutputNumberDefinition: FormKitTypeDefinition;
 export declare const primeOutputLinkDefinition: FormKitTypeDefinition;
+export declare const primeOutputReferenceDefinition: FormKitTypeDefinition;
 export declare const primeOutputBooleanDefinition: FormKitTypeDefinition;
 export declare const primeOutputDurationDefinition: FormKitTypeDefinition;
 export declare const primeOutputListDefinition: FormKitTypeDefinition;

package/dist/definitions/output.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.primeOutputTextDefinition = exports.primeOutputNumberDefinition = exports.primeOutputListDefinition = exports.primeOutputLinkDefinition = exports.primeOutputDurationDefinition = exports.primeOutputDateDefinition = exports.primeOutputBooleanDefinition = void 0;
+exports.primeOutputTextDefinition = exports.primeOutputReferenceDefinition = exports.primeOutputNumberDefinition = exports.primeOutputListDefinition = exports.primeOutputLinkDefinition = exports.primeOutputDurationDefinition = exports.primeOutputDateDefinition = exports.primeOutputBooleanDefinition = void 0;
 var _vue = require("@formkit/vue");
 var _PrimeOutputText = _interopRequireDefault(require("../components/PrimeOutputText.vue"));
 var _PrimeOutputDate = _interopRequireDefault(require("../components/PrimeOutputDate.vue"));
@@ -12,9 +12,10 @@ var _PrimeOutputLink = _interopRequireDefault(require("../components/PrimeOutput
 var _PrimeOutputBoolean = _interopRequireDefault(require("../components/PrimeOutputBoolean.vue"));
 var _PrimeOutputDuration = _interopRequireDefault(require("../components/PrimeOutputDuration.vue"));
 var _PrimeOutputList = _interopRequireDefault(require("../components/PrimeOutputList.vue"));
+var _PrimeOutputReference = _interopRequireDefault(require("../components/PrimeOutputReference.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const primeOutputTextDefinition = exports.primeOutputTextDefinition = (0, _vue.createInput)(_PrimeOutputText.default, {
-  props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]
+  props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "html"]
 });
 const primeOutputDateDefinition = exports.primeOutputDateDefinition = (0, _vue.createInput)(_PrimeOutputDate.default, {
   props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]
@@ -23,7 +24,10 @@ const primeOutputNumberDefinition = exports.primeOutputNumberDefinition = (0, _v
   props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]
 });
 const primeOutputLinkDefinition = exports.primeOutputLinkDefinition = (0, _vue.createInput)(_PrimeOutputLink.default, {
-  props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]
+  props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "title"]
+});
+const primeOutputReferenceDefinition = exports.primeOutputReferenceDefinition = (0, _vue.createInput)(_PrimeOutputReference.default, {
+  props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "reference", "internal", "linkComponentName", "title"]
 });
 const primeOutputBooleanDefinition = exports.primeOutputBooleanDefinition = (0, _vue.createInput)(_PrimeOutputBoolean.default, {
   props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "trueValue", "falseValue"]

package/dist/definitions/output.mjs

@@ -6,8 +6,9 @@ import PrimeOutputLink from "../components/PrimeOutputLink.vue";
 import PrimeOutputBoolean from "../components/PrimeOutputBoolean.vue";
 import PrimeOutputDuration from "../components/PrimeOutputDuration.vue";
 import PrimeOutputList from "../components/PrimeOutputList.vue";
+import PrimeOutputReference from "../components/PrimeOutputReference.vue";
 export const primeOutputTextDefinition = createInput(PrimeOutputText, {
-  props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]
+  props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "html"]
 });
 export const primeOutputDateDefinition = createInput(PrimeOutputDate, {
   props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]
@@ -16,7 +17,10 @@ export const primeOutputNumberDefinition = createInput(PrimeOutputNumber, {
   props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]
 });
 export const primeOutputLinkDefinition = createInput(PrimeOutputLink, {
-  props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]
+  props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "title"]
+});
+export const primeOutputReferenceDefinition = createInput(PrimeOutputReference, {
+  props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "reference", "internal", "linkComponentName", "title"]
 });
 export const primeOutputBooleanDefinition = createInput(PrimeOutputBoolean, {
   props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "trueValue", "falseValue"]

package/dist/sass/formkit-primevue.scss

@@ -147,10 +147,20 @@ $grid-breakpoints: (
     .p-button {
       margin-right: 0.5rem;
     }
-    span.p-space {
-      margin-right: 3rem;
+    span {
+      .p-space {
+        margin-right: 3rem;
+      }
     }
   }
+
+  .p-chip-item {
+    align-items: center;
+    background: var(--p-surface-500);
+    color: var(--p-surface-0);
+    border-radius: 1rem;
+    padding: 0.2rem 0.5rem;
+  }
 }
 
 // Debug
@@ -182,4 +192,79 @@ $grid-breakpoints: (
       width: percentage(math.div($i, 12));
     }
   }
-}
+}
+
+@include media-breakpoint-up(md) {
+  .formkit-form {
+
+    &.form-horizontal {
+
+      .formkit-wrapper {
+        display: flex;
+
+        label {
+          display: inline-block;
+          padding: 0 0.25rem 0 0;
+          font-size: inherit;
+
+          &:after {
+            content: ":";
+          }
+        }
+      }
+    }
+
+    .p-formkit-data-view & {
+      &.form-horizontal {
+        label {
+          white-space: nowrap;
+        }
+      }
+    }
+
+    .p-formkit-data-edit & {
+
+      &.form-horizontal {
+
+        .formkit-outer {
+          width: 100%;
+
+          label {
+            @apply w-4/12;
+            padding-top: 0.25rem;
+            line-height: normal;
+          }
+
+          .formkit-inner {
+            @apply w-8/12;
+          }
+        }
+
+        div[data-type="primeCheckbox"] {
+          .formkit-inner {
+            margin-left: auto;
+
+            .p-formkit {
+              display: flex
+            }
+
+            label {
+              width: auto;
+              padding: 0;
+            }
+          }
+        }
+
+
+        .formkit-help, .formkit-messages {
+          @apply w-8/12;
+          margin-left: auto;
+        }
+      }
+
+    }
+
+
+  }
+}
+

package/dist/style.css

@@ -1 +1 @@
-:root{--formkit-error-color: #ef9a9a}.formkit-form .formkit-messages{margin:.125rem 0;padding-top:.25rem;padding-left:0}.formkit-form .formkit-message{list-style:none;padding:0;margin:0;color:var(--formkit-error-color);font-size:.8rem}.formkit-form .formkit-outer{padding-bottom:.8rem}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-formkit-icon{box-sizing:border-box;width:100%}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-inputtext,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-textarea,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-password,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-multiselect,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-select,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-editor{box-sizing:border-box;width:100%}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-inputtext.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-textarea.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-password.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-multiselect.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-select.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-editor.p-colorpicker-preview{width:2rem}.formkit-form .formkit-outer .formkit-help{margin:.25rem 0 0 0;font-size:.8rem;color:var(--text-color-secondary)}.formkit-form .formkit-label{display:block;margin:0;padding-bottom:.5rem;font-weight:bold;font-size:.8rem}.formkit-form .p-formkit>*{margin-right:.5rem}.formkit-form .p-formkit>*:last-child,.formkit-form .p-formkit>*:only-child{margin-right:0}.formkit-form .p-formkit-options{display:flex;flex-wrap:wrap;gap:.5rem}.formkit-form .p-formkit-options .p-formkit-option{display:flex;align-items:center}.formkit-form .p-formkit-options .p-formkit-option label{margin-left:.5rem}.formkit-form .formkit-fieldset{margin:0;padding:0;border-radius:0;border:0}.formkit-form .formkit-fieldset:focus-within{border:0}.formkit-form .formkit-fieldset>.formkit-help{margin-top:0;margin-bottom:0}.formkit-form .formkit-legend{display:block;margin:0;padding:0}.formkit-form .formkit-actions{padding-top:.5rem}.formkit-form .p-action-buttons{margin-top:.25rem}.formkit-form .p-action-buttons .p-button{margin-right:.5rem}.formkit-form .p-action-buttons span.p-space{margin-right:3rem}.p-formkit-data-debug pre,.p-formkit-data-debug span{font-size:.75rem;line-height:1rem}@media(min-width: 1024px){.formkit-form{display:flex;flex-wrap:wrap;margin-left:-0.5rem;margin-right:-0.5rem}.formkit-form>*{flex-shrink:0;width:100%;max-width:100%;padding-left:.5rem;padding-right:.5rem}.col-1{width:8.3333333333%}.col-2{width:16.6666666667%}.col-3{width:25%}.col-4{width:33.3333333333%}.col-5{width:41.6666666667%}.col-6{width:50%}.col-7{width:58.3333333333%}.col-8{width:66.6666666667%}.col-9{width:75%}.col-10{width:83.3333333333%}.col-11{width:91.6666666667%}.col-12{width:100%}}
+:root{--formkit-error-color: #ef9a9a}.formkit-form .formkit-messages{margin:.125rem 0;padding-top:.25rem;padding-left:0}.formkit-form .formkit-message{list-style:none;padding:0;margin:0;color:var(--formkit-error-color);font-size:.8rem}.formkit-form .formkit-outer{padding-bottom:.8rem}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-formkit-icon{box-sizing:border-box;width:100%}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-inputtext,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-textarea,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-password,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-multiselect,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-select,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-editor{box-sizing:border-box;width:100%}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-inputtext.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-textarea.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-password.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-multiselect.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-select.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-editor.p-colorpicker-preview{width:2rem}.formkit-form .formkit-outer .formkit-help{margin:.25rem 0 0 0;font-size:.8rem;color:var(--text-color-secondary)}.formkit-form .formkit-label{display:block;margin:0;padding-bottom:.5rem;font-weight:bold;font-size:.8rem}.formkit-form .p-formkit>*{margin-right:.5rem}.formkit-form .p-formkit>*:last-child,.formkit-form .p-formkit>*:only-child{margin-right:0}.formkit-form .p-formkit-options{display:flex;flex-wrap:wrap;gap:.5rem}.formkit-form .p-formkit-options .p-formkit-option{display:flex;align-items:center}.formkit-form .p-formkit-options .p-formkit-option label{margin-left:.5rem}.formkit-form .formkit-fieldset{margin:0;padding:0;border-radius:0;border:0}.formkit-form .formkit-fieldset:focus-within{border:0}.formkit-form .formkit-fieldset>.formkit-help{margin-top:0;margin-bottom:0}.formkit-form .formkit-legend{display:block;margin:0;padding:0}.formkit-form .formkit-actions{padding-top:.5rem}.formkit-form .p-action-buttons{margin-top:.25rem}.formkit-form .p-action-buttons .p-button{margin-right:.5rem}.formkit-form .p-action-buttons span .p-space{margin-right:3rem}.formkit-form .p-chip-item{align-items:center;background:var(--p-surface-500);color:var(--p-surface-0);border-radius:1rem;padding:.2rem .5rem}.p-formkit-data-debug pre,.p-formkit-data-debug span{font-size:.75rem;line-height:1rem}@media(min-width: 1024px){.formkit-form{display:flex;flex-wrap:wrap;margin-left:-0.5rem;margin-right:-0.5rem}.formkit-form>*{flex-shrink:0;width:100%;max-width:100%;padding-left:.5rem;padding-right:.5rem}.col-1{width:8.3333333333%}.col-2{width:16.6666666667%}.col-3{width:25%}.col-4{width:33.3333333333%}.col-5{width:41.6666666667%}.col-6{width:50%}.col-7{width:58.3333333333%}.col-8{width:66.6666666667%}.col-9{width:75%}.col-10{width:83.3333333333%}.col-11{width:91.6666666667%}.col-12{width:100%}}@media(min-width: 768px){.formkit-form.form-horizontal .formkit-wrapper{display:flex}.formkit-form.form-horizontal .formkit-wrapper label{display:inline-block;padding:0 .25rem 0 0;font-size:inherit}.formkit-form.form-horizontal .formkit-wrapper label:after{content:":"}.p-formkit-data-view .formkit-form.form-horizontal label{white-space:nowrap}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer{width:100%}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer label{@apply w-4/12;padding-top:.25rem;line-height:normal}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer .formkit-inner{@apply w-8/12}.p-formkit-data-edit .formkit-form.form-horizontal div[data-type=primeCheckbox] .formkit-inner{margin-left:auto}.p-formkit-data-edit .formkit-form.form-horizontal div[data-type=primeCheckbox] .formkit-inner .p-formkit{display:flex}.p-formkit-data-edit .formkit-form.form-horizontal div[data-type=primeCheckbox] .formkit-inner label{width:auto;padding:0}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-help,.p-formkit-data-edit .formkit-form.form-horizontal .formkit-messages{@apply w-8/12;margin-left:auto}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sfxcode/formkit-primevue",
   "type": "module",
-  "version": "2.4.2",
+  "version": "2.4.4",
   "packageManager": "pnpm@9.4.0+sha256.b6fd0bfda555e7e584ad7e56b30c68b01d5a04f9ee93989f4b93ca8473c49c74",
   "author": {
     "name": "Tom",
@@ -97,7 +97,7 @@
     "vue-i18n": "9.13.1"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "2.24.1",
+    "@antfu/eslint-config": "2.25.0",
     "@formkit/core": "^1.6.5",
     "@primevue/themes": "4.0.4",
     "@types/node": "^22.1.0",
@@ -106,13 +106,13 @@
     "@vitejs/plugin-vue": "^5.1.2",
     "@vitest/coverage-v8": "^2.0.5",
     "@vitest/ui": "^2.0.5",
-    "@vue/compiler-sfc": "^3.4.35",
-    "@vue/server-renderer": "^3.4.35",
+    "@vue/compiler-sfc": "^3.4.37",
+    "@vue/server-renderer": "^3.4.37",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",
     "@vuedx/typecheck": "~0.7.6",
     "@vuedx/typescript-plugin-vue": "~0.7.6",
-    "@vueuse/core": "^10.11.0",
+    "@vueuse/core": "^10.11.1",
     "@vueuse/head": "^2.0.0",
     "changelogen": "^0.5.5",
     "chart.js": "^4.4.3",
@@ -130,16 +130,16 @@
     "unplugin-auto-import": "^0.18.2",
     "unplugin-vue-components": "^0.27.3",
     "vanilla-jsoneditor": "^0.23.8",
-    "vite": "^5.3.5",
-    "vite-plugin-dts": "4.0.0-beta.2",
+    "vite": "^5.4.0",
+    "vite-plugin-dts": "4.0.1",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-pages": "^0.32.3",
     "vite-ssg": "^0.23.8",
-    "vitepress": "1.3.1",
+    "vitepress": "1.3.2",
     "vitest": "^2.0.5",
-    "vue": "^3.4.35",
+    "vue": "^3.4.37",
     "vue-demi": "^0.14.10",
-    "vue-router": "^4.4.2",
+    "vue-router": "^4.4.3",
     "vue-tsc": "^2.0.29"
   }
 }