@sfxcode/nuxt-ui-formkit 1.2.3 → 1.2.5

package/dist/runtime/components/FUDataEditOverlay.vue.d.ts

@@ -0,0 +1,64 @@
+import type { FormKitSchemaDefinition } from '@formkit/core';
+import type { PropType } from 'vue';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    schema: {
+        type: PropType<FormKitSchemaDefinition>;
+        default: null;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        type: PropType<"modal" | "slideover">;
+        default: string;
+    };
+    open: {
+        type: PropType<boolean>;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (value: unknown) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    data: {
+        type: ObjectConstructor;
+        default: null;
+    };
+    schema: {
+        type: PropType<FormKitSchemaDefinition>;
+        default: null;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    as: {
+        type: PropType<"modal" | "slideover">;
+        default: string;
+    };
+    open: {
+        type: PropType<boolean>;
+    };
+}>> & Readonly<{
+    onClose?: ((value: unknown) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    schema: FormKitSchemaDefinition;
+    data: Record<string, any>;
+    title: string;
+    as: "modal" | "slideover";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/FUDataView.d.vue.ts

@@ -6,7 +6,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     data: {
-        type: ObjectConstructor;
+        type: PropType<Record<string, unknown>>;
         default: null;
     };
     schema: {
@@ -26,13 +26,13 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
     };
     modelValue: {
-        type: PropType<FormKitSchemaDefinition>;
+        type: PropType<Record<string, unknown>>;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: FormKitSchemaDefinition | undefined) => any;
+    "update:modelValue": (value: Record<string, unknown> | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     data: {
-        type: ObjectConstructor;
+        type: PropType<Record<string, unknown>>;
         default: null;
     };
     schema: {
@@ -52,13 +52,13 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
     };
     modelValue: {
-        type: PropType<FormKitSchemaDefinition>;
+        type: PropType<Record<string, unknown>>;
     };
 }>> & Readonly<{
-    "onUpdate:modelValue"?: ((value: FormKitSchemaDefinition | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: Record<string, unknown> | undefined) => any) | undefined;
 }>, {
     schema: FormKitSchemaDefinition;
-    data: Record<string, any>;
+    data: Record<string, unknown>;
     formClass: string;
     debugData: boolean;
     debugSchema: boolean;

package/dist/runtime/components/FUDataView.vue

@@ -25,7 +25,7 @@ const props = defineProps({
   }
 });
 const formSchema = ref(props.schema);
-const formData = defineModel({ type: [Object, String, Array] });
+const formData = defineModel({ type: Object });
 watch(() => props.schema, (newSchema) => {
   formSchema.value = newSchema;
 }, { deep: true });

package/dist/runtime/components/FUDataView.vue.d.ts

@@ -6,7 +6,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     data: {
-        type: ObjectConstructor;
+        type: PropType<Record<string, unknown>>;
         default: null;
     };
     schema: {
@@ -26,13 +26,13 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
     };
     modelValue: {
-        type: PropType<FormKitSchemaDefinition>;
+        type: PropType<Record<string, unknown>>;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: FormKitSchemaDefinition | undefined) => any;
+    "update:modelValue": (value: Record<string, unknown> | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     data: {
-        type: ObjectConstructor;
+        type: PropType<Record<string, unknown>>;
         default: null;
     };
     schema: {
@@ -52,13 +52,13 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
     };
     modelValue: {
-        type: PropType<FormKitSchemaDefinition>;
+        type: PropType<Record<string, unknown>>;
     };
 }>> & Readonly<{
-    "onUpdate:modelValue"?: ((value: FormKitSchemaDefinition | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: Record<string, unknown> | undefined) => any) | undefined;
 }>, {
     schema: FormKitSchemaDefinition;
-    data: Record<string, any>;
+    data: Record<string, unknown>;
     formClass: string;
     debugData: boolean;
     debugSchema: boolean;

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

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from "vue";
 import { useFormKitInput } from "../../utils/useFormKitInput";
+import { createContainerBlurHandler } from "../../utils/useFormKitContainerBlur";
 import { toDateValue, toDateValueOrRangeOrArray, fromDateValueOrRangeOrArray } from "../../utils/dateValueConversion";
 const props = defineProps({
   context: {
@@ -8,7 +9,8 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, styleClass, color, validSlotNames } = useFormKitInput(props.context);
+const { handleInput, styleClass, color, validSlotNames, ui } = useFormKitInput(props.context);
+const handleContainerBlur = createContainerBlurHandler(props.context);
 const conversionOptions = computed(() => ({ timeZone: props.context.timeZone }));
 const modelValue = computed({
   get: () => toDateValueOrRangeOrArray(props.context._value, conversionOptions.value),
@@ -44,8 +46,9 @@ const maxValue = computed(() => toDateValue(props.context.maxValue, conversionOp
     :max-value="maxValue"
     :is-date-disabled="context.isDateDisabled"
     :is-date-unavailable="context.isDateUnavailable"
-    :ui="context.ui"
+    :ui="ui"
     @update:model-value="handleInput"
+    @focusout="handleContainerBlur"
   >
     <template
       v-for="slotName in validSlotNames"

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

@@ -6,7 +6,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, styleClass, modelValue, color, validSlotNames } = useFormKitInput(props.context);
+const { handleInput, handleChange, handleBlur, styleClass, modelValue, color, validSlotNames, ui } = useFormKitInput(props.context);
 </script>
 
 <template>
@@ -28,9 +28,10 @@ const { handleInput, handleChange, styleClass, modelValue, color, validSlotNames
     :true-value="context.trueValue"
     :false-value="context.falseValue"
     :autofocus="context.autofocus"
-    :ui="context.ui"
+    :ui="ui"
     @change="handleChange"
     @update:model-value="handleInput"
+    @blur="handleBlur"
   >
     <template
       v-for="slotName in validSlotNames"

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

@@ -1,12 +1,14 @@
 <script setup>
 import { useFormKitInput } from "../../utils/useFormKitInput";
+import { createContainerBlurHandler } from "../../utils/useFormKitContainerBlur";
 const props = defineProps({
   context: {
     type: Object,
     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>
 
 <template>
@@ -29,8 +31,10 @@ const { handleInput, handleChange, styleClass, color, modelValue, items, validSl
     :description-key="context.descriptionKey"
     :loop="context.loop ?? false"
     :name="context.name"
+    :ui="ui"
     @change="handleChange"
     @update:model-value="handleInput"
+    @focusout="handleContainerBlur"
   >
     <template
       v-for="slotName in validSlotNames"

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

@@ -6,7 +6,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, styleClass, modelValue } = useFormKitInput(props.context);
+const { handleInput, handleChange, styleClass, modelValue, ui } = useFormKitInput(props.context);
 </script>
 
 <template>
@@ -20,7 +20,7 @@ const { handleInput, handleChange, styleClass, modelValue } = useFormKitInput(pr
     :size="context.size ?? 'md'"
     :format="context.format || 'hex'"
     :throttle="context.throttle"
-    :ui="context.ui"
+    :ui="ui"
     @change="handleChange"
     @update:model-value="handleInput"
   />

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

@@ -1,5 +1,6 @@
 <script setup>
 import { useFormKitInput } from "../../utils/useFormKitInput";
+import { createContainerBlurHandler } from "../../utils/useFormKitContainerBlur";
 const DEFAULT_EDITOR_TOOLBAR_ITEMS = [
   [
     { kind: "undo", icon: "i-lucide-undo", tooltip: { text: "Undo" } },
@@ -60,62 +61,65 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, styleClass, modelValue } = useFormKitInput(props.context);
+const { handleInput, styleClass, modelValue, ui } = useFormKitInput(props.context);
+const handleContainerBlur = createContainerBlurHandler(props.context);
 </script>
 
 <template>
-  <UEditor
-    :id="context.id"
-    v-model="modelValue"
-    v-bind="{ ...context?.attrs }"
-    :class="styleClass"
-    :editable="!context?.disabled"
-    :style="context?.attrs.style"
-    :content-type="context.contentType"
-    :starter-kit="context.starterKit"
-    :placeholder="context.placeholder"
-    :markdown="context.markdown"
-    :image="context.image"
-    :mention="context.mention"
-    :handlers="context.editorHandlers"
-    :extensions="context.extensions"
-    :autofocus="context.autofocus"
-    :ui="context.ui"
-    @update:model-value="handleInput"
-  >
-    <template #default="{ editor, handlers }">
-      <UEditorToolbar
-        v-if="context.toolbar !== false"
-        :editor="editor"
-        :items="context.toolbarItems ?? DEFAULT_EDITOR_TOOLBAR_ITEMS"
-        class="border-b border-default px-2 py-1 mb-2 flex-wrap"
-      />
-      <UEditorToolbar
-        v-if="context.bubbleToolbar !== false"
-        :editor="editor"
-        :items="context.bubbleToolbarItems ?? DEFAULT_BUBBLE_TOOLBAR_ITEMS"
-        layout="bubble"
-        :should-show="bubbleToolbarShouldShow"
-      />
-      <UEditorDragHandle
-        v-if="context.dragHandle"
-        :editor="editor"
-      />
-      <UEditorSuggestionMenu
-        v-if="context.suggestionMenu"
-        :editor="editor"
-        :items="context.suggestionMenuItems ?? DEFAULT_SUGGESTION_MENU_ITEMS"
-      />
-      <UEditorMentionMenu
-        v-if="context.mentionItems?.length"
-        :editor="editor"
-        :items="context.mentionItems"
-      />
-      <component
-        :is="context.slots.default"
-        v-if="context?.slots?.default"
-        v-bind="{ ...context, editor, handlers }"
-      />
-    </template>
-  </UEditor>
+  <div @focusout="handleContainerBlur">
+    <UEditor
+      :id="context.id"
+      v-model="modelValue"
+      v-bind="{ ...context?.attrs }"
+      :class="styleClass"
+      :editable="!context?.disabled"
+      :style="context?.attrs.style"
+      :content-type="context.contentType"
+      :starter-kit="context.starterKit"
+      :placeholder="context.placeholder"
+      :markdown="context.markdown"
+      :image="context.image"
+      :mention="context.mention"
+      :handlers="context.editorHandlers"
+      :extensions="context.extensions"
+      :autofocus="context.autofocus"
+      :ui="ui"
+      @update:model-value="handleInput"
+    >
+      <template #default="{ editor, handlers }">
+        <UEditorToolbar
+          v-if="context.toolbar !== false"
+          :editor="editor"
+          :items="context.toolbarItems ?? DEFAULT_EDITOR_TOOLBAR_ITEMS"
+          class="border-b border-default px-2 py-1 mb-2 flex-wrap"
+        />
+        <UEditorToolbar
+          v-if="context.bubbleToolbar !== false"
+          :editor="editor"
+          :items="context.bubbleToolbarItems ?? DEFAULT_BUBBLE_TOOLBAR_ITEMS"
+          layout="bubble"
+          :should-show="bubbleToolbarShouldShow"
+        />
+        <UEditorDragHandle
+          v-if="context.dragHandle"
+          :editor="editor"
+        />
+        <UEditorSuggestionMenu
+          v-if="context.suggestionMenu"
+          :editor="editor"
+          :items="context.suggestionMenuItems ?? DEFAULT_SUGGESTION_MENU_ITEMS"
+        />
+        <UEditorMentionMenu
+          v-if="context.mentionItems?.length"
+          :editor="editor"
+          :items="context.mentionItems"
+        />
+        <component
+          :is="context.slots.default"
+          v-if="context?.slots?.default"
+          v-bind="{ ...context, editor, handlers }"
+        />
+      </template>
+    </UEditor>
+  </div>
 </template>

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

@@ -6,7 +6,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, validSlotNames } = useFormKitInput(props.context);
+const { handleInput, handleChange, handleBlur, isInvalid, styleClass, color, modelValue, validSlotNames, ui } = useFormKitInput(props.context);
 </script>
 
 <template>
@@ -38,9 +38,10 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, val
     :file-delete-icon="context.fileDeleteIcon"
     :preview="context.preview"
     :name="context.name"
-    :ui="context.ui"
+    :ui="ui"
     @change="handleChange"
     @update:model-value="handleInput"
+    @blur="handleBlur"
   >
     <template
       v-for="slotName in validSlotNames"

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

@@ -6,7 +6,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, validSlotNames } = useFormKitInput(props.context);
+const { handleInput, handleChange, handleBlur, isInvalid, styleClass, color, modelValue, validSlotNames, ui } = useFormKitInput(props.context);
 </script>
 
 <template>
@@ -43,9 +43,10 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, val
     :min-length="context.minLength"
     :pattern="context.pattern"
     :step="context.step"
-    :ui="context.ui"
+    :ui="ui"
     @change="handleChange"
     @update:model-value="handleInput"
+    @blur="handleBlur"
   >
     <template
       v-for="slotName in validSlotNames"

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

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from "vue";
 import { useFormKitInput } from "../../utils/useFormKitInput";
+import { createContainerBlurHandler } from "../../utils/useFormKitContainerBlur";
 import { fromDateValueOrRange, toDateValue, toDateValueOrRange } from "../../utils/dateValueConversion";
 const props = defineProps({
   context: {
@@ -8,7 +9,8 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, isInvalid, styleClass, color, validSlotNames } = useFormKitInput(props.context);
+const { handleInput, handleChange, handleBlur, isInvalid, styleClass, color, validSlotNames, ui } = useFormKitInput(props.context);
+const handleContainerBlur = createContainerBlurHandler(props.context);
 const conversionOptions = computed(() => ({
   granularity: props.context.granularity,
   hideTimeZone: props.context.hideTimeZone,
@@ -63,9 +65,11 @@ const minValue = computed(() => toDateValue(props.context.minValue, conversionOp
     :max-value="maxValue"
     :min-value="minValue"
     :is-date-unavailable="context.isDateUnavailable"
-    :ui="context.ui"
+    :ui="ui"
     @change="handleChange"
     @update:model-value="handleInput"
+    @blur="handleBlur"
+    @focusout="handleContainerBlur"
   >
     <template
       v-for="slotName in validSlotNames"

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

@@ -6,7 +6,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, items, validSlotNames } = useFormKitInput(props.context);
+const { handleInput, handleChange, handleBlur, isInvalid, styleClass, color, modelValue, items, validSlotNames, ui } = useFormKitInput(props.context);
 </script>
 
 <template>
@@ -62,9 +62,10 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, ite
     :list="context.list"
     :autocomplete="context.autocomplete"
     :search-term="context.searchTerm"
-    :ui="context.ui"
+    :ui="ui"
     @change="handleChange"
     @update:model-value="handleInput"
+    @blur="handleBlur"
   >
     <template
       v-for="slotName in validSlotNames"

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

@@ -6,7 +6,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, validSlotNames } = useFormKitInput(props.context);
+const { handleInput, handleChange, handleBlur, isInvalid, styleClass, color, modelValue, validSlotNames, ui } = useFormKitInput(props.context);
 </script>
 
 <template>
@@ -44,9 +44,10 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, val
     :placeholder="context.placeholder"
     :list="context.list"
     :autocomplete="context.autocomplete"
-    :ui="context.ui"
+    :ui="ui"
     @change="handleChange"
     @update:model-value="handleInput"
+    @blur="handleBlur"
   >
     <template
       v-for="slotName in validSlotNames"

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

@@ -6,7 +6,7 @@ const props = defineProps({
     required: true
   }
 });
-const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, validSlotNames } = useFormKitInput(props.context);
+const { handleInput, handleChange, handleBlur, isInvalid, styleClass, color, modelValue, validSlotNames, ui } = useFormKitInput(props.context);
 </script>
 
 <template>
@@ -46,9 +46,10 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, val
     :loading-icon="context.loadingIcon"
     :list="context.list"
     :autocomplete="context.autocomplete || 'off'"
-    :ui="context.ui"
+    :ui="ui"
     @change="handleChange"
     @update:model-value="handleInput"
+    @blur="handleBlur"
   >
     <template
       v-for="slotName in validSlotNames"

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

@@ -1,12 +1,14 @@
 <script setup>
 import { useFormKitInput } from "../../utils/useFormKitInput";
+import { createContainerBlurHandler } from "../../utils/useFormKitContainerBlur";
 const props = defineProps({
   context: {
     type: Object,
     required: true
   }
 });
-const { handleInput, handleChange, 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>
 
 <template>
@@ -43,9 +45,11 @@ const { handleInput, handleChange, isInvalid, styleClass, color, modelValue, val
     :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"
+    @focusout="handleContainerBlur"
   >
     <template
       v-for="slotName in validSlotNames"

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

@@ -1,13 +1,15 @@
 <script setup>
 import { computed, nextTick, ref, watch } from "vue";
 import { useFormKitInput } from "../../utils/useFormKitInput";
+import { createContainerBlurHandler } from "../../utils/useFormKitContainerBlur";
 const props = defineProps({
   context: {
     type: Object,
     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([]);
 const targetSelection = ref([]);
@@ -22,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);
@@ -237,9 +240,10 @@ 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"
   >
     <template
       v-for="slotName in validSlotNames"
@@ -255,6 +259,7 @@ watch(targetItems, (newVal) => {
   <div
     v-if="context.displayMode === 'transfer'"
     class="flex items-stretch gap-4 w-full"
+    @focusout="handleContainerBlur"
   >
     <div
       ref="sourceContainerRef"
@@ -283,7 +288,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"
@@ -300,7 +305,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"
       >
@@ -385,7 +390,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"
@@ -402,7 +407,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"
       >