11<div x-data =" {
22 modalOpen: $wire.entangle('open', false),
33 components: $wire.entangle('components', false), // Array of loaded components
4- stack : [], // Array or component Ids to display
4+ modalHistory : [], // Array or component Ids to display
55 get modalActiveId() {
6- if (this.stack.length) {
7- return this.stack[this.stack.length - 1];
8- }
9-
10- return null;
6+ return this.modalHistory.length ? this.modalHistory[this.modalHistory.length - 1] : null;
117 },
128 get activeComponent() {
139 return this.components.find((item) => item.id === this.modalActiveId);
1410 },
11+ get activeStack() {
12+ return this.activeComponent?.stack ?? null;
13+ },
1514 get lastComponent() {
16- if (this.components.length) {
17- return this.components[this.components.length - 1];
18- }
19- return null;
15+ return this.components.length ? this.components[this.components.length - 1] : null;
2016 },
2117 areComponentsEqual({ component: component1, props: props1, params: params1 }, { component: component2, props: props2, params: params2 }) {
2218 return component1 === component2 &&
2319 JSON.stringify(props1) === JSON.stringify(props2) &&
2420 JSON.stringify(params1) === JSON.stringify(params2);
2521 },
26- findStackIndex (id, reverse = false) {
22+ findHistoryIndex (id, reverse = false) {
2723 if (reverse) {
28- return this.stack .length - 1 - this.findStackIndex (id);
24+ return this.modalHistory .length - 1 - this.findHistoryIndex (id);
2925 }
3026
31- return this.stack .findIndex((item) => id === item);
27+ return this.modalHistory .findIndex((item) => id === item);
3228 },
3329 sync() {
3430 this.$wire.$refresh();
3733 return Math.random().toString(36).substring(2, 7);
3834 },
3935 makeComponentFromEvent(event) {
40- const component = event.detail?.component ?? null;
41- const props = event.detail?.props ?? [];
42- const params = event.detail?.params ?? [];
43-
4436 return {
45- component: component,
46- props: props,
47- params: params,
37+ component: event.detail?.component ?? null,
38+ props: event.detail?.props ?? [],
39+ params: event.detail?.params ?? [],
40+ stack: event.detail?.stack ?? this.$wire.stack,
4841 };
4942 },
5043 getPreloadedComponent(eventComponent) {
7770 },
7871 openNewComponent(eventComponent) {
7972 eventComponent.id = this.generateRandomId();
73+
8074 this.components.push(eventComponent);
81- this.stack .push(eventComponent.id);
75+ this.modalHistory .push(eventComponent.id);
8276
8377 this.modalOpen = true;
8478 this.sync();
8579 },
8680 openPreloadedComponent(component) {
8781 component.preloaded = false;
8882
89- this.stack .push(component.id);
83+ this.modalHistory .push(component.id);
9084 this.modalOpen = true;
9185 },
9286 onOpen(event) {
9387 const eventComponent = this.makeComponentFromEvent(event);
94-
9588 const preloadedComponent = this.getPreloadedComponent(eventComponent);
9689
9790 if (preloadedComponent) {
9891 this.openPreloadedComponent(preloadedComponent);
9992 } else {
10093 this.openNewComponent(eventComponent);
10194 }
102-
10395 },
10496 findComponentById(id) {
10597 return this.components.find((item) => item.id === id);
10698 },
10799 removeComponentById(id) {
108- this.stack = this.stack .filter((item) => item !== id);
100+ this.modalHistory = this.modalHistory .filter((item) => item !== id);
109101 this.components = this.components.filter((item) => item.id !== id);
110102 },
111103 removeComponent(eventComponent) {
114106 .forEach((item) => this.removeComponentById(item.id));
115107 },
116108 removeActiveComponent() {
117- if (this.modalActiveId) {
118- this.removeComponentById(this.modalActiveId);
119- }
109+ this.modalActiveId && this.removeComponentById(this.modalActiveId);
120110 },
121111 onClose(event) {
122112 const eventComponent = this.makeComponentFromEvent(event);
127117 this.removeActiveComponent();
128118 }
129119
130- if (this.stack.length < 1) {
131- this.modalOpen = false;
132- }
120+ this.modalOpen = this.modalHistory.length > 0;
133121
134122 this.sync();
135123 },
136124 onCloseAll() {
137- this.stack = [];
125+ this.modalHistory = [];
138126 this.components = [];
139127 this.modalOpen = false;
140128 this.sync();
@@ -173,22 +161,21 @@ class="fixed left-0 top-0 z-40 grid h-dvh w-full select-none overflow-hidden bg-
173161 get modalId() {
174162 return '{{ $id } }
175163 },
176- get modalMode() {
177- const activeMode = activeComponent?.params.mode ?? null;
178- const componentMode = findComponentById(this.modalId)?.params.mode ?? null;
179-
180- if (activeComponent && activeMode === null) {
181- return null;
182- }
164+ get isModalActive() {
165+ return modalActiveId === this.modalId;
166+ },
167+ get isModalStacked() {
168+ const component = findComponentById(this.modalId);
169+ const componentStack = component?.stack ?? null;
183170
184- return componentMode ;
171+ return activeStack && activeStack === componentStack ;
185172 },
186173 get modalIndexReversed() {
187- return findStackIndex (this.modalId, true);
174+ return findHistoryIndex (this.modalId, true);
188175 },
189176 modalWrapper: {
190177 ['x-bind:class']() {
191- if (this.modalMode === 'stack' ) {
178+ if (this.isModalStacked ) {
192179 return 'relative flex size-full pointer-events-none [& >*]:pointer-events-auto';
193180 }
194181 return 'contents';
@@ -197,13 +184,13 @@ class="fixed left-0 top-0 z-40 grid h-dvh w-full select-none overflow-hidden bg-
197184 return `grid-area: stack;`;
198185 },
199186 ['x-bind:inert']() {
200- return modalActiveId !== this.modalId ;
187+ return ! this.isModalActive ;
201188 },
202189 ['x-show']() {
203- if (this.modalMode === 'stack' ) {
204- return stack .includes(this.modalId);
190+ if (this.isModalStacked ) {
191+ return modalHistory .includes(this.modalId);
205192 }
206- return modalActiveId === this.modalId ;
193+ return this.isModalActive ;
207194 },
208195 },
209196 }" x-bind =" modalWrapper" class =" select-text"
0 commit comments