@nuraly/runtime 0.1.7 → 0.1.8

package/components/ui/components/inputs/Textarea/Textarea.ts

@@ -25,39 +25,39 @@ export class TextareaBlock extends BaseElementBlock {
 
   renderComponent() {
     const textareaStyles = this.component?.style || {};
-    
-    // Get properties from input or inputHandlers
-    const value = this.component?.input?.value?.value || this.inputHandlersValue?.value || '';
-    const placeholder = this.component?.input?.placeholder?.value || this.inputHandlersValue?.placeholder || '';
-    const label = this.component?.input?.label?.value || this.inputHandlersValue?.label || '';
-    const helperText = this.component?.input?.helperText?.value || this.inputHandlersValue?.helperText || '';
-    const disabled = this.component?.input?.disabled?.value ?? this.inputHandlersValue?.disabled ?? false;
-    const readonly = this.component?.input?.readonly?.value ?? this.inputHandlersValue?.readonly ?? false;
-    const required = this.component?.input?.required?.value ?? this.inputHandlersValue?.required ?? false;
-    const allowClear = this.component?.input?.allowClear?.value ?? this.inputHandlersValue?.allowClear ?? false;
-    const showCount = this.component?.input?.showCount?.value ?? this.inputHandlersValue?.showCount ?? false;
-    const autoResize = this.component?.input?.autoResize?.value ?? this.inputHandlersValue?.autoResize ?? false;
-    
+
+    // Get properties from inputHandlersValue (evaluated handlers) - prioritize over raw input values
+    const value = this.inputHandlersValue?.value ?? '';
+    const placeholder = this.inputHandlersValue?.placeholder ?? '';
+    const label = this.inputHandlersValue?.label ?? '';
+    const helperText = this.inputHandlersValue?.helperText ?? this.inputHandlersValue?.helper ?? '';
+    const disabled = this.inputHandlersValue?.disabled ?? (this.inputHandlersValue?.state === 'disabled' || false);
+    const readonly = this.inputHandlersValue?.readonly ?? false;
+    const required = this.inputHandlersValue?.required ?? false;
+    const allowClear = this.inputHandlersValue?.allowClear ?? false;
+    const showCount = this.inputHandlersValue?.showCount ?? false;
+    const autoResize = this.inputHandlersValue?.autoResize ?? false;
+
     // Get styling properties
-    const size = this.component?.input?.size?.value || this.inputHandlersValue?.size || 'medium';
-    const variant = this.component?.input?.variant?.value || this.inputHandlersValue?.variant || 'underlined';
-    const state = this.component?.input?.state?.value || this.inputHandlersValue?.state || 'default';
-    const resize = this.component?.input?.resize?.value || this.inputHandlersValue?.resize || 'vertical';
-    
+    const size = this.inputHandlersValue?.size ?? 'medium';
+    const variant = this.inputHandlersValue?.variant ?? '';
+    const state = this.inputHandlersValue?.state ?? 'default';
+    const resize = this.inputHandlersValue?.resize ?? 'vertical';
+
     // Get numeric properties
-    const rows = this.component?.input?.rows?.value || this.inputHandlersValue?.rows || 4;
-    const cols = this.component?.input?.cols?.value || this.inputHandlersValue?.cols;
-    const maxLength = this.component?.input?.maxLength?.value || this.inputHandlersValue?.maxLength;
-    const minHeight = this.component?.input?.minHeight?.value || this.inputHandlersValue?.minHeight;
-    const maxHeight = this.component?.input?.maxHeight?.value || this.inputHandlersValue?.maxHeight;
-    
+    const rows = this.inputHandlersValue?.rows ?? 4;
+    const cols = this.inputHandlersValue?.cols;
+    const maxLength = this.inputHandlersValue?.maxLength;
+    const minHeight = this.inputHandlersValue?.minHeight;
+    const maxHeight = this.inputHandlersValue?.maxHeight;
+
     // Get validation rules and other properties
-    const rules = this.inputHandlersValue?.rules || [];
-    const name = this.component?.input?.name?.value || this.inputHandlersValue?.name;
-    const autocomplete = this.component?.input?.autocomplete?.value || this.inputHandlersValue?.autocomplete || 'off';
-    const validateOnChange = this.component?.input?.validateOnChange?.value ?? this.inputHandlersValue?.validateOnChange ?? true;
-    const validateOnBlur = this.component?.input?.validateOnBlur?.value ?? this.inputHandlersValue?.validateOnBlur ?? true;
-    const hasFeedback = this.component?.input?.hasFeedback?.value ?? this.inputHandlersValue?.hasFeedback ?? false;
+    const rules = this.inputHandlersValue?.rules ?? [];
+    const name = this.inputHandlersValue?.name;
+    const autocomplete = this.inputHandlersValue?.autocomplete ?? 'off';
+    const validateOnChange = this.inputHandlersValue?.validateOnChange ?? true;
+    const validateOnBlur = this.inputHandlersValue?.validateOnBlur ?? true;
+    const hasFeedback = this.inputHandlersValue?.hasFeedback ?? false;
 
     return html`
       <nr-textarea

package/components/ui/components/inputs/UsersDropdown/UsersDropdown.ts

@@ -23,7 +23,7 @@ export class UsersDropdownBlock extends BaseElementBlock {
       <nr-dropdown
         trigger=${this.inputHandlersValue?.trigger ?? nothing}
         .options=${this.inputHandlersValue?.users ?? []}
-        @click-item=${(e: CustomEvent) => console.log("value clicked", e.detail)}
+        @click-item=${(e: CustomEvent) => this.executeEvent('onClickItem', e, { value: e.detail })}
       >
         <nr-image
           .src="${this.inputHandlersValue?.userImage ?? nothing}"

package/components/ui/components/layout/Card/Card.ts

@@ -1,11 +1,16 @@
-import { css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
+import { classMap } from "lit/directives/class-map.js";
 import { type ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
+import { $components } from '../../../../../redux/store/component/store.ts';
 import { BaseElementBlock } from "../../base/BaseElement.ts";
 import { ref } from "lit/directives/ref.js";
+import { renderComponent } from '../../../../../utils/render-util';
+import { setCurrentComponentIdAction } from '../../../../../redux/actions/component/setCurrentComponentIdAction.ts';
+import { setContextMenuEvent } from '../../../../../redux/actions/page/setContextMenuEvent.ts';
+import { RuntimeHelpers } from '../../../../../utils/runtime-helpers.ts';
 
-// Safely import @nuralyui/card
 try {
   await import("@nuralyui/card");
 } catch (error) {
@@ -23,7 +28,34 @@ export class CardBlock extends BaseElementBlock {
   @property({ type: Object })
   item: any;
 
-  renderComponent() {
+  @property({ type: Boolean })
+  isViewMode = false;
+
+  @state()
+  childrenComponents: ComponentElement[] = [];
+
+  @state()
+  dragOverSituation = false;
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.updateChildrenComponents();
+  }
+
+  override willUpdate(changedProperties: Map<string, any>) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("component")) {
+      this.updateChildrenComponents();
+    }
+  }
+
+  private updateChildrenComponents(): void {
+    this.childrenComponents = this.component?.childrenIds?.map((id) => {
+      return $components.get()[this.component?.application_id]?.find((component) => component.uuid === id);
+    }) ?? [];
+  }
+
+  renderView() {
     const cardStyles = this.component?.style || {};
     
     // Get properties from input or inputHandlers
@@ -35,19 +67,89 @@ export class CardBlock extends BaseElementBlock {
 
     return html`
       <nr-card
+        id=${this.inputHandlersValue.id ?? nothing}
         ${ref(this.inputRef)}
-        style=${styleMap(cardStyles)}
-        .title=${title}
+        data-component-uuid=${this.component?.uuid}
+        data-component-name=${this.component?.name}
+        style=${styleMap({
+          "width": RuntimeHelpers.extractUnit(cardStyles?.width) === "%" ? "100%" : cardStyles?.width ?? "auto",
+          ...cardStyles
+        })}
+        class=${classMap({
+          "drag-over": this.dragOverSituation,
+        })}
+        .header=${title}
         .size=${size}
         ?bordered=${bordered}
         ?hoverable=${hoverable}
         ?loading=${loading}
-        @click=${(e: MouseEvent) => {
-          this.executeEvent('onClick', e);
-        }}
+        @mouseenter="${(e: Event) => this.executeEvent("onMouseEnter", {...e, unique: this.uniqueUUID})}"
+        @mouseleave="${(e: Event) => this.executeEvent("onMouseLeave", {...e, unique: this.uniqueUUID})}"
+        @click=${(e: MouseEvent) => this.executeEvent('onClick', e)}
       >
-        <slot></slot>
+        <div slot="content">
+          ${this.childrenComponents.length
+            ? renderComponent(this.childrenComponents.map((component) => ({ ...component, item: this.item })), this.item, this.isViewMode, {...this.component, uniqueUUID: this.uniqueUUID})
+            : nothing}
+        </div>
       </nr-card>
     `;
   }
+
+  override renderComponent() {
+    const cardStyles = this.component?.style || {};
+    
+    // Get properties from input or inputHandlers
+    const title = this.component?.input?.title?.value || this.inputHandlersValue?.title || '';
+    const bordered = this.component?.input?.bordered?.value ?? this.inputHandlersValue?.bordered ?? true;
+    const hoverable = this.component?.input?.hoverable?.value ?? this.inputHandlersValue?.hoverable ?? false;
+    const loading = this.component?.input?.loading?.value ?? this.inputHandlersValue?.loading ?? false;
+    const size = this.component?.input?.size?.value || this.inputHandlersValue?.size || 'default';
+
+    return html`
+      ${this.isViewMode
+        ? this.renderView()
+        : html`
+            <nr-card
+              ${ref(this.inputRef)}
+              data-component-uuid=${this.component?.uuid}
+              data-component-name=${this.component?.name}
+              style=${styleMap(cardStyles)}
+              class=${classMap({
+                "drag-over": this.dragOverSituation,
+              })}
+              .header=${title}
+              .size=${size}
+              ?bordered=${bordered}
+              ?hoverable=${hoverable}
+              ?loading=${loading}
+              @click=${(e: MouseEvent) => {
+                setContextMenuEvent(null);
+                this.executeEvent('onClick', e);
+              }}
+            >
+              <div slot="content" style=${styleMap({ "min-height": this.childrenComponents.length ? "auto" : "100px" })}>
+                ${this.childrenComponents.length
+                  ? renderComponent(this.childrenComponents.map((component) => ({ ...component, item: this.item })), this.item, this.isViewMode, {...this.component, uniqueUUID: this.uniqueUUID})
+                  : html`
+                      <div
+                        style="padding: 20px; text-align: center; color: #999;"
+                        @click="${() => setCurrentComponentIdAction(this.component?.uuid)}"
+                      >
+                        Add or Drag an item into this card
+                        <drag-wrapper
+                          .where=${"inside"}
+                          .message=${"Drop inside"}
+                          .component=${{ ...this.component }}
+                          .inputRef=${this.inputRef}
+                          .isDragInitiator=${this.isDragInitiator}
+                        >
+                        </drag-wrapper>
+                      </div>
+                    `}
+              </div>
+            </nr-card>
+          `}
+    `;
+  }
 }

package/components/ui/components/layout/Containers/Container.style.ts

@@ -31,4 +31,22 @@ export default css`
     width: 100%;
     height:100%
   }
+
+  .container-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #64748b;
+    min-height: 200px;
+    width: 100%;
+    border-radius: 8px;
+    border: 2px dashed #cbd5e1;
+    gap: 12px;
+    cursor: pointer;
+  }
+
+  .container-placeholder nr-icon {
+    --nuraly-icon-size: 48px;
+  }
 `;

package/components/ui/components/layout/Containers/Container.ts

@@ -30,8 +30,8 @@ export class VerticalContainer extends BaseElementBlock {
 
   isDragging: boolean;
 
-  override async connectedCallback() {
-    await super.connectedCallback();
+  override connectedCallback() {
+    super.connectedCallback();
     this.updateChildrenComponents();
   }
 
@@ -72,7 +72,12 @@ export class VerticalContainer extends BaseElementBlock {
       >
         ${this.childrenComponents.length
           ? renderComponent(this.childrenComponents.map((component) => ({ ...component, item: this.item })), this.item, this.isViewMode, {...this.component, uniqueUUID : this.uniqueUUID})
-          : nothing}
+          : html`
+              <div class="container-placeholder">
+                <nr-icon name="layout-grid"></nr-icon>
+                <nr-label>No content</nr-label>
+              </div>
+            `}
       </div>
     `;
   }
