@neovici/cosmoz-omnitable 8.0.0 → 8.1.0

package/cosmoz-omnitable-styles.js

@@ -281,11 +281,9 @@ export default `<style>
 	.footer {
 		display: flex;
 		align-items: center;
-		border-top: solid 1px #e8e8e8;
 		background-color: var(--cosmoz-omnitable-footer-bg-color, #f5f5f5);
-		min-height: 25px;
-		height: 63px;
-		margin-bottom: 1px; /* Chrome overflow rendering bug? When only component in a view */
+		height: 64px;
+		padding: 0 24px;
 	}
 
 	.footer-controls {
@@ -296,33 +294,43 @@ export default `<style>
 	}
 
 	.footer-control {
-		margin-left: 3%;
 		display: flex;
 		align-items: center;
 	}
+	.footer-control + .footer-control {
+		margin-left: 34px;
+	}
+	.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;
-		margin-right: 3%;
 	}
 
 	.footer-tableStats :first-child {
 		margin-bottom: 5px;
 	}
 
-	.footer-control-label {
-		margin-right: 10px;
-	}
-
 	.item-row-wrapper {
 		display: block;
 		width: 100%;
 	}
 
 	.itemRow {
-		border-bottom-color: #e2e2e2;
+		border-bottom-color: var(--cosmoz-omnitable-border-color, #e1e2e5);
 		border-bottom-width: 1px;
 		border-bottom-style: var(--cosmoz-omnitable-item-row-border-bottom-style, solid);
 		/* set a min-height for rows so that rows with empty values are visible */
@@ -333,7 +341,7 @@ export default `<style>
 	}
 
 	.itemRow[selected] {
-		background-color: rgb(195, 212, 248) !important;
+		background-color: var(--cosmoz-omnitable-selection-color, rgb(195, 212, 248)) !important;
 		@apply --cosmoz-omnitable-selected-row;
 	}
 
@@ -346,7 +354,7 @@ export default `<style>
 		flex-direction: column;
 		padding: 5px 4%;
 		line-height: 1.3em;
-		border-bottom: solid 1px #e2e2e2;
+		border-bottom: solid 1px var(--cosmoz-omnitable-border-color, #e1e2e5);
 		background-color: #fafafa;
 	}
 
@@ -358,10 +366,10 @@ export default `<style>
 	.groupRow {
 		display: flex;
 		align-items: center;
-		background-color: #efefef;
-		font-weight: 400;
-		color: #48515b;
-		border-bottom: solid 1px #d6d6d6;
+		background-color: #f5f6f9;;
+		font-weight: 700;
+		color: #101010;
+		border-bottom: 1px solid var(--cosmoz-omnitable-border-color, #e1e2e5);
 	}
 
 	.groupRow.groupRow-folded {
@@ -386,6 +394,17 @@ export default `<style>
 		flex: auto;
 	}
 
+	.groupRow-badge {
+		background: #8BE5C6;
+		color: #fff;
+		line-height: 30px;
+		width: 30px;
+		text-align: center;
+		border-radius: 50%;
+		font-size: 13px;
+		font-weight: 500;
+	}
+
 	.rtl {
 		direction: rtl;
 	}
@@ -400,10 +419,12 @@ export default `<style>
 
 	cosmoz-bottom-bar {
 		background-color: var(--cosmoz-omnitable-bottom-bar-color, #5f5a92);
-		color: white;
 		overflow: hidden;
 		z-index: auto;
 	}
+	cosmoz-bottom-bar::part(bar) {
+		padding: 0 24px;
+	}
 
 	cosmoz-bottom-bar::slotted(*) {
 		background-color: #4c4875;
@@ -417,31 +438,6 @@ export default `<style>
 		cursor: not-allowed;
 	}
 
