pgo-ui 1.1.2 → 1.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pgo-ui",
-  "version": "1.1.2",
+  "version": "1.1.8",
   "description": "A Vue 3 component library with PGO design system",
   "private": false,
   "type": "module",
@@ -42,7 +42,7 @@
     "build": "vite build",
     "preview": "vite preview",
     "postinstall": "node ./src/copy-assets.cjs",
-    "release": "npm version patch --no-git-tag-version && npm run build && npm --//registry.npmjs.org/:_authToken=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 publish"
+    "release": "npm version patch --no-git-tag-version && npm run build && npm publish --access public"
   },
   "dependencies": {
     "@heroicons/vue": "^2.2.0",

package/src/components/pgo/forms/DynamicForm.vue

@@ -342,25 +342,32 @@ const initializeFormData = () => {
 
     const initializeAllFunctions = () => {
         if (props.form.functions) {
-            // Create context that the functions will have access to
-            const functionContext = {
-                formData,
-                formVariables,
-                snackbar,
-                api,
-                emit,
-                props,
-                console,
-                variables: formVariables,
-                setFieldValue,
-                getFieldValue,
-                this: {
-                    variables: formVariables
-                }
-            };
+            Object.entries(props.form.functions).forEach(([name, functionBody]) => {
+                try {
+                    compiledFunctions.value[name] = (...args) => {
+                        const context = createEvaluationContext()
+
+                        // Add common function-specific arguments
+                        if (args[0] !== undefined) context.response = args[0]
+                        if (args[1] !== undefined) context.item = args[1]
+                        if (args[2] !== undefined) context.event = args[2]
 
-            // Use the global initializeFunctions helper
-            compiledFunctions.value = initializeFunctions(props.form.functions, functionContext);
+                        // Add all positional args as 'arg0', 'arg1', etc.
+                        args.forEach((arg, index) => {
+                            context[`arg${index}`] = arg
+                        })
+
+                        try {
+                            return safeEval(functionBody, context)
+                        } catch (error) {
+                            console.warn(`Error executing function "${name}":`, error.message)
+                            return null
+                        }
+                    }
+                } catch (error) {
+                    console.warn(`Error compiling function "${name}":`, error.message)
+                }
+            })
         }
     };
 
@@ -368,303 +375,18 @@ const initializeFormData = () => {
     const executeFunction = (functionName, ...args) => {
         if (compiledFunctions.value[functionName]) {
             try {
-                return compiledFunctions.value[functionName](...args);
+                return compiledFunctions.value[functionName](...args)
             } catch (error) {
-                console.error(`Error executing function ${functionName}:`, error);
-                snackbar?.show({
-                    message: `Function ${functionName} execution failed`,
-                    variant: 'error'
-                });
+                console.warn(`Error executing function "${functionName}":`, error.message)
+                return null
             }
         } else {
-            console.warn(`Function ${functionName} not found`);
-        }
-    };
-
-    // Function to get fields by group name
-    const getFieldsByGroup = (groupName) => {
-        if (!props.form.fields || !Array.isArray(props.form.fields)) {
-            return [];
-        }
-        return props.form.fields.filter(field => field && field.group === groupName);
-    };
-
-    const shouldShowGroup = (group) => {
-        if (!group) return false
-        if (!group.condition) return true
-
-        try {
-            let expression = group.condition.trim()
-            const context = createEvaluationContext()
-
-            const evaluateCondition = (expr) => {
-                // Pattern 1: Simple variable check
-                if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(expr)) {
-                    return !!context[expr]
-                }
-
-                // Pattern 2: Negation "!variableName"
-                if (/^!/.test(expr)) {
-                    const variableName = expr.substring(1).trim()
-                    if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(variableName)) {
-                        return !context[variableName]
-                    }
-                }
-
-                // Pattern 3: Complex expressions
-                const varDeclarations = Object.keys(context)
-                    .filter(key => /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key))
-                    .map(key => {
-                        const value = context[key]
-                        if (typeof value === 'function') return ''
-                        if (value === null || value === undefined) return `var ${key} = null;`
-                        if (typeof value === 'object') {
-                            try {
-                                return `var ${key} = ${JSON.stringify(value)};`
-                            } catch {
-                                return `var ${key} = null;`
-                            }
-                        }
-                        if (typeof value === 'string') return `var ${key} = ${JSON.stringify(value)};`
-                        return `var ${key} = ${value};`
-                    })
-                    .filter(Boolean)
-                    .join('\n')
-
-                const fn = new Function(varDeclarations + `\nreturn (${expr});`)
-                return fn()
-            }
-
-            return !!evaluateCondition(expression)
-        } catch (error) {
-            console.warn(`Error evaluating group condition "${group.condition}":`, error.message)
-            return true
-        }
-    }
-
-    // Function to get ungrouped fields
-    const getUngroupedFields = () => {
-        if (!props.form.fields || !Array.isArray(props.form.fields)) {
-            return [];
-        }
-        return props.form.fields.filter(field => field && !field.group);
-    };
-
-    // Function to check if field should be shown based on condition
-    const shouldShowField = (field) => {
-        if (!field) {
-            return false;
-        }
-
-        if (field.hidden === true) {
-            return false;
-        }
-
-        if (!field.condition) {
-            return true;
-        }
-
-        try {
-            let expression = field.condition.trim();
-            const context = createEvaluationContext();
-
-            const evaluateCondition = (expr) => {
-                // Pattern 1: Simple field check
-                if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(expr)) {
-                    return !!context[expr];
-                }
-
-                // Pattern 2: Negation
-                if (/^!/.test(expr)) {
-                    const fieldName = expr.substring(1).trim();
-                    if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(fieldName)) {
-                        return !context[fieldName];
-                    }
-                }
-
-                // Pattern 3: Complex expression
-                const varDeclarations = Object.keys(context)
-                    .filter(key => /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key))
-                    .map(key => {
-                        const value = context[key];
-                        if (typeof value === 'function') return '';
-                        if (value === null || value === undefined) return `var ${key} = null;`;
-                        if (typeof value === 'object') {
-                            try {
-                                return `var ${key} = ${JSON.stringify(value)};`;
-                            } catch {
-                                return `var ${key} = null;`;
-                            }
-                        }
-                        if (typeof value === 'string') return `var ${key} = ${JSON.stringify(value)};`;
-                        if (typeof value === 'boolean') return `var ${key} = ${value};`;
-                        if (typeof value === 'number') return `var ${key} = ${value};`;
-                        return `var ${key} = ${JSON.stringify(value)};`;
-                    })
-                    .filter(Boolean)
-                    .join('\n');
-
-                const fn = new Function(varDeclarations + `\nreturn (${expr});`);
-                return fn();
-            };
-
-            return !!evaluateCondition(expression);
-        } catch (error) {
-            console.warn(`Error evaluating condition "${field.condition}":`, error.message);
-            const simpleField = field.condition.trim().replace(/^!/, '');
-            if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(simpleField)) {
-                const context = createEvaluationContext();
-                const value = context[simpleField];
-                return field.condition.trim().startsWith('!') ? !value : !!value;
-            }
-            return true;
-        }
-    };
-
-    const componentMap = computed(() => {
-        const map = {}
-        const usedTypes = new Set(props.form.fields.map(f => f.inputType?.toLowerCase()))
-
-        if (usedTypes.has('search') || usedTypes.has('inputsearch')) {
-            map['search'] = defineAsyncComponent(() => import('../SearchBox.vue'))
-            map['searchbox'] = defineAsyncComponent(() => import('../SearchBox.vue'))
-        }
-
-        if (usedTypes.has('select')) {
-            map['select'] = defineAsyncComponent(() => import('../inputs/Select.vue'))
-        }
-        if (usedTypes.has('textarea')) {
-            map['textarea'] = defineAsyncComponent(() => import('../inputs/Textarea.vue'))
-        }
-
-        if (usedTypes.has('textfield') || usedTypes.has('text') || usedTypes.has('string')) {
-            map['textfield'] = defineAsyncComponent(() => import('../inputs/TextField.vue'))
-            map['text'] = defineAsyncComponent(() => import('../inputs/TextField.vue'))
-            map['string'] = defineAsyncComponent(() => import('../inputs/TextField.vue'))
-        }
-
-        if (usedTypes.has('datepicker') || usedTypes.has('date')) {
-            map['datepicker'] = defineAsyncComponent(() => import('../inputs/DatePicker.vue'))
-            map['date'] = defineAsyncComponent(() => import('../inputs/DatePicker.vue'))
-        }
-
-        if (usedTypes.has('chipgroup')) {
-            map['chipgroup'] = defineAsyncComponent(() => import('../buttons/ChipGroup.vue'))
-        }
-
-        if (usedTypes.has('checkbox')) {
-            map['checkbox'] = defineAsyncComponent(() => import('../inputs/Checkbox.vue'))
-        }
-
-        if (usedTypes.has('radio')) {
-            map['radio'] = defineAsyncComponent(() => import('../inputs/Radio.vue'))
-        }
-
-        if (usedTypes.has('numberfield') || usedTypes.has('number')) {
-            map['numberfield'] = defineAsyncComponent(() => import('../inputs/NumberField.vue'))
-            map['number'] = defineAsyncComponent(() => import('../inputs/NumberField.vue'))
-        }
-        if (usedTypes.has('file') || usedTypes.has('filefield')) {
-            map['file'] = defineAsyncComponent(() => import('../inputs/FileUpload.vue'))
-            map['filefield'] = defineAsyncComponent(() => import('../inputs/FileUpload.vue'))
-        }
-        if (usedTypes.has('label') || usedTypes.has('labelfield')) {
-            map['label'] = defineAsyncComponent(() => import('../inputs/LabelField.vue'))
-            map['labelfield'] = defineAsyncComponent(() => import('../inputs/LabelField.vue'))
-        }
-
-        return map
-    })
-
-    const getFieldComponent = (type) => {
-        const normalizedType = type?.toLowerCase() || 'textfield'
-        return componentMap.value[normalizedType] || componentMap.value['textfield']
-    }
-
-        // Helper function to evaluate JavaScript expressions with context
-    const evaluateExpression = (expression, context) => {
-        if (typeof expression !== 'string') {
-            return expression; // Return as-is if not a string
-        }
-
-        // If it's a simple variable name, return the context value
-        if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(expression)) {
-            return context[expression];
-        }
-
-        try {
-            // Build safe variable declarations instead of using function parameters
-            const functionKeys = []
-            const functionValues = []
-            const varDeclarations = []
-
-            Object.keys(context)
-                .filter(key => /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key))
-                .forEach(key => {
-                    const value = context[key]
-
-                    if (typeof value === 'function') {
-                        // Pass functions as parameters
-                        functionKeys.push(key)
-                        functionValues.push(value)
-                    } else if (value === null || value === undefined) {
-                        varDeclarations.push(`var ${key} = null;`)
-                    } else if (typeof value === 'object') {
-                        try {
-                            varDeclarations.push(`var ${key} = ${JSON.stringify(value)};`)
-                        } catch {
-                            varDeclarations.push(`var ${key} = null;`)
-                        }
-                    } else if (typeof value === 'string') {
-                        varDeclarations.push(`var ${key} = ${JSON.stringify(value)};`)
-                    } else {
-                        varDeclarations.push(`var ${key} = ${value};`)
-                    }
-                })
-
-            const body = varDeclarations.join('\n') + `\nreturn (${expression});`
-            const fn = new Function(...functionKeys, body)
-            return fn(...functionValues)
-        } catch (error) {
-            console.warn('Error evaluating expression:', expression, error.message)
-            return false
+            console.warn(`Function "${functionName}" not found in compiled functions`)
+            return null
         }
     };
 
