@nuraly/runtime 0.1.9 → 0.1.11

package/dist/TextInput-CV850FvO.js

@@ -0,0 +1,193 @@
+import { nothing, html, css } from 'lit';
+import { property, state, customElement } from 'lit/decorators.js';
+import { ae as BaseElementBlock } from './BaseElement-wyA58UxT.js';
+import { ref } from 'lit/directives/ref.js';
+
+function registerWithParentForm(element, nrElement) {
+  const name = element.inputHandlersValue?.name;
+  if (!name || !nrElement) {
+    return;
+  }
+  element.dispatchEvent(new CustomEvent("nr-field-register", {
+    bubbles: true,
+    composed: true,
+    detail: {
+      element: nrElement,
+      name,
+      blockElement: element
+    }
+  }));
+}
+function unregisterFromParentForm(element) {
+  const name = element.inputHandlersValue?.name;
+  if (!name) {
+    return;
+  }
+  element.dispatchEvent(new CustomEvent("nr-field-unregister", {
+    bubbles: true,
+    composed: true,
+    detail: {
+      name,
+      blockElement: element
+    }
+  }));
+}
+
+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/input');
+} catch (error) {
+  console.warn("[@nuralyui/input] Package not found or failed to load.");
+}
+let TextInputBlock = class extends BaseElementBlock {
+  constructor() {
+    super();
+    this.currentValue = "";
+    this._isUserFocused = false;
+    this._focusResetTimeout = null;
+    this._inputElement = null;
+  }
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+    this.registerCallback("value", (value) => {
+      if (!this._isUserFocused && this.currentValue !== value) {
+        this.currentValue = value ?? "";
+      }
+    });
+    this._inputElement = this.renderRoot.querySelector("nr-input");
+    if (this._inputElement && this.inputHandlersValue?.name) {
+      registerWithParentForm(this, this._inputElement);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.unsubscribe) this.unsubscribe();
+    if (this._focusResetTimeout) clearTimeout(this._focusResetTimeout);
+    if (this.inputHandlersValue?.name) {
+      unregisterFromParentForm(this);
+    }
+  }
+  resetFocusAfterInactivity() {
+    if (this._focusResetTimeout) {
+      clearTimeout(this._focusResetTimeout);
+    }
+    this._focusResetTimeout = setTimeout(() => {
+      this._isUserFocused = false;
+    }, 3e3);
+  }
+  renderComponent() {
+    this.getStyles();
+    const componentStyles = this.component?.style || {};
+    componentStyles?.size || "medium";
+    return html`
+        <nr-input
+        ${ref(this.inputRef)}
+     class="${`drop-${this.component.uuid}`}"
+         
+          .value=${this.inputHandlersValue?.value ?? nothing}
+          .size=${this.inputHandlersValue?.size ?? "medium"}
+          .state=${this.inputHandlersValue.status ?? nothing}
+          .type=${this.inputHandlersValue.type ?? nothing}
+          .variant=${this.inputHandlersValue.variant ?? nothing}
+          .disabled=${this.inputHandlersValue.state === "disabled"}
+          .readonly=${this.inputHandlersValue.readonly || false}
+          .placeholder=${this.inputHandlersValue?.placeholder ?? "Text input"}
+          .step=${this.inputHandlersValue?.step ?? nothing}
+          .min=${this.inputHandlersValue?.min ?? nothing}
+          .max=${this.inputHandlersValue?.max ?? nothing}
+          .name=${this.inputHandlersValue?.name ?? nothing}
+          .required=${this.inputHandlersValue?.required || false}
+          .withCopy=${this.inputHandlersValue?.withCopy || false}
+          .allowClear=${this.inputHandlersValue?.allowClear || false}
+          .showCount=${this.inputHandlersValue?.showCount || false}
+          .maxLength=${this.inputHandlersValue?.maxLength ?? nothing}
+          .rules=${this.inputHandlersValue?.rules ?? []}
+          .validateOnChangeInput=${this.inputHandlersValue?.validateOnChange !== false}
+          .validateOnBlurInput=${this.inputHandlersValue?.validateOnBlur !== false}
+          .hasFeedback=${this.inputHandlersValue?.hasFeedback || false}
+          .autocomplete=${this.inputHandlersValue?.autocomplete ?? "off"}
+          @nr-input=${(e) => {
+      this._isUserFocused = true;
+      this.executeEvent(
+        "onChange",
+        e,
+        {
+          value: e.detail.value,
+          oldValue: e.detail.oldValue
+        }
+      );
+      this.resetFocusAfterInactivity();
+    }}
+          @nr-focus=${(e) => {
+      this._isUserFocused = true;
+      this.executeEvent("onFocus", e, {
+        value: e.detail.value
+      });
+    }}
+          @nr-blur=${(e) => {
+      this._isUserFocused = false;
+      this.executeEvent("onBlur", e, {
+        value: e.detail.value
+      });
+    }}
+          @nr-enter=${(e) => {
+      this.executeEvent("onEnter", e, {
+        value: e.detail.value
+      });
+    }}
+          @nr-clear=${(e) => {
+      this.executeEvent("onClear", e, {
+        value: e.detail.value
+      });
+    }}
+          @keydown=${(e) => {
+      if (e.key === "ArrowUp") {
+        this.executeEvent("onArrowUp", e);
+      } else if (e.key === "ArrowDown") {
+        this.executeEvent("onArrowDown", e);
+      }
+    }}
+        >
+          <span
+            slot="label"
+           
+          >
+            ${this.inputHandlersValue?.label ?? ""}
+          </span>
+          <span
+            slot="helper-text"
+           
+          >
+            ${this.inputHandlersValue?.helper ?? ""}
+          </span>
+        </nr-input>
+    `;
+  }
+};
+TextInputBlock.styles = [css``];
+__decorateClass([
+  property({ type: Object })
+], TextInputBlock.prototype, "component", 2);
+__decorateClass([
+  property({ type: Object })
+], TextInputBlock.prototype, "item", 2);
+__decorateClass([
+  state()
+], TextInputBlock.prototype, "currentValue", 2);
+__decorateClass([
+  state()
+], TextInputBlock.prototype, "_isUserFocused", 2);
+TextInputBlock = __decorateClass([
+  customElement("text-input-block")
+], TextInputBlock);
+
+export { TextInputBlock };

