@bitforgehq/ui 0.3.2 → 0.3.3

package/fesm2022/bitforgehq-ui.mjs

@@ -44,6 +44,7 @@ const BF_DEFAULT_LABELS = {
 	notifications: "Notifications",
 	tableSelectAll: "Select all rows",
 	tableSortBy: "Sort by",
+	tableSortNone: "Not sorted",
 	tableSortAscending: (column) => `${column}, ascending`,
 	tableSortDescending: (column) => `${column}, descending`,
 	theme: "Theme",
@@ -145,6 +146,7 @@ function mergeLabels(parent, o) {
 		notifications: o.notifications ?? parent.notifications,
 		tableSelectAll: o.tableSelectAll ?? parent.tableSelectAll,
 		tableSortBy: o.tableSortBy ?? parent.tableSortBy,
+		tableSortNone: o.tableSortNone ?? parent.tableSortNone,
 		tableSortAscending: o.tableSortAscending ?? parent.tableSortAscending,
 		tableSortDescending: o.tableSortDescending ?? parent.tableSortDescending,
 		theme: o.theme ?? parent.theme,
@@ -9306,9 +9308,10 @@ const STACK_FIRST_CELL = {
 };
 const STACK_CELL = {
 	never: "",
-	narrow: "@max-xl:col-span-full @max-xl:flex @max-xl:h-auto @max-xl:items-baseline @max-xl:justify-between @max-xl:gap-3 @max-xl:px-0 @max-xl:py-1 @max-xl:text-end @max-xl:before:shrink-0 @max-xl:before:text-start @max-xl:before:text-label-xs @max-xl:before:font-bold @max-xl:before:text-text-muted @max-xl:before:content-[attr(data-label)_/_\"\"]",
-	coarse: "pointer-coarse:col-span-full pointer-coarse:flex pointer-coarse:h-auto pointer-coarse:items-baseline pointer-coarse:justify-between pointer-coarse:gap-3 pointer-coarse:px-0 pointer-coarse:py-1 pointer-coarse:text-end pointer-coarse:before:shrink-0 pointer-coarse:before:text-start pointer-coarse:before:text-label-xs pointer-coarse:before:font-bold pointer-coarse:before:text-text-muted pointer-coarse:before:content-[attr(data-label)_/_\"\"]"
+	narrow: "@max-xl:col-span-full @max-xl:flex @max-xl:h-auto @max-xl:items-baseline @max-xl:justify-between @max-xl:gap-3 @max-xl:px-0 @max-xl:py-1 @max-xl:text-end @max-xl:before:shrink-0 @max-xl:before:text-start @max-xl:before:text-label-xs @max-xl:before:font-bold @max-xl:before:text-text-muted @max-xl:before:content-data-label",
+	coarse: "pointer-coarse:col-span-full pointer-coarse:flex pointer-coarse:h-auto pointer-coarse:items-baseline pointer-coarse:justify-between pointer-coarse:gap-3 pointer-coarse:px-0 pointer-coarse:py-1 pointer-coarse:text-end pointer-coarse:before:shrink-0 pointer-coarse:before:text-start pointer-coarse:before:text-label-xs pointer-coarse:before:font-bold pointer-coarse:before:text-text-muted pointer-coarse:before:content-data-label"
 };
+const SORT_NONE = "";
 const STACK_EMPTY = {
 	never: "",
 	narrow: "@max-xl:block",
@@ -9357,16 +9360,23 @@ var BfTableComponent = class BfTableComponent {
 	}, ...ngDevMode ? [{ debugName: "someSelected" }] : 	/* istanbul ignore next */ []);
 	columnCount = computed(() => this.columns().length + (this.selectable() ? 1 : 0), ...ngDevMode ? [{ debugName: "columnCount" }] : 	/* istanbul ignore next */ []);
 	stacks = computed(() => this.stack() !== "never", ...ngDevMode ? [{ debugName: "stacks" }] : 	/* istanbul ignore next */ []);
-	sortOptions = computed(() => this.columns().filter((column) => column.sortable).flatMap((column) => [{
-		value: `${column.key}:ascending`,
-		label: this.labels.tableSortAscending(column.label)
-	}, {
-		value: `${column.key}:descending`,
-		label: this.labels.tableSortDescending(column.label)
-	}]), ...ngDevMode ? [{ debugName: "sortOptions" }] : 	/* istanbul ignore next */ []);
+	sortOptions = computed(() => {
+		const sortable = this.columns().filter((column) => column.sortable);
+		if (sortable.length === 0) return [];
+		return [{
+			value: SORT_NONE,
+			label: this.labels.tableSortNone
+		}, ...sortable.flatMap((column) => [{
+			value: `${column.key}:ascending`,
+			label: this.labels.tableSortAscending(column.label)
+		}, {
+			value: `${column.key}:descending`,
+			label: this.labels.tableSortDescending(column.label)
+		}])];
+	}, ...ngDevMode ? [{ debugName: "sortOptions" }] : 	/* istanbul ignore next */ []);
 	sortValue = computed(() => {
 		const sort = this.sort();
-		return sort ? `${sort.column}:${sort.direction}` : null;
+		return sort ? `${sort.column}:${sort.direction}` : SORT_NONE;
 	}, ...ngDevMode ? [{ debugName: "sortValue" }] : 	/* istanbul ignore next */ []);
 	hostClasses = computed(() => STACK_HOST[this.stack()], ...ngDevMode ? [{ debugName: "hostClasses" }] : 	/* istanbul ignore next */ []);
 	stackBarClasses = computed(() => `${STACK_BAR[this.stack()]} flex-wrap items-end justify-between gap-x-4 gap-y-2 pb-3`, ...ngDevMode ? [{ debugName: "stackBarClasses" }] : 	/* istanbul ignore next */ []);
@@ -9425,6 +9435,10 @@ var BfTableComponent = class BfTableComponent {
 		});
 	}
 	sortFromOption(value) {
+		if (value === SORT_NONE) {
+			this.sort.set(null);
+			return;
+		}
 		const at = value.lastIndexOf(":");
 		const direction = value.slice(at + 1);
 		if (at > 0 && (direction === "ascending" || direction === "descending")) this.sort.set({
@@ -11277,12 +11291,14 @@ var BfAppFrameComponent = class BfAppFrameComponent {
           headerClasses()
         }}"
       >
-        <div data-brand class="flex min-w-0 items-center empty:hidden">
-          <ng-content select="[bfSlot=brand]" />
-        </div>
+        <!-- The menu at the inline start, then the brand: the top app bar convention, and the
+             menu comes first in the tab order too. -->
         <div data-menu class="flex items-center empty:hidden">
           <ng-content select="[bfSlot=menu]" />
         </div>
+        <div data-brand class="flex min-w-0 items-center empty:hidden">
+          <ng-content select="[bfSlot=brand]" />
+        </div>
         <div data-actions class="ms-auto flex items-center gap-2 empty:hidden">
           <ng-content select="[bfSlot=actions]" />
         </div>
@@ -11340,12 +11356,14 @@ i0.ɵɵngDeclareClassMetadata({
           headerClasses()
         }}"
       >
-        <div data-brand class="flex min-w-0 items-center empty:hidden">
-          <ng-content select="[bfSlot=brand]" />
-        </div>
+        <!-- The menu at the inline start, then the brand: the top app bar convention, and the
+             menu comes first in the tab order too. -->
         <div data-menu class="flex items-center empty:hidden">
           <ng-content select="[bfSlot=menu]" />
         </div>
+        <div data-brand class="flex min-w-0 items-center empty:hidden">
+          <ng-content select="[bfSlot=brand]" />
+        </div>
         <div data-actions class="ms-auto flex items-center gap-2 empty:hidden">
           <ng-content select="[bfSlot=actions]" />
         </div>