@djcali570/component-lib 0.1.100 → 0.1.101
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.
- package/README.md +6 -0
- package/dist/ContextMenu5.svelte +13 -3
- package/dist/ContextMenu5.svelte.d.ts +2 -0
- package/package.json +1 -1
package/README.md
CHANGED
package/dist/ContextMenu5.svelte
CHANGED
|
@@ -26,7 +26,9 @@
|
|
|
26
26
|
menuAlign = 'right',
|
|
27
27
|
open = $bindable(),
|
|
28
28
|
onOpenChange,
|
|
29
|
-
iconSize = '20px'
|
|
29
|
+
iconSize = '20px',
|
|
30
|
+
borderRadius = '0.5rem',
|
|
31
|
+
hideOverflow = true
|
|
30
32
|
}: {
|
|
31
33
|
icon?: Snippet;
|
|
32
34
|
content: Snippet;
|
|
@@ -36,6 +38,8 @@
|
|
|
36
38
|
open?: boolean;
|
|
37
39
|
onOpenChange?: (open: boolean) => void;
|
|
38
40
|
iconSize?: string;
|
|
41
|
+
borderRadius?: string;
|
|
42
|
+
hideOverflow?: boolean;
|
|
39
43
|
} = $props();
|
|
40
44
|
|
|
41
45
|
// Default colors
|
|
@@ -165,17 +169,19 @@
|
|
|
165
169
|
bind:this={menuEl}
|
|
166
170
|
role="menu"
|
|
167
171
|
class="context5__menu context5__portal"
|
|
172
|
+
class:overflow-hidden={hideOverflow}
|
|
168
173
|
style="
|
|
169
174
|
left:{menuAlign === 'right' ? position.x + position.width : position.x}px;
|
|
170
175
|
top:{position.y}px;
|
|
171
176
|
--context5__ContentBgColor: {colorScheme.contentBgColor};
|
|
172
177
|
--context5__ContentBorderColor: {colorScheme.contentBorderColor};
|
|
178
|
+
--context5__BorderRadius: {borderRadius};
|
|
173
179
|
"
|
|
174
180
|
class:right={menuAlign === 'right'}
|
|
175
181
|
class:left={menuAlign === 'left'}
|
|
176
182
|
transition:fly={{ y: 8 }}
|
|
177
183
|
>
|
|
178
|
-
<div class="context5__content">
|
|
184
|
+
<div class="context5__content" style="overflow: {hideOverflow ? 'hidden' : 'visible'}">
|
|
179
185
|
{@render content()}
|
|
180
186
|
</div>
|
|
181
187
|
</div>
|
|
@@ -235,7 +241,11 @@ top:{position.y}px;
|
|
|
235
241
|
|
|
236
242
|
.context5__content {
|
|
237
243
|
background-color: var(--context5__ContentBgColor);
|
|
238
|
-
border-radius:
|
|
244
|
+
border-radius: var(--context5__BorderRadius);
|
|
239
245
|
border: 1px solid var(--context5__ContentBorderColor);
|
|
240
246
|
}
|
|
247
|
+
|
|
248
|
+
.context5__menu.overflow-hidden {
|
|
249
|
+
overflow: hidden;
|
|
250
|
+
}
|
|
241
251
|
</style>
|
|
@@ -9,6 +9,8 @@ type $$ComponentProps = {
|
|
|
9
9
|
open?: boolean;
|
|
10
10
|
onOpenChange?: (open: boolean) => void;
|
|
11
11
|
iconSize?: string;
|
|
12
|
+
borderRadius?: string;
|
|
13
|
+
hideOverflow?: boolean;
|
|
12
14
|
};
|
|
13
15
|
declare const ContextMenu5: import("svelte").Component<$$ComponentProps, {}, "open">;
|
|
14
16
|
type ContextMenu5 = ReturnType<typeof ContextMenu5>;
|