@sfxcode/formkit-primevue 3.3.3 → 3.3.4

package/dist/components/PrimeOutputDate.vue

@@ -1,51 +1,51 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { PropType } from 'vue'
-import type { FormKitIconProps } from './FormKitIcon.vue'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useFormKitSection } from '../composables'
-import FormKitIcon from './FormKitIcon.vue'
-import FormKitPrefix from './FormKitPrefix.vue'
-import FormKitSuffix from './FormKitSuffix.vue'
-
+<script setup>
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useFormKitSection } from "../composables/index.ts";
+import FormKitIcon from "./FormKitIcon.vue";
+import FormKitPrefix from "./FormKitPrefix.vue";
+import FormKitSuffix from "./FormKitSuffix.vue";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext> & FormKitIconProps,
-    required: true,
-  },
-})
-
-const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
-
-const { d } = useI18n()
-
+    type: Object,
+    required: true
+  }
+});
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context);
+const { d } = useI18n();
 const converted = computed(() => {
   if (props?.context?._value) {
-    let result = ''
-    const format = props?.context?.attrs?.value?.format ? props?.context?.attrs.value.format : 'short'
+    let result = "";
+    const format = props?.context?.attrs?.value?.format ? props?.context?.attrs.value.format : "short";
     try {
-      result = d(props?.context?._value, format)
-    }
-    // eslint-disable-next-line unused-imports/no-unused-vars
-    catch (e) {
+      result = d(props?.context?._value, format);
+    } catch (e) {
     }
-    return result
-  }
-  else {
-    return ''
+    return result;
+  } else {
+    return "";
   }
-})
+});
 </script>
 
 <template>
   <div class="p-formkit p-output-date">
-    <FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix as string" :on-click="context?.onIconPrefixClicked as (() => void)" position="prefix" />
+    <FormKitIcon
+      v-if="hasPrefixIcon"
+      :icon-class="context?.iconPrefix as string"
+      :on-click="context?.onIconPrefixClicked as () => void"
+      position="prefix"
+    />
     <FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix as string" />
     <span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
       {{ converted }}
     </span>
     <FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix as string" />
-    <FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix as string" :on-click="context?.onIconSuffixClicked as (() => void)" position="suffix" />
+    <FormKitIcon
+      v-if="hasSuffixIcon"
+      :icon-class="context?.iconSuffix as string"
+      :on-click="context?.onIconSuffixClicked as () => void"
+      position="suffix"
+    />
   </div>
 </template>

package/dist/components/PrimeOutputDuration.vue

@@ -1,32 +1,36 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { PropType } from 'vue'
-import type { FormKitIconProps } from './FormKitIcon.vue'
-import { useFormKitSection, useOutputDuration } from '../composables'
-import FormKitIcon from './FormKitIcon.vue'
-import FormKitPrefix from './FormKitPrefix.vue'
-import FormKitSuffix from './FormKitSuffix.vue'
-
+<script setup>
+import { useFormKitSection, useOutputDuration } from "../composables/index.ts";
+import FormKitIcon from "./FormKitIcon.vue";
+import FormKitPrefix from "./FormKitPrefix.vue";
+import FormKitSuffix from "./FormKitSuffix.vue";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext> & FormKitIconProps,
-    required: true,
-  },
-})
-
-const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
-
-const { formattedDuration } = useOutputDuration()
+    type: Object,
+    required: true
+  }
+});
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context);
+const { formattedDuration } = useOutputDuration();
 </script>
 
 <template>
   <div class="p-formkit p-output-duration">
-    <FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix as string" :on-click="context?.onIconPrefixClicked as (() => void)" position="prefix" />
+    <FormKitIcon
+      v-if="hasPrefixIcon"
+      :icon-class="context?.iconPrefix as string"
+      :on-click="context?.onIconPrefixClicked as () => void"
+      position="prefix"
+    />
     <FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix as string" />
     <span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
       {{ formattedDuration(context?._value) }}
     </span>
     <FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix as string" />
-    <FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix as string" :on-click="context?.onIconSuffixClicked as (() => void)" position="suffix" />
+    <FormKitIcon
+      v-if="hasSuffixIcon"
+      :icon-class="context?.iconSuffix as string"
+      :on-click="context?.onIconSuffixClicked as () => void"
+      position="suffix"
+    />
   </div>
 </template>

