🆙 Add cms i using 🆙

Optimized Atomcms daily updated/vendor/filament/schemas/resources/js/components/actions.js

@@ -0,0 +1,62 @@
+export default () => ({
+    isSticky: false,
+
+    width: 0,
+
+    resizeObserver: null,
+
+    boundUpdateWidth: null,
+
+    init() {
+        const parent = this.$el.parentElement
+
+        if (!parent) {
+            return
+        }
+
+        this.updateWidth()
+
+        this.resizeObserver = new ResizeObserver(() => this.updateWidth())
+        this.resizeObserver.observe(parent)
+
+        this.boundUpdateWidth = this.updateWidth.bind(this)
+        window.addEventListener('resize', this.boundUpdateWidth)
+    },
+
+    enableSticky() {
+        this.isSticky = this.$el.getBoundingClientRect().top > 0
+    },
+
+    disableSticky() {
+        this.isSticky = false
+    },
+
+    updateWidth() {
+        const parent = this.$el.parentElement
+
+        if (!parent) {
+            return
+        }
+
+        const actionsComputedStyle = getComputedStyle(
+            this.$root.querySelector('.fi-ac'),
+        )
+
+        this.width =
+            parent.offsetWidth +
+            parseInt(actionsComputedStyle.marginInlineStart, 10) * -1 +
+            parseInt(actionsComputedStyle.marginInlineEnd, 10) * -1
+    },
+
+    destroy() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect()
+            this.resizeObserver = null
+        }
+
+        if (this.boundUpdateWidth) {
+            window.removeEventListener('resize', this.boundUpdateWidth)
+            this.boundUpdateWidth = null
+        }
+    },
+})

Optimized Atomcms daily updated/vendor/filament/schemas/resources/js/components/tabs.js

@@ -0,0 +1,69 @@
+export default function tabsSchemaComponent({
+    activeTab,
+    isTabPersistedInQueryString,
+    livewireId,
+    tab,
+    tabQueryStringKey,
+}) {
+    return {
+        tab,
+
+        init() {
+            const tabs = this.getTabs()
+
+            const queryString = new URLSearchParams(window.location.search)
+
+            if (
+                isTabPersistedInQueryString &&
+                queryString.has(tabQueryStringKey) &&
+                tabs.includes(queryString.get(tabQueryStringKey))
+            ) {
+                this.tab = queryString.get(tabQueryStringKey)
+            }
+
+            this.$watch('tab', () => this.updateQueryString())
+
+            if (!this.tab || !tabs.includes(this.tab)) {
+                this.tab = tabs[activeTab - 1]
+            }
+
+            Livewire.hook(
+                'commit',
+                ({ component, commit, succeed, fail, respond }) => {
+                    succeed(({ snapshot, effect }) => {
+                        this.$nextTick(() => {
+                            if (component.id !== livewireId) {
+                                return
+                            }
+
+                            const tabs = this.getTabs()
+
+                            if (!tabs.includes(this.tab)) {
+                                this.tab = tabs[activeTab - 1] ?? this.tab
+                            }
+                        })
+                    })
+                },
+            )
+        },
+
+        getTabs() {
+            if (!this.$refs.tabsData) {
+                return []
+            }
+
+            return JSON.parse(this.$refs.tabsData.value)
+        },
+
+        updateQueryString() {
+            if (!isTabPersistedInQueryString) {
+                return
+            }
+
+            const url = new URL(window.location.href)
+            url.searchParams.set(tabQueryStringKey, this.tab)
+
+            history.replaceState(null, document.title, url.toString())
+        },
+    }
+}

Optimized Atomcms daily updated/vendor/filament/schemas/resources/js/components/wizard.js

@@ -0,0 +1,109 @@
+export default function wizardSchemaComponent({
+    isSkippable,
+    isStepPersistedInQueryString,
+    key,
+    startStep,
+    stepQueryStringKey,
+}) {
+    return {
+        step: null,
+
+        init() {
+            this.$watch('step', () => this.updateQueryString())
+
+            this.step = this.getSteps().at(startStep - 1)
+
+            this.autofocusFields()
+        },
+
+        async requestNextStep() {
+            await this.$wire.callSchemaComponentMethod(key, 'nextStep', {
+                currentStepIndex: this.getStepIndex(this.step),
+            })
+        },
+
+        goToNextStep() {
+            let nextStepIndex = this.getStepIndex(this.step) + 1
+
+            if (nextStepIndex >= this.getSteps().length) {
+                return
+            }
+
+            this.step = this.getSteps()[nextStepIndex]
+
+            this.autofocusFields()
+            this.scroll()
+        },
+
+        goToPreviousStep() {
+            let previousStepIndex = this.getStepIndex(this.step) - 1
+
+            if (previousStepIndex < 0) {
+                return
+            }
+
+            this.step = this.getSteps()[previousStepIndex]
+
+            this.autofocusFields()
+            this.scroll()
+        },
+
+        scroll() {
+            this.$nextTick(() => {
+                this.$refs.header?.children[
+                    this.getStepIndex(this.step)
+                ].scrollIntoView({ behavior: 'smooth', block: 'start' })
+            })
+        },
+
+        autofocusFields() {
+            this.$nextTick(() =>
+                this.$refs[`step-${this.step}`]
+                    .querySelector('[autofocus]')
+                    ?.focus(),
+            )
+        },
+
+        getStepIndex(step) {
+            let index = this.getSteps().findIndex(
+                (indexedStep) => indexedStep === step,
+            )
+
+            if (index === -1) {
+                return 0
+            }
+
+            return index
+        },
+
+        getSteps() {
+            return JSON.parse(this.$refs.stepsData.value)
+        },
+
+        isFirstStep() {
+            return this.getStepIndex(this.step) <= 0
+        },
+
+        isLastStep() {
+            return this.getStepIndex(this.step) + 1 >= this.getSteps().length
+        },
+
+        isStepAccessible(stepKey) {
+            return (
+                isSkippable ||
+                this.getStepIndex(this.step) > this.getStepIndex(stepKey)
+            )
+        },
+
+        updateQueryString() {
+            if (!isStepPersistedInQueryString) {
+                return
+            }
+
+            const url = new URL(window.location.href)
+            url.searchParams.set(stepQueryStringKey, this.step)
+
+            history.replaceState(null, document.title, url.toString())
+        },
+    }
+}

