@nuraly/runtime 0.1.0

package/components/ui/components/wrappers/GenerikWrapper/QuickActionWrapper/QuickActionWrapper.style.ts

@@ -0,0 +1,99 @@
+import { css } from "lit";
+
+export default css`
+   .quick-action{
+    display: inline-flex;
+    align-items: center;
+    padding: 3px;
+    position: absolute;
+    z-index: 10;
+    border-radius: 5px;
+    background: #f0f0f0;
+    box-shadow: 0 0 5px 0 rgb(0 0 0 / 20%);
+    border: 1px solid #ccc;
+  }
+
+ @media (prefers-color-scheme: dark) {
+  .quick-action{
+      background: rgb(44, 44, 44)
+   }
+ }
+
+
+
+ micro-app {
+          /* Input Styles */
+          --nuraly-input-border-radius: 5px;
+          /* --nuraly-input-border-bottom: 1px solid #a8a8a8;
+          --nuraly-input-border-top: 1px solid #a8a8a8;
+          --nuraly-input-border-left: 1px solid #a8a8a8;
+          --nuraly-input-border-right: 1px solid #a8a8a8;*/
+          --nuraly-input-border-bottom: 2px solid transparent;
+          --nuraly-input-number-icons-container-width: 48px;
+          --nuraly-input-font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, SFProLocalRange;
+          --nuraly-input-font-size: 12px;
+
+          /* Select Styles */
+          --nuraly-select-icon-width: 11px;
+          --nuraly-select-border-bottom: 1px solid #a8a8a8;
+          --nuraly-select-border-top: 1px solid #a8a8a8;
+          --nuraly-select-border-left: 1px solid #a8a8a8;
+          --nuraly-select-border-right: 1px solid #a8a8a8;
+          --nuraly-select-border-radius: 5px;
+          --nuraly-select-focus-border: 1px solid gray;
+
+          /* Button Styles */
+          --nuraly-button-background-color: rgb(245, 245, 245);;
+          --nuraly-button-text-color: #535353;
+          --nuraly-button-border-left: 1px solid #a8a8a8;
+          --nuraly-button-border-right: 1px solid #a8a8a8;
+          --nuraly-button-border-top: 1px solid #a8a8a8;
+          --nuraly-button-border-bottom: 1px solid #a8a8a8;
+
+          /* Collapse Styles */
+          --nr-collapse-content-background-color: transparent;
+      }
+
+      /* ===============================
+         Dark Mode Styles
+         =============================== */
+      @media (prefers-color-scheme: dark) {
+          micro-app {
+              /* Input Styles (Dark Mode) */
+
+              /* Select Styles (Dark Mode) */
+              --nuraly-input-border-bottom: 1px solid transparent;
+              --nuraly-input-border-top: 1px solid transparent;
+              --nuraly-input-border-left: 1px solid transparent;
+              --nuraly-input-border-right: 1px solid transparent;
+              --nuraly-input-focus-border: 1px solid #a8a8a8;
+
+              --nuraly-select-focus-border: 1px solid #ffffff;
+
+              /* Button Styles (Dark Mode) */
+              --nuraly-button-border-left: 1px solid #272626;
+              --nuraly-button-border-right: 1px solid #272626;
+              --nuraly-button-border-top: 1px solid #272626;
+              --nuraly-button-border-bottom: 1px solid #272626;
+              --nuraly-button-background-color: #494949;
+              --nuraly-button-text-color: #ffffff;
+              --nuraly-button-primary-background-color: #212121;
+              --nuraly-button-primary-border-color: #212121;
+              --nuraly-button-primary-hover-border-color: #212121;
+              --nuraly-button-hover-border-color : #212121;
+              --nuraly-button-active-border-color: #212121;
+              --nuraly-button-active-background-color: #212121;
+              --nuraly-button-primary-hover-border-color: #212121;
+              --nuraly-button-primary-hover-background-color: #212121;
+              --nuraly-button-hover-background-color: #3b3b3b;
+              /* Collapse Styles (Dark Mode) */
+              --nr-collapse-border: 1px solid #a8a8a8;
+              --nr-collapse-header-hover-background-color: #3a3a3a;
+              --nr-collapse-header-collapsed-background-color: #3a3a3a;
+              --nuraly-button-hover-color: #ffffff;
+              --nuraly-select-options-background-color: #0a0a0a;
+
+          }
+         
+      }
+`;

