@nuraly/runtime 0.1.9 → 0.1.11

package/dist/Collections-DEqUHWFe.js

@@ -0,0 +1,151 @@
+import { css, html } from 'lit';
+import { property, state, customElement } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { ae as BaseElementBlock, a8 as executeHandler, bd as getNestedAttribute, $ as $components, ap as setContextMenuEvent, n as $resizing, ak as setCurrentComponentIdAction, aM as renderComponent } from './BaseElement-wyA58UxT.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+const styles = css`
+    .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 __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;
+};
+let CollectionViewer = class extends BaseElementBlock {
+  constructor() {
+    super(...arguments);
+    this.isViewMode = false;
+    this.dropDragPalceHolderStyle = {
+      display: "none",
+      height: "auto",
+      width: "auto",
+      minWidth: "80px",
+      backgroundColor: "rgb(202 235 255)",
+      zIndex: "7",
+      borderRadius: "2px"
+    };
+    this.childrenComponents = [];
+    this.containerRef = createRef();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateChildrenComponents();
+    if (this.component?.event?.onInit) {
+      executeHandler(
+        this.component,
+        getNestedAttribute(this.component, "event.onInit")
+      );
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("component")) {
+      this.updateChildrenComponents();
+    }
+  }
+  updateChildrenComponents() {
+    const applicationComponents = $components.get()[this.component?.application_id];
+    if (!applicationComponents || !this.component?.childrenIds?.length) {
+      this.childrenComponents = [];
+      return;
+    }
+    this.childrenComponents = this.component.childrenIds.map((id) => applicationComponents.find((component) => component.uuid === id)).filter(Boolean);
+  }
+  handleCollectionClick(e) {
+    setContextMenuEvent(null);
+    if ($resizing.get()) return;
+    setCurrentComponentIdAction(this.component?.uuid);
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  renderRow(item) {
+    return html`
+      <div class="collection" ${ref(this.containerRef)}
+           @click="${(e) => this.handleCollectionClick(e)}">
+        ${this.childrenComponents.length ? html`${renderComponent(
+      this.childrenComponents.map((component) => ({ ...component, item })),
+      item,
+      this.isViewMode
+    )}` : html`<div class="empty-message">Add or Drag an item into this collection</div>`}
+      </div>`;
+  }
+  getData() {
+    if (Array.isArray(this.inputHandlersValue.data)) {
+      return this.inputHandlersValue.data;
+    }
+    return this.component.input?.data ? [] : [
+      { title: "Function 1" },
+      { title: "Function 2" },
+      { title: "Function 3" }
+    ];
+  }
+  renderComponent() {
+    const isVertical = this.inputHandlersValue.direction?.value === "vertical";
+    const data = this.getData();
+    return html`
+      <div
+        ${ref(this.inputRef)}
+        style=${styleMap(this.getStyles())}
+        class=${classMap({
+      collection_viewer: true,
+      vertical: isVertical
+    })}
+      >
+        ${data.map((item, index) => this.renderRow({ ...item, index }))}
+      </div>
+    `;
+  }
+};
+CollectionViewer.styles = styles;
+__decorateClass([
+  property({ type: Object })
+], CollectionViewer.prototype, "component", 2);
+__decorateClass([
+  property({ type: Boolean })
+], CollectionViewer.prototype, "isViewMode", 2);
+__decorateClass([
+  property({ type: String })
+], CollectionViewer.prototype, "mode", 2);
+__decorateClass([
+  state()
+], CollectionViewer.prototype, "hoveredComponent", 2);
+__decorateClass([
+  state()
+], CollectionViewer.prototype, "currentEditingApplication", 2);
+__decorateClass([
+  state()
+], CollectionViewer.prototype, "draggingComponentInfo", 2);
+__decorateClass([
+  state()
+], CollectionViewer.prototype, "dropDragPalceHolderStyle", 2);
+__decorateClass([
+  state()
+], CollectionViewer.prototype, "childrenComponents", 2);
+CollectionViewer = __decorateClass([
+  customElement("collection-viewer")
+], CollectionViewer);
+
+export { CollectionViewer };

package/dist/Collections-DsTr-Zt7.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-BgDXbkmh.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
+};

package/dist/Container-C1HjQgb7.js