package/dist/TextLabel-CbSGmoVY.js

@@ -0,0 +1,102 @@
+import { css, nothing, html } from 'lit';
+import { property, state, customElement } from 'lit/decorators.js';
+import { ae as BaseElementBlock } from './BaseElement-wyA58UxT.js';
+import { ref } from 'lit/directives/ref.js';
+
+const textLabelStyles = css`
+label{
+    color:var(--text-label-color);
+    user-select: none
+}
+
+:host{
+    display: flex;
+    width:fit-content;
+}
+
+@media (prefers-color-scheme: dark) {
+    :host { 
+      }
+ }
+
+`;
+const styles = [textLabelStyles];
+
+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/label');
+} catch (error) {
+  console.warn("[@nuralyui/label] Package not found or failed to load.");
+}
+let TextLabelBlock = class extends BaseElementBlock {
+  constructor() {
+    super();
+    this.isEditable = false;
+    this.registerCallback("innerAlignment", (value) => {
+      if (this.closestGenericComponentWrapper) {
+        if (this.inputHandlersValue?.innerAlignment === "end") {
+          this.closestGenericComponentWrapper.style.marginLeft = "auto";
+        } else {
+          this.closestGenericComponentWrapper.style.marginLeft = "unset";
+        }
+      }
+    });
+  }
+  renderComponent() {
+    return html`
+     <nr-label
+     class="${`drop-${this.component.uuid}`}"
+     @input=${(e) => {
+      const eventData = { ["value"]: { type: "string", value: e.target.innerText } };
+      this.executeEvent("onInput", e, eventData);
+    }}
+          ${ref(this.inputRef)}
+            id=${this.component.uuid}
+            .size=${this.inputHandlersValue.size ?? "medium"}
+            .variant=${this.inputHandlersValue.variant || "default"}
+            .required=${this.inputHandlersValue.required || false}
+            .disabled=${this.inputHandlersValue.state === "disabled"}
+            .for=${this.inputHandlersValue.for || nothing}
+            .value=${this.inputHandlersValue.value || ""}
+            contentEditable="${this.isEditable}"
+            @click=${(e) => {
+      this.executeEvent("onClick", e);
+    }}
+            @mouseenter=${(e) => {
+      this.executeEvent("onMouseEnter", e);
+    }}
+            @mouseleave=${(e) => {
+      this.executeEvent("onMouseLeave", e);
+    }}
+      
+            @dblclick=${(e) => {
+      e.preventDefault();
+      this.isEditable = true;
+    }}>${this.inputHandlersValue.value || "Text label"}</nr-label>
+    `;
+  }
+};
+TextLabelBlock.styles = styles;
+__decorateClass([
+  property({ type: Object })
+], TextLabelBlock.prototype, "component", 2);
+__decorateClass([
+  property({ type: Object })
+], TextLabelBlock.prototype, "item", 2);
+__decorateClass([
+  state()
+], TextLabelBlock.prototype, "isEditable", 2);
+TextLabelBlock = __decorateClass([
+  customElement("text-label-block")
+], TextLabelBlock);
+
+export { TextLabelBlock };

