setShowColorPicker(true)}
diff --git a/frontend/src/Editor/Components/Divider.jsx b/frontend/src/Editor/Components/Divider.jsx
index 5935181bf7..349c6f0ddc 100644
--- a/frontend/src/Editor/Components/Divider.jsx
+++ b/frontend/src/Editor/Components/Divider.jsx
@@ -1,20 +1,99 @@
import React from 'react';
-export const Divider = function Divider({ styles, dataCy, height, width, darkMode }) {
- const { visibility, dividerColor, boxShadow } = styles;
+const DASH_WIDTH = 4;
+const DASH_GAP = 4;
+export const Divider = function Divider({ dataCy, height, width, darkMode, styles, properties }) {
+ const { labelAlignment, labelColor, dividerColor, boxShadow, dividerStyle, padding } = styles;
+ const { label, visibility } = properties;
const color =
dividerColor === '' || ['#000', '#000000'].includes(dividerColor) ? (darkMode ? '#fff' : '#000') : dividerColor;
+
+ const dividerLineStyle = {
+ width: '100%',
+ padding: '0rem',
+ boxShadow,
+ ...(dividerStyle === 'dashed'
+ ? {
+ backgroundImage: `linear-gradient(to right, ${color} ${DASH_WIDTH}px, transparent ${DASH_GAP}px)`,
+ backgroundSize: `${DASH_WIDTH + DASH_GAP}px 1px`,
+ backgroundRepeat: 'repeat-x',
+ backgroundColor: 'transparent',
+ borderTop: 'none',
+ height: '1px',
+ }
+ : {
+ height: '1px',
+ backgroundColor: color,
+ borderTop: 'none',
+ }),
+ };
+
+ const labelStyles = {
+ color: labelColor,
+ boxShadow,
+ fontSize: '11px',
+ fontWeight: '500',
+ lineHeight: '16px',
+ };
+
+ // If no label, render the original divider
+ if (!label) {
+ return (
+
+ );
+ }
+
+ // With label - handle different positions
return (
-
+ {labelAlignment === 'left' && (
+ <>
+
{label}
+
+
+ )}
+
+ {labelAlignment === 'center' && (
+
+ )}
+
+ {labelAlignment === 'right' && (
+ <>
+
+
{label}
+
+ )}
);
};
diff --git a/frontend/src/Editor/Components/DropdownV2/CustomMenuList.jsx b/frontend/src/Editor/Components/DropdownV2/CustomMenuList.jsx
index 848de076ae..6be9d65bc7 100644
--- a/frontend/src/Editor/Components/DropdownV2/CustomMenuList.jsx
+++ b/frontend/src/Editor/Components/DropdownV2/CustomMenuList.jsx
@@ -1,87 +1,118 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
import { components } from 'react-select';
import SolidIcon from '@/_ui/Icon/SolidIcons';
import Loader from '@/ToolJetUI/Loader/Loader';
import './dropdownV2.scss';
-import { FormCheck } from 'react-bootstrap';
+// eslint-disable-next-line import/no-unresolved
+import { useVirtualizer } from '@tanstack/react-virtual';
import cx from 'classnames';
const { MenuList } = components;
// This Menulist also used in MultiselectV2
const CustomMenuList = ({ selectProps, ...props }) => {
- const {
- onInputChange,
- onMenuInputFocus,
- showAllOption,
- isSelectAllSelected,
- optionsLoadingState,
- darkMode,
- setSelected,
- setIsSelectAllSelected,
- fireEvent,
- inputValue,
- menuId,
- } = selectProps;
+ const { onInputChange, onMenuInputFocus, optionsLoadingState, darkMode, inputValue, menuId, showSearchInput } =
+ selectProps;
- const handleSelectAll = (e) => {
- e.target.checked && fireEvent();
- if (e.target.checked) {
- setSelected(props.options);
- } else {
- setSelected([]);
+ const parentRef = useRef(null);
+ const virtualizer = useVirtualizer({
+ count: props?.children?.length || 0,
+ getScrollElement: () => parentRef.current,
+ estimateSize: () => 40,
+ overscan: 15,
+ });
+
+ useEffect(() => {
+ const searchInput = document.querySelector('.dropdown-multiselect-widget-search-box');
+ if (searchInput) {
+ searchInput.focus();
}
- setIsSelectAllSelected(e.target.checked);
- };
+ }, []);
+
return (
) : (
{
event.stopPropagation();
fireEvent('onHover');
@@ -97,7 +97,7 @@ export const Icon = ({
color={color}
style={{
width: height < width ? 'auto' : width,
- height: height < width ? height : 'auto',
+ height: height < width ? '100%' : 'auto',
color: iconColor,
}}
onClick={(event) => {
diff --git a/frontend/src/Editor/Components/Link/Link.jsx b/frontend/src/Editor/Components/Link/Link.jsx
index 0b33686278..3a5744df8e 100644
--- a/frontend/src/Editor/Components/Link/Link.jsx
+++ b/frontend/src/Editor/Components/Link/Link.jsx
@@ -19,8 +19,7 @@ export const Link = ({ height, properties, styles, fireEvent, setExposedVariable
const computedStyles = {
display: 'flex',
alignItems: verticalAlignment === 'top' ? 'flex-start' : verticalAlignment === 'center' ? 'center' : 'flex-end',
- justifyContent:
- horizontalAlignment === 'left' ? 'flex-start' : horizontalAlignment === 'center' ? 'center' : 'flex-end',
+ textAlign: horizontalAlignment === 'left' ? 'left' : horizontalAlignment === 'center' ? 'center' : 'right',
height: '100%',
width: '100%',
boxShadow,
@@ -113,10 +112,20 @@ export const Link = ({ height, properties, styles, fireEvent, setExposedVariable
onMouseOver={() => {
fireEvent('onHover');
}}
- style={{ color: textColor, fontSize: textSize, cursor: isDisabled ? 'not-allowed' : 'pointer' }}
+ style={{ width: '100%' }}
ref={clickRef}
>
-
+
{iconVisibility && (
)}
- {linkTextState}
+ {linkTextState}
diff --git a/frontend/src/Editor/Components/Link/link.scss b/frontend/src/Editor/Components/Link/link.scss
index a92f19829f..20b375025f 100644
--- a/frontend/src/Editor/Components/Link/link.scss
+++ b/frontend/src/Editor/Components/Link/link.scss
@@ -1,8 +1,18 @@
.link-widget {
a {
- text-underline-offset: 32%; // Adds space between text and underline
- &:hover {
- color: var(--link-hover-color) !important;
- }
+ text-decoration: none !important;
+ pointer-events: none;
+ cursor: none !important;
+
+ .link-text {
+ pointer-events: all;
+ text-underline-offset: 32%; // Adds space between text and underline
+ cursor: pointer;
+ &:hover {
+ text-decoration: underline;
+ text-decoration-color: var(--link-hover-color) !important;
+ color: var(--link-hover-color) !important;
+ }
}
+ }
}
diff --git a/frontend/src/Editor/Components/MultiselectV2/CustomOption.jsx b/frontend/src/Editor/Components/MultiselectV2/CustomOption.jsx
index 56b38b2edb..e187cf1292 100644
--- a/frontend/src/Editor/Components/MultiselectV2/CustomOption.jsx
+++ b/frontend/src/Editor/Components/MultiselectV2/CustomOption.jsx
@@ -7,11 +7,23 @@ import { highlightText } from '../DropdownV2/utils';
const CustomOption = (props) => {
return (
-
diff --git a/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx b/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx
index 2901abc106..d167818036 100644
--- a/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx
+++ b/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx
@@ -6,7 +6,11 @@ import './multiselectV2.scss';
const CustomValueContainer = ({ children, ...props }) => {
const selectProps = props.selectProps;
- const values = Array.isArray(selectProps?.value) && selectProps?.value?.map((option) => option.label);
+ const values =
+ Array.isArray(selectProps?.value) &&
+ selectProps?.value
+ ?.filter((option) => option.value !== 'multiselect-custom-menulist-select-all') //Remove the Select all option if selected
+ ?.map((option) => option.label);
const isAllOptionsSelected = selectProps?.value.length === selectProps.options.length;
const valueContainerWidth = selectProps?.containerRef?.current?.offsetWidth;
// eslint-disable-next-line import/namespace
@@ -36,13 +40,13 @@ const CustomValueContainer = ({ children, ...props }) => {
) : (
- {isAllOptionsSelected ? 'All items are selected.' : values.join(', ')}
+ {selectProps?.showAllSelectedLabel && isAllOptionsSelected ? 'All items are selected.' : values.join(', ')}
)}
{/* Rendering children except Placeholder component to preserve the default behavior of react-select like focus
handling */}
{React.Children.map(children, (child) => {
- if (child.type !== Placeholder) {
+ if (child?.type !== Placeholder) {
return child;
}
})}
diff --git a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
index 4665430d00..78b7c79552 100644
--- a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
+++ b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
@@ -11,8 +11,7 @@ import cx from 'classnames';
import Label from '@/_ui/Label';
const tinycolor = require('tinycolor2');
import { CustomDropdownIndicator, CustomClearIndicator } from '../DropdownV2/DropdownV2';
-import { getInputBackgroundColor, getInputBorderColor, getInputFocusedColor } from '../DropdownV2/utils';
-import useStore from '@/AppBuilder/_stores/store';
+import { getInputBackgroundColor, getInputBorderColor, getInputFocusedColor, sortArray } from '../DropdownV2/utils';
export const MultiselectV2 = ({
id,
@@ -37,6 +36,10 @@ export const MultiselectV2 = ({
placeholder,
loadingState: multiSelectLoadingState,
optionsLoadingState,
+ sort,
+ showAllSelectedLabel,
+ showClearBtn,
+ showSearchInput,
} = properties;
const {
selectedTextColor,
@@ -72,12 +75,9 @@ export const MultiselectV2 = ({
const [visibility, setVisibility] = useState(properties.visibility);
const [isMultiSelectLoading, setIsMultiSelectLoading] = useState(multiSelectLoadingState);
const [isMultiSelectDisabled, setIsMultiSelectDisabled] = useState(disabledState);
- const [isSelectAllSelected, setIsSelectAllSelected] = useState(false);
const [searchInputValue, setSearchInputValue] = useState('');
const _height = padding === 'default' ? `${height}px` : `${height + 4}px`;
const [userInteracted, setUserInteracted] = useState(false);
- const currentMode = useStore((state) => state.currentMode);
- const isEditor = currentMode === 'edit';
const [isMultiselectOpen, setIsMultiselectOpen] = useState(false);
useEffect(() => {
@@ -100,9 +100,20 @@ export const MultiselectV2 = ({
isDisabled: data?.disable ?? false,
}))
: [];
- return _selectOptions;
+ return sortArray(_selectOptions, sort);
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [advanced, JSON.stringify(schema), JSON.stringify(options)]);
+ }, [advanced, JSON.stringify(schema), JSON.stringify(options), sort]);
+
+ const modifiedSelectOptions = useMemo(() => {
+ // Adding select all option dynamically to the options
+ if (showAllOption && !optionsLoadingState) {
+ return [
+ // Appended search input value so that it is always visible
+ { label: `Select all ${searchInputValue}`, value: 'multiselect-custom-menulist-select-all' },
+ ...selectOptions,
+ ];
+ } else return selectOptions;
+ }, [showAllOption, JSON.stringify(selectOptions), optionsLoadingState, searchInputValue]);
function findDefaultItem(value, isAdvanced, isDefault) {
if (isAdvanced) {
@@ -128,8 +139,28 @@ export const MultiselectV2 = ({
}
return false;
}
+
const onChangeHandler = (items, action) => {
- setInputValue(items);
+ const SELECT_ALL = 'multiselect-custom-menulist-select-all';
+
+ if (action.option?.value === SELECT_ALL) {
+ // Case 1 - If select all is selected
+ if (action.action === 'select-option') {
+ setInputValue(selectOptions);
+ } else {
+ setInputValue([]);
+ }
+ } else if (items?.some((item) => item.value === SELECT_ALL)) {
+ // Case 2 - If select all is not selected but selected options include select all
+ setInputValue(items.filter((item) => item.value !== SELECT_ALL));
+ } else if (selectOptions?.length === items?.length) {
+ // Case 3 - If all options are selected except select all
+ setInputValue(selectOptions);
+ } else {
+ // Case 4 - Normal selection
+ setInputValue(items);
+ }
+
fireEvent('onSelect');
setUserInteracted(true);
};
@@ -269,26 +300,34 @@ export const MultiselectV2 = ({
fireEvent('onSearchTextChanged');
}
};
- const handleClickOutside = (event) => {
+ const handleClickOutsideSelect = (event) => {
let menu = document.getElementById(`dropdown-multiselect-widget-custom-menu-list-${id}`);
if (
+ isMultiselectOpen &&
multiselectRef.current &&
!multiselectRef.current.contains(event.target) &&
menu &&
!menu.contains(event.target)
) {
- if (isMultiselectOpen) {
- fireEvent('onBlur');
- setIsMultiselectOpen(false);
- setSearchInputValue('');
- }
+ setIsMultiselectOpen(false);
+ fireEvent('onBlur');
+ setSearchInputValue('');
}
};
- const handleClickInEditor = (e) => {
- if (e.target.className.includes('clear-indicator') || isMultiselectOpen) return;
- e.stopPropagation();
- selectRef.current?.onControlMouseDown(e);
+ const handleClickInsideSelect = () => {
+ if (isMultiSelectDisabled || isMultiSelectLoading) return;
+ if (isMultiselectOpen) {
+ setIsMultiselectOpen(false);
+ fireEvent('onBlur');
+ setSearchInputValue('');
+ } else {
+ setIsMultiselectOpen(true);
+ fireEvent('onFocus');
+ if (!showSearchInput) {
+ selectRef.current.focus();
+ }
+ }
};
const setInputValue = (values) => {
@@ -303,20 +342,11 @@ export const MultiselectV2 = ({
};
useEffect(() => {
- document.addEventListener('mousedown', handleClickOutside, { capture: true });
+ document.addEventListener('mousedown', handleClickOutsideSelect, { capture: true });
return () => {
- document.removeEventListener('mousedown', handleClickOutside, { capture: true });
+ document.removeEventListener('mousedown', handleClickOutsideSelect, { capture: true });
};
- }, [isMultiselectOpen]);
-
- // Handle Select all logic
- useEffect(() => {
- if (selectOptions?.length === selected?.length) {
- setIsSelectAllSelected(true);
- } else {
- setIsSelectAllSelected(false);
- }
- }, [selectOptions, selected]);
+ }, [isMultiselectOpen, componentName]);
const customStyles = {
container: (base) => ({
@@ -414,7 +444,7 @@ export const MultiselectV2 = ({
}),
menuList: (provided) => ({
...provided,
- padding: '4px',
+ padding: '0 4px',
// this is needed otherwise :active state doesn't look nice, gap is required
display: 'flex',
flexDirection: 'column',
@@ -425,6 +455,7 @@ export const MultiselectV2 = ({
menu: (provided) => ({
...provided,
marginTop: '5px',
+ borderRadius: '8px',
}),
};
const _width = (labelWidth / 100) * 70; // Max width which label can go is 70% for better UX calculate width based on this value
@@ -467,17 +498,18 @@ export const MultiselectV2 = ({
_width={_width}
top={'1px'}
/>
-
+
diff --git a/frontend/src/Editor/Components/VerticalDivider.jsx b/frontend/src/Editor/Components/VerticalDivider.jsx
new file mode 100644
index 0000000000..76042c8908
--- /dev/null
+++ b/frontend/src/Editor/Components/VerticalDivider.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+const DASH_WIDTH = 4;
+const DASH_GAP = 4;
+
+export const VerticalDivider = function Divider({ styles, height, width, dataCy, darkMode, properties }) {
+ const { dividerColor, boxShadow, dividerStyle } = styles;
+ const color =
+ dividerColor === '' || ['#000', '#000000'].includes(dividerColor) ? (darkMode ? '#fff' : '#000') : dividerColor;
+
+ return (
+
+ );
+};
diff --git a/frontend/src/Editor/Components/verticalDivider.jsx b/frontend/src/Editor/Components/verticalDivider.jsx
deleted file mode 100644
index ba6a38748c..0000000000
--- a/frontend/src/Editor/Components/verticalDivider.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-export const VerticalDivider = function Divider({ styles, height, width, dataCy, darkMode }) {
- const { visibility, dividerColor, boxShadow } = styles;
- const color =
- dividerColor === '' || ['#000', '#000000'].includes(dividerColor) ? (darkMode ? '#fff' : '#000') : dividerColor;
-
- return (
-
- );
-};
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/SelectBox.jsx b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/SelectBox.jsx
index 92772ffea1..d480f2c698 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/SelectBox.jsx
+++ b/frontend/src/Editor/QueryManager/QueryEditors/TooljetDatabase/SelectBox.jsx
@@ -220,7 +220,9 @@ function DataSourceSelect({
if (isFirstPageLoaded && offset >= totalRecords) return;
if (foreignKeys.length < 1) return;
setIsLoadingFKDetails(true);
- const referencedColumns = foreignKeys.find((item) => item.column_names[0] === cellColumnName);
+ const referencedColumns = Array.isArray(foreignKeys)
+ ? foreignKeys.find((item) => item.column_names[0] === cellColumnName)
+ : undefined;
if (!referencedColumns?.referenced_column_names?.length) return;
const selectQuery = new PostgrestQueryBuilder();
@@ -715,7 +717,8 @@ const MenuList = ({
...props
}) => {
const menuListStyles = getStyles('menuList', props);
- const referencedColumnDetails = foreignKeys?.find((item) => item.column_names[0] === cellColumnName);
+ const referencedColumnDetails =
+ Array.isArray(foreignKeys) && foreignKeys.find((item) => item?.column_names[0] === cellColumnName);
const handleNavigateToReferencedTable = () => {
const data = {
diff --git a/frontend/src/Editor/WidgetManager/configs/buttonGroup.js b/frontend/src/Editor/WidgetManager/configs/buttonGroup.js
index 65b7e77807..4a1d5ff218 100644
--- a/frontend/src/Editor/WidgetManager/configs/buttonGroup.js
+++ b/frontend/src/Editor/WidgetManager/configs/buttonGroup.js
@@ -123,6 +123,19 @@ export const buttonGroupConfig = {
defaultValue: '#007bff',
},
},
+ padding: {
+ type: 'switch',
+ displayName: 'Padding',
+ validation: {
+ schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+ defaultValue: 'default',
+ },
+ isFxNotRequired: true,
+ options: [
+ { displayName: 'Default', value: 'default' },
+ { displayName: 'None', value: 'none' },
+ ],
+ },
},
exposedVariables: {
selected: [1],
@@ -148,6 +161,7 @@ export const buttonGroupConfig = {
disabledState: { value: '{{false}}' },
selectedTextColor: { value: '' },
selectedBackgroundColor: { value: '' },
+ padding: { value: 'default' },
},
},
};
diff --git a/frontend/src/Editor/WidgetManager/configs/checkbox.js b/frontend/src/Editor/WidgetManager/configs/checkbox.js
index c9b6424020..9f991be251 100644
--- a/frontend/src/Editor/WidgetManager/configs/checkbox.js
+++ b/frontend/src/Editor/WidgetManager/configs/checkbox.js
@@ -126,6 +126,20 @@ export const checkboxConfig = {
],
accordian: 'label',
},
+ padding: {
+ type: 'switch',
+ displayName: 'Padding',
+ validation: {
+ schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+ defaultValue: 'default',
+ },
+ isFxNotRequired: true,
+ options: [
+ { displayName: 'Default', value: 'default' },
+ { displayName: 'None', value: 'none' },
+ ],
+ accordian: 'switch',
+ },
},
exposedVariables: {
value: false,
@@ -189,6 +203,7 @@ export const checkboxConfig = {
handleColor: { value: '#FFFFFF' },
alignment: { value: 'right' },
boxShadow: { value: '0px 0px 0px 0px #00000090' },
+ padding: { value: 'default' },
},
validation: {
mandatory: { value: '{{false}}' },
diff --git a/frontend/src/Editor/WidgetManager/configs/colorPicker.js b/frontend/src/Editor/WidgetManager/configs/colorPicker.js
index b2fddd7e4c..6d93508891 100644
--- a/frontend/src/Editor/WidgetManager/configs/colorPicker.js
+++ b/frontend/src/Editor/WidgetManager/configs/colorPicker.js
@@ -26,6 +26,19 @@ export const colorPickerConfig = {
},
styles: {
visibility: { type: 'toggle', displayName: 'Visibility' },
+ padding: {
+ type: 'switch',
+ displayName: 'Padding',
+ validation: {
+ schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+ defaultValue: 'default',
+ },
+ isFxNotRequired: true,
+ options: [
+ { displayName: 'Default', value: 'default' },
+ { displayName: 'None', value: 'none' },
+ ],
+ },
},
exposedVariables: {
selectedColorHex: '#000000',
@@ -45,6 +58,7 @@ export const colorPickerConfig = {
events: [],
styles: {
visibility: { value: '{{true}}' },
+ padding: { value: 'default' },
},
},
};
diff --git a/frontend/src/Editor/WidgetManager/configs/container.js b/frontend/src/Editor/WidgetManager/configs/container.js
index 424b9a801d..6dc9a679a4 100644
--- a/frontend/src/Editor/WidgetManager/configs/container.js
+++ b/frontend/src/Editor/WidgetManager/configs/container.js
@@ -3,7 +3,7 @@ export const containerConfig = {
displayName: 'Container',
description: 'Group components',
defaultSize: {
- width: 5,
+ width: 10,
height: 200,
},
component: 'Container',
@@ -44,13 +44,19 @@ export const containerConfig = {
displayName: 'Show header',
validation: {
schema: { type: 'boolean' },
- defaultValue: false,
+ defaultValue: true,
},
},
+ headerHeight: {
+ type: 'numberInput',
+ displayName: 'Header height',
+ validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 80 },
+ },
},
defaultChildren: [
{
componentName: 'Text',
+ slotName: 'header',
layout: {
top: 20,
left: 1,
@@ -98,15 +104,6 @@ export const containerConfig = {
},
accordian: 'container',
},
- headerHeight: {
- type: 'numberInput',
- displayName: 'Height',
- validation: {
- schema: { type: 'number' },
- defaultValue: 80,
- },
- accordian: 'header',
- },
borderRadius: {
type: 'numberInput',
displayName: 'Border',
@@ -154,10 +151,11 @@ export const containerConfig = {
showOnMobile: { value: '{{false}}' },
},
properties: {
- showHeader: { value: `{{false}}` },
+ showHeader: { value: `{{true}}` },
loadingState: { value: `{{false}}` },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
+ headerHeight: { value: `{{80}}` },
},
events: [],
styles: {
diff --git a/frontend/src/Editor/WidgetManager/configs/divider.js b/frontend/src/Editor/WidgetManager/configs/divider.js
index 27ce6edf8e..82bb38da6f 100644
--- a/frontend/src/Editor/WidgetManager/configs/divider.js
+++ b/frontend/src/Editor/WidgetManager/configs/divider.js
@@ -1,5 +1,5 @@
export const dividerConfig = {
- name: 'horizontalDivider',
+ name: 'HorizontalDivider',
displayName: 'Horizontal Divider',
description: 'Separator between components',
component: 'Divider',
@@ -11,15 +11,12 @@ export const dividerConfig = {
showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
},
- properties: {},
- events: {},
- styles: {
- dividerColor: {
- type: 'color',
- displayName: 'Divider color',
+ properties: {
+ label: {
+ type: 'code',
+ displayName: 'Label',
validation: {
schema: { type: 'string' },
- defaultValue: '#000000',
},
},
visibility: {
@@ -29,6 +26,83 @@ export const dividerConfig = {
schema: { type: 'boolean' },
defaultValue: true,
},
+ section: 'additionalActions',
+ },
+ tooltip: {
+ type: 'code',
+ displayName: 'Tooltip',
+ validation: { schema: { type: 'string' }, defaultValue: 'Tooltip text' },
+ section: 'additionalActions',
+ placeholder: 'Enter tooltip text',
+ },
+ },
+ events: {},
+ styles: {
+ dividerColor: {
+ type: 'color',
+ displayName: 'Divider color',
+ validation: {
+ schema: { type: 'string' },
+ defaultValue: '#000000',
+ },
+ accordian: 'Divider',
+ },
+ dividerStyle: {
+ type: 'switch',
+ displayName: 'Style',
+ validation: {
+ schema: { type: 'string' },
+ },
+ options: [
+ { displayName: 'Solid', value: 'solid' },
+ { displayName: 'Dashed', value: 'dashed' },
+ ],
+ accordian: 'Divider',
+ },
+ labelAlignment: {
+ type: 'switch',
+ displayName: 'Label alignment',
+ validation: { schema: { type: 'string' }, defaultValue: 'left' },
+ showLabel: true,
+ isIcon: true,
+ options: [
+ { displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' },
+ { displayName: 'alignhorizontalcenter', value: 'center', iconName: 'alignhorizontalcenter' },
+ { displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' },
+ ],
+ accordian: 'Divider',
+ isFxNotRequired: true,
+ },
+ labelColor: {
+ type: 'color',
+ displayName: 'Label Color',
+ validation: {
+ schema: { type: 'string' },
+ },
+ accordian: 'Divider',
+ },
+ boxShadow: {
+ type: 'boxShadow',
+ displayName: 'Box Shadow',
+ validation: {
+ schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+ defaultValue: '0px 0px 0px 0px #00000040',
+ },
+ accordian: 'Divider',
+ },
+ padding: {
+ type: 'switch',
+ displayName: 'Padding',
+ validation: {
+ schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+ defaultValue: 'default',
+ },
+ isFxNotRequired: true,
+ options: [
+ { displayName: 'Default', value: 'default' },
+ { displayName: 'None', value: 'none' },
+ ],
+ accordian: 'container',
},
},
exposedVariables: {
@@ -39,11 +113,19 @@ export const dividerConfig = {
showOnDesktop: { value: '{{true}}' },
showOnMobile: { value: '{{false}}' },
},
- properties: {},
+ properties: {
+ label: { value: '' },
+ visibility: { value: '{{true}}' },
+ tooltip: { value: '' },
+ },
events: [],
styles: {
- visibility: { value: '{{true}}' },
- dividerColor: { value: '#000000' },
+ dividerColor: { value: '#CCD1D5' },
+ labelAlignment: { value: 'center' },
+ dividerStyle: { value: 'solid' },
+ labelColor: { value: '#6A727C' },
+ padding: { value: 'default' },
+ boxShadow: { value: '0px 0px 0px 0px #00000040' },
},
},
};
diff --git a/frontend/src/Editor/WidgetManager/configs/dropdownV2.js b/frontend/src/Editor/WidgetManager/configs/dropdownV2.js
index de90dbd0bf..6b011fd082 100644
--- a/frontend/src/Editor/WidgetManager/configs/dropdownV2.js
+++ b/frontend/src/Editor/WidgetManager/configs/dropdownV2.js
@@ -63,6 +63,30 @@ export const dropdownV2Config = {
},
accordian: 'Options',
},
+ sort: {
+ type: 'switch',
+ displayName: 'Sort options',
+ validation: { schema: { type: 'string' }, defaultValue: 'asc' },
+ options: [
+ { displayName: 'None', value: 'none' },
+ { displayName: 'a-z', value: 'asc' },
+ { displayName: 'z-a', value: 'desc' },
+ ],
+ accordian: 'Options',
+ isFxNotRequired: true,
+ },
+ showClearBtn: {
+ type: 'toggle',
+ displayName: 'Show clear selection button',
+ validation: { schema: { type: 'boolean' }, defaultValue: true },
+ section: 'additionalActions',
+ },
+ showSearchInput: {
+ type: 'toggle',
+ displayName: 'Show search in options',
+ validation: { schema: { type: 'boolean' }, defaultValue: true },
+ section: 'additionalActions',
+ },
loadingState: {
type: 'toggle',
displayName: 'Loading state',
@@ -300,7 +324,10 @@ export const dropdownV2Config = {
},
label: { value: 'Select' },
optionsLoadingState: { value: '{{false}}' },
+ sort: { value: 'asc' },
placeholder: { value: 'Select an option' },
+ showClearBtn: { value: '{{true}}' },
+ showSearchInput: { value: '{{true}}' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
loadingState: { value: '{{false}}' },
diff --git a/frontend/src/Editor/WidgetManager/configs/form.js b/frontend/src/Editor/WidgetManager/configs/form.js
index 2d8eb7f0a8..7c558a73e8 100644
--- a/frontend/src/Editor/WidgetManager/configs/form.js
+++ b/frontend/src/Editor/WidgetManager/configs/form.js
@@ -4,7 +4,7 @@ export const formConfig = {
description: 'Wrapper for multiple components',
defaultSize: {
width: 13,
- height: 480,
+ height: 450,
},
defaultChildren: [
{
@@ -20,8 +20,9 @@ export const formConfig = {
styles: ['fontWeight', 'textSize', 'textColor'],
defaultValue: {
text: 'Form title',
- textSize: 20,
+ textSize: 16,
textColor: '#000',
+ fontWeight: 'bold',
},
},
{
@@ -29,208 +30,54 @@ export const formConfig = {
slotName: 'footer',
layout: {
top: 12,
- left: 32,
+ left: 29,
height: 36,
+ width: 13,
},
properties: ['text'],
defaultValue: {
- text: 'Button2',
+ text: 'Submit',
padding: 'none',
},
},
- {
- componentName: 'Text',
- layout: {
- top: 40,
- left: 10,
- height: 30,
- width: 17,
- },
- properties: ['text'],
- styles: [
- 'textSize',
- 'fontWeight',
- 'fontStyle',
- 'textColor',
- 'isScrollRequired',
- 'lineHeight',
- 'textIndent',
- 'textAlign',
- 'verticalAlignment',
- 'decoration',
- 'transformation',
- 'letterSpacing',
- 'wordSpacing',
- 'fontVariant',
- 'backgroundColor',
- 'borderColor',
- 'borderRadius',
- 'boxShadow',
- 'padding',
- ],
- defaultValue: {
- text: 'User Details',
- fontWeight: 'bold',
- textSize: 18,
- textColor: '#000',
- backgroundColor: '#fff00000',
- textAlign: 'left',
- decoration: 'none',
- transformation: 'none',
- fontStyle: 'normal',
- lineHeight: 1.5,
- textIndent: '0',
- letterSpacing: '0',
- wordSpacing: '0',
- fontVariant: 'normal',
- verticalAlignment: 'top',
- padding: 'default',
- boxShadow: '0px 0px 0px 0px #00000090',
- borderRadius: '0',
- isScrollRequired: 'enabled',
- },
- },
- {
- componentName: 'Text',
- layout: {
- top: 90,
- left: 10,
- height: 30,
- },
- properties: ['text'],
- styles: [
- 'textSize',
- 'fontWeight',
- 'fontStyle',
- 'textColor',
- 'isScrollRequired',
- 'lineHeight',
- 'textIndent',
- 'textAlign',
- 'verticalAlignment',
- 'decoration',
- 'transformation',
- 'letterSpacing',
- 'wordSpacing',
- 'fontVariant',
- 'backgroundColor',
- 'borderColor',
- 'borderRadius',
- 'boxShadow',
- 'padding',
- ],
- defaultValue: {
- text: 'Name',
- fontWeight: 'normal',
- textSize: 14,
- textColor: '#000',
- backgroundColor: '#fff00000',
- textAlign: 'left',
- decoration: 'none',
- transformation: 'none',
- fontStyle: 'normal',
- lineHeight: 1.5,
- textIndent: '0',
- letterSpacing: '0',
- wordSpacing: '0',
- fontVariant: 'normal',
- verticalAlignment: 'top',
- padding: 'default',
- boxShadow: '0px 0px 0px 0px #00000090',
- borderRadius: '0',
- isScrollRequired: 'enabled',
- },
- },
- {
- componentName: 'Text',
- layout: {
- top: 160,
- left: 10,
- height: 30,
- },
- properties: ['text'],
- styles: [
- 'textSize',
- 'fontWeight',
- 'fontStyle',
- 'textColor',
- 'isScrollRequired',
- 'lineHeight',
- 'textIndent',
- 'textAlign',
- 'verticalAlignment',
- 'decoration',
- 'transformation',
- 'letterSpacing',
- 'wordSpacing',
- 'fontVariant',
- 'backgroundColor',
- 'borderColor',
- 'borderRadius',
- 'boxShadow',
- 'padding',
- ],
- defaultValue: {
- text: 'Age',
- fontWeight: 'normal',
- textSize: 14,
- textColor: '#000',
- backgroundColor: '#fff00000',
- textAlign: 'left',
- decoration: 'none',
- transformation: 'none',
- fontStyle: 'normal',
- lineHeight: 1.5,
- textIndent: '0',
- letterSpacing: '0',
- wordSpacing: '0',
- fontVariant: 'normal',
- verticalAlignment: 'top',
- padding: 'default',
- boxShadow: '0px 0px 0px 0px #00000090',
- borderRadius: '0',
- isScrollRequired: 'enabled',
- },
- },
{
componentName: 'TextInput',
layout: {
- top: 120,
- left: 10,
- height: 30,
- width: 25,
+ top: 20,
+ left: 1,
+ height: 40,
+ width: 41,
},
properties: ['placeholder', 'label'],
+ styles: ['alignment', 'width', 'auto', 'padding', 'direction'],
defaultValue: {
placeholder: 'Enter your name',
- label: '',
+ label: 'Name',
+ width: '{{60}}',
+ direction: 'left',
+ alignment: 'side',
+ auto: '{{false}}',
+ padding: 'default',
},
},
{
componentName: 'NumberInput',
layout: {
- top: 190,
- left: 10,
- height: 30,
- width: 25,
+ top: 80,
+ left: 1,
+ height: 40,
+ width: 41,
},
- properties: ['value', 'label'],
+ properties: ['placeholder', 'label'],
+ styles: ['alignment', 'width', 'auto', 'padding', 'direction'],
defaultValue: {
- value: 24,
- label: '',
- },
- },
- {
- componentName: 'Button',
- layout: {
- top: 240,
- left: 10,
- height: 30,
- width: 10,
- },
- properties: ['text'],
- defaultValue: {
- text: 'Submit',
+ placeholder: 'Age',
+ label: 'Age',
+ width: '{{60}}',
+ direction: 'left',
+ alignment: 'side',
+ auto: '{{false}}',
+ padding: 'default',
},
},
],
@@ -276,6 +123,24 @@ export const formConfig = {
},
showHeader: { type: 'toggle', displayName: 'Header' },
showFooter: { type: 'toggle', displayName: 'Footer' },
+ headerHeight: {
+ type: 'numberInput',
+ displayName: 'Header height',
+ isHidden: true,
+ validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 80 },
+ },
+ canvasHeight: {
+ type: 'numberInput',
+ displayName: 'Canvas height',
+ isHidden: true,
+ validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 80 },
+ },
+ footerHeight: {
+ type: 'numberInput',
+ displayName: 'Footer height',
+ isHidden: true,
+ validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 80 },
+ },
visibility: {
type: 'toggle',
displayName: 'Visibility',
@@ -294,6 +159,13 @@ export const formConfig = {
defaultValue: false,
},
},
+ tooltip: {
+ type: 'code',
+ displayName: 'Tooltip',
+ validation: { schema: { type: 'string' } },
+ section: 'additionalActions',
+ placeholder: 'Enter tooltip text',
+ },
},
events: {
onSubmit: { displayName: 'On submit' },
@@ -316,24 +188,8 @@ export const formConfig = {
defaultValue: '#ffffffff',
},
},
- headerHeight: {
- type: 'code',
- displayName: 'Header height',
- validation: {
- schema: { type: 'string' },
- defaultValue: '80px',
- },
- },
- footerHeight: {
- type: 'code',
- displayName: 'Footer height',
- validation: {
- schema: { type: 'string' },
- defaultValue: '80px',
- },
- },
backgroundColor: {
- type: 'color',
+ type: 'colorSwatches',
displayName: 'Background color',
validation: {
schema: { type: 'string' },
@@ -351,7 +207,7 @@ export const formConfig = {
},
},
borderColor: {
- type: 'color',
+ type: 'colorSwatches',
displayName: 'Border color',
validation: {
schema: { type: 'string' },
@@ -403,18 +259,20 @@ export const formConfig = {
value:
"{{ {title: 'User registration form', properties: {firstname: {type: 'textinput',value: 'Maria',label:'First name', validation:{maxLength:6}, styles: {backgroundColor: '#f6f5ff',textColor: 'black'},},lastname:{type: 'textinput',value: 'Doe', label:'Last name', styles: {backgroundColor: '#f6f5ff',textColor: 'black'},},age:{type:'number', label:'Age'},}, submitButton: {value: 'Submit', styles: {backgroundColor: '#3a433b',borderColor:'#595959'}}} }}",
},
- showHeader: { value: '{{false}}' },
- showFooter: { value: '{{false}}' },
+ showHeader: { value: '{{true}}' },
+ showFooter: { value: '{{true}}' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
+ headerHeight: { value: 60 },
+ footerHeight: { value: 60 },
},
events: [],
styles: {
backgroundColor: { value: '#fff' },
borderRadius: { value: '0' },
borderColor: { value: '#fff' },
- headerHeight: { value: '60px' },
- footerHeight: { value: '60px' },
+ headerBackgroundColor: { value: '#fff' },
+ footerBackgroundColor: { value: '#fff' },
},
},
};
diff --git a/frontend/src/Editor/WidgetManager/configs/icon.js b/frontend/src/Editor/WidgetManager/configs/icon.js
index aea06c976c..40dc8185dd 100644
--- a/frontend/src/Editor/WidgetManager/configs/icon.js
+++ b/frontend/src/Editor/WidgetManager/configs/icon.js
@@ -78,6 +78,29 @@ export const iconConfig = {
},
accordian: 'Icon',
},
+ padding: {
+ type: 'switch',
+ displayName: 'Padding',
+ validation: {
+ schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+ defaultValue: 'default',
+ },
+ isFxNotRequired: true,
+ options: [
+ { displayName: 'Default', value: 'default' },
+ { displayName: 'None', value: 'none' },
+ ],
+ accordian: 'Icon',
+ },
+ boxShadow: {
+ type: 'boxShadow',
+ displayName: 'Box shadow',
+ validation: {
+ schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+ defaultValue: '0px 0px 0px 0px #00000040',
+ },
+ accordian: 'Icon',
+ },
},
exposedVariables: {},
actions: [
@@ -116,6 +139,8 @@ export const iconConfig = {
styles: {
iconColor: { value: '#000' },
iconAlign: { value: 'center' },
+ padding: { value: 'default' },
+ boxShadow: { value: '0px 0px 0px 0px #00000040' },
},
},
};
diff --git a/frontend/src/Editor/WidgetManager/configs/modalV2.js b/frontend/src/Editor/WidgetManager/configs/modalV2.js
index e7e96c4398..a3c89acf93 100644
--- a/frontend/src/Editor/WidgetManager/configs/modalV2.js
+++ b/frontend/src/Editor/WidgetManager/configs/modalV2.js
@@ -5,7 +5,7 @@ export const modalV2Config = {
component: 'ModalV2',
defaultSize: {
width: 10,
- height: 34,
+ height: 40,
},
others: {
showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
@@ -137,7 +137,7 @@ export const modalV2Config = {
layout: {
top: 24,
left: 22,
- height: 36,
+ height: 40,
},
displayName: 'ModalFooterCancel',
properties: ['text'],
@@ -154,7 +154,7 @@ export const modalV2Config = {
layout: {
top: 24,
left: 32,
- height: 36,
+ height: 40,
},
displayName: 'ModalFooterConfirm',
properties: ['text'],
diff --git a/frontend/src/Editor/WidgetManager/configs/multiselectV2.js b/frontend/src/Editor/WidgetManager/configs/multiselectV2.js
index 6aefd71067..23618382df 100644
--- a/frontend/src/Editor/WidgetManager/configs/multiselectV2.js
+++ b/frontend/src/Editor/WidgetManager/configs/multiselectV2.js
@@ -121,6 +121,12 @@ export const multiselectV2Config = {
},
accordian: 'Options',
},
+ showAllSelectedLabel: {
+ type: 'toggle',
+ displayName: 'Show "All items are selected"',
+ validation: { schema: { type: 'boolean' }, defaultValue: true },
+ accordian: 'Options',
+ },
optionsLoadingState: {
type: 'toggle',
displayName: 'Options loading state',
@@ -130,6 +136,30 @@ export const multiselectV2Config = {
},
accordian: 'Options',
},
+ sort: {
+ type: 'switch',
+ displayName: 'Sort options',
+ validation: { schema: { type: 'string' }, defaultValue: 'asc' },
+ options: [
+ { displayName: 'None', value: 'none' },
+ { displayName: 'a-z', value: 'asc' },
+ { displayName: 'z-a', value: 'desc' },
+ ],
+ accordian: 'Options',
+ isFxNotRequired: true,
+ },
+ showClearBtn: {
+ type: 'toggle',
+ displayName: 'Show clear selection button',
+ validation: { schema: { type: 'boolean' }, defaultValue: true },
+ section: 'additionalActions',
+ },
+ showSearchInput: {
+ type: 'toggle',
+ displayName: 'Show search in options',
+ validation: { schema: { type: 'boolean' }, defaultValue: true },
+ section: 'additionalActions',
+ },
loadingState: {
type: 'toggle',
displayName: 'Loading state',
@@ -313,7 +343,11 @@ export const multiselectV2Config = {
advanced: { value: `{{false}}` },
showAllOption: { value: '{{false}}' },
optionsLoadingState: { value: '{{false}}' },
+ sort: { value: 'asc' },
placeholder: { value: 'Select the options' },
+ showAllSelectedLabel: { value: '{{true}}' },
+ showClearBtn: { value: '{{true}}' },
+ showSearchInput: { value: '{{true}}' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
loadingState: { value: '{{false}}' },
diff --git a/frontend/src/Editor/WidgetManager/configs/rangeslider.js b/frontend/src/Editor/WidgetManager/configs/rangeslider.js
index 151dca3384..541ed95209 100644
--- a/frontend/src/Editor/WidgetManager/configs/rangeslider.js
+++ b/frontend/src/Editor/WidgetManager/configs/rangeslider.js
@@ -84,6 +84,19 @@ export const rangeSliderConfig = {
defaultValue: true,
},
},
+ padding: {
+ type: 'switch',
+ displayName: 'Padding',
+ validation: {
+ schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+ defaultValue: 'default',
+ },
+ isFxNotRequired: true,
+ options: [
+ { displayName: 'Default', value: 'default' },
+ { displayName: 'None', value: 'none' },
+ ],
+ },
},
exposedVariables: {
value: null,
@@ -111,6 +124,7 @@ export const rangeSliderConfig = {
handleColor: { value: '' },
trackColor: { value: '' },
visibility: { value: '{{true}}' },
+ padding: { value: 'default' },
},
},
};
diff --git a/frontend/src/Editor/WidgetManager/configs/starrating.js b/frontend/src/Editor/WidgetManager/configs/starrating.js
index 01240d0369..d6caf8013c 100644
--- a/frontend/src/Editor/WidgetManager/configs/starrating.js
+++ b/frontend/src/Editor/WidgetManager/configs/starrating.js
@@ -89,6 +89,19 @@ export const starratingConfig = {
defaultValue: false,
},
},
+ padding: {
+ type: 'switch',
+ displayName: 'Padding',
+ validation: {
+ schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+ defaultValue: 'default',
+ },
+ isFxNotRequired: true,
+ options: [
+ { displayName: 'Default', value: 'default' },
+ { displayName: 'None', value: 'none' },
+ ],
+ },
},
exposedVariables: {
value: 0,
@@ -112,6 +125,7 @@ export const starratingConfig = {
labelColor: { value: '' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
+ padding: { value: 'default' },
},
},
};
diff --git a/frontend/src/Editor/WidgetManager/configs/tags.js b/frontend/src/Editor/WidgetManager/configs/tags.js
index 8af289b23a..6479eeaad0 100644
--- a/frontend/src/Editor/WidgetManager/configs/tags.js
+++ b/frontend/src/Editor/WidgetManager/configs/tags.js
@@ -38,6 +38,19 @@ export const tagsConfig = {
defaultValue: true,
},
},
+ padding: {
+ type: 'switch',
+ displayName: 'Padding',
+ validation: {
+ schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+ defaultValue: 'default',
+ },
+ isFxNotRequired: true,
+ options: [
+ { displayName: 'Default', value: 'default' },
+ { displayName: 'None', value: 'none' },
+ ],
+ },
},
exposedVariables: {},
definition: {
@@ -54,6 +67,7 @@ export const tagsConfig = {
events: [],
styles: {
visibility: { value: '{{true}}' },
+ padding: { value: 'default' },
},
},
};
diff --git a/frontend/src/Editor/WidgetManager/configs/toggleswitchv2.js b/frontend/src/Editor/WidgetManager/configs/toggleswitchv2.js
index 6753fbb50d..6f61a7645d 100644
--- a/frontend/src/Editor/WidgetManager/configs/toggleswitchv2.js
+++ b/frontend/src/Editor/WidgetManager/configs/toggleswitchv2.js
@@ -126,6 +126,20 @@ export const toggleSwitchV2Config = {
validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } },
accordian: 'switch',
},
+ padding: {
+ type: 'switch',
+ displayName: 'Padding',
+ validation: {
+ schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+ defaultValue: 'default',
+ },
+ isFxNotRequired: true,
+ options: [
+ { displayName: 'Default', value: 'default' },
+ { displayName: 'None', value: 'none' },
+ ],
+ accordian: 'switch',
+ },
},
exposedVariables: {
value: false,
@@ -187,6 +201,7 @@ export const toggleSwitchV2Config = {
handleColor: { value: '#FFFFFF' },
alignment: { value: 'right' },
boxShadow: { value: '0px 0px 0px 0px #00000090' },
+ padding: { value: 'default' },
},
},
};
diff --git a/frontend/src/Editor/WidgetManager/configs/verticalDivider.js b/frontend/src/Editor/WidgetManager/configs/verticalDivider.js
index 443526c3b8..34d9029e3a 100644
--- a/frontend/src/Editor/WidgetManager/configs/verticalDivider.js
+++ b/frontend/src/Editor/WidgetManager/configs/verticalDivider.js
@@ -1,17 +1,34 @@
export const verticalDividerConfig = {
name: 'VerticalDivider',
- displayName: 'Vertical Divider',
+ displayName: 'Vertical divider',
description: 'Vertical line separator',
component: 'VerticalDivider',
defaultSize: {
- width: 2,
+ width: 1,
height: 100,
},
others: {
showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
},
- properties: {},
+ properties: {
+ visibility: {
+ type: 'toggle',
+ displayName: 'Visibility',
+ validation: {
+ schema: { type: 'boolean' },
+ defaultValue: true,
+ },
+ section: 'additionalActions',
+ },
+ tooltip: {
+ type: 'code',
+ displayName: 'Tooltip',
+ validation: { schema: { type: 'string' }, defaultValue: 'Tooltip text' },
+ section: 'additionalActions',
+ placeholder: 'Enter tooltip text',
+ },
+ },
events: {},
styles: {
dividerColor: {
@@ -21,14 +38,42 @@ export const verticalDividerConfig = {
schema: { type: 'string' },
defaultValue: '#000000',
},
+ accordian: 'Divider',
},
- visibility: {
- type: 'toggle',
- displayName: 'Visibility',
+ dividerStyle: {
+ type: 'switch',
+ displayName: 'Style',
validation: {
- schema: { type: 'boolean' },
- defaultValue: true,
+ schema: { type: 'string' },
},
+ options: [
+ { displayName: 'Solid', value: 'solid' },
+ { displayName: 'Dashed', value: 'dashed' },
+ ],
+ accordian: 'Divider',
+ },
+ boxShadow: {
+ type: 'boxShadow',
+ displayName: 'Box Shadow',
+ validation: {
+ schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+ defaultValue: '0px 0px 0px 0px #00000040',
+ },
+ accordian: 'Divider',
+ },
+ padding: {
+ type: 'switch',
+ displayName: 'Padding',
+ validation: {
+ schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+ defaultValue: 'default',
+ },
+ isFxNotRequired: true,
+ options: [
+ { displayName: 'Default', value: 'default' },
+ { displayName: 'None', value: 'none' },
+ ],
+ accordian: 'container',
},
},
exposedVariables: {
@@ -39,11 +84,16 @@ export const verticalDividerConfig = {
showOnDesktop: { value: '{{true}}' },
showOnMobile: { value: '{{false}}' },
},
- properties: {},
+ properties: {
+ visibility: { value: '{{true}}' },
+ tooltip: { value: '' },
+ },
events: [],
styles: {
- visibility: { value: '{{true}}' },
- dividerColor: { value: '#000000' },
+ dividerColor: { value: '#CCD1D5' },
+ dividerStyle: { value: 'solid' },
+ padding: { value: 'default' },
+ boxShadow: { value: '0px 0px 0px 0px #00000040' },
},
},
};
diff --git a/frontend/src/MarketplacePage/InstalledPlugins.jsx b/frontend/src/MarketplacePage/InstalledPlugins.jsx
index 260b16c189..d0da8512a5 100644
--- a/frontend/src/MarketplacePage/InstalledPlugins.jsx
+++ b/frontend/src/MarketplacePage/InstalledPlugins.jsx
@@ -68,7 +68,7 @@ export const InstalledPlugins = () => {
})}
{!fetching && installedPlugins?.length === 0 && (
-
No results found
+
No plugins added. Please add a plugin from the Marketplace.
)}
diff --git a/frontend/src/TooljetDatabase/Forms/ColumnForm.jsx b/frontend/src/TooljetDatabase/Forms/ColumnForm.jsx
index 41cedf6bc4..d847f4238c 100644
--- a/frontend/src/TooljetDatabase/Forms/ColumnForm.jsx
+++ b/frontend/src/TooljetDatabase/Forms/ColumnForm.jsx
@@ -342,8 +342,39 @@ const ColumnForm = ({