robobyte-front-builder 1.0.19 → 1.0.23

package/src/views/builder/inspector/definitions/textarea/main.js

@@ -1,16 +1,14 @@
+import { LABEL_POSITION_FIELDS } from '../common/main'
+
 export const TEXTAREA_MAIN_FIELDS = [
   { name: 'key', label: 'Key', type: 'expression' },
   { name: 'label', label: 'Label', type: 'expression' },
+  ...LABEL_POSITION_FIELDS,
   { name: 'value', label: 'Value', type: 'expression' },
   { name: 'placeholder', label: 'Placeholder', type: 'text' },
   { name: 'rows', label: 'Rows', type: 'number', defaultValue: 4 },
   { name: 'maxRows', label: 'Max Rows', type: 'number' },
-  {
-    name: 'size',
-    label: 'Size',
-    type: 'select',
-    options: ['small', 'medium', 'large']
-  },
+  { name: 'size', label: 'Size', type: 'select', options: ['small', 'medium', 'large'] },
   { name: 'disabled', label: 'Disabled', type: 'boolean' },
-  { name: 'enabled', label: 'Enabled', type: 'boolean' }
+  { name: 'enabled', label: 'Enabled', type: 'boolean' },
 ]

package/src/views/builder/inspector/definitions/time/main.js

@@ -1,18 +1,15 @@
+import { LABEL_POSITION_FIELDS } from '../common/main'
+
 export const TIME_MAIN_FIELDS = [
   { name: 'key', label: 'Key', type: 'expression' },
   { name: 'label', label: 'Label', type: 'expression' },
+  ...LABEL_POSITION_FIELDS,
   { name: 'value', label: 'Value', type: 'expression' },
   { name: 'placeholder', label: 'Placeholder', type: 'text' },
-  {
-    name: 'size',
-    label: 'Size',
-    type: 'select',
-    options: ['small', 'medium', 'large']
-  },
+  { name: 'size', label: 'Size', type: 'select', options: ['small', 'medium', 'large'] },
   { name: 'disabled', label: 'Disabled', type: 'boolean' },
   { name: 'enabled', label: 'Enabled', type: 'boolean' },
-  // Time picker-specific props
   { name: 'ampm', label: '12-Hour Format (AM/PM)', type: 'boolean' },
   { name: 'minutesStep', label: 'Minutes Step', type: 'expression', placeholder: '1' },
-  { name: 'readOnly', label: 'Read Only', type: 'boolean' }
+  { name: 'readOnly', label: 'Read Only', type: 'boolean' },
 ]

package/src/views/builder/inspector/definitions/toggle/main.js

@@ -1,26 +1,12 @@
+import { LABEL_POSITION_FIELDS } from '../common/main'
+
 export const TOGGLE_MAIN_FIELDS = [
   { name: 'key', label: 'Key', type: 'expression' },
   { name: 'label', label: 'Label', type: 'expression' },
+  ...LABEL_POSITION_FIELDS,
   { name: 'value', label: 'Value', type: 'expression' },
-  {
-    name: 'size',
-    label: 'Size',
-    type: 'select',
-    options: ['small', 'medium', 'large']
-  },
-  {
-    name: 'color',
-    label: 'Color',
-    type: 'select',
-    options: ['default', 'primary', 'secondary', 'error', 'warning', 'info', 'success']
-  },
+  { name: 'size', label: 'Size', type: 'select', options: ['small', 'medium', 'large'] },
+  { name: 'color', label: 'Color', type: 'select', options: ['default', 'primary', 'secondary', 'error', 'warning', 'info', 'success'] },
   { name: 'disabled', label: 'Disabled', type: 'boolean' },
   { name: 'enabled', label: 'Enabled', type: 'boolean' },
-  // Toggle-specific props
-  {
-    name: 'labelPlacement',
-    label: 'Label Placement',
-    type: 'select',
-    options: ['end', 'start', 'top', 'bottom']
-  }
 ]

package/src/views/builder/inspector/definitions/treeView/main.js