package/components/ui/components/wrappers/GenerikWrapper/QuickActionWrapper/QuickActionWrapper.ts

@@ -0,0 +1,94 @@
+import { type ComponentElement } from '../../../../../../redux/store/component/component.interface.ts';
+import { html, LitElement, nothing, type PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import styles from "./QuickActionWrapper.style.ts";
+import { styleMap } from "lit/directives/style-map.js";
+import { createRef, ref, type Ref } from "lit/directives/ref.js";
+
+@customElement("quick-action-wrapper")
+export class QuickActionWrapper extends LitElement {
+  static styles = styles;
+  @property({ type: Object })
+  component: ComponentElement;
+
+  @property({ type: Object })
+  contextMenuEvent
+  @state()
+  showQuickAction = false;
+  private clickOutsideListener: EventListener | null = null;
+  private inputRef: Ref<HTMLInputElement> = createRef();
+
+  @property({ type: String })
+  position : string = "top";
+
+  @property({ type: String })
+  componentToRenderUUID  = "";
+
+  connectedCallback() {
+    super.connectedCallback();
+    //this.addClickOutsideListener();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+
+
+  emitQuickActionStatusEvent() {
+    const customEvent = new CustomEvent("displayQuickActionChanged", {
+      detail: {
+        showQuickAction: this.showQuickAction
+      }
+    });
+    this.dispatchEvent(customEvent);
+
+  }
+
+  protected updated(_changedProperties: PropertyValues): void {
+    super.updated(_changedProperties);
+
+    _changedProperties.forEach((oldValue, propName) => {
+      if (propName === "contextMenuEvent") {
+        setTimeout(() => {
+
+        requestAnimationFrame(() => {
+          this.style.width = "100%";
+          if(this.position === "top") {
+            this.style.top = `${ this.contextMenuEvent.ComponentTop - this.inputRef.value.getBoundingClientRect().height - 20 }px`;
+          }else{
+            this.style.top = `${this.contextMenuEvent.ComponentTop + this.contextMenuEvent.ComponentHeight}px`;
+          }
+          this.style.left = `${this.contextMenuEvent.ComponentLeft}px`;
+        });
+      }, 50);
+        
+      }
+    })
+  }
+  
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties );
+    _changedProperties.forEach((oldValue, propName) => {
+      if (propName === "contextMenuEvent") {
+      
+      }
+    })
+  }
+
+  render() {
+    return html`
+        <div class="quick-action" 
+        ${ref(this.inputRef)}
+        style=${styleMap({
+            position: "absolute",
+          })}>
+          ${this.componentToRenderUUID ? 
+            html`
+             <micro-app uuid="1" componentToRenderUUID=${this.componentToRenderUUID}>  </micro-app>
+             ` : nothing
+          }
+           
+        </div>
+        `;
+  }
+}

package/components/ui/components/wrappers/GenerikWrapper/ResizeWrapper/ResizeWrapper.style.ts

