webspresso 0.0.78 → 0.0.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webspresso",
-  "version": "0.0.78",
+  "version": "0.0.79",
   "description": "Minimal, production-ready SSR framework for Node.js with file-based routing, Nunjucks templating, built-in i18n, and CLI tooling",
   "main": "index.js",
   "types": "index.d.ts",

package/plugins/admin-panel/client/parts/04-field-renderers.js

@@ -1,4 +1,160 @@
 // Field Renderers - render appropriate input based on column type
+
+// BelongsTo relation dropdown select component
+const BelongsToField = {
+  oninit: (vnode) => {
+    const { col } = vnode.attrs;
+    const customField = col.customField || {};
+    const relationName = customField.relation || col.name.replace(/_id$/, '');
+    const modelName = m.route.param('model');
+    vnode.state.loading = true;
+    vnode.state.options = [];
+    
+    api.get('/models/' + modelName + '/relations/' + relationName)
+      .then(result => {
+        vnode.state.options = result.data || [];
+      })
+      .catch(err => {
+        console.error('Failed to load relation data:', err);
+      })
+      .finally(() => {
+        vnode.state.loading = false;
+        m.redraw();
+      });
+  },
+  view: (vnode) => {
+    const { col, value, onChange, readonly } = vnode.attrs;
+    const customField = col.customField || {};
+    const label = col.ui?.label || formatColumnLabel(col.name);
+    const hint = col.ui?.hint || '';
+    const valueKey = customField.valueKey || 'id';
+    const displayKey = customField.displayKey || 
+      (vnode.state.options.length > 0 ? ['name', 'title', 'label', 'username', 'email'].find(k => k in vnode.state.options[0]) : null) || 
+      'id';
+    
+    if (vnode.state.loading) {
+      return m('.mb-4', [
+        m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-1', label),
+        m('.text-xs.text-gray-500.dark:text-slate-400', 'Loading options...')
+      ]);
+    }
+    
+    return m('.mb-4', [
+      m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-1', { for: col.name }, [
+        label,
+        !col.nullable && !readonly ? m('span.text-red-500', ' *') : null
+      ]),
+      m('select.w-full.px-3.py-2.border.border-gray-300.dark:border-slate-600.rounded-md.bg-white.dark:bg-slate-900/70.text-gray-900.dark:text-slate-100.focus:outline-none.focus:ring-2.focus:ring-blue-500.dark:focus:ring-blue-400', {
+        id: col.name,
+        name: col.name,
+        value: value !== null && value !== undefined ? String(value) : '',
+        disabled: readonly,
+        class: readonly ? 'bg-gray-100 dark:bg-slate-800 cursor-not-allowed' : '',
+        onchange: (e) => {
+          const selectedValue = e.target.value === '' ? null : e.target.value;
+          const typedValue = (col.type === 'integer' || col.type === 'bigint' || col.type === 'float' || col.type === 'decimal') && selectedValue !== null
+            ? Number(selectedValue)
+            : selectedValue;
+          onChange(typedValue);
+        },
+      }, [
+        col.nullable ? m('option', { value: '' }, '-- Select --') : m('option', { value: '' }, '-- Select --'),
+        vnode.state.options.map(item => {
+          const itemValue = item[valueKey];
+          const itemDisplay = item[displayKey] || String(itemValue);
+          return m('option', {
+            value: String(itemValue),
+            selected: value !== null && value !== undefined && String(value) === String(itemValue)
+          }, itemDisplay);
+        }),
+      ]),
+      hint ? m('p.text-xs.text-gray-500.dark:text-slate-400.mt-1', hint) : null,
+    ]);
+  }
+};
+
+// HasMany relation multi-select checkbox component
+const HasManyField = {
+  oninit: (vnode) => {
+    const { col } = vnode.attrs;
+    const customField = col.customField || {};
+    const relationName = customField.relation || col.name.replace(/_ids$/, '').replace(/_id$/, '');
+    const modelName = m.route.param('model');
+    vnode.state.loading = true;
+    vnode.state.options = [];
+    
+    api.get('/models/' + modelName + '/relations/' + relationName)
+      .then(result => {
+        vnode.state.options = result.data || [];
+      })
+      .catch(err => {
+        console.error('Failed to load relation data:', err);
+      })
+      .finally(() => {
+        vnode.state.loading = false;
+        m.redraw();
+      });
+  },
+  view: (vnode) => {
+    const { col, value = [], onChange, readonly } = vnode.attrs;
+    const customField = col.customField || {};
+    const label = col.ui?.label || formatColumnLabel(col.name);
+    const hint = col.ui?.hint || '';
+    const valueKey = customField.valueKey || 'id';
+    const displayKey = customField.displayKey || 
+      (vnode.state.options.length > 0 ? ['name', 'title', 'label', 'username', 'email'].find(k => k in vnode.state.options[0]) : null) || 
+      'id';
+    const selectedIds = Array.isArray(value) ? value.map(v => String(v)) : [];
+    
+    if (vnode.state.loading) {
+      return m('.mb-4', [
+        m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-1', label),
+        m('.text-xs.text-gray-500.dark:text-slate-400', 'Loading options...')
+      ]);
+    }
+    
+    return m('.mb-4', [
+      m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-1', [
+        label,
+        !col.nullable && !readonly ? m('span.text-red-500', ' *') : null
+      ]),
+      m('.border.border-gray-300.dark:border-slate-600.rounded-md.p-3.max-h-48.overflow-y-auto.bg-white.dark:bg-slate-900/70', [
+        vnode.state.options.map(item => {
+          const itemValue = String(item[valueKey]);
+          const itemDisplay = item[displayKey] || itemValue;
+          const isSelected = selectedIds.includes(itemValue);
+          
+          return m('label.flex.items-center.mb-2.cursor-pointer.text-sm.text-gray-700.dark:text-slate-300', [
+            m('input.mr-2.rounded.border-gray-300.dark:border-slate-600.text-indigo-600.focus:ring-indigo-500', {
+              type: 'checkbox',
+              checked: isSelected,
+              disabled: readonly,
+              onchange: (e) => {
+                let newSelected = [...selectedIds];
+                if (e.target.checked) {
+                  if (!newSelected.includes(itemValue)) {
+                    newSelected.push(itemValue);
+                  }
+                } else {
+                  newSelected = newSelected.filter(id => id !== itemValue);
+                }
+                
+                // Convert type if needed
+                const typedSelected = col.type === 'array' || typeof value[0] === 'string'
+                  ? newSelected
+                  : newSelected.map(Number);
+                onChange(typedSelected);
+              }
+            }),
+            m('span', itemDisplay),
+          ]);
+        }),
+      ]),
+      hint ? m('p.text-xs.text-gray-500.dark:text-slate-400.mt-1', hint) : null,
+    ]);
+  }
+};
+
 const FieldRenderers = {
   // Text input (string)
   string: (col, value, onChange, readonly) => {
@@ -284,4 +440,14 @@ const FieldRenderers = {
       hint ? m('p.text-xs.text-gray-500 dark:text-slate-400.mt-1', hint) : null,
     ]);
   },