@@ -0,0 +1,204 @@
+import { ae as BaseElementBlock, $ as $components, aM as renderComponent, v as RuntimeHelpers, ap as setContextMenuEvent, ak as setCurrentComponentIdAction } from './BaseElement-wyA58UxT.js';
+import { css, nothing, html } from 'lit';
+import { property, state, customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+
+const styles = css`
+  :host{
+    display: block;
+  }
+  
+  .container {
+    /* --container-bg-color-local: var(--container-bg-color); */
+    display: flex;
+    width: fit-content;
+    min-height: 300px;
+    height: 100%;
+    flex-wrap: wrap;
+    /* background-color: var(--container-bg-color-local, var(--container-bg-color)); */
+  }
+
+  .boxed{
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+  }
+  
+  .vertical {
+    flex-direction: column;
+  }
+  
+  .empty-message-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    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;
+  }
+`;
+
+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;
+};
+let VerticalContainer = class extends BaseElementBlock {
+  constructor() {
+    super(...arguments);
+    this.isViewMode = false;
+    this.dragOverSituation = false;
+    this.wrapperStyle = {};
+    this.containerRef = createRef();
+    this.childrenComponents = [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateChildrenComponents();
+  }
+  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);
+    }) ?? [];
+  }
+  renderView() {
+    return html`
+      <div
+      id=${this.inputHandlersValue.id ?? nothing}
+        ${ref(this.inputRef)}
+        data-component-uuid=${this.component?.uuid}
+        data-component-name=${this.component?.name}
+        style=${styleMap({
+      "width": RuntimeHelpers.extractUnit(this.componentStyles?.width) === "%" ? "100%" : this.componentStyles?.width ?? "auto",
+      ...this.getStyles(),
+      "min-height": this.childrenComponents.length ? "auto" : "300px"
+    })}
+        class=${classMap({
+      container: true,
+      vertical: this.inputHandlersValue.direction === "vertical",
+      boxed: this.inputHandlersValue.layout === "boxed",
+      "drag-over": this.dragOverSituation
+    })}
+        @mouseenter="${(e) => this.executeEvent("onMouseEnter", { ...e, unique: this.uniqueUUID })}"
+        @mouseleave="${(e) => this.executeEvent("onMouseLeave", { ...e, unique: this.uniqueUUID })}"
+        @click="${(e) => this.executeEvent("onClick", e)}"
+      >
+        ${this.childrenComponents.length ? renderComponent(this.childrenComponents.map((component) => ({ ...component, item: this.item })), this.item, this.isViewMode, { ...this.component, uniqueUUID: this.uniqueUUID }) : html`
+              <div class="container-placeholder">
+                <nr-icon name="layout-grid"></nr-icon>
+                <nr-label>No content</nr-label>
+              </div>
+            `}
+      </div>
+    `;
+  }
+  renderComponent() {
+    return html`
+      ${this.isViewMode ? this.renderView() : html`
+            <div
+              ${ref(this.inputRef)}
+              data-component-uuid=${this.component?.uuid}
+              data-component-name=${this.component?.name}
+              ${ref(this.containerRef)}
+              @click="${(e) => {
+      setContextMenuEvent(null);
+      this.executeEvent("onClick", e);
+    }}"
+              style=${styleMap({
+      ...this.getStyles(),
+      "min-height": this.childrenComponents.length ? "auto" : "300px"
+    })}
+              class=${classMap({
+      container: true,
+      vertical: this.inputHandlersValue.direction === "vertical",
+      horizontal: this.inputHandlersValue.direction !== "vertical",
+      boxed: this.inputHandlersValue.layout == "boxed"
+    })}
+            >
+              ${this.childrenComponents.length ? renderComponent(this.childrenComponents.map((component) => ({ ...component, item: this.item })), this.item, this.isViewMode, { ...this.component, uniqueUUID: this.uniqueUUID }) : html`
+                    <div
+                      class="container-placeholder"
+                      @click="${() => setCurrentComponentIdAction(this.component?.uuid)}"
+                    >
+                      <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"}
+                        .component=${{ ...this.component }}
+                        .inputRef=${this.inputRef}
+                        .isDragInitiator=${this.isDragInitiator}
+                      >
+                      </drag-wrapper>
+                    </div>
+                  `}
+            </div>
+          `}
+    `;
+  }
+};
+VerticalContainer.styles = styles;
+__decorateClass([
+  property({ type: Object })
+], VerticalContainer.prototype, "component", 2);
+__decorateClass([
+  property({ type: Object })
+], VerticalContainer.prototype, "item", 2);
+__decorateClass([
+  property({ type: Object })
+], VerticalContainer.prototype, "draggingComponentInfo", 2);
+__decorateClass([
+  property({ type: Boolean })
+], VerticalContainer.prototype, "isViewMode", 2);
+__decorateClass([
+  state()
+], VerticalContainer.prototype, "dragOverSituation", 2);
+__decorateClass([
+  state()
+], VerticalContainer.prototype, "selectedComponent", 2);
+__decorateClass([
+  state()
+], VerticalContainer.prototype, "hoveredComponent", 2);
+__decorateClass([
+  state()
+], VerticalContainer.prototype, "wrapperStyle", 2);
+__decorateClass([
+  state()
+], VerticalContainer.prototype, "containerRef", 2);
+__decorateClass([
+  state()
+], VerticalContainer.prototype, "childrenComponents", 2);
+VerticalContainer = __decorateClass([
+  customElement("vertical-container-block")
+], VerticalContainer);
+
+export { VerticalContainer };

