@ticatec/uniface-element 0.1.9

package/dist/data-table/parts/ContentPanel.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+
+    import DataRow from "./DataRow.svelte";
+    import type DataColumn from "../lib/DataColumn";
+    import type ActionsColumn from "../lib/ActionsColumn";
+    import type IndicatorColumn from "../lib/IndicatorColumn";
+
+    import iconLoading from "../assets/loading.gif"
+    import type TableRow from "./TableRow";
+    import type {TableEventHandler} from "../UniDataTable";
+    import ActionPanel from "./ActionsPanel.svelte";
+    import FixedColumnsPanel from "./FixedColumnsPanel.svelte";
+    import {onMount, tick} from "svelte";
+
+
+    export let columns: Array<DataColumn>;   //columns={dataColumns}
+    export let rows: Array<TableRow>; //{rows}
+
+    export let width: number = 0; //width={tabWidth}
+
+    export let actionsColumn: ActionsColumn | null;  //{actionsColumn}
+    export let indicatorColumn: IndicatorColumn;  //{indicatorColumn}
+    export let scrollLeft: number = 0; //bind:scrollLeft
+    export let rowHeight: number;  //{ rowHeight}
+    export let inlineRowHeight: number = 80;
+    export let handleRowSelectChange: TableEventHandler; //{handleRowSelectChange}
+
+
+    let hasOperation: boolean = actionsColumn != null;
+    let scrollTop: number = 0;
+
+    let resizeObserver: ResizeObserver;
+    let dataPanel: any;
+    let tabWidth: number;
+
+    onMount(async () => {
+        resizeObserver = new ResizeObserver(() => {
+            // 每次 div 尺寸变化时，更新 clientWidth
+            tabWidth = dataPanel?.clientWidth;
+        });
+        resizeObserver.observe(dataPanel);
+    });
+
+    const handleDataTableScroll = (e: Event) => {
+        if (!hasOperation) {
+            scrollTop = e.target?.scrollTop;
+        }
+        scrollLeft = e.target?.scrollLeft;
+    }
+
+
+    const handleWheelEvent = (e: WheelEvent) => {
+        let maxSh = dataPanel.scrollHeight - dataPanel.clientHeight;
+        if (hasOperation && maxSh > 0) {
+            if (e.deltaY != 0) {
+                scrollTop = scrollTop + e.deltaY;
+                if (scrollTop < 0) {
+                    scrollTop = 0;
+                }
+                if (scrollTop > maxSh) {
+                    scrollTop = maxSh;
+                }
+                setTimeout(() => {
+                    scrollTop = dataPanel.scrollTop;
+                }, 200);
+            }
+        }
+    }
+
+    let expandRow: any = null;
+    let loadingRow: any = null;
+    let inlineComponent: any;
+    let inlineError: string | null = null;
+
+    let fixedCols: Array<DataColumn> = [];
+
+
+    const handleRowExpand = async (row: TableRow) => {
+        if (row == expandRow) {
+            row.expand = false;
+            expandRow = null;
+        } else {
+            if (expandRow != null) {
+                expandRow.expand = false;
+            }
+            expandRow = row;
+        }
+        inlineComponent = null;
+        await tick();
+        loadingRow = true;
+        try {
+            inlineError = null;
+            inlineComponent = await indicatorColumn?.buildInlineComponent(row.data);
+        } catch (ex) {
+            inlineError = indicatorColumn.getInlineError?.(ex as Error) ?? 'Unknown Error';
+        }
+        loadingRow = false;
+    }
+
+    let rowWidth: number;
+
+    $: rowWidth = Math.max(width, tabWidth);
+
+    $: if (dataPanel && scrollTop > -1) {
+        dataPanel.scrollTop = scrollTop;
+    }
+
+</script>
+<div class="data-content-panel">
+    <FixedColumnsPanel {indicatorColumn} {expandRow} {fixedCols} {inlineRowHeight} {rows} bind:scrollTop {handleRowExpand}
+                       {handleRowSelectChange}/>
+    <div class="data-view-panel" bind:this={dataPanel} on:scroll|passive={handleDataTableScroll} on:wheel|passive={handleWheelEvent}
+         style="{actionsColumn == null ? 'overflow-y: scroll' : ''}">
+        {#if rows && rows.length > 0}
+            <div style="box-sizing: border-box; width: {rowWidth}px;">
+                {#each rows as row, idx}
+                    <DataRow {rowHeight} {row} {columns} alternative={idx % 2 == 1} />
+                    {#if row == expandRow}
+                        <div class="expand-data-row" bind:clientHeight={inlineRowHeight}
+                             style="position: relative; box-sizing: content-box; width: 100%; height: auto">
+                            <div class="inline-panel">
+                                {#if loadingRow}
+                                    <div style="text-align: center; padding: 16px">
+                                        <img src={iconLoading} width="32" height="32" style="vertical-align: middle"/>
+                                        <span style="">{indicatorColumn.loadingIndicator ?? 'Loading data...'}</span>
+                                    </div>
+                                {:else if inlineError}
+                                    <div style="text-align: center; padding: 16px">
+                                        <span style="">{inlineError}</span>
+                                    </div>
+                                {:else}
+                                    <svelte:component this={inlineComponent} data={row}/>
+                                {/if}
+                            </div>
+                        </div>
+                    {/if}
+                {/each}
+            </div>
+        {:else}
+            <div class="empty-content-board" style="width: {width}px;">
+                <div>{indicatorColumn.emptyIndicator ?? "Empty dataset."}</div>
+            </div>
+        {/if}
+    </div>
+    {#if actionsColumn}
+        <ActionPanel {expandRow} {actionsColumn} {rows} {inlineRowHeight} bind:scrollTop/>
+    {/if}
+</div>

package/dist/data-table/parts/ContentPanel.svelte.d.ts

@@ -0,0 +1,33 @@
+import type DataColumn from "../lib/DataColumn";
+import type ActionsColumn from "../lib/ActionsColumn";
+import type IndicatorColumn from "../lib/IndicatorColumn";
+import type TableRow from "./TableRow";
+import type { TableEventHandler } from "../UniDataTable";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ContentPanel: $$__sveltets_2_IsomorphicComponent<{
+    columns: Array<DataColumn>;
+    rows: Array<TableRow>;
+    width?: number;
+    actionsColumn: ActionsColumn | null;
+    indicatorColumn: IndicatorColumn;
+    scrollLeft?: number;
+    rowHeight: number;
+    inlineRowHeight?: number;
+    handleRowSelectChange: TableEventHandler;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ContentPanel = InstanceType<typeof ContentPanel>;
+export default ContentPanel;

package/dist/data-table/parts/DataCell.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+
+
+    import HrefCell from "./HrefCell.svelte";
+    import type DataColumn from "../lib/DataColumn";
+    import TextCell from "./TextCell.svelte";
+
+    export let frozen: boolean = false;
+    export let colIdx: number;
+    export let column: DataColumn;
+    export let data: any;
+
+    let hint: any;
+    let cell: any;
+    let col$class: string ='';
+
+    $: {
+        hint = column.hint?.(data);
+    }
+
+    $: col$class = frozen ? `fz-col-${colIdx}` : `col-${colIdx}`;
+
+</script>
+<div class="table-data-cell {col$class}">
+    <div>
+        {#if column.render}
+            <svelte:component this={column.render.component} {...column.render.props} {data}/>
+        {:else if column.href}
+            <HrefCell {data} href={column.href}/>
+        {:else}
+            <TextCell {data} {column}/>
+        {/if}
+    </div>
+    {#if hint && cell && cell.offsetWidth < cell.scrollWidth}
+        <div class="cell-hint">
+            <div>
+                <span>{hint}</span>
+            </div>
+        </div>
+    {/if}
+</div>

package/dist/data-table/parts/DataCell.svelte.d.ts

@@ -0,0 +1,24 @@
+import type DataColumn from "../lib/DataColumn";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DataCell: $$__sveltets_2_IsomorphicComponent<{
+    frozen?: boolean;
+    colIdx: number;
+    column: DataColumn;
+    data: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DataCell = InstanceType<typeof DataCell>;
+export default DataCell;

package/dist/data-table/parts/DataRow.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+
+    import type DataColumn from "../lib/DataColumn";
+    import DataCell from "./DataCell.svelte";
+    import type TableRow from "./TableRow";
+
+    export let columns: Array<DataColumn>;
+    export let row: TableRow;
+    export let alternative: boolean;
+    export let rowHeight: number;  //{ rowHeight}
+
+    let style: string = '';
+
+
+
+    $: style = rowHeight== null ? '' : `height: ${rowHeight}px`
+
+
+</script>
+
+<div class="table-row" {style} class:alternative aria-hidden="true">
+    {#each columns as col, idx}
+        <DataCell colIdx={idx} data={row.data} column={col}/>
+    {/each}
+    <div class="table-data-cell"  style="border-right: none">
+    </div>
+</div>
+
+

package/dist/data-table/parts/DataRow.svelte.d.ts

@@ -0,0 +1,25 @@
+import type DataColumn from "../lib/DataColumn";
+import type TableRow from "./TableRow";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DataRow: $$__sveltets_2_IsomorphicComponent<{
+    columns: Array<DataColumn>;
+    row: TableRow;
+    alternative: boolean;
+    rowHeight: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DataRow = InstanceType<typeof DataRow>;
+export default DataRow;

package/dist/data-table/parts/FixedColumnsPanel.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+
+    import FixedRow from "./FixedRow.svelte";
+    import type TableRow from "./TableRow";
+    import type {IndicatorColumn} from "..";
+    import type {RowEventHandler, TableEventHandler} from "../UniDataTable";
+    import type DataColumn from "../lib/DataColumn";
+
+
+    export let fixedCols: Array<DataColumn>;
+    export let indicatorColumn: IndicatorColumn;
+    export let scrollTop: number = 0;
+    export let rows: Array<TableRow>;
+    export let handleRowExpand: RowEventHandler;
+    export let handleRowSelectChange: TableEventHandler;
+
+    export let expandRow: TableRow;
+
+    let width: number = indicatorColumn.width;
+
+    export let inlineRowHeight: number = 0;
+
+
+    let selectable: boolean = false;
+    let expandable: boolean = false;
+
+    $: selectable = indicatorColumn.selectable == true;
+    $: expandable = indicatorColumn.buildInlineComponent != null;
+
+</script>
+
+<div class="fixed-panel" style="width: {width}px">
+    <div class="scroll-panel" style="overflow-y: hidden">
+        <div style="top: {-scrollTop}px">
+            {#each rows??[] as row, idx}
+                <FixedRow rowNo={idx+1} {row} selected={row.selected} alternative={idx % 2 == 1} {selectable} cols={fixedCols}
+                              {expandable} {handleRowExpand} {handleRowSelectChange}/>
+                {#if row == expandRow}
+                    <div class="inline-panel" style="height: {inlineRowHeight}px">
+
+                    </div>
+                {/if}
+            {/each}
+        </div>
+    </div>
+    <div class="bottom-mask-overlay">
+        <!-- 用于匹配中间数据区域的滚动条 -->
+    </div>
+</div>

package/dist/data-table/parts/FixedColumnsPanel.svelte.d.ts

@@ -0,0 +1,31 @@
+import type TableRow from "./TableRow";
+import type { IndicatorColumn } from "..";
+import type { RowEventHandler, TableEventHandler } from "../UniDataTable";
+import type DataColumn from "../lib/DataColumn";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FixedColumnsPanel: $$__sveltets_2_IsomorphicComponent<{
+    fixedCols: Array<DataColumn>;
+    indicatorColumn: IndicatorColumn;
+    scrollTop?: number;
+    rows: Array<TableRow>;
+    handleRowExpand: RowEventHandler;
+    handleRowSelectChange: TableEventHandler;
+    expandRow: TableRow;
+    inlineRowHeight?: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FixedColumnsPanel = InstanceType<typeof FixedColumnsPanel>;
+export default FixedColumnsPanel;

package/dist/data-table/parts/FixedHeaderPanel.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+
+    import type DataColumn from "../lib/DataColumn";
+    import type {IndicatorColumn} from "..";
+    import {type SelectionEventHandler, SelectionMode} from "../UniDataTable";
+    import utils from "../../common/utils";
+
+    export let columns: Array<DataColumn>;
+    export let indicatorColumn: IndicatorColumn;
+
+
+
+    export let selectionMode: SelectionMode;
+
+    export let handleToggleSelectAll: SelectionEventHandler;
+
+    let checked: boolean = false;
+    let indeterminate: boolean = false;
+
+    const handleHeaderCheckBoxClick = async (e: MouseEvent) => {
+        indeterminate = false;
+        await utils.sleep(0.05);
+        handleToggleSelectAll?.(checked);
+    }
+
+    $: if (selectionMode == SelectionMode.All) {
+        indeterminate = false;
+        checked = true;
+    } else if (selectionMode == SelectionMode.None) {
+        indeterminate = false;
+        checked = false;
+    } else {
+        indeterminate = true;
+    }
+
+
+</script>
+
+<div class="header-indicator" style="width: {indicatorColumn.width}px">
+    <div>
+        {#if indicatorColumn.selectable==true}
+            <input type="checkbox" tabindex="-1" bind:checked {indeterminate} on:click={handleHeaderCheckBoxClick}/>
+        {/if}
+    </div>
+</div>

package/dist/data-table/parts/FixedHeaderPanel.svelte.d.ts

@@ -0,0 +1,26 @@
+import type DataColumn from "../lib/DataColumn";
+import type { IndicatorColumn } from "..";
+import { type SelectionEventHandler, SelectionMode } from "../UniDataTable";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FixedHeaderPanel: $$__sveltets_2_IsomorphicComponent<{
+    columns: Array<DataColumn>;
+    indicatorColumn: IndicatorColumn;
+    selectionMode: SelectionMode;
+    handleToggleSelectAll: SelectionEventHandler;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FixedHeaderPanel = InstanceType<typeof FixedHeaderPanel>;
+export default FixedHeaderPanel;

package/dist/data-table/parts/FixedRow.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+
+    import type TableRow from "./TableRow";
+    import type {RowEventHandler} from "../UniDataTable";
+    import DataCell from "./DataCell.svelte";
+    import type DataColumn from "../lib/DataColumn";
+
+    export let selectable: boolean = false;
+    export let rowNo: number;
+    export let cols: Array<DataColumn> = [];
+    export let expandable: boolean;
+    export let row: TableRow;
+    export let alternative: boolean;
+    export let handleRowExpand: RowEventHandler;
+    export let handleRowSelectChange: RowEventHandler;
+    export let selected: boolean = row.selected;
+
+
+
+    // const handleCheckBoxClick = (e: MouseEvent) => {
+    //     e.stopPropagation();
+    //     toggleRowSectionHandler?.(row);
+    // }
+
+    const showInlineData = (e: MouseEvent) => {
+        handleRowExpand?.(row);
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
+    $: if (row.selected != selected) {
+        row.selected = selected;
+        handleRowSelectChange(row.selected);
+    }
+
+</script>
+<div class="table-row" class:alternative >
+    <div class="indicator-cell">
+        {#if selectable}
+            <input type="checkbox" bind:checked={selected}/>
+        {/if}
+        <span>{rowNo}</span>
+        {#if expandable}
+            <i class={row.expand ? 'uniface-icon-folder' : "uniface-icon-folder-plus"} aria-hidden="true" on:click={showInlineData}></i>
+        {/if}
+    </div>
+    {#each cols as column, colIdx}
+        <DataCell frozen={true} {colIdx} {column} data={row.data}/>
+    {/each}
+</div>

package/dist/data-table/parts/FixedRow.svelte.d.ts

@@ -0,0 +1,31 @@
+import type TableRow from "./TableRow";
+import type { RowEventHandler } from "../UniDataTable";
+import type DataColumn from "../lib/DataColumn";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FixedRow: $$__sveltets_2_IsomorphicComponent<{
+    selectable?: boolean;
+    rowNo: number;
+    cols?: Array<DataColumn>;
+    expandable: boolean;
+    row: TableRow;
+    alternative: boolean;
+    handleRowExpand: RowEventHandler;
+    handleRowSelectChange: RowEventHandler;
+    selected?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FixedRow = InstanceType<typeof FixedRow>;
+export default FixedRow;

package/dist/data-table/parts/HrefCell.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import type {HrefBuilder} from "../lib/HrefLink";
+
+    export let data;
+    export let href: HrefBuilder;
+
+    let text: string;
+    let action: any;
+
+    $: {
+        let h = href(data);
+        if (Array.isArray(h)) {
+
+        } else {
+            text = h.text;
+            action = h.action;
+        }
+    }
+</script>
+<div>
+    <a href="javascript:void(0)" on:click={()=>action(data)}>{text}</a>
+</div>

package/dist/data-table/parts/HrefCell.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { HrefBuilder } from "../lib/HrefLink";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const HrefCell: $$__sveltets_2_IsomorphicComponent<{
+    data: any;
+    href: HrefBuilder;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type HrefCell = InstanceType<typeof HrefCell>;
+export default HrefCell;

package/dist/data-table/parts/LinkButton.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    export let text;
+    export let action;
+    export let style: string = '';
+
+    let silent: boolean = false;
+
+    const handleButtonClick = (e) => {
+        if (!silent) {
+            silent = true;
+            setTimeout(()=>{silent=false}, 500);
+            action();
+        }
+    }
+
+</script>
+<a {style} class="action-button" href="javascript:void(0)" on:click={handleButtonClick}>
+    <span>{text}</span>
+</a>

package/dist/data-table/parts/LinkButton.svelte.d.ts

@@ -0,0 +1,22 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const LinkButton: $$__sveltets_2_IsomorphicComponent<{
+    text: any;
+    action: any;
+    style?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type LinkButton = InstanceType<typeof LinkButton>;
+export default LinkButton;

package/dist/data-table/parts/PopupMenu.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+
+    import {clickOutside} from "../../common/uniface-utils";
+    import {onDestroy, onMount} from "svelte";
+
+    export let closeCallback: ()=>void;
+    export let parentRect: DOMRect;
+
+    const close = () => {
+        closeCallback?.();
+    }
+
+    let panel: any;
+    let rect: DOMRect;
+    let resizeObserver: ResizeObserver;
+    let style: string = "top: 50%;"
+
+    const checkPosition = () => {
+        rect = panel.getBoundingClientRect();
+        if (rect.y + 10 > parentRect.height) {
+            style = "bottom: 50%;"
+        } else {
+            style = "top: 50%;"
+        }
+    }
+
+    onMount(async () => {
+        resizeObserver = new ResizeObserver(() => {
+            checkPosition();
+        });
+        resizeObserver.observe(panel);
+        checkPosition();
+    });
+
+    onDestroy(() => {
+        resizeObserver.disconnect();
+    });
+
+</script>
+
+
+<div bind:this={panel} style="position: absolute; right: 8px; {style}; background-color: #FFFFFF; border: 1px solid #e1e1e1; z-index: 5"
+     use:clickOutside on:outerClick={close}>
+    <slot></slot>
+</div>