refactor(Outputs): Add some more properties and add new PrimeOutputReference component

sfxcode · sfxcode · commit 730f20e77ab3 · 2024-08-04T11:45:39.000+02:00
diff --git a/dev/components/app/AppTopbar.vue b/dev/components/app/AppTopbar.vue
@@ -94,6 +94,7 @@ const items = ref([
             { label: 'Output List', icon: 'pi pi-fw pi-user-edit', route: '/outputs/outputList' },
             { label: 'Output Boolean', icon: 'pi pi-fw pi-user-edit', route: '/outputs/outputBoolean' },
             { label: 'Output Duration', icon: 'pi pi-fw pi-user-edit', route: '/outputs/outputDuration' },
+            { label: 'Output Reference', icon: 'pi pi-fw pi-user-edit', route: '/outputs/outputReference' },
           ],
         },
       ],
diff --git a/dev/pages/outputs/OutputLink.vue b/dev/pages/outputs/OutputLink.vue
@@ -7,12 +7,13 @@ const schema
     {
       $formkit: 'primeOutputLink',
       name: 'link1',
-      label: 'Link',
+      label: 'External Link',
     },
     {
       $formkit: 'primeOutputLink',
       name: 'link2',
-      label: 'No prefix',
+      label: 'Ensure protocol with custom title',
+      title: 'Click me',
     },
 
   ]
diff --git a/dev/pages/outputs/OutputReference.vue b/dev/pages/outputs/OutputReference.vue
@@ -0,0 +1,43 @@
+<script setup lang='ts'>
+const primeAttributes = ''
+const customAttributes = 'iconPrefix, prefix, suffix, iconSuffix'
+
+const schema
+  = [
+    {
+      $formkit: 'primeOutputReference',
+      name: 'externalId',
+      label: 'External Link',
+      reference: 'https://github.com/sfxcode/{{value}}',
+    },
+    {
+      $formkit: 'primeOutputReference',
+      name: 'externalValue',
+      label: 'Another External Link',
+      reference: 'https://github.com/sfxcode/{{valueNameNotImportant}}',
+    },
+    {
+      $formkit: 'primeOutputReference',
+      name: 'internalLink',
+      label: 'Internal Link',
+      internal: true,
+      reference: '/outputs/{{value}}',
+    },
+
+  ]
+
+const data = { externalId: 42, externalValue: 'formkit', internalLink: 'outputLink' }
+</script>
+
+<template>
+  <div class="">
+    <PrimeOutput
+      header="PrimeOutputReference" :schema="schema" :data="data"
+      :prime-attributes="primeAttributes" :custom-attributes="customAttributes"
+    />
+  </div>
+</template>
+
+<style lang='scss' scoped>
+
+</style>
diff --git a/dev/pages/outputs/OutputText.vue b/dev/pages/outputs/OutputText.vue
@@ -9,6 +9,18 @@ const schema
       name: 'name',
       label: 'Basic',
     },
+    {
+      $formkit: 'primeOutputText',
+      name: 'html',
+      label: 'HTML as Text (Default)',
+    },
+    {
+      $formkit: 'primeOutputText',
+      name: 'html',
+      html: true,
+      label: 'HTML Output (v-html)',
+      help: 'Only use on trusted content or sanitize after input !',
+    },
     {
       $formkit: 'primeOutputText',
       id: 'icon',
@@ -27,7 +39,7 @@ const schema
 
   ]
 
-const data = { name: 'Harry Potter', iconLeft: 'Some Text ...', iconRight: 'Another Text ...' }
+const data = { name: 'Harry Potter', iconLeft: 'Some Text ...', iconRight: 'Another Text ...', html: '<b style="color: gold">Bold Hello World</b>' }
 </script>
 
 <template>
diff --git a/docs/.vitepress/theme/components/DisplayOutputComponents.vue b/docs/.vitepress/theme/components/DisplayOutputComponents.vue
@@ -1,7 +1,7 @@
 <script setup lang='ts'>
 import { ref } from 'vue'
 