package/dist/components/PrimeOutputLink.vue

@@ -1,38 +1,35 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { PropType } from 'vue'
-import type { FormKitIconProps } from './FormKitIcon.vue'
-import { computed } from 'vue'
-import { useFormKitSection } from '../composables'
-import FormKitIcon from './FormKitIcon.vue'
-import FormKitPrefix from './FormKitPrefix.vue'
-import FormKitSuffix from './FormKitSuffix.vue'
-
+<script setup>
+import { computed } from "vue";
+import { useFormKitSection } from "../composables/index.ts";
+import FormKitIcon from "./FormKitIcon.vue";
+import FormKitPrefix from "./FormKitPrefix.vue";
+import FormKitSuffix from "./FormKitSuffix.vue";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext> & FormKitIconProps,
-    required: true,
-  },
-})
-
-const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
-
+    type: Object,
+    required: true
+  }
+});
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context);
 const url = computed(() => {
   if (props.context?._value)
-    return props.context?._value.indexOf('http') > -1 ? props.context?._value : `https://${props.context?._value}`
-  else
-    return ''
-})
-
+    return props.context?._value.indexOf("http") > -1 ? props.context?._value : `https://${props.context?._value}`;
+  else return "";
+});
 const title = computed(() => {
-  const value = props.context?._value ?? ''
-  return props.context?.title ?? value
-})
+  const value = props.context?._value ?? "";
+  return props.context?.title ?? value;
+});
 </script>
 
 <template>
   <div class="p-formkit p-output-link">
-    <FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix as string" :on-click="context?.onIconPrefixClicked as (() => void)" position="prefix" />
+    <FormKitIcon
+      v-if="hasPrefixIcon"
+      :icon-class="context?.iconPrefix as string"
+      :on-click="context?.onIconPrefixClicked as () => void"
+      position="prefix"
+    />
     <FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix as string" />
     <a
       v-if="context?.value"
@@ -45,6 +42,11 @@ const title = computed(() => {
       <span>{{ title }}</span>
     </a>
     <FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix as string" />
-    <FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix as string" :on-click="context?.onIconSuffixClicked as (() => void)" position="suffix" />
+    <FormKitIcon
+      v-if="hasSuffixIcon"
+      :icon-class="context?.iconSuffix as string"
+      :on-click="context?.onIconSuffixClicked as () => void"
+      position="suffix"
+    />
   </div>
 </template>

package/dist/components/PrimeOutputList.vue

@@ -1,68 +1,94 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { PropType } from 'vue'
-import type { FormKitIconProps } from './FormKitIcon.vue'
-import { computed } from 'vue'
-import { useFormKitSection } from '../composables'
-import FormKitIcon from './FormKitIcon.vue'
-import FormKitPrefix from './FormKitPrefix.vue'
-import FormKitSuffix from './FormKitSuffix.vue'
-
-export interface PrimeOutputListProps {
-  convertValue?: (array: []) => []
-}
-
+<script setup>
+import { computed } from "vue";
+import { useFormKitSection } from "../composables/index.ts";
+import FormKitIcon from "./FormKitIcon.vue";
+import FormKitPrefix from "./FormKitPrefix.vue";
+import FormKitSuffix from "./FormKitSuffix.vue";
+import { options } from "@formkit/inputs";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext> & FormKitIconProps & PrimeOutputListProps,
-    required: true,
-  },
-})
-
+    type: Object,
+    required: true
+  }
+});
 const listStyle = computed(() => {
-  return props.context?.listStyle || 'span'
-})
-
-const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
-
+  return props.context?.listStyle || "span";
+});
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context);
 const getListValues = computed(() => {
-  const values = Array.isArray(props.context?._value) ? props.context._value : []
-  if (typeof props.context?.convertValue === 'function') {
-    return props.context.convertValue([...values])
+  const values = Array.isArray(props.context?._value) ? props.context._value : [];
+  if (props.context?.options && props.context?.optionValue) {
+    const key = "" + props.context.optionValue;
+    return values.map((value) => {
+      const foundOption = props.context?.options?.find((option) => option[key] === value);
+      return foundOption ? foundOption[props.context?.optionLabel] : value;
+    });
+  } else if (typeof props.context?.convertValue === "function") {
+    return props.context.convertValue([...values]);
   }
-  return values
-})
-
-const dividerClass = computed(() => props.context?.dividerClass || '')
-const itemClass = computed(() => props.context?.itemClass || '')
-const listItemsClass = computed(() => props.context?.attrs?.class || '')
+  return values;
+});
+const dividerClass = computed(() => props.context?.dividerClass || "");
+const itemClass = computed(() => props.context?.itemClass || "");
+const listItemsClass = computed(() => props.context?.attrs?.class || "");
 </script>
 
 <template>
   <div class="p-formkit p-output-list">
