@nuraly/runtime 0.1.7 → 0.1.9

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

@@ -0,0 +1,170 @@
+/**
+ * @file Row.ts
+ * @description Grid Row component that wraps nr-row 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 "./Row.style.ts";
+import { BaseElementBlock } from "../../base/BaseElement.ts";
+import { setCurrentComponentIdAction } from '../../../../../redux/actions/component/setCurrentComponentIdAction.ts';
+import { setContextMenuEvent } from '../../../../../redux/actions/page/setContextMenuEvent.ts';
+
+// Safely import nr-row from nuralyui grid
+try {
+  await import("@nuralyui/grid");
+} catch (error) {
+  console.warn('[@nuralyui/grid] Package not found or failed to load.');
+}
+
+/** Input property names that trigger re-render */
+const ROW_INPUT_PROPS = ['gutter', 'align', 'justify', 'wrap'] as const;
+
+/** Parsed row properties for rendering */
+interface RowProps {
+  gutter: number | number[] | object;
+  align: string;
+  justify: string;
+  wrap: boolean;
+}
+
+@customElement("grid-row-block")
+export class GridRow 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
+    ROW_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 gutter value - supports number, [h, v] array, or responsive object
+   */
+  private parseGutter(gutter: any): number | number[] | object {
+    if (!gutter) return 0;
+    if (typeof gutter === 'number' || Array.isArray(gutter)) return gutter;
+    if (typeof gutter === 'string' && !isNaN(Number(gutter))) return Number(gutter);
+    return gutter;
+  }
+
+  /**
+   * Get all row properties from input handlers
+   */
+  private getRowProps(): RowProps {
+    const input = this.inputHandlersValue;
+    return {
+      gutter: this.parseGutter(input?.gutter),
+      align: input?.align || '',
+      justify: input?.justify || '',
+      wrap: input?.wrap !== false,
+    };
+  }
+
+  /**
+   * 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)}"
+      >
+        Add Grid Columns (nr-col) to this row
+        <drag-wrapper
+          .where=${"inside"}
+          .message=${"Drop inside"}
+          .component=${{ ...this.component }}
+          .inputRef=${this.inputRef}
+          .isDragInitiator=${this.isDragInitiator}
+        >
+        </drag-wrapper>
+      </div>
+    `;
+  }
+
+  override renderComponent() {
+    const props = this.getRowProps();
+
+    if (this.isViewMode) {
+      return html`
+        <nr-row
+          ${ref(this.inputRef)}
+          data-component-uuid=${this.component?.uuid}
+          data-component-name=${this.component?.name}
+          style=${styleMap(this.getStyles())}
+          .gutter=${props.gutter}
+          align=${props.align || nothing}
+          justify=${props.justify || nothing}
+          ?wrap=${props.wrap}
+        >
+          ${this.renderChildren()}
+        </nr-row>
+      `;
+    }
+
+    return html`
+      <nr-row
+        ${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" : "100px",
+        })}
+        .gutter=${props.gutter}
+        align=${props.align || nothing}
+        justify=${props.justify || nothing}
+        ?wrap=${props.wrap}
+      >
+        ${this.childrenComponents.length ? this.renderChildren() : this.renderEmptyState()}
+      </nr-row>
+    `;
+  }
+}

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

@@ -0,0 +1,7 @@
+/**
+ * @file index.ts
+ * @description Grid layout components - Row and Col
+ */
+
+export { GridRow } from './Row.ts';
+export { GridCol } from './Col.ts';

package/components/ui/components/layout/Panel/Panel.ts

