@record-evolution/widget-form 1.0.11 → 1.0.13

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/widget-form.d.ts +1 -0
  2. package/dist/widget-form.js +230 -174
  3. package/dist/widget-form.js.map +1 -1
  4. package/package.json +2 -1
  5. package/src/definition-schema.d.ts +18 -1
  6. package/src/definition-schema.json +28 -11
  7. package/src/widget-form.ts +86 -10
package/src/widget-form.ts CHANGED
@@ -67,6 +67,9 @@ export class WidgetForm extends LitElement {
67
67
 
68
68
  handleFormSubmit(event: Event) {
69
69
  event.preventDefault()
70
+ const submitter = (event as SubmitEvent).submitter as HTMLElement
71
+ const action = submitter?.getAttribute('value') ?? 'submit'
72
+
70
73
  const form = event.target as HTMLFormElement
71
74
  const formData = new FormData(form)
72
75
  const data = Object.fromEntries((formData as any).entries())
@@ -82,6 +85,15 @@ export class WidgetForm extends LitElement {
82
85
  )
83
86
  }
84
87
  })
88
+
89
+ if (this.inputData?.deleteFlagColumn)
90
+ submitData?.push({
91
+ swarm_app_databackend_key: this.inputData?.deleteFlagColumn?.swarm_app_databackend_key,
92
+ table_name: this.inputData?.deleteFlagColumn?.tablename,
93
+ column_name: this.inputData?.deleteFlagColumn?.column,
94
+ value: action === 'delete'
95
+ })
96
+
85
97
  this.dispatchEvent(
86
98
  new CustomEvent('data-submit', {
87
99
  detail: submitData,
@@ -110,6 +122,7 @@ export class WidgetForm extends LitElement {
110
122
  .name="column-${i}"
111
123
  .label="${field.label ?? ''}"
112
124
  .type="${field.type === 'numberfield' ? 'number' : 'text'}"
125
+ .value="${field.preFilledValue ?? ''}"
113
126
  .placeholder="${field.defaultValue ?? ''}"
114
127
  .pattern="${field.validation ?? ''}"
115
128
  supporting-text=${field.description ?? ''}
@@ -126,6 +139,7 @@ export class WidgetForm extends LitElement {
126
139
  .label="${field.label ?? ''}"
127
140
  style="width: 200px;"
128
141
  type="number"
142
+ .value="${field.preFilledValue ?? ''}"
129
143
  .placeholder="${field.defaultValue ?? ''}"
130
144
  step="any"
131
145
  min=${field.min ?? ''}
@@ -142,7 +156,7 @@ export class WidgetForm extends LitElement {
142
156
  <md-checkbox
143
157
  name="column-${i}"
144
158
  aria-label=${field.label ?? ''}
145
- ?checked=${field.defaultValue === 'true'}
159
+ ?checked=${(String(field.preFilledValue) ?? field.defaultValue) === 'true'}
146
160
  supporting-text=${field.description ?? ''}
147
161
  ?required=${field.required && !field.defaultValue}
148
162
  ></md-checkbox>
@@ -157,6 +171,7 @@ export class WidgetForm extends LitElement {
157
171
  .name="column-${i}"
158
172
  .label="${field.label ?? ''}"
159
173
  type="textarea"
174
+ .value="${field.preFilledValue ?? ''}"
160
175
  .placeholder="${field.defaultValue ?? ''}"
161
176
  rows="3"
162
177
  ?required=${field.required && !field.defaultValue}
@@ -181,7 +196,7 @@ export class WidgetForm extends LitElement {
181
196
  return html`
182
197
  <md-select-option
183
198
  .value="${val.value ?? ''}"
184
- ?selected="${val.value === field.defaultValue}"
199
+ ?selected="${val.value === (field.preFilledValue ?? field.defaultValue)}"
185
200
  >
186
201
  ${val.displayLabel}
187
202
  </md-select-option>
@@ -200,14 +215,33 @@ export class WidgetForm extends LitElement {
200
215
  style="width: 200px;"
201
216
  .label="${field.label ?? ''}"
202
217
  type="datetime-local"
203
- .value="${field.defaultValue ?? ''}"
218
+ .value="${field.preFilledValue ?? field.defaultValue ?? ''}"
204
219
  supporting-text=${field.description ?? ''}
205
220
  ?required=${field.required && !field.defaultValue}
206
221
  ></md-outlined-text-field>
207
222
  `
208
223
  }
209
224
 
225
+ resetForm() {
226
+ const form = this.shadowRoot?.querySelector('#form') as HTMLFormElement
227
+ if (!form) return
228
+ this.inputData?.formFields?.forEach((field, i) => {
229
+ const name = `column-${i}`
230
+ if (field.type === 'checkbox') {
231
+ const cb = form.querySelector(`md-checkbox[name="${name}"]`) as any
232
+ if (cb) cb.checked = field.preFilledValue === 'true'
233
+ } else if (field.type === 'dropdown') {
234
+ const select = form.querySelector(`md-outlined-select[name="${name}"]`) as any
235
+ if (select) select.value = field.preFilledValue ?? ''
236
+ } else {
237
+ const input = form.querySelector(`md-outlined-text-field[name="${name}"]`) as any
238
+ if (input) input.value = field.preFilledValue ?? ''
239
+ }
240
+ })
241
+ }
242
+
210
243
  cancelEdit(event: Event) {
244
+ this.resetForm()
211
245
  this.dialogOpen = false
212
246
  }
213
247
 
@@ -325,10 +359,37 @@ export class WidgetForm extends LitElement {
325
359
  --md-fab-container-color: #007bff;
326
360
  --md-fab-label-text-color: white;
327
361
  }
362
+
363
+ .delete-btn {
364
+ --md-filled-button-container-color: #d32f2f;
365
+ --md-filled-button-label-text-color: #fff;
366
+ --md-filled-button-hover-label-text-color: #fff;
367
+ --md-filled-button-focus-label-text-color: #fff;
368
+ --md-filled-button-pressed-label-text-color: #fff;
369
+ }
328
370
  `
329
371
 
330
372
  render() {
373
+ const fontColor = this.themeTitleColor
374
+ const bgColor = this.themeBgColor
375
+ const bgColorOpaque = bgColor?.startsWith('rgba')
376
+ ? bgColor.replace(/rgba\(([^)]+),\s*[\d.]+\)/, 'rgb($1)')
377
+ : bgColor?.startsWith('#') && bgColor.length === 9
378
+ ? bgColor.substring(0, 7)
379
+ : bgColor
331
380
  return html`
381
+ <style>
382
+ :host {
383
+ --md-sys-color-on-surface: ${fontColor};
384
+ --md-sys-color-on-surface-variant: ${fontColor};
385
+ --md-sys-color-outline: ${fontColor};
386
+ --md-sys-color-surface-container: ${bgColorOpaque};
387
+ --md-menu-container-color: ${bgColorOpaque};
388
+ --md-menu-item-selected-container-color: ${bgColorOpaque};
389
+ --md-menu-item-selected-label-text-color: ${fontColor};
390
+ color: ${fontColor};
391
+ }
392
+ </style>
332
393
  <div class="header">
333
394
  ${this.inputData?.formButton
334
395
  ? html`
@@ -352,9 +413,17 @@ export class WidgetForm extends LitElement {
352
413
  <div class="wrapper">
353
414
  ${this.renderForm()}
354
415
  <div class="form-actions">
355
- <md-outlined-button form="form" value="cancel" type="reset"
356
- >Reset</md-outlined-button
357
- >
416
+ ${this.inputData?.deleteButton
417
+ ? html`<md-filled-button
418
+ class="delete-btn"
419
+ form="form"
420
+ value="delete"
421
+ type="submit"
422
+ autofocus
423
+ >Delete</md-filled-button
424
+ >`
425
+ : nothing}
426
+ <md-outlined-button @click=${this.resetForm}>Reset</md-outlined-button>
358
427
  <md-filled-button form="form" value="submit" type="submit" autofocus
359
428
  >Submit</md-filled-button
360
429
  >
@@ -378,9 +447,17 @@ export class WidgetForm extends LitElement {
378
447
  <div slot="headline">${this.inputData?.title ?? 'Data Entry'}</div>
379
448
  ${this.renderForm()}
380
449
  <div slot="actions">
381
- <md-outlined-button form="form" value="cancel" type="reset"
382
- >Cancel</md-outlined-button
383
- >
450
+ ${this.inputData?.deleteButton
451
+ ? html`<md-filled-button
452
+ class="delete-btn"
453
+ form="form"
454
+ value="delete"
455
+ type="submit"
456
+ autofocus
457
+ >Delete</md-filled-button
458
+ >`
459
+ : nothing}
460
+ <md-outlined-button @click=${this.cancelEdit}>Cancel</md-outlined-button>
384
461
  <md-filled-button form="form" value="submit" type="submit" autofocus
385
462
  >Submit</md-filled-button
386
463
  >
@@ -398,7 +475,6 @@ export class WidgetForm extends LitElement {
398
475
  method="dialog"
399
476
  class="form-content"
400
477
  @submit=${this.handleFormSubmit}
401
- @reset=${this.cancelEdit}
402
478
  >
403
479
  ${repeat(
404
480
  this.inputData?.formFields?.filter((field) => !field.hiddenField) ?? [],