@ticatec/uniface-element 0.1.12 → 0.1.14

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

@@ -1,41 +1,36 @@
 <script lang="ts">
 
     import {OrderDirection} from "../lib/OrderDirection";
-    import type IndicatorColumn from "../lib/IndicatorColumn";
-    import type ActionsColumn from "../lib/ActionsColumn";
-    import type {CompareFunction} from "../lib/CompareFunction";
-    import {type SelectionEventHandler, SelectionMode, type TableEventHandler} from "../UniDataTable";
-    import FixedHeaderPanel from "./FixedHeaderPanel.svelte";
+    import {type TableEventHandler} from "../UniDataTable";
     import type DataColumn from "../lib/DataColumn";
 
-    export let actionsColumn: ActionsColumn | null;
-    export let indicatorColumn: IndicatorColumn;
     export let scrollLeft: number = 0;
-    export let handleToggleSelectAll: SelectionEventHandler;
     export let handleWidthChange: TableEventHandler;
-    export let sortData: (compareFun: CompareFunction, descending: boolean) => void;
     export let dataCols: Array<any>;
-    export let frozenCols: Array<DataColumn> = [];
-    export let selectionMode: SelectionMode;
-
     export let width: number = 0;
+    export let hasWhitespace: boolean = false;
+    export let  handleCellClick: (col: DataColumn) => any;
+    export let orderColumn: DataColumn ;
+    export let orderDirection: OrderDirection;
 
     let resizeCol: any;
