Merge branch 'master' into FIO-4112-final

.github/workflows/config.yml

@@ -0,0 +1,131 @@
+# name: Build & Test
+
+# on: push
+
+# env:
+#   NODE_VERSION: 18.x
+
+# jobs:
+#   test:
+#     runs-on: ubuntu-latest
+#     steps:
+#       - run: echo "Triggered by ${{ github.event_name }} event."
+
+#       - name: Check out repository code ${{ github.repository }} on ${{ github.ref }}
+#         uses: actions/checkout@v3
+
+#       - name: Set up Node.js ${{ env.NODE_VERSION }}
+#         uses: actions/setup-node@v3
+#         with:
+#           node-version: ${{ env.NODE_VERSION }}
+#           cache: 'npm'
+
+#       - name: Cache node modules
+#         uses: actions/cache@v3
+#         with:
+#           path: node_modules
+#           key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+#           restore-keys: |
+#             ${{ runner.os }}-node-
+
+#       - name: Installing dependencies
+#         if: steps.cache.outputs.cache-hit != 'true'
+#         uses: borales/actions-yarn@v4
+#         with:
+#           cmd: install --frozen-lockfile
+
+#       - name: Lint
+#         uses: borales/actions-yarn@v4
+#         with:
+#           cmd: lint
+
+#       - name: Build
+#         uses: borales/actions-yarn@v4
+#         with:
+#           cmd: build
+
+#       - name: Test
+#         uses: borales/actions-yarn@v4
+#         with:
+#           cmd: test
+
+name: Build & Test
+
+on: push
+
+env:
+  NODE_VERSION: 18.x
+
+jobs:
+  setup:
+    runs-on: ubuntu-latest
+    steps:
+      - run: echo "Triggered by ${{ github.event_name }} event."
+
+      - name: Check out repository code ${{ github.repository }} on ${{ github.ref }}
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+
+      - name: Cache node modules
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Installing dependencies
+        if: steps.cache.outputs.cache-hit != 'true'
+        uses: borales/actions-yarn@v4
+        with:
+          cmd: install --frozen-lockfile
+
+      - name: Lint
+        uses: borales/actions-yarn@v4
+        with:
+          cmd: lint
+
+  build:
+    needs: setup
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository code ${{ github.repository }} on ${{ github.ref }}
+        uses: actions/checkout@v3
+
+      - name: Restore node modules from cache
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Build
+        uses: borales/actions-yarn@v4
+        with:
+          cmd: build
+
+  test:
+    needs: setup
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository code ${{ github.repository }} on ${{ github.ref }}
+        uses: actions/checkout@v3
+
+      - name: Restore node modules from cache
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Test
+        uses: borales/actions-yarn@v4
+        with:
+          cmd: test

Changelog.md

@@ -61,6 +61,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
  - FIO-7207: changed tooltip and removed 'Hide label' option from the list of layout components
  - FIO-7074: fixed an issue where setting submission on wizard does not update data
  - FIO-7082: Moved Wizard Breadcrumbs Type to form settings
+ - FIO-7224: Fixed issues with layout components when Condensed mode is enabled
+ - FIO-4833: Removes Hide Label setting from Well, Columns, Tabs and Table components since they do not render a label
+ - FIO-5910: allow manual input for w and W date formats
+ - FIO-6370: Fixes issues with PasswordStrength Addon settings
+ - FIO-7146: formiojs-circleci-to-ghactions
    
 ## 5.0.0-rc.26
 ### Changed

src/Embed.js

@@ -142,7 +142,7 @@ export class Formio {
     }
 
     // eslint-disable-next-line max-statements
