@sfxcode/formkit-openvue 0.0.0-stage → 0.9.0

package/dist/components/FormListbox.vue

@@ -0,0 +1,482 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useFormKitInput } from "../composables";
+const props = defineProps({ context: {
+	type: Object,
+	required: true
+} });
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, handleChange, modelValue } = useFormKitInput(props.context);
+// Computed properties for transfer mode styling
+const transferContainerClass = computed(() => {
+	return props.context.transferContainerClass || "p-formkit-transfer";
+});
+const transferListContainerClass = computed(() => {
+	return props.context.transferListContainerClass || "p-formkit-transfer-list-container";
+});
+const transferButtonClass = computed(() => {
+	return props.context.transferButtonClass || "";
+});
+const transferButtonSeverity = computed(() => {
+	return props.context.transferButtonSeverity || "secondary";
+});
+const transferDragDrop = computed(() => {
+	return props.context.transferDragDrop ?? true;
+});
+const transferSlotNames = computed(() => {
+	return validSlotNames.value.filter((slotName) => slotName !== "option");
+});
+// Transfer List functionality
+const optionValueKey = computed(() => {
+	const key = props.context.optionValue;
+	return typeof key === "string" ? key : null;
+});
+// Helper function to convert values to full objects
+function valuesToObjects(values) {
+	if (!optionValueKey.value) return values;
+	const options = props.context?.options || [];
+	return values.map((val) => {
+		if (typeof val === "object") return val;
+		return options.find((opt) => opt[optionValueKey.value] === val) || val;
+	});
+}
+// Initialize targetItems by converting any values to full objects
+const initialTargetItems = Array.isArray(modelValue.value) ? valuesToObjects(modelValue.value) : [];
+const targetItems = ref(initialTargetItems);
+const sourceSelection = ref([]);
+const targetSelection = ref([]);
+const transferHeaderClass = computed(() => {
+	return props.context.transferHeaderClass || "text-base font-semibold";
+});
+const sourceItems = computed(() => {
+	const options = props.context?.options || [];
+	if (!Array.isArray(options)) return [];
+	return options.filter((item) => {
+		const itemValue = optionValueKey.value && typeof item === "object" ? item[optionValueKey.value] : item;
+		return !targetItems.value.some((t) => {
+			const targetValue = optionValueKey.value && typeof t === "object" ? t[optionValueKey.value] : t;
+			return targetValue === itemValue;
+		});
+	});
+});
+const dragSource = ref(null);
+const draggedItems = ref([]);
+const activeDropzone = ref(null);
+const dragOverIndex = ref(null);
+function getComparableValue(item) {
+	const valueKey = optionValueKey.value;
+	return valueKey && typeof item === "object" ? item?.[valueKey] : item;
+}
+function isSameOption(left, right) {
+	return getComparableValue(left) === getComparableValue(right);
+}
+function getUniqueItems(items) {
+	return items.filter((item, index) => items.findIndex((candidate) => isSameOption(candidate, item)) === index);
+}
+function mergeUniqueItems(base, toAdd) {
+	return [...base, ...toAdd.filter((item) => !base.some((candidate) => isSameOption(candidate, item)))];
+}
+function getDraggableItems(origin, option) {
+	const selection = origin === "source" ? sourceSelection.value : targetSelection.value;
+	if (!selection.length) return [option];
+	const hasOptionSelected = selection.some((item) => isSameOption(item, option));
+	return hasOptionSelected ? getUniqueItems(selection) : [option];
+}
+function clearDragState() {
+	dragSource.value = null;
+	draggedItems.value = [];
+	activeDropzone.value = null;
+	dragOverIndex.value = null;
+}
+function canDropInto(target) {
+	if (!transferDragDrop.value || props.context.disabled || !dragSource.value || draggedItems.value.length === 0) return false;
+	// The target list accepts cross-list moves as well as same-list reordering.
+	if (target === "target") return true;
+	// The source list only accepts items coming from the target (i.e. removal).
+	return dragSource.value !== target;
+}
+function handleOptionDragStart(origin, option, event) {
+	if (!transferDragDrop.value || props.context.disabled) return;
+	draggedItems.value = getDraggableItems(origin, option);
+	dragSource.value = origin;
+	if (event.dataTransfer) {
+		event.dataTransfer.effectAllowed = "move";
+		event.dataTransfer.setData("text/plain", "formkit-openvue-transfer");
+	}
+}
+function handleOptionDragEnd() {
+	clearDragState();
+}
+function handleDropzoneDragOver(target, event) {
+	if (!canDropInto(target)) return;
+	event.preventDefault();
+	activeDropzone.value = target;
+	// Hovering empty space (not over a specific item) clears the per-item highlight.
+	dragOverIndex.value = null;
+	if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+}
+function handleDropzoneDragLeave(target) {
+	if (activeDropzone.value === target) activeDropzone.value = null;
+}
+function handleDropzoneDrop(target, event) {
+	if (!canDropInto(target)) {
+		clearDragState();
+		return;
+	}
+	event.preventDefault();
+	if (target === "target") {
+		targetItems.value = mergeUniqueItems(targetItems.value, draggedItems.value);
+		sourceSelection.value = [];
+	} else {
+		targetItems.value = targetItems.value.filter((item) => !draggedItems.value.some((dragged) => isSameOption(dragged, item)));
+		targetSelection.value = [];
+	}
+	clearDragState();
+}
+function handleTargetItemDragOver(index, event) {
+	if (!canDropInto("target")) return;
+	// Handle the drop at the item level so it lands at a precise position.
+	event.preventDefault();
+	event.stopPropagation();
+	activeDropzone.value = "target";
+	dragOverIndex.value = index;
+	if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+}
+function handleTargetItemDrop(index, event) {
+	if (!canDropInto("target")) {
+		clearDragState();
+		return;
+	}
+	event.preventDefault();
+	event.stopPropagation();
+	const referenceItem = targetItems.value[index];
+	const itemsToInsert = getUniqueItems(draggedItems.value);
+	if (dragSource.value === "target") {
+		// Reorder within the target list: move the dragged items to the drop position.
+		if (itemsToInsert.some((dragged) => isSameOption(dragged, referenceItem))) {
+			clearDragState();
+			return;
+		}
+		const remaining = targetItems.value.filter((item) => !itemsToInsert.some((dragged) => isSameOption(dragged, item)));
+		let insertAt = remaining.findIndex((item) => isSameOption(item, referenceItem));
+		if (insertAt === -1) insertAt = remaining.length;
+		remaining.splice(insertAt, 0, ...itemsToInsert);
+		targetItems.value = remaining;
+		targetSelection.value = [];
+	} else {
+		// Cross-list move: insert the dragged source items at the drop position.
+		const additions = itemsToInsert.filter((item) => !targetItems.value.some((candidate) => isSameOption(candidate, item)));
+		const updated = [...targetItems.value];
+		updated.splice(index, 0, ...additions);
+		targetItems.value = updated;
+		sourceSelection.value = [];
+	}
+	clearDragState();
+}
+function resolveOptionDisabled(option) {
+	const optionDisabled = props.context.optionDisabled;
+	if (!optionDisabled) return false;
+	if (typeof optionDisabled === "function") return !!optionDisabled(option);
+	if (typeof optionDisabled === "string") return !!option?.[optionDisabled];
+	return !!optionDisabled;
+}
+function resolveOptionLabel(option) {
+	if (!props.context.optionLabel) return String(option);
+	if (typeof props.context.optionLabel === "function") return String(props.context.optionLabel(option));
+	return String(option?.[props.context.optionLabel] ?? option);
+}
+function transferSelected() {
+	if (sourceSelection.value.length === 0) return;
+	// Use splice-based approach for better performance
+	targetItems.value = [...targetItems.value, ...sourceSelection.value];
+	sourceSelection.value = [];
+}
+function transferAll() {
+	if (sourceItems.value.length === 0) return;
+	targetItems.value = [...targetItems.value, ...sourceItems.value];
+	sourceSelection.value = [];
+}
+function removeSelected() {
+	if (targetSelection.value.length === 0) return;
+	// Filter out selected items using splice-inspired logic
+	const valueKey = optionValueKey.value;
+	targetItems.value = targetItems.value.filter((item) => {
+		const itemValue = valueKey && typeof item === "object" ? item[valueKey] : item;
+		return !targetSelection.value.some((sel) => {
+			const selValue = valueKey && typeof sel === "object" ? sel[valueKey] : sel;
+			return selValue === itemValue;
+		});
+	});
+	targetSelection.value = [];
+}
+function removeAll() {
+	if (targetItems.value.length === 0) return;
+	targetItems.value = [];
+	targetSelection.value = [];
+}
+watch(targetItems, (newVal) => {
+	modelValue.value = newVal;
+	handleInput(newVal);
+	handleChange(newVal);
+}, { deep: true });
+// Watch for external changes to modelValue and update targetItems
+watch(() => modelValue.value, (newVal) => {
+	if (props.context.displayMode === "transfer" && Array.isArray(newVal)) {
+		const converted = valuesToObjects(newVal);
+		// Only update if the values are actually different to avoid infinite loops
+		if (JSON.stringify(converted) !== JSON.stringify(targetItems.value)) {
+			targetItems.value = converted;
+		}
+	}
+}, { deep: true });
+</script>
+
+<template>
+  <!-- Single Mode (default) -->
+  <div v-if="!context.displayMode || context.displayMode === 'single'" class="p-formkit">
+    <Listbox
+      :id="context.id"
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs.readonly ?? false"
+      :list-style="context?.attrs.style"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :options="context?.options"
+      :option-label="context.optionLabel"
+      :option-value="context.optionValue"
+      :option-disabled="context.optionDisabled"
+      :option-group-label="context.optionGroupLabel"
+      :option-group-children="context.optionGroupChildren"
+      :multiple="context.multiple ?? false"
+      :filter="context.filter ?? false"
+      :filter-icon="context.filterIcon"
+      :filter-placeholder="context.filterPlaceholder"
+      :filter-locale="context.filterLocale"
+      :filter-match-mode="context.filterMatchMode"
+      :auto-option-focus="context.autoOptionFocus ?? true"
+      :select-on-focus="context.selectOnFocus ?? false"
+      :data-key="context.dataKey"
+      :meta-key-selection="context.metaKeySelection ?? false"
+      :virtual-scroller-options="context.virtualScrollerOptions"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="unstyled"
+      @update:model-value="handleInput"
+      @change="handleChange"
+      @blur="handleBlur"
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </Listbox>
+  </div>
+
+  <!-- Transfer Mode -->
+  <div
+    v-if="context.displayMode === 'transfer'"
+    :class="transferContainerClass"
+  >
+    <!-- Source List -->
+    <div
+      :class="[transferListContainerClass, { 'p-formkit-transfer-dropzone-active': activeDropzone === 'source' }]"
+      @dragover="handleDropzoneDragOver('source', $event)"
+      @dragleave="handleDropzoneDragLeave('source')"
+      @drop="handleDropzoneDrop('source', $event)"
+    >
+      <span
+        v-if="context.transferLeftHeaderText"
+        :class="transferHeaderClass"
+      >{{ context.transferLeftHeaderText }}</span>
+      <Listbox
+        :id="`${context.id}-transfer-source`"
+        v-model="sourceSelection"
+        v-bind="context?.attrs"
+        :disabled="!!context?.disabled"
+        :readonly="context?.attrs.readonly ?? false"
+        :list-style="context?.attrs.style"
+        :class="context?.attrs?.class"
+        :invalid="isInvalid"
+        :tabindex="context?.attrs.tabindex"
+        :aria-label="context?.attrs.ariaLabel || 'Source list'"
+        :aria-labelledby="context?.attrs.ariaLabelledby"
+        :options="sourceItems"
+        :option-label="context.optionLabel"
+        :option-disabled="context.optionDisabled"
+        :option-group-label="context.optionGroupLabel"
+        :option-group-children="context.optionGroupChildren"
+        :data-key="context.dataKey"
+        :multiple="true"
+        :filter="context.filter ?? false"
+        :filter-icon="context.filterIcon"
+        :filter-placeholder="context.filterPlaceholder"
+        :filter-locale="context.filterLocale"
+        :filter-match-mode="context.filterMatchMode"
+        :auto-option-focus="context.autoOptionFocus ?? true"
+        :select-on-focus="context.selectOnFocus ?? false"
+        :meta-key-selection="context.metaKeySelection ?? false"
+        :virtual-scroller-options="context.virtualScrollerOptions"
+        :pt="context.pt"
+        :pt-options="context.ptOptions"
+        :unstyled="unstyled"
+        @blur="handleBlur"
+      >
+        <template #option="slotProps">
+          <div
+            :draggable="transferDragDrop && !context.disabled && !resolveOptionDisabled(slotProps.option)"
+            class="p-formkit-transfer-option"
+            :class="{ 'p-formkit-transfer-option-draggable': transferDragDrop && !context.disabled && !resolveOptionDisabled(slotProps.option) }"
+            @dragstart="handleOptionDragStart('source', slotProps.option, $event)"
+            @dragend="handleOptionDragEnd"
+          >
+            <component
+              :is="context?.slots.option"
+              v-if="context?.slots?.option"
+              v-bind="{ ...context, ...slotProps }"
+            />
+            <span v-else>{{ resolveOptionLabel(slotProps.option) }}</span>
+          </div>
+        </template>
+        <template v-for="slotName in transferSlotNames" :key="slotName" #[slotName]="slotProps">
+          <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+        </template>
+      </Listbox>
+    </div>
+
+    <!-- Transfer Buttons -->
+    <div class="p-formkit-transfer-buttons">
+      <Button
+        icon="oi oi-angle-right"
+        :severity="transferButtonSeverity"
+        :class="transferButtonClass"
+        outlined
+        :disabled="sourceSelection.length === 0"
+        :aria-label="context.transferAll ? 'Move selected to target' : 'Move to target'"
+        @click="transferSelected"
+      />
+      <Button
+        v-if="context.transferAll"
+        icon="oi oi-angle-double-right"
+        :severity="transferButtonSeverity"
+        :class="transferButtonClass"
+        outlined
+        :disabled="sourceItems.length === 0"
+        aria-label="Move all to target"
+        @click="transferAll"
+      />
+      <Button
+        icon="oi oi-angle-left"
+        :severity="transferButtonSeverity"
+        :class="transferButtonClass"
+        outlined
+        :disabled="targetSelection.length === 0"
+        :aria-label="context.transferAll ? 'Move selected to source' : 'Move to source'"
+        @click="removeSelected"
+      />
+      <Button
+        v-if="context.transferAll"
+        icon="oi oi-angle-double-left"
+        :severity="transferButtonSeverity"
+        :class="transferButtonClass"
+        outlined
+        :disabled="targetItems.length === 0"
+        aria-label="Move all to source"
+        @click="removeAll"
+      />
+    </div>
+
+    <!-- Target List -->
+    <div
+      :class="[transferListContainerClass, { 'p-formkit-transfer-dropzone-active': activeDropzone === 'target' }]"
+      @dragover="handleDropzoneDragOver('target', $event)"
+      @dragleave="handleDropzoneDragLeave('target')"
+      @drop="handleDropzoneDrop('target', $event)"
+    >
+      <span
+        v-if="context.transferRightHeaderText"
+        :class="transferHeaderClass"
+      >{{ context.transferRightHeaderText }}</span>
+      <Listbox
+        :id="`${context.id}-transfer-target`"
+        v-model="targetSelection"
+        v-bind="context?.attrs"
+        :disabled="!!context?.disabled"
+        :readonly="context?.attrs.readonly ?? false"
+        :list-style="context?.attrs.style"
+        :class="context?.attrs?.class"
+        :invalid="isInvalid"
+        :tabindex="context?.attrs.tabindex"
+        :aria-label="context?.attrs.ariaLabel || 'Target list'"
+        :aria-labelledby="context?.attrs.ariaLabelledby"
+        :options="targetItems"
+        :option-label="context.optionLabel"
+        :option-disabled="context.optionDisabled"
+        :option-group-label="context.optionGroupLabel"
+        :option-group-children="context.optionGroupChildren"
+        :data-key="context.dataKey"
+        :multiple="true"
+        :filter="context.filter ?? false"
+        :filter-icon="context.filterIcon"
+        :filter-placeholder="context.filterPlaceholder"
+        :filter-locale="context.filterLocale"
+        :filter-match-mode="context.filterMatchMode"
+        :auto-option-focus="context.autoOptionFocus ?? true"
+        :select-on-focus="context.selectOnFocus ?? false"
+        :meta-key-selection="context.metaKeySelection ?? false"
+        :virtual-scroller-options="context.virtualScrollerOptions"
+        :pt="context.pt"
+        :pt-options="context.ptOptions"
+        :unstyled="unstyled"
+        @blur="handleBlur"
+      >
+        <template #option="slotProps">
+          <div
+            :draggable="transferDragDrop && !context.disabled && !resolveOptionDisabled(slotProps.option)"
+            class="p-formkit-transfer-option"
+            :class="{
+              'p-formkit-transfer-option-draggable': transferDragDrop && !context.disabled && !resolveOptionDisabled(slotProps.option),
+              'p-formkit-transfer-option-dragover': dragOverIndex === slotProps.index,
+            }"
+            @dragstart="handleOptionDragStart('target', slotProps.option, $event)"
+            @dragend="handleOptionDragEnd"
+            @dragover="handleTargetItemDragOver(slotProps.index, $event)"
+            @drop="handleTargetItemDrop(slotProps.index, $event)"
+          >
+            <component
+              :is="context?.slots.option"
+              v-if="context?.slots?.option"
+              v-bind="{ ...context, ...slotProps }"
+            />
+            <span v-else>{{ resolveOptionLabel(slotProps.option) }}</span>
+          </div>
+        </template>
+        <template v-for="slotName in transferSlotNames" :key="slotName" #[slotName]="slotProps">
+          <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+        </template>
+      </Listbox>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.p-formkit-transfer :deep(.p-listbox) {
+  width: 100%;
+  height: 100%;
+}
+
+.p-formkit-transfer :deep(.p-listbox-list-container) {
+  max-height: none;
+}
+
+.p-formkit-transfer-dropzone-active :deep(.p-listbox) {
+  outline: 2px dashed var(--p-primary-color);
+  outline-offset: 2px;
+}
+
+.p-formkit-transfer-option-dragover {
+  box-shadow: inset 0 2px 0 0 var(--p-primary-color);
+}
+</style>

