@dile/crud 1.9.0 → 1.9.2

package/components/many-relation/src/DileManyRelation.js

@@ -12,6 +12,13 @@ export class DileManyRelation extends DileI18nMixin(LitElement) {
       :host {
         display: block;
       }
+      label {
+        display: block;
+        margin-bottom: var(--dile-input-label-margin-bottom, 4px);
+        font-size: var(--dile-input-label-font-size, 1em);
+        color: var(--dile-input-label-color, #59e);
+        font-weight: var(--dile-input-label-font-weight, normal);
+      }
       dile-ajax-select-crud{
           margin-bottom: 0;
       }
@@ -45,7 +52,7 @@ export class DileManyRelation extends DileI18nMixin(LitElement) {
       }
       button.remove-btn dile-icon {
         --dile-icon-color: var(--many-relation-remove-color, #c00);
-        --dile-icon-size: var(--many-relation-remove-size, 22px);
+        --dile-icon-size: var(--many-relation-remove-size, 24px);
       }
       .add-row {
         display: flex;
@@ -77,6 +84,8 @@ export class DileManyRelation extends DileI18nMixin(LitElement) {
 
   static get properties() {
     return {
+      label: { type: String },
+
       // Endpoints
       endpointGet: { type: String },
       endpointList: { type: String },
@@ -102,6 +111,7 @@ export class DileManyRelation extends DileI18nMixin(LitElement) {
       itemTemplate: { type: Object },
       getListItems: { type: Object },
       addRelationLabel: { type: String },
+      emptyListMessage: { type: String },
       bodyIdProperty: { type: String },
 
       // Internal state
@@ -164,6 +174,10 @@ export class DileManyRelation extends DileI18nMixin(LitElement) {
         @ajax-error="${this._onRemoveError}"
       ></dile-ajax>
 
+      ${this.label
+          ? html`<label for="textField">${this.label}</label>`
+          : ""
+      }
       <div class="add-row">
         <dile-ajax-select-crud
           id="theselect"
@@ -191,7 +205,7 @@ export class DileManyRelation extends DileI18nMixin(LitElement) {
       ${this._loadingList
         ? html`<dile-spinner active></dile-spinner>`
         : this._items.length === 0
-          ? html`<p class="empty-msg">${this.translations?.empty_list ?? 'There are no items yet'}</p>`
+          ? html`<p class="empty-msg">${this.emptyListMessageComputed(this.emptyListMessage, this.translations)}</p>`
           : this._items.map(item => html`
               <div class="relation-item">
                 <span class="relation-item-content">${this.itemTemplate(item)}</span>
@@ -212,7 +226,10 @@ export class DileManyRelation extends DileI18nMixin(LitElement) {
   }
 
   _addSelectedItem() {
-    if (!this._selectedId) return;
+    if (!this._selectedId) {
+      this._dispatch('many-relation-add-no-selection');
+      return;
+    }
     const bodyKey = this.bodyIdProperty || this.idProperty;
     this._ajaxadd.data = { [bodyKey]: this._selectedId };
     this._ajaxadd.generateRequest();
@@ -280,4 +297,8 @@ export class DileManyRelation extends DileI18nMixin(LitElement) {
   selectDefaultPlaceholderComputed(value, translations) {
     return value ? value : translations?.select_relation_placeholder ?? 'Select...';
   }
+
+  emptyListMessageComputed(message, translations) {
+    return message ? message : translations?.empty_list ?? 'There are no items yet';
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "description": "Components to create a generic crud system based on Web Components and Lit",
   "main": "index.js",
   "scripts": {
@@ -31,5 +31,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "67e2e845295d11fcdbf3dedcc989d26b821005d4"
+  "gitHead": "1fe481edcd8ccfaf7a7aeb74f8d66a22a4423228"
 }