@dile/ui 3.6.3 → 3.6.5

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 (3) hide show
  1. package/components/confirm/src/DileConfirm.js +13 -2
  2. package/components/input/src/DileInputIcon.js +61 -47
  3. package/package.json +2 -2
package/components/confirm/src/DileConfirm.js CHANGED
@@ -37,6 +37,11 @@ export class DileConfirm extends LitElement {
37
37
  white-space: nowrap;
38
38
  display: inline-block;
39
39
  }
40
+ .actions a.disabled {
41
+ opacity: 0.6;
42
+ cursor: not-allowed;
43
+ pointer-events: none;
44
+ }
40
45
  `;
41
46
  }
42
47
 
@@ -56,6 +61,7 @@ export class DileConfirm extends LitElement {
56
61
  this.cancelLabel = "Cancell";
57
62
  this.opened = false;
58
63
  this.blocking = false;
64
+ this._isProcessing = false;
59
65
  }
60
66
 
61
67
  render() {
@@ -68,10 +74,10 @@ export class DileConfirm extends LitElement {
68
74
  >
69
75
  <slot></slot>
70
76
  <div class="actions">
71
- <a href="#" class="button cancel" @click="${this._cancelHandler}"
77
+ <a href="#" class="button cancel ${this._isProcessing ? 'disabled' : ''}" @click="${this._cancelHandler}"
72
78
  >${this.cancelLabel}</a
73
79
  >
74
- <a href="#" class="button accept" @click="${this._acceptHandler}"
80
+ <a href="#" class="button accept ${this._isProcessing ? 'disabled' : ''}" @click="${this._acceptHandler}"
75
81
  >${this.acceptLabel}</a
76
82
  >
77
83
  </div>
@@ -81,10 +87,14 @@ export class DileConfirm extends LitElement {
81
87
 
82
88
  _cancelHandler(e) {
83
89
  e.preventDefault();
90
+ if (this._isProcessing) return;
91
+ this._isProcessing = true;
84
92
  this.cancel();
85
93
  }
86
94
  _acceptHandler(e) {
87
95
  e.preventDefault();
96
+ if (this._isProcessing) return;
97
+ this._isProcessing = true;
88
98
  this.accept();
89
99
  }
90
100
 
@@ -94,6 +104,7 @@ export class DileConfirm extends LitElement {
94
104
 
95
105
  close() {
96
106
  this.modal.close();
107
+ this._isProcessing = false;
97
108
  }
98
109
 
99
110
  firstUpdated() {
package/components/input/src/DileInputIcon.js CHANGED
@@ -28,7 +28,9 @@ export class DileInputIcon extends DileInput {
28
28
  ...super.styles,
29
29
  css`
