@isoftdata/svelte-table - npm Package Compare versions

Comparing version 2.12.5 to 2.13.0

dist/Table.svelte

@@ -216,2 +216,4 @@ <script
 
+	const useContextMenu = $derived(columnHidingEnabled || columnResizingEnabled || columnPinningEnabled)
+
 	// Do the initial sort if they specified a default sort column
@@ -626,9 +628,8 @@ // svelte-ignore state_referenced_locally
 
-	function contextMenuHandler(event: MouseEvent, column: string) {
-		if ((columnHidingEnabled || columnResizingEnabled || columnPinningEnabled) && !event.ctrlKey) {
+	async function contextMenuHandler(event: MouseEvent, column: string): Promise<void> {
+		if (useContextMenu && !event.ctrlKey) {
 			event.preventDefault()
 			contextMenuColumn = columnInfo.current[column]
-			return contextMenu?.open(event, `col-${tableId}-${CSS.escape(column)}`)
+			return await contextMenu?.open(event, `col-${tableId}-${column}`)
 		}
-		return Promise.resolve()
 	}
@@ -899,36 +900,66 @@ // #endregion
 					>
-						<span
-							class="text-truncate d-inline-block"
-							style="vertical-align: bottom;"
-							style:max-width={doEllipsis && isSortColumn ? 'calc(100% - 20px)' : '100%'}
+						<div
+							class="d-flex"
+							style="gap: 0.25rem"
 						>
-							{@render columnNameAndIcon(column)}
-						</span>
-						<!-- I wonder how to make everything after this move to the right...? -->
-						{#if isSortColumn}
-							{sortDirection === 'ASC' ? '▲' : '▼'}
-						{/if}
-						{#if column.pinned}
-							<Icon
-								class=""
-								icon="thumbtack-angle"
-							/>
-						{/if}
-						{#if columnResizingEnabled && visibleColumns.length - 1 !== index}
-							<!-- I think setting the role and aria-orientation attributes is the best we can do here -->
-							<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-							<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-							<div
-								id="col-resizer-{tableId}-{column.property}"
-								tabindex={0}
-								role="separator"
-								aria-orientation="horizontal"
-								class="resizer"
-								style="height: 100%;"
-								onmousedown={e => onColumnMouseDown(e, column)}
+							<span
+								class="text-truncate d-inline-block"
+								style="vertical-align: bottom;"
+								style:max-width={doEllipsis && isSortColumn ? 'calc(100% - 20px)' : '100%'}
 							>
-								&nbsp;
-							</div>
-						{/if}
-					</th>
+								{@render columnNameAndIcon(column)}
+							</span>
+							{#if isSortColumn}
+								<Icon
+									size="xs"
+									class="align-self-center"
+									icon={sortDirection === 'ASC' ? 'sort-up' : 'sort-down'}
+								></Icon>
+							{/if}
+							{#if column.pinned}
+								<Icon
+									size="xs"
+									class="align-self-center"
+									icon="thumbtack-angle"
+									title={translate('common:tablePinColumnIconTitle', 'This column has been pinned')}
+								/>
+							{/if}
+
+							<!-- Right align everything after this -->
+							<div class="flex-grow-1"></div>
+
+							{#if useContextMenu}
+								<button
+									class="btn btn-th"
+									title={translate('common:tableContextMenuButtonTitle', 'Open the context menu for this column')}
+									onclick={event => {
+										event.stopPropagation()
+										contextMenuColumn = column
+										contextMenu?.toggle(event, `col-${tableId}-${column.property}`)
+									}}
+								>
+									<Icon
+										size="xs"
+										icon="ellipsis-vertical"
+									></Icon>
+								</button>
+							{/if}
+							{#if columnResizingEnabled && visibleColumns.length - 1 !== index}
+								<!-- I think setting the role and aria-orientation attributes is the best we can do here -->
+								<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+								<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+								<div
+									id="col-resizer-{tableId}-{column.property}"
+									tabindex={0}
+									role="separator"
+									aria-orientation="horizontal"
+									class="resizer"
+									style="height: 100%;"
+									onmousedown={e => onColumnMouseDown(e, column)}
+								>
+									&nbsp;
+								</div>
+							{/if}
+						</div></th
+					>
 				{/each}
@@ -1011,3 +1042,4 @@ </tr>
 <ContextMenu
-	id="hide-column-context-menu"
+	id="{tableId}-context-menu"
+	placement="bottom-end"
 	bind:this={contextMenu}
@@ -1224,2 +1256,18 @@ >
 	}
+
+	.btn.btn-th {
+		padding: 0px;
+		/* Adjust height/padding so it doesn't increase header height in BS5. (BS4 headers are already taller) */
+		line-height: 22px;
+		vertical-align: baseline;
+		/* Fallbacks are the same value as the BS5 custom property, for BS4 compat */
+		--bs-btn-hover-bg: var(--bs-secondary-bg, #e9ecef);
+		--bs-btn-hover-border-color: var(--bs-secondary-border-subtle, #c4c8cb);
+	}
+
+	/* Redeclare these for BS4 compat */
+	.btn.btn-th:hover {
+		background-color: var(--bs-btn-hover-bg);
+		border-color: var(--bs-btn-hover-border-color);
+	}
 </style>

package.json

 {
   "name": "@isoftdata/svelte-table",
-  "version": "2.12.5",
+  "version": "2.13.0",
   "exports": {
@@ -51,3 +51,3 @@ ".": {
     "@isoftdata/svelte-button": "^2.2.2",
-    "@isoftdata/svelte-context-menu": "^2.1.0",
+    "@isoftdata/svelte-context-menu": "^2.3.4",
     "@isoftdata/svelte-icon": "^2.1.0",
@@ -54,0 +54,0 @@ "@isoftdata/svelte-input": "^2.1.1",

No alert changes

Improved metrics

Total package byte prevSize

139206

1.1%

Dependency changes

• Updated

  @isoftdata/svelte-context-menu@^2.3.4