package/dist/components/FormMultiSelect.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { useFormKitInput } from "../composables";
+const props = defineProps({ context: {
+	type: Object,
+	required: true
+} });
+const { validSlotNames, unstyled, isInvalid, handleBlur, handleChange, modelValue } = useFormKitInput(props.context);
+</script>
+
+<template>
+  <div class="p-formkit">
+    <MultiSelect
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :input-id="context.id"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs.readonly ?? false"
+      :list-style="context?.attrs.style"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :size="context?.size ?? undefined"
+      :placeholder="context.placeholder"
+      :options="context.options"
+      :option-label="context.optionLabel"
+      :option-value="context.optionValue"
+      :option-disabled="context.optionDisabled"
+      :option-group-label="context.optionGroupLabel"
+      :option-group-children="context.optionGroupChildren"
+      :scroll-height="context.scrollHeight"
+      :data-key="context.dataKey"
+      :filter="context.filter ?? false"
+      :filter-placeholder="context.filterPlaceholder"
+      :filter-locale="context.filterLocale"
+      :filter-match-mode="context.filterMatchMode"
+      :fitler-fields="context.filterFields"
+      :append-to="context.appendTo"
+      :close-icon="context.closeIcon"
+      :display="context.display"
+      :max-selected-labels="context.maxSelectedLabels"
+      :selected-items-label="context.selectedItemsLabel"
+      :selection-limit="context.selectionLimit"
+      :show-toggle-all="context.showToggleAll"
+      :loading="context.loading"
+      :select-all="context.selectAll"
+      :reset-filter-on-hide="context.resetFilterOnHide"
+      :virtual-scroller-options="context.virtualScrollerOptions"
+      :auto-option-focus="context.autoOptionFocus"
+      :auto-filter-focus="context.autoFilterFocus"
+      :filter-message="context.filterMessage"
+      :selection-message="context.selectionMessage"
+      :empty-selection-message="context.emptySelectionMessage"
+      :empty-filter-message="context.emptyFilterMessage"
+      :empty-message="context.emptyMessage"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="unstyled"
+      @change="handleChange"
+      @blur="handleBlur"
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </MultiSelect>
+  </div>
+</template>

