1.8.0

Author: adamberecz

CHANGELOG.md

@@ -1,5 +1,16 @@
 [//]: # (Don't use <tags>)
 
+## v1.8.0
+
+> `2024-10-29`
+
+### 🎉 Feature
+- New Matrix element.
+- Allow users to save custom elements.
+
+### 🐞 Bug Fixes
+- Don't show resizer between elements in preview mode #85.
+
 ## v1.7.4
 
 > `2024-09-17`

index.css

@@ -1927,23 +1927,37 @@ div > div:first-of-type[style*="none;"] + .vfb-util-props-separator-top {
 }
 
 .vfb-config-panel-header-close {
-  @apply mt-0.5 mr-2 text-gray-400 transition-colors hover:text-gray-800 cursor-pointer dark:text-dark-400 dark:hover:text-dark-300;
+  @apply mt-1 mr-2 text-gray-400 transition-colors hover:text-gray-800 cursor-pointer dark:text-dark-400 dark:hover:text-dark-300;
+}
+
+.vfb-config-panel-header-label-wrapper {
+  @apply flex flex-col justify-center min-h-[2rem];
 }
 
 .vfb-config-panel-header-label {
   @apply text-xl;
 }
 
+.vfb-config-panel-header-description {
+  @apply text-gray-500 text-xs leading-none;
+}
+
+.vfb-config-panel-header-label-wrapper.has-subtitle .vfb-config-panel-header-label {
+  @apply text-lg leading-none;
+}
+
 .vfb-config-panel-header-warning {
   @apply text-red-500 text-[12px] ml-1.5 mt-1 cursor-pointer relative;
 }
 
+.vfb-config-panel-header-save,
 .vfb-config-panel-header-clone,
 .vfb-config-panel-header-remove,
 .vfb-config-panel-header-collapse {
-  @apply flex items-center justify-center h-full text-gray-500 transition-colors cursor-pointer hover:text-gray-600 dark:text-dark-400 hover:dark:text-dark-300;
+  @apply flex items-center justify-center h-full text-gray-500 transition-colors cursor-pointer hover:text-gray-600 dark:text-dark-400 hover:dark:text-dark-300 vfb-tooltip-group relative;
 }
 
+.vfb-config-panel-header-save,
 .vfb-config-panel-header-clone,
 .vfb-config-panel-header-remove {
   @apply mr-3;
@@ -1996,7 +2010,7 @@ div > div:first-of-type[style*="none;"] + .vfb-util-props-separator-top {
   --vf-border-color-checkbox: var(--vf-dark-800);
 }
 
-.vfb-config-toggle + .vfb-config-toggle {
+.vfb-config-toggle + .vfb-config-toggle:not(.vfb-util-props-separator-top) {
   @apply -mt-2;
 }
 
@@ -2102,7 +2116,25 @@ div > div:first-of-type[style*="none;"] + .vfb-util-props-separator-top {
 }
 
 .vfb-element-container {
-  @apply flex items-center -ml-2.5 -mr-2.5 px-2.5 py-2.5 my-2 border border-primary-500 bg-primary-500 bg-opacity-0 border-opacity-0 duration-300 rounded-lg transition-shadow shadow-none duration-300;
+  @apply flex items-center -ml-2.5 -mr-2.5 px-2.5 py-2.5 my-2 border border-primary-500 bg-primary-500 bg-opacity-0 border-opacity-0 duration-300 rounded-lg transition-shadow shadow-none relative;
+}
+.vfb-element-container:hover .vfb-element-actions, .vfb-element-container:focus .vfb-element-actions, .vfb-element-container:focus-within .vfb-element-actions {
+  @apply opacity-100;
+}
+.vfb-element-container:hover .vfb-element-action, .vfb-element-container:focus .vfb-element-action, .vfb-element-container:focus-within .vfb-element-action {
+  @apply block;
+}
+
+.vfb-element-actions {
+  @apply transition-opacity duration-300 opacity-0 absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-300 bg-white px-3 py-2 rounded dark:bg-dark-800 flex items-center justify-center gap-4;
+}
+
+.vfb-element-action {
+  @apply hidden;
+}
+
+.vfb-element-action-icon {
+  @apply transition-colors hover:text-gray-500 dark:text-dark-500 dark:hover:text-dark-200;
 }
 
 .vfb-element-container-enabled {
@@ -2432,7 +2464,7 @@ div > div:first-of-type[style*="none;"] + .vfb-util-props-separator-top {
 }
 
 .vfb-export-container {
-  @apply max-w-100vw-194.5 mx-auto my-4;
+  @apply max-w-100vw-194.5 mx-auto my-4 min-w-[352px];
 }
 
 .vfb-export-code {
@@ -3733,6 +3765,10 @@ div > div:first-of-type[style*="none;"] + .vfb-util-props-separator-top {
   @apply border-transparent;
 }
 
+.vfb-preview-element-inert-wrapper {
+  @apply h-full;
+}
+
 .vfb-preview-element-multi-resizer {
   @apply w-4 absolute right-[calc((var(--vf-gutter)/2+0.5rem)*-1)] -bottom-2 -top-2 z-2 cursor-ew-resize flex items-stretch justify-stretch;
 }

index.d.mts

@@ -104,12 +104,15 @@ declare module '@vueform/builder' {
   const BoolValueField: any;
   const ButtonLabelField: any;
   const ButtonTypeField: any;
+  const CanAddField: any;
   const CanClearField: any;
   const CanDropField: any;
+  const CanRemoveField: any;
   const CanUndoField: any;
   const ClickableField: any;
   const ColorsField: any;
   const ColumnsField: any;
+  const ColWrapField: any;
   const ConditionsField: any;
   const ContentField: any;
   const ControlsField: any;
@@ -166,6 +169,8 @@ declare module '@vueform/builder' {
   const FormWidthField: any;
   const FullField: any;
   const HeightField: any;
+  const HideColsField: any;
+  const HideRowsField: any;
   const Hour24Field: any;
   const HrefField: any;
   const IdField: any;
@@ -180,6 +185,15 @@ declare module '@vueform/builder' {
   const LabelsField: any;
   const LineField: any;
   const LinkField: any;
+  const MatrixColsField: any;
+  const MatrixGapField: any;
+  const MatrixInputTypeField: any;
+  const MatrixItemsField: any;
+  const MatrixMaxField: any;
+  const MatrixMaxWidthField: any;
+  const MatrixMinField: any;
+  const MatrixMinWidthField: any;
+  const MatrixRowsField: any;
   const MaxField: any;
   const MaxFontSizeField: any;
   const MaxOptionsField: any;
@@ -197,6 +211,7 @@ declare module '@vueform/builder' {
   const NoResultsField: any;
   const ObjectField: any;
   const OrientationField: any;
+  const PaddingField: any;
   const PageButtonsField: any;
   const PageConditionsField: any;
   const PageLabelField: any;
@@ -208,6 +223,8 @@ declare module '@vueform/builder' {
   const ReadonlyField: any;
   const ResetsField: any;
   const RowsField: any;
+  const RowWrapField: any;
+  const ScrollableField: any;
   const SearchField: any;
   const SearchField_tags: any;
   const SecondsField: any;
@@ -220,6 +237,8 @@ declare module '@vueform/builder' {
   const SoftRemoveField: any;
   const SpaceField: any;
   const StepField: any;
+  const StickyColsField: any;
+  const StickyRowsField: any;
   const StoreField: any;
   const StoreOrderField: any;
   const SubmitField: any;
@@ -252,6 +271,7 @@ declare module '@vueform/builder' {
   const ValidationField: any;
   const ViewField: any;
   const ViewField_file: any;
+  const ViewField_matrix: any;
 
   function defineConfig(options: BuilderConfig): BuilderConfig;
 
@@ -289,12 +309,15 @@ declare module '@vueform/builder' {
     BoolValueField,
     ButtonLabelField,
     ButtonTypeField,
+    CanAddField,
     CanClearField,
     CanDropField,
+    CanRemoveField,
     CanUndoField,
     ClickableField,
     ColorsField,
     ColumnsField,
+    ColWrapField,
     ConditionsField,
     ContentField,
     ControlsField,
@@ -351,6 +374,8 @@ declare module '@vueform/builder' {
     FormWidthField,
     FullField,
     HeightField,
+    HideColsField,
+    HideRowsField,
     Hour24Field,
     HrefField,
     IdField,
@@ -365,6 +390,15 @@ declare module '@vueform/builder' {
     LabelsField,
     LineField,
     LinkField,
+    MatrixColsField,
+    MatrixGapField,
+    MatrixInputTypeField,
+    MatrixItemsField,
+    MatrixMaxField,
+    MatrixMaxWidthField,
+    MatrixMinField,
+    MatrixMinWidthField,
+    MatrixRowsField,
     MaxField,
     MaxFontSizeField,
     MaxOptionsField,
@@ -382,6 +416,7 @@ declare module '@vueform/builder' {
     NoResultsField,
     ObjectField,
     OrientationField,
+    PaddingField,
     PageButtonsField,
     PageConditionsField,
     PageLabelField,
@@ -393,6 +428,8 @@ declare module '@vueform/builder' {
     ReadonlyField,
     ResetsField,
     RowsField,
+    RowWrapField,
+    ScrollableField,
     SearchField,
     SearchField_tags,
     SecondsField,
@@ -405,6 +442,8 @@ declare module '@vueform/builder' {
     SoftRemoveField,
     SpaceField,
     StepField,
+    StickyColsField,
+    StickyRowsField,
     StoreField,
     StoreOrderField,
     SubmitField,
@@ -437,6 +476,7 @@ declare module '@vueform/builder' {
     ValidationField,
     ViewField,
     ViewField_file,
+    ViewField_matrix,
 
   }
 

index.mjs

@@ -1373,5 +1373,124 @@ export default {
 	"validation_disabled_conditions_display_empty_text": "No conditions for disabled",
 	"validation_readonly_conditions_display_empty_text": "No conditions for readonly",
 	"condition_modal_title_disabled": "/ disabled",
-	"condition_modal_title_readonly": "/ readonly"
+	"condition_modal_title_readonly": "/ readonly",
+  "matrix_label": "Matrix",
+  "matrix_description": "A matrix of input fields",
+  "matrix_cols_1": "Column 1",
+  "matrix_cols_2": "Column 2",
+  "matrix_rows_1": "Row 1",
+  "matrix_rows_2": "Row 2",
+  "section_matrix_rows": "Options",
+  "condition_modal_title_column": "/ Column condition",
+  "condition_modal_title_row": "/ Row condition",
+  "col_wrap_col_wrap_label": "Allow multi-line columns",
+  "matrix_gap_gap_label": "Cell gap",
+  "matrix_rows_rows_wrapper_item_static": "Static rows",
+  "matrix_rows_rows_wrapper_item_dynamic": "Dynamic rows",
+  "matrix_rows_rows_count_label": "Initial rows count",
+  "matrix_rows_min_label": "Min rows",
+  "matrix_rows_min_placeholder": "none",
+  "matrix_rows_max_label": "Max rows",
+  "matrix_rows_max_placeholder": "none",
+  "matrix_rows_can_add_label": "Can add rows",
+  "matrix_rows_add_text_label": "Add button text",
+  "matrix_rows_can_remove_label": "Can remove rows",
+  "matrix_rows_rows_list_add_text": "+ Add row",
+  "matrix_rows_rows_list_label_placeholder": "Text",
+  "matrix_rows_rows_list_value_placeholder": "Value",
+  "matrix_rows_rows_list_button_conditions": "Conditions",
+  "matrix_cols_cols_add_text": "+ Add column",
+  "matrix_cols_label_placeholder": "Text",
+  "matrix_cols_value_placeholder": "Value",
+  "matrix_cols_input_type_placeholder": "Type",
+  "matrix_cols_width_placeholder": "Width",
+  "matrix_cols_button_conditions": "Conditions",
+  "matrix_cols_items_label": "Options",
+  "matrix_cols_items_add_text": "+ Add option",
+  "matrix_cols_items_label_placeholder": "Text",
+  "matrix_cols_items_value_placeholder": "Value",
+  "matrix_items_items_label": "Options",
+  "matrix_items_items_add_text": "+ Add option",
+  "matrix_items_items_label_placeholder": "Text",
+  "matrix_items_items_value_placeholder": "Value",
+  "matrix_input_type_input_type_label": "Default type",
+  "matrix_max_width_max_width_label": "Max column width",
+  "matrix_max_width_max_width_placeholder": "auto",
+  "matrix_min_width_min_width_label": "Min column width",
+  "matrix_min_width_min_width_placeholder": "auto",
+  "hide_cols_hide_cols_label": "Hide column labels",
+  "hide_rows_hide_rows_label": "Hide row labels",
+  "padding_padding_label": "Horizontal padding",
+  "row_wrap_row_wrap_label": "Allow multi-line rows",
+  "scrollable_scrollable_label": "Allow scroll",
+  "sticky_cols_sticky_cols_label": "Sticky columns headers",
+  "sticky_rows_sticky_rows_label": "Sticky row labels",
+  "view_matrix_view_label": "View",
+  "view_matrix_view_item_table": "Table",
+  "save": "Save",
+  "cancel": "Cancel",
+  "delete": "Delete",
+	"category_custom": "Custom",
+  "custom_element_modal_title_save": "Save element",
+  "custom_element_modal_title_edit": "Save element",
+  "custom_element_modal_subtitle_edit": "Saving existing element will not update existing copies!",
+  "custom_element_modal_form_label_label": "Name",
+  "custom_element_modal_form_label_description": "This is how it will appear in the list of elements.",
+  "custom_element_modal_form_label_placeholder": "Eg. Text element",
+  "custom_element_modal_form_description_label": "Description",
+  "custom_element_modal_form_description_description": "This should briefly describe what an element does.",
+  "custom_element_modal_form_description_placeholder": "Eg. Single line text input",
+  "custom_element_modal_form_key_label": "Key",
+  "custom_element_modal_form_key_description": "Unique identifier and initial name of the element.",
+  "custom_element_modal_error_restricted": "The key <b>%key%</b> is restricted, please choose another.",
+  "custom_element_modal_error_used": "The key <b>%key%</b> is already in use.",
+  "custom_element_modal_form_note": "Please note that updating a custom element type will not update instances that are already added to the form!",
+  "delete_element_confirm": "Are you sure you want to delete this element?",
+  "column_text_label": "Text",
+  "column_number_label": "Number",
+  "column_email_label": "Email",
+  "column_phone_label": "Phone",
+  "column_password_label": "Password",
+  "column_url_label": "URL",
+  "column_location_label": "Location",
+  "column_textarea_label": "Textarea",
+  "column_editor_label": "Editor",
+  "column_checkbox_label": "Checkbox",
+  "column_checkboxgroup_label": "Checkbox group",
+  "column_checkboxgroup_tabs_label": "Checkbox tabs",
+  "column_checkboxgroup_blocks_label": "Checkbox blocks",
+  "column_radiogroup_label": "Radio group",
+  "column_radiogroup_tabs_label": "Radio tabs",
+  "column_radiogroup_blocks_label": "Radio blocks",
+  "column_toggle_label": "Toggle",
+  "column_select_label": "Select",
+  "column_multiselect_label": "Multiselect",
+  "column_tags_label": "Tags",
+  "column_date_label": "Date",
+  "column_time_label": "Time",
+  "column_datetime_label": "Date-time",
+  "column_week_label": "Week",
+  "column_month_label": "Month",
+  "column_file_label": "File upload",
+  "column_image_label": "Image upload",
+	"simple_matrix_label": "Single choice matrix",
+	"simple_matrix_description": "Matrix of single choice options",
+	"simple_matrix_multi_label": "Multiple choice matrix",
+	"simple_matrix_multi_description": "Matrix of multiple choice options",
+  "element_save_button_tooltip": "Save as new element",
+  "element_edit_button_tooltip": "Save",
+  "section_rows": "Rows",
+  "section_columns": "Columns",
+  "simple_section_rows": "Rows",
+  "simple_section_columns": "Columns",
+  "matrix_default_option_label": "Option",
+  "matrix_default_option_value": "option",
+  "table_label": "Table",
+  "table_description": "Spreadsheet-like table of text inputs",
+  "table_cols_1": "Column 1",
+  "table_cols_2": "Column 2",
+  "table_rows_1": "Row 1",
+  "table_rows_2": "Row 2",
+  "simple_table_label": "Table",
+  "simple_table_description": "Spreadsheet-like table of text inputs"
 };