@sfxcode/nuxt-ui-formkit 1.2.4 → 1.2.6

package/dist/runtime/components/inputs/FUInputTime.vue

@@ -7,7 +7,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, handleBlur, isInvalid, styleClass, color, modelValue, validSlotNames } = useFormKitInput(props.context);
+const { handleInput, handleChange, handleBlur, isInvalid, styleClass, color, modelValue, validSlotNames, ui } = useFormKitInput(props.context);
 const handleContainerBlur = createContainerBlurHandler(props.context);
 </script>
 
@@ -45,7 +45,7 @@ const handleContainerBlur = createContainerBlurHandler(props.context);
     :hide-time-zone="context.hideTimeZone"
     :max-value="context.maxValue"
     :min-value="context.minValue"
-    :ui="context.ui"
+    :ui="ui"
     @change="handleChange"
     @update:model-value="handleInput"
     @blur="handleBlur"

package/dist/runtime/components/inputs/FUListbox.d.vue.ts

@@ -49,6 +49,7 @@ export interface FormKitListboxProps {
     autofocus?: boolean;
     autofocusDelay?: number;
     searchTerm?: string;
+    name?: string;
     ui?: Record<string, unknown>;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

package/dist/runtime/components/inputs/FUListbox.vue

@@ -8,7 +8,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, items, validSlotNames } = useFormKitInput(props.context);
+const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, items, validSlotNames, ui } = useFormKitInput(props.context);
 const handleContainerBlur = createContainerBlurHandler(props.context);
 const targetItems = ref(modelValue.value || []);
 const sourceSelection = ref([]);
@@ -24,6 +24,7 @@ const sourceItems = computed(() => {
   return items.value.filter((item) => !targetItems.value.some((t) => t[valueKey] === item[valueKey]));
 });
 const transferSlotNames = computed(() => validSlotNames.value.filter((name) => name !== "item-trailing"));
+const transferDefaultValue = computed(() => props.context.defaultValue);
 const sourceContainerRef = ref();
 const targetContainerRef = ref();
 const sourceDragActive = ref(false);
