@konomi-app/ui 5.2.1 → 5.3.2

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 +886 -6
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +118 -2
  4. package/dist/index.d.ts +118 -2
  5. package/dist/index.js +886 -6
  6. package/dist/index.js.map +1 -1
  7. package/package.json +11 -4
package/dist/index.d.cts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as lit from 'lit';
2
2
  import { LitElement, TemplateResult } from 'lit';
3
3
 
4
- type DialogType = 'loading' | 'alert' | 'confirm' | 'queue' | 'steps';
4
+ type DialogType = 'loading' | 'alert' | 'confirm' | 'queue' | 'steps' | 'form' | 'step-form';
5
5
  type AlertIcon = 'success' | 'error' | 'warning' | 'info';
6
6
  type QueueItemStatus = 'pending' | 'active' | 'done' | 'skipped' | 'error';
7
7
  type StepItemStatus = 'pending' | 'active' | 'done' | 'skipped' | 'error';
@@ -19,6 +19,78 @@ type TaskItemInput = string | {
19
19
  key: string;
20
20
  label: string;
21
21
  };
22
+ type FormInputType = 'text' | 'number' | 'checkbox' | 'select' | 'date' | 'email' | 'url';
23
+ interface FormFieldMeta {
24
+ key: string;
25
+ inputType: FormInputType;
26
+ label: string;
27
+ description: string;
28
+ required: boolean;
29
+ options: string[];
30
+ placeholder: string;
31
+ min?: number;
32
+ max?: number;
33
+ minLength?: number;
34
+ maxLength?: number;
35
+ defaultValue: unknown;
36
+ }
37
+ interface FormFieldGroup {
38
+ label?: string;
39
+ fields: string[];
40
+ columns?: number;
41
+ }
42
+ interface FormLayout {
43
+ columns?: number;
44
+ gap?: string;
45
+ fieldOrder?: string[];
46
+ groups?: FormFieldGroup[];
47
+ }
48
+ interface FormOptions<T = Record<string, unknown>> {
49
+ title?: string;
50
+ description?: string;
51
+ confirmButtonText?: string;
52
+ cancelButtonText?: string;
53
+ allowOutsideClick?: boolean;
54
+ allowEscapeKey?: boolean;
55
+ layout?: FormLayout;
56
+ defaultValues?: Partial<T>;
57
+ validateOnChange?: boolean;
58
+ validateOnBlur?: boolean;
59
+ }
60
+ /** フォームを持つ1ステップの描画状態 (コントローラー内部で管理) */
61
+ interface StepFormItem {
62
+ key: string;
63
+ label: string;
64
+ description: string;
65
+ fields: FormFieldMeta[];
66
+ values: Record<string, unknown>;
67
+ errors: Record<string, string>;
68
+ touched: Record<string, boolean>;
69
+ layout: FormLayout;
70
+ }
71
+ /** `showStepForm()` に渡す各ステップの定義 */
72
+ interface StepFormStepInput {
73
+ key: string;
74
+ label: string;
75
+ description?: string;
76
+ /** Zod スキーマ。省略するとフォームなし (説明のみ) のステップになる */
77
+ schema?: {
78
+ _def: any;
79
+ safeParse: (data: unknown) => any;
80
+ };
81
+ layout?: FormLayout;
82
+ defaultValues?: Record<string, unknown>;
83
+ }
84
+ /** `showStepForm()` のオプション */
85
+ interface StepFormOptions {
86
+ title?: string;
87
+ allowOutsideClick?: boolean;
88
+ allowEscapeKey?: boolean;
89
+ nextButtonText?: string;
90
+ prevButtonText?: string;
91
+ submitButtonText?: string;
92
+ cancelButtonText?: string;
93
+ }
22
94
  interface ShowOptions {
23
95
  type: DialogType;
24
96
  label?: string;
@@ -71,6 +143,18 @@ interface DialogState {
71
143
  steps: StepItem[];
72
144
  timer: number | null;
73
145
  title: string;
146
+ formFields: FormFieldMeta[];
147
+ formValues: Record<string, unknown>;
148
+ formErrors: Record<string, string>;
149
+ formTouched: Record<string, boolean>;
150
+ formLayout: FormLayout;
151
+ formValidateOnChange: boolean;
152
+ formValidateOnBlur: boolean;
153
+ stepFormSteps: StepFormItem[];
154
+ stepFormCurrentIndex: number;
155
+ stepFormNextText: string;
156
+ stepFormPrevText: string;
157
+ stepFormSubmitText: string;
74
158
  }
75
159
 
76
160
  type Listener = (state: DialogState) => void;
@@ -102,6 +186,18 @@ declare class DialogController {
102
186
  skipStep(key: string): void;
103
187
  failStep(key: string): void;
104
188
  clearSteps(): void;
189
+ form<TSchema extends {
190
+ _output: unknown;
191
+ safeParse: (data: unknown) => any;
192
+ _def: any;
193
+ }>(schema: TSchema, options?: FormOptions<TSchema['_output']>): Promise<TSchema['_output'] | null>;
194
+ updateFormField(key: string, value: unknown): void;
195
+ touchFormField(key: string): void;
196
+ showStepForm(steps: StepFormStepInput[], options?: StepFormOptions): Promise<Record<string, unknown> | null>;
197
+ onStepNext(): void;
198
+ onStepPrev(): void;
199
+ updateStepFormField(fieldKey: string, value: unknown): void;
200
+ touchStepFormField(fieldKey: string): void;
105
201
  onConfirm(): void;
106
202
  onCancel(): void;
107
203
  onOutsideClick(): void;
@@ -129,7 +225,17 @@ declare class OverlayDialog extends LitElement {
129
225
  private _renderQueueList;
130
226
  private _renderStepsHeader;
131
227
  private _renderStepsList;
228
+ private _createFormContext;
229
+ private _createStepFormContext;
230
+ private _getOrderedFields;
231
+ private _renderFormGrid;
232
+ private _renderGroupedForm;
233
+ private _renderForm;
234
+ private _renderFormField;
235
+ private _renderFormInput;
132
236
  private _renderButtons;
237
+ private _renderStepFormButtons;
238
+ private _deriveStepItems;
133
239
  private _renderBody;
134
240
  render(): TemplateResult;
135
241
  }
@@ -145,6 +251,16 @@ declare class DialogSingleton {
145
251
  hide(): void;
146
252
  alert(optionsOrLabel: string | AlertOptions): Promise<DialogResult>;
147
253
  confirm(optionsOrLabel: string | ConfirmOptions): Promise<boolean>;
254
+ form<TSchema extends {
255
+ _output: unknown;
256
+ safeParse: (data: unknown) => any;
257
+ _def: any;
258
+ }>(schema: TSchema, options?: FormOptions<TSchema['_output']>): Promise<TSchema['_output'] | null>;
259
+ showStepForm(steps: StepFormStepInput[], options?: StepFormOptions): Promise<Record<string, unknown> | null>;
260
+ onStepNext(): void;
261
+ onStepPrev(): void;
262
+ updateStepFormField(fieldKey: string, value: unknown): void;
263
+ touchStepFormField(fieldKey: string): void;
148
264
  showLoading(label?: string): void;
149
265
  setProgress(percent: number): void;
150
266
  setLabel(label: string): void;
@@ -168,4 +284,4 @@ declare class DialogSingleton {
168
284
  }
169
285
  declare const dialog: DialogSingleton;
170
286
 
171
- 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 };
287
+ export { type AlertIcon, type AlertOptions, type ConfirmOptions, DialogController, type DialogResult, type DialogState, type DialogType, type FormFieldGroup, type FormFieldMeta, type FormInputType, type FormLayout, type FormOptions, OverlayDialog, type QueueItem, type QueueItemStatus, type ShowOptions, type StepFormItem, type StepFormOptions, type StepFormStepInput, type StepItem, type StepItemStatus, type TaskItemInput, dialog };
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as lit from 'lit';
2
2
  import { LitElement, TemplateResult } from 'lit';
3
3
 
4
- type DialogType = 'loading' | 'alert' | 'confirm' | 'queue' | 'steps';
4
+ type DialogType = 'loading' | 'alert' | 'confirm' | 'queue' | 'steps' | 'form' | 'step-form';
5
5
  type AlertIcon = 'success' | 'error' | 'warning' | 'info';
6
6
  type QueueItemStatus = 'pending' | 'active' | 'done' | 'skipped' | 'error';
7
7
  type StepItemStatus = 'pending' | 'active' | 'done' | 'skipped' | 'error';
@@ -19,6 +19,78 @@ type TaskItemInput = string | {
19
19
  key: string;
20
20
  label: string;
21
21
  };
22
+ type FormInputType = 'text' | 'number' | 'checkbox' | 'select' | 'date' | 'email' | 'url';
23
+ interface FormFieldMeta {
24
+ key: string;
25
+ inputType: FormInputType;
26
+ label: string;
27
+ description: string;
28
+ required: boolean;
29
+ options: string[];
30
+ placeholder: string;
31
+ min?: number;
32
+ max?: number;
33
+ minLength?: number;
34
+ maxLength?: number;
35
+ defaultValue: unknown;
36
+ }
37
+ interface FormFieldGroup {
38
+ label?: string;
39
+ fields: string[];
40
+ columns?: number;
41
+ }
42
+ interface FormLayout {
43
+ columns?: number;
44
+ gap?: string;
45
+ fieldOrder?: string[];
46
+ groups?: FormFieldGroup[];
47
+ }
48
+ interface FormOptions<T = Record<string, unknown>> {
49
+ title?: string;
50
+ description?: string;
51
+ confirmButtonText?: string;
52
+ cancelButtonText?: string;
53
+ allowOutsideClick?: boolean;
54
+ allowEscapeKey?: boolean;
55
+ layout?: FormLayout;
56
+ defaultValues?: Partial<T>;
57
+ validateOnChange?: boolean;
58
+ validateOnBlur?: boolean;
59
+ }
60
+ /** フォームを持つ1ステップの描画状態 (コントローラー内部で管理) */
61
+ interface StepFormItem {
62
+ key: string;
63
+ label: string;
64
+ description: string;
65
+ fields: FormFieldMeta[];
66
+ values: Record<string, unknown>;
67
+ errors: Record<string, string>;
68
+ touched: Record<string, boolean>;
69
+ layout: FormLayout;
70
+ }
71
+ /** `showStepForm()` に渡す各ステップの定義 */
72
+ interface StepFormStepInput {
73
+ key: string;
74
+ label: string;
75
+ description?: string;
76
+ /** Zod スキーマ。省略するとフォームなし (説明のみ) のステップになる */
77
+ schema?: {
78
+ _def: any;
79
+ safeParse: (data: unknown) => any;
80
+ };
81
+ layout?: FormLayout;
82
+ defaultValues?: Record<string, unknown>;
83
+ }
84
+ /** `showStepForm()` のオプション */
85
+ interface StepFormOptions {
86
+ title?: string;
87
+ allowOutsideClick?: boolean;
88
+ allowEscapeKey?: boolean;
89
+ nextButtonText?: string;
90
+ prevButtonText?: string;
91
+ submitButtonText?: string;
92
+ cancelButtonText?: string;
93
+ }
22
94
  interface ShowOptions {
23
95
  type: DialogType;
24
96
  label?: string;
@@ -71,6 +143,18 @@ interface DialogState {
71
143
  steps: StepItem[];
72
144
  timer: number | null;
73
145
  title: string;
146
+ formFields: FormFieldMeta[];
147
+ formValues: Record<string, unknown>;
148
+ formErrors: Record<string, string>;
149
+ formTouched: Record<string, boolean>;
150
+ formLayout: FormLayout;
151
+ formValidateOnChange: boolean;
152
+ formValidateOnBlur: boolean;
153
+ stepFormSteps: StepFormItem[];
154
+ stepFormCurrentIndex: number;
155
+ stepFormNextText: string;
156
+ stepFormPrevText: string;
157
+ stepFormSubmitText: string;
74
158
  }
75
159
 
76
160
  type Listener = (state: DialogState) => void;
@@ -102,6 +186,18 @@ declare class DialogController {
102
186
  skipStep(key: string): void;
103
187
  failStep(key: string): void;
104
188
  clearSteps(): void;
189
+ form<TSchema extends {
190
+ _output: unknown;
191
+ safeParse: (data: unknown) => any;
192
+ _def: any;
193
+ }>(schema: TSchema, options?: FormOptions<TSchema['_output']>): Promise<TSchema['_output'] | null>;
194
+ updateFormField(key: string, value: unknown): void;
195
+ touchFormField(key: string): void;
196
+ showStepForm(steps: StepFormStepInput[], options?: StepFormOptions): Promise<Record<string, unknown> | null>;
197
+ onStepNext(): void;
198
+ onStepPrev(): void;
199
+ updateStepFormField(fieldKey: string, value: unknown): void;
200
+ touchStepFormField(fieldKey: string): void;
105
201
  onConfirm(): void;
106
202
  onCancel(): void;
107
203
  onOutsideClick(): void;
@@ -129,7 +225,17 @@ declare class OverlayDialog extends LitElement {
129
225
  private _renderQueueList;
130
226
  private _renderStepsHeader;
131
227
  private _renderStepsList;
228
+ private _createFormContext;
229
+ private _createStepFormContext;
230
+ private _getOrderedFields;
231
+ private _renderFormGrid;
232
+ private _renderGroupedForm;
233
+ private _renderForm;
234
+ private _renderFormField;
235
+ private _renderFormInput;
132
236
  private _renderButtons;
237
+ private _renderStepFormButtons;
238
+ private _deriveStepItems;
133
239
  private _renderBody;
134
240
  render(): TemplateResult;
135
241
  }
@@ -145,6 +251,16 @@ declare class DialogSingleton {
145
251
  hide(): void;
146
252
  alert(optionsOrLabel: string | AlertOptions): Promise<DialogResult>;
147
253
  confirm(optionsOrLabel: string | ConfirmOptions): Promise<boolean>;
254
+ form<TSchema extends {
255
+ _output: unknown;
256
+ safeParse: (data: unknown) => any;
257
+ _def: any;
258
+ }>(schema: TSchema, options?: FormOptions<TSchema['_output']>): Promise<TSchema['_output'] | null>;
259
+ showStepForm(steps: StepFormStepInput[], options?: StepFormOptions): Promise<Record<string, unknown> | null>;
260
+ onStepNext(): void;
261
+ onStepPrev(): void;
262
+ updateStepFormField(fieldKey: string, value: unknown): void;
263
+ touchStepFormField(fieldKey: string): void;
148
264
  showLoading(label?: string): void;
149
265
  setProgress(percent: number): void;
150
266
  setLabel(label: string): void;
@@ -168,4 +284,4 @@ declare class DialogSingleton {
168
284
  }
169
285
  declare const dialog: DialogSingleton;
170
286
 
171
- 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 };
287
+ export { type AlertIcon, type AlertOptions, type ConfirmOptions, DialogController, type DialogResult, type DialogState, type DialogType, type FormFieldGroup, type FormFieldMeta, type FormInputType, type FormLayout, type FormOptions, OverlayDialog, type QueueItem, type QueueItemStatus, type ShowOptions, type StepFormItem, type StepFormOptions, type StepFormStepInput, type StepItem, type StepItemStatus, type TaskItemInput, dialog };