@neovici/cosmoz-omnitable 12.2.1 → 12.4.0

package/cosmoz-omnitable-header-row.js

@@ -2,6 +2,7 @@ import { html, component } from 'haunted';
 import { repeat } from 'lit-html/directives/repeat.js';
 import './lib/cosmoz-omnitable-resize-nub';
 import { render } from './lib/settings/cosmoz-omnitable-sort-group';
+import { when } from 'lit-html/directives/when.js';
 
 const /* eslint-disable-next-line max-lines-per-function */
 	renderHeaderRow = ({
@@ -53,15 +54,16 @@ const /* eslint-disable-next-line max-lines-per-function */
 				></cosmoz-omnitable-resize-nub>`,
 			]
 		),
-	HeaderRow = ({ columns, settingsConfig, ...thru }) => [
+	HeaderRow = ({ columns, settingsConfig, hideSelectAll, ...thru }) => [
 		columns &&
 			renderHeaderRow({
 				columns,
 				...thru,
 			}),
-		html`<cosmoz-omnitable-settings
-			.config=${settingsConfig}
-		></cosmoz-omnitable-settings>`,
+		html`${when(!hideSelectAll, () => html`
+			<cosmoz-omnitable-settings
+			.config=${settingsConfig}>
+			</cosmoz-omnitable-settings>`)}`,
 	];
 
 customElements.define(

package/cosmoz-omnitable.js

@@ -49,7 +49,7 @@ const Omnitable = (host) => {
 customElements.define(
 	'cosmoz-omnitable',
 	component(Omnitable, {
-		observedAttributes: ['hash-param', 'sort-on', 'group-on'],
+		observedAttributes: ['hash-param', 'sort-on', 'group-on', 'hide-select-all'],
 	})
 );
 

package/lib/render-header.js

@@ -1,4 +1,5 @@
 import { html } from 'lit-html';
+import { when } from 'lit-html/directives/when.js';
 
 export const renderHeader = ({
     allSelected,
@@ -11,16 +12,29 @@ export const renderHeader = ({
 	groupOnColumn,
 	setFilterState,
 	settingsConfig,
+	hideSelectAll
 }) => {
 	return html` <sort-and-group-provider .value=${sortAndGroup}>
 		<div class="header" id="header">
-			<input
-				class="checkbox all"
-				type="checkbox"
-				.checked=${allSelected}
-				@input=${onAllCheckboxChange}
-				?disabled=${!dataIsValid}
-			/>
+			${when(
+				!hideSelectAll,
+				() => html`<input
+					class="checkbox all"
+					type="checkbox"
+					.checked=${allSelected}
+					@input=${onAllCheckboxChange}
+					?disabled=${!dataIsValid}
+				/>`
+			)}
+			${when(
+				hideSelectAll,
+				() => html`
+					<cosmoz-omnitable-settings
+						.newLayout="${true}"
+						.config=${settingsConfig}
+					></cosmoz-omnitable-settings>`
+			)}
+
 			<cosmoz-omnitable-header-row
 				.data=${data}
 				.columns=${columns}
@@ -28,6 +42,7 @@ export const renderHeader = ({
 				.groupOnColumn=${groupOnColumn}
 				.setFilterState=${setFilterState}
 				.settingsConfig=${settingsConfig}
+				.hideSelectAll=${hideSelectAll}
 			></cosmoz-omnitable-header-row>
 		</div>
 	</sort-and-group-provider>`;

package/lib/settings/cosmoz-omnitable-settings.js

@@ -1,5 +1,4 @@
 import { html, component } from 'haunted';
-import { nothing } from 'lit-html';
 import { _ } from '@neovici/cosmoz-i18next';
 import { isEmpty } from '@neovici/cosmoz-utils/template';
 import { defaultPlacement } from '@neovici/cosmoz-dropdown';
@@ -8,6 +7,7 @@ import { sort, group } from './cosmoz-omnitable-sort-group';
 import style, { dropdown as dropdownStyle } from './style.css';
 import useSettingsUi from './use-settings-ui';
 import { close, pull, arrow } from '../icons';
+import { when } from 'lit-html/directives/when.js';
 
 /* eslint-disable max-lines-per-function */
 const placement = ['bottom-right', ...defaultPlacement],
@@ -130,7 +130,7 @@ const placement = ['bottom-right', ...defaultPlacement],
 				</div>`,
 		].filter(Boolean);
 	},
-	Settings = ({ config }) => html`
+	Settings = ({ config, newLayout }) => html`
 		<style>
 			${dropdownStyle}
 		</style>
@@ -138,12 +138,17 @@ const placement = ['bottom-right', ...defaultPlacement],
 			.render=${() => html`<cosmoz-omnitable-settings-ui
 				.config=${config}
 			></cosmoz-omnitable-settings-ui>`}
-			.placement=${placement}
+			.placement=${newLayout ? ['bottom-left', ...defaultPlacement] : placement}
 		>
-			<svg viewBox="0 0 24 24" width="24" slot="button" fill="currentColor">
-				<path d="M10 18h5V5h-5v13zm-6 0h5V5H4v13zM16 5v13h5V5h-5z"></path>
-			</svg>
-			${config?.badge ? html`<div class="badge" slot="button"></div>` : nothing}
+			${newLayout ?
+				html`<div class="headerDots" slot="button">...</div>` :
+				html`
+					<svg viewBox="0 0 24 24" width="24" slot="button" fill="currentColor">
+						<path d="M10 18h5V5h-5v13zm-6 0h5V5H4v13zM16 5v13h5V5h-5z"></path>
+					</svg>`
+			}
+
+			${when(config?.badge, () => html`<div class="badge" slot="button"></div>`)}
 		</cosmoz-dropdown>
 	`;
 customElements.define('cosmoz-omnitable-settings', component(Settings));

package/lib/settings/style.css.js

@@ -196,7 +196,6 @@ export const dropdown = css`
 		outline: none;
 	}
 	cosmoz-dropdown::part(button) {
-		--cosmoz-dropdown-button-size: 24px;
 		padding: 0;
 		background: transparent;
 		color: inherit;
@@ -216,4 +215,15 @@ export const dropdown = css`
 		height: 8px;
 		border-radius: 100%;
 	}
+	.headerDots {
+		align-items: center;
+		color: var(--cosmoz-input-color);
+		display: flex;
+		font-size: 20px;
+		height: 42px;
+		justify-content: center;
+		margin-left: 12px;
+		min-width: 30px;
+		transform: rotate(90deg);
+	}
 `;

package/lib/use-omnitable.js

@@ -69,6 +69,7 @@ export const useOmnitable = (host) => {
 			filterFunctions,
 			settingS,
 			setFilterState,
+			hideSelectAll: host.hideSelectAll
 		}),
 		list: useList({
 			host,

package/lib/use-public-interface.js

@@ -48,6 +48,12 @@ export const usePublicInterface = ({ host, visibleData, ...api }) => {
 		selectItem = (item) => {
 			host.shadowRoot.querySelector('#groupedList').select(item);
 		},
+		selectAll = () => {
+			host.shadowRoot.querySelector('#groupedList').selectAll();
+		},
+		deselectAll = () => {
+			host.shadowRoot.querySelector('#groupedList').deselectAll();
+		},
 		deselectItem = (item) => {
 			host.shadowRoot.querySelector('#groupedList').deselect(item);
 		},
@@ -82,7 +88,9 @@ export const usePublicInterface = ({ host, visibleData, ...api }) => {
 			replaceItem,
 			replaceItemAtIndex,
 			selectItem,
+			selectAll,
 			deselectItem,
+			deselectAll,
 			isItemSelected,
 		},
 		[
@@ -91,7 +99,9 @@ export const usePublicInterface = ({ host, visibleData, ...api }) => {
 			replaceItem,
 			replaceItemAtIndex,
 			selectItem,
+			selectAll,
 			deselectItem,
+			deselectAll,
 			isItemSelected,
 		]
 	);

package/package.json

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