Optimized Atomcms daily updated/vendor/filament/schemas/resources/js/index.js

@@ -0,0 +1,150 @@
+import actions from './components/actions.js'
+
+const resolveRelativeStatePath = function (containerPath, path, isAbsolute) {
+    let containerPathCopy = containerPath
+
+    if (path.startsWith('/')) {
+        isAbsolute = true
+        path = path.slice(1)
+    }
+
+    if (isAbsolute) {
+        return path
+    }
+
+    while (path.startsWith('../')) {
+        containerPathCopy = containerPathCopy.includes('.')
+            ? containerPathCopy.slice(0, containerPathCopy.lastIndexOf('.'))
+            : null
+
+        path = path.slice(3)
+    }
+
+    if (['', null, undefined].includes(containerPathCopy)) {
+        return path
+    }
+
+    if (['', null, undefined].includes(path)) {
+        return containerPathCopy
+    }
+
+    return `${containerPathCopy}.${path}`
+}
+
+const findClosestLivewireComponent = (el) => {
+    let closestRoot = Alpine.findClosest(el, (i) => i.__livewire)
+
+    if (!closestRoot) {
+        throw 'Could not find Livewire component in DOM tree.'
+    }
+
+    return closestRoot.__livewire
+}
+
+document.addEventListener('alpine:init', () => {
+    window.Alpine.data('filamentSchema', ({ livewireId }) => ({
+        handleFormValidationError(event) {
+            if (event.detail.livewireId !== livewireId) {
+                return
+            }
+
+            this.$nextTick(() => {
+                let error = this.$el.querySelector('[data-validation-error]')
+
+                if (!error) {
+                    return
+                }
+
+                let elementToExpand = error
+
+                while (elementToExpand) {
+                    elementToExpand.dispatchEvent(new CustomEvent('expand'))
+
+                    elementToExpand = elementToExpand.parentNode
+                }
+
+                setTimeout(
+                    () =>
+                        error.closest('[data-field-wrapper]').scrollIntoView({
+                            behavior: 'smooth',
+                            block: 'start',
+                            inline: 'start',
+                        }),
+                    200,
+                )
+            })
+        },
+
+        isStateChanged(state, old) {
+            if (state === undefined) {
+                return false
+            }
+
+            try {
+                return JSON.stringify(state) !== JSON.stringify(old)
+            } catch {
+                return state !== old
+            }
+        },
+    }))
+
+    window.Alpine.data(
+        'filamentSchemaComponent',
+        ({ path, containerPath, $wire }) => ({
+            $statePath: path,
+            $get: (path, isAbsolute) => {
+                return $wire.$get(
+                    resolveRelativeStatePath(containerPath, path, isAbsolute),
+                )
+            },
+            $set: (path, state, isAbsolute, isLive = false) => {
+                return $wire.$set(
+                    resolveRelativeStatePath(containerPath, path, isAbsolute),
+                    state,
+                    isLive,
+                )
+            },
+            get $state() {
+                return $wire.$get(path)
+            },
+        }),
+    )
+
+    window.Alpine.data('filamentActionsSchemaComponent', actions)
+
+    Livewire.hook('commit', ({ component, commit, respond, succeed, fail }) => {
+        succeed(({ snapshot, effects }) => {
+            effects.dispatches?.forEach((dispatch) => {
+                if (!dispatch.params?.awaitSchemaComponent) {
+                    return
+                }
+
+                let els = Array.from(
+                    component.el.querySelectorAll(
+                        `[wire\\:partial="schema-component::${dispatch.params.awaitSchemaComponent}"]`,
+                    ),
+                ).filter((el) => findClosestLivewireComponent(el) === component)
+
+                if (els.length === 1) {
+                    return
+                }
+
+                if (els.length > 1) {
+                    throw `Multiple schema components found with key [${dispatch.params.awaitSchemaComponent}].`
+                }
+
+                window.addEventListener(
+                    `schema-component-${component.id}-${dispatch.params.awaitSchemaComponent}-loaded`,
+                    () => {
+                        window.dispatchEvent(
+                            new CustomEvent(dispatch.name, {
+                                detail: dispatch.params,
+                            }),
+                        )
+                    },
+                    { once: true },
+                )
+            })
+        })
+    })
+})