minsky-webform-formkit 1.0.0

package/src/styles/webform.scss

@@ -0,0 +1,400 @@
+.bef-exposed-form,
+.webform-formkit,
+.webform {
+  /* =========================================================================  */
+  /* customize form here */
+  /* =========================================================================  */
+  --f-color: #000;
+  --f-markup-color: #000;
+  --f-input-text-color: #000;
+  --f-input-border-color: #000;
+  --f-input-border-width: 1px;
+  --f-input-border-radius: 0;
+  --f-input-padding: 0.4em 0.6em;
+  --f-input-outline: #808080 solid;
+  --f-input-background-color: transparent;
+  --f-input-font-family: inherit;
+  --f-input-font-size: 1.6rem;
+  --f-input-placeholder-color: #808080;
+  --f-input-placeholder-font-style: inherit;
+  --f-input-height: 2.3em;
+  --f-label-margin-bottom: 0.2em;
+
+  // description
+  --f-description-color: #000;
+
+  // submit btn
+  --f-submit-btn-background-color: #000;
+  --f-submit-btn-text-color: #fff;
+  --f-submit-btn-border-color: #000;
+  --f-submit-btn-border-width: 1px;
+  --f-submit-btn-border-radius: 0;
+  --f-submit-btn-font-family: inherit;
+  --f-submit-btn-min-width: 13.4rem; // must be defined for mobile devices
+  --f-submit-btn-min-height: 4.8rem; // must be defined for mobile devices
+  --f-submit-btn-hover-text-color: #000;
+  --f-submit-btn-hover-background-color: #fff;
+  --f-submit-btn-hover-border-color: #000;
+  --f-submit-btn-disabled-background-color: #e5e5e5;
+
+  // radio-buttons & check-boxes
+  --f-radio-check-border-color: #000;
+  --f-radio-check-background-color: #fff;
+  --f-radio-check-background-color-active: #e5e5e5;
+  --f-radio-check-decorater-height: 1.6rem;
+
+  // help element
+  --f-help-background-color: #000;
+  --f-help-color: #fff;
+  --f-help-border-color: #000;
+
+  // other
+  --f-form-gap: 1.5em;
+  --f-error-color: red;
+  --f-success-color: green;
+
+  // webform-fornkit props
+  --f-loader-color: #000;
+
+  // multistep
+  --f-multistep-background-color-tab: #e5e5e5;
+  --f-multistep-color-tab: #000;
+  --f-multistep-background-color-tab-active: #000;
+  --f-multistep-color-tab-active: #fff;
+
+  /* =========================================================================  */
+  /* styles */
+  /* =========================================================================  */
+
+  box-sizing: border-box;
+  * {
+    box-sizing: border-box;
+  }
+
+  form {
+    color: var(--f-color);
+  }
+
+  .form-item-markup,
+  .formkit-markup {
+    color: var(--f-markup-color);
+  }
+
+  // hide number input arrows
+  /* Chrome, Safari, Edge, Opera */
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Firefox */
+  input[type='number'] {
+    -moz-appearance: textfield;
+  }
+
+  .formkit-outer,
+  .form-item {
+    select,
+    textarea,
+    input[elementtype='date'],
+    input[type='time'],
+    input[type='mask'],
+    input[type='date'],
+    input[type='number'],
+    input[type='text'],
+    input[type='email'],
+    input[type='tel'],
+    input[type='url'] {
+      background-color: var(--f-input-background-color);
+      border-color: var(--f-input-border-color);
+      border-width: var(--f-input-border-width);
+      color: var(--f-input-text-color);
+      font-family: var(--f-input-font-family);
+      font-size: var(--f-input-font-size);
+      padding: var(--f-input-padding);
+      border-radius: var(--f-input-border-radius);
+      appearance: none;
+      width: 100%;
+      box-shadow: none;
+      border-style: solid;
+
+      &::placeholder {
+        color: var(--f-input-placeholder-color);
+        font-style: var(--f-input-placeholder-font-style);
+        transition: opacity 0.25s ease;
+      }
+
+      &:focus {
+        outline: var(--f-input-outline);
+        &::placeholder {
+          opacity: 0.5;
+        }
+      }
+
+      &.form-item--error {
+        select,
+        textarea,
+        input {
+          border-color: var(--f-error-color);
+        }
+      }
+    }
+
+    select,
+    input[type='time'],
+    input[type='date'],
+    input[type='number'],
+    input[type='text'],
+    input[type='email'],
+    input[type='url'],
+    input[type='mask'],
+    input[type='tel'] {
+      height: var(--f-input-height);
+      line-height: 1.1;
+    }
+
+    input[type='time'],
+    input[type='date'] {
+      display: block;
+      min-width: 15rem;
+      line-height: 1.5em;
+    }
+
+    input[type='date'] {
+      text-align: left;
+      display: flex;
+    }
+
+    input::-webkit-date-and-time-value {
+      text-align: left;
+    }
+
+    .formkit-label,
+    > label {
+      margin-bottom: var(--f-label-margin-bottom);
+      padding-right: 0.6em;
+      display: inline-block;
+
+      .info-tooltip {
+        display: inline-block;
+        margin-left: 0.25em;
+        position: relative;
+        top: 0.3rem;
+      }
+    }
+
+    select {
+      cursor: pointer;
+      padding-right: 3rem;
+      min-width: 12rem;
+      background-image: svg('f-chevron-down');
+      background-repeat: no-repeat;
+      background-position: calc(100% - 1rem) center;
+      background-size: 0.7em;
+    }
+
+    textarea {
+      display: flex;
+    }
+  }
+
+  .formkit-outer,
+  .formkit-actions,
+  .form-actions {
+    button[type='submit'],
+    input[type='submit'] {
+      background-color: var(--f-submit-btn-background-color);
+      color: var(--f-submit-btn-text-color);
+      border-width: var(--f-submit-btn-border-width);
+      border-color: var(--f-submit-btn-border-color);
+      font-family: var(--f-submit-btn-font-family);
+      cursor: pointer;
+      appearance: none;
+      min-width: var(--f-submit-btn-min-width);
+      min-height: var(--f-submit-btn-min-height);
+      width: auto;
+      outline: none;
+      border-radius: var(--f-submit-btn-border-radius);
+      box-shadow: none;
+
+      &:focus,
+      &:active,
+      &:hover {
+        color: var(--f-submit-btn-hover-text-color);
+        background-color: var(--f-submit-btn-hover-background-color);
+        border-color: var(--f-submit-btn-hover-border-color);
+      }
+
+      &:disabled {
+        pointer-events: none;
+        opacity: 0.5;
+        background-color: var(--f-submit-btn-disabled-background-color);
+      }
+    }
+  }
+
+  .checkboxes--wrapper {
+    .form-item--checkbox {
+      margin-bottom: var(--f-radio-check-padding-bottom);
+    }
+  }
+
+  .webform-element-help {
+    background-color: var(--f-help-background-color);
+    border-color: var(--f-help-border-color);
+    color: var(--f-help-color);
+    font-weight: 400;
+    line-height: 1.2rem;
+    font-size: 1rem;
+    width: 1.5rem;
+    height: 1.5rem;
+    position: relative;
+    top: -2px;
+  }
+
+  .form-text,
+  .form-textarea {
+    width: 100%;
+  }
+
+  .form-textarea {
+    resize: none;
+  }
+
+  .form-number::-webkit-inner-spin-button {
+    appearance: none;
+  }
+
+  .formkit-help,
+  .webform-element-description {
+    margin-top: 0.5em;
+    font-style: italic;
+    font-size: 1.4rem;
+    color: var(--f-description-color);
+
+    * {
+      font-size: 1.4rem;
+    }
+  }
+
+  .form-required {
+    &:after {
+      content: '*';
+    }
+  }
+
+  .fieldset-legend {
+    font-weight: 700;
+    margin-bottom: 1em;
+    display: block;
+  }
+
+  .formkit-form,
+  fieldset {
+    display: grid;
+    gap: var(--f-form-gap);
+  }
+
+  fieldset {
+    padding: 1.5rem;
+    border-color: var(--f-input-border-color);
+    border-width: var(--f-input-border-width);
+    border-radius: var(--f-input-border-radius);
+
+    legend {
+      font-size: 1em;
+      font-family: var(--f-input-font-family);
+    }
+  }
+
+  .form-item,
+  .radios--wrapper,
+  .checkboxes--wrapper,
+  .form-item--webform-time,
+  .form-item--webform-markup,
+  .form-item--checkbox,
+  .form-item--date,
+  .form-item--number,
+  .form-item--select,
+  .form-item--email,
+  .form-item--tel,
+  .form-item--textarea,
+  .form-item--textfield {
+    margin-top: var(--f-form-gap);
+  }
+
+  .form-item--datetime {
+    .form-item--date {
+      margin-right: 1rem;
+    }
+  }
+
+  .fieldgroup {
+    margin: 0 !important;
+  }
+
+  .form-actions,
+  .webform-actions {
+    margin-top: 2rem;
+  }
+
+  .formkit-messages {
+    margin-bottom: 0;
+    padding: 0;
+    margin: 0;
+    font-size: 1.4rem;
+    list-style-type: none;
+    color: var(--f-error-color);
+    margin-top: 0.5rem;
+  }
+
+  // flexbox paddings en margins
+  .webform-flexbox {
+    width: 100%;
+    @media (--bp-min-medium) {
+      margin: 0 -0.5em;
+      width: auto;
+    }
+    .webform-flexbox {
+      margin: 0;
+      padding-bottom: 0;
+    }
+    .webform-flex {
+      margin: 0;
+      .fieldgroup {
+        padding-bottom: 0;
+      }
+      .fieldset-wrapper {
+        margin: 0 -0.5em;
+      }
+    }
+  }
+
+  hr {
+    width: 100%;
+  }
+
+  .form-item--error-message {
+    margin-top: 0.3em;
+    color: var(--f-error-color);
+    font-size: 1.2rem;
+  }
+
+  .captcha {
+    padding: 0;
+    margin: 0;
+    border: 0;
+    margin-bottom: var(--f-form-gap);
+  }
+
+  .captcha__title {
+    display: none;
+  }
+
+  .captcha__description {
+    font-size: 1.2rem;
+    max-width: 40rem;
+    margin-top: 0.5rem;
+  }
+}

