diff --git a/src/assets/Shape.svg b/src/assets/Shape.svg
new file mode 100644
index 000000000..7a1fa990e
--- /dev/null
+++ b/src/assets/Shape.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/pencil-square.svg b/src/assets/pencil-square.svg
new file mode 100644
index 000000000..6f33e3e3b
--- /dev/null
+++ b/src/assets/pencil-square.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/accordions.js b/src/components/accordions.js
index 7d8dd324d..8a9ca3558 100644
--- a/src/components/accordions.js
+++ b/src/components/accordions.js
@@ -58,7 +58,7 @@ export default [
},
{
name: 'Design',
- fields: ['color', 'bgcolor', 'variant', 'toggle', 'height', 'width'],
+ fields: ['color', 'bgcolor', 'variant', 'toggle', 'height', 'width', 'designerMode', 'bgcolormodern'],
open: false,
},
{
diff --git a/src/components/inspector/collection-data-source.vue b/src/components/inspector/collection-data-source.vue
index bc08411fd..f71176063 100644
--- a/src/components/inspector/collection-data-source.vue
+++ b/src/components/inspector/collection-data-source.vue
@@ -73,7 +73,6 @@
"variableStore",
"dataSelectionOptions",
"singleField"
-
];
export default {
components: {
diff --git a/src/components/inspector/collection-designer-mode.vue b/src/components/inspector/collection-designer-mode.vue
new file mode 100644
index 000000000..881f1ffb8
--- /dev/null
+++ b/src/components/inspector/collection-designer-mode.vue
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
{{ label }}
-
+
+
+
+
+
+
+
+
{{ $t("The form to be displayed is not assigned.") }}
+
{{
$t(
@@ -241,7 +281,9 @@ export default {
"formWatchers",
"_perPage",
"source",
- "paginationOption"
+ "paginationOption",
+ "designerMode",
+ "bgcolormodern"
],
data() {
return {
@@ -278,10 +320,30 @@ export default {
selectedRows: [],
selectedIndex: null,
rows: [],
- selectAll: false
+ selectAll: false,
+ styleMode: "Classic",
+ isPopoverVisible: null,
+ popoverPosition: { top: '0px', left: '0px' }
};
},
computed: {
+ tableClassModern() {
+ if (this.styleMode === 'Modern') {
+ switch (this.bgcolormodern) {
+ case 'alert alert-primary':
+ return 'record-list-table-primary';
+ case 'alert alert-success':
+ return 'record-list-table-success';
+ case 'alert alert-warning':
+ return 'record-list-table-warning';
+ case 'alert alert-secondary':
+ return 'record-list-table-secondary';
+ default:
+ return 'record-list-table-secondary';
+ }
+ }
+ return '';
+ },
indeterminate() {
return this.selectedRows.length > 0 && this.selectedRows.length < this.tableData.data.length;
},
@@ -420,9 +482,37 @@ export default {
this.onCollectionChange(this.source?.collectionFields?.collectionId, this.source?.collectionFields?.pmql);
}
+ this.setStyleMode(this.designerMode?.designerOptions);
this.$root.$emit("record-list-option", this.source?.sourceOptions);
},
methods: {
+ togglePopover(index, event, rowId) {
+ this.deleteIndex = _.find(this.tableData.data, { row_id: rowId });
+ this.isPopoverVisible = this.isPopoverVisible === index ? null : index;
+ if (this.isPopoverVisible !== null) {
+ const rect = event.target.getBoundingClientRect();
+ this.popoverPosition = {
+ top: `${rect.bottom + window.scrollY}px`,
+ left: `${rect.left + window.scrollX}px`
+ };
+ }
+ },
+ hidePopover() {
+ this.isPopoverVisible = null;
+ },
+ popover_remove() {
+ this.remove();
+ this.hidePopover();
+ },
+ rowClass(item) {
+ return this.isRowSelected(item) ? 'sel-row' : '';
+ },
+ isRowSelected(item) {
+ return this.selectedRows.includes(item) || this.selectedRow === item;
+ },
+ setStyleMode(value) {
+ this.styleMode = value ? value : "Classic";
+ },
selectAllRows() {
if (this.allRowsSelected) {
const updatedRows = this.tableData.data.map((item, index) => {
@@ -769,13 +859,100 @@ export default {
// Emit the newly updated data model
this.$emit("input", data);
this.$root.$emit("removed-record", this, recordData);
- }
+ },
}
};
-
diff --git a/src/components/sortable/tableStyles.scss b/src/components/sortable/tableStyles.scss
new file mode 100644
index 000000000..61efa725e
--- /dev/null
+++ b/src/components/sortable/tableStyles.scss
@@ -0,0 +1,42 @@
+$primary-bg-color: #f8fbff;
+$primary-border-color: #e6efff;
+
+$success-bg-color: #71d188;
+$success-border-color: #28a745;
+
+$warning-bg-color: #fff3cd;
+$warning-border-color: #ffc107;
+
+$secondary-bg-color: #fbfbfc;
+$secondary-border-color: #f3f5f7;
+
+@mixin record-list-table($bg-color, $border-color) {
+ @extend .record-list-table-base;
+
+ thead th {
+ background-color: $bg-color;
+ border-top-color: $border-color;
+ border-bottom-color: $border-color;
+ &:first-child {
+ border-left-color: $border-color;
+ }
+ &:last-child {
+ border-right-color: $border-color;
+ }
+ }
+
+ tbody tr {
+ td {
+ border-color: $border-color;
+ border-top: solid 0;
+ }
+
+ td:first-child {
+ border-left-color: $border-color;
+ }
+
+ td:last-child {
+ border-right-color: $border-color;
+ }
+ }
+}
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 538881cc0..f62a9ef0e 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -245,7 +245,7 @@
v-model="element.items"
:validation-errors="validationErrors"
class="card-body"
- :class="elementCssClass(element)"
+ :class="styleMode === 'Modern' ? elementCssClassModern(element) : elementCssClass(element)"
:selected="selected"
:config="element.config"
:ai-element="element"
@@ -299,7 +299,7 @@
:tabindex="element.config.interactive ? 0 : -1"
class="card-body m-0 pb-4 pt-4"
:class="[
- elementCssClass(element),
+ styleMode === 'Modern' ? elementCssClassModern(element) : elementCssClass(element),
{ 'prevent-interaction': !element.config.interactive }
]"
@input="
@@ -376,7 +376,7 @@
v-model="accordion.open"
>
{
this.updateProgress(progress, nonce);
});
+ this.$root.$on("style-mode", (mode) => {
+ this.styleMode = mode;
+ });
this.setGroupOrder(defaultGroupOrder);
},
methods: {
@@ -876,7 +881,7 @@ export default {
this.$refs.tabsBar.openClipboard();
});
},
- shouldShow(item) {
+ shouldShow(item, accordion) {
const sourceOptions = this.inspection.config[item.field]?.sourceOptions;
if (sourceOptions === 'Variable') {
@@ -888,6 +893,21 @@ export default {
this.enableOption = false;
}
+ if(this.styleMode === "Modern") {
+ this.enableDesignOption = false;
+ } else {
+ this.enableDesignOption = true;
+ }
+
+ if(accordion.name === "Design") {
+ if(item.type === "ColorSelectRecord" && !this.enableDesignOption) {
+ return false;
+ }
+ if(item.type === "ColorSelectModern" && this.enableDesignOption ) {
+ return false;
+ }
+ }
+
return !(item.if === "hideControl" && this.enableOption === false);
},
isCurrentPageEmpty(currentPage) {
diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index 0ae341a31..b9c6fb2d4 100755
--- a/src/form-builder-controls.js
+++ b/src/form-builder-controls.js
@@ -46,6 +46,9 @@ import {
tooltipProperty,
LoadingSubmitButtonProperty,
LabelSubmitButtonProperty,
+ bgcolorModern,
+ bgcolorPropertyRecord,
+ colorPropertyRecord,
} from './form-control-common-properties';
export default [
@@ -557,8 +560,17 @@ export default [
},
if: 'hideControl'
},
- colorProperty,
- bgcolorProperty,
+ {
+ type: 'collectionDesignerMode',
+ field: 'designerMode',
+ config: {
+ label: 'Table Style',
+ helper: ''
+ }
+ },
+ colorPropertyRecord,
+ bgcolorPropertyRecord,
+ bgcolorModern
],
},
},
diff --git a/src/form-control-common-properties.js b/src/form-control-common-properties.js
index 2a3d67049..1cbd32b32 100644
--- a/src/form-control-common-properties.js
+++ b/src/form-control-common-properties.js
@@ -1,6 +1,33 @@
import Tooltip from './components/inspector/tooltip';
import DeviceVisibility from './components/inspector/device-visibility';
+export const bgcolorModern = {
+ type: 'ColorSelectModern',
+ field: 'bgcolormodern',
+ config: {
+ label: '',
+ helper: '',
+ options: [
+ {
+ value: 'alert alert-primary',
+ content: 'primary',
+ },
+ {
+ value: 'alert alert-success',
+ content: 'success',
+ },
+ {
+ value: 'alert alert-warning',
+ content: 'warning',
+ },
+ {
+ value: 'alert alert-secondary',
+ content: 'secondary',
+ },
+ ],
+ },
+};
+
export const bgcolorProperty = {
type: 'ColorSelect',
field: 'bgcolor',
@@ -44,6 +71,49 @@ export const bgcolorProperty = {
},
};
+export const bgcolorPropertyRecord = {
+ type: 'ColorSelectRecord',
+ field: 'bgcolor',
+ config: {
+ label: 'Background Color',
+ helper: 'Set the element\'s background color',
+ options: [
+ {
+ value: 'alert alert-primary',
+ content: 'primary',
+ },
+ {
+ value: 'alert alert-secondary',
+ content: 'secondary',
+ },
+ {
+ value: 'alert alert-success',
+ content: 'success',
+ },
+ {
+ value: 'alert alert-danger',
+ content: 'danger',
+ },
+ {
+ value: 'alert alert-warning',
+ content: 'warning',
+ },
+ {
+ value: 'alert alert-info',
+ content: 'info',
+ },
+ {
+ value: 'alert alert-light',
+ content: 'light',
+ },
+ {
+ value: 'alert alert-dark',
+ content: 'dark',
+ },
+ ],
+ },
+};
+
export const colorProperty = {
type: 'ColorSelect',
field: 'color',
@@ -87,6 +157,49 @@ export const colorProperty = {
},
};
+export const colorPropertyRecord = {
+ type: 'ColorSelectRecord',
+ field: 'color',
+ config: {
+ label: 'Text Color',
+ helper: 'Set the element\'s text color',
+ options: [
+ {
+ value: 'text-primary',
+ content: 'primary',
+ },
+ {
+ value: 'text-secondary',
+ content: 'secondary',
+ },
+ {
+ value: 'text-success',
+ content: 'success',
+ },
+ {
+ value: 'text-danger',
+ content: 'danger',
+ },
+ {
+ value: 'text-warning',
+ content: 'warning',
+ },
+ {
+ value: 'text-info',
+ content: 'info',
+ },
+ {
+ value: 'text-light',
+ content: 'light',
+ },
+ {
+ value: 'text-dark',
+ content: 'dark',
+ },
+ ],
+ },
+};
+
// Ref https://mathiasbynens.be/notes/javascript-identifiers
export const javascriptReservedKeywords = 'null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false';
diff --git a/src/mixins/HasColorProperty.js b/src/mixins/HasColorProperty.js
index 469c8d026..14a41749b 100644
--- a/src/mixins/HasColorProperty.js
+++ b/src/mixins/HasColorProperty.js
@@ -7,6 +7,11 @@ export default {
element.config.color ? css.push(element.config.color) : null;
return css.join(' ');
},
+ elementCssClassModern(element) {
+ const css = [];
+ element.config.bgcolormodern ? css.push(element.config.bgcolormodern) : null;
+ return css.join(' ');
+ }
},
};