+
+  // belongsTo relation dropdown
+  belongsTo: (col, value, onChange, readonly) => {
+    return m(BelongsToField, { col, value, onChange, readonly });
+  },
+
+  // hasMany relation checklist
+  hasMany: (col, value, onChange, readonly) => {
+    return m(HasManyField, { col, value, onChange, readonly });
+  },
 };

package/plugins/admin-panel/client/parts/05-rich-text-file-helpers.js

@@ -372,7 +372,36 @@ function getFieldRenderer(col, modelMeta) {
         });
       };
     }
-    // Add other custom field types here if needed
+    if (col.customField.type === 'belongsTo') {
+      return FieldRenderers.belongsTo;
+    }
+    if (col.customField.type === 'hasMany') {
+      return FieldRenderers.hasMany;
+    }
+
+    // Check registered custom field renderers in browser
+    const custom = window.__customFieldRenderers && window.__customFieldRenderers[col.customField.type];
+    if (custom) {
+      return (col, value, onChange, readonly) => {
+        if (custom.edit && typeof custom.edit === 'object' && custom.edit.view) {
+          return m(custom.edit, { col, value, onChange, readonly });
+        } else if (typeof custom.edit === 'function') {
+          return custom.edit(value, onChange, col);
+        }
+      };
+    }
+  }
+
+  // Check schema type custom field renderers
+  if (col.type && window.__customFieldRenderers && window.__customFieldRenderers[col.type]) {
+    const custom = window.__customFieldRenderers[col.type];
+    return (col, value, onChange, readonly) => {
+      if (custom.edit && typeof custom.edit === 'object' && custom.edit.view) {
+        return m(custom.edit, { col, value, onChange, readonly });
+      } else if (typeof custom.edit === 'function') {
+        return custom.edit(value, onChange, col);
+      }
+    };
   }
 
   if (col.type === 'file') {
@@ -403,6 +432,8 @@ function getFieldRenderer(col, modelMeta) {
     array: 'array',
     uuid: 'string',
     nanoid: 'string',
+    belongsTo: 'belongsTo',
+    hasMany: 'hasMany',
   };
   return FieldRenderers[typeMap[col.type] || 'string'];
 }

