[增添]添加了datasource的setting数据库以及默认值

vendor/filament/notifications/resources/js/Notification.js

@@ -0,0 +1,346 @@
+import { v4 as uuid } from 'uuid-browser'
+
+class Notification {
+    constructor() {
+        this.id(uuid())
+
+        return this
+    }
+
+    id(id) {
+        this.id = id
+
+        return this
+    }
+
+    title(title) {
+        this.title = title
+
+        return this
+    }
+
+    body(body) {
+        this.body = body
+
+        return this
+    }
+
+    actions(actions) {
+        this.actions = actions
+
+        return this
+    }
+
+    status(status) {
+        this.status = status
+
+        return this
+    }
+
+    color(color) {
+        this.color = color
+
+        return this
+    }
+
+    icon(icon) {
+        this.icon = icon
+
+        return this
+    }
+
+    iconColor(color) {
+        this.iconColor = color
+
+        return this
+    }
+
+    duration(duration) {
+        this.duration = duration
+
+        return this
+    }
+
+    seconds(seconds) {
+        this.duration(seconds * 1000)
+
+        return this
+    }
+
+    persistent() {
+        this.duration('persistent')
+
+        return this
+    }
+
+    danger() {
+        this.status('danger')
+
+        return this
+    }
+
+    info() {
+        this.status('info')
+
+        return this
+    }
+
+    success() {
+        this.status('success')
+
+        return this
+    }
+
+    warning() {
+        this.status('warning')
+
+        return this
+    }
+
+    view(view) {
+        this.view = view
+
+        return this
+    }
+
+    viewData(viewData) {
+        this.viewData = viewData
+
+        return this
+    }
+
+    send() {
+        window.dispatchEvent(
+            new CustomEvent('notificationSent', {
+                detail: {
+                    notification: this,
+                },
+            }),
+        )
+
+        return this
+    }
+}
+
+class Action {
+    constructor(name) {
+        this.name(name)
+
+        return this
+    }
+
+    name(name) {
+        this.name = name
+
+        return this
+    }
+
+    color(color) {
+        this.color = color
+
+        return this
+    }
+
+    dispatch(event, data) {
+        this.event(event)
+        this.eventData(data)
+
+        return this
+    }
+
+    dispatchSelf(event, data) {
+        this.dispatch(event, data)
+        this.dispatchDirection = 'self'
+
+        return this
+    }
+
+    dispatchTo(component, event, data) {
+        this.dispatch(event, data)
+        this.dispatchDirection = 'to'
+        this.dispatchToComponent = component
+
+        return this
+    }
+
+    /**
+     * @deprecated Use `dispatch()` instead.
+     */
+    emit(event, data) {
+        this.dispatch(event, data)
+
+        return this
+    }
+
+    /**
+     * @deprecated Use `dispatchSelf()` instead.
+     */
+    emitSelf(event, data) {
+        this.dispatchSelf(event, data)
+
+        return this
+    }
+
+    /**
+     * @deprecated Use `dispatchTo()` instead.
+     */
+    emitTo(component, event, data) {
+        this.dispatchTo(component, event, data)
+
+        return this
+    }
+
+    dispatchDirection(dispatchDirection) {
+        this.dispatchDirection = dispatchDirection
+
+        return this
+    }
+
+    dispatchToComponent(component) {
+        this.dispatchToComponent = component
+
+        return this
+    }
+
+    event(event) {
+        this.event = event
+
+        return this
+    }
+
+    eventData(data) {
+        this.eventData = data
+
+        return this
+    }
+
+    extraAttributes(attributes) {
+        this.extraAttributes = attributes
+
+        return this
+    }
+
+    icon(icon) {
+        this.icon = icon
+
+        return this
+    }
+
+    iconPosition(position) {
+        this.iconPosition = position
+
+        return this
+    }
+
+    outlined(condition = true) {
+        this.isOutlined = condition
+
+        return this
+    }
+
+    disabled(condition = true) {
+        this.isDisabled = condition
+
+        return this
+    }
+
+    label(label) {
+        this.label = label
+
+        return this
+    }
+
+    close(condition = true) {
+        this.shouldClose = condition
+
+        return this
+    }
+
+    openUrlInNewTab(condition = true) {
+        this.shouldOpenUrlInNewTab = condition
+
+        return this
+    }
+
+    size(size) {
+        this.size = size
+
+        return this
+    }
+
+    url(url) {
+        this.url = url
+
+        return this
+    }
+
+    view(view) {
+        this.view = view
+
+        return this
+    }
+
+    button() {
+        this.view('filament-actions::button-action')
+
+        return this
+    }
+
+    grouped() {
+        this.view('filament-actions::grouped-action')
+
+        return this
+    }
+
+    link() {
+        this.view('filament-actions::link-action')
+
+        return this
+    }
+}
+
+class ActionGroup {
+    constructor(actions) {
+        this.actions(actions)
+
+        return this
+    }
+
+    actions(actions) {
+        this.actions = actions.map((action) => action.grouped())
+
+        return this
+    }
+
+    color(color) {
+        this.color = color
+
+        return this
+    }
+
+    icon(icon) {
+        this.icon = icon
+
+        return this
+    }
+
+    iconPosition(position) {
+        this.iconPosition = position
+
+        return this
+    }
+
+    label(label) {
+        this.label = label
+
+        return this
+    }
+
+    tooltip(tooltip) {
+        this.tooltip = tooltip
+
+        return this
+    }
+}
+
+export { Action, ActionGroup, Notification }

