@konomi-app/ui 4.2.0 → 5.1.0

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 (7) hide show
  1. package/dist/index.cjs +82 -66
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +38 -42
  4. package/dist/index.d.ts +38 -42
  5. package/dist/index.js +82 -66
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.cts CHANGED
@@ -15,11 +15,7 @@ interface StepItem {
15
15
  label: string;
16
16
  status: StepItemStatus;
17
17
  }
18
- type QueueItemInput = string | {
19
- key: string;
20
- label: string;
21
- };
22
- type StepItemInput = string | {
18
+ type TaskItemInput = string | {
23
19
  key: string;
24
20
  label: string;
25
21
  };
@@ -33,7 +29,7 @@ interface ShowOptions {
33
29
  }
34
30
  interface AlertOptions {
35
31
  type?: AlertIcon;
36
- label?: string;
32
+ title?: string;
37
33
  description?: string;
38
34
  html?: string;
39
35
  showCancelButton?: boolean;
@@ -44,7 +40,7 @@ interface AlertOptions {
44
40
  timer?: number;
45
41
  }
46
42
  interface ConfirmOptions {
47
- label?: string;
43
+ title?: string;
48
44
  description?: string;
49
45
  type?: AlertIcon;
50
46
  confirmButtonText?: string;
@@ -87,24 +83,24 @@ declare class DialogController {
87
83
  hide(): void;
88
84
  alert(optionsOrLabel: string | AlertOptions): Promise<DialogResult>;
89
85
  confirm(optionsOrLabel: string | ConfirmOptions): Promise<boolean>;
90
- loading(label?: string): void;
91
- progress(percent: number): void;
92
- label(label: string): void;
93
- description(description: string): void;
94
- setQueues(items: QueueItemInput[]): void;
95
- queue(items: QueueItemInput[], title?: string): void;
96
- queueTitle(title: string): void;
97
- startQueue(key: string): void;
98
- finishQueue(key: string): void;
86
+ showLoading(label?: string): void;
87
+ setProgress(percent: number): void;
88
+ setLabel(label: string): void;
89
+ setDescription(description: string): void;
90
+ setQueueItems(items: TaskItemInput[]): void;
91
+ showQueue(items: TaskItemInput[], title?: string): void;
92
+ setTitle(title: string): void;
93
+ activateQueue(key: string): void;
94
+ completeQueue(key: string): void;
99
95
  skipQueue(key: string): void;
100
- errorQueue(key: string): void;
101
- clearQueues(): void;
102
- setSteps(items: StepItemInput[]): void;
103
- steps(items: StepItemInput[]): void;
104
- startStep(key: string): void;
105
- finishStep(key: string): void;
96
+ failQueue(key: string): void;
97
+ clearQueue(): void;
98
+ setStepItems(items: TaskItemInput[]): void;
99
+ showSteps(items: TaskItemInput[]): void;
100
+ activateStep(key: string): void;
101
+ completeStep(key: string): void;
106
102
  skipStep(key: string): void;
107
- errorStep(key: string): void;
103
+ failStep(key: string): void;
108
104
  clearSteps(): void;
109
105
  onConfirm(): void;
110
106
  onCancel(): void;
@@ -146,27 +142,27 @@ declare class DialogSingleton {
146
142
  hide(): void;
147
143
  alert(optionsOrLabel: string | AlertOptions): Promise<DialogResult>;
148
144
  confirm(optionsOrLabel: string | ConfirmOptions): Promise<boolean>;
149
- loading(label?: string): void;
150
- progress(percent: number): void;
151
- label(label: string): void;
152
- description(description: string): void;
153
- setQueues(items: QueueItemInput[]): void;
154
- queue(items: QueueItemInput[], title?: string): void;
155
- startQueue(label: string): void;
156
- finishQueue(label: string): void;
157
- skipQueue(label: string): void;
158
- errorQueue(label: string): void;
159
- queueTitle(title: string): void;
160
- clearQueues(): void;
161
- setSteps(items: StepItemInput[]): void;
162
- steps(items: StepItemInput[]): void;
163
- startStep(label: string): void;
164
- finishStep(label: string): void;
165
- skipStep(label: string): void;
166
- errorStep(label: string): void;
145
+ showLoading(label?: string): void;
146
+ setProgress(percent: number): void;
147
+ setLabel(label: string): void;
148
+ setDescription(description: string): void;
149
+ setQueueItems(items: TaskItemInput[]): void;
150
+ showQueue(items: TaskItemInput[], title?: string): void;
151
+ activateQueue(key: string): void;
152
+ completeQueue(key: string): void;
153
+ skipQueue(key: string): void;
154
+ failQueue(key: string): void;
155
+ setTitle(title: string): void;
156
+ clearQueue(): void;
157
+ setStepItems(items: TaskItemInput[]): void;
158
+ showSteps(items: TaskItemInput[]): void;
159
+ activateStep(key: string): void;
160
+ completeStep(key: string): void;
161
+ skipStep(key: string): void;
162
+ failStep(key: string): void;
167
163
  clearSteps(): void;
168
164
  get controller(): DialogController;
169
165
  }
170
166
  declare const dialog: DialogSingleton;
171
167
 
172
- export { type AlertIcon, type AlertOptions, type ConfirmOptions, DialogController, type DialogResult, type DialogState, type DialogType, OverlayDialog, type QueueItem, type QueueItemStatus, type ShowOptions, type StepItem, type StepItemStatus, dialog };
168
+ export { type AlertIcon, type AlertOptions, type ConfirmOptions, DialogController, type DialogResult, type DialogState, type DialogType, OverlayDialog, type QueueItem, type QueueItemStatus, type ShowOptions, type StepItem, type StepItemStatus, type TaskItemInput, dialog };
package/dist/index.d.ts CHANGED
@@ -15,11 +15,7 @@ interface StepItem {
15
15
  label: string;
16
16
  status: StepItemStatus;
17
17
  }
18
- type QueueItemInput = string | {
19
- key: string;
20
- label: string;
21
- };
22
- type StepItemInput = string | {
18
+ type TaskItemInput = string | {
23
19
  key: string;
24
20
  label: string;
25
21
  };
@@ -33,7 +29,7 @@ interface ShowOptions {
33
29
  }
34
30
  interface AlertOptions {
35
31
  type?: AlertIcon;
36
- label?: string;
32
+ title?: string;
37
33
  description?: string;
38
34
  html?: string;
39
35
  showCancelButton?: boolean;
@@ -44,7 +40,7 @@ interface AlertOptions {
44
40
  timer?: number;
45
41
  }
46
42
  interface ConfirmOptions {
47
- label?: string;
43
+ title?: string;
48
44
  description?: string;
49
45
  type?: AlertIcon;
50
46
  confirmButtonText?: string;
@@ -87,24 +83,24 @@ declare class DialogController {
87
83
  hide(): void;
88
84
  alert(optionsOrLabel: string | AlertOptions): Promise<DialogResult>;
89
85
  confirm(optionsOrLabel: string | ConfirmOptions): Promise<boolean>;
90
- loading(label?: string): void;
91
- progress(percent: number): void;
92
- label(label: string): void;
93
- description(description: string): void;
94
- setQueues(items: QueueItemInput[]): void;
95
- queue(items: QueueItemInput[], title?: string): void;
96
- queueTitle(title: string): void;
97
- startQueue(key: string): void;
98
- finishQueue(key: string): void;
86
+ showLoading(label?: string): void;
87
+ setProgress(percent: number): void;
88
+ setLabel(label: string): void;
89
+ setDescription(description: string): void;
90
+ setQueueItems(items: TaskItemInput[]): void;
91
+ showQueue(items: TaskItemInput[], title?: string): void;
92
+ setTitle(title: string): void;
93
+ activateQueue(key: string): void;
94
+ completeQueue(key: string): void;
99
95
  skipQueue(key: string): void;
100
- errorQueue(key: string): void;
101
- clearQueues(): void;
102
- setSteps(items: StepItemInput[]): void;
103
- steps(items: StepItemInput[]): void;
104
- startStep(key: string): void;
105
- finishStep(key: string): void;
96
+ failQueue(key: string): void;
97
+ clearQueue(): void;
98
+ setStepItems(items: TaskItemInput[]): void;
99
+ showSteps(items: TaskItemInput[]): void;
100
+ activateStep(key: string): void;
101
+ completeStep(key: string): void;
106
102
  skipStep(key: string): void;
107
- errorStep(key: string): void;
103
+ failStep(key: string): void;
108
104
  clearSteps(): void;
109
105
  onConfirm(): void;
110
106
  onCancel(): void;
@@ -146,27 +142,27 @@ declare class DialogSingleton {
146
142
  hide(): void;
147
143
  alert(optionsOrLabel: string | AlertOptions): Promise<DialogResult>;
148
144
  confirm(optionsOrLabel: string | ConfirmOptions): Promise<boolean>;
149
- loading(label?: string): void;
150
- progress(percent: number): void;
151
- label(label: string): void;
152
- description(description: string): void;
153
- setQueues(items: QueueItemInput[]): void;
154
- queue(items: QueueItemInput[], title?: string): void;
155
- startQueue(label: string): void;
156
- finishQueue(label: string): void;
157
- skipQueue(label: string): void;
158
- errorQueue(label: string): void;
159
- queueTitle(title: string): void;
160
- clearQueues(): void;
161
- setSteps(items: StepItemInput[]): void;
162
- steps(items: StepItemInput[]): void;
163
- startStep(label: string): void;
164
- finishStep(label: string): void;
165
- skipStep(label: string): void;
166
- errorStep(label: string): void;
145
+ showLoading(label?: string): void;
146
+ setProgress(percent: number): void;
147
+ setLabel(label: string): void;
148
+ setDescription(description: string): void;
149
+ setQueueItems(items: TaskItemInput[]): void;
150
+ showQueue(items: TaskItemInput[], title?: string): void;
151
+ activateQueue(key: string): void;
152
+ completeQueue(key: string): void;
153
+ skipQueue(key: string): void;
154
+ failQueue(key: string): void;
155
+ setTitle(title: string): void;
156
+ clearQueue(): void;
157
+ setStepItems(items: TaskItemInput[]): void;
158
+ showSteps(items: TaskItemInput[]): void;
159
+ activateStep(key: string): void;
160
+ completeStep(key: string): void;
161
+ skipStep(key: string): void;
162
+ failStep(key: string): void;
167
163
  clearSteps(): void;
168
164
  get controller(): DialogController;
169
165
  }
170
166
  declare const dialog: DialogSingleton;
171
167
 
172
- export { type AlertIcon, type AlertOptions, type ConfirmOptions, DialogController, type DialogResult, type DialogState, type DialogType, OverlayDialog, type QueueItem, type QueueItemStatus, type ShowOptions, type StepItem, type StepItemStatus, dialog };
168
+ export { type AlertIcon, type AlertOptions, type ConfirmOptions, DialogController, type DialogResult, type DialogState, type DialogType, OverlayDialog, type QueueItem, type QueueItemStatus, type ShowOptions, type StepItem, type StepItemStatus, type TaskItemInput, dialog };
package/dist/index.js CHANGED
@@ -86,12 +86,13 @@ var DialogController = class {
86
86
  // ─── Alert ───────────────────────────────────────────────
87
87
  alert(optionsOrLabel) {
88
88
  __privateMethod(this, _DialogController_instances, clearTimer_fn).call(this);
89
- const opts = typeof optionsOrLabel === "string" ? { label: optionsOrLabel } : optionsOrLabel;
89
+ const opts = typeof optionsOrLabel === "string" ? { title: optionsOrLabel } : optionsOrLabel;
90
90
  __privateMethod(this, _DialogController_instances, update_fn).call(this, {
91
91
  open: true,
92
92
  dialogType: "alert",
93
93
  icon: opts.type ?? "info",
94
- label: opts.label ?? "",
94
+ title: opts.title ?? "",
95
+ label: "",
95
96
  description: opts.description ?? "",
96
97
  html: opts.html ?? "",
97
98
  showConfirmButton: true,
@@ -108,12 +109,13 @@ var DialogController = class {
108
109
  // ─── Confirm ─────────────────────────────────────────────
109
110
  confirm(optionsOrLabel) {
110
111
  __privateMethod(this, _DialogController_instances, clearTimer_fn).call(this);
111
- const opts = typeof optionsOrLabel === "string" ? { label: optionsOrLabel } : optionsOrLabel;
112
+ const opts = typeof optionsOrLabel === "string" ? { title: optionsOrLabel } : optionsOrLabel;
112
113
  __privateMethod(this, _DialogController_instances, update_fn).call(this, {
113
114
  open: true,
114
115
  dialogType: "confirm",
115
116
  icon: opts.type ?? "warning",
116
- label: opts.label ?? "",
117
+ title: opts.title ?? "",
118
+ label: "",
117
119
  description: opts.description ?? "",
118
120
  showConfirmButton: true,
119
121
  showCancelButton: true,
@@ -127,67 +129,67 @@ var DialogController = class {
127
129
  return __privateMethod(this, _DialogController_instances, createPromise_fn).call(this, null).then((r) => r.isConfirmed);
128
130
  }
129
131
  // ─── Loading helpers ─────────────────────────────────────
130
- loading(label) {
132
+ showLoading(label) {
131
133
  this.show({ type: "loading", label });
132
134
  }
133
- progress(percent) {
135
+ setProgress(percent) {
134
136
  __privateMethod(this, _DialogController_instances, update_fn).call(this, { progress: percent });
135
137
  }
136
- label(label) {
138
+ setLabel(label) {
137
139
  __privateMethod(this, _DialogController_instances, update_fn).call(this, { label });
138
140
  }
139
- description(description) {
141
+ setDescription(description) {
140
142
  __privateMethod(this, _DialogController_instances, update_fn).call(this, { description });
141
143
  }
142
144
  // ─── Queue ───────────────────────────────────────────────
143
- setQueues(items) {
145
+ setQueueItems(items) {
144
146
  __privateMethod(this, _DialogController_instances, update_fn).call(this, {
145
147
  queues: items.map((i) => ({ ...normalizeItemInput(i), status: "pending" }))
146
148
  });
147
149
  }
148
- queue(items, title) {
149
- this.setQueues(items);
150
+ showQueue(items, title) {
151
+ this.setQueueItems(items);
150
152
  this.show({ type: "queue" });
151
153
  if (title !== void 0) __privateMethod(this, _DialogController_instances, update_fn).call(this, { title });
152
154
  }
153
- queueTitle(title) {
155
+ setTitle(title) {
154
156
  __privateMethod(this, _DialogController_instances, update_fn).call(this, { title });
155
157
  }
156
- startQueue(key) {
158
+ activateQueue(key) {
157
159
  __privateMethod(this, _DialogController_instances, updateItemStatus_fn).call(this, "queues", key, "active");
158
160
  }
159
- finishQueue(key) {
161
+ completeQueue(key) {
160
162
  __privateMethod(this, _DialogController_instances, updateItemStatus_fn).call(this, "queues", key, "done");
161
163
  }
162
164
  skipQueue(key) {
163
165
  __privateMethod(this, _DialogController_instances, updateItemStatus_fn).call(this, "queues", key, "skipped");
164
166
  }
165
- errorQueue(key) {
167
+ failQueue(key) {
166
168
  __privateMethod(this, _DialogController_instances, updateItemStatus_fn).call(this, "queues", key, "error");
167
169
  }
168
- clearQueues() {
170
+ clearQueue() {
169
171
  __privateMethod(this, _DialogController_instances, update_fn).call(this, { queues: [] });
170
172
  }
171
173
  // ─── Steps ───────────────────────────────────────────────
172
- setSteps(items) {
174
+ setStepItems(items) {
173
175
  __privateMethod(this, _DialogController_instances, update_fn).call(this, {
174
176
  steps: items.map((i) => ({ ...normalizeItemInput(i), status: "pending" }))
175
177
  });
176
178
  }
177
- steps(items) {
178
- this.setSteps(items);
179
+ showSteps(items) {
180
+ this.setStepItems(items);
179
181
  this.show({ type: "steps" });
180
182
  }
181
- startStep(key) {
183
+ activateStep(key) {
182
184
  __privateMethod(this, _DialogController_instances, updateItemStatus_fn).call(this, "steps", key, "active");
183
185
  }
184
- finishStep(key) {
186
+ completeStep(key) {
185
187
  __privateMethod(this, _DialogController_instances, updateItemStatus_fn).call(this, "steps", key, "done");
186
188
  }
187
189
  skipStep(key) {
188
190
  __privateMethod(this, _DialogController_instances, updateItemStatus_fn).call(this, "steps", key, "skipped");
189
191
  }
190
- errorStep(key) {
192
+ failStep(key) {
191
193
  __privateMethod(this, _DialogController_instances, updateItemStatus_fn).call(this, "steps", key, "error");
192
194
  }
193
195
  clearSteps() {
@@ -360,8 +362,8 @@ var overlayStyles = css`
360
362
  display: flex;
361
363
  flex-direction: column;
362
364
  align-items: center;
363
- justify-content: center;
364
- gap: 16px;
365
+ justify-content: flex-start;
366
+ gap: 0;
365
367
  padding: var(--dialog-card-padding);
366
368
  background-color: var(--dialog-card-bg);
367
369
  border-radius: 0;
@@ -382,6 +384,18 @@ var overlayStyles = css`
382
384
  }
383
385
  }
384
386
 
387
+ /* ─── Card Body ─── */
388
+
389
+ .card-body {
390
+ flex: 1;
391
+ display: flex;
392
+ flex-direction: column;
393
+ align-items: center;
394
+ justify-content: center;
395
+ gap: 16px;
396
+ width: 100%;
397
+ }
398
+
385
399
  /* ─── Spinner ─── */
386
400
 
387
401
  .spinner {
@@ -501,11 +515,11 @@ var overlayStyles = css`
501
515
  /* ─── Text ─── */
502
516
 
503
517
  .dialog-title {
504
- font-size: 14px;
518
+ font-size: 18px;
505
519
  font-weight: 600;
506
520
  color: #374151;
507
521
  text-align: center;
508
- margin: 0;
522
+ margin: 0 0 16px;
509
523
  word-break: break-word;
510
524
  width: 100%;
511
525
  padding-bottom: 12px;
@@ -513,8 +527,8 @@ var overlayStyles = css`
513
527
  }
514
528
 
515
529
  .label {
516
- font-size: 18px;
517
- font-weight: 600;
530
+ font-size: 16px;
531
+ font-weight: 400;
518
532
  color: #1f2937;
519
533
  text-align: center;
520
534
  margin: 0;
@@ -1030,7 +1044,7 @@ var OverlayDialog = class extends LitElement {
1030
1044
  case "alert":
1031
1045
  case "confirm":
1032
1046
  return html`
1033
- ${this._renderIcon(s.icon)} ${s.label ? html`<p class="label">${s.label}</p>` : nothing}
1047
+ ${this._renderIcon(s.icon)} ${s.title ? html`<p class="label">${s.title}</p>` : nothing}
1034
1048
  ${s.description ? html`<p class="description">${s.description}</p>` : nothing}
1035
1049
  ${s.html ? html`<div class="html-content">${unsafeHTML(s.html)}</div>` : nothing}
1036
1050
  ${this._renderButtons()}
@@ -1051,10 +1065,12 @@ var OverlayDialog = class extends LitElement {
1051
1065
  }
1052
1066
  render() {
1053
1067
  const s = this._state;
1068
+ const showHeaderTitle = s.title && s.dialogType !== "alert" && s.dialogType !== "confirm";
1054
1069
  return html`
1055
1070
  <div class="backdrop" ?data-open=${s.open} @click=${this._onBackdropClick}>
1056
1071
  <div class="card">
1057
- ${s.title ? html`<p class="dialog-title">${s.title}</p>` : nothing} ${this._renderBody()}
1072
+ ${showHeaderTitle ? html`<p class="dialog-title">${s.title}</p>` : nothing}
1073
+ <div class="card-body">${this._renderBody()}</div>
1058
1074
  <div
1059
1075
  class="progress-bar"
1060
1076
  style="width:${s.progress ?? 0}%;opacity:${s.progress !== null ? 1 : 0}"
@@ -1101,64 +1117,64 @@ var DialogSingleton = class {
1101
1117
  return __privateGet(this, _controller).confirm(optionsOrLabel);
1102
1118
  }
1103
1119
  // ─── Loading helpers ─────────────────────────────────────
1104
- loading(label) {
1120
+ showLoading(label) {
1105
1121
  __privateMethod(this, _DialogSingleton_instances, ensureElement_fn).call(this);
1106
- __privateGet(this, _controller).loading(label);
1122
+ __privateGet(this, _controller).showLoading(label);
1107
1123
  }
1108
- progress(percent) {
1109
- __privateGet(this, _controller).progress(percent);
1124
+ setProgress(percent) {
1125
+ __privateGet(this, _controller).setProgress(percent);
1110
1126
  }
1111
- label(label) {
1112
- __privateGet(this, _controller).label(label);
1127
+ setLabel(label) {
1128
+ __privateGet(this, _controller).setLabel(label);
1113
1129
  }
1114
- description(description) {
1115
- __privateGet(this, _controller).description(description);
1130
+ setDescription(description) {
1131
+ __privateGet(this, _controller).setDescription(description);
1116
1132
  }
1117
1133
  // ─── Queue ───────────────────────────────────────────────
1118
- setQueues(items) {
1119
- __privateGet(this, _controller).setQueues(items);
1134
+ setQueueItems(items) {
1135
+ __privateGet(this, _controller).setQueueItems(items);
1120
1136
  }
1121
- queue(items, title) {
1137
+ showQueue(items, title) {
1122
1138
  __privateMethod(this, _DialogSingleton_instances, ensureElement_fn).call(this);
1123
- __privateGet(this, _controller).queue(items, title);
1139
+ __privateGet(this, _controller).showQueue(items, title);
1124
1140
  }
1125
- startQueue(label) {
1126
- __privateGet(this, _controller).startQueue(label);
1141
+ activateQueue(key) {
1142
+ __privateGet(this, _controller).activateQueue(key);
1127
1143
  }
1128
- finishQueue(label) {
1129
- __privateGet(this, _controller).finishQueue(label);
1144
+ completeQueue(key) {
1145
+ __privateGet(this, _controller).completeQueue(key);
1130
1146
  }
1131
- skipQueue(label) {
1132
- __privateGet(this, _controller).skipQueue(label);
1147
+ skipQueue(key) {
1148
+ __privateGet(this, _controller).skipQueue(key);
1133
1149
  }
1134
- errorQueue(label) {
1135
- __privateGet(this, _controller).errorQueue(label);
1150
+ failQueue(key) {
1151
+ __privateGet(this, _controller).failQueue(key);
1136
1152
  }
1137
- queueTitle(title) {
1138
- __privateGet(this, _controller).queueTitle(title);
1153
+ setTitle(title) {
1154
+ __privateGet(this, _controller).setTitle(title);
1139
1155
  }
1140
- clearQueues() {
1141
- __privateGet(this, _controller).clearQueues();
1156
+ clearQueue() {
1157
+ __privateGet(this, _controller).clearQueue();
1142
1158
  }
1143
1159
  // ─── Steps ───────────────────────────────────────────────
1144
- setSteps(items) {
1145
- __privateGet(this, _controller).setSteps(items);
1160
+ setStepItems(items) {
1161
+ __privateGet(this, _controller).setStepItems(items);
1146
1162
  }
1147
- steps(items) {
1163
+ showSteps(items) {
1148
1164
  __privateMethod(this, _DialogSingleton_instances, ensureElement_fn).call(this);
1149
- __privateGet(this, _controller).steps(items);
1165
+ __privateGet(this, _controller).showSteps(items);
1150
1166
  }
1151
- startStep(label) {
1152
- __privateGet(this, _controller).startStep(label);
1167
+ activateStep(key) {
1168
+ __privateGet(this, _controller).activateStep(key);
1153
1169
  }
1154
- finishStep(label) {
1155
- __privateGet(this, _controller).finishStep(label);
1170
+ completeStep(key) {
1171
+ __privateGet(this, _controller).completeStep(key);
1156
1172
  }
1157
- skipStep(label) {
1158
- __privateGet(this, _controller).skipStep(label);
1173
+ skipStep(key) {
1174
+ __privateGet(this, _controller).skipStep(key);
1159
1175
  }
1160
- errorStep(label) {
1161
- __privateGet(this, _controller).errorStep(label);
1176
+ failStep(key) {
1177
+ __privateGet(this, _controller).failStep(key);
1162
1178
  }
1163
1179
  clearSteps() {
1164
1180
  __privateGet(this, _controller).clearSteps();