package/dist/DatePicker-DRVwFJmL.js

@@ -0,0 +1,99 @@
+import { html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { ae as BaseElementBlock } from './BaseElement-wyA58UxT.js';
+import { ref } from 'lit/directives/ref.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/datepicker');
+} catch (error) {
+  console.warn("[@nuralyui/datepicker] Package not found or failed to load.");
+}
+let DatepickertBlock = class extends BaseElementBlock {
+  constructor() {
+    super(...arguments);
+    this.handleDateChange = (customEvent) => {
+      this.executeEvent("onDateChange", customEvent, {
+        value: customEvent.detail?.value || customEvent.detail?.date || customEvent.detail
+      });
+    };
+    this.handleRangeChange = (customEvent) => {
+      this.executeEvent("onRangeChange", customEvent, {
+        startDate: customEvent.detail?.startDate,
+        endDate: customEvent.detail?.endDate,
+        value: customEvent.detail?.value
+      });
+    };
+    this.handleCalendarOpen = (customEvent) => {
+      this.executeEvent("onCalendarOpen", customEvent);
+    };
+    this.handleCalendarClose = (customEvent) => {
+      this.executeEvent("onCalendarClose", customEvent);
+    };
+    this.handleFocus = (customEvent) => {
+      this.executeEvent("onFocus", customEvent);
+    };
+    this.handleBlur = (customEvent) => {
+      this.executeEvent("onBlur", customEvent);
+    };
+    this.handleValidation = (customEvent) => {
+      this.executeEvent("onValidation", customEvent, {
+        isValid: customEvent.detail?.isValid,
+        message: customEvent.detail?.message
+      });
+    };
+  }
+  renderComponent() {
+    const datePickerStyles = this.component?.style || {};
+    const size = datePickerStyles.size || "medium";
+    const variant = datePickerStyles.variant || "default";
+    const placement = datePickerStyles.placement || "auto";
+    const state = datePickerStyles?.state || "default";
+    return html`
+      <nr-datepicker
+        ${ref(this.inputRef)}
+             class="${`drop-${this.component.uuid}`}"
+
+        .helper=${this.inputHandlersValue.helper || ""}
+        .label=${this.inputHandlersValue.label || ""}
+        .placeholder=${this.inputHandlersValue.placeholder || ""}
+        .locale=${this.inputHandlersValue.locale || "en"}
+        .state=${state}
+        .size=${this.inputHandlersValue.size ?? size}
+        .variant=${variant}
+        .placement=${placement}
+        ?disabled=${this.inputHandlersValue.disabled ?? false}
+        .dateValue=${this.inputHandlersValue.value || ""}
+        .fieldFormat=${this.inputHandlersValue.format || "DD/MM/YYYY"}
+        ?range=${this.inputHandlersValue.range ?? false}
+        .minDate=${this.inputHandlersValue.minDate}
+        .maxDate=${this.inputHandlersValue.maxDate}
+        ?required=${this.inputHandlersValue.required ?? false}
+        @nr-date-change=${this.handleDateChange}
+        @nr-range-change=${this.handleRangeChange}
+        @nr-calendar-open=${this.handleCalendarOpen}
+        @nr-calendar-close=${this.handleCalendarClose}
+        @nr-focus=${this.handleFocus}
+        @nr-blur=${this.handleBlur}
+        @nr-validation=${this.handleValidation}
+      ></nr-datepicker>
+    `;
+  }
+};
+__decorateClass([
+  property({ type: Object })
+], DatepickertBlock.prototype, "component", 2);
+DatepickertBlock = __decorateClass([
+  customElement("date-picker-block")
+], DatepickertBlock);
+
+export { DatepickertBlock };

