davidwindham.com
forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
1<script setup lang="ts">
2import { noCorrect } from '~/utils/input'
3
4const model = defineModel<string>({ default: '' })
5
6const props = withDefaults(
7 defineProps<{
8 disabled?: boolean
9 size?: 'small' | 'medium' | 'large'
10 noCorrect?: boolean
11 }>(),
12 {
13 size: 'medium',
14 noCorrect: true,
15 },
16)
17
18const emit = defineEmits<{
19 focus: [event: FocusEvent]
20 blur: [event: FocusEvent]
21}>()
22
23const el = useTemplateRef('el')
24
25defineExpose({
26 focus: () => el.value?.focus(),
27 blur: () => el.value?.blur(),
28})
29</script>
30
31<template>
32 <input
33 ref="el"
34 v-model="model"
35 v-bind="props.noCorrect ? noCorrect : undefined"
36 @focus="emit('focus', $event)"
37 @blur="emit('blur', $event)"
38 class="appearance-none bg-bg-subtle border border-border font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent outline-offset-2 focus:border-accent focus-visible:outline-accent/70 disabled:(opacity-50 cursor-not-allowed)"
39 :class="{
40 'text-xs leading-[1.2] px-2 py-2 rounded-md': size === 'small',
41 'text-sm leading-none px-3 py-2.5 rounded-lg': size === 'medium',
42 'text-base leading-[1.4] px-6 py-4 rounded-xl': size === 'large',
43 }"
44 :disabled="
45 /** Catching Vue render-bug of invalid `disabled=false` attribute in the final HTML */
46 disabled ? true : undefined
47 "
48 />
49</template>