feat(v5.8): Freeform 5.8 (#1667)

CHANGELOG.md

@@ -1,5 +1,24 @@
 # Solspace Freeform Changelog
 
+## 5.8.0 - Unreleased
+
+### Added
+- Added the ability to use Textareas and Radios inside a Table field.
+
+### Changed
+- Improved the usability of the Table field in the form builder.
+- Improved the usability of the Submit button layout settings to hide unnecessary options in the form builder.
+- Updated the sample formatting template assets to load as Asset Bundles to support Craft Cloud setups.
+- Optimized all front end Freeform scripts.
+    - Removed the `axios` dependency.
+    - Removed the `lodash` dependency.
+    - Removed the `core-js` polyfills.
+    - Scripts for Calculation fields now load seperately as `calculation.js` only if the field exists in the form being displayed.
+    - When using `freeform.loadScripts()` (for manually loading scripts) and Calculation fields, be sure to include the `field.calculation` option.
+
+### Fixed
+- Fixed a bug where multiple primary keys could be defined when MySQL has `sql_generate_invisible_primary_key` turned on.
+
 ## 5.7.4 - 2024-11-29
 
 ### Changed

composer.json

@@ -1,7 +1,7 @@
 {
   "name": "solspace/craft-freeform",
   "description": "The most reliable form builder that's ready for wherever your project takes you.",
-  "version": "5.7.4",
+  "version": "5.8.0",
   "type": "craft-plugin",
   "authors": [
     {
@@ -50,7 +50,7 @@
     "fix:dry-run": "vendor/bin/php-cs-fixer fix --dry-run --diff  --config=./.php-cs-fixer.dist.php"
   },
   "extra": {
-    "schemaVersion": "5.3.0",
+    "schemaVersion": "5.4.0",
     "handle": "freeform",
     "class": "Solspace\\Freeform\\Freeform",
     "name": "Freeform",

packages/client/src/app/components/form-controls/control-types/namespaced/page-buttons/button-layout/layout.tsx

@@ -5,6 +5,7 @@ import type { ControlType } from '@components/form-controls/types';
 import type { Page } from '@editor/builder/types/layout';
 import type { PageButtonsLayoutProperty } from '@ff-client/types/properties';
 import classes from '@ff-client/utils/classes';
+import isEqual from 'lodash.isequal';
 
 import BackIcon from './icons/back.svg';
 import SaveIcon from './icons/save.svg';
@@ -22,42 +23,71 @@ const icons: Record<string, ReactNode> = {
   submit: <SubmitIcon />,
 };
 
-const PageButtonLayout: React.FC<
-  ControlType<PageButtonsLayoutProperty, Page>
-> = ({ value, property, errors, updateValue, context }) => {
+type ComponentType = ControlType<PageButtonsLayoutProperty, Page>;
+
+const PageButtonLayout: React.FC<ComponentType> = ({
+  value,
+  property,
+  errors,
+  updateValue,
+  context,
+}) => {
   const { layouts } = property;
+  const index = context.order;
 
   const buttonState: Record<string, boolean> = {
     save: context?.buttons?.save,
     back: context?.buttons?.back,
     submit: true,
   };
 
+  const itemComparison: string[][][] = [];
+  const items = layouts
+    .map((layout) => {
+      const groups = layout.split(' ').map((group) =>
+        group
+          .split('|')
+          .filter((button) => buttonState.back || button !== 'back') // remove back button if not enabled
+          .filter((button) => buttonState.save || button !== 'save') // remove save button if not enabled
+          .filter((button) => index !== 0 || button !== 'back') // remove "back" from first page
+          .filter(Boolean)
+      );
+
+      if (itemComparison.some((item) => isEqual(item, groups))) {
+        return null;
+      }
+
+      itemComparison.push(groups);
+
+      return {
+        layout,
+        groups,
+      };
+    })
+    .filter(Boolean);
+
   return (
     <Control property={property} errors={errors}>
       <ButtonLayoutWrapper>
-        {layouts.map((item, idx) => (
+        {items.map((item, idx) => (
           <LayoutBlock
             key={idx}
-            onClick={() => updateValue(item)}
-            className={classes(value === item && 'active')}
+            onClick={() => updateValue(item.layout)}
+            className={classes(value === item.layout && 'active')}
           >
-            {item.split(' ').map((group, groupIdx) => (
+            {item.groups.map((buttons, groupIdx) => (
               <ButtonGroup key={groupIdx}>
-                {group
-                  .split('|')
-                  .filter(Boolean)
-                  .map((button, buttonIdx) => (
-                    <Button
-                      className={classes(
-                        button,
-                        buttonState?.[button] && 'enabled'
-                      )}
-                      key={buttonIdx}
-                    >
-                      {icons[button]}
-                    </Button>
-                  ))}
+                {buttons.map((button, buttonIdx) => (
+                  <Button
+                    className={classes(
+                      button,
+                      buttonState?.[button] && 'enabled'
+                    )}
+                    key={buttonIdx}
+                  >
+                    {icons[button]}
+                  </Button>
+                ))}
               </ButtonGroup>
             ))}
           </LayoutBlock>

packages/client/src/app/components/form-controls/control-types/table/editor/table.editor.styles.ts

@@ -0,0 +1,70 @@
+import { colors } from '@ff-client/styles/variables';
+import styled from 'styled-components';
+
+export const OptionContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  padding: 0 8px;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  }
+`;
+
+export const TextContainer = styled.div`
+  display: flex;
+  align-items: center;
+
+  input:first-child {
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+  }
+`;
+
+const Button = styled.button`
+  width: 20px;
+  height: 20px;
+
+  padding: 2px;
+  margin: 0;
+  border: 0;
+
+  &:before {
+    content: 'plus';
+
+    color: ${colors.gray500};
+
+    font-family: Craft;
+    font-size: 15px;
+    font-weight: 100;
+    line-height: 15px;
+  }
+`;
+
+export const AddButton = styled(Button)`
+  right: 20px;
+
+  &:before {
+    content: 'plus';
+  }
+`;
+
+export const RemoveButton = styled(Button)`
+  &:before {
+    content: 'minus';
+  }
+`;
+
+export const CheckboxContainer = styled.div`
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  gap: 5px;
+
+  padding: 0 8px;
+
+  label {
+    display: block;
+  }
+`;