-    static async init(element, builder = false) {
+    static async init(element, options = {}, builder = false) {
         Formio.cdn = new CDN(Formio.config.cdn);
         Formio.config.libs = Formio.config.libs || {
             uswds: {
@@ -160,10 +160,19 @@ export class Formio {
         const id = Formio.config.id || `formio-${Math.random().toString(36).substring(7)}`;
 
         // Create a new wrapper and add the element inside of a new wrapper.
-        const wrapper = Formio.createElement('div', {
+        let wrapper = Formio.createElement('div', {
             'id': `"${id}-wrapper"`
         });
         element.parentNode.insertBefore(wrapper, element);
+
+        // If we include the libraries, then we will attempt to run this in shadow dom.
+        if (Formio.config.includeLibs && (typeof wrapper.attachShadow === 'function') && !Formio.config.premium) {
+            wrapper = wrapper.attachShadow({
+                mode: 'open'
+            });
+            options.shadowRoot = wrapper;
+        }
+
         element.parentNode.removeChild(element);
         wrapper.appendChild(element);
 
@@ -247,7 +256,7 @@ export class Formio {
     }
 
     static async createForm(element, form, options) {
-        const wrapper = await Formio.init(element);
+        const wrapper = await Formio.init(element, options);
         return Formio.FormioClass.createForm(element, form, {
             ...options,
             ...{ noLoader: true }
@@ -279,7 +288,7 @@ export class Formio {
     }
 
     static async builder(element, form, options) {
-        const wrapper = await Formio.init(element, true);
+        const wrapper = await Formio.init(element, options, true);
         return Formio.FormioClass.builder(element, form, options).then((instance) => {
             Formio.debug('Builder created', instance);
             Formio.debug('Removing loader');

src/WebformBuilder.js

@@ -849,6 +849,10 @@ export default class WebformBuilder extends Component {
     }
 
     if (info) {
+      //if this is a custom component that was already assigned a key, don't stomp on it
+      if (!Components.components.hasOwnProperty(info.type) && info.key) {
+        return info;
+      }
       info.key = this.generateKey(info);
     }
 
@@ -1588,8 +1592,15 @@ export default class WebformBuilder extends Component {
           }
         }
 
+        // If the edit form has any nested form inside, we get a partial data (nested form's data) in the
+        // event.data property
+        let editFormData;
+        if (event.changed.instance && event.changed.instance.root && event.changed.instance.root.id !== this.editForm.id) {
+          editFormData = this.editForm.data;
+        }
+
         // Update the component.
-        this.updateComponent(event.data.componentJson || event.data, event.changed);
+        this.updateComponent(event.data.componentJson || editFormData || event.data, event.changed);
       }
     });
 

src/addons/index.js

@@ -7,7 +7,11 @@ export const editForms = [
   key: 'settings',
   display: 'form',
   input: true,
-  components,
+  components: components.map((comp) => {
+    comp.tableView = false;
+    return comp;
+  }),
+  tableView: false,
   defaultValue: {
     data: defaultSettings
   },

src/components/_classes/component/Component.js

@@ -767,7 +767,7 @@ export default class Component extends Element {
 
     let contentMargin = '';
     if (this.component.hideLabel) {
-      const margin = this.labelWidth + this.labelMargin;
+      const margin = isCondensed ? 0 : this.labelWidth + this.labelMargin;
       contentMargin = isRightPosition ? `margin-right: ${margin}%` : '';
       contentMargin = isLeftPosition ? `margin-left: ${margin}%` : '';
     }

src/components/_classes/component/editForm/Component.edit.addons.js

@@ -10,6 +10,33 @@ export default [
     input: true,
     key: 'addons',
     label: 'Addons',
+    templates: {
+      // eslint-disable-next-line quotes
+      header: `<div class="row">
+                <div class="col-6">{{ t(components[0].label) }}</div>
+                <div class="col-4">Settings</div>
+              </div>`,
+      // eslint-disable-next-line quotes
+      row: `<div class="row">
+              <div class="col-6">
+                {{ row.name.label }}
+              </div>
+              <div class="col-4 text-muted">
+                Click Edit to see addon's settings
+              </div>
+
+              {% if (!instance.options.readOnly && !instance.disabled) { %}
+                <div class="col-2">
+                  <div class="btn-group pull-right">
+                    <button class="btn btn-default btn-light btn-sm editRow"><i class="{{ iconClass('edit') }}"></i></button>
+                    {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}
+                      <button class="btn btn-danger btn-sm removeRow"><i class="{{ iconClass('trash') }}"></i></button>
+                    {% } %}
+                  </div>
+                </div>
+              {% } %}
+            </div>`,
+    },
     components: [
       {
         label: 'Name',
@@ -32,7 +59,10 @@ export default [
             }));
           },
         },
-        input: true
+        input: true,
+        validate: {
+          required: true,
+        },
       },
       ...editForms,
     ]

src/components/columns/Columns.js

@@ -74,7 +74,7 @@ export default class ColumnsComponent extends NestedComponent {
       if (!column.size) {
         column.size = 'md';
       }
-      column.currentWidth = column.width || 0;
+      column.currentWidth = this.options.condensedMode ? this.gridSize : column.width || 0;
       // Ensure there is a components array.
       if (!Array.isArray(column.components)) {
         column.components = [];

src/components/columns/editForm/Columns.edit.display.js

@@ -112,5 +112,9 @@ export default [
     tooltip: 'Will automatically adjust columns based on if nested components are hidden.',
     key: 'autoAdjust',
     input: true
-  }
+  },
+  {
+    key: 'hideLabel',
+    ignore: true
+  },
 ];

src/components/file/fixtures/comp3.js

@@ -0,0 +1,29 @@
+export default {
+  type: 'form',
+  display: 'form',
+  components: [
+    {
+      label: 'Upload',
+      tableView: false,
+      storage: 'base64',
+      webcam: false,
+      fileTypes: [
+        {
+          label: '',
+          value: ''
+        }
+      ],
+      key: 'file',
+      type: 'file',
+      input: true
+    },
+    {
+      type: 'button',
+      label: 'Submit',
+      key: 'submit',
+      disableOnInvalid: true,
+      input: true,
+      tableView: false
+    }
+  ],
+};

src/components/table/editForm/Table.edit.display.js

@@ -124,4 +124,8 @@ export default [
     tooltip: 'Condense the size of the table.',
     weight: 704
   },
+  {
+    key: 'hideLabel',
+    ignore: true
+  },
 ];

src/components/tabs/editForm/Tabs.edit.display.js

@@ -81,4 +81,8 @@ export default [
     key: 'verticalLayout',
     input: true
   },
+  {
+    key: 'hideLabel',
+    ignore: true
+  },
 ];

src/utils/utils.js

@@ -803,8 +803,10 @@ export function convertFormatToMask(format) {
     .replace(/M{3}/g, '***')
     // Short month conversion if input as text.
     .replace(/e/g, 'Q')
+    // Month number conversion.
+    .replace(/W/g, '99')
     // Year conversion.
-    .replace(/[ydhmsHMG]/g, '9')
+    .replace(/[ydhmswHMG]/g, '9')
     // AM/PM conversion.
     .replace(/a/g, 'AA');
 }