-    let orderColumn: DataColumn | null = null;
-    let orderDirection: OrderDirection = OrderDirection.Ascending;
+
 
     let startX: number = 0;
     let startWidth: number = 0;
 
 
     const handleResizeMouseDown = (col: DataColumn) => (event: MouseEvent) => {
-        resizeCol = col;
-        startX = event.clientX;
-        startWidth = resizeCol.width;
-
-        // 绑定鼠标移动和松开事件
-        window.addEventListener('mousemove', onMouseMove);
-        window.addEventListener('mouseup', onMouseUp);
+        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) => {
@@ -53,57 +48,31 @@
     // 结束拖动
     function onMouseUp() {
         resizeCol = null;
+        document.body.style.cursor = 'default';
         window.removeEventListener('mousemove', onMouseMove);
         window.removeEventListener('mouseup', onMouseUp);
     }
 
 
-    const handleCellClick = (col: DataColumn) => (e: MouseEvent) => {
-        if (col.compareFunction != null) {
-            if (col == orderColumn) {
-                orderDirection = orderDirection == OrderDirection.Ascending ? OrderDirection.Descending : OrderDirection.Ascending;
-            } else {
-                orderColumn = col;
-                orderDirection = OrderDirection.Ascending;
-            }
-            sortData?.(col.compareFunction, orderDirection == OrderDirection.Descending);
-        }
-    }
+
 
 
 </script>
-<div class="table-header-panel">
-    <FixedHeaderPanel {selectionMode} columns={frozenCols} {indicatorColumn} {handleToggleSelectAll}/>
-    <div style="width: 100%; overflow: hidden">
-        <div class="header-row-panel" style="left: {-scrollLeft}px; width: {width}px">
-            {#each dataCols ?? [] as col, index}
-                <div class="table-cell col-{index}">
-                    <div class:sortable={col.compareFunction != null} on:click={handleCellClick(col)} aria-hidden="true">
-                        <span>{col.text}</span>
-                        {#if col === orderColumn}
-                            <i style="margin-left: 2px; font-size: 12px; position: absolute; top: 0; right: 4px"
-                               class={orderDirection===OrderDirection.Ascending ? 'uniface-icon-chevron-up' : 'uniface-icon-chevron-down'}></i>
-                        {/if}
-                    </div>
-                    <div class="header-cell-divider" class:resizer={col.resizable} aria-hidden="true"
-                         on:mousedown={handleResizeMouseDown(col)}></div>
+<div class="header-row">
+    <div style="left: {-scrollLeft}px; width: {width}px">
+        {#each dataCols ?? [] as col, index}
+            <div class="col-{index} data-cell" class:sortable={col.compareFunction!=null} class:whitespace={hasWhitespace}>
+                <div class:sortable={col.compareFunction != null} on:click={handleCellClick(col)} aria-hidden="true" class="vertical-center">
+                    <span>{col.text}</span>
+                    {#if col === orderColumn}
+                        <i style="margin-left: 2px; font-size: 12px; position: absolute; top: 0; right: 4px"
+                           class={orderDirection===OrderDirection.Ascending ? 'uniface-icon-chevron-up' : 'uniface-icon-chevron-down'}></i>
+                    {/if}
                 </div>
-            {/each}
-            <div class="header-cell" style="border-right: unset;">
+                <div class="header-cell-divider" class:resizer={col.resizable} aria-hidden="true"
+                     on:mousedown={handleResizeMouseDown(col)}></div>
+
             </div>
-        </div>
+        {/each}
     </div>
-    {#if actionsColumn}
-        <div class="header-actions" style="width: {actionsColumn.width}px">
-            <div>
-                <span>{actionsColumn.title ?? ''}</span>
-            </div>
-
-        </div>
-    {/if}
 </div>
-
-<style>
-
-
-</style>

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

@@ -1,7 +1,5 @@
-import type IndicatorColumn from "../lib/IndicatorColumn";
-import type ActionsColumn from "../lib/ActionsColumn";
-import type { CompareFunction } from "../lib/CompareFunction";
-import { type SelectionEventHandler, SelectionMode, type TableEventHandler } from "../UniDataTable";
+import { OrderDirection } from "../lib/OrderDirection";
+import { type 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> & {
@@ -17,16 +15,14 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const TableHeaderPanel: $$__sveltets_2_IsomorphicComponent<{
-    actionsColumn: ActionsColumn | null;
-    indicatorColumn: IndicatorColumn;
     scrollLeft?: number;
-    handleToggleSelectAll: SelectionEventHandler;
     handleWidthChange: TableEventHandler;
-    sortData: (compareFun: CompareFunction, descending: boolean) => void;
     dataCols: Array<any>;
-    frozenCols?: Array<DataColumn>;
-    selectionMode: SelectionMode;
     width?: number;
+    hasWhitespace?: boolean;
+    handleCellClick: (col: DataColumn) => any;
+    orderColumn: DataColumn;
+    orderDirection: OrderDirection;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/data-table/parts/TableRow.d.ts

@@ -1,14 +1,4 @@
 export default class TableRow {
-    private _expand;
-    private _height;
     readonly data: any;
-    private _isBusy;
-    selected: boolean;
     constructor(data: any);
-    get height(): number;
-    set height(value: number);
-    get expand(): boolean;
-    set expand(value: boolean);
-    get isBusy(): boolean;
-    set isBusy(value: boolean);
 }

package/dist/data-table/parts/TableRow.js

@@ -1,35 +1,6 @@
 export default class TableRow {
-    _expand = false;
-    _height = 0;
     data;
-    _isBusy = false;
-    selected = false;
     constructor(data) {
         this.data = data;
     }
-    get height() {
-        return this._height;
-    }
-    set height(value) {
-        this._height = value;
-    }
-    get expand() {
-        return this._expand;
-    }
-    set expand(value) {
-        this._expand = value;
-    }
-    // get selected(): boolean {
-    //     return this._selected;
-    // }
-    //
-    // set selected(value: boolean) {
-    //     this._selected = value;
-    // }
-    get isBusy() {
-        return this._isBusy;
-    }
-    set isBusy(value) {
-        this._isBusy = value;
-    }
 }

package/dist/data-table/parts/TableRows.d.ts

@@ -1,9 +1,7 @@
-import type { CompareFunction } from "../lib/CompareFunction";
 import TableRow from "./TableRow";
 export default class TableRows {
     private _rows;
     constructor();
     set data(list: Array<any>);
     get rows(): Array<TableRow>;
-    sort(compareFun: CompareFunction, descending: boolean): void;
 }

package/dist/data-table/parts/TableRows.js

@@ -10,6 +10,4 @@ export default class TableRows {
     get rows() {
         return this._rows;
     }
-    sort(compareFun, descending) {
-    }
 }

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

@@ -0,0 +1,3 @@
+<script lang="ts">
+
+</script>

package/dist/{list-box/ListViewItem.svelte.d.ts → data-table/parts/TreeRootCell.svelte.d.ts}

@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ListViewItem: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const TreeRootCell: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type ListViewItem = InstanceType<typeof ListViewItem>;
-export default ListViewItem;
+type TreeRootCell = InstanceType<typeof TreeRootCell>;
+export default TreeRootCell;

package/dist/date-picker/DatePicker.svelte

@@ -56,6 +56,11 @@
                 value = null;
                 textValue = '';
                 showPopup = false;
+            } else if (e.key == 'Tab') {
+                if (showPopup) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
             } else if (e.key == 'Escape') {
                 showPopup = false;
             } else {

package/dist/date-picker/DateTimePicker.svelte

@@ -28,7 +28,7 @@
     let textValue: string;
     let editor: any;
     let oldValue: Date = dateUtils.toDayjs(value)?.toDate();
-    let currentValue : dayjs.Dayjs;
+    let currentValue: dayjs.Dayjs;
 
     const dateFmts = {
         "H": "YYYY-MM-DD HH:mm",
@@ -64,6 +64,11 @@
         if (e.key == 'Backspace' || e.key == 'Delete') {
             value = null;
             showPopup = false;
+        } else if (e.key == 'Tab') {
+            if (showPopup) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
         } else if (e.key == 'Escape') {
             showPopup = false;
         }

package/dist/dialog/Dialog.svelte

@@ -4,7 +4,6 @@
     import type {DialogCloseConfirm} from "./DialogCloseConfirm";
     import ActionBar, {type ButtonActions} from "../action-bar";
     import i18n from "../i18nContext";
-    import type ButtonAction from "../action-bar/ButtonAction";
     import {onMount} from "svelte";
 
     export let title: string = null as unknown as string;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { DateContext } from "./base-calendar";
 import type CardAction from "./card/CardAction";
 import type { DialogCloseConfirm, IDialog } from './dialog';
-import { type IMessageBox, ModuleResult } from "./message-box";
+import { type IMessageBox, ModalResult } from "./message-box";
 import type { Toast } from "./toast";
 import type { Indicator } from "./indicator";
 import type { UnitOption } from "./unit-number-editor";
@@ -10,7 +10,7 @@ import type { FunFilter, LazyLoader, LoadResult } from "./list-box";
 import type { ActionsColumn, FormatCell, CellHint, IndicatorColumn, RowAction, GetRowActions, ActionFunction, DataColumn } from "./data-table";
 import type { ContextMenuItem, OnContextMenu, ActionCallback } from "./context-menu";
 import type { MouseClickHandler } from "./common/MouseClickHandler";
-export { DateContext, ModuleResult, DisplayMode };
+export { DateContext, ModalResult, DisplayMode };
 declare global {
     interface Window {
         Indicator: Indicator;

package/dist/index.js

@@ -1,4 +1,4 @@
 import { DateContext } from "./base-calendar";
-import { ModuleResult } from "./message-box";
+import { ModalResult } from "./message-box";
 import { DisplayMode } from "./common/DisplayMode.js";
-export { DateContext, ModuleResult, DisplayMode };
+export { DateContext, ModalResult, DisplayMode };

package/dist/list-box/index.d.ts

@@ -1,5 +1,4 @@
 import ListBox from "./ListBox.svelte";
-import type { FunFilter } from "./types";
-import type { LazyLoader, LoadResult } from "./types";
+import type { LazyLoader, LoadResult, FunFilter } from "./types";
 export default ListBox;
 export type { LazyLoader, FunFilter, LoadResult };

package/dist/message-box/IMessageBox.d.ts

@@ -4,7 +4,7 @@ export default interface IMessageBox {
     showInfo: ShowFun;
     showConfirm: ShowConfirmFun;
 }
-declare enum ModuleResult {
+declare enum ModalResult {
     MR_OK = 1,
     MR_CANCEL = 2,
     MR_CLOSE = 3
@@ -12,12 +12,12 @@ declare enum ModuleResult {
 declare const InfoButtons: {
     label: string;
     type: string;
-    result: ModuleResult;
+    result: ModalResult;
 }[];
 declare const ConfirmButtons: {
     label: string;
     type: string;
-    result: ModuleResult;
+    result: ModalResult;
 }[];
 declare const initialize: (showInfo: any, showConfirm: any) => void;
-export { initialize, ModuleResult, InfoButtons, ConfirmButtons };
+export { initialize, ModalResult, InfoButtons, ConfirmButtons };

package/dist/message-box/IMessageBox.js

@@ -1,17 +1,17 @@
 import i18n from "../i18nContext";
 ;
-var ModuleResult;
-(function (ModuleResult) {
-    ModuleResult[ModuleResult["MR_OK"] = 1] = "MR_OK";
-    ModuleResult[ModuleResult["MR_CANCEL"] = 2] = "MR_CANCEL";
-    ModuleResult[ModuleResult["MR_CLOSE"] = 3] = "MR_CLOSE";
-})(ModuleResult || (ModuleResult = {}));
+var ModalResult;
+(function (ModalResult) {
+    ModalResult[ModalResult["MR_OK"] = 1] = "MR_OK";
+    ModalResult[ModalResult["MR_CANCEL"] = 2] = "MR_CANCEL";
+    ModalResult[ModalResult["MR_CLOSE"] = 3] = "MR_CLOSE";
+})(ModalResult || (ModalResult = {}));
 const InfoButtons = [
-    { label: i18n.getText('uniface.btnClose', 'Close'), type: 'primary', result: ModuleResult.MR_OK }
+    { label: i18n.getText('uniface.btnClose', 'Close'), type: 'primary', result: ModalResult.MR_OK }
 ];
 const ConfirmButtons = [
-    { label: i18n.getText('uniface.btnCancel', 'Cancel'), type: 'default', result: ModuleResult.MR_CANCEL },
-    { label: i18n.getText('uniface.btnConfirm', 'OK'), type: 'primary', result: ModuleResult.MR_OK }
+    { label: i18n.getText('uniface.btnCancel', 'Cancel'), type: 'default', result: ModalResult.MR_CANCEL },
+    { label: i18n.getText('uniface.btnConfirm', 'OK'), type: 'primary', result: ModalResult.MR_OK }
 ];
 const initialize = (showInfo, showConfirm) => {
     window.MessageBox = {
@@ -19,4 +19,4 @@ const initialize = (showInfo, showConfirm) => {
         showConfirm
     };
 };
-export { initialize, ModuleResult, InfoButtons, ConfirmButtons };
+export { initialize, ModalResult, InfoButtons, ConfirmButtons };

package/dist/message-box/MessageBoxBoard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 
     import {onDestroy, onMount} from "svelte";
-    import {initialize, ConfirmButtons, ModuleResult} from "./IMessageBox";
+    import {initialize, ConfirmButtons, ModalResult} from "./IMessageBox";
     import Button from "../button";
     import {fade} from "svelte/transition";
     import utils from "../common/utils";
@@ -80,7 +80,7 @@
         startMove = false;
     }
 
-    const handleButtonClick = (mr: ModuleResult) => (e: MouseEvent) => {
+    const handleButtonClick = (mr: ModalResult) => (e: MouseEvent) => {
         if (resolve != null) {
             resolve(mr);
             resolve = null;
@@ -90,7 +90,7 @@
 
     const handleCloseClick = (e: MouseEvent) => {
         if (resolve != null) {
-            resolve(ModuleResult.MR_CANCEL);
+            resolve(ModalResult.MR_CANCEL);
             resolve = null;
             visible = false;
         }

package/dist/message-box/index.d.ts

@@ -1,5 +1,5 @@
 import MessageBoxBoard from "./MessageBoxBoard.svelte";
 import type IMessageBox from "./IMessageBox";
-import { ModuleResult } from "./IMessageBox";
+import { ModalResult } from "./IMessageBox";
 export default MessageBoxBoard;
-export { ModuleResult, type IMessageBox };
+export { ModalResult, type IMessageBox };

package/dist/message-box/index.js

@@ -1,4 +1,4 @@
 import MessageBoxBoard from "./MessageBoxBoard.svelte";
-import { ModuleResult } from "./IMessageBox";
+import { ModalResult } from "./IMessageBox";
 export default MessageBoxBoard;
-export { ModuleResult };
+export { ModalResult };

package/dist/number-range/NumberRange.svelte

@@ -11,6 +11,7 @@
     export let max: number | null = null;
     export let fromValue: number = null as unknown as number;
     export let toValue: number = null as unknown as number;
+    export let allowNegative: boolean = false;
 
     let className: string = '';
     let showActionIcon: boolean = true;
@@ -27,9 +28,9 @@
 </script>
 <CommonRangeEditor {compact} class="{className}" {style} {variant} {showActionIcon} clean={cleanValue}>
     <svelte:fragment slot="from">
-        <NumberInput bind:this={editor} style="width: 100%; text-align: center" placeholder="" {min} max={toValue} bind:value={fromValue}/>
+        <NumberInput bind:this={editor} style="width: 100%; text-align: center" {allowNegative} placeholder="" {min} max={toValue} bind:value={fromValue}/>
     </svelte:fragment>
     <svelte:fragment slot="to">
-        <NumberInput style="width: 100%; text-align: center" placeholder="" {max} min={fromValue} bind:value={toValue}/>
+        <NumberInput style="width: 100%; text-align: center" {allowNegative} placeholder="" {max} min={fromValue} bind:value={toValue}/>
     </svelte:fragment>
 </CommonRangeEditor>

package/dist/number-range/NumberRange.svelte.d.ts

@@ -20,6 +20,7 @@ declare const NumberRange: $$__sveltets_2_IsomorphicComponent<{
     max?: number | null;
     fromValue?: number;
     toValue?: number;
+    allowNegative?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {

package/dist/options-multi-select/OptionsMultiSelect.svelte

@@ -19,6 +19,7 @@
     export let keyField: string = "code";
     export let textField: string = "text";
     export let placeholder: string = '';
+    export let emptyText: string = '';
     export let disableOptions: Array<string> = [];
     export let hideOptions: Array<string> = [];
     export let displayMode: DisplayMode = DisplayMode.Edit;
@@ -43,7 +44,9 @@
         } else {
             removeSelectCode(key);
         }
-        onChange?.(selectedList)
+        onChange?.(selectedList);
+        editor.focus();
+
     }
 
     const getOptionItem = (code: string) => {
@@ -76,6 +79,12 @@
         e.preventDefault();
     }
 
+    const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key=='Tab') {
+            showPopup = false;
+        }
+    }
+
     const cleanData = () => {
         value = '';
         onChange?.([])
@@ -87,21 +96,28 @@
     $: mh = `height: ${menu$height > 0 ? menu$height + 'px' : 'auto'}`;
     $: textValue = generateTextValue(selectedList);
 
+    let editor: any;
+
+    $: if (showPopup) {
+        editor.focus();
+    }
+
 </script>
 
 <CommonPicker {displayMode} {variant} {style} {compact} className="multiple" dropDownIcon="uniface-icon-chevron-down"
               bind:showPopup canClean={value!=null} autoFit clean={cleanData} {textValue} {readonly} {disabled}>
 
     <div class="option-field" aria-hidden="true" on:click={()=>{showPopup = true}}>
+        <input bind:this={editor} style="position: absolute; left: 1px; width: 1px" on:keydown={handleKeyDown}/>
         <div style="width: 100%; overflow: hidden; display: flex; flex-direction: row; gap: 6px">
             {#if selectedList.length > 0 }
                 {#each selectedList as code}
                     <Tag style="flex-shrink: 0" color={tagColor} variant={tagVariant} text={getOptionItem(code)}
                          removable={!readonly && !disabled} removeHandler={removeOption(code)}/>
                 {/each}
-            {:else if placeholder != null}
+            {:else if emptyText != null || placeholder != null}
                 <div class:readonly={readonly || disabled}>
-                    <span style="color: #7f7f7f">{placeholder}</span>
+                    <span>{emptyText ?? placeholder}</span>
                 </div>
             {/if}
         </div>

package/dist/options-multi-select/OptionsMultiSelect.svelte.d.ts

@@ -26,6 +26,7 @@ declare const OptionsMultiSelect: $$__sveltets_2_IsomorphicComponent<{
     keyField?: string;
     textField?: string;
     placeholder?: string;
+    emptyText?: string;
     disableOptions?: Array<string>;
     hideOptions?: Array<string>;
     displayMode?: DisplayMode;

package/dist/options-select/OptionsSelect.svelte

@@ -66,13 +66,19 @@
         editor.focus();
     }
 
+    const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key=='Tab') {
+            showPopup = false;
+        }
+    }
+
 </script>
 
 <CommonPicker {displayMode} {variant} {style} {compact} dropDownIcon="uniface-icon-chevron-down"
               bind:showPopup canClean={!mandatory && value!=null} autoFit clean={cleanData} {textValue} {readonly} {disabled}>
 
-    <input style="width: 100%" bind:this={editor} on:click={openPopup} {placeholder} {readonly}
-           class="text-editor" bind:value={textValue} on:blur on:focus/>
+    <input style="width: 100%" bind:this={editor} on:click={openPopup} {placeholder} readonly
+           class="text-editor" bind:value={textValue} on:blur on:focus on:keydown={handleKeyDown}/>
 
     <div class="options-popover" style={mh} slot="popup-panel">
         {#each options as op}

package/dist/pagination-panel/PaginationPanel.svelte

@@ -13,7 +13,7 @@
     export let big: boolean = false;
     export let rowsSet: Array<number> = [25, 50, 100];
     export let total: number = null as unknown as number;
-    export let generateInfo: GenerateTotalInfo;
+    export let generateInfo: GenerateTotalInfo | null = null;
     export let rowCount: number = 25;
     export let rowCountLabel: string = 'Rows/Page';
     export let align: 'left' | 'right' | '' = '';

package/dist/pagination-panel/PaginationPanel.svelte.d.ts

@@ -22,7 +22,7 @@ declare const PaginationPanel: $$__sveltets_2_IsomorphicComponent<{
     big?: boolean;
     rowsSet?: Array<number>;
     total?: number;
-    generateInfo: GenerateTotalInfo;
+    generateInfo?: GenerateTotalInfo | null;
     rowCount?: number;
     rowCountLabel?: string;
     align?: "left" | "right" | "";

package/dist/split/Split.svelte

@@ -4,6 +4,8 @@
     export let width: number = 2;
     export let bindingPanel: any = null;
 
+    export let reverse: boolean = false;
+
     let fixed: boolean = true;
 
     let style: string;
@@ -18,24 +20,34 @@
             isDragging = true;
             document.addEventListener("mousemove", onDrag);
             document.addEventListener("mouseup", stopDrag);
+            document.body.style.cursor = direction == "horizontal" ? 'row-resize' : 'col-resize'
         } else {
             event.preventDefault();
             event.stopPropagation();
         }
     }
 
+    const calculateHeight = (event: MouseEvent) => {
+        reverse ? Math.max(5, bindingPanel.clientHeight - event.movementY) : Math.max(5, bindingPanel.clientHeight + event.movementY)
+    }
+
+    const calculateWidth = (event: MouseEvent) => {
+        return reverse ? Math.max(5, bindingPanel.clientWidth - event.movementX) : Math.max(5, bindingPanel.clientWidth + event.movementX)
+    }
+
     const onDrag = (event: MouseEvent) => {
         if (isDragging && bindingPanel) {
             if (direction === "horizontal") {
-                bindingPanel.style.height = `${Math.max(5, event.movementY + bindingPanel.clientHeight)}px`;
+                bindingPanel.style.height = `${calculateHeight(event)}px`;
             } else {
-                bindingPanel.style.width = `${Math.max(5, event.movementX + bindingPanel.clientWidth)}px`;
+                bindingPanel.style.width = `${calculateWidth(event)}px`;
             }
         }
     }
 
     const stopDrag = () => {
         isDragging = false;
+        document.body.style.cursor = 'default';
         document.removeEventListener("mousemove", onDrag);
         document.removeEventListener("mouseup", stopDrag);
     }

package/dist/split/Split.svelte.d.ts

@@ -15,6 +15,7 @@ declare const Split: $$__sveltets_2_IsomorphicComponent<{
     direction?: "horizontal" | "vertical";
     width?: number;
     bindingPanel?: any;
+    reverse?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;