@dile/crud 2.5.19 → 2.5.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/components/list/src/DileCrudList.js +1 -1
  2. package/components/list/src/DileCrudListItem.js +21 -12
  3. package/components/single/src/DileCrudSingle.js +3 -2
  4. package/package.json +2 -2
  5. package/components/ajax-select-crud/__screenshots__/ajax-select-crud-overlay.spec.js/dile-ajax-select-crud-overlay-Selecting-a-result--no-extra-click-required--opens-the-popup-as-soon-as-results-load-and-lets-the-user-pick-without-a-second-click-1.png +0 -0
  6. package/components/ajax-select-crud/__screenshots__/ajax-select-crud-overlay.spec.js/dile-ajax-select-crud-overlay-Uses-axios-instead-of-fetch-fetches-the-initial-value-display-text-through-axios-1.png +0 -0
  7. package/components/ajax-select-crud/__screenshots__/ajax-select-crud-overlay.spec.js/dile-ajax-select-crud-overlay-Uses-axios-instead-of-fetch-requests-through-window-axiosInstance-get--not-the-native-fetch-API-1.png +0 -0
  8. package/components/ajax-select-crud/__screenshots__/zzdebug.spec.js/debug-debug-opened-timing-1.png +0 -0
  9. package/components/crud/__screenshots__/_debug.spec.js/debug-inactive-filter-inspects-state-with-active-false--value-false-1.png +0 -0
  10. package/components/crud/__screenshots__/crud.spec.js/dile-crud-initial-filters-keeps-an-inactive-select-filter-inactive-when-config-uses-the-false-sentinel-1.png +0 -0
  11. package/components/crud/__screenshots__/crud.spec.js/dile-crud-initial-filters-removes-an-active-initial-filter-when-the-chip-close-icon-is-clicked-1.png +0 -0
  12. package/components/crud/__screenshots__/crud.spec.js/dile-crud-initial-filters-syncs-active-filters-from-config-into-the-list-and-form-on-first-render-1.png +0 -0
  13. package/components/many-relation/__screenshots__/many-relation.spec.js/-dile-many-relation---select---dile-ajax-select-crud---loads-the-related-items-list-from-endpointList-on-connect-1.png +0 -0
  14. package/components/many-relation/__screenshots__/many-relation.spec.js/-dile-many-relation---select---dile-ajax-select-crud---removes-an-item-and-dispatches-many-relation-remove-success-1.png +0 -0
  15. package/components/many-relation/__screenshots__/many-relation.spec.js/-dile-many-relation-overlay---select---dile-ajax-select-crud-overlay---loads-the-related-items-list-from-endpointList-on-connect-1.png +0 -0
  16. package/components/many-relation/__screenshots__/many-relation.spec.js/-dile-many-relation-overlay---select---dile-ajax-select-crud-overlay---removes-an-item-and-dispatches-many-relation-remove-success-1.png +0 -0
  17. package/components/select-ajax-simple/__screenshots__/select-ajax-simple.spec.js/dile-select-ajax-simple-supports-getSelectResultList-as-custom-extractor-1.png +0 -0
@@ -67,7 +67,7 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
67
67
  }
68
68
  .elements-container {
69
69
  display: grid;
70
- grid-template-columns: var(--dile-crud-list-elements-container-template-columns, 1fr);
70
+ grid-template-columns: var(--dile-crud-list-elements-container-template-columns, minmax(0, 1fr));
71
71
  gap: var(--dile-crud-list-elements-container-gap, 0);
72
72
  }
