Pass wraps more similiar to how size is passed via CSS variables
This commit is contained in:
parent
59884df70b
commit
d3e1bfa841
@ -6,12 +6,12 @@
|
||||
export let props: Record<string, string> = {};
|
||||
|
||||
export let buttons: Buttons;
|
||||
export let wraps: boolean;
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: var(--toolbar-wrap);
|
||||
overflow-y: auto;
|
||||
|
||||
padding-inline-start: 0;
|
||||
@ -23,10 +23,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.wraps {
|
||||
flex-flow: wrap;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-bottom: calc(var(--toolbar-size) / 15);
|
||||
@ -54,11 +50,11 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<ul {id} class={className} {...props} class:wraps>
|
||||
<ul {id} class={className} {...props}>
|
||||
{#each buttons as button}
|
||||
<li>
|
||||
{#if Array.isArray(button)}
|
||||
<svelte:self buttons={button} {wraps} />
|
||||
<svelte:self buttons={button} />
|
||||
{:else}
|
||||
<svelte:component this={button.component} {...button} />
|
||||
{/if}
|
||||
|
@ -58,7 +58,7 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<div style={`--toolbar-size: ${size}px`}>
|
||||
<div style={`--toolbar-size: ${size}px; --toolbar-wrap: ${wraps ? "wrap" : "nowrap"}`}>
|
||||
<div>
|
||||
{#each _menus as menu}
|
||||
<svelte:component this={menu.component} {...menu} />
|
||||
@ -66,6 +66,6 @@
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<ButtonGroup buttons={_buttons} {wraps} />
|
||||
<ButtonGroup buttons={_buttons} />
|
||||
</nav>
|
||||
</div>
|
||||
|
@ -26,7 +26,6 @@ class EditorToolbar extends HTMLElement {
|
||||
|
||||
connectedCallback(): void {
|
||||
setupI18n({ modules: [ModuleName.EDITING] }).then(() => {
|
||||
console.log(this.buttons);
|
||||
this.component = new EditorToolbarSvelte({
|
||||
target: this,
|
||||
props: {
|
||||
|
Loading…
Reference in New Issue
Block a user