arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-27 02:10:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Select): new component (#92)

Browse Source
This commit is contained in:
Benjamin Canac
2024-05-07 22:58:56 +02:00
committed by GitHub
parent 4a123906d0
commit 1942b8e117
60 changed files with 3068 additions and 692 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/runtime/components/Input.vue
View File

@@ -16,10 +16,7 @@ export interface InputProps extends UseComponentIconsProps {
id?: string
name?: string
type?: InputHTMLAttributes['type']
/**
* The placeholder text when the input is empty.
* @defaultValue `'Type a command or search...'`
*/
/** The placeholder text when the input is empty. */
placeholder?: string
color?: InputVariants['color']
variant?: InputVariants['variant']
@@ -39,21 +36,21 @@ export interface InputEmits {
export interface InputSlots {
leading(): any
default(): any
trailing(props: { iconClass: string }): any
trailing(): any
}
</script>
<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { useComponentIcons, useFormField, useButtonGroup } from '#imports'
import { UIcon, UAvatar } from '#components'
import { UIcon } from '#components'
import { looseToNumber } from '#ui/utils'
defineOptions({ inheritAttrs: false })
const props = withDefaults(defineProps<InputProps>(), {
type: 'text',
autofocusDelay: 100
autofocusDelay: 0
})
const emits = defineEmits<InputEmits>()
const slots = defineSlots<InputSlots>()
@@ -62,7 +59,7 @@ const [modelValue, modelModifiers] = defineModel<string | number>()
const { emitFormBlur, emitFormInput, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
const { isLeading, isTrailing, leadingIconName, trailingIconName, avatarSize } = useComponentIcons<InputProps>(props)
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons<InputProps>(props)
const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value)
@@ -150,15 +147,14 @@ onMounted(() => {
<slot />
<span v-if="isLeading || $slots.leading" :class="ui.leading()">
<span v-if="isLeading || !!slots.leading" :class="ui.leading()">
<slot name="leading">
<UAvatar v-if="avatar" :size="avatarSize" v-bind="avatar" :class="ui.leadingAvatar()" />
<UIcon v-else-if="leadingIconName" :name="leadingIconName" :class="ui.leadingIcon()" />
<UIcon v-if="leadingIconName" :name="leadingIconName" :class="ui.leadingIcon()" />
</slot>
</span>
<span v-if="isTrailing || $slots.trailing" :class="ui.trailing()">
<slot name="trailing" :icon-class="ui.trailingIcon()">
<span v-if="isTrailing || !!slots.trailing" :class="ui.trailing()">
<slot name="trailing">
<UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon()" />
</slot>
</span>