package/src/utils/functions.js

@@ -0,0 +1,78 @@
+export function flattenObject(obj) {
+  const flattened = {};
+
+  function flatten(obj, parentKey = '') {
+    for (const key in obj) {
+      if (Array.isArray(obj[key])) {
+        flattened[key] = obj[key];
+      } else if (typeof obj[key] === 'object' && obj[key] !== null) {
+        flatten(obj[key], `${parentKey + key}.`);
+      } else {
+        flattened[key] = obj[key];
+      }
+    }
+  }
+
+  flatten(obj);
+  return flattened;
+}
+
+export function hasValue(val) {
+  let hasValue = false;
+  if (val || val === 0) {
+    hasValue = true;
+  }
+  if (Array.isArray(val)) {
+    hasValue = true;
+  }
+  return hasValue;
+}
+
+export function cleanClass(name) {
+  return name.toLowerCase().replace(/\s/g, '-').replace('_', '-');
+}
+
+// setUserData(data) {
+//     // get current userData and merge with new form data
+//     const userData = JSON.parse(window.localStorage.getItem('userData')) || {};
+//     data = _merge(userData, data);
+
+//     // do not save hidden fields and other fields in localStorage
+//     delete data.petitions;
+//     delete data.free_text_value_1;
+//     delete data.free_text_value_2;
+//     delete data.free_text_value_3;
+//     delete data.free_text_value_4;
+//     delete data.free_text_value_5;
+//     delete data.yes_no_value_1;
+//     delete data.yes_no_value_2;
+//     delete data.yes_no_value_3;
+//     delete data.yes_no_value_4;
+//     delete data.yes_no_value_5;
+//     delete data.int_value_1;
+//     delete data.int_value_2;
+//     delete data.int_value_3;
+//     delete data.int_value_4;
+//     delete data.int_value_5;
+//     delete data.privacy_verklaring;
+//     delete data.more_information;
+//     delete data.organisation_number;
+//     delete data.rijkregisternummer;
+
+//     // delete certain field types
+//     this.schema[0].children.forEach(item => {
+//         if (item.$formkit === 'multi-step') {
+//             // loop through children from multisteps
+//             item.children.forEach(step => {
+//                 step.children.forEach(stepItem => {
+//                     deletePropFromSubmittedData(data, stepItem);
+//                 });
+//             });
+//         } else {
+//             // loop trouph form elements outside multistep
+//             deletePropFromSubmittedData(data, item);
+//         }
+//     });
+
+//     window.localStorage.setItem('userData', JSON.stringify(data));
+// }