-const primeOutputNames = ['OutputBoolean', 'OutputDate', 'OutputDuration', 'OutputLink', 'OutputList', 'OutputNumber', 'OutputText']
+const primeOutputNames = ['OutputBoolean', 'OutputDate', 'OutputDuration', 'OutputLink', 'OutputList', 'OutputNumber', 'OutputReference', 'OutputText']
 
 const names = ref(primeOutputNames.sort((a, b) => a.localeCompare(b)))
 </script>
diff --git a/src/components/PrimeOutputDate.vue b/src/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>
diff --git a/src/components/PrimeOutputDuration.vue b/src/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>
diff --git a/src/components/PrimeOutputLink.vue b/src/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>
diff --git a/src/components/PrimeOutputList.vue b/src/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>
diff --git a/src/components/PrimeOutputNumber.vue b/src/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>
diff --git a/src/components/PrimeOutputReference.vue b/src/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>
diff --git a/src/components/PrimeOutputText.vue b/src/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>
diff --git a/src/composables/useInputEditor.ts b/src/composables/useInputEditor.ts
@@ -3,7 +3,7 @@ export function useInputEditor() {
 
   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: any): any {
     if (!data)
diff --git a/src/definitions/index.ts b/src/definitions/index.ts
@@ -31,6 +31,7 @@ import {
   primeOutputLinkDefinition,
   primeOutputListDefinition,
   primeOutputNumberDefinition,
+  primeOutputReferenceDefinition,
   primeOutputTextDefinition,
 } from './output'
 
@@ -63,6 +64,7 @@ export const primeInputs = {
 export const primeOutputs = {
   primeOutputText: primeOutputTextDefinition,
   primeOutputLink: primeOutputLinkDefinition,
+  primeOutputReference: primeOutputReferenceDefinition,
   primeOutputNumber: primeOutputNumberDefinition,
   primeOutputDate: primeOutputDateDefinition,
   primeOutputBoolean: primeOutputBooleanDefinition,
diff --git a/src/definitions/output.ts b/src/definitions/output.ts
@@ -7,9 +7,10 @@ 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: FormKitTypeDefinition = createInput(PrimeOutputText, {
-  props: ['prefix', 'suffix', 'iconPrefix', 'iconSuffix'],
+  props: ['prefix', 'suffix', 'iconPrefix', 'iconSuffix', 'html'],
 })
 
 export const primeOutputDateDefinition: FormKitTypeDefinition = createInput(PrimeOutputDate, {
@@ -21,7 +22,11 @@ export const primeOutputNumberDefinition: FormKitTypeDefinition = createInput(Pr
 })
 
 export const primeOutputLinkDefinition: FormKitTypeDefinition = createInput(PrimeOutputLink, {
-  props: ['prefix', 'suffix', 'iconPrefix', 'iconSuffix'],
+  props: ['prefix', 'suffix', 'iconPrefix', 'iconSuffix', 'title'],
+})
+
+export const primeOutputReferenceDefinition: FormKitTypeDefinition = createInput(PrimeOutputReference, {
+  props: ['prefix', 'suffix', 'iconPrefix', 'iconSuffix', 'reference', 'internal', 'linkComponentName'],
 })
 
 export const primeOutputBooleanDefinition: FormKitTypeDefinition = createInput(PrimeOutputBoolean, {

Original file line number	Diff line number	Diff line change
`@@ -7,12 +7,13 @@ const schema`
`7`	`7`	`{`
`8`	`8`	`$formkit: 'primeOutputLink',`
`9`	`9`	`name: 'link1',`
`10`		`- label: 'Link',`
	`10`	`+ label: 'External Link',`
`11`	`11`	`},`
`12`	`12`	`{`
`13`	`13`	`$formkit: 'primeOutputLink',`
`14`	`14`	`name: 'link2',`
`15`		`- label: 'No prefix',`
	`15`	`+ label: 'Ensure protocol with custom title',`
	`16`	`+ title: 'Click me',`
`16`	`17`	`},`
`17`	`18`
`18`	`19`	`]`