-    <FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix as string" :on-click="context?.onIconPrefixClicked as (() => void)" position="prefix" />
+    <FormKitIcon
+      v-if="hasPrefixIcon"
+      :icon-class="context?.iconPrefix as string"
+      :on-click="context?.onIconPrefixClicked as () => void"
+      position="prefix"
+    />
     <FormKitPrefix v-if="hasPrefix && listStyle === 'span'" :prefix="context?.prefix as string" />
-    <span v-if="listStyle === 'span'" :id="context?.id" :style="context?.attrs?.style" class="p-output-list-items" :class="listItemsClass">
+    <span
+      v-if="listStyle === 'span'"
+      :id="context?.id"
+      :style="context?.attrs?.style"
+      class="p-output-list-items"
+      :class="listItemsClass"
+    >
       <template v-for="(value, index) of getListValues" :key="index">
-        <span v-if="index !== 0" class="p-output-list-divider" :class="dividerClass">{{ context?.divider ?? ', ' }}</span>
+        <span v-if="index !== 0" class="p-output-list-divider" :class="dividerClass">{{
+          context?.divider ?? ", "
+        }}</span>
         <span class="p-output-list-item" :class="itemClass">{{ value }}</span>
       </template>
     </span>
-    <div v-if="listStyle === 'div'" :id="context?.id" :style="context?.attrs?.style" class="p-output-list-items" :class="listItemsClass">
+    <div
+      v-if="listStyle === 'div'"
+      :id="context?.id"
+      :style="context?.attrs?.style"
+      class="p-output-list-items"
+      :class="listItemsClass"
+    >
       <template v-for="(value, index) of getListValues" :key="index">
         <div class="p-output-list-item" :class="itemClass">
           {{ value }}
         </div>
       </template>
     </div>
-    <ul v-if="listStyle === 'ul'" :id="context?.id" :style="context?.attrs?.style" class="p-output-list-items" :class="listItemsClass">
+    <ul
+      v-if="listStyle === 'ul'"
+      :id="context?.id"
+      :style="context?.attrs?.style"
+      class="p-output-list-items"
+      :class="listItemsClass"
+    >
       <li v-for="(value, index) of getListValues" :key="index">
         <span class="p-output-list-item" :class="itemClass">
           {{ value }}
         </span>
       </li>
     </ul>
-    <ol v-if="listStyle === 'ol'" :id="context?.id" :style="context?.attrs?.style" class="p-output-list-items" :class="listItemsClass">
+    <ol
+      v-if="listStyle === 'ol'"
+      :id="context?.id"
+      :style="context?.attrs?.style"
+      class="p-output-list-items"
+      :class="listItemsClass"
+    >
       <li v-for="(value, index) of getListValues" :key="index">
         <span class="p-output-list-item" :class="itemClass">
           {{ value }}
@@ -70,6 +96,11 @@ const listItemsClass = computed(() => props.context?.attrs?.class || '')
       </li>
     </ol>
     <FormKitSuffix v-if="hasSuffix && listStyle === 'span'" :suffix="context?.suffix as string" />
-    <FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix as string" :on-click="context?.onIconSuffixClicked as (() => void)" position="suffix" />
+    <FormKitIcon
+      v-if="hasSuffixIcon"
+      :icon-class="context?.iconSuffix as string"
+      :on-click="context?.onIconSuffixClicked as () => void"
+      position="suffix"
+    />
   </div>
 </template>

package/dist/components/PrimeOutputNumber.vue