package/plugins/admin-panel/client/parts/07-model-list.js

@@ -65,10 +65,20 @@ const ModelList = {
 };
 
 // Format cell value based on column type
-function formatCellValue(value, col) {
+function formatCellValue(value, col, record = null) {
   if (value === null || value === undefined) {
     return m('span.text-gray-400 dark:text-slate-500.italic', 'null');
   }
+
+  const customRendererType = (col && col.customField && col.customField.type) || (col && col.type);
+  const custom = window.__customFieldRenderers && window.__customFieldRenderers[customRendererType];
+  if (custom && custom.display) {
+    if (typeof custom.display === 'object' && custom.display.view) {
+      return m(custom.display, { value, col, record });
+    } else if (typeof custom.display === 'function') {
+      return custom.display(value, record);
+    }
+  }
   
   switch (col?.type) {
     case 'boolean':

package/plugins/admin-panel/client/parts/08-record-list.js

@@ -478,7 +478,7 @@ const RecordList = {
                     ...displayColumns.map((col, i) => 
                       m('td.px-4.py-3.text-sm.whitespace-nowrap.text-gray-700 dark:text-slate-300.bg-white dark:bg-slate-800',
                         i === 0 ? { style: 'position: sticky; left: 40px; z-index: 5; box-shadow: 4px 0 8px -4px rgba(0,0,0,0.08);' } : {},
-                        formatCellValue(record[col.name], col)
+                        formatCellValue(record[col.name], col, record)
                       )
                     ),
                     // Sticky actions cell (sticky right, box-shadow on left)

package/plugins/admin-panel/index.js

@@ -329,6 +329,25 @@ function adminPanelPlugin(options = {}) {
   };
 }
 
+/**
+ * Helper to serialize arbitrary JS structures, including functions
+ */
+function serializeJs(obj) {
+  if (typeof obj === 'function') {
+    return obj.toString();
+  }
+  if (Array.isArray(obj)) {
+    return '[' + obj.map(serializeJs).join(', ') + ']';
+  }
+  if (obj && typeof obj === 'object') {
+    const entries = Object.entries(obj).map(([key, val]) => {
+      return `${JSON.stringify(key)}: ${serializeJs(val)}`;
+    });
+    return '{' + entries.join(',\n') + '}';
+  }
+  return JSON.stringify(obj);
+}
+
 /**
  * Generate admin panel HTML
  * @param {string} adminPath - Admin panel path
@@ -343,6 +362,12 @@ function generateAdminPanelHtml(adminPath, registry) {
   const customPageComponent = generateCustomPageComponent();
 
   const settings = registry.settings;
+  const fieldRenderersCode = Array.from(registry.fieldRenderers.entries()).map(([type, r]) => {
+    return `window.__customFieldRenderers['${type}'] = {
+      display: ${r.display ? serializeJs(r.display) : 'null'},
+      edit: ${r.edit ? serializeJs(r.edit) : 'null'}
+    };`;
+  }).join('\n');
 
   return `<!DOCTYPE html>
 <html lang="en">
@@ -418,6 +443,10 @@ function generateAdminPanelHtml(adminPath, registry) {
     // Custom page components container
     window.__customPages = window.__customPages || {};
     ${registry.getClientComponents()}
+
+    // Custom field renderers container
+    window.__customFieldRenderers = window.__customFieldRenderers || {};
+    ${fieldRenderersCode}
   </script>
   <script>${appScript}</script>
 </body>