@nuraly/runtime 0.1.6 → 0.1.8

package/components/ui/components/display/Image/Image.ts

@@ -1,4 +1,4 @@
-import { html, nothing } from "lit";
+import { html, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { type ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
 import { BaseElementBlock } from "../../base/BaseElement.ts";
@@ -12,69 +12,95 @@ try {
   console.warn('[@nuralyui/image] Package not found or failed to load.');
 }
 
-
-
 @customElement("image-block")
 export class ImageBlock extends BaseElementBlock {
+  static 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;
+    }
+  `];
+
   @property({ type: Object })
   component: ComponentElement;
   isDarkMode: boolean;
 
-  async connectedCallback(): Promise<void> {
-     await super.connectedCallback();
-     this.isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
-     window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
+  override 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 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;
-      
+
+    const imageSrc = this.isDarkMode
+      ? this.inputHandlersValue?.darkSrc ?? this.inputHandlersValue?.src
+      : this.inputHandlersValue?.src;
+
+    // Show placeholder when no image source
+    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: MouseEvent) => 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({
+        ${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 ?? nothing}
-        .fallback=${this.inputHandlersValue.fallback ?? nothing}
-        .previewable=${this.inputHandlersValue.previewable ?? false}
-        .fit=${this.inputHandlersValue.fit ?? nothing}
-        .block=${this.inputHandlersValue.block ?? false}
-        .width=${imageStyleHandlers?.width ? imageStyleHandlers.width : imageStyles?.width}
-        .height=${imageStyleHandlers?.height ? imageStyleHandlers?.height : imageStyles?.height}
-        .alt=${this.inputHandlersValue.alt ?? "image"}
-        @click=${(e: MouseEvent) => {
-          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);
-        }}
+          "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: MouseEvent) => this.executeEvent("onClick", e)}
+        @nr-image-error=${(e: Event) => this.executeEvent("onError", e)}
+        @nr-image-load=${(e: Event) => this.executeEvent("onLoad", e)}
+        @nr-image-preview-open=${(e: Event) => this.executeEvent("onPreviewOpen", e)}
+        @nr-image-preview-close=${(e: Event) => this.executeEvent("onPreviewClose", e)}
       >
       </nr-image>
     `;

package/components/ui/components/display/Tag/Tag.ts

@@ -37,18 +37,17 @@ export class TagBlock extends BaseElementBlock {
       <nr-tag
         ${ref(this.inputRef)}
         style=${styleMap(tagStyles)}
-        .label=${label}
         .color=${color}
-        .icon=${icon}
         ?closable=${closable}
         ?bordered=${bordered}
-        @nr-close=${(e: CustomEvent) => {
+        @nr-tag-close=${(e: CustomEvent) => {
           this.executeEvent('onClose', e);
         }}
         @click=${(e: MouseEvent) => {
           this.executeEvent('onClick', e);
         }}
       >
+        ${icon ? html`<nr-icon slot="icon" .name=${icon}></nr-icon>` : ''}
         ${label}
       </nr-tag>
     `;

package/components/ui/components/display/Video/Video.ts

@@ -1,4 +1,4 @@
-import { html, nothing } from "lit";
+import { html, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { type ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
 import { BaseElementBlock } from "../../base/BaseElement.ts";
@@ -12,42 +12,102 @@ try {
   console.warn('[@nuralyui/video] Package not found or failed to load.');
 }
 
+@customElement("video-block")
+export class VideoBlock extends BaseElementBlock {
+  static 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;
+    }
+  `];
 
+  @property({ type: Object })
+  component: ComponentElement;
 
-@customElement("video-block")
-export class ImageBlock extends BaseElementBlock {
-    @property({ type: Object })
-    component: ComponentElement;
-    isDarkMode: boolean;
+  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';
 
-    renderComponent() {
+    // Show placeholder when no video source
+    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: MouseEvent) => this.executeEvent("onClick", e)}
+        >
+          <nr-icon name="video"></nr-icon>
+          <nr-label>No video source</nr-label>
+        </div>
+      `;
+    }
 
-        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;
-        return html`
+    return html`
       <nr-video-player
-      ${ref(this.inputRef)}
-      @click=${(e: MouseEvent) => {
-                this.executeEvent("onClick", e);
-            }}
-      style=${styleMap({
-                ...this.getStyles(),
-                "display": "block",
-            },
-
-            )
-            }
-        .src=${imageSrc ?? nothing}
-        .previewable=${this.inputHandlersValue.previewable ?? nothing}
-        .width=${imageStyleHandlers?.width ? imageStyleHandlers.width : imageStyles?.width}
-        .height=${imageStyleHandlers?.height ? imageStyleHandlers?.height : imageStyles?.height}
+        ${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: MouseEvent) => this.executeEvent("onClick", e)}
+        @play=${(e: Event) => this.executeEvent("onPlay", e)}
+        @pause=${(e: Event) => this.executeEvent("onPause", e)}
+        @ended=${(e: Event) => this.executeEvent("onEnded", e)}
+        @loadeddata=${(e: Event) => this.executeEvent("onLoad", e)}
+        @error=${(e: Event) => this.executeEvent("onError", e)}
+        @timeupdate=${(e: Event) => {
+          const video = e.target as HTMLVideoElement;
+          this.executeEvent("onTimeUpdate", e, {
+            currentTime: video?.currentTime,
+            duration: video?.duration
+          });
+        }}
+        @volumechange=${(e: Event) => {
+          const video = e.target as HTMLVideoElement;
+          this.executeEvent("onVolumeChange", e, {
+            volume: video?.volume,
+            muted: video?.muted
+          });
+        }}
       >
-      </<nr-video-player>
+      </nr-video-player>
     `;
-    }
+  }
 }

package/components/ui/components/inputs/Button/Button.ts

@@ -30,8 +30,8 @@ export class ButtonBlock extends BaseElementBlock {
   @state()
   display: any = false;
 
-  override async connectedCallback() {
-    await super.connectedCallback();
+  override connectedCallback() {
+    super.connectedCallback();
     this.registerCallback("value", () => {});
   }
 

package/components/ui/components/inputs/Checkbox/Checkbox.ts

@@ -1,7 +1,5 @@
-import { css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { type ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
 import { BaseElementBlock } from "../../base/BaseElement.ts";
 import { ref } from "lit/directives/ref.js";
 
@@ -15,68 +13,44 @@ try {
 
 @customElement("checkbox-block")
 export class CheckboxBlock extends BaseElementBlock {
-  static styles = [
-    css``,
-  ];
-
-  @property({ type: Object })
-  component: ComponentElement;
-
-  unsubscribe: () => void;
-
-  override async connectedCallback() {
-    await super.connectedCallback();
-    this.registerCallback("value", () => {});
-  }
-
-  override disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.unsubscribe) this.unsubscribe();
-  }
 
   renderComponent() {
-    const checkBoxStyles = this.component?.style || {};
-    const size = checkBoxStyles.size as 'small' | 'medium' | 'large' | undefined;
-
     return html`
       <nr-checkbox
+        class="${`drop-${this.component.uuid}`}"
         ${ref(this.inputRef)}
-        style=${styleMap({
-          ...this.getStyles(),
-        })}
-        .checked=${this.inputHandlersValue?.value}
-        .indeterminate=${this.inputHandlersValue?.checked == "indeterminate"}
-        .disabled=${this.inputHandlersValue?.state == "disabled"}
-        .size=${size || 'medium'}
+        .checked=${this.inputHandlersValue?.value === true}
+        .indeterminate=${this.inputHandlersValue?.value === "indeterminate"}
+        .disabled=${this.inputHandlersValue?.disabled}
+        .size=${this.inputHandlersValue?.size || 'medium'}
         .name=${this.inputHandlersValue?.name || ''}
         .value=${this.inputHandlersValue?.value || ''}
-        .required=${this.inputHandlersValue?.required || false}
         .autoFocus=${this.inputHandlersValue?.autoFocus || false}
         .id=${this.inputHandlersValue?.id || ''}
         .title=${this.inputHandlersValue?.title || ''}
         .tabIndex=${this.inputHandlersValue?.tabIndex || 0}
-        @nr-change=${(e) => {
+        @nr-change=${(e : CustomEvent) => {
           this.executeEvent('onChange', e , {
             checked: e.detail.checked
           });
         }}
-        @nr-focus=${(e) => {
+        @nr-focus=${(e : CustomEvent) => {
           this.executeEvent('onFocus', e);
         }}
-        @nr-blur=${(e) => {
+        @nr-blur=${(e : CustomEvent) => {
           this.executeEvent('onBlur', e);
         }}
-        @nr-keydown=${(e) => {
+        @nr-keydown=${(e : CustomEvent) => {
           this.executeEvent('onKeydown', e);
         }}
-        @nr-mouseenter=${(e) => {
+        @nr-mouseenter=${(e : CustomEvent) => {
           this.executeEvent('onMouseEnter', e);
         }}
-        @nr-mouseleave=${(e) => {
+        @nr-mouseleave=${(e : CustomEvent) => {
           this.executeEvent('onMouseLeave', e);
         }}
       >
-        ${this.inputHandlersValue?.label ?? ""}
+       <nr-label .size=${this.inputHandlersValue?.size || 'medium'}> ${this.inputHandlersValue?.label ?? ""}</nr-label>
       </nr-checkbox>
     `;
   }

package/components/ui/components/inputs/ColorPicker/colorpicker.ts

@@ -4,7 +4,7 @@ import { styleMap } from "lit/directives/style-map.js";
 import { type ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
 import { BaseElementBlock } from "../../base/BaseElement.ts";
 import { ref } from "lit/directives/ref.js";
-// import "@nuralyui/color-picker";
+import "@nuralyui/color-picker";
 import { EMPTY_STRING } from '../../../../../utils/constants.ts';
 
 @customElement("color-picker-block")
@@ -16,8 +16,8 @@ export class ColorPickerBlock extends BaseElementBlock {
   @property({ type: Object })
   component: ComponentElement;
 
-  override async connectedCallback() {
-    await super.connectedCallback();
+  override connectedCallback() {
+    super.connectedCallback();
     this.registerCallback("value", () => {});
   }
 
@@ -50,7 +50,6 @@ export class ColorPickerBlock extends BaseElementBlock {
         .helperText=${this.inputHandlersValue?.helperText || ''}
         .defaultColorSets=${this.inputHandlersValue?.defaultColorSets || []}
         @nr-color-change=${(e) => {
-          console.log(e.detail)
           this.executeEvent('onChange', e, { value: e.detail.color });
         }}
         @nr-colorpicker-open=${(e) => {

package/components/ui/components/inputs/DatePicker/DatePicker.ts

@@ -1,18 +1,8 @@
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { styleMap } from "lit/directives/style-map.js";
 import { type ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
 import { BaseElementBlock } from "../../base/BaseElement.ts";
-import { executeHandler } from '../../../../../state/runtime-context.ts';
-import { getNestedAttribute } from '../../../../../utils/object.utils.ts';
 import { ref } from "lit/directives/ref.js";
-
-// Safely import @nuralyui/select
-try {
-  await import("@nuralyui/select");
-} catch (error) {
-  console.warn('[@nuralyui/select] Package not found or failed to load.');
-}
 // Safely import @nuralyui/datepicker
 try {
   await import("@nuralyui/datepicker");
@@ -28,13 +18,40 @@ export class DatepickertBlock extends BaseElementBlock {
 
 
   handleDateChange = (customEvent: CustomEvent) => {
-    if (this.component.event?.dateChange) {
-      executeHandler(this.component, getNestedAttribute(this.component, `event.dateChange`), {
-        EventData: {
-          value: customEvent.detail?.date || customEvent.detail
-        }
-      });
-    }
+    this.executeEvent('onDateChange', customEvent, {
+      value: customEvent.detail?.value || customEvent.detail?.date || customEvent.detail
+    });
+  };
+
+  handleRangeChange = (customEvent: CustomEvent) => {
+    this.executeEvent('onRangeChange', customEvent, {
+      startDate: customEvent.detail?.startDate,
+      endDate: customEvent.detail?.endDate,
+      value: customEvent.detail?.value
+    });
+  };
+
+  handleCalendarOpen = (customEvent: CustomEvent) => {
+    this.executeEvent('onCalendarOpen', customEvent);
+  };
+
+  handleCalendarClose = (customEvent: CustomEvent) => {
+    this.executeEvent('onCalendarClose', customEvent);
+  };
+
+  handleFocus = (customEvent: CustomEvent) => {
+    this.executeEvent('onFocus', customEvent);
+  };
+
+  handleBlur = (customEvent: CustomEvent) => {
+    this.executeEvent('onBlur', customEvent);
+  };
+
+  handleValidation = (customEvent: CustomEvent) => {
+    this.executeEvent('onValidation', customEvent, {
+      isValid: customEvent.detail?.isValid,
+      message: customEvent.detail?.message
+    });
   };
 
   renderComponent() {
@@ -47,25 +64,30 @@ export class DatepickertBlock extends BaseElementBlock {
     return html`
       <nr-datepicker
         ${ref(this.inputRef)}
-        style=${styleMap({
-          ...this.getStyles(),
-          "display": this.getStyles().display ?? "block", 
-        })}
+             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=${size}
+        .size=${this.inputHandlersValue.size ?? size}
         .variant=${variant}
         .placement=${placement}
-        .disabled=${this.inputHandlersValue.state == "disabled"}
+        ?disabled=${this.inputHandlersValue.disabled ?? false}
         .dateValue=${this.inputHandlersValue.value || ''}
         .fieldFormat=${this.inputHandlersValue.format || 'DD/MM/YYYY'}
-        .range=${this.inputHandlersValue.range || false}
+        ?range=${this.inputHandlersValue.range ?? false}
         .minDate=${this.inputHandlersValue.minDate}
         .maxDate=${this.inputHandlersValue.maxDate}
-        .required=${this.inputHandlersValue.required || false}
+        ?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>
     `;
   }

package/components/ui/components/inputs/Dropdown/Dropdown.ts

@@ -36,8 +36,8 @@ export class DropdownBlock extends BaseElementBlock {
 
     }
 
-    override async connectedCallback() {
-        await super.connectedCallback();
+    override connectedCallback() {
+        super.connectedCallback();
         this.registerCallback("value", (v) => {
             this.requestUpdate();
         });

package/components/ui/components/inputs/Form/Form.style.ts

@@ -0,0 +1,26 @@
+import { css } from "lit";
+
+export const formStyles = css`
+  :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;
+  }
+`;