73
73
  `
@@ -1,7 +1,9 @@
1
1
  import { LitElement, html, css } from 'lit';
2
2
  import '@dile/ui/components/checkbox/checkbox.js';
3
- import '@dile/ui/components/icon/icon.js';
4
- import { deleteIcon, editIcon, restoreFromTrashIcon } from '@dile/icons';
3
+ import '@dile/ui/components/button/button.js';
4
+ import '@dile/iconlib/material-icons/edit.js';
5
+ import '@dile/iconlib/material-icons/delete.js';
6
+ import '@dile/iconlib/material-icons/restore-from-trash.js';
5
7
 
6
8
  export class DileCrudListItem extends LitElement {
7
9
  static styles = [
@@ -32,15 +34,22 @@ export class DileCrudListItem extends LitElement {
32
34
  display: flex;
33
35
  align-items: center;
34
36
  text-align: right;
35
- --dile-icon-size: 24px;
36
- --dile-icon-color: var(--edit-icon-color, #33ad67);
37
37
  }
38
- dile-icon {
39
- cursor: pointer;
40
- margin: 0 0.2rem;
38
+ dile-button.action-button {
39
+ --dile-button-background-color: transparent;
40
+ --dile-button-border-color: transparent;
41
+ --dile-button-hover-background-color: var(--dile-neutral-color, transparent);
42
+ --dile-button-hover-border-color: transparent;
43
+ --dile-button-icon-color: var(--edit-icon-color, var(--dile-alert-neutral-color, #2889a7));
44
+ --dile-button-padding-y: 0.25rem;
45
+ --dile-button-padding-x: 0.25rem;
46
+ --dile-button-icon-size: 24px;
41
47
  }
42
- dile-icon.delete {
43
- --dile-icon-color: var(--delete-icon-color, #e33);
48
+ dile-button.delete {
49
+ --dile-button-icon-color: var(--delete-icon-color, var(--dile-danger-color, #e33));
50
+ }
51
+ dile-button.restore {
52
+ --dile-button-icon-color: var(--restore-icon-color, var(--dile-alert-success-color, #00900f));
44
53
  }
45
54
  @media(min-width: 550px) {
46
55
  section {
@@ -96,11 +105,11 @@ export class DileCrudListItem extends LitElement {
96
105
  return html`
97
106
  ${this.disableEdit
98
107
  ? ''
99
- : html`<dile-icon .icon="${editIcon}" @click=${this.editClick}></dile-icon>`
108
+ : html`<dile-button class="action-button" icon="material.edit" label="Edit" @click=${this.editClick}></dile-button>`
100
109
  }
101
110
  ${this.disableDelete
102
111
  ? ''
103
- : html`<dile-icon class="delete" .icon="${deleteIcon}" @click=${this.deleteClick}></dile-icon>`
112
+ : html`<dile-button class="action-button delete" icon="material.delete" label="Delete" @click=${this.deleteClick}></dile-button>`
104
113
  }
105
114
  `
106
115
  }
@@ -109,7 +118,7 @@ export class DileCrudListItem extends LitElement {
109
118
  return html`
110
119
  ${this.disableRestore
111
120
  ? ''
112
- : html`<dile-icon .icon="${restoreFromTrashIcon}" @click=${this.restoreClick}></dile-icon>`
121
+ : html`<dile-button class="action-button restore" icon="material.restore-from-trash" label="Restore" @click=${this.restoreClick}></dile-button>`
113
122
  }
114
123
  `
115
124
  }
@@ -1,6 +1,7 @@
1
1
  import { LitElement, html, css } from 'lit';
2
2
  import { formStyles } from '../../../styles/form-styles.js';
3
3
  import '@dile/ui/components/button/button.js';
4
+ import '@dile/ui/components/button/button-icon.js';
4
5
  import '@dile/ui/components/select/select.js';
5
6
  import '@dile/ui/components/modal/modal.js';
6
7
  import '@dile/ui/components/pages/pages.js';
@@ -102,9 +103,9 @@ export class DileCrudSingle extends DileI18nMixin(DileCrudMixin(LitElement)) {
102
103
  ${this.showActionsBar ? html`
103
104
  <div class="actions" @action-success=${this.actionSuccess}>
104
105
  ${!this.config?.customization?.disableEdit ? html`
105
- <dile-button .icon="${editIcon}" @click=${this.edit}>
106
+ <dile-button-icon .icon="${editIcon}" @click=${this.edit}>
106
107
  ${this.startUpdateLabelComputed(this.config.labels.startUpdateAction, this.translations)}
107
- </dile-button>
108
+ </dile-button-icon>
108
109
  ` : ''}
109
110
  ${this.directActionsTemplate}
110
111
  ${this.config?.customization?.disableListActionsOnSingleComponent ? '' : this.actionsTemplate}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dile/crud",
3
- "version": "2.5.19",
3
+ "version": "2.5.21",
4
4
  "description": "Components to create a generic crud system based on Web Components and Lit",
5
5
  "main": "index.js",
6
6
  "type": "module",
@@ -32,5 +32,5 @@
32
32
  "publishConfig": {
33
33
  "access": "public"
34
34
  },
35
- "gitHead": "ef7a8af34ae651e635059d73e81e4c86fd342bd9"
35
+ "gitHead": "f957b502b2f011d38c92d6fef104d5820f84278c"
36
36
  }