package/dist/Textarea-Bncyxfts.js

@@ -0,0 +1,83 @@
+import { B as _, n as P, o as R, b as j, i as F, c as h, t as T } from "./micro-app-entry-BgDXbkmh.js";
+var q = Object.defineProperty, L = Object.getOwnPropertyDescriptor, o = (l, a, s, n) => {
+  for (var t = n > 1 ? void 0 : n ? L(a, s) : a, i = l.length - 1, r; i >= 0; i--)
+    (r = l[i]) && (t = (n ? r(a, s, t) : r(t)) || t);
+  return n && t && q(a, s, t), t;
+};
+try {
+  await import("@nuralyui/textarea");
+} catch {
+  console.warn("[@nuralyui/textarea] Package not found or failed to load.");
+}
+let u = class extends _ {
+  renderComponent() {
+    const l = this.component?.style || {}, a = this.inputHandlersValue?.value ?? "", s = this.inputHandlersValue?.placeholder ?? "", n = this.inputHandlersValue?.label ?? "", t = this.inputHandlersValue?.helperText ?? this.inputHandlersValue?.helper ?? "", i = this.inputHandlersValue?.disabled ?? (this.inputHandlersValue?.state === "disabled" || !1), r = this.inputHandlersValue?.readonly ?? !1, c = this.inputHandlersValue?.required ?? !1, d = this.inputHandlersValue?.allowClear ?? !1, p = this.inputHandlersValue?.showCount ?? !1, H = this.inputHandlersValue?.autoResize ?? !1, $ = this.inputHandlersValue?.size ?? "medium", v = this.inputHandlersValue?.variant ?? "", V = this.inputHandlersValue?.state ?? "default", m = this.inputHandlersValue?.resize ?? "vertical", x = this.inputHandlersValue?.rows ?? 4, f = this.inputHandlersValue?.cols, b = this.inputHandlersValue?.maxLength, g = this.inputHandlersValue?.minHeight, w = this.inputHandlersValue?.maxHeight, C = this.inputHandlersValue?.rules ?? [], y = this.inputHandlersValue?.name, O = this.inputHandlersValue?.autocomplete ?? "off", z = this.inputHandlersValue?.validateOnChange ?? !0, B = this.inputHandlersValue?.validateOnBlur ?? !0, E = this.inputHandlersValue?.hasFeedback ?? !1;
+    return j`
+      <nr-textarea
+        ${P(this.inputRef)}
+        style=${R(l)}
+        .value=${a}
+        .placeholder=${s}
+        .label=${n}
+        .helperText=${t}
+        .size=${$}
+        .variant=${v}
+        .state=${V}
+        .resize=${m}
+        .rows=${x}
+        .cols=${f}
+        .maxLength=${b}
+        .minHeight=${g}
+        .maxHeight=${w}
+        .rules=${C}
+        .name=${y}
+        .autocomplete=${O}
+        ?disabled=${i}
+        ?readonly=${r}
+        ?required=${c}
+        ?allowClear=${d}
+        ?showCount=${p}
+        ?autoResize=${H}
+        ?validateOnChange=${z}
+        ?validateOnBlur=${B}
+        ?hasFeedback=${E}
+        @nr-textarea-change=${(e) => {
+      this.executeEvent("onChange", e, {
+        value: e.detail.value,
+        characterCount: e.detail.characterCount
+      });
+    }}
+        @nr-focus=${(e) => {
+      this.executeEvent("onFocus", e);
+    }}
+        @nr-blur=${(e) => {
+      this.executeEvent("onBlur", e, {
+        value: e.detail.value
+      });
+    }}
+        @nr-clear=${(e) => {
+      this.executeEvent("onClear", e);
+    }}
+        @nr-resize=${(e) => {
+      this.executeEvent("onResize", e, {
+        height: e.detail.height,
+        width: e.detail.width
+      });
+    }}
+      ></nr-textarea>
+    `;
+  }
+};
+u.styles = [F``];
+o([
+  h({ type: Object })
+], u.prototype, "component", 2);
+o([
+  h({ type: Object })
+], u.prototype, "item", 2);
+u = o([
+  T("textarea-block")
+], u);
+export {
+  u as TextareaBlock
+};