@@ -32,8 +32,8 @@ export class PanelBlock extends BaseElementBlock {
   @state()
   childrenComponents: ComponentElement[] = [];
 
-  override async connectedCallback() {
-    await super.connectedCallback();
+  override connectedCallback() {
+    super.connectedCallback();
     this.updateChildrenComponents();
   }
 

package/components/ui/components/layout/Tabs/Tabs.ts

@@ -7,7 +7,6 @@ import { BaseElementBlock } from "../../base/BaseElement.ts";
 import { styleMap } from "lit/directives/style-map.js";
 import { EMPTY_STRING } from '../../../../../utils/constants.ts';
 
-// Safely import @nuralyui/tabs
 try {
   await import("@nuralyui/tabs");
 } catch (error) {

package/components/ui/components/navigation/EmbedURL/EmbedURL.ts

@@ -4,9 +4,6 @@ import { styleMap } from "lit/directives/style-map.js";
 import { ref } from "lit/directives/ref.js";
 import { BaseElementBlock } from "../../base/BaseElement.ts";
 import { type ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
-import { executeHandler } from '../../../../../state/runtime-context.ts';
-import { getNestedAttribute } from '../../../../../utils/object.utils.ts';
-import { debounce } from '../../../../../utils/time.ts';
 
 @customElement("embed-url-block")
 export class EmbedUrlBlock extends BaseElementBlock {
@@ -16,6 +13,20 @@ export class EmbedUrlBlock extends BaseElementBlock {
       height: 100%;
       border: none;
     }
+    .embed-placeholder {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: #64748b;
+      min-height: 200px;
+      border-radius: 8px;
+      border: 2px dashed #cbd5e1;
+      gap: 12px;
+    }
+    .embed-placeholder nr-icon {
+      --nuraly-icon-size: 48px;
+    }
   `];
 
   @property({ type: Object })
@@ -50,29 +61,27 @@ export class EmbedUrlBlock extends BaseElementBlock {
     });
   }
 
-  handleUrlChange = debounce((url: string) => {
-    if (this.component?.event?.valueChange) {
-      executeHandler(
-        this.component,
-        getNestedAttribute(this.component, `event.valueChange`),
-        { value: url }
-      );
-    }
-    this.resetFocusAfterInactivity();
-  }, 0);
+  private handleIframeLoad(e: Event) {
+    this.executeEvent('onLoad', e, {
+      url: this.currentUrl || this.inputHandlersValue?.url || ""
+    });
+  }
 
-  onFocus = () => {
+  private handleIframeError(e: Event) {
+    this.executeEvent('onError', e, {
+      url: this.currentUrl || this.inputHandlersValue?.url || "",
+      error: 'Failed to load iframe content'
+    });
+  }
+
+  onFocus = (e: FocusEvent) => {
     this._isUserFocused = true;
-    if (this.component?.event?.focus) {
-      executeHandler(this.component, getNestedAttribute(this.component, `event.focus`));
-    }
+    this.executeEvent('onFocus', e);
   };
 
-  onBlur = () => {
+  onBlur = (e: FocusEvent) => {
     this._isUserFocused = false;
-    if (this.component?.event?.blur) {
-      executeHandler(this.component, getNestedAttribute(this.component, `event.blur`));
-    }
+    this.executeEvent('onBlur', e);
   };
 
   private resetFocusAfterInactivity() {
@@ -89,20 +98,47 @@ export class EmbedUrlBlock extends BaseElementBlock {
   }
 
   override renderComponent() {
+    const embedStyles = this.getStyles() || {};
+    const embedStyleHandlers = this.component?.styleHandlers ? Object.fromEntries(
+      Object.entries(this.component?.styleHandlers).filter(([key, value]) => value)) : {};
+
     const url = this.currentUrl || this.inputHandlersValue?.url || "";
 
+    // Show placeholder when no URL
+    if (!url) {
+      return html`
+        <div
+          ${ref(this.inputRef)}
+          class="embed-placeholder"
+          style=${styleMap({
+            ...this.getStyles(),
+            width: embedStyleHandlers?.width || embedStyles?.width || '100%',
+            height: embedStyleHandlers?.height || embedStyles?.height || '200px',
+          })}
+          @click=${(e: MouseEvent) => this.executeEvent('onClick', e)}
+        >
+          <nr-icon name="globe"></nr-icon>
+          <nr-label>No URL provided</nr-label>
+        </div>
+      `;
+    }
+
     return html`
       <div
-      ${ref(this.inputRef)}
+        ${ref(this.inputRef)}
         tabindex="0"
         @focus=${this.onFocus}
         @blur=${this.onBlur}
+        @click=${(e: MouseEvent) => this.executeEvent('onClick', e)}
         style=${styleMap(this.getStyles())}
       >
-        ${url
-          ? html`<iframe ${ref(this.iframeRef)} src=${url}></iframe>`
-          : html`<div style="text-align:center; color:gray;">No URL provided</div>`}
+        <iframe
+          ${ref(this.iframeRef)}
+          src=${url}
+          @load=${(e: Event) => this.handleIframeLoad(e)}
+          @error=${(e: Event) => this.handleIframeError(e)}
+        ></iframe>
       </div>
     `;
   }
-}
+}

package/components/ui/components/navigation/Link/Link.ts

@@ -9,7 +9,7 @@ import { renderComponent } from '../../../../../utils/render-util';
 
 
 @customElement("link-block")
-export class DropdownBlock extends BaseElementBlock {
+export class LinkBlock extends BaseElementBlock {
     @property({ type: Object })
     component: ComponentElement;
 
@@ -18,11 +18,10 @@ export class DropdownBlock extends BaseElementBlock {
 
     constructor() {
         super();
-
     }
 
-    override async connectedCallback() {
-        await super.connectedCallback();
+    override connectedCallback() {
+        super.connectedCallback();
     }
 
     private updateChildrenComponents(): void {
@@ -42,18 +41,30 @@ export class DropdownBlock extends BaseElementBlock {
     }
 
 
-    override  renderComponent() {
+    override renderComponent() {
+        const url = this.inputHandlersValue?.url ?? '#';
+        const target = this.inputHandlersValue?.target ?? '_self';
+        const label = this.inputHandlersValue?.label ?? this.inputHandlersValue?.placeholder ?? '';
 
         return html`
-      <a  
-     
+      <a
             ${ref(this.inputRef)}
+            href=${this.isViewMode ? url : nothing}
+            target=${target}
             style=${styleMap({
-            ...this.getStyles(),
-        })} 
-        
-          @click=${(e: CustomEvent) => {
-                this.executeEvent("onClick", e)
+                ...this.getStyles(),
+            })}
+            @click=${(e: MouseEvent) => {
+                if (!this.isViewMode) {
+                    e.preventDefault();
+                }
+                this.executeEvent("onClick", e, { url, target });
+            }}
+            @mouseenter=${(e: MouseEvent) => {
+                this.executeEvent("onMouseEnter", e);
+            }}
+            @mouseleave=${(e: MouseEvent) => {
+                this.executeEvent("onMouseLeave", e);
             }}
             >
        <span>
@@ -64,8 +75,8 @@ export class DropdownBlock extends BaseElementBlock {
                 style=${styleMap({
                     "--resolved-text-label-color": this.getStyles()["title-color"],
                 })}
-                >${this.inputHandlersValue?.label ?? this.inputHandlersValue?.placeholder ?? nothing}</nr-label>
-                  
+                >${label}</nr-label>
+
                 <drag-wrapper
                         .where=${"inside"}
                         .message=${"Drop inside"}
@@ -74,10 +85,10 @@ export class DropdownBlock extends BaseElementBlock {
                         .isDragInitiator=${this.isDragInitiator}
                       >
                       </drag-wrapper>
-              
+
                   `}
        </span>
       </a>
     `;
     }
-}
+}

package/components/ui/components/navigation/Menu/Menu.ts

@@ -1,6 +1,6 @@
 import type { ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
 import { css, html } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 
 // Safely import @nuralyui/menu
 try {
@@ -10,10 +10,6 @@ try {
 }
 
 import { BaseElementBlock } from "../../base/BaseElement.ts";
-import { executeHandler } from '../../../../../state/runtime-context.ts';
-import { getNestedAttribute } from '../../../../../utils/object.utils.ts';
-import { styleMap } from "lit/directives/style-map.js";
-import { EMPTY_STRING } from '../../../../../utils/constants.ts';
 import { ref } from "lit/directives/ref.js";
 
 @customElement("menu-block")
@@ -36,63 +32,45 @@ export class MenuBlock extends BaseElementBlock {
     `
   ];
   @property({ type: Object, reflect: false })
-  component: ComponentElement;
-  @state()
-  error: string = EMPTY_STRING;
-  @state()
-  options = [
-    {
-      text: "Pages",
-      id: "pages",
-      children: []
-    }
-  ];
-  @state()
-  components: ComponentElement[] = [];
+  component!: ComponentElement;
 
   constructor() {
     super();
   }
 
-  onActionClick(e) {
-    console.log(e)
-    if (this.component?.event?.actionClick) {
-      executeHandler(this.component, getNestedAttribute(this.component, `event.actionClick`), {
-        value : e.detail.additionalData,
-        action : e.detail.value
-      })
-    }
-
-  }
-
-
   override renderComponent() {
     return html`
-      
+
         <nr-menu
                     ${ref(this.inputRef)}
+     class="${`drop-${this.component.uuid}`}"
 
-          style=${styleMap({ ...this.getStyles(), 
-            display : 'block',
-           })}
+         
           placeholder="Select an option"
           size=${this.inputHandlersValue?.size ?? 'medium'}
           arrowPosition=${this.inputHandlersValue?.arrowPosition ?? 'right'}
           .items=${this.inputHandlersValue?.options ?? []}
-          @action-click=${this.onActionClick}
-          @change="${(customEvent: CustomEvent) => {
-      const selectedOptionPath = customEvent.detail.path;
-      const selectedPage = this.inputHandlersValue.options[selectedOptionPath[0]]?.id;
-      const option = selectedOptionPath.reduce((acc: {
-        children: { [x: string]: any; };
-      }, curr: string | number) => acc && acc.children && acc.children[curr], { children: this.inputHandlersValue?.options });
-      executeHandler(this.component, getNestedAttribute(this.component, `event.onSelect`), {
-        id: option.id,
-        text: option.text,
-        type: option.type,
-        page: selectedPage
-      });
-    }}">
+          @change="${(e: CustomEvent) => {
+            const selectedOptionPath = e.detail.path;
+            const selectedPage = this.inputHandlersValue.options[selectedOptionPath[0]]?.id;
+            const option = selectedOptionPath.reduce((acc: {
+              children: { [x: string]: any; };
+            }, curr: string | number) => acc && acc.children && acc.children[curr], { children: this.inputHandlersValue?.options });
+            this.executeEvent('onSelect', e, {
+              id: option?.id,
+              text: option?.text,
+              type: option?.type,
+              page: selectedPage,
+              path: selectedOptionPath,
+              value: e.detail.value
+            });
+          }}"
+          @action-click="${(e: CustomEvent) => {
+            this.executeEvent('onActionClick', e, {
+              value: e.detail.additionalData,
+              action: e.detail.value
+            });
+          }}">
         </nr-menu>
     `;
   }