@@ -211,6 +212,7 @@ watch(targetItems, (newVal) => {
     v-if="!context.displayMode || context.displayMode === 'single'"
     :id="context.id"
     v-model="modelValue"
+    :name="context.node.name"
     v-bind="{ ...context?.attrs }"
     :class="styleClass"
     :style="context?.attrs.style"
@@ -239,7 +241,7 @@ watch(targetItems, (newVal) => {
     :autofocus="context.autofocus"
     :autofocus-delay="context.autofocusDelay"
     :search-term="context.searchTerm"
-    :ui="context.ui"
+    :ui="ui"
     @change="handleChange"
     @update:model-value="handleInput"
     @focusout="handleContainerBlur"
@@ -277,6 +279,7 @@ watch(targetItems, (newVal) => {
       <UListbox
         :id="context.id + '-transfer-left'"
         v-model="sourceSelection"
+        :name="context.node.name + '-transfer-left'"
         v-bind="{ ...context?.attrs }"
         :class="styleClass"
         :style="context?.attrs.style"
@@ -287,7 +290,7 @@ watch(targetItems, (newVal) => {
         :orientation="context.orientation"
         :selection-behavior="context.selectionBehavior"
         :disabled="!!context?.disabled"
-        :default-value="context.defaultValue"
+        :default-value="transferDefaultValue"
         :multiple="true"
         :value-key="context.valueKey"
         :label-key="context.labelKey"
@@ -304,7 +307,7 @@ watch(targetItems, (newVal) => {
         :autofocus="context.autofocus"
         :autofocus-delay="context.autofocusDelay"
         :search-term="context.searchTerm"
-        :ui="context.ui"
+        :ui="ui"
         @change="handleChange"
         @update:model-value="handleInput"
       >
@@ -379,6 +382,7 @@ watch(targetItems, (newVal) => {
       <UListbox
         :id="context.id + '-transfer-right'"
         v-model="targetSelection"
+        :name="context.node.name + '-transfer-right'"
         v-bind="{ ...context?.attrs }"
         :class="styleClass"
         :style="context?.attrs.style"
@@ -389,7 +393,7 @@ watch(targetItems, (newVal) => {
         :orientation="context.orientation"
         :selection-behavior="context.selectionBehavior"
         :disabled="!!context?.disabled"
-        :default-value="context.defaultValue"
+        :default-value="transferDefaultValue"
         :multiple="true"
         :value-key="context.valueKey"
         :label-key="context.labelKey"
@@ -406,7 +410,7 @@ watch(targetItems, (newVal) => {
         :autofocus="context.autofocus"
         :autofocus-delay="context.autofocusDelay"
         :search-term="context.searchTerm"
-        :ui="context.ui"
+        :ui="ui"
         @change="handleChange"
         @update:model-value="handleInput"
       >

package/dist/runtime/components/inputs/FUListbox.vue.d.ts

@@ -49,6 +49,7 @@ export interface FormKitListboxProps {
     autofocus?: boolean;
     autofocusDelay?: number;
     searchTerm?: string;
+    name?: string;
     ui?: Record<string, unknown>;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

package/dist/runtime/components/inputs/FUPinInput.d.vue.ts

@@ -15,6 +15,7 @@ export interface FormKitPinInputProps {
     separator?: number | number[];
     type?: 'text' | 'number';
     placeholder?: string;
+    name?: string;
     ui?: Record<string, unknown>;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

package/dist/runtime/components/inputs/FUPinInput.vue

@@ -7,7 +7,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, handleBlur, isInvalid, styleClass, color, modelValue } = useFormKitInput(props.context);
+const { handleInput, handleChange, handleBlur, isInvalid, styleClass, color, modelValue, ui } = useFormKitInput(props.context);
 const handleContainerBlur = createContainerBlurHandler(props.context);
 function handlePinBlur(event) {
   handleBlur(event);
@@ -18,6 +18,7 @@ function handlePinBlur(event) {
   <UPinInput
     :id="context.id"
     v-model="modelValue"
+    :name="context.node.name"
     v-bind="{ ...context?.attrs }"
     :default-value="context.defaultValue"
     :class="styleClass"
@@ -37,7 +38,7 @@ function handlePinBlur(event) {
     :separator="context.separator"
     :type="context.type ?? 'text'"
     :placeholder="context.placeholder"
-    :ui="context.ui"
+    :ui="ui"
     @change="handleChange"
     @update:model-value="handleInput"
     @blur="handlePinBlur"

package/dist/runtime/components/inputs/FUPinInput.vue.d.ts

@@ -15,6 +15,7 @@ export interface FormKitPinInputProps {
     separator?: number | number[];
     type?: 'text' | 'number';
     placeholder?: string;
+    name?: string;
     ui?: Record<string, unknown>;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

package/dist/runtime/components/inputs/FURadioGroup.vue

@@ -7,7 +7,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, styleClass, color, modelValue, items, validSlotNames } = useFormKitInput(props.context);
+const { handleInput, handleChange, styleClass, color, modelValue, items, validSlotNames, ui } = useFormKitInput(props.context);
 const handleContainerBlur = createContainerBlurHandler(props.context);
 </script>
 
@@ -29,8 +29,8 @@ const handleContainerBlur = createContainerBlurHandler(props.context);
     :label-key="context.labelKey"
     :description-key="context.descriptionKey"
     :loop="context.loop ?? false"
-    :name="context.name"
-    :ui="context.ui"
+    :name="context.node.name"
+    :ui="ui"
     @change="handleChange"
     @update:model-value="handleInput"
     @focusout="handleContainerBlur"

package/dist/runtime/components/inputs/FUSelect.d.vue.ts

@@ -32,6 +32,7 @@ export interface FormKitSelectProps {
     trailingIcon?: string;
     loading?: boolean;
     loadingIcon?: string;
+    name?: string;
     ui?: Record<string, unknown>;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

package/dist/runtime/components/inputs/FUSelect.vue

@@ -6,13 +6,14 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, isInvalid, color, styleClass, modelValue, items, validSlotNames } = useFormKitInput(props.context);
+const { handleInput, handleChange, isInvalid, color, styleClass, modelValue, items, validSlotNames, ui } = useFormKitInput(props.context);
 </script>
 
 <template>
   <USelect
     :id="context.id"
     v-model="modelValue"
+    :name="context.node.name"
     v-bind="{ ...context?.attrs }"
     :class="styleClass"
     :disabled="!!context?.disabled"
@@ -45,7 +46,7 @@ const { handleInput, handleChange, isInvalid, color, styleClass, modelValue, ite
     :open="context.open"
     :default-open="context.defaultOpen"
     :autocomplete="context.autocomplete"
-    :ui="context.ui"
+    :ui="ui"
     @change="handleChange"
     @update:model-value="handleInput"
   >

package/dist/runtime/components/inputs/FUSelect.vue.d.ts

@@ -32,6 +32,7 @@ export interface FormKitSelectProps {
     trailingIcon?: string;
     loading?: boolean;
     loadingIcon?: string;
+    name?: string;
     ui?: Record<string, unknown>;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

package/dist/runtime/components/inputs/FUSelectMenu.d.vue.ts

@@ -58,6 +58,7 @@ export interface FormKitSelectMenuProps {
     resetModelValueOnClear?: boolean;
     highlightOnHover?: boolean;
     searchTerm?: string;
+    name?: string;
     ui?: Record<string, unknown>;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

package/dist/runtime/components/inputs/FUSelectMenu.vue

@@ -6,13 +6,14 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, items, validSlotNames } = useFormKitInput(props.context);
+const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, items, validSlotNames, ui } = useFormKitInput(props.context);
 </script>
 
 <template>
   <USelectMenu
     :id="context.id"
     v-model="modelValue"
+    :name="context.node.name"
     v-bind="{ ...context?.attrs }"
     :class="styleClass"
     :disabled="!!context?.disabled"
@@ -57,7 +58,7 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, ite
     :reset-model-value-on-clear="context.resetModelValueOnClear"
     :highlight-on-hover="context.highlightOnHover"
     :search-term="context.searchTerm"
-    :ui="context.ui"
+    :ui="ui"
     @change="handleChange"
     @update:model-value="handleInput"
   >

package/dist/runtime/components/inputs/FUSelectMenu.vue.d.ts

@@ -58,6 +58,7 @@ export interface FormKitSelectMenuProps {
     resetModelValueOnClear?: boolean;
     highlightOnHover?: boolean;
     searchTerm?: string;
+    name?: string;
     ui?: Record<string, unknown>;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

package/dist/runtime/components/inputs/FUSlider.vue

@@ -6,7 +6,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, styleClass, color, modelValue } = useFormKitInput(props.context);
+const { handleInput, handleChange, styleClass, color, modelValue, ui } = useFormKitInput(props.context);
 </script>
 
 <template>
@@ -23,13 +23,13 @@ const { handleInput, handleChange, styleClass, color, modelValue } = useFormKitI
     :orientation="context.orientation ?? 'horizontal'"
     :tooltip="context.tooltip"
     :default-value="context.defaultValue"
-    :name="context.name"
+    :name="context.node.name"
     :inverted="context.inverted"
     :min="context.min"
     :max="context.max"
     :step="context.step"
     :min-steps-between-thumbs="context.minStepsBetweenThumbs"
-    :ui="context.ui"
+    :ui="ui"
     @change="handleChange"
     @update:model-value="handleInput"
   />

package/dist/runtime/components/inputs/FUSwitch.d.vue.ts

@@ -13,6 +13,7 @@ export interface FormKitSwitchProps {
     trueValue?: unknown;
     falseValue?: unknown;
     autofocus?: false | true | 'true' | 'false';
+    name?: string;
     ui?: Record<string, unknown>;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

package/dist/runtime/components/inputs/FUSwitch.vue

@@ -6,13 +6,14 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, handleBlur, styleClass, color, modelValue, validSlotNames } = useFormKitInput(props.context);
+const { handleInput, handleChange, handleBlur, styleClass, color, modelValue, validSlotNames, ui } = useFormKitInput(props.context);
 </script>
 
 <template>
   <USwitch
     :id="context.id"
     v-model="modelValue"
+    :name="context.node.name"
     v-bind="{ ...context?.attrs }"
     :class="styleClass"
     :disabled="!!context?.disabled"
@@ -29,7 +30,7 @@ const { handleInput, handleChange, handleBlur, styleClass, color, modelValue, va
     :true-value="context.trueValue"
     :false-value="context.falseValue"
     :autofocus="context.autofocus"
-    :ui="context.ui"
+    :ui="ui"
     @change="handleChange"
     @update:model-value="handleInput"
     @blur="handleBlur"

package/dist/runtime/components/inputs/FUSwitch.vue.d.ts

@@ -13,6 +13,7 @@ export interface FormKitSwitchProps {
     trueValue?: unknown;
     falseValue?: unknown;
     autofocus?: false | true | 'true' | 'false';
+    name?: string;
     ui?: Record<string, unknown>;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

package/dist/runtime/components/inputs/FUTextarea.vue

@@ -6,7 +6,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, handleBlur, styleClass, color, isInvalid, modelValue, validSlotNames } = useFormKitInput(props.context);
+const { handleInput, handleChange, handleBlur, styleClass, color, isInvalid, modelValue, validSlotNames, ui } = useFormKitInput(props.context);
 </script>
 
 <template>
@@ -43,7 +43,7 @@ const { handleInput, handleChange, handleBlur, styleClass, color, isInvalid, mod
     :maxlength="context.maxlength"
     :minlength="context.minlength"
     :wrap="context.wrap"
-    :ui="context.ui"
+    :ui="ui"
     @change="handleChange"
     @update:model-value="handleInput"
     @blur="handleBlur"

package/dist/runtime/components/inputs/FUTree.d.vue.ts

@@ -0,0 +1,36 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { PropType } from 'vue';
+export interface FormKitTreeProps {
+    color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    disabled?: boolean;
+    multiple?: boolean;
+    nested?: boolean;
+    virtualize?: boolean | {
+        overscan?: number;
+        estimateSize?: number | ((index: number) => number);
+    };
+    labelKey?: string;
+    trailingIcon?: string;
+    expandedIcon?: string;
+    collapsedIcon?: string;
+    expanded?: string[];
+    defaultExpanded?: string[];
+    selectionBehavior?: 'toggle' | 'replace';
+    propagateSelect?: boolean;
+    bubbleSelect?: boolean;
+    ui?: Record<string, unknown>;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitTreeProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitTreeProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/inputs/FUTree.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { useFormKitInput } from "../../utils/useFormKitInput";
+import { createContainerBlurHandler } from "../../utils/useFormKitContainerBlur";
+const props = defineProps({
+  context: {
+    type: Object,
+    required: true
+  }
+});
+const { handleInput, styleClass, color, modelValue, items, validSlotNames, ui } = useFormKitInput(props.context);
+const handleContainerBlur = createContainerBlurHandler(props.context);
+</script>
+
+<template>
+  <UTree
+    :id="context.id"
+    v-model="modelValue"
+    v-bind="{ ...context?.attrs }"
+    :class="styleClass"
+    :style="context?.attrs.style"
+    :color="color"
+    :size="context.size ?? 'md'"
+    :items="items"
+    :disabled="!!context?.disabled"
+    :multiple="context.multiple"
+    :nested="context.nested ?? true"
+    :virtualize="context.virtualize"
+    :label-key="context.labelKey"
+    :trailing-icon="context.trailingIcon"
+    :expanded-icon="context.expandedIcon"
+    :collapsed-icon="context.collapsedIcon"
+    :expanded="context.expanded"
+    :default-expanded="context.defaultExpanded"
+    :selection-behavior="context.selectionBehavior"
+    :propagate-select="context.propagateSelect"
+    :bubble-select="context.bubbleSelect"
+    :ui="ui"
+    @update:model-value="handleInput"
+    @focusout="handleContainerBlur"
+  >
+    <template
+      v-for="slotName in validSlotNames"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <component
+        :is="context?.slots[slotName]"
+        v-bind="{ ...context, ...slotProps }"
+      />
+    </template>
+  </UTree>
+</template>

package/dist/runtime/components/inputs/FUTree.vue.d.ts

@@ -0,0 +1,36 @@
+import type { FormKitFrameworkContext } from '@formkit/core';
+import type { PropType } from 'vue';
+export interface FormKitTreeProps {
+    color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    disabled?: boolean;
+    multiple?: boolean;
+    nested?: boolean;
+    virtualize?: boolean | {
+        overscan?: number;
+        estimateSize?: number | ((index: number) => number);
+    };
+    labelKey?: string;
+    trailingIcon?: string;
+    expandedIcon?: string;
+    collapsedIcon?: string;
+    expanded?: string[];
+    defaultExpanded?: string[];
+    selectionBehavior?: 'toggle' | 'replace';
+    propagateSelect?: boolean;
+    bubbleSelect?: boolean;
+    ui?: Record<string, unknown>;
+}
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitTreeProps>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    context: {
+        type: PropType<FormKitFrameworkContext & FormKitTreeProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/output/FUOutputBoolean.d.vue.ts

@@ -1,4 +1,5 @@
 import type { FormKitFrameworkContext } from '@formkit/core';
+import type { FormKitOutputUi } from '../../utils/useFormKitOutput.js';
 import type { PropType } from 'vue';
 import type { FormKitIconProps } from './FUIcon.vue.js';
 export interface FormKitOutputBooleanProps {
@@ -14,6 +15,7 @@ export interface FormKitOutputBooleanProps {
     trueIcon?: string;
     trueValue?: string;
     variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    ui?: FormKitOutputUi;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {

package/dist/runtime/components/output/FUOutputBoolean.vue.d.ts

@@ -1,4 +1,5 @@
 import type { FormKitFrameworkContext } from '@formkit/core';
+import type { FormKitOutputUi } from '../../utils/useFormKitOutput.js';
 import type { PropType } from 'vue';
 import type { FormKitIconProps } from './FUIcon.vue.js';
 export interface FormKitOutputBooleanProps {
@@ -14,6 +15,7 @@ export interface FormKitOutputBooleanProps {
     trueIcon?: string;
     trueValue?: string;
     variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    ui?: FormKitOutputUi;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {

package/dist/runtime/components/output/FUOutputDate.d.vue.ts

@@ -1,5 +1,6 @@
 import type { FormKitFrameworkContext } from '@formkit/core';
 import type { PropType } from 'vue';
+import type { FormKitOutputUi } from '../../utils/useFormKitOutput.js';
 import type { FormKitIconProps } from './FUIcon.vue.js';
 export interface FormKitOutputDateProps {
     color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
@@ -14,6 +15,7 @@ export interface FormKitOutputDateProps {
     trailing?: boolean;
     trailingIcon?: string;
     variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    ui?: FormKitOutputUi;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {

package/dist/runtime/components/output/FUOutputDate.vue.d.ts

@@ -1,5 +1,6 @@
 import type { FormKitFrameworkContext } from '@formkit/core';
 import type { PropType } from 'vue';
+import type { FormKitOutputUi } from '../../utils/useFormKitOutput.js';
 import type { FormKitIconProps } from './FUIcon.vue.js';
 export interface FormKitOutputDateProps {
     color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
@@ -14,6 +15,7 @@ export interface FormKitOutputDateProps {
     trailing?: boolean;
     trailingIcon?: string;
     variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    ui?: FormKitOutputUi;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {

package/dist/runtime/components/output/FUOutputLink.d.vue.ts

@@ -1,5 +1,6 @@
 import type { FormKitFrameworkContext } from '@formkit/core';
 import type { PropType } from 'vue';
+import type { FormKitOutputUi } from '../../utils/useFormKitOutput.js';
 import type { FormKitIconProps } from './FUIcon.vue.js';
 export interface FormKitOutputLinkProps {
     color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
@@ -12,6 +13,7 @@ export interface FormKitOutputLinkProps {
     variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
     target?: '_blank' | '_self' | '_parent' | '_top';
     rel?: string;
+    ui?: FormKitOutputUi;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {

package/dist/runtime/components/output/FUOutputLink.vue.d.ts

@@ -1,5 +1,6 @@
 import type { FormKitFrameworkContext } from '@formkit/core';
 import type { PropType } from 'vue';
+import type { FormKitOutputUi } from '../../utils/useFormKitOutput.js';
 import type { FormKitIconProps } from './FUIcon.vue.js';
 export interface FormKitOutputLinkProps {
     color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
@@ -12,6 +13,7 @@ export interface FormKitOutputLinkProps {
     variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
     target?: '_blank' | '_self' | '_parent' | '_top';
     rel?: string;
+    ui?: FormKitOutputUi;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {

package/dist/runtime/components/output/FUOutputList.d.vue.ts

@@ -1,5 +1,6 @@
 import type { FormKitFrameworkContext } from '@formkit/core';
 import type { PropType } from 'vue';
+import type { FormKitOutputUi } from '../../utils/useFormKitOutput.js';
 import type { FormKitIconProps } from './FUIcon.vue.js';
 export interface FormKitOutputListProps {
     color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
@@ -13,6 +14,7 @@ export interface FormKitOutputListProps {
     trailing?: boolean;
     trailingIcon?: string;
     variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    ui?: FormKitOutputUi;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {

package/dist/runtime/components/output/FUOutputList.vue

@@ -44,7 +44,7 @@ const badgeVariant = computed(() => {
   if (variant === "ghost" || variant === "none") return "soft";
   return variant;
 });
-const { containerClass, iconClass, leadingIconName, trailingIconName } = useFormKitOutput(props.context);
+const { containerClass, iconClass, leadingIconName, trailingIconName, ui } = useFormKitOutput(props.context);
 </script>
 
 <template>
@@ -128,6 +128,7 @@ const { containerClass, iconClass, leadingIconName, trailingIconName } = useForm
         :variant="badgeVariant"
         :size="context.size"
         :class="itemClass"
+        :ui="ui?.badge"
       >
         {{ item }}
       </UBadge>

package/dist/runtime/components/output/FUOutputList.vue.d.ts

@@ -1,5 +1,6 @@
 import type { FormKitFrameworkContext } from '@formkit/core';
 import type { PropType } from 'vue';
+import type { FormKitOutputUi } from '../../utils/useFormKitOutput.js';
 import type { FormKitIconProps } from './FUIcon.vue.js';
 export interface FormKitOutputListProps {
     color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
@@ -13,6 +14,7 @@ export interface FormKitOutputListProps {
     trailing?: boolean;
     trailingIcon?: string;
     variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    ui?: FormKitOutputUi;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {

package/dist/runtime/components/output/FUOutputNumber.d.vue.ts

@@ -1,5 +1,6 @@
 import type { FormKitFrameworkContext } from '@formkit/core';
 import type { PropType } from 'vue';
+import type { FormKitOutputUi } from '../../utils/useFormKitOutput.js';
 import type { FormKitIconProps } from './FUIcon.vue.js';
 export interface FormKitOutputNumberProps {
     color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
@@ -12,6 +13,7 @@ export interface FormKitOutputNumberProps {
     trailing?: boolean;
     trailingIcon?: string;
     variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    ui?: FormKitOutputUi;
 }
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     context: {