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

feat(InputMenu): new component (#86)

Browse Source
This commit is contained in:
Benjamin Canac
2024-05-06 18:59:49 +02:00
committed by GitHub
parent f409395297
commit 99f20a4154
59 changed files with 3345 additions and 1265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -39,13 +39,14 @@ export interface InputEmits {
export interface InputSlots {
leading(): any
default(): any
trailing(): any
trailing(props: { iconClass: string }): any
}
</script>
<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { useComponentIcons, useFormField } from '#imports'
import { UIcon, UAvatar } from '#components'
import { looseToNumber } from '#ui/utils'
defineOptions({ inheritAttrs: false })
@@ -55,12 +56,12 @@ const props = withDefaults(defineProps<InputProps>(), {
autofocusDelay: 100
})
const emits = defineEmits<InputEmits>()
defineSlots<InputSlots>()
const slots = defineSlots<InputSlots>()
const [modelValue, modelModifiers] = defineModel<string | number>()
const { emitFormBlur, emitFormInput, size, color, id, name, disabled } = useFormField<InputProps>(props)
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
const { isLeading, isTrailing, leadingIconName, trailingIconName, avatarSize } = useComponentIcons<InputProps>(props)
// const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props })
// const size = computed(() => sizeButtonGroup.value || sizeFormGroup.value)
@@ -71,8 +72,8 @@ const ui = computed(() => tv({ extend: input, slots: props.ui })({
variant: props.variant,
size: size?.value,
loading: props.loading,
leading: isLeading.value,
trailing: isTrailing.value
leading: isLeading.value || !!slots.leading,
trailing: isTrailing.value || !!slots.trailing
}))
const inputRef = ref<HTMLInputElement | null>(null)
@@ -139,6 +140,7 @@ onMounted(() => {
:placeholder="placeholder"
:class="ui.base()"
:disabled="disabled"
:required="required"
v-bind="$attrs"
@input="onInput"
@blur="onBlur"
@@ -147,15 +149,16 @@ onMounted(() => {
<slot />
<span v-if="(isLeading && leadingIconName) || $slots.leading" :class="ui.leading()">
<span v-if="isLeading || $slots.leading" :class="ui.leading()">
<slot name="leading">
<UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon()" />
<UAvatar v-if="avatar" :size="avatarSize" v-bind="avatar" :class="ui.leadingAvatar()" />
<UIcon v-else-if="leadingIconName" :name="leadingIconName" :class="ui.leadingIcon()" />
</slot>
</span>
<span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="ui.trailing()">
<slot name="trailing">
<UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="ui.trailingIcon()" />
<span v-if="isTrailing || $slots.trailing" :class="ui.trailing()">
<slot name="trailing" :icon-class="ui.trailingIcon()">
<UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon()" />
</slot>
</span>
</div>