@@ -106,10 +111,11 @@ export class VerticalContainer extends BaseElementBlock {
                 ? renderComponent(this.childrenComponents.map((component) => ({ ...component, item: this.item })), this.item, this.isViewMode, {...this.component, uniqueUUID : this.uniqueUUID})
                 : html`
                     <div
-                      class="empty-message"
+                      class="container-placeholder"
                       @click="${() => setCurrentComponentIdAction(this.component?.uuid)}"
                     >
-                      Add or Drag an item into this container
+                      <nr-icon name="layout-grid"></nr-icon>
+                      <nr-label>Add or drag an item into this container</nr-label>
                       <drag-wrapper
                         .where=${"inside"}
                         .message=${"Drop inside"}

package/components/ui/components/layout/Grid/Col.style.ts

@@ -0,0 +1,27 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+  }
+
+  .grid-col {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 1px;
+  }
+
+  .empty-message {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    min-height: 60px;
+    border: 1px dashed #ccc;
+    color: #999;
+    font-size: 12px;
+    position: relative;
+    background: rgba(0, 0, 0, 0.02);
+  }
+`;

package/components/ui/components/layout/Grid/Col.ts

@@ -0,0 +1,209 @@
+/**
+ * @file Col.ts
+ * @description Grid Column component that wraps nr-col from @nuralyui/grid
+ */
+
+import { type ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
+import { $components } from '../../../../../redux/store/component/store.ts';
+import { html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { renderComponent } from '../../../../../utils/render-util';
+import { createRef, ref } from "lit/directives/ref.js";
+import styles from "./Col.style.ts";
+import { BaseElementBlock } from "../../base/BaseElement.ts";
+import { setCurrentComponentIdAction } from '../../../../../redux/actions/component/setCurrentComponentIdAction.ts';
+import { setContextMenuEvent } from '../../../../../redux/actions/page/setContextMenuEvent.ts';
+
+// Import nr-col from nuralyui grid
+import "@nuralyui/grid";
+
+/** Input property names that trigger re-render */
+const COL_INPUT_PROPS = ['span', 'offset', 'order', 'pull', 'push', 'flex', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const;
+
+/** Parsed column properties for rendering */
+interface ColProps {
+  span: number | undefined;
+  offset: number;
+  order: number | undefined;
+  pull: number;
+  push: number;
+  flex: string;
+  xs: number | object | undefined;
+  sm: number | object | undefined;
+  md: number | object | undefined;
+  lg: number | object | undefined;
+  xl: number | object | undefined;
+  xxl: number | object | undefined;
+}
+
+@customElement("grid-col-block")
+export class GridCol extends BaseElementBlock {
+  static styles = styles;
+
+  @property({ type: Object }) component: ComponentElement;
+  @property({ type: Object }) item: any;
+  @property({ type: Boolean }) isViewMode = false;
+
+  @state() childrenComponents: ComponentElement[] = [];
+  @state() containerRef = createRef();
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.updateChildrenComponents();
+
+    // Register callbacks for input changes to trigger re-render
+    COL_INPUT_PROPS.forEach(prop => this.registerCallback(prop, () => this.requestUpdate()));
+  }
+
+  override willUpdate(changedProperties: Map<string, any>) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("component")) {
+      this.updateChildrenComponents();
+    }
+  }
+
+  private updateChildrenComponents(): void {
+    this.childrenComponents = this.component?.childrenIds?.map((id) => {
+      return $components.get()[this.component?.application_id]?.find((component) => component.uuid === id);
+    }).filter(Boolean) ?? [];
+  }
+
+  /**
+   * Parse numeric value from input (handles string or number)
+   */
+  private parseNumeric(value: any, defaultValue?: number): number | undefined {
+    if (value === undefined || value === null || value === '') return defaultValue;
+    const num = Number(value);
+    return isNaN(num) ? defaultValue : num;
+  }
+
+  /**
+   * Parse responsive breakpoint value
+   * Can be a number or an object { span, offset, order, pull, push }
+   */
+  private parseBreakpoint(value: any): number | object | undefined {
+    if (value === undefined || value === null || value === '') return undefined;
+    if (typeof value === 'number') return value;
+    if (typeof value === 'string' && !isNaN(Number(value))) return Number(value);
+    if (typeof value === 'object') return value;
+    return undefined;
+  }
+
+  /**
+   * Get all column properties from input handlers
+   */
+  private getColProps(): ColProps {
+    const input = this.inputHandlersValue;
+    return {
+      span: this.parseNumeric(input?.span),
+      offset: this.parseNumeric(input?.offset, 0)!,
+      order: this.parseNumeric(input?.order),
+      pull: this.parseNumeric(input?.pull, 0)!,
+      push: this.parseNumeric(input?.push, 0)!,
+      flex: input?.flex || '',
+      xs: this.parseBreakpoint(input?.xs),
+      sm: this.parseBreakpoint(input?.sm),
+      md: this.parseBreakpoint(input?.md),
+      lg: this.parseBreakpoint(input?.lg),
+      xl: this.parseBreakpoint(input?.xl),
+      xxl: this.parseBreakpoint(input?.xxl),
+    };
+  }
+
+  /**
+   * Render children components
+   */
+  private renderChildren() {
+    return this.childrenComponents.length
+      ? renderComponent(
+          this.childrenComponents.map((component) => ({ ...component, item: this.item })),
+          this.item,
+          this.isViewMode,
+          { ...this.component, uniqueUUID: this.uniqueUUID }
+        )
+      : nothing;
+  }
+
+  /**
+   * Render empty state placeholder for editor mode
+   */
+  private renderEmptyState() {
+    return html`
+      <div
+        class="empty-message"
+        @click="${() => setCurrentComponentIdAction(this.component?.uuid)}"
+      >
+        Drop content here
+        <drag-wrapper
+          .where=${"inside"}
+          .message=${"Drop inside"}
+          .component=${{ ...this.component }}
+          .inputRef=${this.inputRef}
+          .isDragInitiator=${this.isDragInitiator}
+        >
+        </drag-wrapper>
+      </div>
+    `;
+  }
+
+  override renderComponent() {
+    const props = this.getColProps();
+
+    if (this.isViewMode) {
+      return html`
+        <nr-col
+          ${ref(this.inputRef)}
+          data-component-uuid=${this.component?.uuid}
+          data-component-name=${this.component?.name}
+          style=${styleMap(this.getStyles())}
+          span=${props.span ?? nothing}
+          offset=${props.offset}
+          order=${props.order ?? nothing}
+          pull=${props.pull}
+          push=${props.push}
+          flex=${props.flex || nothing}
+          .xs=${props.xs}
+          .sm=${props.sm}
+          .md=${props.md}
+          .lg=${props.lg}
+          .xl=${props.xl}
+          .xxl=${props.xxl}
+        >
+          ${this.renderChildren()}
+        </nr-col>
+      `;
+    }
+
+    return html`
+      <nr-col
+        ${ref(this.inputRef)}
+        ${ref(this.containerRef)}
+        data-component-uuid=${this.component?.uuid}
+        data-component-name=${this.component?.name}
+        @click="${(e: Event) => {
+          setContextMenuEvent(null);
+          this.executeEvent("onClick", e);
+        }}"
+        style=${styleMap({
+          ...this.getStyles(),
+          "min-height": this.childrenComponents.length ? "auto" : "60px",
+        })}
+        span=${props.span ?? nothing}
+        offset=${props.offset}
+        order=${props.order ?? nothing}
+        pull=${props.pull}
+        push=${props.push}
+        flex=${props.flex || nothing}
+        .xs=${props.xs}
+        .sm=${props.sm}
+        .md=${props.md}
+        .lg=${props.lg}
+        .xl=${props.xl}
+        .xxl=${props.xxl}
+      >
+        ${this.childrenComponents.length ? this.renderChildren() : this.renderEmptyState()}
+      </nr-col>
+    `;
+  }
+}

package/components/ui/components/layout/Grid/Row.style.ts

@@ -0,0 +1,73 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .grid-row {
+    display: flex;
+    flex-flow: row wrap;
+    min-width: 0;
+    width: 100%;
+  }
+
+  .grid-row.no-wrap {
+    flex-wrap: nowrap;
+  }
+
+  /* Alignment */
+  .grid-row.align-top {
+    align-items: flex-start;
+  }
+
+  .grid-row.align-middle {
+    align-items: center;
+  }
+
+  .grid-row.align-bottom {
+    align-items: flex-end;
+  }
+
+  .grid-row.align-stretch {
+    align-items: stretch;
+  }
+
+  /* Justify */
+  .grid-row.justify-start {
+    justify-content: flex-start;
+  }
+
+  .grid-row.justify-end {
+    justify-content: flex-end;
+  }
+
+  .grid-row.justify-center {
+    justify-content: center;
+  }
+
+  .grid-row.justify-space-around {
+    justify-content: space-around;
+  }
+
+  .grid-row.justify-space-between {
+    justify-content: space-between;
+  }
+
+  .grid-row.justify-space-evenly {
+    justify-content: space-evenly;
+  }
+
+  .empty-message {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    min-height: 100px;
+    border: 2px dashed #ccc;
+    color: #999;
+    font-size: 14px;
+    position: relative;
+  }
+`;