@sfxcode/formkit-openvue 0.0.0-stage → 0.9.0

package/dist/components/FormOutputLink.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { computed } from "vue";
+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 url = computed(() => {
+	if (props.context?._value) 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;
+});
+</script>
+
+<template>
+  <div class="p-formkit p-output-link">
+    <FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix" :on-click="context?.onIconPrefixClicked" :tooltip="context?.iconPrefixTooltip" position="prefix" />
+    <FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix" />
+    <a
+      v-if="context?.value"
+      :id="context?.id"
+      :style="context?.attrs?.style"
+      :class="context?.attrs?.class"
+      :href="url"
+      :target="context?.attrs?.target ?? '_new'"
+    >
+      <span>{{ title }}</span>
+    </a>
+    <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/FormOutputList.vue

@@ -0,0 +1,105 @@
+<script setup>
+import { computed } from "vue";
+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 listStyle = computed(() => {
+	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 (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 || "");
+</script>
+
+<template>
+  <div class="p-formkit p-output-list">
+    <FormKitIcon
+      v-if="hasPrefixIcon"
+      :icon-class="context?.iconPrefix"
+      :on-click="context?.onIconPrefixClicked"
+      :tooltip="context?.iconPrefixTooltip"
+      position="prefix"
+    />
+    <FormKitPrefix v-if="hasPrefix && listStyle === 'span'" :prefix="context?.prefix" />
+    <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 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"
+    >
+      <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"
+    >
+      <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"
+    >
+      <li v-for="(value, index) of getListValues" :key="index">
+        <span class="p-output-list-item" :class="itemClass">
+          {{ value }}
+        </span>
+      </li>
+    </ol>
+    <FormKitSuffix v-if="hasSuffix && listStyle === 'span'" :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/FormOutputNumber.vue

@@ -0,0 +1,47 @@
+<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 { n } = useI18n();
+const converted = computed(() => {
+	const value = props?.context?._value;
+	if (value) {
+		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) {
+			try {
+				result = n(+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-number">
+    <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/FormOutputReference.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { computed } from "vue";
+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 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">
+    <FormKitIcon v-if="hasPrefixIcon" :icon-class="context?.iconPrefix" :on-click="context?.onIconPrefixClicked" :tooltip="context?.iconPrefixTooltip" position="prefix" />
+    <FormKitPrefix v-if="hasPrefix" :prefix="context?.prefix" />
+    <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>
+    <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/FormOutputText.vue

@@ -0,0 +1,52 @@
+<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 { t } = useI18n();
+const textValue = computed(() => {
+	const value = props.context?._value;
+	let result = "";
+	if (value) {
+		if (props.context?.isTranslationKey) {
+			result = t(value);
+		} else if (typeof props.context?.convertValue === "function") {
+			result = props.context?.convertValue(value);
+		} else {
+			result = value;
+		}
+	}
+	// Apply maxLength truncation if specified
+	const maxLength = props.context?.maxLength;
+	if (result && maxLength && !props.context?.html && result.length > maxLength) {
+		// Try to truncate at word boundary
+		let truncated = result.substring(0, maxLength);
+		const lastSpaceIndex = truncated.lastIndexOf(" ");
+		// Only truncate at word boundary if there's a space, and it's not too far back
+		// (at least 80% of maxLength to avoid cutting too much)
+		if (lastSpaceIndex > maxLength * .8) {
+			truncated = truncated.substring(0, lastSpaceIndex);
+		}
+		result = `${truncated}...`;
+	}
+	return result;
+});
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context);
+</script>
+
+<template>
+  <div class="p-formkit p-output-text">
+    <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 v-if="context?.html" :id="context?.id" :class="context?.attrs?.class" :style="context?.attrs?.style" v-html="textValue" />
+    <span v-else :id="context?.id" :class="context?.attrs?.class" :style="context?.attrs?.style" v-text="textValue" />
+    <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/FormPassword.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { useFormKitInput } from "../composables";
+const props = defineProps({ context: {
+	type: Object,
+	required: true
+} });
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context);
+</script>
+
+<template>
+  <div class="p-formkit">
+    <Password
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :input-id="context.id"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs.readonly ?? false"
+      :input-style="context?.attrs.style"
+      :input-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"
+      :medium-regex="context.mediumRegex ?? '^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})'"
+      :strong-regex="context.strongRegex ?? '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})'"
+      :prompt-label="context.promptLabel"
+      :weak-label="context.weakLabel"
+      :medium-label="context.mediumLabel"
+      :strong-label="context.strongLabel"
+      :mask-icon="context.maskIcon"
+      :unmask-icon="context.unmaskIcon"
+      :feedback="context.feedback ?? false"
+      :toggle-mask="context.toggleMask ?? false"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="unstyled"
+      @input="handleInput"
+      @blur="handleBlur"
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </Password>
+  </div>
+</template>

package/dist/components/FormRadioButton.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { computed } from "vue";
+import { useFormKitInput } from "../composables";
+const props = defineProps({ context: {
+	type: Object,
+	required: true
+} });
+const { unstyled, isInvalid, handleChange, handleBlur, modelValue } = useFormKitInput(props.context);
+const optionsClass = computed(() => props.context?.optionsClass ?? "");
+const optionClass = computed(() => props.context?.optionClass ?? "");
+const labelClass = computed(() => props.context?.labelClass ?? "");
+</script>
+
+<template>
+  <div class="p-formkit p-formkit-options" :class="optionsClass">
+    <div v-for="option in context.options" :key="option.value" class="p-formkit-option" :class="optionClass">
+      <RadioButton
+        :id="context.id"
+        v-model="modelValue"
+        v-bind="context?.attrs"
+        :disabled="!!context?.disabled"
+        :readonly="context?.attrs.readonly ?? false"
+        :name="context?.attrs.name"
+        :value="option.value"
+        :input-style="context?.attrs.style"
+        :input-class="context?.attrs?.class"
+        :invalid="isInvalid"
+        :size="context?.size ?? undefined"
+        :pt="context.pt"
+        :pt-options="context.ptOptions"
+        :unstyled="unstyled"
+        @click="handleChange"
+        @change="handleChange"
+        @blur="handleBlur"
+      />
+      <label :for="option.value" :class="labelClass">{{ option.label }}</label>
+    </div>
+  </div>
+</template>

package/dist/components/FormRating.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { useFormKitInput } from "../composables";
+const props = defineProps({ context: {
+	type: Object,
+	required: true
+} });
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context);
+</script>
+
+<template>
+  <div class="p-formkit">
+    <Rating
+      :id="context.id"
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs.readonly ?? false"
+      :style="context?.attrs.style"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :stars="context.stars ?? 5"
+      :on-icon="context.onIcon"
+      :off-icon="context.offIcon"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="unstyled"
+      @change="handleInput"
+      @blur="handleBlur"
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </Rating>
+  </div>
+</template>

package/dist/components/FormSelect.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { useFormKitInput } from "../composables";
+const props = defineProps({ context: {
+	type: Object,
+	required: true
+} });
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context);
+</script>
+
+<template>
+  <div class="p-formkit">
+    <Select
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :input-id="context.id"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs.readonly ?? false"
+      :style="context?.attrs.style"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
+      :input-style="context?.attrs.style"
+      :input-class="context?.attrs?.class"
+      :input-props="context?.attrs.inputProps"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :size="context?.size ?? undefined"
+      :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"
+      :filter="context.filter ?? false"
+      :filter-placeholder="context.filterPlaceholder"
+      :filter-locale="context.filterLocale"
+      :filter-match-mode="context.filterMatchMode"
+      :fitler-fields="context.filterFields"
+      :filter-input-props="context.filterInputProps"
+      :editable="context.editable"
+      :placeholder="context.placeholder"
+      :data-key="context.dataKey"
+      :show-clear="context.showClear ?? false"
+      :overlay-style="context.overlayStyle"
+      :overlay-class="context.overlayClass"
+      :panel-props="context.panelProps"
+      :append-to="context.appendTo"
+      :reset-filter-on-hide="context.resetFilterOnHide"
+      :virtual-scroller-options="context.virtualScrollerOptions"
+      :auto-option-focus="context.autoOptionFocus"
+      :select-on-focus="context.selectOnFocus"
+      :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="handleInput"
+      @blur="handleBlur"
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </Select>
+  </div>
+</template>

package/dist/components/FormSelectButton.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { useFormKitInput } from "../composables";
+const props = defineProps({ context: {
+	type: Object,
+	required: true
+} });
+const { validSlotNames, unstyled, isInvalid, handleChange, handleBlur, modelValue } = useFormKitInput(props.context);
+</script>
+
+<template>
+  <div class="p-formkit">
+    <SelectButton
+      :id="context.id"
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs.readonly ?? false"
+      :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"
+      :options="context.options"
+      :option-label="context.optionLabel"
+      :option-value="context.optionValue"
+      :option-disabled="context.optionDisabled"
+      :multiple="context.multiple ?? false"
+      :data-key="context.dataKey"
+      :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>
+    </SelectButton>
+  </div>
+</template>

package/dist/components/FormSlider.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { useFormKitInput } from "../composables";
+const props = defineProps({ context: {
+	type: Object,
+	required: true
+} });
+const { unstyled, isInvalid, handleBlur, modelValue } = useFormKitInput(props.context);
+function handleInput(e) {
+	props.context?.node.input(e);
+	props.context?.handlers.blur(e);
+}
+</script>
+
+<template>
+  <div class="p-formkit">
+    <Slider
+      :id="context.id"
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs.readonly ?? false"
+      :style="context?.attrs.style"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :min="context.min ?? 0"
+      :max="context.max ?? 100"
+      :step="context.step ?? undefined"
+      :range="context.range ?? false"
+      :orientation="context.orientation ?? 'horizontal'"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="unstyled"
+      @change="handleInput"
+      @blur="handleBlur"
+    />
+  </div>
+</template>

package/dist/components/FormTextarea.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { useFormKitInput } from "../composables";
+const props = defineProps({ context: {
+	type: Object,
+	required: true
+} });
+const { unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context);
+</script>
+
+<template>
+  <div class="p-formkit">
+    <Textarea
+      :id="context.id"
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs.readonly ?? false"
+      :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"
+      :rows="context.rows ?? 3"
+      :auto-resize="context.autoResize ?? false"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="unstyled"
+      @input="handleInput"
+      @blur="handleBlur"
+    />
+  </div>
+</template>

package/dist/components/FormToggleButton.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { useFormKitInput } from "../composables";
+const props = defineProps({ context: {
+	type: Object,
+	required: true
+} });
+const { validSlotNames, unstyled, isInvalid, handleChange, handleBlur, modelValue } = useFormKitInput(props.context);
+</script>
+
+<template>
+  <div class="p-formkit">
+    <ToggleButton
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :input-id="context.id"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs.readonly ?? false"
+      :input-style="context?.attrs.style"
+      :input-class="context?.attrs?.class"
+      :invalid="isInvalid"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :size="context?.size ?? undefined"
+      :on-label="context.onLabel ?? 'Yes'"
+      :off-label="context.offLabel ?? 'No'"
+      :on-icon="context.onIcon"
+      :off-icon="context.offIcon"
+      :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>
+    </ToggleButton>
+  </div>
+</template>