@nuraly/runtime 0.1.8 → 0.1.10

package/dist/Form-E6zXqgsm.js

@@ -0,0 +1,286 @@
+import { i as f, B as p, $ as g, s as v, b as d, r as _, n as m, A as h, c, d as u, t as $ } from "./micro-app-entry-DiNqE6xi.js";
+import "@nuralyui/icon";
+import "@nuralyui/label";
+const b = f`
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .form-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;
+  }
+
+  .form-placeholder nr-icon {
+    --nuraly-icon-size: 48px;
+  }
+`;
+var C = Object.defineProperty, E = Object.getOwnPropertyDescriptor, l = (t, i, e, r) => {
+  for (var n = r > 1 ? void 0 : r ? E(i, e) : i, a = t.length - 1, o; a >= 0; a--)
+    (o = t[a]) && (n = (r ? o(i, e, n) : o(n)) || n);
+  return r && n && C(i, e, n), n;
+};
+try {
+  await import("@nuralyui/forms");
+} catch {
+  console.warn("[@nuralyui/forms] Package not found or failed to load.");
+}
+let s = class extends p {
+  constructor() {
+    super(), this._formElement = null, this._registeredFields = /* @__PURE__ */ new Map(), this.childrenComponents = [], this._fieldRegisterHandler = this._handleFieldRegister.bind(this), this._fieldUnregisterHandler = this._handleFieldUnregister.bind(this), this._fieldValueChangeHandler = this._handleFieldValueChange.bind(this);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.updateChildrenComponents(), this.addEventListener("nr-field-register", this._fieldRegisterHandler), this.addEventListener("nr-field-unregister", this._fieldUnregisterHandler), this.addEventListener("nr-field-value-change", this._fieldValueChangeHandler);
+  }
+  willUpdate(t) {
+    super.willUpdate(t), t.has("component") && this.updateChildrenComponents();
+  }
+  updateChildrenComponents() {
+    this.childrenComponents = this.component?.childrenIds?.map((t) => g.get()[this.component?.application_id]?.find((i) => i.uuid === t)).filter(Boolean) ?? [];
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("nr-field-register", this._fieldRegisterHandler), this.removeEventListener("nr-field-unregister", this._fieldUnregisterHandler), this.removeEventListener("nr-field-value-change", this._fieldValueChangeHandler), this._registeredFields.clear();
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this._formElement = this.renderRoot.querySelector("nr-form"), this.registerCallback("disabled", (i) => {
+      this._formElement && (this._formElement.disabled = i);
+    });
+  }
+  /**
+   * Handle field registration from child input blocks
+   */
+  _handleFieldRegister(t) {
+    t.stopPropagation();
+    const { element: i, name: e, blockElement: r } = t.detail;
+    if (!e || !i) {
+      console.warn("[FormBlock] Field registration missing name or element");
+      return;
+    }
+    if (this._registeredFields.set(e, { element: i, blockElement: r }), this._formElement?.validationController)
+      try {
+        this._formElement.validationController.registerField(i);
+      } catch (n) {
+        console.warn("[FormBlock] Failed to register field with validation controller:", n);
+      }
+  }
+  /**
+   * Handle field unregistration when child input blocks are removed
+   */
+  _handleFieldUnregister(t) {
+    t.stopPropagation();
+    const { name: i } = t.detail;
+    if (i && this._registeredFields.has(i)) {
+      if (this._formElement?.validationController)
+        try {
+          this._formElement.validationController.unregisterField(i);
+        } catch (e) {
+          console.warn("[FormBlock] Failed to unregister field:", e);
+        }
+      this._registeredFields.delete(i);
+    }
+  }
+  /**
+   * Handle field value changes for form data collection
+   */
+  _handleFieldValueChange(t) {
+    const { name: i, value: e } = t.detail;
+    if (i && this._registeredFields.has(i)) {
+      const r = this._registeredFields.get(i);
+      r.value = e;
+    }
+  }
+  /**
+   * Get all form field values
+   */
+  getFieldsValue() {
+    if (this._formElement?.getFieldsValue)
+      return this._formElement.getFieldsValue();
+    const t = {};
+    for (const [i, e] of this._registeredFields)
+      t[i] = e.element?.value ?? e.value;
+    return t;
+  }
+  /**
+   * Set form field values
+   */
+  setFieldsValue(t) {
+    this._formElement?.setFieldsValue && this._formElement.setFieldsValue(t);
+  }
+  /**
+   * Validate all form fields
+   */
+  async validate() {
+    return this._formElement?.validate ? this._formElement.validate() : !0;
+  }
+  /**
+   * Submit the form programmatically
+   */
+  async submit(t) {
+    this._formElement?.submit && await this._formElement.submit(t);
+  }
+  /**
+   * Reset the form
+   */
+  reset() {
+    this._formElement?.reset && this._formElement.reset();
+  }
+  /**
+   * Get form state summary
+   */
+  getFormState() {
+    return this._formElement?.getFormState ? this._formElement.getFormState() : {
+      isValid: !0,
+      isSubmitting: !1,
+      hasErrors: !1,
+      errorCount: 0,
+      fieldCount: this._registeredFields.size
+    };
+  }
+  /**
+   * Render placeholder when form is empty in editor mode
+   */
+  renderPlaceholder() {
+    return d`
+      <div
+        class="form-placeholder"
+        @click="${() => v(this.component?.uuid)}"
+      >
+        <nr-icon name="file-text"></nr-icon>
+        <nr-label>Add form fields to this form</nr-label>
+        <drag-wrapper
+          .where=${"inside"}
+          .message=${"Drop inside"}
+          .component=${{ ...this.component }}
+          .inputRef=${this.inputRef}
+          .isDragInitiator=${this.isDragInitiator}
+        >
+        </drag-wrapper>
+      </div>
+    `;
+  }
+  /**
+   * Render children components
+   */
+  renderChildren() {
+    return _(
+      this.childrenComponents.map((t) => ({ ...t, item: this.item })),
+      this.item,
+      this.isViewMode,
+      { ...this.component, uniqueUUID: this.uniqueUUID }
+    );
+  }
+  renderComponent() {
+    const t = this.getStyles(), i = this.childrenComponents.length > 0;
+    return this.isViewMode ? d`
+        <nr-form
+          ${m(this.inputRef)}
+          class="${`drop-${this.component.uuid}`}"
+          style=${Object.entries(t).map(([e, r]) => `${e}:${r}`).join(";")}
+          .disabled=${this.inputHandlersValue?.disabled || !1}
+          .validateOnChange=${this.inputHandlersValue?.validateOnChange ?? !1}
+          .validateOnBlur=${this.inputHandlersValue?.validateOnBlur ?? !0}
+          .preventInvalidSubmission=${this.inputHandlersValue?.preventInvalidSubmission ?? !0}
+          .resetOnSuccess=${this.inputHandlersValue?.resetOnSuccess ?? !1}
+          .action=${this.inputHandlersValue?.action ?? h}
+          .method=${this.inputHandlersValue?.method ?? "POST"}
+          @nr-form-submit-success=${(e) => {
+      this.executeEvent("onSubmitSuccess", e, {
+        formData: e.detail?.formData,
+        values: this.getFieldsValue()
+      });
+    }}
+          @nr-form-submit-error=${(e) => {
+      this.executeEvent("onSubmitError", e, {
+        error: e.detail?.error
+      });
+    }}
+          @nr-form-validation-changed=${(e) => {
+      this.executeEvent("onValidationChange", e, {
+        validationResult: e.detail?.validationResult
+      });
+    }}
+          @nr-form-field-changed=${(e) => {
+      this.executeEvent("onFieldChange", e, {
+        field: e.detail?.field
+      });
+    }}
+          @nr-form-reset=${(e) => {
+      this.executeEvent("onReset", e, {});
+    }}
+        >
+          ${i ? this.renderChildren() : h}
+        </nr-form>
+      ` : d`
+      <nr-form
+        ${m(this.inputRef)}
+        class="${`drop-${this.component.uuid}`}"
+        style=${Object.entries(t).map(([e, r]) => `${e}:${r}`).join(";")}
+        .disabled=${this.inputHandlersValue?.disabled || !1}
+        .validateOnChange=${this.inputHandlersValue?.validateOnChange ?? !1}
+        .validateOnBlur=${this.inputHandlersValue?.validateOnBlur ?? !0}
+        .preventInvalidSubmission=${this.inputHandlersValue?.preventInvalidSubmission ?? !0}
+        .resetOnSuccess=${this.inputHandlersValue?.resetOnSuccess ?? !1}
+        .action=${this.inputHandlersValue?.action ?? h}
+        .method=${this.inputHandlersValue?.method ?? "POST"}
+        @nr-form-submit-success=${(e) => {
+      this.executeEvent("onSubmitSuccess", e, {
+        formData: e.detail?.formData,
+        values: this.getFieldsValue()
+      });
+    }}
+        @nr-form-submit-error=${(e) => {
+      this.executeEvent("onSubmitError", e, {
+        error: e.detail?.error
+      });
+    }}
+        @nr-form-validation-changed=${(e) => {
+      this.executeEvent("onValidationChange", e, {
+        validationResult: e.detail?.validationResult
+      });
+    }}
+        @nr-form-field-changed=${(e) => {
+      this.executeEvent("onFieldChange", e, {
+        field: e.detail?.field
+      });
+    }}
+        @nr-form-reset=${(e) => {
+      this.executeEvent("onReset", e, {});
+    }}
+      >
+        ${i ? this.renderChildren() : this.renderPlaceholder()}
+      </nr-form>
+    `;
+  }
+};
+s.styles = [b];
+l([
+  c({ type: Object })
+], s.prototype, "component", 2);
+l([
+  c({ type: Object })
+], s.prototype, "item", 2);
+l([
+  u()
+], s.prototype, "_formElement", 2);
+l([
+  u()
+], s.prototype, "_registeredFields", 2);
+l([
+  u()
+], s.prototype, "childrenComponents", 2);
+s = l([
+  $("form-block")
+], s);
+export {
+  s as FormBlock
+};

