-
+ {
return false
}
}
+
+/**
+ * Get all formula functions from the registry
+ * @param {Object} app The app instance with registry
+ * @returns {Object} All formula functions
+ */
+export const getFormulaFunctions = (app) => {
+ return app.$registry.getAll('runtimeFormulaFunction')
+}
+
+/**
+ * Get formula functions organized by category
+ * @param {Object} app The app instance with registry
+ * @param {Object} i18n The i18n instance (optional, will be extracted from app if not provided)
+ * @returns {Array} Array of category nodes with their functions
+ */
+export const getFormulaFunctionsByCategory = (app, i18n = null) => {
+ const functions = getFormulaFunctions(app)
+ // Support both Option API (this.$t) and Composition API (app.i18n)
+ const i18nInstance = i18n || app.i18n || app
+ const categorizedFunctions = {}
+ const categorizedOperators = {}
+
+ // Group functions by category
+ for (const [functionName, registryItem] of Object.entries(functions)) {
+ try {
+ // The registry might return instances instead of classes
+ let instance = null
+ let FunctionType = null
+
+ // Check if registryItem is already an instance
+ if (
+ registryItem &&
+ typeof registryItem === 'object' &&
+ registryItem.constructor
+ ) {
+ // It's an instance, get its constructor
+ FunctionType = registryItem.constructor
+ instance = registryItem
+ } else if (typeof registryItem === 'function') {
+ // It's a constructor function
+ FunctionType = registryItem
+ instance = new FunctionType({ app })
+ } else {
+ // Skip items that are not valid constructors or instances
+ continue
+ }
+
+ // Skip if getFormulaType is not defined (not a formula function)
+ if (!FunctionType.getFormulaType) {
+ continue
+ }
+
+ // Skip if getCategoryType is not defined
+ if (!FunctionType.getCategoryType) {
+ continue
+ }
+
+ // Get formula type
+ const formulaType = FunctionType.getFormulaType()
+
+ // Get category - use static method and format it
+ const categoryType = FunctionType.getCategoryType()
+
+ // Get translated category name
+ let category = 'Other'
+ const icon = categoryType.iconClass || 'iconoir-function'
+
+ if (categoryType.category) {
+ // Get translated category name using i18n
+ // Support both i18n.t and $t methods
+ const translateMethod = i18nInstance.t || i18nInstance.$t
+ if (translateMethod) {
+ category = translateMethod.call(
+ i18nInstance,
+ `runtimeFormulaTypes.${categoryType.category}`
+ )
+ }
+ }
+
+ const item = {
+ name: functionName,
+ functionType: FunctionType,
+ icon,
+ instance,
+ }
+
+ if (formulaType === FORMULA_TYPE.OPERATOR) {
+ // Store operators by their category
+ if (!categorizedOperators[category]) {
+ categorizedOperators[category] = []
+ }
+ categorizedOperators[category].push(item)
+ } else if (formulaType === FORMULA_TYPE.FUNCTION) {
+ // Store regular functions
+ if (!categorizedFunctions[category]) {
+ categorizedFunctions[category] = []
+ }
+ categorizedFunctions[category].push(item)
+ }
+ } catch (e) {
+ // Skip functions that throw errors during processing
+ console.warn(`Skipping ${functionName} due to error:`, e.message)
+ }
+ }
+
+ // Build the hierarchy
+ const functionNodes = []
+ const categories = Object.keys(categorizedFunctions).sort()
+
+ for (const category of categories) {
+ if (categorizedFunctions[category].length > 0) {
+ functionNodes.push({
+ name: category,
+ functions: categorizedFunctions[category].sort((a, b) =>
+ a.name.localeCompare(b.name)
+ ),
+ })
+ }
+ }
+
+ // Add operators as a separate structure
+ const operatorNodes = []
+ const operatorCategories = Object.keys(categorizedOperators).sort()
+
+ for (const category of operatorCategories) {
+ if (categorizedOperators[category].length > 0) {
+ operatorNodes.push({
+ name: category,
+ operators: categorizedOperators[category].sort((a, b) =>
+ a.name.localeCompare(b.name)
+ ),
+ })
+ }
+ }
+
+ return { functionNodes, operatorNodes }
+}
+
+/**
+ * Build function nodes for FormulaInputField
+ * @param {Object} app The app instance with registry or Vue component instance
+ * @param {Object} i18n The i18n instance (optional, will be extracted from app if not provided)
+ * @returns {Array} Array of function nodes ready for FormulaInputField
+ */
+export const buildFormulaFunctionNodes = (app, i18n = null) => {
+ // Support both Option API (this.$t) and Composition API (app.i18n)
+ const i18nInstance = i18n || app.i18n || app
+ const { functionNodes, operatorNodes } = getFormulaFunctionsByCategory(
+ app,
+ i18nInstance
+ )
+ const nodes = []
+
+ // Get translation methods once at the beginning
+ const tcMethod = i18nInstance.tc || i18nInstance.$tc
+ const tMethod = i18nInstance.t || i18nInstance.$t
+
+ // Process regular functions
+ if (functionNodes.length > 0) {
+ const functionCategories = []
+
+ for (const category of functionNodes) {
+ const categoryNodes = []
+
+ for (const func of category.functions) {
+ const instance = func.instance
+
+ // Get function signature information
+ let signature = null
+
+ // Check if function is variadic by looking at its validateNumberOfArgs implementation
+ const isVariadic =
+ instance.validateNumberOfArgs &&
+ instance.validateNumberOfArgs !==
+ instance.constructor.prototype.validateNumberOfArgs
+
+ if (instance.args && instance.args.length > 0) {
+ signature = {
+ parameters: instance.args.map((arg, index) => {
+ // Map argument types to their string representation
+ let type = 'any'
+ const argClassName = arg.constructor.name
+
+ if (argClassName === 'NumberBaserowRuntimeFormulaArgumentType') {
+ type = 'number'
+ } else if (
+ argClassName === 'TextBaserowRuntimeFormulaArgumentType'
+ ) {
+ type = 'text'
+ } else if (
+ argClassName === 'DateTimeBaserowRuntimeFormulaArgumentType'
+ ) {
+ type = 'date'
+ } else if (
+ argClassName === 'ObjectBaserowRuntimeFormulaArgumentType'
+ ) {
+ type = 'object'
+ }
+
+ return {
+ type,
+ required: true,
+ }
+ }),
+ variadic: isVariadic,
+ minArgs: isVariadic ? 1 : instance.numArgs ?? instance.args.length,
+ maxArgs: isVariadic
+ ? null
+ : instance.numArgs ?? instance.args.length,
+ }
+ } else {
+ signature = {
+ parameters: [
+ {
+ type: 'any',
+ required: true,
+ },
+ ],
+ variadic: isVariadic,
+ minArgs: 1,
+ maxArgs: null,
+ }
+ }
+
+ // Get description and examples
+ let description = null
+ let example = null
+ try {
+ description = instance.getDescription()
+ } catch (e) {
+ // Method not implemented
+ }
+ try {
+ const examples = instance.getExamples()
+ example = examples && examples.length > 0 ? examples[0] : null
+ } catch (e) {
+ // Method not implemented
+ }
+
+ categoryNodes.push({
+ name: func.name,
+ type: 'function',
+ description,
+ example,
+ highlightingColor: 'blue',
+ icon: func.icon,
+ identifier: null,
+ order: null,
+ signature,
+ })
+ }
+
+ functionCategories.push({
+ name: category.name,
+ identifier: null,
+ order: null,
+ signature: null,
+ description: null,
+ example: null,
+ highlightingColor: null,
+ icon: null,
+ nodes: categoryNodes,
+ })
+ }
+
+ // Add functions as a top-level section
+ nodes.push({
+ name: tcMethod
+ ? tcMethod.call(
+ i18nInstance,
+ 'runtimeFormulaTypes.formulaTypeFormula',
+ {
+ count: functionNodes.length,
+ }
+ )
+ : tMethod.call(i18nInstance, 'runtimeFormulaTypes.formulaTypeFormula'),
+ type: 'function',
+ identifier: null,
+ order: null,
+ signature: null,
+ description: null,
+ example: null,
+ highlightingColor: 'blue',
+ icon: null,
+ nodes: functionCategories,
+ })
+ }
+
+ // Process operators
+ if (operatorNodes.length > 0) {
+ const operatorCategories = []
+
+ for (const category of operatorNodes) {
+ const categoryNodes = []
+
+ for (const op of category.operators) {
+ const instance = op.instance
+ const operatorSymbol = instance.getOperatorSymbol
+
+ // Build operator signature
+ const signature = {
+ operator: operatorSymbol,
+ parameters: instance.args
+ ? instance.args.map((arg, index) => {
+ // Map argument types to their string representation
+ let type = 'any'
+ const argClassName = arg.constructor.name
+
+ if (
+ argClassName === 'NumberBaserowRuntimeFormulaArgumentType'
+ ) {
+ type = 'number'
+ } else if (
+ argClassName === 'TextBaserowRuntimeFormulaArgumentType'
+ ) {
+ type = 'text'
+ } else if (
+ argClassName === 'DateTimeBaserowRuntimeFormulaArgumentType'
+ ) {
+ type = 'date'
+ } else if (
+ argClassName === 'ObjectBaserowRuntimeFormulaArgumentType'
+ ) {
+ type = 'object'
+ }
+
+ return {
+ name: index === 0 ? 'left' : 'right',
+ type,
+ required: true,
+ }
+ })
+ : [
+ {
+ type: 'any',
+ required: true,
+ },
+ {
+ type: 'any',
+ required: true,
+ },
+ ],
+ variadic: false,
+ minArgs: 2,
+ maxArgs: 2,
+ }
+
+ // Get description and examples
+ let description = null
+ let example = null
+
+ description = instance.getDescription()
+ const examples = instance.getExamples()
+ example = examples && examples.length > 0 ? examples[0] : null
+
+ categoryNodes.push({
+ name: op.name,
+ type: 'operator',
+ description,
+ example,
+ highlightingColor: 'green',
+ icon: op.icon,
+ identifier: null,
+ order: null,
+ signature,
+ })
+ }
+
+ operatorCategories.push({
+ name: category.name,
+ example: null,
+ signature: null,
+ highlightingColor: null,
+ icon: null,
+ identifier: null,
+ order: null,
+ description: null,
+ nodes: categoryNodes,
+ })
+ }
+
+ // Add operators as a top-level section
+ nodes.push({
+ name: tcMethod
+ ? tcMethod.call(
+ i18nInstance,
+ 'runtimeFormulaTypes.formulaTypeOperator',
+ {
+ count: operatorNodes.length,
+ }
+ )
+ : tMethod.call(i18nInstance, 'runtimeFormulaTypes.formulaTypeOperator'),
+ type: 'operator',
+ nodes: operatorCategories,
+ })
+ }
+ return nodes
+}
diff --git a/web-frontend/modules/core/formula/tiptap/fromTipTapVisitor.js b/web-frontend/modules/core/formula/tiptap/fromTipTapVisitor.js
index fd55383587..27e0e6894b 100644
--- a/web-frontend/modules/core/formula/tiptap/fromTipTapVisitor.js
+++ b/web-frontend/modules/core/formula/tiptap/fromTipTapVisitor.js
@@ -1,6 +1,7 @@
export class FromTipTapVisitor {
- constructor(functions) {
+ constructor(functions, mode = 'simple') {
this.functions = functions
+ this.mode = mode
}
visit(node) {
@@ -31,25 +32,118 @@ export class FromTipTapVisitor {
}
}
- // Add the newlines between root wrappers. They are paragraphs.
+ // Try to reconstruct a single function call spread across multiple wrappers
+ const flatContent = node.content.flatMap((w) =>
+ Array.isArray(w?.content) ? w.content : []
+ )
+ if (flatContent.length > 0 && this.isFunctionCallPattern(flatContent)) {
+ const result = this.assembleFunctionCall(flatContent)
+ if (result) return result
+ }
+
+ // Fallback: join multiple paragraphs with a visible newline
return `concat(${nodeContents.join(", '\n', ")})`
}
visitWrapper(node) {
if (!node.content || node.content.length === 0) {
- // An empty wrapper is an empty string
return "''"
}
+ // Handle nested empty wrapper
+ if (node.content.length === 1 && node.content[0].type === 'wrapper') {
+ return this.visit(node.content[0])
+ }
+
if (node.content.length === 1) {
return this.visit(node.content[0])
}
- return `concat(${node.content.map(this.visit.bind(this)).join(', ')})`
+ if (this.isFunctionCallPattern(node.content)) {
+ const result = this.assembleFunctionCall(node.content)
+ if (result) return result
+ }
+
+ if (node.content.length >= 3) {
+ const firstNode = node.content[0]
+ const lastNode = node.content[node.content.length - 1]
+
+ if (firstNode.type === 'text' && lastNode.type === 'text') {
+ const firstText = firstNode.text
+ const lastText = lastNode.text
+
+ if (
+ /^[a-zA-Z_][a-zA-Z0-9_]*\s*\(/.test(firstText) &&
+ lastText.includes(')')
+ ) {
+ const result = this.assembleFunctionCall(node.content)
+ if (result) return result
+ }
+ }
+ }
+
+ if (this.mode === 'simple') {
+ return `concat(${node.content.map(this.visit.bind(this)).join(', ')})`
+ } else {
+ return node.content.map(this.visit.bind(this)).join('\n')
+ }
+ }
+
+ isFunctionCallPattern(content) {
+ if (content.length < 2) return false
+
+ const firstNode = content[0]
+ const lastNode = content[content.length - 1]
+
+ if (firstNode.type !== 'text') return false
+ const firstText = firstNode.text
+ const functionStartPattern = /^[a-zA-Z_][a-zA-Z0-9_]*\s*\(/
+ if (!functionStartPattern.test(firstText)) return false
+
+ if (lastNode.type !== 'text') return false
+ const lastText = lastNode.text
+ if (!lastText.includes(')')) return false
+
+ return true
+ }
+
+ assembleFunctionCall(content) {
+ const firstNode = content[0]
+
+ const firstText = firstNode.text
+ const functionMatch = firstText.match(/^([a-zA-Z_][a-zA-Z0-9_]*)\s*\(/)
+ if (!functionMatch) return null
+
+ const functionName = functionMatch[1]
+
+ let fullContent = ''
+ for (let i = 0; i < content.length; i++) {
+ const node = content[i]
+ if (node.type === 'text') {
+ // Remove zero-width spaces used for cursor positioning
+ fullContent += node.text.replace(/\u200B/g, '')
+ } else {
+ fullContent += this.visit(node)
+ }
+ }
+
+ const argsStartIndex = fullContent.indexOf('(')
+ const argsEndIndex = fullContent.lastIndexOf(')')
+
+ if (argsStartIndex === -1 || argsEndIndex === -1) {
+ return null
+ }
+
+ const argsString = fullContent.substring(argsStartIndex + 1, argsEndIndex)
+ const suffix = fullContent.slice(argsEndIndex + 1)
+ return `${functionName}(${argsString})${suffix}`
}
visitText(node) {
- return `'${node.text.replace(/'/g, "\\'")}'`
+ // Remove zero-width spaces used for cursor positioning
+ const cleanText = node.text.replace(/\u200B/g, '')
+ if (this.mode === 'simple') return `'${cleanText.replace(/'/g, "\\'")}'`
+ return cleanText
}
visitFunction(node) {
diff --git a/web-frontend/modules/core/formula/tiptap/toTipTapVisitor.js b/web-frontend/modules/core/formula/tiptap/toTipTapVisitor.js
index 11b6e4f6fa..c25210bc46 100644
--- a/web-frontend/modules/core/formula/tiptap/toTipTapVisitor.js
+++ b/web-frontend/modules/core/formula/tiptap/toTipTapVisitor.js
@@ -3,13 +3,45 @@ import { UnknownOperatorError } from '@baserow/modules/core/formula/parser/error
import _ from 'lodash'
export class ToTipTapVisitor extends BaserowFormulaVisitor {
- constructor(functions) {
+ constructor(functions, mode = 'simple') {
super()
this.functions = functions
+ this.mode = mode
}
visitRoot(ctx) {
const result = ctx.expr().accept(this)
+
+ // In advanced mode, ensure all content is wrapped in a single wrapper
+ if (this.mode === 'advanced') {
+ const content = _.isArray(result) ? result : [result]
+ return {
+ type: 'doc',
+ content: [
+ {
+ type: 'wrapper',
+ content: content.flatMap((item) => {
+ // Filter out null or undefined items
+ if (!item) return []
+
+ // If the item is an array (from functions without wrapper in advanced mode)
+ if (Array.isArray(item)) {
+ return item
+ }
+
+ // If the item is a wrapper, extract its content
+ if (item.type === 'wrapper' && item.content) {
+ return item.content
+ }
+
+ // Return the item if it has a type
+ return item.type ? [item] : []
+ }),
+ },
+ ],
+ }
+ }
+
return { type: 'doc', content: _.isArray(result) ? result : [result] }
}
@@ -18,24 +50,25 @@ export class ToTipTapVisitor extends BaserowFormulaVisitor {
case "'\n'":
// Specific element that helps to recognize root concat
return { type: 'newLine' }
- default:
- if (this.processString(ctx)) {
- return { type: 'text', text: this.processString(ctx) }
+ default: {
+ const processedString = this.processString(ctx)
+ if (processedString) {
+ return { type: 'text', text: processedString }
} else {
// An empty string is an empty wrapper
return { type: 'wrapper' }
}
+ }
}
}
visitDecimalLiteral(ctx) {
- // TODO
- return parseFloat(ctx.getText())
+ return { type: 'text', text: ctx.getText() }
}
visitBooleanLiteral(ctx) {
- // TODO
- return ctx.TRUE() !== null
+ const value = ctx.TRUE() !== null ? 'true' : 'false'
+ return { type: 'text', text: value }
}
visitBrackets(ctx) {
@@ -69,8 +102,111 @@ export class ToTipTapVisitor extends BaserowFormulaVisitor {
)
const formulaFunctionType = this.functions.get(functionName)
+ const node = formulaFunctionType.toNode(args, this.mode)
+
+ // If the function returns an array (like concat with newlines in simple mode),
+ // return it directly
+ if (Array.isArray(node)) {
+ return node
+ }
+
+ // If the function doesn't have a proper TipTap component (node is null or type is null),
+ // wrap it as text but preserve the arguments
+ if (!node || !node.type) {
+ const content = []
+
+ // Check if this is an operator and should use symbol instead of function name
+ const isOperator = formulaFunctionType.getOperatorSymbol
+
+ if (isOperator && args.length === 2) {
+ // For binary operators, display as: arg1 symbol arg2
+ const [leftArg, rightArg] = args
+
+ // Add left argument
+ if (leftArg.type === 'text' && typeof leftArg.text === 'string') {
+ const isBoolean = leftArg.text === 'true' || leftArg.text === 'false'
+ const isNumber = !isNaN(Number(leftArg.text))
+ if (isBoolean || isNumber) {
+ content.push(leftArg)
+ } else {
+ content.push({ type: 'text', text: `"${leftArg.text}"` })
+ }
+ } else if (Array.isArray(leftArg)) {
+ // If arg is an array (from nested function calls in advanced mode),
+ // spread its elements
+ content.push(...leftArg)
+ } else if (leftArg) {
+ content.push(leftArg)
+ }
+
+ // Add operator symbol
+ content.push({
+ type: 'text',
+ text: ` ${formulaFunctionType.getOperatorSymbol} `,
+ })
+
+ // Add right argument
+ if (rightArg.type === 'text' && typeof rightArg.text === 'string') {
+ const isBoolean =
+ rightArg.text === 'true' || rightArg.text === 'false'
+ const isNumber = !isNaN(Number(rightArg.text))
+ if (isBoolean || isNumber) {
+ content.push(rightArg)
+ } else {
+ content.push({ type: 'text', text: `"${rightArg.text}"` })
+ }
+ } else if (Array.isArray(rightArg)) {
+ // If arg is an array (from nested function calls in advanced mode),
+ // spread its elements
+ content.push(...rightArg)
+ } else if (rightArg) {
+ content.push(rightArg)
+ }
+ } else {
+ // For functions, display as: functionName(arg1, arg2, ...)
+ content.push({ type: 'text', text: `${functionName}(` })
+
+ args.forEach((arg, index) => {
+ if (index > 0) {
+ content.push({ type: 'text', text: ', ' })
+ }
+
+ // Check if the argument is a complex node or a simple value
+ if (arg.type === 'text' && typeof arg.text === 'string') {
+ // Don't add quotes for boolean or numeric values
+ const isBoolean = arg.text === 'true' || arg.text === 'false'
+ const isNumber = !isNaN(Number(arg.text))
+
+ if (isBoolean || isNumber) {
+ content.push(arg)
+ } else {
+ // For actual string literals, add quotes
+ content.push({ type: 'text', text: `"${arg.text}"` })
+ }
+ } else if (Array.isArray(arg)) {
+ // If arg is an array (from nested function calls in advanced mode),
+ // spread its elements
+ content.push(...arg)
+ } else if (arg) {
+ content.push(arg)
+ }
+ })
+
+ content.push({ type: 'text', text: ')' })
+ }
+
+ // In advanced mode, return inline content without wrapper
+ if (this.mode === 'advanced') {
+ return content
+ }
+
+ return {
+ type: 'wrapper',
+ content,
+ }
+ }
- return formulaFunctionType.toNode(args)
+ return node
}
visitBinaryOp(ctx) {
diff --git a/web-frontend/modules/core/locales/en.json b/web-frontend/modules/core/locales/en.json
index 311db2f006..b1379119c4 100644
--- a/web-frontend/modules/core/locales/en.json
+++ b/web-frontend/modules/core/locales/en.json
@@ -806,6 +806,17 @@
"errorInvalidFormula": "The formula is invalid.",
"advancedFormulaMode": "Advanced formula mode"
},
+ "formulaInputContext": {
+ "variables": "Variables",
+ "functions": "Functions",
+ "operators": "Operators",
+ "search": "Search",
+ "useRegularInputModalTitle": "Use regular input for this field?",
+ "useRegularInput": "Use regular input",
+ "useAdvancedInput": "Use advanced input",
+ "useAdvancedInputModalTitle": "Use advanced input for this field?",
+ "modalMessage": "Your field’s content will be cleared and it will not be possible to recover it."
+ },
"dataExplorer": {
"noMatchingNodesText": "No matching results were found.",
"noProvidersText": "No data providers were found. To get started you can, for example, add a data source or page parameter."
diff --git a/web-frontend/modules/core/runtimeFormulaTypes.js b/web-frontend/modules/core/runtimeFormulaTypes.js
index 211fa6d293..39831b24f4 100644
--- a/web-frontend/modules/core/runtimeFormulaTypes.js
+++ b/web-frontend/modules/core/runtimeFormulaTypes.js
@@ -151,9 +151,10 @@ export class RuntimeFormulaFunction extends Registerable {
* in the editor.
*
* @param args - The args that are being parsed
+ * @param mode - The mode of the formula editor ('simple', 'advanced', or 'raw')
* @returns {object || Array} - The component configuration or a list of components
*/
- toNode(args) {
+ toNode(args, mode = 'simple') {
return {
type: this.formulaComponentType,
}
@@ -212,8 +213,15 @@ export class RuntimeConcat extends RuntimeFormulaFunction {
return args.length > 1
}
- toNode(args) {
- // Recognize root concat that adds the new lines between paragraphs
+ toNode(args, mode = 'simple') {
+ // In advanced mode, we want to show the formula as-is with quotes
+ if (mode === 'advanced') {
+ return {
+ type: this.formulaComponentType,
+ }
+ }
+
+ // In simple mode, recognize root concat that adds the new lines between paragraphs
if (args.every((arg, index) => index % 2 === 0 || arg.type === 'newLine')) {
return args
.filter((arg, index) => index % 2 === 0) // Remove the new lines elements
diff --git a/web-frontend/modules/core/utils/dataProviders.js b/web-frontend/modules/core/utils/dataProviders.js
new file mode 100644
index 0000000000..f565442ca4
--- /dev/null
+++ b/web-frontend/modules/core/utils/dataProviders.js
@@ -0,0 +1,50 @@
+/**
+ * Processes a list of data providers to extract and transform their nodes
+ * into a structure compatible with the FormulaInputField component. It also
+ * filters out any top-level nodes that do not have any nested nodes.
+ *
+ * @param {Array} dataProviders - An array of data provider instances.
+ * @param {Object} applicationContext - The context required by the data providers' getNodes method.
+ * @returns {Array} An array of filtered and transformed data nodes.
+ */
+export const getDataNodesFromDataProvider = (
+ dataProviders,
+ applicationContext
+) => {
+ const dataNodes = []
+ if (!dataProviders) {
+ return []
+ }
+
+ for (const dataProvider of dataProviders) {
+ if (dataProvider && typeof dataProvider.getNodes === 'function') {
+ const providerNodes = dataProvider.getNodes(applicationContext)
+ if (providerNodes) {
+ // Recursively transform provider nodes to match FormulaInputField's expected structure
+ const transformNode = (node) => ({
+ name: node.name,
+ type: node.type === 'array' ? 'array' : 'data',
+ identifier: node.identifier || node.name,
+ description: node.description || null,
+ icon: node.icon || 'iconoir-database',
+ highlightingColor: null,
+ example: null,
+ order: node.order || null,
+ signature: null,
+ nodes: node.nodes ? node.nodes.map(transformNode) : [],
+ })
+
+ // Ensure providerNodes is an array before processing
+ if (Array.isArray(providerNodes)) {
+ dataNodes.push(...providerNodes.map(transformNode))
+ } else if (typeof providerNodes === 'object') {
+ // If it's a single object, transform and add it
+ dataNodes.push(transformNode(providerNodes))
+ }
+ }
+ }
+ }
+
+ // Filter out first-level data nodes that have empty nodes arrays
+ return dataNodes.filter((node) => node.nodes && node.nodes.length > 0)
+}
diff --git a/web-frontend/modules/database/components/row/RowEditModalSidebar.vue b/web-frontend/modules/database/components/row/RowEditModalSidebar.vue
index 40fec1dcfe..e922fcb9c3 100644
--- a/web-frontend/modules/database/components/row/RowEditModalSidebar.vue
+++ b/web-frontend/modules/database/components/row/RowEditModalSidebar.vue
@@ -3,7 +3,8 @@
:selected-index="selectedTabIndex"
full-height
grow-items
- no-padding
+ header-no-padding
+ content-no-x-padding
class="row-edit-modal-sidebar"
>
-
+
+
+# FormulaInputField
+
+The FormulaInputField component is used to input and edit formulas with syntax highlighting, validation, and auto-completion. It supports functions, operators, and data references.
+
+export const mockApplicationContext = {
+ page: {
+ id: 1,
+ name: 'Test Page',
+ },
+}
+
+export const mockNodesHierarchy = [
+ {
+ name: 'Data',
+ type: 'data',
+ identifier: null,
+ icon: null,
+ order: null,
+ description: null,
+ example: null,
+ highlightingColor: null,
+ nodes: [
+ {
+ name: 'User',
+ type: 'data',
+ identifier: 'user',
+ icon: 'iconoir-question-mark',
+ order: null,
+ description: null,
+ example: null,
+ highlightingColor: null,
+ signature: null,
+ nodes: [
+ {
+ name: 'Is authenticated',
+ type: 'data',
+ identifier: 'is_authenticated',
+ description: null,
+ icon: 'baserow-icon-circle-checked',
+ highlightingColor: null,
+ description: null,
+ example: null,
+ order: null,
+ signature: null,
+ },
+ {
+ name: 'Id',
+ type: 'data',
+ identifier: 'id',
+ description: null,
+ icon: 'baserow-icon-hashtag',
+ highlightingColor: null,
+ description: null,
+ example: null,
+ order: null,
+ signature: null,
+ },
+ {
+ name: 'Email',
+ type: 'data',
+ identifier: 'email',
+ description: null,
+ icon: 'iconoir-text',
+ highlightingColor: null,
+ description: null,
+ example: null,
+ order: null,
+ signature: null,
+ },
+ {
+ name: 'Username',
+ type: 'data',
+ identifier: 'username',
+ description: null,
+ icon: 'iconoir-text',
+ highlightingColor: null,
+ description: null,
+ example: null,
+ order: null,
+ signature: null,
+ },
+ {
+ name: 'Role',
+ type: 'data',
+ identifier: 'role',
+ description: null,
+ icon: 'iconoir-text',
+ highlightingColor: null,
+ description: null,
+ example: null,
+ order: null,
+ signature: null,
+ },
+ ],
+ },
+ {
+ name: 'Data records',
+ type: 'data',
+ identifier: 'data_source',
+ highlightingColor: null,
+ description: null,
+ example: null,
+ order: null,
+ icon: 'iconoir-question-mark',
+ signature: null,
+ nodes: [
+ {
+ name: 'List rows',
+ type: 'data',
+ identifier: '543',
+ description: null,
+ highlightingColor: null,
+ example: null,
+ icon: 'iconoir-list',
+ type: 'array',
+ order: null,
+ nodes: [
+ {
+ name: 'Id',
+ type: 'data',
+ order: null,
+ description: null,
+ highlightingColor: null,
+ example: null,
+ icon: 'baserow-icon-hashtag',
+ identifier: 'id',
+ signature: null,
+ },
+ {
+ name: 'Name',
+ type: 'data',
+ description: null,
+ example: null,
+ highlightingColor: null,
+ order: null,
+ icon: 'iconoir-text',
+ identifier: 'field_7094',
+ signature: null,
+ },
+ {
+ name: 'Last name',
+ type: 'data',
+ order: null,
+ description: null,
+ example: null,
+ highlightingColor: null,
+ icon: 'iconoir-text',
+ identifier: 'field_7095',
+ signature: null,
+ },
+ {
+ name: 'Notes',
+ type: 'data',
+ description: null,
+ example: null,
+ highlightingColor: null,
+ order: null,
+ icon: 'iconoir-text',
+ identifier: 'field_7096',
+ signature: null,
+ },
+ {
+ name: 'Active',
+ type: 'data',
+ description: null,
+ example: null,
+ highlightingColor: null,
+ order: null,
+ icon: 'baserow-icon-circle-checked',
+ identifier: 'field_7097',
+ signature: null,
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ name: 'Functions',
+ type: 'function',
+ identifier: null,
+ order: null,
+ signature: null,
+ description: null,
+ example: null,
+ highlightingColor: null,
+ icon: null,
+ nodes: [
+ {
+ name: 'Text',
+ identifier: null,
+ order: null,
+ signature: null,
+ description: null,
+ example: null,
+ highlightingColor: null,
+ icon: null,
+ nodes: [
+ {
+ name: 'concat',
+ type: 'function',
+ description:
+ 'Concatenates multiple text values together',
+ example: "concat('Hello', ' ', 'World')",
+ highlightingColor: 'blue',
+ icon: 'iconoir-text',
+ identifier: null,
+ order: null,
+ signature: {
+ parameters: [
+ {
+ type: 'string',
+ required: true,
+ },
+ ],
+ variadic: true,
+ minArgs: 1,
+ maxArgs: null,
+ },
+ },
+ {
+ name: 'upper',
+ type: 'function',
+ description: 'Converts text to uppercase',
+ example: "upper('hello world')",
+ highlightingColor: 'blue',
+ icon: 'iconoir-text',
+ identifier: null,
+ order: null,
+ signature: {
+ parameters: [
+ {
+ type: 'string',
+ required: true,
+ },
+ ],
+ variadic: false,
+ minArgs: 1,
+ maxArgs: 1,
+ },
+ },
+ {
+ name: 'lower',
+ type: 'function',
+ description: 'Converts text to lowercase',
+ example: "lower('HELLO WORLD')",
+ highlightingColor: 'blue',
+ icon: 'iconoir-text',
+ identifier: null,
+ order: null,
+ signature: {
+ parameters: [
+ {
+ type: 'string',
+ required: true,
+ },
+ ],
+ variadic: false,
+ minArgs: 1,
+ maxArgs: 1,
+ },
+ },
+ {
+ name: 'substring',
+ type: 'function',
+ description: 'Extracts a portion of text',
+ example: "substring('Hello World', 0, 5)",
+ highlightingColor: 'blue',
+ icon: 'iconoir-text',
+ identifier: null,
+ order: null,
+ signature: {
+ parameters: [
+ {
+ type: 'text',
+ required: true,
+ },
+ {
+ type: 'number',
+ required: true,
+ },
+ {
+ type: 'number',
+ required: false,
+ },
+ ],
+ variadic: false,
+ minArgs: 2,
+ maxArgs: 3,
+ },
+ },
+ ],
+ },
+ {
+ name: 'Math',
+ type: 'function',
+ identifier: null,
+ order: null,
+ signature: null,
+ description: null,
+ example: null,
+ highlightingColor: null,
+ icon: null,
+ nodes: [
+ {
+ name: 'round',
+ type: 'function',
+ description:
+ 'Rounds a number to specified decimal places',
+ highlightingColor: 'green',
+ example: 'round(3.14159, 2)',
+ icon: 'iconoir-calculator',
+ identifier: null,
+ order: null,
+ signature: {
+ parameters: [
+ {
+ type: 'number',
+ required: true,
+ },
+ {
+ type: 'number',
+ required: false,
+ },
+ ],
+ variadic: false,
+ minArgs: 1,
+ maxArgs: 2,
+ },
+ },
+ {
+ name: 'sum',
+ type: 'function',
+ description: 'Calculates the sum of multiple numbers',
+ example: 'sum(1, 2, 3, 4)',
+ highlightingColor: 'green',
+ icon: 'iconoir-calculator',
+ identifier: null,
+ order: null,
+ signature: {
+ parameters: [
+ {
+ type: 'number',
+ required: true,
+ },
+ {
+ type: 'number',
+ required: false,
+ },
+ ],
+ variadic: true,
+ minArgs: 1,
+ maxArgs: null,
+ },
+ },
+ ],
+ },
+ ],
+ },
+ {
+ name: 'Operators',
+ type: 'operator',
+ nodes: [
+ {
+ name: 'Arithmetic',
+ example: null,
+ signature: null,
+ highlightingColor: null,
+ icon: null,
+ identifier: null,
+ order: null,
+ description: null,
+ nodes: [
+ {
+ name: 'add',
+ type: 'operator',
+ description: 'Adds two numbers',
+ example: '5 + 3',
+ highlightingColor: 'green',
+ icon: 'iconoir-calculator',
+ identifier: null,
+ order: null,
+ signature: {
+ operator: '+',
+ parameters: [
+ {
+ type: 'number',
+ required: true,
+ },
+ {
+ type: 'number',
+ required: true,
+ },
+ ],
+ variadic: false,
+ minArgs: 2,
+ maxArgs: 2,
+ },
+ },
+ {
+ name: 'multiply',
+ type: 'operator',
+ description: 'Multiplies two numbers',
+ example: '5 * 3',
+ highlightingColor: 'green',
+ icon: 'iconoir-calculator',
+ signature: {
+ operator: '*',
+ parameters: [
+ {
+ type: 'number',
+ required: true,
+ },
+ {
+ type: 'number',
+ required: true,
+ },
+ ],
+ variadic: false,
+ minArgs: 2,
+ maxArgs: 2,
+ },
+ },
+ ],
+ },
+ ],
+ },
+ {
+ name: 'Other',
+ type: 'function',
+ identifier: null,
+ order: null,
+ signature: null,
+ description: null,
+ example: null,
+ highlightingColor: null,
+ icon: null,
+ empty: true,
+ emptyText: 'No data sources available',
+ },
+]
+
+export const Template = (args, { argTypes }) => ({
+ components: { FormulaInputField },
+ props: Object.keys(argTypes),
+ data() {
+ return {
+ formulaValue: 'concat("pwet")',
+ currentMode: args.mode,
+ mockNodesHierarchy,
+ }
+ },
+ template: `
+
+
+
+
+
+
Emitted Formula:
+
+ {{ formulaValue || '(empty)' }}
+
+
+
+ `,
+ methods: {
+ onInput(value) {
+ this.formulaValue = value
+ action('input')(value)
+ },
+ onModeChanged(value) {
+ this.currentMode = value
+ action('update:mode')(value)
+ },
+ },
+})
+
+export const designConfig = {
+ type: 'figma',
+ url: 'https://www.figma.com/design/pARSkP8ldSqMVxV1t2gYYT/Application-builder?node-id=1314-35740&m=dev',
+}
+
+
+
+## Example
+
+```javascript
+
+```
+
+## Features
+
+- **Syntax Highlighting**: Functions and operators are highlighted with colors
+- **Real-time Validation**: Shows errors for invalid formulas or incorrect function arguments
+- **Auto-completion**: Suggests functions and operators as you type
+- **Data Explorer**: Browse available data sources and fields
+- **Advanced/Simple Mode**: Toggle between advanced formula editor and simple input
+- **Function Documentation**: Shows function signatures and examples
+- **Flexible Context Position**: Position the context menu in different locations relative to the input field
+
+## Context Positioning
+
+The `context-position` prop allows you to control where the formula context menu appears, ensuring it never covers the input field:
+
+- **`bottom`** (default): Below the input field
+- **`left`**: To the left side of the input field
+- **`right`**: To the right side of the input field
+
+The context menu is automatically positioned to avoid covering the input field, maintaining optimal usability.
+
+## Props
+
+{' '}
diff --git a/web-frontend/stories/Tabs.stories.mdx b/web-frontend/stories/Tabs.stories.mdx
index 244b77364e..1ee8e8a0b8 100644
--- a/web-frontend/stories/Tabs.stories.mdx
+++ b/web-frontend/stories/Tabs.stories.mdx
@@ -41,7 +41,28 @@ import Tab from '@baserow/modules/core/components/Tab'
},
defaultValue: false,
},
- noPadding: {
+ contentNoXPadding: {
+ control: {
+ type: 'boolean',
+ options: [true, false],
+ },
+ defaultValue: false,
+ },
+ contentNoPadding: {
+ control: {
+ type: 'boolean',
+ options: [true, false],
+ },
+ defaultValue: false,
+ },
+ headerNoPadding: {
+ control: {
+ type: 'boolean',
+ options: [true, false],
+ },
+ defaultValue: false,
+ },
+ large: {
control: {
type: 'boolean',
options: [true, false],