-	#dropdownExtra paper-button, #dropdownExtra ::slotted(paper-button) {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		position: relative;
-		@apply --cosmoz-bottom-bar-menu-item;
-	}
-
-	#dropdownExtra paper-button:hover, #dropdownExtra ::slotted(paper-button:hover) {
-		background: #eee;
-	}
-
-	#dropdownExtra {
-		padding: 0;
-	}
-
-	#listboxSizer {
-		max-height: 0;
-		padding: 0 !important;
-	}
-
-	#dropdownExtraButton {
-		color: var(--cosmoz-bottom-bar-menubutton-color, var(--light-primary-color));
-		background-color: var(--cosmoz-bottom-bar-menubutton-background-color, var(--dark-primary-color));
-	}
 
 	.boolean-cell[editable] {
 		overflow: initial;

package/cosmoz-omnitable.js

@@ -1,12 +1,7 @@
 /* eslint-disable max-lines */
 import '@polymer/iron-icons/iron-icons';
 import '@polymer/iron-icon/iron-icon';
-import '@polymer/iron-label/iron-label';
-import '@polymer/paper-button/paper-button';
-import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
 import '@polymer/paper-icon-button/paper-icon-button';
-import '@polymer/paper-item/paper-item';
-import '@polymer/paper-listbox/paper-listbox';
 import '@polymer/paper-spinner/paper-spinner-lite';
 
 import '@neovici/cosmoz-grouped-list';
@@ -32,7 +27,7 @@ import { useOmnitable } from './lib/use-omnitable';
 import './lib/cosmoz-omnitable-settings';
 import { saveAsCsvAction } from './lib/save-as-csv-action';
 import { saveAsXlsxAction } from './lib/save-as-xlsx-action';
-
+import { defaultPlacement } from '@neovici/cosmoz-dropdown';
 /**
  * @polymer
  * @customElement
@@ -126,7 +121,7 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 									<cosmoz-omnitable-group-row column="[[ groupOnColumn ]]" item="[[ item.items.0 ]]" selected="[[ selected ]]" folded="[[ folded ]]">
 									</cosmoz-omnitable-group-row>
 								</h3>
-								<div>[[ item.items.length ]]</div>
+								<div class="groupRow-badge">[[ item.items.length ]]</div>
 								<paper-icon-button class="fold" icon="[[ _getFoldIcon(folded) ]]" on-tap="_toggleGroup"></paper-icon-button>
 							</div>
 						</template>
@@ -140,38 +135,40 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 						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') ]]" default-index="-1" show-single show-selection
-					></cosmoz-autocomplete>
+					>
+						<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') ]]" default-index="-1" show-single show-selection
-					></cosmoz-autocomplete>
+					>
+						<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>
 				</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) ]]" computed-bar-height="{{ computedBarHeight }}">
+					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="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>
-					<paper-menu-button id="extraMenu" slot="extra" no-animations
-						vertical-offset="[[ computedBarHeight ]]" vertical-align="bottom" horizontal-align="right">
-						<paper-icon-button id="dropdownExtraButton" class="dropdown-trigger" slot="dropdown-trigger" icon="file-download" toggles raised>
-						</paper-icon-button>
-						<paper-listbox id="dropdownExtra" class="dropdown-content" slot="dropdown-content">
-							<span id="listboxSizer"></span>
-							<paper-button on-click="_saveAsCsvAction">[[ _('Save as CSV', t) ]]</paper-button>
-							<paper-button on-click="_saveAsXlsxAction">[[ _('Save as XLSX', t) ]]</paper-button>
-							<slot name="download-menu"></slot>
-						</paper-listbox>
-					</paper-menu-button>
-
+					<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>
 		</div>
@@ -269,7 +266,10 @@ class Omnitable extends hauntedPolymer(useOmnitable)(mixin({ isEmpty }, translat
 			 */
 			_allSelected: { type: Boolean },
 			computedBarHeight: { type: Number },
-			settingsId: { type: String, value: undefined }
+			settingsId: { type: String, value: undefined },
+			topPlacement: {
+				value: ['top-right', ...defaultPlacement]
+			}
 		};
 	}
 

package/lib/cosmoz-omnitable-settings.js

@@ -1,23 +1,13 @@
 import { html, component, useCallback } from 'haunted';
-import { usePosition } from '@neovici/cosmoz-autocomplete/lib/use-position';
-import { useFocus } from '@neovici/cosmoz-autocomplete/lib/use-focus';
-import { portal } from '@neovici/cosmoz-utils/lib/directives/portal';
 import { useMeta } from '@neovici/cosmoz-utils/lib/hooks/use-meta';
 import { checkbox } from '../cosmoz-omnitable-styles';
 import { nothing } from 'lit-html';
 import { isEmpty } from '@neovici/cosmoz-utils/lib/template';
