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

chore(Notifications): support actions instead of specific undo and dismiss

Browse Source
This commit is contained in:
Benjamin Canac
2022-08-17 13:53:53 +02:00
parent c6706c76b2
commit a0d56d0f66
2 changed files with 20 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/runtime/components/overlays/Notification.vue
View File

@@ -27,22 +27,16 @@
{{ description }} {{ description }}
</p> </p>
<div v-if="description && (undo || dismiss)" class="mt-3 flex items-center gap-6"> <div v-if="description && actions.length" class="mt-3 flex items-center gap-6">
<button v-if="undo" type="button" class="text-sm font-medium text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 focus:outline-none" @click.stop="onUndo"> <button v-for="(action, index) of actions" :key="index" type="button" class="text-sm font-medium focus:outline-none text-primary-500 hover:text-primary-600 dark:hover:text-primary-400" @click.stop="onAction(action)">
Undo {{ action.label }}
</button>
<button v-if="dismiss" type="button" class="text-sm font-medium u-text-gray-700 hover:u-text-gray-500 focus:outline-none" @click.stop="onDismiss">
Dismiss
</button> </button>
</div> </div>
</div> </div>
<div class="flex-shrink-0 flex items-center gap-3"> <div class="flex-shrink-0 flex items-center gap-3">
<div v-if="!description && (undo || dismiss)" class="flex items-center gap-2"> <div v-if="!description && actions.length" class="flex items-center gap-2">
<button v-if="undo" type="button" class="text-sm font-medium text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 focus:outline-none" @click.stop="onUndo"> <button v-for="(action, index) of actions" :key="index" type="button" class="text-sm font-medium focus:outline-none text-primary-500 hover:text-primary-600 dark:hover:text-primary-400" @click.stop="onAction(action)">
Undo {{ action.label }}
</button>
<button v-if="dismiss" type="button" class="text-sm font-medium u-text-gray-700 hover:u-text-gray-500 focus:outline-none" @click.stop="onDismiss">
Dismiss
</button> </button>
</div> </div>
@@ -66,6 +60,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watchEffect } from 'vue' import { ref, computed, onMounted, onUnmounted, watchEffect } from 'vue'
import type { PropType } from 'vue'
import Icon from '../elements/Icon.vue' import Icon from '../elements/Icon.vue'
import { useTimer } from '../../composables/useTimer' import { useTimer } from '../../composables/useTimer'
import { classNames } from '../../utils' import { classNames } from '../../utils'
@@ -102,13 +97,12 @@ const props = defineProps({
type: Number, type: Number,
default: 5000 default: 5000
}, },
undo: { actions: {
type: Function, type: Array as PropType<{
default: null label: string,
}, click: Function
dismiss: { }[]>,
type: Function, default: () => []
default: null
}, },
callback: { callback: {
type: Function, type: Function,
@@ -171,25 +165,13 @@ function onClose () {
emit('close') emit('close')
} }
function onUndo () { function onAction (action) {
if (timer) { if (timer) {
timer.stop() timer.stop()
} }
if (props.undo) { if (action.click) {
props.undo() action.click()
}
emit('close')
}
function onDismiss () {
if (timer) {
timer.stop()
}
if (props.dismiss) {
props.dismiss()
} }
emit('close') emit('close')

5
src/runtime/types/toast.d.ts vendored
View File

@@ -5,7 +5,10 @@ export interface ToastNotification {
type: string type: string
icon?: string icon?: string
timeout: number timeout: number
undo?: Function actions?: {
label: string,
click: Function
}[]
callback?: Function callback?: Function
} }