package/dist/Icon-CcLuhz6B.js

@@ -0,0 +1,64 @@
+import { B as u, n as h, A as l, o as d, b as y, c as p, t as b } from "./micro-app-entry-DiNqE6xi.js";
+var $ = Object.defineProperty, v = Object.getOwnPropertyDescriptor, r = (t, e, c, n) => {
+  for (var i = n > 1 ? void 0 : n ? v(e, c) : e, a = t.length - 1, s; a >= 0; a--)
+    (s = t[a]) && (i = (n ? s(e, c, i) : s(i)) || i);
+  return n && i && $(e, c, i), i;
+};
+try {
+  await import("@nuralyui/icon");
+} catch {
+  console.warn("[@nuralyui/icon] Package not found or failed to load.");
+}
+let o = class extends u {
+  constructor() {
+    super(), this.registerCallback("icon", () => {
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  renderComponent() {
+    const t = this.getStyles();
+    return y`
+      <nr-icon
+      ${h(this.inputRef)}
+        .name=${this.inputHandlersValue.icon ?? "smile"}
+        .type=${this.inputHandlersValue.type || "solid"}
+        .alt=${this.inputHandlersValue.alt || ""}
+        .size=${this.inputHandlersValue.size || l}
+        .color=${this.inputHandlersValue.color || l}
+        .width=${t?.width || l}
+        .height=${t?.height || l}
+        .clickable=${this.inputHandlersValue.clickable || !1}
+        .disabled=${this.inputHandlersValue.state === "disabled"}
+        @click=${(e) => {
+      this.executeEvent("onClick", e);
+    }}
+        @icon-click=${(e) => {
+      this.executeEvent("onIconClick", e);
+    }}
+        @icon-keyboard-activation=${(e) => {
+      this.executeEvent("onIconKeyboardActivation", e);
+    }}
+        style=${d({
+      display: "block",
+      ...this.getStyles(),
+      "--nuraly-icon-width": t?.width,
+      "--nuraly-icon-height": t?.height
+    })}>
+      </nr-icon>
+    `;
+  }
+};
+r([
+  p({ type: Object })
+], o.prototype, "component", 2);
+r([
+  p({ type: Object })
+], o.prototype, "item", 2);
+o = r([
+  b("icon-block")
+], o);
+export {
+  o as IconBlock
+};

package/dist/Icon-_UiLblGb.js

@@ -0,0 +1,74 @@
+import { nothing, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { ae as BaseElementBlock } from './BaseElement-pS6m_x6Q.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/icon');
+} catch (error) {
+  console.warn("[@nuralyui/icon] Package not found or failed to load.");
+}
+let IconBlock = class extends BaseElementBlock {
+  constructor() {
+    super();
+    this.registerCallback("icon", () => {
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  renderComponent() {
+    const iconStyles = this.getStyles();
+    return html`
+      <nr-icon
+      ${ref(this.inputRef)}
+        .name=${this.inputHandlersValue.icon ?? "smile"}
+        .type=${this.inputHandlersValue.type || "solid"}
+        .alt=${this.inputHandlersValue.alt || ""}
+        .size=${this.inputHandlersValue.size || nothing}
+        .color=${this.inputHandlersValue.color || nothing}
+        .width=${iconStyles?.width || nothing}
+        .height=${iconStyles?.height || nothing}
+        .clickable=${this.inputHandlersValue.clickable || false}
+        .disabled=${this.inputHandlersValue.state === "disabled"}
+        @click=${(e) => {
+      this.executeEvent("onClick", e);
+    }}
+        @icon-click=${(e) => {
+      this.executeEvent("onIconClick", e);
+    }}
+        @icon-keyboard-activation=${(e) => {
+      this.executeEvent("onIconKeyboardActivation", e);
+    }}
+        style=${styleMap({
+      display: "block",
+      ...this.getStyles(),
+      "--nuraly-icon-width": iconStyles?.width,
+      "--nuraly-icon-height": iconStyles?.height
+    })}>
+      </nr-icon>
+    `;
+  }
+};
+__decorateClass([
+  property({ type: Object })
+], IconBlock.prototype, "component", 2);
+__decorateClass([
+  property({ type: Object })
+], IconBlock.prototype, "item", 2);
+IconBlock = __decorateClass([
+  customElement("icon-block")
+], IconBlock);
+
+export { IconBlock };

package/dist/Image-B_VERIvH.js

@@ -0,0 +1,111 @@
+import { html, nothing, css } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { ae as BaseElementBlock } from './BaseElement-pS6m_x6Q.js';
+import { styleMap } from 'lit/directives/style-map.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/image');
+} catch (error) {
+  console.warn("[@nuralyui/image] Package not found or failed to load.");
+}
+let ImageBlock = class extends BaseElementBlock {
+  connectedCallback() {
+    super.connectedCallback();
+    this.isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
+      this.isDarkMode = event.matches;
+      this.requestUpdate();
+    });
+  }
+  renderComponent() {
+    const fallbackStyles = this.getStyles();
+    const imageStyles = this.getStyles() || {};
+    const imageStyleHandlers = this.component?.styleHandlers ? Object.fromEntries(
+      Object.entries(this.component?.styleHandlers).filter(([key, value]) => value)
+    ) : {};
+    const imageSrc = this.isDarkMode ? this.inputHandlersValue?.darkSrc ?? this.inputHandlersValue?.src : this.inputHandlersValue?.src;
+    if (!imageSrc) {
+      return html`
+        <div
+          ${ref(this.inputRef)}
+          class="image-placeholder"
+          style=${styleMap({
+        width: imageStyleHandlers?.width || imageStyles?.width || "100%",
+        height: imageStyleHandlers?.height || imageStyles?.height || "200px"
+      })}
+          @click=${(e) => this.executeEvent("onClick", e)}
+        >
+          <nr-icon name="image"></nr-icon>
+          <nr-label>No image source</nr-label>
+        </div>
+      `;
+    }
+    return html`
+      <nr-image
+        ${ref(this.inputRef)}
+        style=${styleMap({
+      ...this.getStyles(),
+      "display": "block",
+      "--nuraly-image-local-border-top-left-radius": fallbackStyles?.["border-top-left-radius"] ?? "",
+      "--nuraly-image-local-border-top-right-radius": fallbackStyles?.["border-top-right-radius"] ?? "",
+      "--nuraly-image-local-border-bottom-left-radius": fallbackStyles?.["border-bottom-left-radius"] ?? "",
+      "--nuraly-image-local-border-bottom-right-radius": fallbackStyles?.["border-bottom-right-radius"] ?? ""
+    })}
+        .src=${imageSrc}
+        .fallback=${this.inputHandlersValue?.fallback ?? nothing}
+        .previewable=${this.inputHandlersValue?.previewable ?? false}
+        .fit=${this.inputHandlersValue?.fit ?? nothing}
+        .block=${this.inputHandlersValue?.block ?? false}
+        .width=${imageStyleHandlers?.width || imageStyles?.width}
+        .height=${imageStyleHandlers?.height || imageStyles?.height}
+        .alt=${this.inputHandlersValue?.alt ?? "image"}
+        @click=${(e) => this.executeEvent("onClick", e)}
+        @nr-image-error=${(e) => this.executeEvent("onError", e)}
+        @nr-image-load=${(e) => this.executeEvent("onLoad", e)}
+        @nr-image-preview-open=${(e) => this.executeEvent("onPreviewOpen", e)}
+        @nr-image-preview-close=${(e) => this.executeEvent("onPreviewClose", e)}
+      >
+      </nr-image>
+    `;
+  }
+};
+ImageBlock.styles = [css`
+    :host {
+      display: block;
+    }
+    .image-placeholder {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: #64748b;
+      min-height: 200px;
+      min-width: 200px;
+      border-radius: 8px;
+      border: 2px dashed #cbd5e1;
+      gap: 12px;
+      box-sizing: border-box;
+    }
+    .image-placeholder nr-icon {
+      --nuraly-icon-size: 48px;
+    }
+  `];
+__decorateClass([
+  property({ type: Object })
+], ImageBlock.prototype, "component", 2);
+ImageBlock = __decorateClass([
+  customElement("image-block")
+], ImageBlock);
+
+export { ImageBlock };

package/dist/Image-hI8kIx8U.js

@@ -0,0 +1,93 @@
+import { B as u, n, o as c, b as d, A as h, i as m, c as g, t as b } from "./micro-app-entry-DiNqE6xi.js";
+var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, p = (t, r, i, a) => {
+  for (var e = a > 1 ? void 0 : a ? y(r, i) : r, l = t.length - 1, s; l >= 0; l--)
+    (s = t[l]) && (e = (a ? s(r, i, e) : s(e)) || e);
+  return a && e && f(r, i, e), e;
+};
+try {
+  await import("@nuralyui/image");
+} catch {
+  console.warn("[@nuralyui/image] Package not found or failed to load.");
+}
+let o = class extends u {
+  connectedCallback() {
+    super.connectedCallback(), this.isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches, window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (t) => {
+      this.isDarkMode = t.matches, this.requestUpdate();
+    });
+  }
+  renderComponent() {
+    const t = this.getStyles(), r = this.getStyles() || {}, i = this.component?.styleHandlers ? Object.fromEntries(
+      Object.entries(this.component?.styleHandlers).filter(([e, l]) => l)
+    ) : {}, a = this.isDarkMode ? this.inputHandlersValue?.darkSrc ?? this.inputHandlersValue?.src : this.inputHandlersValue?.src;
+    return a ? d`
+      <nr-image
+        ${n(this.inputRef)}
+        style=${c({
+      ...this.getStyles(),
+      display: "block",
+      "--nuraly-image-local-border-top-left-radius": t?.["border-top-left-radius"] ?? "",
+      "--nuraly-image-local-border-top-right-radius": t?.["border-top-right-radius"] ?? "",
+      "--nuraly-image-local-border-bottom-left-radius": t?.["border-bottom-left-radius"] ?? "",
+      "--nuraly-image-local-border-bottom-right-radius": t?.["border-bottom-right-radius"] ?? ""
+    })}
+        .src=${a}
+        .fallback=${this.inputHandlersValue?.fallback ?? h}
+        .previewable=${this.inputHandlersValue?.previewable ?? !1}
+        .fit=${this.inputHandlersValue?.fit ?? h}
+        .block=${this.inputHandlersValue?.block ?? !1}
+        .width=${i?.width || r?.width}
+        .height=${i?.height || r?.height}
+        .alt=${this.inputHandlersValue?.alt ?? "image"}
+        @click=${(e) => this.executeEvent("onClick", e)}
+        @nr-image-error=${(e) => this.executeEvent("onError", e)}
+        @nr-image-load=${(e) => this.executeEvent("onLoad", e)}
+        @nr-image-preview-open=${(e) => this.executeEvent("onPreviewOpen", e)}
+        @nr-image-preview-close=${(e) => this.executeEvent("onPreviewClose", e)}
+      >
+      </nr-image>
+    ` : d`
+        <div
+          ${n(this.inputRef)}
+          class="image-placeholder"
+          style=${c({
+      width: i?.width || r?.width || "100%",
+      height: i?.height || r?.height || "200px"
+    })}
+          @click=${(e) => this.executeEvent("onClick", e)}
+        >
+          <nr-icon name="image"></nr-icon>
+          <nr-label>No image source</nr-label>
+        </div>
+      `;
+  }
+};
+o.styles = [m`
+    :host {
+      display: block;
+    }
+    .image-placeholder {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: #64748b;
+      min-height: 200px;
+      min-width: 200px;
+      border-radius: 8px;
+      border: 2px dashed #cbd5e1;
+      gap: 12px;
+      box-sizing: border-box;
+    }
+    .image-placeholder nr-icon {
+      --nuraly-icon-size: 48px;
+    }
+  `];
+p([
+  g({ type: Object })
+], o.prototype, "component", 2);
+o = p([
+  b("image-block")
+], o);
+export {
+  o as ImageBlock
+};