-        const safeEval = (expression, context) => {
-        const functionKeys = []
-        const functionValues = []
-        const varDeclarations = []
-
-        Object.keys(context)
-            .filter(key => /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key))
-            .forEach(key => {
-                const value = context[key]
-
-                if (typeof value === 'function') {
-                    functionKeys.push(key)
-                    functionValues.push(value)
-                } else if (value === null || value === undefined) {
-                    varDeclarations.push(`var ${key} = null;`)
-                } else if (typeof value === 'object') {
-                    try {
-                        varDeclarations.push(`var ${key} = ${JSON.stringify(value)};`)
-                    } catch {
-                        varDeclarations.push(`var ${key} = null;`)
-                    }
-                } else if (typeof value === 'string') {
-                    varDeclarations.push(`var ${key} = ${JSON.stringify(value)};`)
-                } else {
-                    varDeclarations.push(`var ${key} = ${value};`)
-                }
-            })
-
-        const body = varDeclarations.join('\n') + `\n${expression}`
-        const fn = new Function(...functionKeys, body)
-        return fn(...functionValues)
-    }
-
-    // Simplified getFieldProps function
+    // Simplified getFieldProps function - evaluate disabled expressions
     const getFieldProps = (field) => {
         if (!field) {
             return {};
@@ -683,128 +405,33 @@ const initializeFormData = () => {
             group,
             events,
             hidden,
-            disabled,
-            reaonly,
-            value,
-            default: defaultValue, 
+            default: defaultValue,
             ...restProps
         } = field;
 
-        // Skip hidden fields
-        if (hidden) {
-            return {};
-        }
+        const cleanProps = { ...restProps }
 
-        // Start with fieldKey
-        const cleanProps = {
-            fieldKey: key
-        };
+        // Evaluate disabled if it's a string expression
+        if (typeof field.disabled === 'string') {
+            try {
+                cleanProps.disabled = !!safeEval(`return (${field.disabled});`, context)
+            } catch (error) {
+                console.warn(`Error evaluating disabled for field "${field.key}":`, error.message)
+                cleanProps.disabled = false
+            }
+        } else if (typeof field.disabled === 'boolean') {
+            cleanProps.disabled = field.disabled
+        }
 
         // Add relationId for file upload components
         if (field.inputType === 'file' || field.inputType === 'filefield') {
             cleanProps.relationId = relationId.value;
-            // cleanProps.onuploadSuccess = fetchData();
-            // cleanProps.onviewPdf = emit('view-pdf');
-            // cleanProps.fileList = FormDataList.value?.[ field.dataKey ?? field.key ];
-
-            // cleanProps.relationId = formId.value || props.editItemId;
             cleanProps['onUploadSuccess'] = () => handleUploadSuccess();
             cleanProps['onView-pdf'] = (pdfData) => emit('view-pdf', pdfData);
-            cleanProps.fileList = FormDataList.value?.[ field.dataKey ?? field.key ];
-            // cleanProps.fileList = fileList.value;
-        }
- 
-        // Add all other props directly (assuming they're clean from backend)
-        // Add all other props and evaluate expressions
-        Object.entries(restProps).forEach(([propKey, value]) => {
-            // Skip empty/null/undefined values
-            if (value === '' || value === null || value === undefined) {
-                return;
-            }
-
-            // Filter out any event-like properties that are strings
-            if (propKey.startsWith('on') && typeof value === 'string') {
-                console.warn(`Filtering out string event handler: ${propKey}`);
-                return;
-            }
-
-            // Evaluate expressions for specific props
-            if (typeof value === 'string' && (
-                propKey === 'disabled' ||
-                propKey === 'readonly' ||
-                propKey === 'required' ||
-                propKey === 'visible' ||
-                propKey === 'hidden'
-            )) {
-                // Check if it looks like a JavaScript expression
-                if (value.includes('===') || value.includes('!==') ||
-                    value.includes('==') || value.includes('!=') ||
-                    value.includes('&&') || value.includes('||') ||
-                    value.includes('?') || value.includes(':')) {
-                    cleanProps[propKey] = evaluateExpression(value, context);
-                } else if (context.hasOwnProperty(value)) {
-                    // Simple variable reference
-                    cleanProps[propKey] = context[value];
-                } else {
-                    cleanProps[propKey] = value;
-                }
-            } else {
-                cleanProps[propKey] = value;
-            }
-        });
-
-        if (disabled !== undefined) {
-            if (typeof disabled === 'string') {
-                cleanProps.disabled = evaluateExpression(disabled, context);
-            } else {
-                cleanProps.disabled = disabled;
-            }
-        }
-
-        // Dynamically handle events configuration
-        if (events && typeof events === 'object') {
-            Object.keys(events).forEach(eventName => {
-                const functionName = events[eventName];
-
-                // Convert event name to Vue prop format (onEventName)
-                let vueEventName;
-
-                if (eventName.includes(':')) {
-                    vueEventName = 'on' + eventName
-                        .split(':')
-                        .map(part => part.charAt(0).toUpperCase() + part.slice(1))
-                        .join('');
-                } else if (eventName.includes('-')) {
-                    vueEventName = 'on' + eventName
-                        .split('-')
-                        .map(part => part.charAt(0).toUpperCase() + part.slice(1))
-                        .join('');
-                } else {
-                    vueEventName = 'on' + eventName.charAt(0).toUpperCase() + eventName.slice(1);
-                }
-
-                // Create the event handler
-                cleanProps[vueEventName] = (data) => {
-                    executeFunction(functionName, data);
-                };
-            });
-        }
-
-        // Handle item-text, item-value, item-title transformations
-        if (cleanProps.itemText) {
-            cleanProps['item-text'] = cleanProps.itemText;
-            delete cleanProps.itemText;
-        }
-        if (cleanProps.itemValue) {
-            cleanProps['item-value'] = cleanProps.itemValue;
-            delete cleanProps.itemValue;
-        }
-        if (cleanProps.itemTitle) {
-            cleanProps['item-title'] = cleanProps.itemTitle;
-            delete cleanProps.itemTitle;
+            cleanProps.fileList = FormDataList.value?.[field.dataKey ?? field.key];
         }
 
-        return cleanProps;
+        return cleanProps
     };
 
     const parseRules = (rulesString) => {

package/dist/Radio-ChqPv-ZD.js

@@ -1,4 +0,0 @@
-import { _ as f } from "./index-DADicZve.js";
-export {
-  f as default
-};