e1b844cee0
* feat(ui): add `input group` base component * feat(history): add history viewer and rewind * test: update selector snapshot * test: add PW base page * style: apply TS style fixes * chore(history): request history wiki * chore(history): remove unwanted symbol * chore: fix type * style: apply TS style fixes
34 lines
926 B
Vue
34 lines
926 B
Vue
<script setup lang="ts">
|
|
import { AppInput } from '@/components/base/input';
|
|
import { cn } from '@/utils';
|
|
import type { HTMLAttributes } from 'vue';
|
|
import { ref } from 'vue';
|
|
|
|
const props = defineProps<{
|
|
class?: HTMLAttributes['class'];
|
|
}>();
|
|
|
|
const inputRef = ref<InstanceType<typeof AppInput> | null>(null);
|
|
|
|
defineExpose({
|
|
focus: () => {
|
|
// AppInput renders a native input element, so we access it via $el
|
|
const inputElement = inputRef.value?.$el as HTMLInputElement | undefined;
|
|
inputElement?.focus();
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<AppInput
|
|
ref="inputRef"
|
|
data-slot="input-group-control"
|
|
:class="
|
|
cn(
|
|
'flex-1 rounded-none border-0 bg-transparent shadow-none ring-offset-transparent focus-visible:ring-0 focus-visible:ring-transparent dark:bg-transparent',
|
|
props.class,
|
|
)
|
|
"
|
|
/>
|
|
</template>
|