@14ch/svelte-ui 0.0.61 → 0.0.62
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -55,6 +55,26 @@
|
|
|
55
55
|
let bottomItems: SnackbarData[] = $derived(
|
|
56
56
|
snackbarManager.items.filter((item) => item.position === 'bottom')
|
|
57
57
|
);
|
|
58
|
+
|
|
59
|
+
// =========================================================================
|
|
60
|
+
// Top layer (popover)
|
|
61
|
+
// =========================================================================
|
|
62
|
+
// Modal は <dialog>.showModal() でトップレイヤーに載るため、通常の z-index では前面に出せない。
|
|
63
|
+
// Snackbar 自身も popover でトップレイヤーに載せて Dialog より前面に表示する。
|
|
64
|
+
let topEl: HTMLDivElement | null = $state(null);
|
|
65
|
+
let bottomEl: HTMLDivElement | null = $state(null);
|
|
66
|
+
|
|
67
|
+
const ensureShown = (el: HTMLDivElement | null) => {
|
|
68
|
+
if (!el || typeof el.showPopover !== 'function') return;
|
|
69
|
+
if (!el.matches(':popover-open')) el.showPopover();
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
$effect(() => {
|
|
73
|
+
if (topItems.length > 0) ensureShown(topEl);
|
|
74
|
+
});
|
|
75
|
+
$effect(() => {
|
|
76
|
+
if (bottomItems.length > 0) ensureShown(bottomEl);
|
|
77
|
+
});
|
|
58
78
|
</script>
|
|
59
79
|
|
|
60
80
|
{#snippet snackbarItemSnippet(item: SnackbarData, index: number)}
|
|
@@ -79,7 +99,7 @@
|
|
|
79
99
|
|
|
80
100
|
<!-- Snackbar Top Items -->
|
|
81
101
|
{#if topItems.length > 0}
|
|
82
|
-
<div class="snackbar snackbar--top" data-testid="snackbar">
|
|
102
|
+
<div bind:this={topEl} class="snackbar snackbar--top" popover="manual" data-testid="snackbar">
|
|
83
103
|
{#each topItems as item, index (item.id)}
|
|
84
104
|
{@render snackbarItemSnippet(item, index)}
|
|
85
105
|
{/each}
|
|
@@ -88,7 +108,12 @@
|
|
|
88
108
|
|
|
89
109
|
<!-- Snackbar Bottom Items -->
|
|
90
110
|
{#if bottomItems.length > 0}
|
|
91
|
-
<div
|
|
111
|
+
<div
|
|
112
|
+
bind:this={bottomEl}
|
|
113
|
+
class="snackbar snackbar--bottom"
|
|
114
|
+
popover="manual"
|
|
115
|
+
data-testid="snackbar"
|
|
116
|
+
>
|
|
92
117
|
{#each bottomItems as item, index (item.id)}
|
|
93
118
|
{@render snackbarItemSnippet(item, index)}
|
|
94
119
|
{/each}
|
|
@@ -97,12 +122,23 @@
|
|
|
97
122
|
|
|
98
123
|
<style>
|
|
99
124
|
.snackbar {
|
|
125
|
+
/* popover の UA デフォルトスタイルを打ち消す（inset/margin/border/padding/背景/overflow）。
|
|
126
|
+
inset は left より先に打ち消す（あとに置くと left の中央寄せを上書きしてしまう） */
|
|
127
|
+
inset: auto;
|
|
128
|
+
margin: 0;
|
|
129
|
+
padding: 0;
|
|
130
|
+
border: 0;
|
|
131
|
+
background: transparent;
|
|
132
|
+
overflow: visible;
|
|
133
|
+
color: inherit;
|
|
134
|
+
|
|
100
135
|
position: fixed;
|
|
101
136
|
left: 50%;
|
|
102
137
|
transform: translateX(-50%);
|
|
103
138
|
width: max-content;
|
|
104
139
|
max-width: 90vw;
|
|
105
140
|
pointer-events: none;
|
|
141
|
+
/* popover 非対応ブラウザ向けフォールバック（対応時はトップレイヤーで最前面になる） */
|
|
106
142
|
z-index: var(--svelte-ui-snackbar-z-index, 1000);
|
|
107
143
|
display: flex;
|
|
108
144
|
flex-direction: column;
|