feat(inputs): expose setFocus function for all input components (#793)

packages/oruga-next/src/components/autocomplete/Autocomplete.vue

@@ -348,7 +348,7 @@ function setItemRef(
 }
 
 // use form input functionalities
-const { checkHtml5Validity, onInvalid, onFocus, onBlur, isFocused } =
+const { checkHtml5Validity, onInvalid, onFocus, onBlur, isFocused, setFocus } =
     useInputHandler(inputRef, emits, props);
 
 const vmodel = useVModelBinding<string | number>(props, emits, {
@@ -720,7 +720,7 @@ function rightIconClick(event: Event): void {
     if (props.clearable) {
         vmodel.value = "";
         setSelected(null, false);
-        if (props.openOnFocus) inputRef.value.$el.focus();
+        if (props.openOnFocus) setFocus();
     } else emits("icon-right-click", event);
 }
 
@@ -797,6 +797,11 @@ function itemOptionClasses(option): ClassBind[] {
 
     return [...itemClasses.value, ...optionClasses.value];
 }
+
+// --- Expose Public Functionalities ---
+
+/** expose functionalities for programmatic usage */
+defineExpose({ focus: setFocus });
 </script>
 
 <template>

packages/oruga-next/src/components/checkbox/Checkbox.vue

@@ -220,6 +220,11 @@ const inputClasses = defineClasses(
 );
 
 const labelClasses = defineClasses(["labelClass", "o-chk__label"]);
+
+// --- Expose Public Functionalities ---
+
+/** expose functionalities for programmatic usage */
+defineExpose({ focus: setFocus });
 </script>
 
 <template>

packages/oruga-next/src/components/datepicker/Datepicker.vue

@@ -595,6 +595,8 @@ const { defaultDateFormatter, defaultDateParser } = useDatepickerMixins(props);
 
 const { isMobile } = useMatchMedia(props.mobileBreakpoint);
 
+const pickerRef = ref<InstanceType<typeof OPickerWrapper>>();
+
 /** modelvalue of selected date */
 const vmodel = defineModel<Date | Date[]>();
 
@@ -924,11 +926,16 @@ const dropdownClass = defineClasses([
 
 const boxClasses = defineClasses(["boxClass", "o-dpck__box"]);
 const boxClassBind = computed(() => getActiveClasses(boxClasses.value));
+
+// --- Expose Public Functionalities ---
+
+/** expose functionalities for programmatic usage */
+defineExpose({ focus: pickerRef.value.focus });
 </script>
 
 <template>
     <OPickerWrapper
-        ref="wrapperRef"
+        ref="pickerRef"
         v-model:active="isActive"
         data-oruga="datepicker"
         :value="vmodel"

packages/oruga-next/src/components/datetimepicker/Datetimepicker.vue

@@ -227,7 +227,7 @@ const elementRef = computed(() =>
 );
 
 // use form input functionality for native input
-const { onBlur, onFocus, onInvalid } = useInputHandler(
+const { setFocus, onBlur, onFocus, onInvalid } = useInputHandler(
     elementRef,
     emits,
     props,
@@ -555,6 +555,11 @@ const timepickerWrapperClasses = defineClasses([
     "timepickerWrapperClass",
     "o-dtpck__time",
 ]);
+
+// --- Expose Public Functionalities ---
+
+/** expose functionalities for programmatic usage */
+defineExpose({ focus: setFocus });
 </script>
 
 <template>

packages/oruga-next/src/components/dropdown/Dropdown.vue

@@ -532,7 +532,7 @@ const menuClasses = defineClasses(
     ],
 );
 
-// --- Expose Public Functionality ---
+// --- Expose Public Functionalities ---
 
 /** expose functionalities for programmatic usage */
 defineExpose({ $trigger: triggerRef, $content: contentRef });

packages/oruga-next/src/components/input/Input.vue

@@ -442,6 +442,11 @@ const iconRightClasses = defineClasses([
 ]);
 
 const counterClasses = defineClasses(["counterClass", "o-input__counter"]);
+
+// --- Expose Public Functionalities ---
+
+/** expose functionalities for programmatic usage */
+defineExpose({ focus: setFocus });
 </script>
 
 <template>

packages/oruga-next/src/components/loading/Loading.vue

@@ -160,7 +160,7 @@ const iconClasses = defineClasses(["iconClass", "o-load__icon"]);
 
 const labelClasses = defineClasses(["labelClass", "o-load__label"]);
 
-// --- Expose Public Functionality ---
+// --- Expose Public Functionalities ---
 
 /** expose functionalities for programmatic usage */
 defineExpose({ close, promise: props.promise });

packages/oruga-next/src/components/modal/Modal.vue

@@ -364,7 +364,7 @@ const scrollClass = computed(() =>
 // computed ref must be computed at least once for programmatic usage
 scrollClass.value;
 
-// --- Expose Public Functionality ---
+// --- Expose Public Functionalities ---
 
 /** expose functionalities for programmatic usage */
 defineExpose({ close, promise: props.promise });

packages/oruga-next/src/components/notification/NotificationNotice.vue

@@ -293,7 +293,7 @@ const noticeCustomContainerClasses = defineClasses([
     "o-notices__custom-container",
 ]);
 
-// --- Expose Public Functionality ---
+// --- Expose Public Functionalities ---
 
 /** expose functionalities for programmatic usage */
 defineExpose({ close: handleClose, promise: props.promise });

packages/oruga-next/src/components/pagination/Pagination.vue

@@ -404,7 +404,7 @@ const linkCurrentClasses = defineClasses([
 
 const listItemClasses = defineClasses(["listItemClass", "o-pag__item"]);
 
-// --- Expose Public Functionality ---
+// --- Expose Public Functionalities ---
 
 /** expose functionalities for programmatic usage */
 defineExpose({ last, first, prev, next });

packages/oruga-next/src/components/radio/Radio.vue

@@ -186,6 +186,11 @@ const inputClasses = defineClasses(
 );
 
 const labelClasses = defineClasses(["labelClass", "o-radio__label"]);
+
+// --- Expose Public Functionalities ---
+
+/** expose functionalities for programmatic usage */
+defineExpose({ focus: setFocus });
 </script>
 
 <template>

packages/oruga-next/src/components/select/Select.vue

@@ -343,6 +343,11 @@ const selectClasses = defineClasses(
 const iconLeftClasses = defineClasses(["iconLeftClass", "o-sel__icon-left"]);
 
 const iconRightClasses = defineClasses(["iconRightClass", "o-sel__icon-right"]);
+
+// --- Expose Public Functionalities ---
+
+/** expose functionalities for programmatic usage */
+defineExpose({ focus: setFocus });
 </script>
 
 <template>

packages/oruga-next/src/components/sidebar/Sidebar.vue

@@ -483,7 +483,7 @@ const scrollClass = computed(() =>
 // computed ref must be computed at least once for programmatic usage
 scrollClass.value;
 
-// --- Expose Public Functionality ---
+// --- Expose Public Functionalities ---
 
 /** expose functionalities for programmatic usage */
 defineExpose({ close, promise: props.promise });

packages/oruga-next/src/components/switch/Switch.vue

@@ -256,6 +256,11 @@ const switchCheckClasses = defineClasses(
 );
 
 const labelClasses = defineClasses(["labelClass", "o-switch__label"]);
+
+// --- Expose Public Functionalities ---
+
+/** expose functionalities for programmatic usage */
+defineExpose({ focus: setFocus });
 </script>
 
 <template>

packages/oruga-next/src/components/taginput/Taginput.vue

@@ -469,6 +469,11 @@ const itemClasses = defineClasses(
 const closeClasses = defineClasses(["closeClass", "o-taginput__item__close"]);
 
 const counterClasses = defineClasses(["counterClass", "o-taginput__counter"]);
+
+// --- Expose Public Functionalities ---
+
+/** expose functionalities for programmatic usage */
+defineExpose({ focus: setFocus });
 </script>
 
 <template>

packages/oruga-next/src/components/timepicker/Timepicker.vue

@@ -272,6 +272,8 @@ const {
     secondLiteral,
 } = useTimepickerMixins(props);
 
+const pickerRef = ref<InstanceType<typeof OPickerWrapper>>();
+
 const vmodel = useVModelBinding<Date>(props, emits);
 
 /** Dropdown active state */
@@ -734,11 +736,16 @@ const dropdownClass = defineClasses([
 
 const boxClasses = defineClasses(["boxClass", "o-tpck__box"]);
 const boxClassBind = computed(() => getActiveClasses(boxClasses.value));
+
+// --- Expose Public Functionalities ---
+
+/** expose functionalities for programmatic usage */
+defineExpose({ focus: pickerRef.value.focus });
 </script>
 
 <template>
     <OPickerWrapper
-        ref="wrapperRef"
+        ref="pickerRef"
         v-model:active="isActive"
         data-oruga="timepicker"
         :value="vmodel"

packages/oruga-next/src/components/upload/Upload.vue

@@ -127,11 +127,8 @@ const vmodel = useVModelBinding<Object | Object[] | File | File[]>(
 );
 
 // use form input functionality
-const { checkHtml5Validity, onFocus, onBlur, isValid } = useInputHandler(
-    inputRef,
-    emits,
-    props,
-);
+const { checkHtml5Validity, onFocus, onBlur, isValid, setFocus } =
+    useInputHandler(inputRef, emits, props);
 
 const dragDropFocus = ref(false);
 
@@ -266,6 +263,11 @@ const draggableClasses = defineClasses(
         computed(() => props.variant && dragDropFocus.value),
     ],
 );
+
+// --- Expose Public Functionalities ---
+
+/** expose functionalities for programmatic usage */
+defineExpose({ focus: setFocus });
 </script>
 
 <template>

packages/oruga-next/src/components/utils/PickerWrapper.vue

@@ -182,6 +182,11 @@ const dropdownBind = computed(() => ({
     "root-class": getActiveClasses(props.dropdownClasses),
     ...picker.value.dropdownClasses,
 }));
+
+// --- Expose Public Functionalities ---
+
+/** expose functionalities for programmatic usage */
+defineExpose({ focus: setFocus });
 </script>
 
 <template>

packages/oruga-next/src/composables/useInputHandler.ts

@@ -62,7 +62,7 @@ export function useInputHandler(
     const { parentField } = injectField();
 
     const element = computed<ValidatableFormElement>(() => {
-        const el = unrefElement(inputRef as Component);
+        const el = unrefElement<Component | HTMLElement>(inputRef);
         if (!el) {
             console.warn("useInputHandler: inputRef contains no element");
             return undefined;