package/dist/components/FormOutputBoolean.vue

@@ -0,0 +1,30 @@
+<script setup>
+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";
+const props = defineProps({ context: {
+	type: Object,
+	required: true
+} });
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context);
+const { t } = useI18n();
+const translated = computed(() => {
+	if (props.context?._value) return props.context?.trueValue ?? t("formkit.form.true", "true");
+	else return props.context?.falseValue ?? t("formkit.form.false", "false");
+});
+</script>
+
+<template>
+  <div class="p-formkit p-output-boolean">
+    <FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix" :on-click="context?.onIconPrefixClicked" :tooltip="context?.iconPrefixTooltip" position="prefix" />
+    <FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix" />
+    <span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
+      {{ translated }}
+    </span>
+    <FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix" />
+    <FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix" :on-click="context?.onIconSuffixClicked" :tooltip="context?.iconSuffixTooltip" position="suffix" />
+  </div>
+</template>

package/dist/components/FormOutputDate.vue

@@ -0,0 +1,40 @@
+<script setup>
+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";
+const props = defineProps({ context: {
+	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";
+		try {
+			result = d(props?.context?._value, format);
+		} 
+		// eslint-disable-next-line unused-imports/no-unused-vars
+catch (e) {}
+		return result;
+	} else {
+		return "";
+	}
+});
+</script>
+
+<template>
+  <div class="p-formkit p-output-date">
+    <FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix" :on-click="context?.onIconPrefixClicked" :tooltip="context?.iconPrefixTooltip" position="prefix" />
+    <FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix" />
+    <span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
+      {{ converted }}
+    </span>
+    <FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix" />
+    <FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix" :on-click="context?.onIconSuffixClicked" :tooltip="context?.iconSuffixTooltip" position="suffix" />
+  </div>
+</template>

package/dist/components/FormOutputDuration.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { useFormKitSection, useOutputDuration } from "../composables";
+import FormKitIcon from "./FormKitIcon.vue";
+import FormKitPrefix from "./FormKitPrefix.vue";
+import FormKitSuffix from "./FormKitSuffix.vue";
+const props = defineProps({ context: {
+	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" :on-click="context?.onIconPrefixClicked" :tooltip="context?.iconPrefixTooltip" position="prefix" />
+    <FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix" />
+    <span :id="context?.id" :style="context?.attrs?.style" :class="context?.attrs?.class">
+      {{ formattedDuration(context?._value) }}
+    </span>
+    <FormKitSuffix v-if="hasSuffix" :suffix="context?.suffix" />
+    <FormKitIcon v-if="hasSuffixIcon" :icon-class="context?.iconSuffix" :on-click="context?.onIconSuffixClicked" :tooltip="context?.iconSuffixTooltip" position="suffix" />
+  </div>
+</template>