@neovici/cosmoz-omnitable 11.1.0 → 12.0.0

package/cosmoz-omnitable-styles.js

@@ -285,52 +285,6 @@ export default `<style>
 		left: 0;
 	}
 
-	.footer {
-		display: flex;
-		align-items: center;
-		background-color: var(--cosmoz-omnitable-footer-bg-color, #f5f5f5);
-		height: 64px;
-		padding: 0 24px;
-	}
-
-	.footer-controls {
-		display: flex;
-		align-items: center;
-		flex: auto;
-		isolation: isolate;
-	}
-
-	.footer-control {
-		display: flex;
-		align-items: center;
-	}
-	.footer-control + .footer-control {
-		margin-left: 16px;
-	}
-	.footer-control::part(input-label) {
-		opacity: 0.7;
-	}
-	.footer-control::part(input-line) {
-		margin-top: 1px;
-	}
-	.footer-control::part(chip) {
-	  background-color: #CBCFDB;
-	}
-	.footer-control::part(chip-clear) {
-		background-color: #81899B;
-		fill: #CBCFDB;
-	}
-
-	.footer-tableStats {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-end;
-		white-space: nowrap;
-	}
-
-	.footer-tableStats :first-child {
-		margin-bottom: 5px;
-	}
 
 	.item-row-wrapper {
 		display: block;
@@ -428,7 +382,6 @@ export default `<style>
 	cosmoz-bottom-bar {
 		background-color: var(--cosmoz-omnitable-bottom-bar-color, #5f5a92);
 		overflow: hidden;
-		position: absolute;
 	}
 	cosmoz-bottom-bar::part(bar) {
 		padding: 0 24px;

package/cosmoz-omnitable.js

@@ -26,7 +26,6 @@ import { useOmnitable } from './lib/use-omnitable';
 import { saveAsCsvAction } from './lib/save-as-csv-action';
 import { saveAsXlsxAction } from './lib/save-as-xlsx-action';
 import { defaultPlacement } from '@neovici/cosmoz-dropdown';
-import { without } from '@neovici/cosmoz-utils/array';
 import { indexSymbol } from './lib/utils';
 
 /**
@@ -108,117 +107,48 @@ class Omnitable extends hauntedPolymer(useOmnitable)(
 						></cosmoz-grouped-list>
 					</div>
 				</div>
-				<div class="footer">
-					<div class="footer-controls" part="footer-controls">
-						<cosmoz-autocomplete
-							label="[[ _('Group on', t) ]] [[ _computeSortDirection(groupOnDescending, t) ]]"
-							placeholder="[[ _('No grouping', t) ]]"
-							source="[[ _onCompleteValues(columns, 'groupOn', groupOnColumn) ]]"
-							value="[[ groupOnColumn ]]"
-							limit="1"
-							text-property="title"
-							always-float-label
-							item-height="48"
-							item-limit="8"
-							class="footer-control"
-							on-change="[[ _onCompleteChange('groupOn') ]]"
-							on-select="[[ _onCompleteSelect ]]"
-							default-index="-1"
-							show-single
-						>
-							<svg
-								slot="suffix"
-								viewBox="0 0 24 24"
-								preserveAspectRatio="xMidYMid meet"
-								focusable="false"
-								width="24"
-								fill="currentColor"
-							>
-								<path d="M7 10l5 5 5-5z"></path>
-							</svg>
-						</cosmoz-autocomplete>
-						<cosmoz-autocomplete
-							label="[[ _('Sort on', t) ]] [[ _computeSortDirection(descending, t) ]]"
-							placeholder="[[ _('No sorting', t) ]]"
-							source="[[ _onCompleteValues(columns, 'sortOn', sortOnColumn) ]]"
-							value="[[ sortOnColumn ]]"
-							limit="1"
-							text-property="title"
-							always-float-label
-							item-height="48"
-							item-limit="8"
-							class="footer-control"
-							on-change="[[ _onCompleteChange('sortOn') ]]"
-							on-select="[[ _onCompleteSelect ]]"
-							default-index="-1"
-							show-single
-						>
-							<svg
-								slot="suffix"
-								viewBox="0 0 24 24"
-								preserveAspectRatio="xMidYMid meet"
-								focusable="false"
-								width="24"
-								fill="currentColor"
-							>
-								<path d="M7 10l5 5 5-5z"></path>
-							</svg>
-						</cosmoz-autocomplete>
-						<slot id="controlsSlot" name="controls"></slot>
-					</div>
-					<div class="footer-tableStats">
-						<span
-							>[[ ngettext('{0} group', '{0} groups', groupsCount, t) ]]</span
-						>
-						<span
-							>[[ _renderRowStats(numProcessedItems, totalAvailable, t) ]]</span
-						>
-					</div>
-					<cosmoz-bottom-bar
-						id="bottomBar"
-						class="footer-actionBar"
-						match-parent
-						on-action="_onAction"
-						active$="[[ !isEmpty(selectedItems.length) ]]"
+				<cosmoz-bottom-bar
+					id="bottomBar"
+					on-action="_onAction"
+					active$="[[ !isEmpty(selectedItems.length) ]]"
+				>
+					<slot name="info" slot="info"
+						>[[ ngettext('{0} selected item', '{0} selected items',
+						selectedItems.length, t) ]]</slot
 					>
-						<slot name="info" slot="info"
-							>[[ ngettext('{0} selected item', '{0} selected items',
-							selectedItems.length, t) ]]</slot
+					<slot name="actions" id="actions"></slot>
+					<!-- These slots are needed by cosmoz-bottom-bar
+					as it might change the slot of the actions to distribute them in the menu -->
+					<slot name="bottom-bar-toolbar" slot="bottom-bar-toolbar"></slot>
+					<slot name="bottom-bar-menu" slot="bottom-bar-menu"></slot>
+					<cosmoz-dropdown-menu slot="extra" placement="[[ topPlacement ]]">
+						<svg
+							slot="button"
+							width="14"
+							height="18"
+							viewBox="0 0 14 18"
+							fill="none"
+							stroke="currentColor"
+							xmlns="http://www.w3.org/2000/svg"
 						>
-						<slot name="actions" id="actions"></slot>
-						<!-- These slots are needed by cosmoz-bottom-bar
-						as it might change the slot of the actions to distribute them in the menu -->
-						<slot name="bottom-bar-toolbar" slot="bottom-bar-toolbar"></slot>
-						<slot name="bottom-bar-menu" slot="bottom-bar-menu"></slot>
-						<cosmoz-dropdown-menu slot="extra" placement="[[ topPlacement ]]">
-							<svg
-								slot="button"
-								width="14"
-								height="18"
-								viewBox="0 0 14 18"
-								fill="none"
-								stroke="currentColor"
-								xmlns="http://www.w3.org/2000/svg"
-							>
-								<path
-									d="M1 8.5L7.00024 14.5L13 8.5"
-									stroke-width="2"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-								/>
-								<path d="M13 17L1 17" stroke-width="2" stroke-linecap="round" />
-								<path d="M7 1V13" stroke-width="2" stroke-linecap="round" />
-							</svg>
-							<button on-click="_saveAsCsvAction">
-								[[ _('Save as CSV', t) ]]
-							</button>
-							<button on-click="_saveAsXlsxAction">
-								[[ _('Save as XLSX', t) ]]
-							</button>
-							<slot name="download-menu"></slot>
-						</cosmoz-dropdown-menu>
-					</cosmoz-bottom-bar>
-				</div>
+							<path
+								d="M1 8.5L7.00024 14.5L13 8.5"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+							<path d="M13 17L1 17" stroke-width="2" stroke-linecap="round" />
+							<path d="M7 1V13" stroke-width="2" stroke-linecap="round" />
+						</svg>
+						<button on-click="_saveAsCsvAction">
+							[[ _('Save as CSV', t) ]]
+						</button>
+						<button on-click="_saveAsXlsxAction">
+							[[ _('Save as XLSX', t) ]]
+						</button>
+						<slot name="download-menu"></slot>
+					</cosmoz-dropdown-menu>
+				</cosmoz-bottom-bar>
 			</div>
 
 			<div id="columns">
@@ -440,11 +370,6 @@ class Omnitable extends hauntedPolymer(useOmnitable)(
 		return dataIsValid && visibleItemsLength < 1;
 	}
 
-	_computeSortDirection(descending) {
-		const direction = descending ? this._('Descending') : this._('Ascending');
-		return `(${direction})`;
-	}
-
 	_onKey(e) {
 		this._shiftKey = e.shiftKey;
 		this._ctrlKey = e.ctrlKey;
@@ -608,54 +533,6 @@ class Omnitable extends hauntedPolymer(useOmnitable)(
 		return this.$.groupedList.isItemSelected(item);
 	}
 
-	_renderRowStats(numRows, totalAvailable) {
-		if (Number.isInteger(totalAvailable) && totalAvailable > numRows) {
-			return this.ngettext(
-				'{1} / {0} row',
-				'{1} / {0} rows',
-				totalAvailable,
-				numRows
-			);
-		}
-		return this.ngettext('{0} row', '{0} rows', numRows);
-	}
-
-	_onCompleteValues(columns, type, value) {
-		return (
-			columns
-				?.filter?.((c) => c[type])
-				/* eslint-disable-next-line no-bitwise */
-				.sort((a, b) => ((b === value) >> 0) - ((a === value) >> 0))
-		);
-	}
-
-	_onCompleteSelect(newVal, { value, onChange, onText, limit }) {
-		onText('');
-		onChange([...without(newVal)(value), newVal].slice(-limit));
-	}
-
-	_onCompleteChange(type) {
-		return (val, close) => {
-			const value = (val[0] ?? val)?.name ?? '',
-				setter = type === 'groupOn' ? this.setGroupOn : this.setSortOn,
-				directionSetter =
-					type === 'groupOn' ? this.setGroupOnDescending : this.setDescending;
-
-			setter((oldValue) => {
-				if (value) {
-					directionSetter((oldDirection) =>
-						value === oldValue ? !oldDirection : false
-					);
-				} else {
-					directionSetter(null);
-				}
-				return value;
-			});
-
-			value && close(); /* eslint-disable-line no-unused-expressions */
-		};
-	}
-
 	onItemClick(e) {
 		const composedPath = e.composedPath(),
 			path = composedPath.slice(0, composedPath.indexOf(e.currentTarget));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-omnitable",
-	"version": "11.1.0",
+	"version": "12.0.0",
 	"description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
 	"keywords": [
 		"web-components"