@14ch/svelte-ui 0.0.60 → 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;
|
|
@@ -560,6 +560,7 @@
|
|
|
560
560
|
class:textarea--full-width={fullWidth}
|
|
561
561
|
class:textarea--full-height={fullHeight}
|
|
562
562
|
class:textarea--auto-resize={autoResize}
|
|
563
|
+
class:textarea--max-height={maxHeight != null && !inline}
|
|
563
564
|
class:textarea--clearable={clearable}
|
|
564
565
|
class:textarea--rounded={rounded}
|
|
565
566
|
class:textarea--disabled={disabled}
|
|
@@ -795,6 +796,12 @@
|
|
|
795
796
|
.textarea--auto-resize {
|
|
796
797
|
textarea {
|
|
797
798
|
height: 100%;
|
|
799
|
+
/* maxHeight 未指定時は高さが常に中身と一致するため、丸め由来の 1px オーバーフローで
|
|
800
|
+
スクロールバーが出ないよう hidden にする。maxHeight 指定時のみ auto でスクロールさせる */
|
|
801
|
+
overflow-y: hidden;
|
|
802
|
+
}
|
|
803
|
+
|
|
804
|
+
&.textarea--max-height textarea {
|
|
798
805
|
overflow-y: auto;
|
|
799
806
|
}
|
|
800
807
|
}
|