@@ -1,59 +1,56 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { PropType } from 'vue'
-import type { FormKitIconProps } from './FormKitIcon.vue'
-
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useFormKitSection } from '../composables'
-import FormKitIcon from './FormKitIcon.vue'
-import FormKitPrefix from './FormKitPrefix.vue'
-import FormKitSuffix from './FormKitSuffix.vue'
-
+<script setup>
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useFormKitSection } from "../composables/index.ts";
+import FormKitIcon from "./FormKitIcon.vue";
+import FormKitPrefix from "./FormKitPrefix.vue";
+import FormKitSuffix from "./FormKitSuffix.vue";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext> & FormKitIconProps,
-    required: true,
-  },
-})
-
-const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
-
-const { n } = useI18n()
-
+    type: Object,
+    required: true
+  }
+});
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context);
+const { n } = useI18n();
 const converted = computed(() => {
-  const value = props?.context?._value
+  const value = props?.context?._value;
   if (value) {
-    let result = ''
-    const format = props?.context?.attrs?.format ? props?.context?.attrs?.format : 'short'
+    let result = "";
+    const format = props?.context?.attrs?.format ? props?.context?.attrs?.format : "short";
     try {
-      result = n(value, format)
-    }
-    // eslint-disable-next-line unused-imports/no-unused-vars
-    catch (e) {
+      result = n(value, format);
+    } catch (e) {
       try {
-        result = n(+value, format)
-      }
-      // eslint-disable-next-line unused-imports/no-unused-vars
-      catch (e) {
+        result = n(+value, format);
+      } catch (e2) {
       }
     }
-    return result
-  }
-  else {
-    return ''
+    return result;
+  } else {
+    return "";
   }
-})
+});
 </script>
 
 <template>
   <div class="p-formkit p-output-number">
-    <FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix as string" :on-click="context?.onIconPrefixClicked as (() => void)" position="prefix" />
+    <FormKitIcon
+      v-if="hasPrefixIcon"
+      :icon-class="context?.iconPrefix as string"
+      :on-click="context?.onIconPrefixClicked as () => void"
+      position="prefix"
+    />
     <FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix as string" />
     <span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
       {{ converted }}
     </span>
     <FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix as string" />
-    <FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix as string" :on-click="context?.onIconSuffixClicked as (() => void)" position="suffix" />
+    <FormKitIcon
+      v-if="hasSuffixIcon"
+      :icon-class="context?.iconSuffix as string"
+      :on-click="context?.onIconSuffixClicked as () => void"
+      position="suffix"
+    />
   </div>
 </template>

package/dist/components/PrimeOutputReference.vue

@@ -1,40 +1,37 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { PropType } from 'vue'
-import type { FormKitIconProps } from './FormKitIcon.vue'
-import { computed } from 'vue'
-import { useFormKitSection } from '../composables'
-import FormKitIcon from './FormKitIcon.vue'
-import FormKitPrefix from './FormKitPrefix.vue'
-import FormKitSuffix from './FormKitSuffix.vue'
-
+<script setup>
+import { computed } from "vue";
+import { useFormKitSection } from "../composables/index.ts";
+import FormKitIcon from "./FormKitIcon.vue";
+import FormKitPrefix from "./FormKitPrefix.vue";
+import FormKitSuffix from "./FormKitSuffix.vue";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext> & FormKitIconProps,
-    required: true,
-  },
-})
-
-const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
-
+    type: Object,
+    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 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)
-})
+  const value = props.context?._value ?? "";
+  const result = props.context?.title ?? value;
+  return `${result}`.replace(/\{\{.*\}\}/, value);
+});
 </script>
 
 <template>
   <div class="p-formkit p-output-reference">
-    <FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix as string" :on-click="context?.onIconPrefixClicked as (() => void)" position="prefix" />
+    <FormKitIcon
+      v-if="hasPrefixIcon"
+      :icon-class="context?.iconPrefix as string"
+      :on-click="context?.onIconPrefixClicked as () => void"
+      position="prefix"
+    />
     <FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix as string" />
     <component
       :is="context?.linkComponentName ? context?.linkComponentName : 'RouterLink'"
@@ -57,6 +54,11 @@ const title = computed(() => {
       {{ title }}
     </a>
     <FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix as string" />
-    <FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix as string" :on-click="context?.onIconSuffixClicked as (() => void)" position="suffix" />
+    <FormKitIcon
+      v-if="hasSuffixIcon"
+      :icon-class="context?.iconSuffix as string"
+      :on-click="context?.onIconSuffixClicked as () => void"
+      position="suffix"
+    />
   </div>
 </template>