30
30
  .input-icon-btn {
31
+ box-sizing: border-box;
31
32
  background: none;
33
+ background-color: var(--dile-input-icon-background-color, var(--dile-input-icon-bg, transparent));
32
34
  border: none;
33
35
  cursor: pointer;
34
36
  padding: var(--dile-input-icon-padding, var(--dile-input-padding, 5px));
@@ -37,16 +39,18 @@ export class DileInputIcon extends DileInput {
37
39
  display: flex;
38
40
  align-items: center;
39
41
  justify-content: center;
40
- width: var(--dile-input-icon-width, 32px);
41
- height: var(--dile-input-icon-height, 32px);
42
+ width: var(--dile-input-icon-width, auto);
43
+ height: var(--dile-input-icon-height, auto);
44
+ min-width: var(--dile-input-icon-width, 32px);
45
+ min-height: var(--dile-input-icon-height, 32px);
42
46
  border-radius: var(--dile-input-icon-border-radius, var(--dile-input-border-radius, 5px));
43
47
  transition: var(--dile-input-icon-transition, background-color 0.2s);
44
48
  }
45
49
  .input-icon-btn:hover {
46
- background-color: var(--dile-input-icon-hover-bg, rgba(0, 0, 0, 0.05));
50
+ background-color: var(--dile-input-icon-hover-background-color, var(--dile-input-icon-hover-bg, rgba(0, 0, 0, 0.05)));
47
51
  }
48
52
  .input-icon-btn:active {
49
- background-color: var(--dile-input-icon-active-bg, rgba(0, 0, 0, 0.1));
53
+ background-color: var(--dile-input-icon-active-background-color, var(--dile-input-icon-active-bg, rgba(0, 0, 0, 0.1)));
50
54
  }
51
55
  .input-icon-btn:disabled {
52
56
  cursor: not-allowed;
@@ -71,44 +75,62 @@ export class DileInputIcon extends DileInput {
71
75
  }
72
76
 
73
77
  render() {
74
- const inputType = this.type || 'text';
75
-
76
78
  return html`
77
- <div>
78
- ${this.label
79
- ? html`<label for="textField">${this.label}</label>`
80
- : ''
81
- }
82
- <section class="for-input">
83
- <input
84
- type="${inputType}"
85
- id="textField"
86
- name="${this.name}"
87
- placeholder="${this.placeholder}"
88
- ?disabled="${this.disabled}"
89
- ?readonly="${this.readonly}"
90
- @keypress="${this._lookForEnter}"
91
- @input="${this._input}"
92
- @blur="${this.doBlur}"
93
- @focus="${this.doFocus}"
94
- .value="${this.value}"
95
- class="${this.errored ? 'errored' : ''}"
96
- autocomplete="${this.disableAutocomplete ? 'off' : 'on'}"
97
- ?selectonfocus="${this.selectOnFocus}"
98
- >
99
- ${this.icon
100
- ? this.renderIconButton()
101
- : ''
102
- }
103
- </section>
104
- ${this.message
105
- ? html`<div class="message ${this.errored ? 'errored-msg' : ''}"><span>${this.message}</span></div>`
106
- : ''
107
- }
108
- </div>
79
+ <main>
80
+ ${this.labelTemplate}
81
+ <section class="for-input">
82
+ ${this.inputTemplate}
83
+ ${this.icon ? this.renderIconButton() : ''}
84
+ ${this.labelRight ? html`<span class="labelright">${this.labelRight}</span>` : ''}
85
+ </section>
86
+ ${this.messageTemplate}
87
+ </main>
88
+ `;
89
+ }
90
+
91
+ get labelTemplate() {
92
+ return this.label
93
+ ? html`<label for="textField">${this.label}</label>`
94
+ : '';
95
+ }
96
+
97
+ get inputTemplate() {
98
+ return html`
99
+ <input
100
+ type="${this.availableType(this.type)}"
101
+ id="textField"
102
+ name="${this.name}"
103
+ placeholder="${this.placeholder}"
104
+ ?disabled="${this.disabled}"
105
+ ?readonly="${this.readonly}"
106
+ autocomplete="${this.disableAutocomplete ? 'off' : 'on'}"
107
+ .value="${this.computeValue(this.value)}"
108
+ class="${this.errored ? 'errored' : ''}"
109
+ @keypress="${this._lookForEnter}"
110
+ @input="${this._input}"
111
+ @blur="${this.doBlur}"
112
+ @focus="${this.doFocus}"
113
+ ?selectonfocus="${this.selectOnFocus}"
114
+ >
109
115
  `;
110
116
  }
111
117
 
118
+ get iconTemplate() {
119
+ return this.renderIconlibIcon(this.icon);
120
+ }
121
+
122
+ get buttonTemplate() {
123
+ return html`<button
124
+ class="input-icon-btn"
125
+ type="button"
126
+ @click="${this._handleIconClick}"
127
+ ?disabled="${this.disabled}"
128
+ aria-label="Icon action button"
129
+ >
130
+ ${this.iconTemplate}
131
+ </button>`;
132
+ }
133
+
112
134
  /**
113
135
  * Renders an icon using dile-iconlib
114
136
  * Supports format "family.name" (e.g., "lucide.eye", "material.home")
@@ -137,15 +159,7 @@ export class DileInputIcon extends DileInput {
137
159
  * @returns {TemplateResult}
138
160
  */
139
161
  renderIconButton() {
140
- const button = html`<button
141
- class="input-icon-btn"
142
- type="button"
143
- @click="${this._handleIconClick}"
144
- ?disabled="${this.disabled}"
145
- aria-label="Icon action button"
146
- >
147
- ${this.renderIconlibIcon(this.icon)}
148
- </button>`;
162
+ const button = this.buttonTemplate;
149
163
 
150
164
  // If tooltip is defined, wrap button with dile-tooltip
151
165
  if (this.tooltip) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dile/ui",
3
- "version": "3.6.3",
3
+ "version": "3.6.5",
4
4
  "description": "UI Core components from dile-components.",
5
5
  "main": "index.js",
6
6
  "type": "module",
@@ -28,5 +28,5 @@
28
28
  "publishConfig": {
29
29
  "access": "public"
30
30
  },
31
- "gitHead": "d9fcd6a43318a4407751cdd25f9361502e9d2619"
31
+ "gitHead": "ee029c01956874746ff8c78f02f4868ef4ce4875"
32
32
  }