-const settingsStyles = `
+import { defaultPlacement } from '@neovici/cosmoz-dropdown';
+const placement = ['bottom-right', ...defaultPlacement],
+	settingsStyles = `
 	:host {
-		position: fixed;
-		top: 0;
-		left: 0;
-		z-index: 2;
-		font-family: var(--paper-font-subhead_-_font-family, initial);
-		background: #fff;
-		min-width: 72px;
-		box-shadow: 0 3px 4px 0 rgb(0 0 0 / 14%), 0 1px 8px 0 rgb(0 0 0 / 12%), 0 3px 3px -2px rgb(0 0 0 / 40%);
 		box-sizing: border-box;
-		border-radius: 5px;
 		padding: 12px;
 		display: flex;
 		flex-direction: column;
@@ -76,11 +66,8 @@ const settingsStyles = `
 		return isFinite(idx) ? idx : undefined;
 	},
 
-	preventDefault = e => e.preventDefault(),
-
 	// eslint-disable-next-line max-lines-per-function
 	useSettings = host => {
-		usePosition({ anchor: host.anchor, host });
 
 		const
 			{ settings, onSettings } = host,
@@ -195,7 +182,7 @@ const settingsStyles = `
 		return [
 			html`
 				<style>${ settingsStyles }</style>
-				<div class="list">${ settings.map(renderItem(thru)) }</div>
+				<div class="list">${ settings?.map(renderItem(thru)) }</div>
 			`,
 			settingsId
 				? html`<div class="footer">
@@ -206,51 +193,38 @@ const settingsStyles = `
 		];
 	},
 
-	Settings = host => {
-		const { settings, onSettings, onSave, onReset, collapsed, settingsId, hasChanges, badge, filters } = host,
-			{ active, onFocus, onToggle } = useFocus(host),
-			anchor = useCallback(() => host.shadowRoot.querySelector('.anchor'), []);
-
-		return html`
-			<style>
-				.anchor {
-					border: none;
-					padding: 0;
-					font-size: 0;
-					vertical-align: bottom;
-					margin-bottom: 10px;
-					outline: none;
-					background: transparent;
-					cursor: pointer;
-					position: relative;
-				}
-				.anchor * { pointer-events: none; }
-				.anchor:hover {
-					background: #eee;
-				}
-				.badge {
-					position: absolute;
-					top: 1px;
-					right: -4px;
- 					background-color: var(--cosmoz-omnitable-checkbox-checked-color, var(--primary-color));
-					width: 8px;
-					height: 8px;
-					border-radius: 100%;
-				}
-			</style>
-		  <button class="anchor" @focus=${ onFocus } @blur=${ onFocus } @click=${ onToggle } @mousedown=${ preventDefault }>
-				<svg viewBox="0 0 24 24" width="24"><path d="M10 18h5V5h-5v13zm-6 0h5V5H4v13zM16 5v13h5V5h-5z"></path></svg>
-				${ badge ? html`<div class="badge"></div>` : nothing }
-			</button>
-			${ active
-		? portal(html`<cosmoz-omnitable-settings-ui
-				tabindex="-1" .anchor=${ anchor } .settings=${ settings } .onSettings=${ onSettings } .collapsed=${ collapsed }
-				.settingsId=${ settingsId } .hasChanges=${ hasChanges } .onSave=${ onSave } .onReset=${ onReset }
-				.filters=${ filters }
-				@focusin=${ onFocus } @focusout=${ onFocus } data-dropdown>`)
-		: [] }
-		    `;
-	};
-
+	Settings = ({ anchor, settings, onSettings, collapsed, settingsId, hasChanges, onSave, onReset, filters, badge }) => html`
+		<style>
+			:host {
+				display: contents;
+				--cosmoz-dropdown-box-shadow: 0 3px 4px 0 rgb(0 0 0 / 14%), 0 1px 8px 0 rgb(0 0 0 / 12%), 0 3px 3px -2px rgb(0 0 0 / 40%);
+			}
+			cosmoz-dropdown::part(button) {
+				--cosmoz-dropdown-button-size: 24px;
+				margin-bottom: 10px;
+				padding: 0;
+				background: transparent;
+			}
+			cosmoz-dropdown::part(anchor) {
+				display: inline-block;
+			}
+			.badge {
+				position: absolute;
+				top: 1px;
+				right: -4px;
+				background-color: var(--cosmoz-omnitable-checkbox-checked-color, var(--primary-color));
+				width: 8px;
+				height: 8px;
+				border-radius: 100%;
+			}
+		</style>
+		<cosmoz-dropdown .render=${ () => html`<cosmoz-omnitable-settings-ui
+			.anchor=${ anchor } .settings=${ settings } .onSettings=${ onSettings } .collapsed=${ collapsed }
+			.settingsId=${ settingsId } .hasChanges=${ hasChanges } .onSave=${ onSave } .onReset=${ onReset }
+			.filters=${ filters }></cosmoz-omnitable-settings-ui>` } .placement=${ placement }>
+			<svg viewBox="0 0 24 24" width="24" slot="button"><path d="M10 18h5V5h-5v13zm-6 0h5V5H4v13zM16 5v13h5V5h-5z"></path></svg>
+			${ badge ? html`<div class="badge" slot="button"></div>` : nothing }
+		</cosmoz-dropdown>
+`;
 customElements.define('cosmoz-omnitable-settings', component(Settings));
 customElements.define('cosmoz-omnitable-settings-ui', component(SettingsUI));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-omnitable",
