mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-18 05:58:07 +01:00
chore: improve types (#115)
* wip: improve types * feat: improve types * Apply suggestions from code review Co-authored-by: Sylvain Marroufin <marroufin.sylvain@gmail.com> * chore: update * chore: enable ci typecheck * chore: fix Co-authored-by: Sylvain Marroufin <marroufin.sylvain@gmail.com>
This commit is contained in:
@@ -90,7 +90,7 @@ const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
|
||||
|
||||
const isChecked = computed({
|
||||
get () {
|
||||
return props.modelValue
|
||||
return !!props.modelValue
|
||||
},
|
||||
set (value) {
|
||||
emit('update:modelValue', value)
|
||||
|
||||
@@ -13,22 +13,21 @@
|
||||
:autocomplete="autocomplete"
|
||||
:spellcheck="spellcheck"
|
||||
:class="inputClass"
|
||||
@input="onInput($event.target.value)"
|
||||
@input="onInput(($event.target as any).value)"
|
||||
@focus="$emit('focus', $event)"
|
||||
@blur="$emit('blur', $event)"
|
||||
>
|
||||
<slot />
|
||||
<div v-if="isLeading" :class="iconLeadingWrapperClass">
|
||||
<Icon :name="iconName" :class="iconClass" />
|
||||
<Icon v-if="iconName" :name="iconName" :class="iconClass" />
|
||||
</div>
|
||||
<div v-if="isTrailing" :class="iconTrailingWrapperClass">
|
||||
<Icon :name="iconName" :class="iconClass" />
|
||||
<Icon v-if="iconName" :name="iconName" :class="iconClass" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Ref } from 'vue'
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import Icon from '../elements/Icon.vue'
|
||||
import { classNames } from '../../utils'
|
||||
@@ -129,11 +128,11 @@ const props = defineProps({
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
|
||||
|
||||
const input: Ref<HTMLInputElement> = ref(null)
|
||||
const input = ref<HTMLInputElement | null>(null)
|
||||
|
||||
const autoFocus = () => {
|
||||
if (props.autofocus) {
|
||||
input.value.focus()
|
||||
input.value?.focus()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:class="selectClass"
|
||||
@input="onInput($event.target.value)"
|
||||
@input="onInput(($event.target as any).value)"
|
||||
>
|
||||
<template v-for="(option, index) in normalizedOptionsWithPlaceholder">
|
||||
<optgroup
|
||||
|
||||
@@ -16,12 +16,12 @@
|
||||
<slot :open="open" :disabled="buttonDisabled">
|
||||
<button :class="selectCustomClass" :disabled="disabled" type="button">
|
||||
<slot name="label">
|
||||
<span v-if="modelValue" class="block truncate">{{ modelValue[textAttribute] }}</span>
|
||||
<span v-if="modelValue" class="block truncate">{{ (modelValue as any)[textAttribute] }}</span>
|
||||
<span v-else class="block truncate u-text-gray-400">{{ placeholder }}</span>
|
||||
</slot>
|
||||
<slot name="icon">
|
||||
<span :class="iconWrapperClass">
|
||||
<Icon :name="icon" :class="iconClass" aria-hidden="true" />
|
||||
<Icon v-if="icon" :name="icon" :class="iconClass" aria-hidden="true" />
|
||||
</span>
|
||||
</slot>
|
||||
</button>
|
||||
@@ -58,7 +58,7 @@
|
||||
</div>
|
||||
|
||||
<span v-if="selected" :class="resolveOptionIconClass({ active })">
|
||||
<Icon :name="listOptionIcon" :class="listOptionIconSizeClass" aria-hidden="true" />
|
||||
<Icon v-if="listOptionIcon" :name="listOptionIcon" :class="listOptionIconSizeClass" aria-hidden="true" />
|
||||
</span>
|
||||
</li>
|
||||
</ComboboxOption>
|
||||
@@ -323,7 +323,7 @@ function resolveOptionIconClass ({ active }: { active: boolean }) {
|
||||
)
|
||||
}
|
||||
|
||||
function onUpdate (event) {
|
||||
function onUpdate (event: any) {
|
||||
if (query.value && searchInput.value?.$el) {
|
||||
query.value = ''
|
||||
// explicitly set input text because `ComboboxInput` `displayValue` is not reactive
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
:placeholder="placeholder"
|
||||
:autocomplete="autocomplete"
|
||||
:class="textareaClass"
|
||||
@input="onInput($event.target.value)"
|
||||
@input="onInput(($event.target as any).value)"
|
||||
@focus="$emit('focus', $event)"
|
||||
@blur="$emit('blur', $event)"
|
||||
/>
|
||||
@@ -19,7 +19,6 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Ref } from 'vue'
|
||||
import { ref, computed, watch, onMounted, nextTick } from 'vue'
|
||||
import { classNames } from '../../utils'
|
||||
import $ui from '#build/ui'
|
||||
@@ -95,11 +94,11 @@ const props = defineProps({
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
|
||||
|
||||
const textarea: Ref<HTMLTextAreaElement> = ref(null)
|
||||
const textarea = ref<HTMLTextAreaElement | null>(null)
|
||||
|
||||
const autoFocus = () => {
|
||||
if (props.autofocus) {
|
||||
textarea.value.focus()
|
||||
textarea.value?.focus()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user