feat(array): add string array view

jbockle · Nov 11, 2021 · 1a7cfd8 · 1a7cfd8
1 parent ad8051f
commit 1a7cfd8
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 9 deletions.
diff --git a/packages/bootstrap-theme/src/aujsf-bs-array-string.html b/packages/bootstrap-theme/src/aujsf-bs-array-string.html
@@ -0,0 +1,48 @@
+<template>
+ <fieldset>
+ <div>
+ <legend>
+
+ <span if.bind="title">
+ ${title}
+ </span>
+
+ <span class="form-text text-muted fieldset-description" if.bind="description">${description}</span>
+
+ <div class="input-group input-group-sm mb-1">
+ <input type="text" class="form-control"
+ value.bind="newString"
+ disabled.bind="readonly"
+ placeholder.bind="placeholder"
+ keydown.delegate="$event.keyCode === 13 ? newString && !readonly && (newString = add(newString)) : true">
+ <div class="input-group-append">
+ <button class="btn btn-outline-success" type="button" click.delegate="newString = add(newString)"
+ disabled.bind="!newString || readonly"><strong class="mr-1">&plus;</strong>Add</button>
+ </div>
+ </div>
+
+ </legend>
+ </div>
+
+ <span class="d-block invalid-feedback" if.bind="hasErrors" repeat.for="error of errorMessages">
+ ${error}
+ </span>
+
+ <div class="mb-2">
+ <template repeat.for="item of value">
+ <div class="d-inline-flex rounded bg-info text-white mb-1 px-2">
+ ${item}
+ <button type="button" class="close ml-1" click.delegate="delete($index)"
+ if.bind="!readonly && !uiSchema['ui:no-remove'] && !definition.uiSchema['ui:no-remove']">
+ <span aria-hidden="true">&times;</span>
+ </button>
+ </div>
+ </template>
+ <template if.bind="!value || value.length === 0">
+ <small class="d-inline-flex rounded bg-secondary text-muted font-italic mb-1 px-2">
+ nothing here...
+ </small>
+ </template>
+ </div>
+ </fieldset>
+</template>
diff --git a/packages/bootstrap-theme/src/index.ts b/packages/bootstrap-theme/src/index.ts
@@ -8,6 +8,7 @@ const theme: FormTheme = {
  'array-select': PLATFORM.moduleName('@aujsf/bootstrap-theme/aujsf-bs-array-select.html'),
  'array-checkboxes': PLATFORM.moduleName('@aujsf/bootstrap-theme/aujsf-bs-array-checkboxes.html'),
  'array-tabs': PLATFORM.moduleName('@aujsf/bootstrap-theme/aujsf-bs-array-tabs.html'),
+ 'array-string': PLATFORM.moduleName('@aujsf/bootstrap-theme/aujsf-bs-array-string.html'),
  'textarea': PLATFORM.moduleName('@aujsf/bootstrap-theme/aujsf-bs-textarea.html'),
  'string-input': PLATFORM.moduleName('@aujsf/bootstrap-theme/aujsf-bs-string-input.html'),
  'string-date-time': PLATFORM.moduleName('@aujsf/bootstrap-theme/aujsf-bs-string-date-time.html'),

diff --git a/packages/examples/src/examples/03-arrays.ts b/packages/examples/src/examples/03-arrays.ts
@@ -6,20 +6,38 @@ export class ArraysExample extends Example {
 
  public static displayName = 'Arrays';
 
- public value: any = ['Apples'];
+ public value: any = {
+ fruits: ['Apples'],
+ tags: ['foo', 'bar', 'baz', 'qux'],
+ };
 
  public schema: JsonSchema = {
- type: 'array',
- items: {
- type: 'string',
+ type: 'object',
+ properties: {
+ fruits: {
+ type: 'array',
+ items: {
+ type: 'string',
+ },
+ minItems: 1,
+ maxItems: 3,
+ },
+ tags: {
+ type: 'array',
+ items: {
+ type: 'string',
+ },
+ },
  },
- minItems: 1,
- maxItems: 3,
  }
 
  public uiSchema: UISchema = {
- 'ui:title': 'Fruits',
- 'ui:item-title': '${key + 1}:${value || \'Enter Item\'}',
- 'ui:items': { 'ui:title': false },
+ fruits: {
+ 'ui:item-title': '${key + 1}:${value || \'Enter Item\'}',
+ 'ui:items': { 'ui:title': false },
+ },
+ tags: {
+ 'ui:view': 'array-string',
+ },
  };
 }