@nuraly/runtime 0.1.9 → 0.1.10

package/dist/Col-B_wpWUcU.js

@@ -0,0 +1,217 @@
+import { ae as BaseElementBlock, $ as $components, aM as renderComponent, ak as setCurrentComponentIdAction, ap as setContextMenuEvent } from './BaseElement-pS6m_x6Q.js';
+import { css, nothing, html } from 'lit';
+import { property, state, customElement } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import '@nuralyui/grid';
+
+const styles = 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);
+  }
+`;
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const COL_INPUT_PROPS = ["span", "offset", "order", "pull", "push", "flex", "xs", "sm", "md", "lg", "xl", "xxl"];
+let GridCol = class extends BaseElementBlock {
+  constructor() {
+    super(...arguments);
+    this.isViewMode = false;
+    this.childrenComponents = [];
+    this.containerRef = createRef();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateChildrenComponents();
+    COL_INPUT_PROPS.forEach((prop) => this.registerCallback(prop, () => this.requestUpdate()));
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("component")) {
+      this.updateChildrenComponents();
+    }
+  }
+  updateChildrenComponents() {
+    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)
+   */
+  parseNumeric(value, defaultValue) {
+    if (value === void 0 || 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 }
+   */
+  parseBreakpoint(value) {
+    if (value === void 0 || value === null || value === "") return void 0;
+    if (typeof value === "number") return value;
+    if (typeof value === "string" && !isNaN(Number(value))) return Number(value);
+    if (typeof value === "object") return value;
+    return void 0;
+  }
+  /**
+   * Get all column properties from input handlers
+   */
+  getColProps() {
+    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
+   */
+  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
+   */
+  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>
+    `;
+  }
+  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) => {
+      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>
+    `;
+  }
+};
+GridCol.styles = styles;
+__decorateClass([
+  property({ type: Object })
+], GridCol.prototype, "component", 2);
+__decorateClass([
+  property({ type: Object })
+], GridCol.prototype, "item", 2);
+__decorateClass([
+  property({ type: Boolean })
+], GridCol.prototype, "isViewMode", 2);
+__decorateClass([
+  state()
+], GridCol.prototype, "childrenComponents", 2);
+__decorateClass([
+  state()
+], GridCol.prototype, "containerRef", 2);
+GridCol = __decorateClass([
+  customElement("grid-col-block")
+], GridCol);
+
+export { GridCol };

package/dist/Col-DYs8_65c.js

@@ -0,0 +1,193 @@
+import { i as f, B as x, e as $, $ as g, r as C, A as i, s as y, b as a, n as c, o as m, a as b, c as d, d as u, t as N } from "./micro-app-entry-DiNqE6xi.js";
+import "@nuralyui/grid";
+const w = f`
+  :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);
+  }
+`;
+var k = Object.defineProperty, B = Object.getOwnPropertyDescriptor, o = (e, t, r, p) => {
+  for (var s = p > 1 ? void 0 : p ? B(t, r) : t, l = e.length - 1, h; l >= 0; l--)
+    (h = e[l]) && (s = (p ? h(t, r, s) : h(s)) || s);
+  return p && s && k(t, r, s), s;
+};
+const _ = ["span", "offset", "order", "pull", "push", "flex", "xs", "sm", "md", "lg", "xl", "xxl"];
+let n = class extends x {
+  constructor() {
+    super(...arguments), this.isViewMode = !1, this.childrenComponents = [], this.containerRef = $();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.updateChildrenComponents(), _.forEach((e) => this.registerCallback(e, () => this.requestUpdate()));
+  }
+  willUpdate(e) {
+    super.willUpdate(e), e.has("component") && this.updateChildrenComponents();
+  }
+  updateChildrenComponents() {
+    this.childrenComponents = this.component?.childrenIds?.map((e) => g.get()[this.component?.application_id]?.find((t) => t.uuid === e)).filter(Boolean) ?? [];
+  }
+  /**
+   * Parse numeric value from input (handles string or number)
+   */
+  parseNumeric(e, t) {
+    if (e == null || e === "") return t;
+    const r = Number(e);
+    return isNaN(r) ? t : r;
+  }
+  /**
+   * Parse responsive breakpoint value
+   * Can be a number or an object { span, offset, order, pull, push }
+   */
+  parseBreakpoint(e) {
+    if (!(e == null || e === "")) {
+      if (typeof e == "number") return e;
+      if (typeof e == "string" && !isNaN(Number(e))) return Number(e);
+      if (typeof e == "object") return e;
+    }
+  }
+  /**
+   * Get all column properties from input handlers
+   */
+  getColProps() {
+    const e = this.inputHandlersValue;
+    return {
+      span: this.parseNumeric(e?.span),
+      offset: this.parseNumeric(e?.offset, 0),
+      order: this.parseNumeric(e?.order),
+      pull: this.parseNumeric(e?.pull, 0),
+      push: this.parseNumeric(e?.push, 0),
+      flex: e?.flex || "",
+      xs: this.parseBreakpoint(e?.xs),
+      sm: this.parseBreakpoint(e?.sm),
+      md: this.parseBreakpoint(e?.md),
+      lg: this.parseBreakpoint(e?.lg),
+      xl: this.parseBreakpoint(e?.xl),
+      xxl: this.parseBreakpoint(e?.xxl)
+    };
+  }
+  /**
+   * Render children components
+   */
+  renderChildren() {
+    return this.childrenComponents.length ? C(
+      this.childrenComponents.map((e) => ({ ...e, item: this.item })),
+      this.item,
+      this.isViewMode,
+      { ...this.component, uniqueUUID: this.uniqueUUID }
+    ) : i;
+  }
+  /**
+   * Render empty state placeholder for editor mode
+   */
+  renderEmptyState() {
+    return a`
+      <div
+        class="empty-message"
+        @click="${() => y(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>
+    `;
+  }
+  renderComponent() {
+    const e = this.getColProps();
+    return this.isViewMode ? a`
+        <nr-col
+          ${c(this.inputRef)}
+          data-component-uuid=${this.component?.uuid}
+          data-component-name=${this.component?.name}
+          style=${m(this.getStyles())}
+          span=${e.span ?? i}
+          offset=${e.offset}
+          order=${e.order ?? i}
+          pull=${e.pull}
+          push=${e.push}
+          flex=${e.flex || i}
+          .xs=${e.xs}
+          .sm=${e.sm}
+          .md=${e.md}
+          .lg=${e.lg}
+          .xl=${e.xl}
+          .xxl=${e.xxl}
+        >
+          ${this.renderChildren()}
+        </nr-col>
+      ` : a`
+      <nr-col
+        ${c(this.inputRef)}
+        ${c(this.containerRef)}
+        data-component-uuid=${this.component?.uuid}
+        data-component-name=${this.component?.name}
+        @click="${(t) => {
+      b(null), this.executeEvent("onClick", t);
+    }}"
+        style=${m({
+      ...this.getStyles(),
+      "min-height": this.childrenComponents.length ? "auto" : "60px"
+    })}
+        span=${e.span ?? i}
+        offset=${e.offset}
+        order=${e.order ?? i}
+        pull=${e.pull}
+        push=${e.push}
+        flex=${e.flex || i}
+        .xs=${e.xs}
+        .sm=${e.sm}
+        .md=${e.md}
+        .lg=${e.lg}
+        .xl=${e.xl}
+        .xxl=${e.xxl}
+      >
+        ${this.childrenComponents.length ? this.renderChildren() : this.renderEmptyState()}
+      </nr-col>
+    `;
+  }
+};
+n.styles = w;
+o([
+  d({ type: Object })
+], n.prototype, "component", 2);
+o([
+  d({ type: Object })
+], n.prototype, "item", 2);
+o([
+  d({ type: Boolean })
+], n.prototype, "isViewMode", 2);
+o([
+  u()
+], n.prototype, "childrenComponents", 2);
+o([
+  u()
+], n.prototype, "containerRef", 2);
+n = o([
+  N("grid-col-block")
+], n);
+export {
+  n as GridCol
+};

package/dist/Collapse-4kxbQ74u.js

@@ -0,0 +1,74 @@
+import { B as d, f as h, o as u, A as m, b as c, r as f, d as l, t as C } from "./micro-app-entry-DiNqE6xi.js";
+var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (t, e, n, i) => {
+  for (var o = i > 1 ? void 0 : i ? y(e, n) : e, p = t.length - 1, a; p >= 0; p--)
+    (a = t[p]) && (o = (i ? a(e, n, o) : a(o)) || o);
+  return i && o && g(e, n, o), o;
+};
+try {
+  await import("@nuralyui/collapse");
+} catch {
+  console.warn("[@nuralyui/collapse] Package not found or failed to load. Collapse functionality may be limited.");
+}
+let s = class extends d {
+  constructor() {
+    super(), this.sections = [], this.openStates = [], this.componentsWithChildren = [], this.registerCallback("components", () => {
+      this.updateComponents();
+    });
+  }
+  updated(t) {
+    super.updated(t), t.has("component") && this.updateComponents();
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t);
+    const e = this.component.application_id;
+    this.componentsWithChildren = h(e).get();
+  }
+  updateComponents() {
+    this.sections = this.generateSection();
+  }
+  render() {
+    return c`
+      <nr-collapse
+        style=${u(this.component.style)}
+        .sections=${[...this.sections]}
+        .size=${this.inputHandlersValue?.size ?? m}
+        @section-toggled=${this.handleSectionToggled}
+      ></nr-collapse>
+    `;
+  }
+  handleSectionToggled(t) {
+    const e = t.detail.index;
+    this.openStates[e] = !this.openStates[e], this.sections[e].open = this.openStates[e], this.requestUpdate();
+  }
+  generateComponent(t) {
+    const e = this.componentsWithChildren.filter(
+      (n) => t === n.uuid
+    );
+    return f(e, null, !0);
+  }
+  generateSection() {
+    const t = this.inputHandlersValue?.components;
+    return !t || !Array.isArray(t) ? [] : t.map(
+      (e, n) => ({
+        header: e.label,
+        content: c`<div>${this.generateComponent(e.blockName)}</div>`,
+        open: this.openStates[n] ?? e.open
+      })
+    );
+  }
+};
+r([
+  l()
+], s.prototype, "sections", 2);
+r([
+  l()
+], s.prototype, "openStates", 2);
+r([
+  l()
+], s.prototype, "componentsWithChildren", 2);
+s = r([
+  C("collapse-block")
+], s);
+export {
+  s as Collapse
+};

package/dist/Collapse-Dkw6Ner6.js

@@ -0,0 +1,96 @@
+import { nothing, html } from 'lit';
+import { ae as BaseElementBlock, w as $applicationComponents, aM as renderComponent } from './BaseElement-pS6m_x6Q.js';
+import { state, customElement } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+try {
+  await import('@nuralyui/collapse');
+} catch (error) {
+  console.warn("[@nuralyui/collapse] Package not found or failed to load. Collapse functionality may be limited.");
+}
+let Collapse = class extends BaseElementBlock {
+  constructor() {
+    super();
+    this.sections = [];
+    this.openStates = [];
+    this.componentsWithChildren = [];
+    this.registerCallback("components", () => {
+      this.updateComponents();
+    });
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("component")) {
+      this.updateComponents();
+    }
+  }
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+    const application_id = this.component.application_id;
+    this.componentsWithChildren = $applicationComponents(application_id).get();
+  }
+  updateComponents() {
+    this.sections = this.generateSection();
+  }
+  render() {
+    return html`
+      <nr-collapse
+        style=${styleMap(this.component.style)}
+        .sections=${[...this.sections]}
+        .size=${this.inputHandlersValue?.size ?? nothing}
+        @section-toggled=${this.handleSectionToggled}
+      ></nr-collapse>
+    `;
+  }
+  handleSectionToggled(e) {
+    const index = e.detail.index;
+    this.openStates[index] = !this.openStates[index];
+    this.sections[index].open = this.openStates[index];
+    this.requestUpdate();
+  }
+  generateComponent(blockName) {
+    const children = this.componentsWithChildren.filter(
+      (component) => blockName === component.uuid
+    );
+    return renderComponent(children, null, true);
+  }
+  generateSection() {
+    const components = this.inputHandlersValue?.components;
+    if (!components || !Array.isArray(components)) {
+      return [];
+    }
+    return components.map(
+      (section, index) => {
+        return {
+          header: section.label,
+          content: html`<div>${this.generateComponent(section.blockName)}</div>`,
+          open: this.openStates[index] ?? section.open
+        };
+      }
+    );
+  }
+};
+__decorateClass([
+  state()
+], Collapse.prototype, "sections", 2);
+__decorateClass([
+  state()
+], Collapse.prototype, "openStates", 2);
+__decorateClass([
+  state()
+], Collapse.prototype, "componentsWithChildren", 2);
+Collapse = __decorateClass([
+  customElement("collapse-block")
+], Collapse);
+
+export { Collapse };

package/dist/Collections-BSF-PqBz.js

@@ -0,0 +1,122 @@
+import { i as u, B as m, e as C, h as g, j as v, $ as f, a as w, p as y, s as x, n as h, r as $, b as a, o as b, g as _, c as d, d as l, t as D } from "./micro-app-entry-DiNqE6xi.js";
+const V = u`
+    .collection_viewer {
+        --columns: 1;
+        min-width: 200px;
+        max-height: 400px;
+        display: flex;
+        flex-wrap: wrap; /* Allows items to wrap into new rows */
+    }
+
+    .vertical {
+        flex-direction: column;
+        flex-wrap: nowrap
+        
+    }
+
+    .collection{
+        flex: 0 0 calc(100% / var(--columns) - 10px); /* Fixed width */
+    }
+`;
+var A = Object.defineProperty, I = Object.getOwnPropertyDescriptor, o = (e, t, i, s) => {
+  for (var r = s > 1 ? void 0 : s ? I(t, i) : t, p = e.length - 1, c; p >= 0; p--)
+    (c = e[p]) && (r = (s ? c(t, i, r) : c(r)) || r);
+  return s && r && A(t, i, r), r;
+};
+let n = class extends m {
+  constructor() {
+    super(...arguments), this.isViewMode = !1, this.dropDragPalceHolderStyle = {
+      display: "none",
+      height: "auto",
+      width: "auto",
+      minWidth: "80px",
+      backgroundColor: "rgb(202 235 255)",
+      zIndex: "7",
+      borderRadius: "2px"
+    }, this.childrenComponents = [], this.containerRef = C();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.updateChildrenComponents(), this.component?.event?.onInit && g(
+      this.component,
+      v(this.component, "event.onInit")
+    );
+  }
+  updated(e) {
+    e.has("component") && this.updateChildrenComponents();
+  }
+  updateChildrenComponents() {
+    const e = f.get()[this.component?.application_id];
+    if (!e || !this.component?.childrenIds?.length) {
+      this.childrenComponents = [];
+      return;
+    }
+    this.childrenComponents = this.component.childrenIds.map((t) => e.find((i) => i.uuid === t)).filter(Boolean);
+  }
+  handleCollectionClick(e) {
+    w(null), !y.get() && (x(this.component?.uuid), e.preventDefault(), e.stopPropagation());
+  }
+  renderRow(e) {
+    return a`
+      <div class="collection" ${h(this.containerRef)}
+           @click="${(t) => this.handleCollectionClick(t)}">
+        ${this.childrenComponents.length ? a`${$(
+      this.childrenComponents.map((t) => ({ ...t, item: e })),
+      e,
+      this.isViewMode
+    )}` : a`<div class="empty-message">Add or Drag an item into this collection</div>`}
+      </div>`;
+  }
+  getData() {
+    return Array.isArray(this.inputHandlersValue.data) ? this.inputHandlersValue.data : this.component.input?.data ? [] : [
+      { title: "Function 1" },
+      { title: "Function 2" },
+      { title: "Function 3" }
+    ];
+  }
+  renderComponent() {
+    const e = this.inputHandlersValue.direction?.value === "vertical", t = this.getData();
+    return a`
+      <div
+        ${h(this.inputRef)}
+        style=${b(this.getStyles())}
+        class=${_({
+      collection_viewer: !0,
+      vertical: e
+    })}
+      >
+        ${t.map((i, s) => this.renderRow({ ...i, index: s }))}
+      </div>
+    `;
+  }
+};
+n.styles = V;
+o([
+  d({ type: Object })
+], n.prototype, "component", 2);
+o([
+  d({ type: Boolean })
+], n.prototype, "isViewMode", 2);
+o([
+  d({ type: String })
+], n.prototype, "mode", 2);
+o([
+  l()
+], n.prototype, "hoveredComponent", 2);
+o([
+  l()
+], n.prototype, "currentEditingApplication", 2);
+o([
+  l()
+], n.prototype, "draggingComponentInfo", 2);
+o([
+  l()
+], n.prototype, "dropDragPalceHolderStyle", 2);
+o([
+  l()
+], n.prototype, "childrenComponents", 2);
+n = o([
+  D("collection-viewer")
+], n);
+export {
+  n as CollectionViewer
+};