@@ -0,0 +1,61 @@
+export const TREE_VIEW_MAIN_FIELDS = [
+  // ── Data ──────────────────────────────────────────────────────────────────
+  {
+    name: 'data_note', type: 'note', label: 'Data',
+    text: 'Accepts flat (parentId) or nested (children) arrays — auto-detected.',
+  },
+  { name: 'dataKey',        label: 'Data Key',         type: 'expression' },
+  { name: 'idField',        label: 'ID Field',         type: 'expression' },
+  { name: 'labelField',     label: 'Label Field',      type: 'expression' },
+  { name: 'childrenField',  label: 'Children Field',   type: 'expression' },
+  { name: 'parentIdField',  label: 'Parent ID Field',  type: 'expression' },
+
+  // ── Lazy loading ──────────────────────────────────────────────────────────
+  {
+    name: 'lazy_note', type: 'note', label: 'Lazy Loading',
+    text: 'Set hasChildrenField to a boolean flag on each node (e.g. "hasChildren"). When a flagged node is expanded onExpandCode runs — fetch children there and update data[dataKey].',
+  },
+  { name: 'hasChildrenField', label: 'Has-Children Flag Field', type: 'expression' },
+  { name: 'onExpandCode',     label: 'On Expand (lazy load)',   type: 'code', codeType: 'action' },
+
+  // ── Selection ─────────────────────────────────────────────────────────────
+  { name: 'sel_note', type: 'note', label: 'Selection', text: 'Selected node(s) are written to data[selectedKey].' },
+  { name: 'selectedKey',       label: 'Selected Key',      type: 'expression' },
+  { name: 'selectable',        label: 'Selectable',        type: 'boolean' },
+  { name: 'multiSelect',       label: 'Multi Select',      type: 'boolean' },
+  { name: 'checkboxSelection', label: 'Checkboxes',        type: 'boolean' },
+  { name: 'onSelectCode',      label: 'On Select',         type: 'code', codeType: 'action' },
+
+  // ── Icons ─────────────────────────────────────────────────────────────────
+  {
+    name: 'icon_note', type: 'note', label: 'Icons',
+    text: 'iconField: node field holding a MUI icon name.\ndefaultIcon: fallback icon for all nodes.\nleafIcon: icon used when node has no children.',
+  },
+  { name: 'iconField',    label: 'Icon Field',    type: 'expression' },
+  { name: 'defaultIcon',  label: 'Default Icon',  type: 'expression' },
+  { name: 'leafIcon',     label: 'Leaf Icon',     type: 'expression' },
+
+  // ── Expand behaviour ──────────────────────────────────────────────────────
+  { name: 'expandAll',      label: 'Expand All by Default', type: 'boolean' },
+  { name: 'defaultExpanded',label: 'Default Expanded IDs',  type: 'expression' },
+
+  // ── Search ────────────────────────────────────────────────────────────────
+  { name: 'showSearch',         label: 'Show Search',         type: 'boolean' },
+  { name: 'searchPlaceholder',  label: 'Search Placeholder',  type: 'expression' },
+
+  // ── Appearance ────────────────────────────────────────────────────────────
+  { name: 'dense',       label: 'Dense',           type: 'boolean' },
+  { name: 'showLines',   label: 'Show Lines',       type: 'boolean' },
+  { name: 'showCount',   label: 'Show Child Count', type: 'boolean' },
+  { name: 'indent',      label: 'Indent (px)',       type: 'expression' },
+  { name: 'height',      label: 'Height (px)',       type: 'expression' },
+  { name: 'fontSize',    label: 'Font Size',         type: 'expression' },
+  { name: 'nodeColor',   label: 'Node Color',        type: 'expression' },
+  { name: 'selectedBg',  label: 'Selected BG',       type: 'expression' },
+  { name: 'selectedColor', label: 'Selected Text Color', type: 'expression' },
+  { name: 'hoverBg',     label: 'Hover BG',          type: 'expression' },
+  { name: 'borderRadius',label: 'Border Radius',     type: 'expression' },
+
+  // ── Row actions ───────────────────────────────────────────────────────────
+  { name: 'actionsConfig', label: 'Node Actions', type: 'actions-config-editor', context: 'treeViewAction' },
+]

package/src/views/builder/inspector/definitions/viewRenderer/main.js

@@ -0,0 +1,53 @@
+export const VIEW_RENDERER_MAIN_FIELDS = [
+  // ── Identity ───────────────────────────────────────────────────────────────
+  { name: 'key',         label: 'Key',          type: 'expression' },
+
+  // ── View to load ──────────────────────────────────────────────────────────
+  // Numeric ID returned by UiBuilderModule/View/GetViewDetails.
+  { name: 'viewId',      label: 'View ID',      type: 'expression' },
+
+  // ── Reload trigger ────────────────────────────────────────────────────────
+  // When this expression's value changes (e.g. a counter, a form field value),
+  // the view schema is re-fetched and the child is remounted.
+  { name: 'refreshKey',  label: 'Refresh Key',  type: 'expression' },
+
+  // ── Data seeding ──────────────────────────────────────────────────────────
+  // Object expression whose value is merged into the child view's data state
+  // when it first loads (and whenever refreshKey fires).
+  // Example: { userId: form.userId, mode: 'edit' }
+  { name: 'initialData', label: 'Initial Data', type: 'expression' },
+
+  // Reactive data pushed into the child view on every parent re-render.
+  // Unlike initialData (one-time seed), externalData merges into the child
+  // state on every expression change — great for passing live parent state.
+  // Example: { selectedRow: data.selectedRow }
+  { name: 'externalData', label: 'External Data', type: 'expression' },
+
+  // ── State mode ────────────────────────────────────────────────────────────
+  // true  (default) → child has its own data/form stores (fully isolated)
+  // false           → child shares the parent page's setData/data/form
+  //                   (useful for sub-forms whose fields need to appear in
+  //                    the parent's form submit)
+  { name: 'isolated',    label: 'Isolated State', type: 'boolean' },
+
+  // ── Height mode ───────────────────────────────────────────────────────────
+  // auto  — wraps content; minHeight is the floor
+  // full  — stretches to fill the parent flex container (use inside a
+  //         container set to flex + full height)
+  // fixed — exact pixel height; content scrolls inside
+  {
+    name: 'heightMode',
+    label: 'Height Mode',
+    type: 'select',
+    options: ['auto', 'full', 'fixed'],
+  },
+  // Used when heightMode === 'fixed'. Value in pixels.
+  { name: 'height',      label: 'Height (px)',  type: 'number' },
+  // Used when heightMode === 'auto'. Sets the minimum height floor.
+  { name: 'minHeight',   label: 'Min Height (px)', type: 'number' },
+
+  // ── Layout / decoration ───────────────────────────────────────────────────
+  { name: 'title',       label: 'Title',        type: 'expression' },
+  { name: 'showBorder',  label: 'Show Border',  type: 'boolean' },
+  { name: 'showRefresh', label: 'Show Refresh', type: 'boolean' },
+]