package/dist/DatePicker-oAOJyU3e.js

@@ -0,0 +1,80 @@
+import { B as h, n as u, b as o, c as p, t as c } from "./micro-app-entry-BgDXbkmh.js";
+var $ = Object.defineProperty, g = Object.getOwnPropertyDescriptor, d = (e, t, l, n) => {
+  for (var a = n > 1 ? void 0 : n ? g(t, l) : t, i = e.length - 1, s; i >= 0; i--)
+    (s = e[i]) && (a = (n ? s(t, l, a) : s(a)) || a);
+  return n && a && $(t, l, a), a;
+};
+try {
+  await import("@nuralyui/datepicker");
+} catch {
+  console.warn("[@nuralyui/datepicker] Package not found or failed to load.");
+}
+let r = class extends h {
+  constructor() {
+    super(...arguments), this.handleDateChange = (e) => {
+      this.executeEvent("onDateChange", e, {
+        value: e.detail?.value || e.detail?.date || e.detail
+      });
+    }, this.handleRangeChange = (e) => {
+      this.executeEvent("onRangeChange", e, {
+        startDate: e.detail?.startDate,
+        endDate: e.detail?.endDate,
+        value: e.detail?.value
+      });
+    }, this.handleCalendarOpen = (e) => {
+      this.executeEvent("onCalendarOpen", e);
+    }, this.handleCalendarClose = (e) => {
+      this.executeEvent("onCalendarClose", e);
+    }, this.handleFocus = (e) => {
+      this.executeEvent("onFocus", e);
+    }, this.handleBlur = (e) => {
+      this.executeEvent("onBlur", e);
+    }, this.handleValidation = (e) => {
+      this.executeEvent("onValidation", e, {
+        isValid: e.detail?.isValid,
+        message: e.detail?.message
+      });
+    };
+  }
+  renderComponent() {
+    const e = this.component?.style || {}, t = e.size || "medium", l = e.variant || "default", n = e.placement || "auto", a = e?.state || "default";
+    return o`
+      <nr-datepicker
+        ${u(this.inputRef)}
+             class="${`drop-${this.component.uuid}`}"
+
+        .helper=${this.inputHandlersValue.helper || ""}
+        .label=${this.inputHandlersValue.label || ""}
+        .placeholder=${this.inputHandlersValue.placeholder || ""}
+        .locale=${this.inputHandlersValue.locale || "en"}
+        .state=${a}
+        .size=${this.inputHandlersValue.size ?? t}
+        .variant=${l}
+        .placement=${n}
+        ?disabled=${this.inputHandlersValue.disabled ?? !1}
+        .dateValue=${this.inputHandlersValue.value || ""}
+        .fieldFormat=${this.inputHandlersValue.format || "DD/MM/YYYY"}
+        ?range=${this.inputHandlersValue.range ?? !1}
+        .minDate=${this.inputHandlersValue.minDate}
+        .maxDate=${this.inputHandlersValue.maxDate}
+        ?required=${this.inputHandlersValue.required ?? !1}
+        @nr-date-change=${this.handleDateChange}
+        @nr-range-change=${this.handleRangeChange}
+        @nr-calendar-open=${this.handleCalendarOpen}
+        @nr-calendar-close=${this.handleCalendarClose}
+        @nr-focus=${this.handleFocus}
+        @nr-blur=${this.handleBlur}
+        @nr-validation=${this.handleValidation}
+      ></nr-datepicker>
+    `;
+  }
+};
+d([
+  p({ type: Object })
+], r.prototype, "component", 2);
+r = d([
+  c("date-picker-block")
+], r);
+export {
+  r as DatepickertBlock
+};