@dile/crud 1.5.3 → 1.5.4

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.
@@ -137,6 +137,7 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
137
137
  numItems=${this.numItems}
138
138
  ?disablePagination=${this.config.customization?.disablePagination}
139
139
  language="${this.language}"
140
+ maxBatchActionItems=${this.config.maxBatchActionItems}
140
141
  ></dile-crud-select-all>
141
142
  `
142
143
  }
@@ -71,6 +71,7 @@ export class DileCrudSelectAll extends DileI18nMixin(LitElement) {
71
71
  pageSize: { type: Number },
72
72
  numItems: { type: Number },
73
73
  disablePagination: { type: Boolean },
74
+ maxBatchActionItems: { type: Number },
74
75
  };
75
76
  }
76
77
 
@@ -82,36 +83,60 @@ export class DileCrudSelectAll extends DileI18nMixin(LitElement) {
82
83
 
83
84
  render() {
84
85
  return html`
85
- <dile-menu-overlay>
86
- <dile-button-icon no-wrap small .icon="${this.selectIcon(this.mainChecked)}" slot="trigger">
87
- <div>${this.translations.select} <span class="desk">${this.translations.all}</span></div>
88
- <dile-icon .icon=${arrowDropDownIcon} class="drop"></dile-icon>
89
- </dile-button-icon>
90
- <div slot="content" class="content">
91
- ${this.disablePagination
92
- ? ''
93
- : html`
94
- <p class="option" @click=${this.checkPageItems}>
95
- <dile-icon .icon=${this.selectIcon(this.pageChecked)} class="drop"></dile-icon>
96
- <span>
97
- ${this.translations.all_in_page}
98
- (${this.pageSize > this.numItems ? this.numItems : this.pageSize})
99
- </span>
100
- </p>
101
- `
102
- }
103
- <p class="option" @click=${this.checkAllItems}>
104
- <dile-icon .icon=${this.selectIcon(this.allChecked)} class="drop"></dile-icon>
105
- <span>
106
- ${this.translations.select_matching}
107
- (${this.numItems})
108
- </span>
109
- </p>
110
- </div>
111
- </dile-menu-overlay>
86
+ ${this.shouldShowElementSelection(
87
+ this.maxBatchActionItems,
88
+ this.disablePagination,
89
+ this.pageSize,
90
+ this.numItems
91
+ )
92
+ ? this.elementTemplate
93
+ : ''
94
+ }
112
95
  `;
113
96
  }
114
97
 
98
+ get elementTemplate() {
99
+ return html`
100
+ <dile-menu-overlay>
101
+ <dile-button-icon no-wrap small .icon="${this.selectIcon(this.mainChecked)}" slot="trigger">
102
+ <div>${this.translations.select} <span class="desk">${this.translations.all}</span></div>
103
+ <dile-icon .icon=${arrowDropDownIcon} class="drop"></dile-icon>
104
+ </dile-button-icon>
105
+ <div slot="content" class="content">
106
+ ${this.disablePagination
107
+ ? ''
108
+ : html`
109
+ <p class="option" @click=${this.checkPageItems}>
110
+ <dile-icon .icon=${this.selectIcon(this.pageChecked)} class="drop"></dile-icon>
111
+ <span>
112
+ ${this.translations.all_in_page}
113
+ (${this.pageSize > this.numItems ? this.numItems : this.pageSize})
114
+ </span>
115
+ </p>
116
+ `
117
+ }
118
+ ${this.numItems <= this.maxBatchActionItems
119
+ ? html`
120
+ <p class="option" @click=${this.checkAllItems}>
121
+ <dile-icon .icon=${this.selectIcon(this.allChecked)} class="drop"></dile-icon>
122
+ <span>
123
+ ${this.translations.select_matching}
124
+ (${this.numItems})
125
+ </span>
126
+ </p>
127
+ `
128
+ : ''
129
+ }
130
+ </div>
131
+ </dile-menu-overlay>
132
+ `;
133
+ }
134
+
135
+ shouldShowElementSelection(maxBatchActionItems, disablePagination, pageSize, numItems) {
136
+ console.log(maxBatchActionItems, disablePagination, pageSize, numItems, disablePagination ? maxBatchActionItems >= numItems : maxBatchActionItems >= pageSize);
137
+ return disablePagination ? maxBatchActionItems >= numItems : maxBatchActionItems >= pageSize;
138
+ }
139
+
115
140
  selectIcon(checked) {
116
141
  return checked ? checkboxCheckedIcon : checkboxBlankIcon;
117
142
  }
@@ -8,11 +8,10 @@ export class DileCrudFiltersList extends LitElement {
8
8
  display: block;
9
9
  }
10
10
  div {
11
+ margin: var(--filter-list-margin, 0 0.5rem);
11
12
  display: flex;
12
13
  flex-wrap: wrap;
13
- }
14
- dile-crud-filters-list-item {
15
- margin-right: 0.5rem;
14
+ gap: var(--filter-list-gap, 0.5rem);
16
15
  }
17
16
  `
18
17
  ];
@@ -15,6 +15,7 @@ export const defaultConfig = {
15
15
  available: [10, 25, 50],
16
16
  initial: 25,
17
17
  },
18
+ maxBatchActionItems: 100,
18
19
  customization: {
19
20
  disableKeywordSearch: true,
20
21
  hideCountSummary: false,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dile/crud",
3
- "version": "1.5.3",
3
+ "version": "1.5.4",
4
4
  "description": "Components to create a generic crud system based on Web Components and Lit",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -24,12 +24,12 @@
24
24
  },
25
25
  "homepage": "https://dile-components.com/",
26
26
  "dependencies": {
27
- "@dile/ui": "^2.18.0",
27
+ "@dile/ui": "^2.18.1",
28
28
  "axios": "^1.13.0",
29
29
  "lit": "^2.7.0 || ^3.0.0"
30
30
  },
31
31
  "publishConfig": {
32
32
  "access": "public"
33
33
  },
34
- "gitHead": "0d71120f99b23375930d042130aecbf95ffe8602"
34
+ "gitHead": "261c6a1e8a357ab3c937d9d1155446d58edcd199"
35
35
  }