@nuraly/runtime 0.1.7 → 0.1.8

package/components/ui/components/utility/BorderManager/BorderManager.ts

@@ -0,0 +1,503 @@
+import type { ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
+import { BaseElementBlock } from '../../base/BaseElement';
+import { html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { borderManagerStyles } from './BorderManager.style.ts';
+
+// Border configuration interface
+interface BorderConfig {
+  width: number;
+  style: string;
+  color: string;
+  unit: string;
+}
+
+interface BorderSides {
+  all: boolean;
+  top: boolean;
+  right: boolean;
+  bottom: boolean;
+  left: boolean;
+}
+
+interface BorderRadius {
+  topLeft: number;
+  topRight: number;
+  bottomLeft: number;
+  bottomRight: number;
+  unit: string;
+  linked: boolean;
+}
+
+interface BorderState {
+  sides: BorderSides;
+  config: BorderConfig;
+  radius: BorderRadius;
+  individualConfigs: {
+    top: BorderConfig;
+    right: BorderConfig;
+    bottom: BorderConfig;
+    left: BorderConfig;
+  };
+}
+
+// Border style options
+const BORDER_STYLES = [
+  { label: 'Solid', value: 'solid' },
+  { label: 'Dashed', value: 'dashed' },
+  { label: 'Dotted', value: 'dotted' },
+  { label: 'Double', value: 'double' },
+  { label: 'Groove', value: 'groove' },
+  { label: 'Ridge', value: 'ridge' },
+  { label: 'Inset', value: 'inset' },
+  { label: 'Outset', value: 'outset' },
+  { label: 'None', value: 'none' },
+];
+
+// Border presets
+const BORDER_PRESETS = {
+  none: (): Partial<BorderState> => ({
+    config: { width: 0, style: 'none', color: '#000000', unit: 'px' },
+    sides: { all: true, top: false, right: false, bottom: false, left: false }
+  }),
+  thin: (): Partial<BorderState> => ({
+    config: { width: 1, style: 'solid', color: '#d9d9d9', unit: 'px' },
+    sides: { all: true, top: false, right: false, bottom: false, left: false }
+  }),
+  medium: (): Partial<BorderState> => ({
+    config: { width: 2, style: 'solid', color: '#d9d9d9', unit: 'px' },
+    sides: { all: true, top: false, right: false, bottom: false, left: false }
+  }),
+  thick: (): Partial<BorderState> => ({
+    config: { width: 3, style: 'solid', color: '#d9d9d9', unit: 'px' },
+    sides: { all: true, top: false, right: false, bottom: false, left: false }
+  }),
+  accent: (): Partial<BorderState> => ({
+    config: { width: 2, style: 'solid', color: '#1890ff', unit: 'px' },
+    sides: { all: true, top: false, right: false, bottom: false, left: false }
+  }),
+  dashed: (): Partial<BorderState> => ({
+    config: { width: 1, style: 'dashed', color: '#d9d9d9', unit: 'px' },
+    sides: { all: true, top: false, right: false, bottom: false, left: false }
+  }),
+};
+
+type BorderPresetKey = keyof typeof BORDER_PRESETS;
+
+@customElement("border-manager-display")
+export class BorderManagerDisplay extends BaseElementBlock {
+  static override styles = [borderManagerStyles];
+
+  @property({ type: Object })
+  component: ComponentElement;
+
+  @state()
+  private borderState: BorderState = {
+    sides: { all: true, top: false, right: false, bottom: false, left: false },
+    config: { width: 0, style: 'none', color: '#000000', unit: 'px' },
+    radius: { topLeft: 0, topRight: 0, bottomLeft: 0, bottomRight: 0, unit: 'px', linked: true },
+    individualConfigs: {
+      top: { width: 1, style: 'solid', color: '#d9d9d9', unit: 'px' },
+      right: { width: 1, style: 'solid', color: '#d9d9d9', unit: 'px' },
+      bottom: { width: 1, style: 'solid', color: '#d9d9d9', unit: 'px' },
+      left: { width: 1, style: 'solid', color: '#d9d9d9', unit: 'px' },
+    }
+  };
+
+  private isInitialized = false;
+  private lastInitializedState: string | null = null;
+
+  private emitBorderChange(property: string, value: any) {
+    this.executeEvent("onChange", new CustomEvent('change'), {
+      property,
+      type: 'style',
+      value,
+    });
+  }
+
+  private getCurrentState(): string {
+    const handlers = this.inputHandlersValue;
+    return handlers?.currentState || handlers?.value?.currentState || 'default';
+  }
+
+  private getBorderFromHandlers(): BorderState {
+    const handlers = this.inputHandlersValue;
+    const style = handlers?.value?.style || handlers?.style || {};
+
+    // Parse existing border values
+    const parseBorder = (borderStr: string): BorderConfig => {
+      if (!borderStr || borderStr === 'none') {
+        return { width: 0, style: 'none', color: '#000000', unit: 'px' };
+      }
+      const parts = borderStr.split(' ');
+      const widthMatch = parts[0]?.match(/^(\d+)(px|em|rem|%)?$/);
+      return {
+        width: widthMatch ? parseInt(widthMatch[1]) : 0,
+        style: parts[1] || 'solid',
+        color: parts[2] || '#000000',
+        unit: widthMatch?.[2] || 'px'
+      };
+    };
+
+    const parseRadius = (radiusStr: string): number => {
+      if (!radiusStr) return 0;
+      const match = radiusStr.match(/^(\d+)/);
+      return match ? parseInt(match[1]) : 0;
+    };
+
+    // Determine active sides
+    const hasBorder = !!style.border && style.border !== 'none';
+    const hasTop = !!style['border-top'] && style['border-top'] !== 'none';
+    const hasRight = !!style['border-right'] && style['border-right'] !== 'none';
+    const hasBottom = !!style['border-bottom'] && style['border-bottom'] !== 'none';
+    const hasLeft = !!style['border-left'] && style['border-left'] !== 'none';
+
+    const mainConfig = parseBorder(style.border || style['border-top'] || style['border-right'] || style['border-bottom'] || style['border-left'] || '');
+
+    // Parse radius values and determine if they should be linked
+    const topLeft = parseRadius(style['border-top-left-radius']);
+    const topRight = parseRadius(style['border-top-right-radius']);
+    const bottomLeft = parseRadius(style['border-bottom-left-radius']);
+    const bottomRight = parseRadius(style['border-bottom-right-radius']);
+    const allRadiusEqual = topLeft === topRight && topLeft === bottomLeft && topLeft === bottomRight;
+
+    return {
+      sides: {
+        all: hasBorder,
+        top: hasTop,
+        right: hasRight,
+        bottom: hasBottom,
+        left: hasLeft,
+      },
+      config: mainConfig,
+      radius: {
+        topLeft,
+        topRight,
+        bottomLeft,
+        bottomRight,
+        unit: 'px',
+        linked: allRadiusEqual
+      },
+      individualConfigs: {
+        top: parseBorder(style['border-top']),
+        right: parseBorder(style['border-right']),
+        bottom: parseBorder(style['border-bottom']),
+        left: parseBorder(style['border-left']),
+      }
+    };
+  }
+
+  private applyPreset(presetKey: BorderPresetKey) {
+    const preset = BORDER_PRESETS[presetKey]();
+    if (preset.config) {
+      this.borderState = { ...this.borderState, ...preset };
+    }
+    this.emitAllBorderChanges();
+    this.requestUpdate();
+  }
+
+  private toggleSide(side: keyof BorderSides) {
+    if (side === 'all') {
+      this.borderState.sides = {
+        all: true,
+        top: false,
+        right: false,
+        bottom: false,
+        left: false,
+      };
+    } else {
+      this.borderState.sides = {
+        ...this.borderState.sides,
+        all: false,
+        [side]: !this.borderState.sides[side],
+      };
+    }
+    this.emitAllBorderChanges();
+    this.requestUpdate();
+  }
+
+  private updateConfig(key: keyof BorderConfig, value: any) {
+    this.borderState.config = { ...this.borderState.config, [key]: value };
+    this.emitAllBorderChanges();
+    this.requestUpdate();
+  }
+
+  private updateRadius(corner: keyof Omit<BorderRadius, 'unit' | 'linked'>, value: number) {
+    if (this.borderState.radius.linked) {
+      this.borderState.radius = {
+        ...this.borderState.radius,
+        topLeft: value,
+        topRight: value,
+        bottomLeft: value,
+        bottomRight: value,
+      };
+    } else {
+      this.borderState.radius = { ...this.borderState.radius, [corner]: value };
+    }
+    this.emitRadiusChanges();
+    this.requestUpdate();
+  }
+
+  private toggleRadiusLink() {
+    this.borderState.radius.linked = !this.borderState.radius.linked;
+    if (this.borderState.radius.linked) {
+      // Sync all to topLeft value
+      const val = this.borderState.radius.topLeft;
+      this.borderState.radius = {
+        ...this.borderState.radius,
+        topRight: val,
+        bottomLeft: val,
+        bottomRight: val,
+      };
+      this.emitRadiusChanges();
+    }
+    this.requestUpdate();
+  }
+
+  private formatBorder(config: BorderConfig): string {
+    if (config.style === 'none' || config.width === 0) {
+      return 'none';
+    }
+    return `${config.width}${config.unit} ${config.style} ${config.color}`;
+  }
+
+  private emitAllBorderChanges() {
+    const { sides, config } = this.borderState;
+    const borderValue = this.formatBorder(config);
+
+    if (sides.all) {
+      this.emitBorderChange('border', borderValue);
+      // Clear individual sides
+      this.emitBorderChange('border-top', undefined);
+      this.emitBorderChange('border-right', undefined);
+      this.emitBorderChange('border-bottom', undefined);
+      this.emitBorderChange('border-left', undefined);
+    } else {
+      this.emitBorderChange('border', undefined);
+      this.emitBorderChange('border-top', sides.top ? borderValue : undefined);
+      this.emitBorderChange('border-right', sides.right ? borderValue : undefined);
+      this.emitBorderChange('border-bottom', sides.bottom ? borderValue : undefined);
+      this.emitBorderChange('border-left', sides.left ? borderValue : undefined);
+    }
+  }
+
+  private emitRadiusChanges() {
+    const { radius } = this.borderState;
+    this.emitBorderChange('border-top-left-radius', `${radius.topLeft}${radius.unit}`);
+    this.emitBorderChange('border-top-right-radius', `${radius.topRight}${radius.unit}`);
+    this.emitBorderChange('border-bottom-left-radius', `${radius.bottomLeft}${radius.unit}`);
+    this.emitBorderChange('border-bottom-right-radius', `${radius.bottomRight}${radius.unit}`);
+  }
+
+  private handleColorChange(e: CustomEvent) {
+    this.updateConfig('color', e.detail.value);
+  }
+
+  private getStateLabel(state: string): string {
+    const labels: Record<string, string> = {
+      'default': 'Default',
+      ':hover': 'Hover',
+      ':focus': 'Focus',
+      ':active': 'Active',
+      ':disabled': 'Disabled'
+    };
+    return labels[state] || state;
+  }
+
+  private renderStateIndicator() {
+    const currentState = this.getCurrentState();
+    if (currentState === 'default') return null;
+
+    return html`
+      <div class="state-indicator">
+        Editing: <span class="state-badge">${this.getStateLabel(currentState)}</span>
+      </div>
+    `;
+  }
+
+  private renderPresetButtons() {
+    return html`
+      <div class="section">
+        <div class="section-title">Border Presets</div>
+        <div class="preset-buttons">
+          <nr-button dashed size="small" @click=${() => this.applyPreset('none')}>none</nr-button>
+          <nr-button dashed size="small" @click=${() => this.applyPreset('thin')}>thin</nr-button>
+          <nr-button dashed size="small" @click=${() => this.applyPreset('medium')}>medium</nr-button>
+          <nr-button dashed size="small" @click=${() => this.applyPreset('thick')}>thick</nr-button>
+          <nr-button dashed size="small" @click=${() => this.applyPreset('accent')}>accent</nr-button>
+          <nr-button dashed size="small" @click=${() => this.applyPreset('dashed')}>dashed</nr-button>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderBorderConfig() {
+    const { sides, config } = this.borderState;
+
+    return html`
+      <div class="section">
+        <div class="section-title">Border Style</div>
+        <div class="config-panel">
+          <div class="config-header">
+            <span class="config-title">Sides</span>
+            <div class="side-toggles">
+              <span class="side-toggle ${sides.all ? 'active' : ''}" @click=${() => this.toggleSide('all')}>ALL</span>
+              <span class="side-toggle ${sides.top ? 'active' : ''}" @click=${() => this.toggleSide('top')}>T</span>
+              <span class="side-toggle ${sides.right ? 'active' : ''}" @click=${() => this.toggleSide('right')}>R</span>
+              <span class="side-toggle ${sides.bottom ? 'active' : ''}" @click=${() => this.toggleSide('bottom')}>B</span>
+              <span class="side-toggle ${sides.left ? 'active' : ''}" @click=${() => this.toggleSide('left')}>L</span>
+            </div>
+          </div>
+
+          <div class="config-row">
+            <span class="config-label">Width</span>
+            <div class="config-input">
+              <nr-input
+                class="width-input"
+                type="number"
+                size="small"
+                .value=${String(config.width)}
+                @nr-input=${(e: CustomEvent) => this.updateConfig('width', parseInt(e.detail?.value) || 0)}
+              ></nr-input>
+              <span style="font-size: 10px; color: #888;">px</span>
+            </div>
+          </div>
+
+          <div class="config-row">
+            <span class="config-label">Style</span>
+            <div class="config-input">
+              <nr-select
+                size="small"
+                .value=${config.style}
+                .options=${BORDER_STYLES}
+                @nr-change=${(e: CustomEvent) => this.updateConfig('style', e.detail?.value?.value || e.detail?.value || 'solid')}
+              ></nr-select>
+            </div>
+          </div>
+
+          <div class="config-row">
+            <span class="config-label">Color</span>
+            <div class="config-input">
+              <nr-color-picker
+                .color=${config.color}
+                @color-changed=${this.handleColorChange}
+              ></nr-color-picker>
+              <nr-input
+                size="small"
+                .value=${config.color}
+                @nr-input=${(e: CustomEvent) => this.updateConfig('color', e.detail?.value || '#000000')}
+              ></nr-input>
+            </div>
+          </div>
+
+          <!-- Preview -->
+          <div class="preview-box" style="
+            border: ${this.formatBorder(config)};
+            border-radius: ${this.borderState.radius.topLeft}${this.borderState.radius.unit};
+          "></div>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderRadiusConfig() {
+    const { radius } = this.borderState;
+
+    return html`
+      <div class="section radius-section">
+        <div class="section-title">Border Radius</div>
+        <div class="config-panel">
+          <div class="link-toggle ${radius.linked ? 'linked' : ''}" @click=${() => this.toggleRadiusLink()}>
+            <nr-icon name=${radius.linked ? 'link' : 'disconnect'}></nr-icon>
+            <span>${radius.linked ? 'Linked' : 'Individual'}</span>
+          </div>
+
+          ${radius.linked ? html`
+            <div class="config-row">
+              <span class="config-label">All</span>
+              <div class="config-input">
+                <nr-input
+                  class="width-input"
+                  type="number"
+                  size="small"
+                  .value=${String(radius.topLeft)}
+                  @nr-input=${(e: CustomEvent) => this.updateRadius('topLeft', parseInt(e.detail?.value) || 0)}
+                ></nr-input>
+                <span style="font-size: 10px; color: #888;">px</span>
+              </div>
+            </div>
+          ` : html`
+            <div class="radius-grid">
+              <div class="radius-item">
+                <span class="radius-label">TL</span>
+                <nr-input
+                  class="radius-input"
+                  type="number"
+                  size="small"
+                  .value=${String(radius.topLeft)}
+                  @nr-input=${(e: CustomEvent) => this.updateRadius('topLeft', parseInt(e.detail?.value) || 0)}
+                ></nr-input>
+              </div>
+              <div class="radius-item">
+                <span class="radius-label">TR</span>
+                <nr-input
+                  class="radius-input"
+                  type="number"
+                  size="small"
+                  .value=${String(radius.topRight)}
+                  @nr-input=${(e: CustomEvent) => this.updateRadius('topRight', parseInt(e.detail?.value) || 0)}
+                ></nr-input>
+              </div>
+              <div class="radius-item">
+                <span class="radius-label">BL</span>
+                <nr-input
+                  class="radius-input"
+                  type="number"
+                  size="small"
+                  .value=${String(radius.bottomLeft)}
+                  @nr-input=${(e: CustomEvent) => this.updateRadius('bottomLeft', parseInt(e.detail?.value) || 0)}
+                ></nr-input>
+              </div>
+              <div class="radius-item">
+                <span class="radius-label">BR</span>
+                <nr-input
+                  class="radius-input"
+                  type="number"
+                  size="small"
+                  .value=${String(radius.bottomRight)}
+                  @nr-input=${(e: CustomEvent) => this.updateRadius('bottomRight', parseInt(e.detail?.value) || 0)}
+                ></nr-input>
+              </div>
+            </div>
+          `}
+        </div>
+      </div>
+    `;
+  }
+
+  override renderComponent() {
+    // Only initialize from handlers once we have data, or when state changes
+    const handlers = this.inputHandlersValue;
+    const hasHandlerData = handlers?.value?.style || handlers?.style;
+    const currentState = this.getCurrentState();
+
+    // Re-initialize when state changes (e.g., default -> hover)
+    const stateChanged = this.lastInitializedState !== null && this.lastInitializedState !== currentState;
+
+    if ((!this.isInitialized || stateChanged) && hasHandlerData) {
+      this.borderState = this.getBorderFromHandlers();
+      this.isInitialized = true;
+      this.lastInitializedState = currentState;
+    }
+
+    return html`
+      <div class="border-container">
+        ${this.renderStateIndicator()}
+        ${this.renderPresetButtons()}
+        <div class="divider"></div>
+        ${this.renderBorderConfig()}
+        ${this.renderRadiusConfig()}
+      </div>
+    `;
+  }
+}

package/components/ui/components/utility/BoxShadow/BoxShadow.ts

@@ -5,20 +5,6 @@ import { BaseElementBlock } from '../../base/BaseElement';
 import { executeHandler } from '../../../../../state/runtime-context';
 import { getNestedAttribute } from '../../../../../utils/object.utils.ts';
 
-// Safely import @nuralyui/checkbox
-try {
-  await import("@nuralyui/checkbox");
-} catch (error) {
-  console.warn('[@nuralyui/checkbox] Package not found or failed to load.');
-}
-// Safely import @nuralyui/slider-input
-try {
-  await import("@nuralyui/slider-input");
-} catch (error) {
-  console.warn('[@nuralyui/slider-input] Package not found or failed to load.');
-}
-
-
 function debounce(func, wait = 100) {
   let timeout;
   return function(...args) {
@@ -91,10 +77,8 @@ export class AttributeBoxShadowValue extends BaseElementBlock {
   });
 
   boxShadow() {
-	return
     const shadowBox = ` ${this.horizontalValue}px ${this.verticalValue}px ${this.blurValue}px ${this.spreadValue}px ${this.colorValue} ${this.insetValue ? "inset" : ""}`;
     if (this.component.event.boxShadowChanged) {
-
       const fn = executeHandler(this.component, getNestedAttribute(this.component, `event.boxShadowChanged`), {
         value: shadowBox
       });

package/components/ui/components/utility/Document/Document.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,41 +12,70 @@ try {
   console.warn('[@nuralyui/document] Package not found or failed to load.');
 }
 
-
-
 @customElement("document-block")
-export class ImageBlock extends BaseElementBlock {
+export class DocumentBlock extends BaseElementBlock {
+  static styles = [css`
+    .document-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;
+    }
+    .document-placeholder nr-icon {
+      --nuraly-icon-size: 48px;
+    }
+  `];
+
   @property({ type: Object })
   component: ComponentElement;
-  isDarkMode: boolean;
-
-
 
   renderComponent() {
-
     const documentStyles = this.getStyles() || {};
     const documentStyleHandlers = this.component?.styleHandlers ? Object.fromEntries(
       Object.entries(this.component?.styleHandlers).filter(([key, value]) => value)) : {};
-      const documentSrc = this.isDarkMode 
-      ? this.inputHandlersValue.darkSrc ?? this.inputHandlersValue.src 
-      : this.inputHandlersValue.src;
+
+    const src = this.inputHandlersValue?.src;
+    const type = this.inputHandlersValue?.type ?? 'pdf';
+    const previewable = this.inputHandlersValue?.previewable ?? false;
+
+    // Show placeholder when no document source
+    if (!src) {
+      return html`
+        <div
+          ${ref(this.inputRef)}
+          class="document-placeholder"
+          style=${styleMap({
+            ...this.getStyles(),
+            width: documentStyleHandlers?.width || documentStyles?.width || '100%',
+            height: documentStyleHandlers?.height || documentStyles?.height || '200px',
+          })}
+          @click=${(e: MouseEvent) => this.executeEvent("onClick", e)}
+        >
+          <nr-icon name="file-text"></nr-icon>
+          <nr-label>No document source</nr-label>
+        </div>
+      `;
+    }
+
     return html`
       <nr-document-viewer
-      ${ref(this.inputRef)}
-      @click=${(e: MouseEvent) => {
-        this.executeEvent("onClick", e);
-      }}
-      style=${
-        styleMap({
+        ${ref(this.inputRef)}
+        style=${styleMap({
           ...this.getStyles(),
-      },
-          
-        )
-      }
-        .src=${documentSrc ?? nothing}
-        .previewable=${this.inputHandlersValue.previewable ?? nothing}
-        .width=${documentStyleHandlers?.width ? documentStyleHandlers.width : documentStyles?.width}
-        .height=${documentStyleHandlers?.height ? documentStyleHandlers?.height : documentStyles?.height}
+        })}
+        .src=${src}
+        .type=${type}
+        .previewable=${previewable}
+        .width=${documentStyleHandlers?.width || documentStyles?.width}
+        .height=${documentStyleHandlers?.height || documentStyles?.height}
+        @click=${(e: MouseEvent) => this.executeEvent("onClick", e)}
+        @load=${(e: Event) => this.executeEvent("onLoad", e, { src })}
+        @error=${(e: Event) => this.executeEvent("onError", e, { src, error: 'Failed to load document' })}
       >
       </nr-document-viewer>
     `;

package/components/ui/components/utility/Export-Import/Export-Import.ts

@@ -17,13 +17,15 @@ export class ExportImportBlock extends BaseElementBlock {
     const {
       detail: { value },
     } = event;
-    console.log(`${type} code changed:`, value);
+    // Code change can be handled here if needed
   }
 
   copyToClipboard(content: string) {
-    navigator.clipboard.writeText(content).then(() => {
-      console.log("Content copied to clipboard:", content);
-    });
+    navigator.clipboard.writeText(content);
+  }
+
+  handleImportConfirm(type: string) {
+    // Import confirmation can be handled here
   }
 
   downloadContent(content: string, fileName: string) {
@@ -36,7 +38,7 @@ export class ExportImportBlock extends BaseElementBlock {
     URL.revokeObjectURL(url);
   }
 
-  override async firstUpdated(): Promise<void> {}
+  override firstUpdated() {}
 
   renderDropdown(templateContent: string, buttonLabel: string, type: string) {
     const isExport = type === "export";
@@ -61,7 +63,7 @@ export class ExportImportBlock extends BaseElementBlock {
                     </nr-button>
                   `
       : nothing}
-              ${isExport ? nothing : html` <nr-button @click=${() => console.log(`${type} confirmed`)}>
+              ${isExport ? nothing : html` <nr-button @click=${() => this.handleImportConfirm(type)}>
                 Confirm Import
               </nr-button>`}
              
@@ -91,7 +93,6 @@ export class ExportImportBlock extends BaseElementBlock {
         });
 
         this.exportCode = JSON.stringify(components, null, 2);
-        console.log("Exported UUIDs as JSON:", this.exportCode);
       });
     }}>
           ${buttonLabel}