@sfxcode/formkit-openvue 0.0.0-stage → 0.9.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 sfxcode
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,228 @@
-# Temporary Holding Version
+# FormKit - OpenVue
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+OpenVue based [FormKit Inputs](https://sfxcode.github.io/formkit-openvue/guide/inputs.html) for using [FormKit](https://formkit.com/) with the [OpenVue](https://github.com/openvi-foundation/openvue) UI Framework (`openvue`).
+
+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 [FormOutputs](https://sfxcode.github.io/formkit-openvue/guide/outputs.html).
+
+## OpenVue Versions
+
+Actual OpenVue Version of the main branch is *1.0.0.*
+
+This package replaces the former PrimeVue based `@sfxcode/formkit-primevue`. It uses the open source [OpenVue](https://github.com/openvi-foundation/openvue) components (`openvue`, `@openvue/themes`, `@openvue/openicons`) instead of PrimeVue.
+
+## Migration from PrimeVue
+
+Migrating from `@sfxcode/formkit-primevue` to `@sfxcode/formkit-openvue`:
+
+1. Replace the package and the UI framework
+
+   ```bash
+   pnpm remove @sfxcode/formkit-primevue primevue @primeuix/themes primeicons
+   pnpm add @sfxcode/formkit-openvue openvue @openvue/themes @openvue/openicons
+   ```
+
+2. Update the imports (including `/components`, `/composables` and the scss file)
+
+   ```typescript
+   // before
+   import { primeInputs, primeOutputs } from '@sfxcode/formkit-primevue'
+   // after
+   import { formInputs, formOutputs } from '@sfxcode/formkit-openvue'
+   ```
+
+3. Rename the input and output types in your schemas: the `prime` prefix is now `form`
+
+   | PrimeVue                      | OpenVue                      |
+   |-------------------------------|------------------------------|
+   | `type: 'primeInputText'`      | `type: 'formInputText'`      |
+   | `type: 'primeSelect'`         | `type: 'formSelect'`         |
+   | `type: 'primeOutputText'`     | `type: 'formOutputText'`     |
+   | `primeInputs`, `primeOutputs` | `formInputs`, `formOutputs`  |
+   | `usePrimeInputs()`            | `useFormInputs()`            |
+   | `PrimeInputText` (component)  | `FormInputText` (component)  |
+
+   A search and replace of `prime` followed by an uppercase letter (`prime[A-Z]` -> `form`, `Prime[A-Z]` -> `Form`) covers most of it.
+
+4. Replace PrimeVue with OpenVue in your app setup: use the `openvue` components, themes and `@openvue/openicons` (instead of PrimeIcons) and register them as you did with PrimeVue.
+
+5. Update custom CSS: selectors like `[data-type="primeCheckbox"]` become `[data-type="formCheckbox"]`.
+
+Also rename the i18n keys `formkit.prime.true` / `formkit.prime.false` to `formkit.form.true` / `formkit.form.false`. If you use `useInputEditor`, its data fields `prime`, `prime_key` and `prime_value` are now `form`, `form_key` and `form_value`. The stylesheet is now `formkit-openvue.scss` (update imports of `dist/sass/formkit-primevue.scss`). Not changed: the `p-formkit` wrapper class.
+
+## Build
+
+[![CI](https://github.com/sfxcode/formkit-openvue/actions/workflows/deploy.yml/badge.svg)](https://github.com/sfxcode/formkit-openvue/actions/workflows/deploy.yml)
+
+[![Netlify Status](https://api.netlify.com/api/v1/badges/6142cb73-02e0-4b2a-9ca3-25496f59ba9b/deploy-status)](https://app.netlify.com/sites/formkit-openvue/deploys)
+
+## Docs
+
+[Docs](https://sfxcode.github.io/formkit-openvue/)
+
+[Demo/Playground](https://formkit-openvue.netlify.app/)
+
+## Getting Started
+
+Install the latest release of [`@sfxcode/formkit-openvue`](https://www.npmjs.com/package/@sfxcode/formkit-openvue) together with OpenVue:
+
+```bash
+pnpm add @sfxcode/formkit-openvue openvue @openvue/themes @openvue/openicons
+# or: npm install ... / yarn add ...
+```
+
+Set up OpenVue, FormKit and the form inputs in your *main.ts*:
+
+```typescript
+import Aura from '@openvue/themes/aura'
+import { defaultConfig, plugin } from '@formkit/vue'
+import { formInputs, useFormInputs } from '@sfxcode/formkit-openvue'
+import OpenVue from 'openvue/config'
+import { createApp } from 'vue'
+import App from './App.vue'
+import '@openvue/openicons/openicons.css'
+import '@sfxcode/formkit-openvue/dist/style.css'
+
+const app = createApp(App)
+
+// OpenVue with theme
+app.use(OpenVue, { theme: { preset: Aura } })
+
+// register the OpenVue components used by the form inputs
+const { registerInputs } = useFormInputs()
+registerInputs(app)
+
+// FormKit with the OpenVue inputs
+app.use(plugin, defaultConfig({ inputs: formInputs }))
+
+app.mount('#app')
+```
+
+Use the inputs in a FormKit schema (or as `<FormKit type="formInputText" ... />`):
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const data = ref({ email: '' })
+const schema = [
+  { $formkit: 'formInputText', name: 'email', label: 'Email', validation: 'required|email' },
+  { $formkit: 'formCheckbox', name: 'newsletter', label: 'Subscribe to the newsletter' },
+]
+</script>
+
+<template>
+  <FormKit v-model="data" type="form">
+    <FormKitSchema :schema="schema" :data="data" />
+  </FormKit>
+</template>
+```
+
+See [Usage](#usage) for outputs, i18n and more configuration.
+
+## Usage
+
+### Configuration
+
+Add *formkit.config.ts*
+
+```typescript
+import { defaultConfig, plugin } from '@formkit/vue'
+import { formInputs } from '@sfxcode/formkit-openvue'
+
+app.use(plugin, defaultConfig({
+  locales: { de, en },
+  // Define the active locale
+  locale: 'en',
+  inputs: formInputs, 
+}))
+```
+
+or if using also the output part
+
+```typescript
+import { defaultConfig, plugin } from '@formkit/vue'
+import { formInputs, formOutputs } from '@sfxcode/formkit-openvue'
+
+app.use(plugin, defaultConfig({
+  locales: { de, en },
+  // Define the active locale
+  locale: 'en',
+    inputs: { ...formInputs, ...formOutputs },
+}))
+```
+
+Important: output elements depends on vue-i18n to style numbers, dates, ...
+
+## Limitations
+
+Prefixing of the OpenVue component names is not supported.
+
+### Schema Helper Functions
+
+[useFormKitSchema](https://github.com/sfxcode/formkit-openvue/blob/main/src/composables/useFormKitSchema.ts) provide functions to simplify the usage of elements, components, lists, ...
+
+[useInputEditorSchema](https://github.com/sfxcode/formkit-openvue/blob/main/src/composables/useInputEditorSchema.ts) provide functions for a component schema generation builder
+
+### Basic Styling
+
+Basic styling is provided with the [formkit-openvue.scss](https://github.com/sfxcode/formkit-openvue/blob/main/src/sass/formkit-openvue.scss) file or the corresponding css file in the package.
+
+Features:
+
+- Width of all text and dropdown elements is set to 100%
+- Error Color by variable (--formkit-error-color)
+- Some margins, font sizes ...
+
+You can use it or take it as base for your own styling.
+
+### Extended Styling
+
+- Styling outerClas, innerClass .... is provided by FormKit
+- All inputs, outputs are wrapped in a div with a **p-formkit** class
+- Most of the OpenVue Input Components have access to class / styles attributes
+- PT and PTOptions are available (pass-through API of OpenVue components)
+- [Styling](https://formkit-openvue.netlify.app/styling/base) and [PT](https://formkit-openvue.netlify.app/styling/passThrough) demo available
+- [Grid](https://formkit-openvue.netlify.app/styling/grid) Demo of the provided grid styling (col-[1-12])
+
+### Samples
+
+Some samples for common tasks are available
+
+- [Repeater](https://formkit-openvue.netlify.app/samples/repeater) Use Repeater composable for using repeating values in your schema
+- [Input Editor](https://formkit-openvue.netlify.app/samples/inputEditor) Edit FormKit schema on the based on a provided composable
+- [Form Editor](https://formkit-openvue.netlify.app/samples/formEditor) Basic demo as starter to create Forms visually
+
+## Showcases
+
+[Demo Application](https://formkit-openvue.netlify.app/)
+
+## Supported Inputs for OpenVue
+
+- AutoComplete
+- CascadeSelect
+- Checkbox
+- ColorPicker
+- DatePicker
+- Editor (HTML Editor - if you register the editor component, make sure to import quill)
+- InputMask
+- InputNumber
+- InputOtp
+- InputText
+- Knob
+- Listbox
+- MultiSelect
+- Password
+- RadioButton
+- Rating
+- Repeater (not an OpenVue component, but provided as helper for repeating groups of inputs)
+- Select
+- SelectButton
+- Slider
+- Textarea
+- ToggleButton
+- ToggleSwitch
+- TreeSelect
+
+![](formkit-primevue.png)

package/components.d.ts

@@ -0,0 +1 @@
+export * from './dist/components'

package/dist/components/FormAutoComplete.vue

@@ -0,0 +1,100 @@
+<script setup>
+import { ref } from "vue";
+import { useFormKitInput } from "../composables";
+const props = defineProps({ context: {
+	type: Object,
+	required: true
+} });
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context);
+const suggestions = ref(["", {}]);
+suggestions.value = [];
+const loading = ref(false);
+/**
+* Searches for suggestions based on the input query.
+*/
+async function search(event) {
+	if (props.context?.options && props.context?.optionLabel) {
+		suggestions.value = props.context.options.filter((option) => {
+			return option[`${props.context.optionLabel}`].toString().toLowerCase().includes(event.query.toLowerCase());
+		});
+	} else {
+		loading.value = true;
+		try {
+			suggestions.value = await props.context?.attrs.complete(event.query);
+		} catch (error) {
+			console.error("Error fetching suggestions:", error);
+			suggestions.value = [];
+		} finally {
+			loading.value = false;
+		}
+	}
+}
+/**
+* Handles paste event to transform a string separated by any of the provided separators into multiple items.
+*/
+function handlePaste(event) {
+	if (!props.context?.multiple) return;
+	const clipboardData = event.clipboardData;
+	if (!clipboardData) return;
+	const pastedText = clipboardData.getData("text");
+	const separators = Array.isArray(props.context?.separators) && props.context.separators.length > 0 ? props.context.separators : [","];
+	const regex = new RegExp(`[${separators.map((s) => s.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&")).join("")}]`);
+	// If separators are provided, split the pasted text by them
+	if (pastedText && regex.test(pastedText)) {
+		event.preventDefault();
+		const items = pastedText.split(regex).map((item) => item.trim()).filter((item) => item.length > 0);
+		// Use a local ref, never mutate context._value directly
+		if (Array.isArray(modelValue.value)) {
+			modelValue.value = [...modelValue.value, ...items];
+		} else {
+			modelValue.value = items;
+		}
+	} else if (pastedText) {
+		event.preventDefault();
+		// If no separators, just set the value directly
+		if (Array.isArray(modelValue.value)) {
+			modelValue.value = [...modelValue.value, pastedText.trim()];
+		} else {
+			modelValue.value = [pastedText.trim()];
+		}
+	}
+}
+</script>
+
+<template>
+  <div class="p-formkit">
+    <AutoComplete
+      :id="context.id"
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :size="context?.size ?? undefined"
+      :suggestions="suggestions"
+      :option-label="context?.optionLabel"
+      :dropdown="context?.dropdown ?? false"
+      :multiple="context?.multiple ?? false"
+      :typeahead="context?.typeahead ?? true"
+      :min-length="context?.minLength ?? undefined"
+      :placeholder="context?.placeholder ?? undefined"
+      :fluid="context?.fluid ?? undefined"
+      :pt="context?.pt"
+      :pt-options="context?.ptOptions"
+      :unstyled="unstyled"
+      :loading="loading"
+      @keydown.enter.prevent
+      @complete="search"
+      @change="handleInput"
+      @blur="handleBlur"
+      @paste="handlePaste"
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </AutoComplete>
+  </div>
+</template>

package/dist/components/FormCascadeSelect.vue

@@ -0,0 +1,41 @@
+<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">
+    <CascadeSelect
+      :id="context.id"
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs.readonly ?? false"
+      :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-group-label="context.optionGroupLabel"
+      :option-group-children="context.optionGroupChildren"
+      :placeholder="context.placeholder"
+      :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>
+    </CascadeSelect>
+  </div>
+</template>

package/dist/components/FormCheckbox.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { useFormKitInput, useFormKitSection } from "../composables";
+const props = defineProps({ context: {
+	type: Object,
+	required: true
+} });
+const { hasPrefix, hasSuffix, generateId } = useFormKitSection(props.context);
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context);
+const generatedId = generateId();
+</script>
+
+<template>
+  <div class="p-formkit">
+    <label v-if="hasPrefix" :for="generatedId" class="formkit-prefix">
+      {{ context?.prefix }}
+    </label>
+    <Checkbox
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :input-id="generatedId"
+      :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"
+      :indeterminate="context.indeterminate ?? undefined"
+      :binary="context.binary ?? true"
+      :variant="context.variant ?? 'outlined'"
+      :true-value="context.trueValue ?? undefined"
+      :false-value="context.falseValue ?? undefined"
+      :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>
+    </Checkbox>
+    <label v-if="hasSuffix" :for="generatedId" class="formkit-suffix">
+      {{ context?.suffix }}
+    </label>
+  </div>
+</template>

package/dist/components/FormColorPicker.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { useFormKitInput } from "../composables";
+const props = defineProps({ context: {
+	type: Object,
+	required: true
+} });
+const { unstyled, handleChange, modelValue } = useFormKitInput(props.context);
+</script>
+
+<template>
+  <div class="p-formkit">
+    <ColorPicker
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs.readonly ?? false"
+      :style="context?.attrs.style"
+      :panel-class="context?.attrs.class"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :default-color="context.defaultColor ?? 'ff0000'"
+      :inline="context.inline ?? false"
+      :format="context.format"
+      :pt="context.pt"
+      :pt-options="context.ptOptions"
+      :unstyled="unstyled"
+      @change="handleChange"
+    />
+  </div>
+</template>

package/dist/components/FormDatePicker.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { useFormKitInput } from "../composables";
+const props = defineProps({ context: {
+	type: Object,
+	required: true
+} });
+const { validSlotNames, unstyled, isInvalid, handleInput, modelValue } = useFormKitInput(props.context);
+function handleBlur(e) {
+	props.context?.handlers.blur(e.originalEvent);
+}
+function handleClearClick() {
+	props.context?.node.input(null);
+}
+function handleSelect(e) {
+	if (props.context?.selectionMode === "range" || props.context?.selectionMode === "multiple") {
+		props.context?.node.input(props.context._value);
+	} else {
+		props.context?.node.input(e);
+	}
+}
+</script>
+
+<template>
+  <div class="p-formkit">
+    <DatePicker
+      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"
+      :date-format="context?.dateFormat"
+      :placeholder="context?.placeholder"
+      :selection-mode="context?.selectionMode ?? 'single'"
+      :inline="context?.inline ?? false"
+      :show-other-months="context?.showOtherMonths ?? true"
+      :select-other-months="context?.selectOtherMonths ?? false"
+      :icon="context?.icon"
+      :show-icon="context.showIcon"
+      :previous-icon="context?.previousIcon"
+      :next-icon="context?.nextIcon"
+      :increment-icon="context?.incrementIcon"
+      :decrement-icon="context?.decrementIcon"
+      :number-of-months="context?.numberOfMonths ?? 1"
+      :responsive-options="context?.responsiveOptions"
+      :view="context?.view ?? 'date'"
+      :touch-u-i="context?.touchUI ?? false"
+      :min-date="context?.minDate"
+      :max-date="context?.maxDate"
+      :disabled-dates="context?.disabledDates"
+      :disabled-days="context?.disabledDays"
+      :max-date-count="context?.maxDateCount"
+      :show-on-focus="context?.showOnFocus ?? true"
+      :auto-z-index="context?.autoZIndex ?? true"
+      :base-z-index="context?.baseZIndex ?? 0"
+      :show-button-bar="context?.showButtonBar ?? false"
+      :show-time="context?.showTime ?? false"
+      :time-only="context?.timeOnly ?? false"
+      :short-year-cutoff="context?.shortYearCutoff ?? '+10'"
+      :hour-format="context?.hourFormat ?? '24'"
+      :step-hour="context?.stepHour ?? 1"
+      :step-minute="context?.stepMinute ?? 1"
+      :step-second="context?.stepSecond ?? 1"
+      :show-seconds="context?.showSeconds ?? false"
+      :hide-on-date-time-select="context?.hideOnDateTimeSelect ?? false"
+      :hide-on-range-selection="context?.hideOnRangeSelection ?? false"
+      :time-separator="context?.timeSeparator ?? ':'"
+      :show-week="context?.showWeek ?? false"
+      :manual-input="context?.manualInput ?? true"
+      :append-to="context?.appendTo ?? 'body'"
+      :panel-style="context?.panelStyle"
+      :panel-class="context?.panelClass"
+      :pt="context?.pt"
+      :pt-options="context?.ptOptions"
+      :unstyled="unstyled"
+      :update-model-type="context?.updateModelType ?? 'date'"
+      @date-select="handleSelect"
+      @blur="handleBlur"
+      @clear-click="handleClearClick"
+      @value-change="handleInput"
+    >
+      <template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
+        <component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
+      </template>
+    </DatePicker>
+  </div>
+</template>

package/dist/components/FormInputMask.vue

@@ -0,0 +1,67 @@
+<script setup>
+import IconField from "openvue/iconfield";
+import InputIcon from "openvue/inputicon";
+import { useFormKitInput, useFormKitSection } from "../composables";
+const props = defineProps({ context: {
+	type: Object,
+	required: true
+} });
+const { unstyled, isInvalid, handleInput, handleBlur, modelValue } = useFormKitInput(props.context);
+const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context);
+</script>
+
+<template>
+  <div class="p-formkit">
+    <IconField v-if="hasPrefixIcon || hasSuffixIcon">
+      <InputIcon v-if="hasPrefixIcon" :class="context?.iconPrefix" />
+      <InputMask
+        :id="context.id"
+        v-model="modelValue"
+        v-bind="context?.attrs"
+        :disabled="!!context?.disabled"
+        :readonly="context?.attrs.readonly ?? false"
+        :class="context?.attrs?.class"
+        :invalid="isInvalid"
+        :tabindex="context?.attrs.tabindex"
+        :aria-label="context?.attrs.ariaLabel"
+        :aria-labelledby="context?.attrs.ariaLabelledby"
+        :size="context?.size ?? undefined"
+        :mask="context.mask ?? undefined"
+        :slot-char="context.slotChar ?? '_'"
+        :auto-clear="context.autoClear ?? true"
+        :unmask="context.unmask ?? false"
+        :pt="context.pt"
+        :variant="context.variant"
+        :pt-options="context.ptOptions"
+        :unstyled="unstyled"
+        @update:model-value="handleInput"
+        @blur="handleBlur"
+      />
+      <InputIcon v-if="hasSuffixIcon" :class="context?.iconSuffix" />
+    </IconField>
+    <InputMask
+      v-if="!hasPrefixIcon && !hasSuffixIcon"
+      :id="context.id"
+      v-model="modelValue"
+      v-bind="context?.attrs"
+      :disabled="!!context?.disabled"
+      :readonly="context?.attrs.readonly ?? false"
+      :class="context?.attrs?.class"
+      :invalid="isInvalid"
+      :tabindex="context?.attrs.tabindex"
+      :aria-label="context?.attrs.ariaLabel"
+      :aria-labelledby="context?.attrs.ariaLabelledby"
+      :size="context?.size ?? undefined"
+      :mask="context.mask ?? undefined"
+      :slot-char="context.slotChar ?? '_'"
+      :auto-clear="context.autoClear ?? true"
+      :unmask="context.unmask ?? false"
+      :pt="context.pt"
+      :variant="context.variant"
+      :pt-options="context.ptOptions"
+      :unstyled="unstyled"
+      @update:model-value="handleInput"
+      @blur="handleBlur"
+    />
+  </div>
+</template>