refactor(ui5-view-settings-dialog): change opening api to open proper…

…ty (#9249) Add `open` property to replace the `show` and `close` methods in the `ui5-view-settings-dialog` component. BREAKING CHANGE: Removed `show` and `close` methods. Before, the ui5-view-settings-dialog could be opened and closed by calling `show()` and `close()`: ```ts const viewSettingsDialog = document.getElementById("exampleID"); viewSettingsDialog.show(); viewSettingsDialog.close(); ``` Now, the dialog is opened and closed by setting the open property to true or false: ```ts const viewSettingsDialog = document.getElementById("exampleID"); viewSettingsDialog.open = true; viewSettingsDialog.open = false; ``` fixes: #9240
SAP · Jun 21, 2024 · 52106cc · 52106cc
1 parent b294e05
commit 52106cc
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 20 deletions.
diff --git a/packages/fiori/src/ViewSettingsDialog.hbs b/packages/fiori/src/ViewSettingsDialog.hbs
@@ -1,9 +1,12 @@
 <ui5-dialog
 	prevent-initial-focus
 	aria-label="{{_dialogTitle}}"
-	@ui5-open={{_focusRecentlyUsedControl}}
 	@ui5-before-close={{_restoreConfirmedOnEscape}}
 	?stretch={{_isPhone}}
+	.open="{{open}}"
+	@ui5-before-open="{{beforeDialogOpen}}"
+	@ui5-open="{{afterDialogOpen}}"
+	@ui5-close="{{afterDialogClose}}"
 >
 
 	<div slot="header" class="ui5-vsd-header">

diff --git a/packages/fiori/src/ViewSettingsDialog.ts b/packages/fiori/src/ViewSettingsDialog.ts
@@ -193,6 +193,18 @@ type VSDInternalSettings = {
  * @public
  */
 @event("before-open")
+/**
+ * Fired after the dialog is opened.
+ * @since 2.0.0
+ * @public
+ */
+@event("open")
+/**
+ * Fired after the dialog is closed.
+ * @since 2.0.0
+ * @public
+ */
+@event("close")
 class ViewSettingsDialog extends UI5Element {
 	/**
 	 * Defines the initial sort order.
@@ -202,6 +214,15 @@ class ViewSettingsDialog extends UI5Element {
 	@property({ type: Boolean })
 	sortDescending = false;
 
+	/**
+	 * Indicates if the dialog is open.
+	 * @public
+	 * @default false
+	 * @since 2.0.0
+	 */
+	@property({ type: Boolean })
+	open = false;
+
 	/**
 	 * Keeps recently focused list in order to focus it on next dialog open.
 	 * @private
@@ -491,9 +512,8 @@ class ViewSettingsDialog extends UI5Element {
 
 	/**
 	 * Shows the dialog.
-	 * @public
 	 */
-	show(): void {
+	beforeDialogOpen(): void {
 		if (!this._dialog) {
 			this._sortOrder = this._sortOrderListDomRef;
 			this._sortBy = this._sortByList;
@@ -509,9 +529,18 @@ class ViewSettingsDialog extends UI5Element {
 		}
 
 		this.fireEvent("before-open", {}, true, false);
-		this._dialog.open = true;
+	}
+
+	afterDialogOpen(): void {
+		this._dialog?.querySelector<List>("[ui5-list]")?.focusFirstItem();
+
+		this._focusRecentlyUsedControl();
+
+		this.fireEvent("open");
+	}
 
-		this._dialog.querySelector<List>("[ui5-list]")?.focusFirstItem();
+	afterDialogClose(): void {
+		this.fireEvent("close");
 	}
 
 	_handleModeChange(e: CustomEvent) { // use SegmentedButton event when done
@@ -547,15 +576,6 @@ class ViewSettingsDialog extends UI5Element {
 		});
 	}
 
-	/**
-	 * Closes the dialog.
-	 */
-	close() {
-		if (this._dialog) {
-			this._dialog.open = false;
-		}
-	}
-
 	/**
 	 * Sets focus on recently used control within the dialog.
 	 */
@@ -574,7 +594,7 @@ class ViewSettingsDialog extends UI5Element {
 	 * Stores current settings as confirmed and fires `confirm` event.
 	 */
 	_confirmSettings() {
-		this.close();
+		this.open = false;
 		this._confirmedSettings = this._currentSettings;
 
 		this.fireEvent<ViewSettingsDialogConfirmEventDetail>("confirm", this.eventsParams);
@@ -587,7 +607,7 @@ class ViewSettingsDialog extends UI5Element {
 		this._restoreSettings(this._confirmedSettings);
 
 		this.fireEvent<ViewSettingsDialogCancelEventDetail>("cancel", this.eventsParams);
-		this.close();
+		this.open = false;
 	}
 
 	get eventsParams() {

diff --git a/packages/fiori/test/pages/ViewSettingsDialog.html b/packages/fiori/test/pages/ViewSettingsDialog.html
@@ -95,7 +95,7 @@ <h3> ViewSettingsDialog</h3>
 
 	<script>
 		btnOpenDialog.addEventListener("click", function () {
-			vsd.show();
+			vsd.open = true;
 		});
 		btnChangeSettings.addEventListener("click", function () {
 			vsd.setConfirmedSettings(JSON.parse(vsdSettings.value));
@@ -107,13 +107,13 @@ <h3> ViewSettingsDialog</h3>
 			alert("OK button clicked, returned info is: " + JSON.stringify(evt.detail));
 		});
 		btnOpenDialogSort.addEventListener("click", function () {
-			vsdSort.show();
+			vsdSort.open = true;
 		});
 		vsdSort.addEventListener("ui5-confirm", function(evt) {
 			alert("OK button clicked, returned info is: " + JSON.stringify(evt.detail));
 		});
 		btnOpenDialogFilter.addEventListener("click", function () {
-			vsdFilter.show();
+			vsdFilter.open = true;
 		});
 		vsdFilter.addEventListener("ui5-confirm", function(evt) {
 			alert("OK button clicked, returned info is: " + JSON.stringify(evt.detail));

diff --git a/packages/website/docs/_samples/fiori/ViewSettingsDialog/Basic/main.js b/packages/website/docs/_samples/fiori/ViewSettingsDialog/Basic/main.js
@@ -9,7 +9,7 @@ var vsdResults = document.getElementById("vsdResults");
 
 btnOpenDialog1.addEventListener("click", function () {
     vsdResults.innerHTML = "";
-    vsd1.show();
+    vsd1.open = true;
 });
 
 vsd1.addEventListener("confirm", function (evt) {