package/src/utils/lodash.js

@@ -0,0 +1,208 @@
+/**
+ * Deeply merges source objects into the target object.
+ *
+ * Behavior:
+ * - plain objects are merged recursively
+ * - arrays are concatenated
+ * - primitive values are overwritten by the latest source
+ *
+ * @param {Object} target - object to merge into
+ * @param  {...Object} sources - source objects
+ * @returns {Object} merged target object
+ */
+export function _merge(target, ...sources) {
+  if (!isObject(target) && !Array.isArray(target)) {
+    target = {};
+  }
+
+  for (const source of sources) {
+    if (!isObject(source) && !Array.isArray(source)) continue;
+
+    for (const key of Object.keys(source)) {
+      const srcValue = source[key];
+      const tgtValue = target[key];
+
+      // merge arrays by concatenation
+      if (Array.isArray(srcValue)) {
+        if (Array.isArray(tgtValue)) {
+          target[key] = [...tgtValue, ...srcValue];
+        } else {
+          target[key] = [...srcValue];
+        }
+        continue;
+      }
+
+      // merge plain objects recursively
+      if (isObject(srcValue)) {
+        if (!isObject(tgtValue)) {
+          target[key] = {};
+        }
+
+        target[key] = _merge(target[key], srcValue);
+        continue;
+      }
+
+      // overwrite primitives
+      target[key] = srcValue;
+    }
+  }
+
+  return target;
+}
+
+/**
+ * Removes all elements from an array that match any value in the given values array.
+ * Modifies the original array in place.
+ *
+ * @param {Array} array - the array to modify
+ * @param {Array} values - values to remove from the array
+ * @returns {Array} - the modified array
+ */
+export function _pullAll(array, values) {
+  if (!Array.isArray(array) || !Array.isArray(values)) {
+    return array;
+  }
+
+  let index = 0;
+
+  while (index < array.length) {
+    if (values.includes(array[index])) {
+      array.splice(index, 1);
+    } else {
+      index++;
+    }
+  }
+
+  return array;
+}
+
+/**
+ * Creates a shallow clone of a value.
+ * - Primitives and functions are returned as-is.
+ * - Arrays are shallow-copied.
+ * - Plain objects are shallow-copied.
+ *
+ * @param {*} value - value to clone
+ * @returns {*} - cloned value
+ */
+export function _clone(value) {
+  // Primitives and functions are returned directly
+  if (value === null || typeof value !== 'object') {
+    return value;
+  }
+
+  // Array clone
+  if (Array.isArray(value)) {
+    return value.slice();
+  }
+
+  // Object clone (shallow)
+  const result = {};
+
+  Object.keys(value).forEach(key => {
+    result[key] = value[key];
+  });
+
+  return result;
+}
+
+/**
+ * Converts a string to kebab-case.
+ * - Replaces non-alphanumeric characters with spaces.
+ * - Inserts spaces between lowercase-uppercase transitions.
+ * - Converts to lowercase and joins with hyphens.
+ *
+ * @param {string} str - input string
+ * @returns {string} - kebab-case string
+ */
+export function _kebabCase(str) {
+  if (typeof str !== 'string') return '';
+
+  return str
+    // Replace separators and transitions between lowercase-uppercase
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    // Replace non-alphanumeric characters with space
+    .replace(/[^a-zA-Z0-9]+/g, ' ')
+    // Trim spaces
+    .trim()
+    // Split into words
+    .split(/\s+/)
+    // Convert to lowercase
+    .map(word => word.toLowerCase())
+    // Join with hyphen
+    .join('-');
+}
+
+/**
+ * Returns an array of an object's own enumerable property names.
+ * Safe for null/undefined objects.
+ *
+ * @param {Object} obj - object to get keys from
+ * @returns {string[]} - array of keys
+ */
+export const _keys = obj => obj == null ? [] : Object.keys(Object(obj));
+
+/**
+ * Returns a new object containing only the specified keys from the source object.
+ * Accepts a single key or an array of keys.
+ * Safe for null/undefined objects.
+ *
+ * @param {Object} obj - source object
+ * @param {string[] | string} keys - key(s) to pick
+ * @returns {Object} - object with selected keys
+ */
+export function _pick(obj, keys) {
+  if (obj == null) return {};
+  if (!Array.isArray(keys)) keys = [keys];
+
+  const result = {};
+  for (const key of keys) {
+    if (key in obj) {
+      result[key] = obj[key];
+    }
+  }
+  return result;
+}
+
+/**
+ * Recursively assigns default values from source objects to the target object.
+ * - Only sets a key if the target's value is undefined.
+ * - Merges nested objects recursively.
+ *
+ * @param {Object} target - target object
+ * @param  {...Object} sources - source objects
+ * @returns {Object} - target object with defaults applied
+ */
+export function _defaultsDeep(target, ...sources) {
+  if (target == null) target = {};
+
+  for (const source of sources) {
+    if (source == null) continue;
+
+    for (const key of Object.keys(source)) {
+      const srcVal = source[key];
+      const tgtVal = target[key];
+
+      if (tgtVal === undefined) {
+        // copy value if undefined
+        target[key] = srcVal;
+      } else if (isObject(tgtVal) && isObject(srcVal)) {
+        // recurse into nested objects
+        _defaultsDeep(tgtVal, srcVal);
+      }
+      // otherwise, keep existing target value
+    }
+  }
+
+  return target;
+}
+
+/**
+ * Helper to check if a value is a plain object (non-null, non-array).
+ *
+ * @param {*} val - value to check
+ * @returns {boolean} - true if plain object
+ */
+function isObject(val) {
+  return val !== null && typeof val === "object" && !Array.isArray(val);
+}

package/src/utils/messages.js

@@ -0,0 +1,37 @@
+export default {
+  global: {
+    editor: {
+      error: 'Check that the form has been completed correctly. Ensure that no unnecessary conditional fields have been filled in.'
+    }
+  },
+  nl: {
+    messages: {
+      missing: 'Dit formulier ontbreekt. Controleer of het ID dat u gebruikt correct is.',
+      error: 'Er is iets misgegaan bij het laden van het formulier.'
+    },
+    success: {
+      title: 'Bedankt!',
+      message: 'We hebben je gegevens goed ontvangen.',
+    }
+  },
+  en: {
+    messages: {
+      missing: 'This form is missing. Please check that the ID you are using is correct.',
+      error: 'Something went wrong while loading the form.'
+    },
+    success: {
+      title: 'Thank you!',
+      message: 'We have successfully received your information.',
+    }
+  },
+  fr: {
+    messages: {
+      missing: "Ce formulaire est manquant. Vérifiez que l'ID que vous utilisez est correct.",
+      error: "Une erreur est survenue lors du chargement du formulaire."
+    },
+    success: {
+      title: "Merci !",
+      message: "Nous avons bien reçu vos informations.",
+    }
+  },
+}