vendor/filament/notifications/resources/js/components/notification.js

@@ -0,0 +1,162 @@
+import { once } from 'alpinejs/src/utils/once'
+
+export default (Alpine) => {
+    Alpine.data('notificationComponent', ({ notification }) => ({
+        isShown: false,
+
+        computedStyle: null,
+
+        transitionDuration: null,
+
+        transitionEasing: null,
+
+        init: function () {
+            this.computedStyle = window.getComputedStyle(this.$el)
+
+            this.transitionDuration =
+                parseFloat(this.computedStyle.transitionDuration) * 1000
+
+            this.transitionEasing = this.computedStyle.transitionTimingFunction
+
+            this.configureTransitions()
+            this.configureAnimations()
+
+            if (
+                notification.duration &&
+                notification.duration !== 'persistent'
+            ) {
+                setTimeout(() => {
+                    if (!this.$el.matches(':hover')) {
+                        this.close()
+
+                        return
+                    }
+
+                    this.$el.addEventListener('mouseleave', () => this.close())
+                }, notification.duration)
+            }
+
+            this.isShown = true
+        },
+
+        configureTransitions: function () {
+            const display = this.computedStyle.display
+
+            const show = () => {
+                Alpine.mutateDom(() => {
+                    this.$el.style.setProperty('display', display)
+                    this.$el.style.setProperty('visibility', 'visible')
+                })
+                this.$el._x_isShown = true
+            }
+
+            const hide = () => {
+                Alpine.mutateDom(() => {
+                    this.$el._x_isShown
+                        ? this.$el.style.setProperty('visibility', 'hidden')
+                        : this.$el.style.setProperty('display', 'none')
+                })
+            }
+
+            const toggle = once(
+                (value) => (value ? show() : hide()),
+                (value) => {
+                    this.$el._x_toggleAndCascadeWithTransitions(
+                        this.$el,
+                        value,
+                        show,
+                        hide,
+                    )
+                },
+            )
+
+            Alpine.effect(() => toggle(this.isShown))
+        },
+
+        configureAnimations: function () {
+            let animation
+
+            Livewire.hook(
+                'commit',
+                ({ component, commit, succeed, fail, respond }) => {
+                    if (
+                        !component.snapshot.data
+                            .isFilamentNotificationsComponent
+                    ) {
+                        return
+                    }
+
+                    const getTop = () => this.$el.getBoundingClientRect().top
+                    const oldTop = getTop()
+
+                    respond(() => {
+                        animation = () => {
+                            if (!this.isShown) {
+                                return
+                            }
+
+                            this.$el.animate(
+                                [
+                                    {
+                                        transform: `translateY(${
+                                            oldTop - getTop()
+                                        }px)`,
+                                    },
+                                    { transform: 'translateY(0px)' },
+                                ],
+                                {
+                                    duration: this.transitionDuration,
+                                    easing: this.transitionEasing,
+                                },
+                            )
+                        }
+
+                        this.$el
+                            .getAnimations()
+                            .forEach((animation) => animation.finish())
+                    })
+
+                    succeed(({ snapshot, effect }) => {
+                        animation()
+                    })
+                },
+            )
+        },
+
+        close: function () {
+            this.isShown = false
+
+            setTimeout(
+                () =>
+                    window.dispatchEvent(
+                        new CustomEvent('notificationClosed', {
+                            detail: {
+                                id: notification.id,
+                            },
+                        }),
+                    ),
+                this.transitionDuration,
+            )
+        },
+
+        markAsRead: function () {
+            window.dispatchEvent(
+                new CustomEvent('markedNotificationAsRead', {
+                    detail: {
+                        id: notification.id,
+                    },
+                }),
+            )
+        },
+
+        markAsUnread: function () {
+            window.dispatchEvent(
+                new CustomEvent('markedNotificationAsUnread', {
+                    detail: {
+                        id: notification.id,
+                    },
+                }),
+            )
+        },
+    }))
+}

vendor/filament/notifications/resources/js/index.js

@@ -0,0 +1,14 @@
+import NotificationComponentAlpinePlugin from './components/notification'
+import {
+    Action as NotificationAction,
+    ActionGroup as NotificationActionGroup,
+    Notification,
+} from './Notification'
+
+window.FilamentNotificationAction = NotificationAction
+window.FilamentNotificationActionGroup = NotificationActionGroup
+window.FilamentNotification = Notification
+
+document.addEventListener('alpine:init', () => {
+    window.Alpine.plugin(NotificationComponentAlpinePlugin)
+})