mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-25 17:30:37 +01:00
feat: module improvements
This commit is contained in:
Benjamin Canac
92
src/runtime/components/overlays/Modal.vue
Normal file
92
src/runtime/components/overlays/Modal.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<TransitionRoot :show="isOpen" as="template">
|
||||
<Dialog @close="setIsOpen">
|
||||
<div class="fixed z-10 inset-0 overflow-y-auto">
|
||||
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="ease-out duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<DialogOverlay class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
||||
</TransitionChild>
|
||||
|
||||
<!-- This element is to trick the browser into centering the modal contents. -->
|
||||
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
||||
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="ease-out duration-300"
|
||||
enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enter-to="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leave-from="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Card
|
||||
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
||||
v-bind="$attrs"
|
||||
ring-class
|
||||
>
|
||||
<template v-if="$slots.header" #header>
|
||||
<slot name="header" />
|
||||
</template>
|
||||
<slot />
|
||||
<template v-if="$slots.footer" #footer>
|
||||
<slot name="footer" />
|
||||
</template>
|
||||
</Card>
|
||||
</TransitionChild>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</TransitionRoot>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { computed } from 'vue'
|
||||
import { Dialog, DialogOverlay, TransitionRoot, TransitionChild } from '@headlessui/vue'
|
||||
|
||||
import Card from '../layout/Card'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Dialog,
|
||||
DialogOverlay,
|
||||
TransitionRoot,
|
||||
TransitionChild,
|
||||
Card
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
setup (props, { emit }) {
|
||||
const isOpen = computed({
|
||||
get () {
|
||||
return props.modelValue
|
||||
},
|
||||
set (value) {
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
isOpen,
|
||||
setIsOpen (value) {
|
||||
isOpen.value = value
|
||||
},
|
||||
toggleIsOpen () {
|
||||
isOpen.value = !isOpen.value
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
202
src/runtime/components/overlays/Notification.vue
Normal file
202
src/runtime/components/overlays/Notification.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<transition
|
||||
appear
|
||||
enter-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
|
||||
enter-active-class="transition duration-300 ease-out transform"
|
||||
enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
|
||||
leave-class="opacity-100"
|
||||
leave-active-class="transition duration-100 ease-in"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<div
|
||||
class="z-50 w-full bg-white rounded-lg shadow-lg pointer-events-auto dark:bg-gray-800"
|
||||
@mouseover="onMouseover"
|
||||
@mouseleave="onMouseleave"
|
||||
>
|
||||
<div class="relative overflow-hidden rounded-lg ring-1 u-ring-gray-200">
|
||||
<div class="p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<Icon :name="iconName" class="w-6 h-6" :class="iconClass" />
|
||||
</div>
|
||||
<div class="ml-3 w-0 flex-1 pt-0.5">
|
||||
<p class="text-sm font-medium leading-5 u-text-gray-900">
|
||||
{{ title }}
|
||||
</p>
|
||||
<p v-if="description" class="mt-1 text-sm leading-5 u-text-gray-500">
|
||||
{{ description }}
|
||||
</p>
|
||||
<Button
|
||||
v-if="undo"
|
||||
variant="white"
|
||||
size="xs"
|
||||
class="mt-2"
|
||||
@click.stop="onUndo"
|
||||
>
|
||||
Undo
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ml-4">
|
||||
<button
|
||||
class="transition duration-150 ease-in-out u-text-gray-400 focus:outline-none hover:u-text-gray-500 focus:u-text-gray-500"
|
||||
@click.stop="onClose"
|
||||
>
|
||||
<span class="sr-only">Close</span>
|
||||
<Icon name="heroicons-solid:x" class="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="timeout" class="absolute bottom-0 left-0 right-0 h-1">
|
||||
<div class="h-1 bg-primary-500" :style="progressBarStyle" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, computed, onMounted, onUnmounted, watchEffect } from 'vue'
|
||||
|
||||
import Icon from '../elements/Icon'
|
||||
import Button from '../elements/Button'
|
||||
import { useTimer } from '../../composables/useTimer'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Icon,
|
||||
Button
|
||||
},
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: 'info',
|
||||
validator (value) {
|
||||
return ['info', 'success', 'error', 'warning'].includes(value)
|
||||
}
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
timeout: {
|
||||
type: Number,
|
||||
default: 5000
|
||||
},
|
||||
undo: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
callback: {
|
||||
type: Function,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
emits: ['close'],
|
||||
setup (props, { emit }) {
|
||||
let timer = null
|
||||
const remaining = ref(props.timeout)
|
||||
|
||||
const iconName = computed(() => {
|
||||
return props.icon || ({
|
||||
warning: 'heroicons-outline:exclamation-circle',
|
||||
info: 'heroicons-outline:information-circle',
|
||||
success: 'heroicons-outline:check-circle',
|
||||
error: 'heroicons-outline:x-circle'
|
||||
})[props.type]
|
||||
})
|
||||
|
||||
const iconClass = computed(() => {
|
||||
return ({
|
||||
warning: 'text-orange-400',
|
||||
info: 'text-blue-400',
|
||||
success: 'text-green-400',
|
||||
error: 'text-red-400'
|
||||
})[props.type] || 'u-text-gray-400'
|
||||
})
|
||||
|
||||
const progressBarStyle = computed(() => {
|
||||
const remainingPercent = remaining.value / props.timeout * 100
|
||||
return { width: `${remainingPercent || 0}%` }
|
||||
})
|
||||
|
||||
function onMouseover () {
|
||||
if (timer) {
|
||||
timer.pause()
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseleave () {
|
||||
if (timer) {
|
||||
timer.resume()
|
||||
}
|
||||
}
|
||||
|
||||
function onClose () {
|
||||
if (timer) {
|
||||
timer.stop()
|
||||
}
|
||||
|
||||
if (props.callback) {
|
||||
props.callback()
|
||||
}
|
||||
|
||||
emit('close')
|
||||
}
|
||||
|
||||
function onUndo () {
|
||||
if (timer) {
|
||||
timer.stop()
|
||||
}
|
||||
|
||||
if (props.undo) {
|
||||
props.undo()
|
||||
}
|
||||
|
||||
emit('close')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!props.timeout) {
|
||||
return
|
||||
}
|
||||
|
||||
timer = useTimer(() => {
|
||||
onClose()
|
||||
}, props.timeout)
|
||||
|
||||
watchEffect(() => {
|
||||
remaining.value = timer.remaining.value
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
timer.stop()
|
||||
})
|
||||
|
||||
return {
|
||||
timer,
|
||||
iconName,
|
||||
iconClass,
|
||||
progressBarStyle,
|
||||
onMouseover,
|
||||
onMouseleave,
|
||||
onClose,
|
||||
onUndo
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
29
src/runtime/components/overlays/Notifications.vue
Normal file
29
src/runtime/components/overlays/Notifications.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div class="fixed bottom-0 right-0 flex flex-col justify-end w-full z-55 sm:w-96">
|
||||
<div
|
||||
v-if="notifications.length"
|
||||
class="px-4 py-6 space-y-3 overflow-y-auto sm:px-6 lg:px-8"
|
||||
>
|
||||
<div
|
||||
v-for="(notification, index) of notifications"
|
||||
v-show="index === notifications.length - 1"
|
||||
:key="notification.id"
|
||||
>
|
||||
<Notification
|
||||
v-bind="notification"
|
||||
:class="notification.click && 'cursor-pointer'"
|
||||
@click="notification.click && notification.click(notification)"
|
||||
@close="$toast.removeNotification(notification.id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Notification from './Notification'
|
||||
import { useNuxtApp, useState } from '#app'
|
||||
|
||||
const { $toast } = useNuxtApp()
|
||||
const notifications = useState('notifications')
|
||||
</script>
|
||||
91
src/runtime/components/overlays/Popover.vue
Normal file
91
src/runtime/components/overlays/Popover.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<Popover v-slot="{ open }" :class="wrapperClass">
|
||||
<PopoverButton ref="trigger" as="div">
|
||||
<slot :open="open">
|
||||
<button>Open</button>
|
||||
</slot>
|
||||
</PopoverButton>
|
||||
|
||||
<div v-if="open" ref="container" :class="containerClass">
|
||||
<transition
|
||||
appear
|
||||
enter-active-class="transition ease-out duration-200"
|
||||
enter-from-class="opacity-0 translate-y-1"
|
||||
enter-to-class="opacity-100 translate-y-0"
|
||||
leave-active-class="transition ease-in duration-150"
|
||||
leave-from-class="opacity-100 translate-y-0"
|
||||
leave-to-class="opacity-0 translate-y-1"
|
||||
>
|
||||
<PopoverPanel :class="panelClass" static>
|
||||
<slot name="panel" />
|
||||
</PopoverPanel>
|
||||
</transition>
|
||||
</div>
|
||||
</Popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
|
||||
|
||||
import { usePopper } from '../../utils'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Popover,
|
||||
PopoverButton,
|
||||
PopoverPanel
|
||||
},
|
||||
props: {
|
||||
placement: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
},
|
||||
strategy: {
|
||||
type: String,
|
||||
default: 'fixed'
|
||||
},
|
||||
wrapperClass: {
|
||||
type: String,
|
||||
default: 'relative'
|
||||
},
|
||||
containerClass: {
|
||||
type: String,
|
||||
default: 'z-10'
|
||||
},
|
||||
panelClass: {
|
||||
type: String,
|
||||
default: 'transform'
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
const [trigger, container] = usePopper({
|
||||
placement: props.placement,
|
||||
strategy: props.strategy,
|
||||
modifiers: [{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: [0, 8]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'computeStyles',
|
||||
options: {
|
||||
gpuAcceleration: false,
|
||||
adaptive: false
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'preventOverflow',
|
||||
options: {
|
||||
padding: 8
|
||||
}
|
||||
}]
|
||||
})
|
||||
|
||||
return {
|
||||
trigger,
|
||||
container
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
97
src/runtime/components/overlays/Tooltip.vue
Normal file
97
src/runtime/components/overlays/Tooltip.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div ref="trigger" :class="wrapperClass" @mouseover="open = true" @mouseleave="open = false">
|
||||
<slot :open="open">
|
||||
Hover me
|
||||
</slot>
|
||||
|
||||
<div v-if="open" ref="container" :class="containerClass">
|
||||
<transition
|
||||
appear
|
||||
enter-active-class="transition ease-out duration-200"
|
||||
enter-from-class="opacity-0 translate-y-1"
|
||||
enter-to-class="opacity-100 translate-y-0"
|
||||
leave-active-class="transition ease-in duration-150"
|
||||
leave-from-class="opacity-100 translate-y-0"
|
||||
leave-to-class="opacity-0 translate-y-1"
|
||||
>
|
||||
<div :class="tooltipClass">
|
||||
<slot name="text">
|
||||
{{ text }}
|
||||
</slot>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { usePopper } from '../../utils'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
placement: {
|
||||
type: String,
|
||||
default: 'bottom',
|
||||
validator: (value) => {
|
||||
return ['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'].includes(value)
|
||||
}
|
||||
},
|
||||
strategy: {
|
||||
type: String,
|
||||
default: 'fixed',
|
||||
validator: (value) => {
|
||||
return ['absolute', 'fixed'].includes(value)
|
||||
}
|
||||
},
|
||||
wrapperClass: {
|
||||
type: String,
|
||||
default: 'relative inline-flex'
|
||||
},
|
||||
containerClass: {
|
||||
type: String,
|
||||
default: 'z-10'
|
||||
},
|
||||
tooltipClass: {
|
||||
type: String,
|
||||
default: 'flex items-center justify-center invisible w-auto h-6 max-w-xs px-2 space-x-1 truncate rounded shadow lg:visible u-bg-gray-800 truncate u-text-gray-50 text-xs'
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
const open = ref(false)
|
||||
const [trigger, container] = usePopper({
|
||||
placement: props.placement,
|
||||
strategy: props.strategy,
|
||||
modifiers: [{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: [0, 8]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'computeStyles',
|
||||
options: {
|
||||
gpuAcceleration: false,
|
||||
adaptive: false
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'preventOverflow',
|
||||
options: {
|
||||
padding: 8
|
||||
}
|
||||
}]
|
||||
})
|
||||
|
||||
return {
|
||||
open,
|
||||
trigger,
|
||||
container
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user