davidwindham.com
forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
1<script setup lang="ts">
2const model = defineModel<string | undefined>({ default: undefined })
3
4const SELECT_SIZES = {
5 none: '',
6 sm: 'text-xs px-2 py-1.75 rounded-md',
7 md: 'text-sm px-3 py-2.25 rounded-lg',
8 lg: 'text-base px-6 py-4 rounded-xl',
9}
10
11export type SelectBaseProps = {
12 disabled?: boolean
13 size?: keyof typeof SELECT_SIZES
14}
15
16const props = withDefaults(defineProps<SelectBaseProps>(), {
17 size: 'md',
18})
19</script>
20
21<template>
22 <select
23 v-model="model"
24 class="bg-bg 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)"
25 :class="[SELECT_SIZES[size]]"
26 :disabled="
27 /** Catching Vue render-bug of invalid `disabled=false` attribute in the final HTML */
28 disabled ? true : undefined
29 "
30 >
31 <slot />
32 </select>
33</template>