@@ -0,0 +1,102 @@
+import { css } from "lit";
+
+export default css`
+  :host{
+   }
+  .resizer-line-top,
+  .resizer-line-bottom,
+  .resizer-line-right,
+  .resizer-line-left,
+  .resizer-point-left-top,
+  .resizer-point-right-top,
+  .resizer-point-middle-top,
+  .resizer-point-left-bottom,
+  .resizer-point-right-bottom,
+  .resizer-point-middle-bottom {
+    position: absolute;
+    z-index: 4;
+  }
+  .element.hovered .resizer-point-left-top,
+  .element.hovered .resizer-point-right-top,
+  .element.hovered .resizer-point-middle-top,
+  .element.hovered .resizer-point-left-bottom,
+  .element.hovered .resizer-point-right-bottom,
+  .element.hovered .resizer-point-middle-bottom {
+    display: none;
+  }
+  .element.selected .resizer-point-left-top,
+  .element.selected .resizer-point-right-top,
+  .element.selected .resizer-point-middle-top,
+  .element.selected .resizer-point-left-bottom,
+  .element.selected .resizer-point-right-bottom,
+  .element.selected .resizer-point-middle-bottom {
+    background-color: var(--editor-selection-color, #79ade6);
+    border-radius: 2px;
+    width: 6px;
+    height: 6px;
+    z-index: 5;
+    margin-top: -2px;
+  }
+  .resizer-point-middle-top {
+    cursor: n-resize;
+  }
+
+  .resizer-point-right-top {
+    cursor: ne-resize;
+  }
+  .resizer-point-left-top {
+    cursor: nw-resize;
+  }
+
+  .resizer-point-right-bottom {
+    cursor: se-resize;
+  }
+  .resizer-point-left-bottom {
+    cursor: sw-resize;
+  }
+  .resizer-point-middle-bottom {
+    cursor: s-resize;
+  }
+
+
+  .element.bordered .resizer-line-top,
+  .element.bordered .resizer-line-bottom {
+    border-top: 1px dashed var(--editor-selection-color, #b5b5b5);
+  }
+  .element.bordered .resizer-line-right {
+    border-right: 1px dashed var(--editor-selection-color, #b5b5b5);
+    margin-left: 5px;
+  }
+  .element.bordered .resizer-line-left {
+    border-left: 1px dashed var(--editor-selection-color, #b5b5b5);
+  }
+
+
+
+  .element.hovered .resizer-line-top,
+  .element.hovered .resizer-line-bottom {
+    border-top: 1px dashed var(--editor-selection-color, #79ade6);
+  }
+  .element.hovered .resizer-line-right {
+    border-right: 1px dashed var(--editor-selection-color, #79ade6);
+    margin-left: 5px;
+  }
+  .element.hovered .resizer-line-left {
+    border-left: 1px dashed var(--editor-selection-color, #79ade6);
+  }
+
+
+  .element.selected .resizer-line-top,
+  .element.selected .resizer-line-bottom {
+    border-top: 1px solid var(--editor-selection-color, #79ade6);
+  }
+  .element.selected .resizer-line-right {
+    border-right: 1px solid var(--editor-selection-color, #79ade6);
+  }
+  .element.selected .resizer-line-left {
+    border-left: 1px solid var(--editor-selection-color, #79ade6);
+  }
+
+
+
+`;

package/components/ui/components/wrappers/GenerikWrapper/ResizeWrapper/ResizeWrapper.ts

