@ui5/webcomponents-base - npm Package Compare versions

Comparing version 0.0.0-e463d2345 to 0.0.0-fa45f79f6

dist/delegate/ItemNavigation.js

@@ -0,1 +1,2 @@
+import RenderScheduler from "../RenderScheduler.js";
 import {
@@ -23,3 +24,4 @@ isDown,
 		this.behavior = options.behavior || ItemNavigationBehavior.Static;
-
+		this.hasNextPage = true; // used in Paging mode and controlled from the rootWebComponent
+		this.hasPrevPage = true; // used in Paging mode and controlled from the rootWebComponent
 		const navigationMode = options.navigationMode;
@@ -51,33 +53,15 @@ const autoNavigation = !navigationMode || navigationMode === NavigationMode.Auto;
 
-	_onKeyPress(event) {
-		const items = this._getItems();
-		if (this.currentIndex >= items.length) {
-			if (this.behavior !== ItemNavigationBehavior.Cyclic) {
-				if (this.behavior === ItemNavigationBehavior.Paging) {
-					this.currentIndex = this.currentIndex - items.length;
-				} else {
-					this.currentIndex = items.length - 1;
-				}
-				this.fireEvent(ItemNavigation.BORDER_REACH, { start: false, end: true, offset: this.currentIndex });
-			} else {
-				this.currentIndex = this.currentIndex - items.length;
-			}
+	async _onKeyPress(event) {
+		if (this.currentIndex >= this._getItems().length) {
+			this.onOverflowBottomEdge();
 		} else if (this.currentIndex < 0) {
-			if (this.behavior !== ItemNavigationBehavior.Cyclic) {
-				if (this.behavior === ItemNavigationBehavior.Paging) {
-					this.currentIndex = items.length + this.currentIndex - this.rowSize + (this.rowSize - (this._getItems().length % this.rowSize));
-				} else {
-					this.currentIndex = 0;
-				}
-				this.fireEvent(ItemNavigation.BORDER_REACH, { start: true, end: false, offset: this.currentIndex });
-			} else {
-				this.currentIndex = items.length + this.currentIndex;
-			}
+			this.onOverflowTopEdge();
 		}
 
+		event.preventDefault();
+
+		await RenderScheduler.whenFinished();
+
 		this.update();
 		this.focusCurrent();
-
-		// stops browser scrolling with up/down keys
-		event.preventDefault();
 	}
@@ -232,6 +216,66 @@
 	}
+
+	onOverflowBottomEdge() {
+		const items = this._getItems();
+		const offset = this.currentIndex - items.length;
+
+		if (this.behavior === ItemNavigationBehavior.Cyclic) {
+			this.currentIndex = 0;
+			return;
+		}
+
+		if (this.behavior === ItemNavigationBehavior.Paging) {
+			this._handleNextPage();
+		} else {
+			this.currentIndex = items.length - 1;
+		}
+
+		this.fireEvent(ItemNavigation.BORDER_REACH, { start: false, end: true, offset });
+	}
+
+	onOverflowTopEdge() {
+		const items = this._getItems();
+		const offset = this.currentIndex + this.rowSize;
+
+		if (this.behavior === ItemNavigationBehavior.Cyclic) {
+			this.currentIndex = items.length - 1;
+			return;
+		}
+
+		if (this.behavior === ItemNavigationBehavior.Paging) {
+			this._handlePrevPage();
+		} else {
+			this.currentIndex = 0;
+		}
+
+		this.fireEvent(ItemNavigation.BORDER_REACH, { start: true, end: false, offset });
+	}
+
+	_handleNextPage() {
+		this.fireEvent(ItemNavigation.PAGE_BOTTOM);
+		const items = this._getItems();
+
+		if (!this.hasNextPage) {
+			this.currentIndex = items.length - 1;
+		} else {
+			this.currentIndex = 0;
+		}
+	}
+
+	_handlePrevPage() {
+		this.fireEvent(ItemNavigation.PAGE_TOP);
+		const items = this._getItems();
+
+		if (!this.hasPrevPage) {
+			this.currentIndex = 0;
+		} else {
+			this.currentIndex = (this.pageSize || items.length) - 1;
+		}
+	}
 }
 
+ItemNavigation.PAGE_TOP = "PageTop";
+ItemNavigation.PAGE_BOTTOM = "PageBottom";
 ItemNavigation.BORDER_REACH = "_borderReach";
 
 export default ItemNavigation;

dist/StaticArea.js

@@ -24,2 +24,6 @@ const getStaticAreaInstance = () => {
 
+	get isUI5Element() {
+		return true;
+	}
+
 	destroy() {
@@ -31,3 +35,5 @@ const staticAreaDomRef = document.querySelector(this.tagName.toLowerCase());
 
-customElements.define("ui5-static-area", StaticAreaElement);
+if (!customElements.get("ui5-static-area")) {
+	customElements.define("ui5-static-area", StaticAreaElement);
+}
 
@@ -34,0 +40,0 @@ export {

dist/StaticAreaItem.js

@@ -63,6 +63,12 @@ import { getStaticAreaInstance, removeStaticArea } from "./StaticArea.js";
 	}
+
+	get isUI5Element() {
+		return true;
+	}
 }
 
-customElements.define("ui5-static-area-item", StaticAreaItemElement);
+if (!customElements.get("ui5-static-area-item")) {
+	customElements.define("ui5-static-area-item", StaticAreaItemElement);
+}
 
 export default StaticAreaItem;

package.json

 {
   "name": "@ui5/webcomponents-base",
-  "version": "0.0.0-e463d2345",
+  "version": "0.0.0-fa45f79f6",
   "description": "UI5 Web Components: webcomponents.base",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
+  "type": "module",
   "module": "index.js",
@@ -23,6 +24,7 @@ "keywords": [
     "build": "nps build",
-    "test": "nps test"
+    "test": "nps test",
+    "prepublishOnly": "npm run clean && npm run build"
   },
   "dependencies": {
-    "@ui5/webcomponents-utils": "0.0.0-e463d2345",
+    "@ui5/webcomponents-utils": "0.0.0-fa45f79f6",
     "css-vars-ponyfill": "^2.1.2",
@@ -34,3 +36,3 @@ "lit-html": "^1.0.0",
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-e463d2345",
+    "@ui5/webcomponents-tools": "0.0.0-fa45f79f6",
     "array-uniq": "^2.0.0",
@@ -37,0 +39,0 @@ "copy-and-watch": "^0.1.4",

src/delegate/ItemNavigation.js

@@ -0,1 +1,2 @@
+import RenderScheduler from "../RenderScheduler.js";
 import {
@@ -23,3 +24,4 @@ isDown,
 		this.behavior = options.behavior || ItemNavigationBehavior.Static;
-
+		this.hasNextPage = true; // used in Paging mode and controlled from the rootWebComponent
+		this.hasPrevPage = true; // used in Paging mode and controlled from the rootWebComponent
 		const navigationMode = options.navigationMode;
@@ -51,33 +53,15 @@ const autoNavigation = !navigationMode || navigationMode === NavigationMode.Auto;
 
-	_onKeyPress(event) {
-		const items = this._getItems();
-		if (this.currentIndex >= items.length) {
-			if (this.behavior !== ItemNavigationBehavior.Cyclic) {
-				if (this.behavior === ItemNavigationBehavior.Paging) {
-					this.currentIndex = this.currentIndex - items.length;
-				} else {
-					this.currentIndex = items.length - 1;
-				}
-				this.fireEvent(ItemNavigation.BORDER_REACH, { start: false, end: true, offset: this.currentIndex });
-			} else {
-				this.currentIndex = this.currentIndex - items.length;
-			}
+	async _onKeyPress(event) {
+		if (this.currentIndex >= this._getItems().length) {
+			this.onOverflowBottomEdge();
 		} else if (this.currentIndex < 0) {
-			if (this.behavior !== ItemNavigationBehavior.Cyclic) {
-				if (this.behavior === ItemNavigationBehavior.Paging) {
-					this.currentIndex = items.length + this.currentIndex - this.rowSize + (this.rowSize - (this._getItems().length % this.rowSize));
-				} else {
-					this.currentIndex = 0;
-				}
-				this.fireEvent(ItemNavigation.BORDER_REACH, { start: true, end: false, offset: this.currentIndex });
-			} else {
-				this.currentIndex = items.length + this.currentIndex;
-			}
+			this.onOverflowTopEdge();
 		}
 
+		event.preventDefault();
+
+		await RenderScheduler.whenFinished();
+
 		this.update();
 		this.focusCurrent();
-
-		// stops browser scrolling with up/down keys
-		event.preventDefault();
 	}
@@ -232,6 +216,66 @@
 	}
+
+	onOverflowBottomEdge() {
+		const items = this._getItems();
+		const offset = this.currentIndex - items.length;
+
+		if (this.behavior === ItemNavigationBehavior.Cyclic) {
+			this.currentIndex = 0;
+			return;
+		}
+
+		if (this.behavior === ItemNavigationBehavior.Paging) {
+			this._handleNextPage();
+		} else {
+			this.currentIndex = items.length - 1;
+		}
+
+		this.fireEvent(ItemNavigation.BORDER_REACH, { start: false, end: true, offset });
+	}
+
+	onOverflowTopEdge() {
+		const items = this._getItems();
+		const offset = this.currentIndex + this.rowSize;
+
+		if (this.behavior === ItemNavigationBehavior.Cyclic) {
+			this.currentIndex = items.length - 1;
+			return;
+		}
+
+		if (this.behavior === ItemNavigationBehavior.Paging) {
+			this._handlePrevPage();
+		} else {
+			this.currentIndex = 0;
+		}
+
+		this.fireEvent(ItemNavigation.BORDER_REACH, { start: true, end: false, offset });
+	}
+
+	_handleNextPage() {
+		this.fireEvent(ItemNavigation.PAGE_BOTTOM);
+		const items = this._getItems();
+
+		if (!this.hasNextPage) {
+			this.currentIndex = items.length - 1;
+		} else {
+			this.currentIndex = 0;
+		}
+	}
+
+	_handlePrevPage() {
+		this.fireEvent(ItemNavigation.PAGE_TOP);
+		const items = this._getItems();
+
+		if (!this.hasPrevPage) {
+			this.currentIndex = 0;
+		} else {
+			this.currentIndex = (this.pageSize || items.length) - 1;
+		}
+	}
 }
 
+ItemNavigation.PAGE_TOP = "PageTop";
+ItemNavigation.PAGE_BOTTOM = "PageBottom";
 ItemNavigation.BORDER_REACH = "_borderReach";
 
 export default ItemNavigation;

src/StaticArea.js

@@ -24,2 +24,6 @@ const getStaticAreaInstance = () => {
 
+	get isUI5Element() {
+		return true;
+	}
+
 	destroy() {
@@ -31,3 +35,5 @@ const staticAreaDomRef = document.querySelector(this.tagName.toLowerCase());
 
-customElements.define("ui5-static-area", StaticAreaElement);
+if (!customElements.get("ui5-static-area")) {
+	customElements.define("ui5-static-area", StaticAreaElement);
+}
 
@@ -34,0 +40,0 @@ export {

src/StaticAreaItem.js

@@ -63,6 +63,12 @@ import { getStaticAreaInstance, removeStaticArea } from "./StaticArea.js";
 	}
+
+	get isUI5Element() {
+		return true;
+	}
 }
 
-customElements.define("ui5-static-area-item", StaticAreaItemElement);
+if (!customElements.get("ui5-static-area-item")) {
+	customElements.define("ui5-static-area-item", StaticAreaItemElement);
+}
 
 export default StaticAreaItem;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Is type module

Yes

Worsened metrics

Total package byte prevSize

12478713

decreased by-4.91%

Lines of code

367003

decreased by-4.21%

Dependency changes

• + Added@ui5/webcomponents-utils@0.0.0-fa45f79f6(transitive)

• - Removed@ui5/webcomponents-utils@0.0.0-e463d2345(transitive)

• Updated@ui5/webcomponents-utils@0.0.0-fa45f79f6