How to catch class attributes in vue 3 components.

InputAttrs.vue

<script setup>
import { useAttrs, ref } from 'vue';

const emits = defineEmits(['update:modelValue', 'valid', 'invalid']);

const props = defineProps({
	modelValue: [String, Number],
	name: { type: String },
	label: { type: String },
	placeholder: { type: String },
	type: { type: String, default: 'text' },
	focus: false,
});

// Disable attrs inherit
// Catch class in defineProps({ class: { type: String } })
// or use
defineOptions({
	// Disable attrs inherit for first element
	// then use :class="$attrs.class"
	// or v-bind="$attrs" in inner element
	inheritAttrs: false,
});

const attrs = useAttrs();

let open = ref(false);

console.log('Attr', attrs);

function onFocus(event) {
	open.value = true;
	validatePass(event);
}

function onBlur(event) {
	open.value = false;
}

function validatePass(event) {
	let str = event?.target?.value ?? '';

	if (str.replace(' ', '').length >= 3) {
		emits('valid', str);
	} else {
		emits('invalid', str);
	}
}
</script>

<template>
	<div class="form-group">
		<label class="form-label">{{ props.label }}</label>
		<input
			v-model="props.modelValue"
			class="form-input"
			:class="$attrs.class"
			:type="props.type"
			:name="props.name"
			:placeholder="props.placeholder"
			@input="emits('update:modelValue', $event.target.value)"
			@keyup="validatePass"
			@focus="onFocus"
			@blur="onBlur"
		/>
	</div>
</template>

<!-- https://vuejs.org/guide/components/attrs -->

Wow.vue

import InputAttrs from '@/components/InputAttrs.vue'

<template>
  <InputAttrs class="input-class-only" />
</template>