@ticatec/uniface-element 0.3.23 → 5.0.0

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

@@ -1,43 +0,0 @@
-<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 ='';
-    let style: string = '';
-
-    $: {
-        hint = column.hint?.(data);
-        style = column.cellStyle?.(data) ?? '';
-    }
-
-    $: col$class = frozen ? `fz_col-${colIdx}` : `col-${colIdx}`;
-
-</script>
-<div class="data-cell {col$class}" {style}>
-    <div class="vertical-center">
-        {#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

@@ -1,24 +0,0 @@
-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

@@ -1,49 +0,0 @@
-<script lang="ts">
-
-    import type DataColumn from "../lib/DataColumn";
-    import DataCell from "./DataCell.svelte";
-    import type TableRow from "./TableRow";
-    import type {RowFontStyle} from "../lib/types";
-
-    export let columns: Array<DataColumn>;
-    export let row: TableRow;
-    export let alternative: boolean;
-    export let rowHeight: number;
-    export let fontStyle: RowFontStyle;
-
-    /**
-     * 获取行样式
-     * @param rh
-     * @param fs
-     */
-    const getRowStyle = (rh: number, fs: RowFontStyle) => {
-        let rs = '';
-        if (rh) {
-            rs = `height: ${rowHeight}px`;
-        }
-        if (fs?.size) {
-            rs = `font-size: ${fs.size}; ${rs}`;
-        }
-        if (fs?.color) {
-            rs = `color: ${fs?.color}; ${rs}`;
-        }
-        if (fs?.weight) {
-            rs = `font-weight: ${fs?.weight}; ${rs}`;
-        }
-        return rs;
-    }
-
-    $: style = getRowStyle(rowHeight, fontStyle)
-
-
-</script>
-
-<div class="data-row" {style} class:alternative aria-hidden="true">
-    {#each columns as col, idx}
-        <DataCell colIdx={idx} data={row.data} column={col}/>
-    {/each}
-    <div class="data-cell" style="border-right: none; width: unset">
-    </div>
-</div>
-
-

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

@@ -1,27 +0,0 @@
-import type DataColumn from "../lib/DataColumn";
-import type TableRow from "./TableRow";
-import type { RowFontStyle } from "../lib/types";
-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;
-    fontStyle: RowFontStyle;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DataRow = InstanceType<typeof DataRow>;
-export default DataRow;

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

@@ -1,109 +0,0 @@
-<script lang="ts">
-
-    import FixedRow from "./FixedRow.svelte";
-    import type TableRow from "./TableRow";
-    import type {IndicatorColumn} from "..";
-    import UniDataTable, {type RowEventHandler, SelectionMode, type TableEventHandler} from "../UniDataTable";
-    import type DataColumn from "../lib/DataColumn";
-    import FixedHeaderPanel from "./FixedHeaderPanel.svelte";
-    import {tick} from "svelte";
-    import {OrderDirection} from "../lib/OrderDirection";
-
-
-    export let fixedCols: Array<DataColumn> = [];
-    export let indicatorColumn: IndicatorColumn | null;
-    export let width: number;
-    export let scrollTop: number = 0;
-    export let rows: Array<TableRow>;
-    export let handleWidthChange: TableEventHandler;
-    export let handleRowExpand: RowEventHandler;
-
-    export let handleCellClick: (col: DataColumn) => any;
-    export let orderColumn: DataColumn;
-    export let orderDirection: OrderDirection;
-
-    let selectionMode: SelectionMode = SelectionMode.None;
-
-    export let selectedRows: Array<any> = [];
-
-    export let expandRow: TableRow | null;
-
-    export let rowHeight: number;
-
-    export let inlineRowHeight: number = 0;
-
-
-    let selectable: boolean = false;
-    let expandable: boolean = false;
-
-    $: selectable = indicatorColumn?.selectable == true;
-    $: expandable = indicatorColumn?.buildInlineComponent != null;
-
-    const handleToggleSelectAll = async (value: boolean) => {
-        selectedRows = value ? rows.map(item => item.data) : [];
-        await tick();
-        selectionMode = value ? SelectionMode.All : SelectionMode.None;
-        rows = [...rows];
-    }
-
-    const handleRowSelectChange = async (row: TableRow, value: boolean) => {
-        if (value) {
-            if (selectedRows.indexOf(row.data) < 0) {
-                selectedRows = [...selectedRows, row.data];
-            }
-        } else {
-            let pos = selectedRows.indexOf(row.data);
-            if (pos > -1) {
-                selectedRows.splice(pos, 1);
-                selectedRows = [...selectedRows];
-            }
-        }
-        selectionMode = selectedRows.length == rows.length ? SelectionMode.All : selectedRows.length == 0 ? SelectionMode.None : SelectionMode.Partial;
-    }
-
-    let viewPanel: any;
-
-    const handleWheelEvent = (e: WheelEvent) => {
-        let maxSh = viewPanel.scrollHeight - viewPanel.clientHeight;
-        if (maxSh > 0) {
-            if (e.deltaY != 0) {
-                scrollTop = scrollTop + e.deltaY;
-                if (scrollTop < 0) {
-                    scrollTop = 0;
-                }
-                if (scrollTop > maxSh) {
-                    scrollTop = maxSh;
-                }
-                setTimeout(() => {
-                    scrollTop = viewPanel.scrollTop;
-                }, 200);
-            }
-        }
-    }
-
-    $: if (viewPanel && scrollTop > -1) {
-        viewPanel.scrollTop = scrollTop;
-    }
-
-</script>
-
-<div class="left-fixed-panel" style="width: {width}px">
-    <FixedHeaderPanel {selectionMode} {orderColumn} {orderDirection} {handleCellClick} {handleWidthChange} columns={fixedCols} {indicatorColumn}
-                      {handleToggleSelectAll} {rowHeight}/>
-    <div class="rows-container" bind:this={viewPanel} on:wheel|passive={handleWheelEvent}>
-        <div>
-            {#each rows ?? [] as row, idx}
-                <FixedRow rowNo={idx+1} {row} selected={selectedRows.indexOf(row.data) > -1} alternative={idx % 2 == 1} {selectable}
-                          cols={fixedCols} {expandRow} {rowHeight} {expandable} {handleRowExpand} {handleRowSelectChange} {indicatorColumn}/>
-                {#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

@@ -1,38 +0,0 @@
-import type TableRow from "./TableRow";
-import type { IndicatorColumn } from "..";
-import { type RowEventHandler, type TableEventHandler } from "../UniDataTable";
-import type DataColumn from "../lib/DataColumn";
-import { OrderDirection } from "../lib/OrderDirection";
-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 | null;
-    width: number;
-    scrollTop?: number;
-    rows: Array<TableRow>;
-    handleWidthChange: TableEventHandler;
-    handleRowExpand: RowEventHandler;
-    handleCellClick: (col: DataColumn) => any;
-    orderColumn: DataColumn;
-    orderDirection: OrderDirection;
-    selectedRows?: Array<any>;
-    expandRow: TableRow | null;
-    rowHeight: number;
-    inlineRowHeight?: number;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FixedColumnsPanel = InstanceType<typeof FixedColumnsPanel>;
-export default FixedColumnsPanel;

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

@@ -1,108 +0,0 @@
-<script lang="ts">
-
-    import type DataColumn from "../lib/DataColumn";
-    import type {IndicatorColumn} from "..";
-    import {type SelectionEventHandler, SelectionMode, type TableEventHandler} from "../UniDataTable";
-    import utils from "../../common/utils";
-    import {OrderDirection} from "../lib/OrderDirection";
-    import i18nRes from "../../i18nRes";
-
-    export let columns: Array<DataColumn>;
-    export let indicatorColumn: IndicatorColumn | null;
-    export let handleWidthChange: TableEventHandler;
-    export let rowHeight;
-    export let handleCellClick: (col: DataColumn) => any;
-    export let orderColumn: DataColumn;
-    export let orderDirection: OrderDirection;
-    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;
-    }
-
-    let resizeCol: any;
-    let startX: number = 0;
-    let startWidth: number = 0;
-    const handleResizeMouseDown = (col: DataColumn) => (event: MouseEvent) => {
-        if (col.resizable) {
-            resizeCol = col;
-            startX = event.clientX;
-            startWidth = resizeCol.width;
-
-            document.body.style.cursor = 'col-resize';
-            // 绑定鼠标移动和松开事件
-            window.addEventListener('mousemove', onMouseMove);
-            window.addEventListener('mouseup', onMouseUp);
-        }
-    }
-    const onMouseMove = (event: MouseEvent) => {
-        if (resizeCol !== null) {
-            const diff = event.clientX - startX;
-            let w = startWidth + diff;
-            if (w > (resizeCol.minWidth ?? 50)) {
-                resizeCol.width = startWidth + diff;
-            }
-
-        }
-        handleWidthChange?.();
-    }
-
-    // 结束拖动
-    function onMouseUp() {
-        resizeCol = null;
-        document.body.style.cursor = 'default';
-        window.removeEventListener('mousemove', onMouseMove);
-        window.removeEventListener('mouseup', onMouseUp);
-    }
-
-</script>
-
-<div class="header-row" style="flex: 0 0 auto; {rowHeight}px">
-    {#if indicatorColumn}
-        <div class="data-cell" style="width: {indicatorColumn.width}px">
-            {#if indicatorColumn?.selectable === true}
-                <div style="text-align: center" class="vertical-center">
-                    <input type="checkbox" tabindex="-1" bind:checked {indeterminate} on:click={handleHeaderCheckBoxClick}/>
-                </div>
-            {:else }
-                <div style="text-align: center" class="vertical-center">
-                    {#if indicatorColumn.displayNo}
-                        <span>{i18nRes.dataTable.rowNo}</span>
-                    {/if}
-                </div>
-            {/if}
-            <div class="header-cell-divider"></div>
-        </div>
-    {/if}
-    {#each columns as column, index}
-        <div class="fz_col-{index} data-cell" class:sortable={column.compareFunction!=null} style="text-align: center">
-            <div class:sortable={column.compareFunction != null} on:click={handleCellClick(column)} aria-hidden="true" class="vertical-center">
-                <span>{column.text}</span>
-                {#if column === orderColumn}
-                    <i style="margin-left: 2px; font-size: 12px; position: absolute; top: 0; right: 4px"
-                       class={orderDirection===OrderDirection.Ascending ? 'icon_google_keyboard_arrow_up' : 'icon_google_keyboard_arrow_down'}></i>
-                {/if}
-            </div>
-
-            <div class="header-cell-divider" class:resizer={column.resizable} aria-hidden="true"
-                 on:mousedown={handleResizeMouseDown(column)}></div>
-        </div>
-    {/each}
-</div>

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

@@ -1,32 +0,0 @@
-import type DataColumn from "../lib/DataColumn";
-import type { IndicatorColumn } from "..";
-import { type SelectionEventHandler, SelectionMode, type TableEventHandler } from "../UniDataTable";
-import { OrderDirection } from "../lib/OrderDirection";
-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 | null;
-    handleWidthChange: TableEventHandler;
-    rowHeight: any;
-    handleCellClick: (col: DataColumn) => any;
-    orderColumn: DataColumn;
-    orderDirection: OrderDirection;
-    selectionMode: SelectionMode;
-    handleToggleSelectAll: SelectionEventHandler;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FixedHeaderPanel = InstanceType<typeof FixedHeaderPanel>;
-export default FixedHeaderPanel;

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

@@ -1,63 +0,0 @@
-<script lang="ts">
-
-    import type TableRow from "./TableRow";
-    import type {RowEventHandler, RowSelectEventHandler} from "../UniDataTable";
-    import DataCell from "./DataCell.svelte";
-    import type DataColumn from "../lib/DataColumn";
-    import type {IndicatorColumn} from "..";
-
-
-    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: RowSelectEventHandler;
-    export let selected: boolean;
-
-    export let expandRow: any = null;
-
-    export let rowHeight: number;
-
-    export let indicatorColumn: IndicatorColumn | null;
-
-    let style: string;
-
-    const showInlineData = (e: MouseEvent) => {
-        handleRowExpand?.(row);
-        e.preventDefault();
-        e.stopPropagation();
-    }
-
-    $: {
-        handleRowSelectChange(row, selected);
-    }
-
-    $: style = rowHeight == null ? '' : `height: ${rowHeight}px`
-
-</script>
-<div class="data-row" class:alternative style="width: 100%; {style}">
-    {#if indicatorColumn}
-        <div class="data-cell indicator-cell" style="width: {indicatorColumn.width}px">
-            {#if selectable}
-                <input type="checkbox" bind:checked={selected}/>
-            {/if}
-            {#if indicatorColumn.displayNo}
-                <div style="margin-left: 4px; flex: 1 1 auto; text-align: center">
-                    <span>{rowNo}</span>
-                </div>
-            {/if}
-
-            {#if expandable}
-                <div class="expand-icon" style="flex: 0 0 auto">
-                    <i class={row == expandRow ? 'icon_google_folder' : "icon_google_folder_open"} aria-hidden="true" on:click={showInlineData}></i>
-                </div>
-            {/if}
-        </div>
-    {/if}
-    {#each cols as column, colIdx}
-        <DataCell frozen={true} {colIdx} {column} data={row.data}/>
-    {/each}
-</div>

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

@@ -1,35 +0,0 @@
-import type TableRow from "./TableRow";
-import type { RowEventHandler, RowSelectEventHandler } from "../UniDataTable";
-import type DataColumn from "../lib/DataColumn";
-import type { IndicatorColumn } from "..";
-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: RowSelectEventHandler;
-    selected: boolean;
-    expandRow?: any;
-    rowHeight: number;
-    indicatorColumn: IndicatorColumn | null;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FixedRow = InstanceType<typeof FixedRow>;
-export default FixedRow;

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

@@ -1,46 +0,0 @@
-<script lang="ts">
-    import type HrefLink from "../lib/HrefLink";
-    import type {HrefBuilder} from "../lib/HrefLink";
-
-    export let data;
-    export let href: HrefBuilder;
-
-    let list: Array<HrefLink | string> = [];
-
-
-    $: {
-        let h = href(data);
-        list = Array.isArray(h) ? h : [h];
-    }
-</script>
-<div style="display: flex; flex-direction: row; gap: 8px; justify-content: center">
-    {#each list as item, idx}
-        {#if typeof item == "string"}
-            <span>{item}</span>
-        {:else}
-            <button class="link-style" on:click|preventDefault={()=>item.action()}>{item.text}</button>
-        {/if}
-    {/each}
-</div>
-
-<style>
-    button.link-style {
-        background: none;
-        border: none;
-        color: blue;
-        text-decoration: underline;
-        cursor: pointer;
-        font: inherit;
-        padding: 0;
-    }
-
-    button.link-style:focus {
-        outline: none;
-    }
-
-    button.link-style:active {
-        /* 取消默认的active边框或者阴影 */
-        outline: none;
-        box-shadow: none;
-    }
-</style>

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

@@ -1,22 +0,0 @@
-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/PopupMenu.svelte

@@ -1,68 +0,0 @@
-<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%;"
-        }
-    }
-
-    export function outerClick(node: HTMLElement, callback: () => void) {
-        const handleClick = (event: MouseEvent) => {
-            // 如果点击目标不在node内，则触发回调
-            if (!node.contains(event.target as Node)) {
-                callback();
-            }
-        };
-
-        // 监听全局点击事件（useCapture=true，避免事件冒泡造成的问题）
-        document.addEventListener('click', handleClick, true);
-
-        // 清理事件监听器
-        onDestroy(() => {
-            document.removeEventListener('click', handleClick, true);
-        });
-
-        // action 必须返回一个对象，可以选实现 update 和 destroy
-        return {
-            destroy() {
-                document.removeEventListener('click', handleClick, true);
-            }
-        };
-    }
-
-    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 use:outerClick={close}>
-    <slot></slot>
-</div>