-	"version": "8.0.0",
+	"version": "8.1.0",
 	"description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
 	"keywords": [
 		"web-components"
@@ -53,8 +53,9 @@
 	},
 	"dependencies": {
 		"@neovici/cosmoz-autocomplete": "^2.17.1",
-		"@neovici/cosmoz-bottom-bar": "^4.1.0",
+		"@neovici/cosmoz-bottom-bar": "^4.4.0",
 		"@neovici/cosmoz-datetime-input": "^3.0.3",
+		"@neovici/cosmoz-dropdown": "^1.5.0",
 		"@neovici/cosmoz-grouped-list": "^3.2.0",
 		"@neovici/cosmoz-i18next": "^3.1.1",
 		"@neovici/cosmoz-page-router": "^6.0.3",
@@ -62,13 +63,9 @@
 		"@neovici/nullxlsx": "^3.0.0",
 		"@polymer/iron-icon": "^3.0.0",
 		"@polymer/iron-icons": "^3.0.0",
-		"@polymer/iron-label": "^3.0.0",
-		"@polymer/paper-button": "^3.0.0",
 		"@polymer/paper-dropdown-menu": "^3.2.0",
 		"@polymer/paper-icon-button": "^3.0.0",
 		"@polymer/paper-input": "^3.2.0",
-		"@polymer/paper-item": "^3.0.0",
-		"@polymer/paper-listbox": "^3.0.0",
 		"@polymer/paper-spinner": "^3.0.0",
 		"@polymer/polymer": "^3.3.0",
 		"@webcomponents/shadycss": "^1.10.0",
@@ -77,24 +74,26 @@
 		"lit-html": "^1.3.0"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^13.0.0",
-		"@commitlint/config-conventional": "^13.0.0",
+		"@commitlint/cli": "^15.0.0",
+		"@commitlint/config-conventional": "^15.0.0",
 		"@neovici/cosmoz-viewinfo": "^3.1.3",
-		"@neovici/eslint-config": "^1.3.2",
+		"@neovici/eslint-config": "^1.3.3",
 		"@open-wc/testing": "^2.5.28",
 		"@polymer/iron-component-page": "^4.0.0",
 		"@polymer/iron-demo-helpers": "^3.0.0",
 		"@polymer/iron-test-helpers": "^3.0.0",
+		"@polymer/paper-button": "^3.0.1",
+		"@polymer/paper-item": "^3.0.1",
+		"@polymer/paper-listbox": "^3.0.1",
 		"@polymer/paper-toggle-button": "^3.0.0",
 		"@semantic-release/changelog": "^6.0.0",
 		"@semantic-release/git": "^10.0.0",
 		"@web/dev-server": "^0.1.10",
 		"@web/test-runner": "^0.13.0",
 		"@web/test-runner-selenium": "^0.5.0",
-		"eslint": "^7.0.0",
 		"husky": "^7.0.0",
 		"semantic-release": "^18.0.0",
-		"sinon": "^11.0.0",
+		"sinon": "^12.0.0",
 		"web-animations-js": "^2.3.2"
 	}
 }