@api-client/ui 0.6.1 → 0.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",

package/src/elements/data-table/internals/DataCatalogTable.ts

@@ -109,8 +109,6 @@ export default class DataCatalogTable extends DataTable<DataCatalogSchemaWithVer
     }
     this.dispatchEvent(
       new CustomEvent('select', {
-        bubbles: true,
-        composed: true,
         detail,
       })
     )

package/src/elements/file-system/internals/QuickApiFilesystem.ts

@@ -340,8 +340,6 @@ export default class QuickApiFilesystem extends LitElement {
         .items="${files}"
         selection="multi"
         active
-        sort="name"
-        sortDirection="desc"
         ariaLabel="${ariaLabel}"
         .selectedItems="${selectedItems}"
         @activate="${this.itemActivateHandler}"

package/src/modeling/domain-navigation.ts

@@ -19,3 +19,5 @@ declare global {
     'domain-navigation': DomainNavigationElement
   }
 }
+
+export type { DomainDragDropEventDetail, DomainMultiSelectionEventDetail } from './internals/DomainNavigation.js'

package/src/modeling/internals/ApiModelingActionsScreen.ts

@@ -71,13 +71,7 @@ export default class ApiModelingActionsScreen extends ApiModelingScreen {
    * It dispatches the `exposeentity` event to notify the parent component that the user wants to expose an entity.
    */
   protected handleAddDataClick(): void {
-    this.dispatchEvent(
-      new Event('exposed-new', {
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-      })
-    )
+    this.dispatchEvent(new Event('exposed-new'))
   }
 
   /**
@@ -93,9 +87,6 @@ export default class ApiModelingActionsScreen extends ApiModelingScreen {
     }
     this.dispatchEvent(
       new CustomEvent<EditExposedEntityEventDetail>('exposed-remove', {
-        bubbles: true,
-        cancelable: true,
-        composed: true,
         detail: {
           exposedId: id,
         },
@@ -116,9 +107,6 @@ export default class ApiModelingActionsScreen extends ApiModelingScreen {
     }
     this.dispatchEvent(
       new CustomEvent<EditActionEventDetail>('action-edit', {
-        bubbles: true,
-        cancelable: true,
-        composed: true,
         detail: {
           exposedId: id,
           kind: e.detail.kind,
@@ -135,9 +123,6 @@ export default class ApiModelingActionsScreen extends ApiModelingScreen {
     }
     this.dispatchEvent(
       new CustomEvent<EditExposedEntityEventDetail>('exposed-edit', {
-        bubbles: true,
-        cancelable: true,
-        composed: true,
         detail: {
           exposedId: id,
         },

package/src/modeling/internals/DomainBrowser.ts

@@ -332,7 +332,10 @@ export default class DomainBrowser extends ModelingElement {
     }
     this.setupAllowedSelection(state)
     this.requestUpdate()
-    this.notifySelected(state.selected)
+    if (this.hasAllowedSelection) {
+      // We only notify the selection if it is allowed.
+      this.notifySelected(state.selected)
+    }
   }
 
   notifySelected(selected: DomainBrowseSelectedItem | undefined): void {

package/src/modeling/internals/styles/ApiModelingActionsScreen.styles.ts

@@ -28,4 +28,37 @@ export default css`
     align-items: center;
     gap: 8px;
   }
+
+  .empty-screen {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+    gap: 20px;
+    border-radius: var(--md-sys-shape-corner-medium, 12px);
+    background: var(--md-sys-color-surface);
+
+    & .empty-message {
+      margin: 0;
+      padding: 0;
+      color: var(--md-sys-color-on-surface);
+    }
+
+    & > .icon-wrapper {
+      display: flex;
+      padding: 40px;
+      justify-content: center;
+      align-items: center;
+      border-radius: 60px;
+      background: var(--md-sys-color-primary);
+    }
+
+    & .icon {
+      width: 40px;
+      height: 40px;
+      fill: var(--md-sys-color-on-primary);
+    }
+  }
 `