@@ -0,0 +1,258 @@
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { createRef, type Ref } from "lit/directives/ref.js";
+import { type ComponentElement, ComponentType } from '../../../../../../redux/store/component/component.interface.ts';
+import styles from "./ResizeWrapper.style.ts";
+import { classMap } from "lit/directives/class-map.js";
+import { $pageZoom, $showBorder } from '../../../../../../redux/store/page.ts';
+import { updateComponentAttributes } from '../../../../../../redux/actions/component/updateComponentAttributes.ts';
+import { setResizing } from '../../../../../../redux/actions/page/setResizing.ts';
+import { eventDispatcher } from '../../../../../../utils/change-detection.ts';
+
+@customElement("resize-wrapper")
+export class ResizeWrapper extends LitElement {
+  static styles = styles;
+  
+  // Component type lists
+  onlyWidthResizableComponents = [
+    ComponentType.TextInput, ComponentType.Select, ComponentType.DatePicker, 
+    ComponentType.Button, ComponentType.Checkbox
+  ];
+  notResizableComponents = [];
+  
+  // Properties
+  @property({ type: Object }) component: ComponentElement;
+  @property({ type: Object }) selectedComponent: ComponentElement;
+  @property({ type: Boolean }) isSelected = false;
+  @property({ type: Object }) hoveredComponent: ComponentElement;
+  @property({ type: Object }) inputRef: Ref<Element> = createRef();
+  
+  // State and config
+  @state() styles = { lines: {}, points: {} };
+  minimum_size = 20;
+  @state() original = { width: 0, height: 0, x: 0, y: 0, mouse_x: 0, mouse_y: 0 };
+  @state() slotDOMRect: DOMRect;
+  @state() currentResizer;
+  @state() zoomLevel;
+  @state() showBorder = false;
+  private _debounceComponent: ReturnType<typeof setTimeout>;
+  private _debounceInputRef: ReturnType<typeof setTimeout>;
+
+  constructor() {
+    super();
+    $showBorder.subscribe(showBorder => this.showBorder = showBorder);
+  }
+
+  // Lifecycle methods
+  connectedCallback(): void {
+    super.connectedCallback();
+    eventDispatcher.on("refresh:resize"+this.component.uuid, () => this.firstUpdated());
+    window.addEventListener("mouseup", this.stopResize);
+    $pageZoom.subscribe((pageZoom: string) => {
+      this.zoomLevel = Number(pageZoom);
+      this.firstUpdated();
+    });
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    window.removeEventListener("mouseup", this.stopResize);
+    if (!this.notResizableComponents.includes(this.component.component_type)) {
+      window.removeEventListener("mousemove", this.resize);
+    }
+  }
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    
+    if (changedProperties.has("inputRef")) {
+      clearTimeout(this._debounceInputRef);
+      this._debounceInputRef = setTimeout(() => this.observeInputRef(), 200);
+    }
+
+    if (changedProperties.has("component")) {
+      clearTimeout(this._debounceComponent);
+      this._debounceComponent = setTimeout(() => this.firstUpdated(), 200);
+    }
+  }
+
+  // Helpers
+  observeInputRef() {
+    if (this.inputRef?.value) {
+      const observer = new MutationObserver(() => this.firstUpdated());
+      observer.observe(this.inputRef.value, { 
+        attributes: true, childList: true, subtree: true 
+      });
+    }
+  }
+
+  extractNumber(str) {
+    const match = str?.match(/\d+/);
+    return match ? Number(match[0]) : 0;
+  }
+
+  // Resize handlers
+  resize = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    const resizer = this.currentResizer.classList;
+    const el = this.inputRef.value;
+    const { width, height, x, y, mouse_x, mouse_y } = this.original;
+    const newWidth = width + (e.pageX - mouse_x);
+    const newHeight = height + (e.pageY - mouse_y);
+    const invWidth = width - (e.pageX - mouse_x);
+    const invHeight = height - (e.pageY - mouse_y);
+    const canResizeHeight = !this.onlyWidthResizableComponents.includes(this.component.component_type);
+    
+    const isRightBottom = resizer.contains("resizer-point-right-bottom");
+    const isLeftBottom = resizer.contains("resizer-point-left-bottom");
+    const isVertical = resizer.contains("resizer-line-bottom") || 
+                       resizer.contains("resizer-point-middle-top") || 
+                       resizer.contains("resizer-point-middle-bottom");
+    const isLeftTop = resizer.contains("resizer-point-left-top");
+    const isRightTop = resizer.contains("resizer-point-right-top");
+    
+    // Apply width changes
+    if ((isRightBottom || isRightTop) && newWidth > this.minimum_size) {
+      el.style.width = `${newWidth}px`;
+    } else if ((isLeftBottom || isLeftTop) && invWidth > this.minimum_size) {
+      el.style.width = `${invWidth}px`;
+      el.style.left = `${x + (e.pageX - mouse_x)}px`;
+    }
+    
+    // Apply height changes if allowed
+    if (canResizeHeight) {
+      if ((isRightBottom || isLeftBottom || isVertical) && newHeight > this.minimum_size) {
+        el.style.height = `${newHeight}px`;
+      } else if ((isLeftTop || isRightTop) && invHeight > this.minimum_size) {
+        el.style.height = `${invHeight}px`;
+        el.style.top = `${y + (e.pageY - mouse_y)}px`;
+      }
+    }
+
+    setTimeout(() => {
+      this.firstUpdated();
+      setTimeout(() => this.applyResize(), 500);
+    });
+  };
+
+  stopResize = () => {
+    window.removeEventListener("mousemove", this.resize);
+    setTimeout(() => setResizing(false));
+  };
+
+  mouseDown = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setResizing(true);
+    this.currentResizer = e.target;
+    const el = this.inputRef.value;
+    const rect = el.getBoundingClientRect();
+    
+    this.original = {
+      width: el.offsetWidth,
+      height: el.offsetHeight,
+      x: rect.left,
+      y: rect.top,
+      mouse_x: e.pageX,
+      mouse_y: e.pageY
+    };
+
+    if (!this.notResizableComponents.includes(this.component.component_type)) {
+      window.addEventListener("mousemove", this.resize);
+    }
+  };
+
+  // Updates
+  override firstUpdated() {
+    const style = this.component.style || {};
+    const margins = {
+      left: this.extractNumber(style['margin-left']),
+      right: this.extractNumber(style['margin-right']),
+      top: this.extractNumber(style['margin-top']),
+      bottom: this.extractNumber(style['margin-bottom'])
+    };
+     
+    requestAnimationFrame(() => {
+      if (!this.inputRef.value) return;
+      
+      this.slotDOMRect = this.inputRef.value.getBoundingClientRect();
+      const width = this.inputRef.value.offsetWidth + margins.left + margins.right;
+      const height = this.inputRef.value.offsetHeight + margins.top + margins.bottom;
+      const halfWidth = width / 2 - 3;
+      
+      this.styles = {
+        lines: {
+          top: { width: `${width}px` },
+          bottom: { width: `${width}px`, marginTop: `${height}px` },
+          right: { height: `${height}px`, marginLeft: `${width}px` },
+          left: { height: `${height}px` }
+        },
+        points: {
+          leftTop: { marginLeft: "-1px" },
+          rightTop: { marginLeft: `${width - 3}px` },
+          middleTop: { marginLeft: `${halfWidth}px` },
+          leftBottom: { marginTop: `${height - 2}px`, marginLeft: "-1px" },
+          rightBottom: { marginLeft: `${width - 3}px`, marginTop: `${height - 2}px` },
+          middleBottom: { marginLeft: `${halfWidth}px`, marginTop: `${height - 2}px` }
+        }
+      };
+      
+      this.requestUpdate();
+    });
+  }
+
+  applyResize = () => {
+    const el = this.inputRef.value;
+    const { component_type: type, uuid, application_id: appId } = this.component;
+    const styleUpdates = {};
+    
+    switch(type) {
+      case ComponentType.Button:
+        styleUpdates["--nuraly-button-width"] = el.style.width;
+        break;
+      case ComponentType.Icon:
+        styleUpdates["--nuraly-icon-width"] = el.style.width;
+        styleUpdates["--nuraly-icon-height"] = el.style.height;
+        break;
+      case ComponentType.Select:
+        styleUpdates["--nuraly-select-width"] = el.style.width;
+        break;
+      case ComponentType.TextInput:
+      case ComponentType.DatePicker:
+        styleUpdates.width = el.style.width;
+        break;
+      default:
+        styleUpdates.width = el.style.width;
+        styleUpdates.height = el.style.height;
+    }
+    
+    updateComponentAttributes(appId, uuid, "style", styleUpdates);
+  };
+
+  // Render
+  override render() {
+    const { points, lines } = this.styles;
+    const isHovered = this.hoveredComponent?.uuid === this.component.uuid && !this.isSelected;
+    
+    return html`
+      <div class=${classMap({ element: true, hovered: isHovered, bordered: this.showBorder, selected: this.isSelected })}>
+        <div @mousedown=${this.mouseDown} class="resizer-point-left-top" style=${styleMap(points?.leftTop || {})}></div>
+        <div @mousedown=${this.mouseDown} class="resizer-point-right-top" style=${styleMap(points?.rightTop || {})}></div>
+        <div @mousedown=${this.mouseDown} class="resizer-point-middle-top" style=${styleMap(points?.middleTop || {})}></div>
+        <div @mousedown=${this.mouseDown} class="resizer-point-left-bottom" style=${styleMap(points?.leftBottom || {})}></div>
+        <div @mousedown=${this.mouseDown} class="resizer-point-right-bottom" style=${styleMap(points?.rightBottom || {})}></div>
+        <div @mousedown=${this.mouseDown} class="resizer-point-middle-bottom" style=${styleMap(points?.middleBottom || {})}></div>
+        
+        <div class="resizer-line-top" style=${styleMap(lines?.top || {})}></div>
+        <div class="resizer-line-bottom" style=${styleMap(lines?.bottom || {})}></div>
+        <div class="resizer-line-right" style=${styleMap(lines?.right || {})}></div>
+        <div class="resizer-line-left" style=${styleMap(lines?.left || {})}></div>
+        
+        <slot @slotchange="${() => {}}"></slot>
+      </div>
+    `;
+  }
+}

package/components/ui/components/wrappers/PreviewWrapper.ts

@@ -0,0 +1,28 @@
+
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+@customElement("preview-component-wrapper")
+export class PreviewComponentWrapper extends LitElement {
+    
+  constructor() {
+    super();
+  
+  }
+
+  render() {
+    return html`
+      <style>
+        :host {
+
+        }
+      </style>
+     
+       
+     <slot></slot>
+
+    `;
+  }
+
+ 
+}