package/dist/Textarea-SEbx4KI5.js

@@ -0,0 +1,117 @@
+import { html, css } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.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/textarea');
+} catch (error) {
+  console.warn("[@nuralyui/textarea] Package not found or failed to load.");
+}
+let TextareaBlock = class extends BaseElementBlock {
+  renderComponent() {
+    const textareaStyles = this.component?.style || {};
+    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;
+    const size = this.inputHandlersValue?.size ?? "medium";
+    const variant = this.inputHandlersValue?.variant ?? "";
+    const state = this.inputHandlersValue?.state ?? "default";
+    const resize = this.inputHandlersValue?.resize ?? "vertical";
+    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;
+    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
+        ${ref(this.inputRef)}
+        style=${styleMap(textareaStyles)}
+        .value=${value}
+        .placeholder=${placeholder}
+        .label=${label}
+        .helperText=${helperText}
+        .size=${size}
+        .variant=${variant}
+        .state=${state}
+        .resize=${resize}
+        .rows=${rows}
+        .cols=${cols}
+        .maxLength=${maxLength}
+        .minHeight=${minHeight}
+        .maxHeight=${maxHeight}
+        .rules=${rules}
+        .name=${name}
+        .autocomplete=${autocomplete}
+        ?disabled=${disabled}
+        ?readonly=${readonly}
+        ?required=${required}
+        ?allowClear=${allowClear}
+        ?showCount=${showCount}
+        ?autoResize=${autoResize}
+        ?validateOnChange=${validateOnChange}
+        ?validateOnBlur=${validateOnBlur}
+        ?hasFeedback=${hasFeedback}
+        @nr-textarea-change=${(e) => {
+      this.executeEvent("onChange", e, {
+        value: e.detail.value,
+        characterCount: e.detail.characterCount
+      });
+    }}
+        @nr-focus=${(e) => {
+      this.executeEvent("onFocus", e);
+    }}
+        @nr-blur=${(e) => {
+      this.executeEvent("onBlur", e, {
+        value: e.detail.value
+      });
+    }}
+        @nr-clear=${(e) => {
+      this.executeEvent("onClear", e);
+    }}
+        @nr-resize=${(e) => {
+      this.executeEvent("onResize", e, {
+        height: e.detail.height,
+        width: e.detail.width
+      });
+    }}
+      ></nr-textarea>
+    `;
+  }
+};
+TextareaBlock.styles = [css``];
+__decorateClass([
+  property({ type: Object })
+], TextareaBlock.prototype, "component", 2);
+__decorateClass([
+  property({ type: Object })
+], TextareaBlock.prototype, "item", 2);
+TextareaBlock = __decorateClass([
+  customElement("textarea-block")
+], TextareaBlock);
+
+export { TextareaBlock };

package/dist/Video--shJ014h.js

@@ -0,0 +1,120 @@
+import { html, nothing, css } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { ae as BaseElementBlock } from './BaseElement-wyA58UxT.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/video');
+} catch (error) {
+  console.warn("[@nuralyui/video] Package not found or failed to load.");
+}
+let VideoBlock = class extends BaseElementBlock {
+  renderComponent() {
+    const videoStyles = this.getStyles() || {};
+    const videoStyleHandlers = this.component?.styleHandlers ? Object.fromEntries(
+      Object.entries(this.component?.styleHandlers).filter(([key, value]) => value)
+    ) : {};
+    const src = this.inputHandlersValue?.src;
+    const poster = this.inputHandlersValue?.poster;
+    const autoplay = this.inputHandlersValue?.autoplay ?? false;
+    const controls = this.inputHandlersValue?.controls ?? true;
+    const loop = this.inputHandlersValue?.loop ?? false;
+    const muted = this.inputHandlersValue?.muted ?? false;
+    const preload = this.inputHandlersValue?.preload ?? "metadata";
+    if (!src) {
+      return html`
+        <div
+          ${ref(this.inputRef)}
+          class="video-placeholder"
+          style=${styleMap({
+        ...this.getStyles(),
+        width: videoStyleHandlers?.width || videoStyles?.width || "100%",
+        height: videoStyleHandlers?.height || videoStyles?.height || "200px"
+      })}
+          @click=${(e) => this.executeEvent("onClick", e)}
+        >
+          <nr-icon name="video"></nr-icon>
+          <nr-label>No video source</nr-label>
+        </div>
+      `;
+    }
+    return html`
+      <nr-video-player
+        ${ref(this.inputRef)}
+        style=${styleMap({
+      ...this.getStyles(),
+      "display": "block"
+    })}
+        .src=${src}
+        .poster=${poster ?? nothing}
+        .autoplay=${autoplay}
+        .controls=${controls}
+        .loop=${loop}
+        .muted=${muted}
+        .preload=${preload}
+        .width=${videoStyleHandlers?.width || videoStyles?.width}
+        .height=${videoStyleHandlers?.height || videoStyles?.height}
+        @click=${(e) => this.executeEvent("onClick", e)}
+        @play=${(e) => this.executeEvent("onPlay", e)}
+        @pause=${(e) => this.executeEvent("onPause", e)}
+        @ended=${(e) => this.executeEvent("onEnded", e)}
+        @loadeddata=${(e) => this.executeEvent("onLoad", e)}
+        @error=${(e) => this.executeEvent("onError", e)}
+        @timeupdate=${(e) => {
+      const video = e.target;
+      this.executeEvent("onTimeUpdate", e, {
+        currentTime: video?.currentTime,
+        duration: video?.duration
+      });
+    }}
+        @volumechange=${(e) => {
+      const video = e.target;
+      this.executeEvent("onVolumeChange", e, {
+        volume: video?.volume,
+        muted: video?.muted
+      });
+    }}
+      >
+      </nr-video-player>
+    `;
+  }
+};
+VideoBlock.styles = [css`
+    .video-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;
+    }
+    .video-placeholder nr-icon {
+      --nuraly-icon-size: 48px;
+    }
+    .video-placeholder span {
+      font-size: 14px;
+      font-weight: 500;
+    }
+  `];
+__decorateClass([
+  property({ type: Object })
+], VideoBlock.prototype, "component", 2);
+VideoBlock = __decorateClass([
+  customElement("video-block")
+], VideoBlock);
+
+export { VideoBlock };