chore: update components

This commit is contained in:
Benjamin Canac
2021-11-19 15:13:21 +01:00
parent 4fc464fdb9
commit d302ae5840
6 changed files with 15 additions and 8 deletions

View File

@@ -1,6 +1,7 @@
<template> <template>
<span class="relative inline-flex items-center justify-center overflow-hidden" :class="avatarClass" @click="goto"> <span class="relative inline-flex items-center justify-center" :class="avatarClass" @click="goto">
<img v-if="url" :src="url" :alt="alt" :class="[sizeClass, roundedClass]"> <img v-if="url" :src="url" :alt="alt" :class="[sizeClass, roundedClass]">
<!-- eslint-disable-next-line vue/no-v-html -->
<span v-else-if="gradientPlaceholder" class="w-full h-full" v-html="gradientPlaceholder" /> <span v-else-if="gradientPlaceholder" class="w-full h-full" v-html="gradientPlaceholder" />
<span <span
v-else-if="placeholder" v-else-if="placeholder"
@@ -70,7 +71,7 @@ export default {
type: String, type: String,
default: null, default: null,
validator (value) { validator (value) {
return [null, 'online', 'idle', 'invisible', 'donotdisturb', 'focus'].includes(value) return ['online', 'idle', 'invisible', 'donotdisturb', 'focus'].includes(value)
} }
} }
}, },

View File

@@ -238,7 +238,7 @@ export default {
}, },
iconName () { iconName () {
if (this.loading) { if (this.loading) {
return this.loadingIcon || 'custom/loading' return this.loadingIcon || 'heroicons-outline:refresh'
} }
return this.icon return this.icon

View File

@@ -1,7 +1,9 @@
<template> <template>
<Menu v-slot="{ open }" as="div" :class="wrapperClass"> <Menu v-slot="{ open }" as="div" :class="wrapperClass">
<MenuButton ref="trigger" as="div"> <MenuButton ref="trigger" as="div">
<slot :open="open" /> <slot :open="open">
Open
</slot>
</MenuButton> </MenuButton>
<div ref="container" :class="containerClass"> <div ref="container" :class="containerClass">

View File

@@ -13,14 +13,16 @@
@focus="focused = true" @focus="focused = true"
@blur="focused = false" @blur="focused = false"
@change="onChange" @change="onChange"
/> >
</div> </div>
<div v-if="label" class="ml-3 text-sm"> <div v-if="label" class="ml-3 text-sm">
<label :for="name" class="font-medium text-tw-gray-700"> <label :for="name" class="font-medium text-tw-gray-700">
{{ label }} {{ label }}
<span v-if="required" class="text-red-400">*</span> <span v-if="required" class="text-red-400">*</span>
</label> </label>
<p v-if="help" class="text-tw-gray-500">{{ help }}</p> <p v-if="help" class="text-tw-gray-500">
{{ help }}
</p>
</div> </div>
</div> </div>
</template> </template>

View File

@@ -24,7 +24,9 @@
:class="{ 'mt-1': label && !inline, 'mt-1 sm:mt-0': label && inline, 'sm:col-span-2': inline }" :class="{ 'mt-1': label && !inline, 'mt-1 sm:mt-0': label && inline, 'sm:col-span-2': inline }"
> >
<slot /> <slot />
<p v-if="help" class="mt-2 text-sm text-tw-gray-500">{{ help }}</p> <p v-if="help" class="mt-2 text-sm text-tw-gray-500">
{{ help }}
</p>
</div> </div>
</div> </div>
</template> </template>

View File

@@ -12,7 +12,7 @@
@focus="focused = true" @focus="focused = true"
@blur="focused = false" @blur="focused = false"
@change="onChange" @change="onChange"
/> >
<div v-if="label" class="flex flex-col ml-3"> <div v-if="label" class="flex flex-col ml-3">
<span class="block text-sm font-medium text-tw-gray-900"> <span class="block text-sm font-medium text-tw-gray-900">
{{ label }} {{ label }}