109 lines
2 KiB
Svelte
109 lines
2 KiB
Svelte
|
<script>
|
||
|
|
export let icon
|
||
|
|
export let withArrow = false
|
||
|
|
export let withActions = true
|
||
|
|
export let indentLevel = 0
|
||
|
|
export let text
|
||
|
|
export let border = true
|
||
|
|
export let selected = false
|
||
|
|
export let opened = false
|
||
|
|
export let draggable = false
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="container"
|
||
|
|
class:border
|
||
|
|
class:selected
|
||
|
|
style={`padding-left: ${indentLevel * 18}px`}
|
||
|
|
{draggable}
|
||
|
|
on:dragend
|
||
|
|
on:dragstart
|
||
|
|
on:dragover
|
||
|
|
on:drop
|
||
|
|
on:click
|
||
|
|
ondragover="return false"
|
||
|
|
ondragenter="return false">
|
||
|
|
<div class="content">
|
||
|
|
{#if withArrow}
|
||
|
|
<div class:opened class="icon arrow">
|
||
|
|
<i class="ri-arrow-right-s-fill" />
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
{#if icon}
|
||
|
|
<div class="icon"><i class={icon} /></div>
|
||
|
|
{/if}
|
||
|
|
<div class="text">{text}</div>
|
||
|
|
{#if withActions}
|
||
|
|
<div class="actions">
|
||
|
|
<slot />
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.container {
|
||
|
|
border-radius: var(--border-radius-m);
|
||
|
|
cursor: pointer;
|
||
|
|
color: var(--grey-7);
|
||
|
|
}
|
||
|
|
.container.border {
|
||
|
|
border-top: 1px solid var(--grey-1);
|
||
|
|
}
|
||
|
|
.container.selected {
|
||
|
|
background-color: var(--grey-2);
|
||
|
|
color: var(--ink);
|
||
|
|
}
|
||
|
|
.container:hover {
|
||
|
|
background-color: var(--grey-1);
|
||
|
|
}
|
||
|
|
.container:hover .actions {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
padding: 0 var(--spacing-m);
|
||
|
|
height: 32px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
justify-content: flex-start;
|
||
|
|
align-items: center;
|
||
|
|
gap: var(--spacing-xs);
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
font-size: 16px;
|
||
|
|
flex: 0 0 20px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.icon.arrow {
|
||
|
|
margin: 0 -2px 0 -6px;
|
||
|
|
}
|
||
|
|
.icon.arrow.opened {
|
||
|
|
transform: rotate(90deg);
|
||
|
|
}
|
||
|
|
.icon + .icon {
|
||
|
|
margin-left: -4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text {
|
||
|
|
flex: 1 1 auto;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: var(--font-size-xs);
|
||
|
|
}
|
||
|
|
|
||
|
|
.actions {
|
||
|
|
display: none;
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
cursor: pointer;
|
||
|
|
position: relative;
|
||
|
|
flex-direction: row;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
</style>
|