package/src/views/builder/inspector/definitions/wizard/main.js

@@ -0,0 +1,68 @@
+export const WIZARD_MAIN_FIELDS = [
+  { name: 'key',          label: 'Key',          type: 'expression' },
+
+  // ── Layout ────────────────────────────────────────────────────────────────
+  {
+    name: 'orientation',
+    label: 'Orientation',
+    type: 'select',
+    options: ['horizontal', 'vertical'],
+  },
+  {
+    name: 'variant',
+    label: 'Step Variant',
+    type: 'select',
+    options: ['standard', 'alternativeLabel'],
+  },
+
+  // ── Behaviour ─────────────────────────────────────────────────────────────
+  // linear: user must complete steps in order (default true).
+  // non-linear: any step label is clickable.
+  { name: 'linear',          label: 'Linear (sequential)', type: 'boolean' },
+  { name: 'hideNavigation',  label: 'Hide Nav Buttons',    type: 'boolean' },
+
+  // ── Controlled step ────────────────────────────────────────────────────────
+  // When set, the active step is driven by this expression (e.g. data.currentStep).
+  // Leave blank for internal uncontrolled state.
+  { name: 'activeStep',  label: 'Active Step (controlled)', type: 'expression' },
+
+  // ── Nav button labels ──────────────────────────────────────────────────────
+  { name: 'backLabel',   label: 'Back Label',   type: 'expression' },
+  { name: 'nextLabel',   label: 'Next Label',   type: 'expression' },
+  { name: 'finishLabel', label: 'Finish Label', type: 'expression' },
+
+  // ── Nav button appearance ─────────────────────────────────────────────────
+  {
+    name: 'nextColor',
+    label: 'Next Color',
+    type: 'select',
+    options: ['primary', 'secondary', 'success', 'error', 'warning', 'info', 'inherit'],
+  },
+  {
+    name: 'nextVariant',
+    label: 'Next Variant',
+    type: 'select',
+    options: ['text', 'outlined', 'contained'],
+  },
+  {
+    name: 'backColor',
+    label: 'Back Color',
+    type: 'select',
+    options: ['primary', 'secondary', 'success', 'error', 'warning', 'info', 'inherit'],
+  },
+  {
+    name: 'backVariant',
+    label: 'Back Variant',
+    type: 'select',
+    options: ['text', 'outlined', 'contained'],
+  },
+
+  // ── Lifecycle hooks ────────────────────────────────────────────────────────
+  // onStepChange — called whenever the active step changes.
+  //   extraVars: { from, to, direction ('next'|'back'|'jump'), goToStep, nextStep, prevStep }
+  { name: 'onStepChange', label: 'On Step Change', type: 'code' },
+
+  // onFinish — called when the user clicks Finish on the last step.
+  //   extraVars: { goToStep, nextStep, prevStep }
+  { name: 'onFinish',     label: 'On Finish',      type: 'code' },
+]

package/src/views/builder/inspector/definitions/wizard-step/main.js

@@ -0,0 +1,25 @@
+export const WIZARD_STEP_MAIN_FIELDS = [
+  { name: 'key',         label: 'Key',         type: 'expression' },
+  { name: 'label',       label: 'Label',       type: 'expression' },
+  // Short subtitle shown below the step label in the stepper header
+  { name: 'description', label: 'Description', type: 'expression' },
+
+  // ── State expressions ──────────────────────────────────────────────────────
+  // optional: shows "(Optional)" below the step label
+  { name: 'optional',   label: 'Optional',   type: 'boolean' },
+  // completed: expression — true marks the step with a checkmark
+  { name: 'completed',  label: 'Completed',  type: 'expression' },
+  // error: expression — true marks the step in the error state
+  { name: 'error',      label: 'Error',      type: 'expression' },
+
+  // ── Lifecycle hooks ────────────────────────────────────────────────────────
+  // onEnter — called when this step becomes active.
+  //   extraVars: { stepIndex, goToStep, nextStep, prevStep }
+  { name: 'onEnter', label: 'On Enter', type: 'code' },
+
+  // onNext — called before leaving this step by clicking Next.
+  //   Return true/undefined to allow, false to silently block,
+  //   or a string to block and display as an error message.
+  //   extraVars: { stepIndex, goToStep, nextStep, prevStep }
+  { name: 'onNext',  label: 'On Next (validate)', type: 'code' },
+]