@nuraly/lumenui 0.1.0

package/dist/src/components/file-upload/styles.js

@@ -0,0 +1,373 @@
+import { css } from 'lit';
+export const styles = css `
+:host {
+  display: block;
+  font-family: var(--nuraly-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
+}
+.upload {
+  width: 100%;
+}
+.upload-dragger {
+  background-color: var(--nuraly-color-surface, #f8f9fa);
+  border: 1px dashed var(--nuraly-color-border, #d9d9d9);
+  border-radius: var(--nuraly-border-radius-md, 6px);
+  box-sizing: border-box;
+  width: 100%;
+  height: 180px;
+  text-align: center;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: border-color var(--nuraly-transition-normal, 0.3s);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.upload-dragger:hover {
+  border-color: var(--nuraly-color-primary, #409eff);
+}
+.upload-dragger.is-dragover {
+  background-color: var(--nuraly-color-background-hover, rgba(64, 158, 255, 0.06));
+  border-color: var(--nuraly-color-primary, #409eff);
+}
+.upload-icon {
+  font-size: 28px;
+  color: var(--nuraly-color-text-tertiary, #c0c4cc);
+  margin-bottom: 8px;
+}
+.upload-text {
+  color: var(--nuraly-color-text-secondary, #606266);
+  font-size: var(--nuraly-font-size-02, 14px);
+  text-align: center;
+  padding: 0 12px;
+}
+.upload-tip {
+  font-size: var(--nuraly-font-size-01, 12px);
+  color: var(--nuraly-color-text-tertiary, #909399);
+  margin-top: 7px;
+  padding: 0 12px;
+}
+.upload-button {
+  padding: 8px 16px;
+  background-color: var(--nuraly-color-primary, #409eff);
+  color: var(--nuraly-color-text-on-color, white);
+  border: none;
+  border-radius: var(--nuraly-border-radius-sm, 4px);
+  cursor: pointer;
+  font-size: var(--nuraly-font-size-02, 14px);
+  transition: background-color var(--nuraly-transition-normal, 0.3s);
+}
+.upload-button:hover {
+  background-color: var(--nuraly-color-primary-hover, #66b1ff);
+}
+.file-list {
+  margin-top: 10px;
+  width: 100%;
+}
+.file-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  transition: all var(--nuraly-transition-normal, 0.3s);
+  padding: 8px;
+  border-radius: var(--nuraly-border-radius-sm, 4px);
+  gap: 8px;
+  width: 100%;
+  box-sizing: border-box;
+  min-width: 0;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  max-width: 100%;
+}
+.file-item:hover {
+  background-color: var(--nuraly-color-surface-hover, #f8f9fa);
+}
+.file-name {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--nuraly-color-text-secondary, #606266);
+  min-width: 0;
+  max-width: 100%;
+  word-break: break-all;
+  width: 0;
+}
+.file-size {
+  color: var(--nuraly-color-text-tertiary, #909399);
+  font-size: var(--nuraly-font-size-01, 12px);
+  flex-shrink: 0;
+  margin-left: 8px;
+  white-space: nowrap;
+}
+.file-status {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.file-actions {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0; /* Prevent shrinking */
+}
+.file-actions button {
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  color: var(--nuraly-color-text-tertiary, #909399);
+}
+.file-actions button:hover {
+  color: var(--nuraly-color-primary, #409eff);
+}
+
+/* Dark theme support - using data-theme attribute */
+/* Support both :host-context (ancestor) and :host (direct) patterns */
+
+/* Upload dragger - dark theme */
+:host-context([data-theme*="dark"]) .upload-dragger,
+:host([data-theme*="dark"]) .upload-dragger {
+  background-color: var(--nuraly-color-layer-01, #262626);
+  border-color: var(--nuraly-color-border-subtle, #525252);
+}
+:host-context([data-theme*="dark"]) .upload-dragger:hover,
+:host([data-theme*="dark"]) .upload-dragger:hover {
+  border-color: var(--nuraly-color-button-primary, #78a9ff);
+}
+:host-context([data-theme*="dark"]) .upload-dragger.is-dragover,
+:host([data-theme*="dark"]) .upload-dragger.is-dragover {
+  background-color: rgba(120, 169, 255, 0.1);
+  border-color: var(--nuraly-color-button-primary, #78a9ff);
+}
+
+/* Upload icon - dark theme */
+:host-context([data-theme*="dark"]) .upload-icon,
+:host([data-theme*="dark"]) .upload-icon {
+  color: var(--nuraly-color-text-secondary, #8d8d8d);
+}
+
+/* Upload text - dark theme */
+:host-context([data-theme*="dark"]) .upload-text,
+:host([data-theme*="dark"]) .upload-text {
+  color: var(--nuraly-color-text-primary, #f4f4f4);
+}
+
+/* Upload tip - dark theme */
+:host-context([data-theme*="dark"]) .upload-tip,
+:host([data-theme*="dark"]) .upload-tip {
+  color: var(--nuraly-color-text-secondary, #8d8d8d);
+}
+
+/* File item - dark theme */
+:host-context([data-theme*="dark"]) .file-item,
+:host([data-theme*="dark"]) .file-item {
+  background-color: var(--nuraly-color-layer-01, #262626);
+  border-radius: var(--nuraly-border-radius-sm, 4px);
+}
+:host-context([data-theme*="dark"]) .file-item:hover,
+:host([data-theme*="dark"]) .file-item:hover {
+  background-color: var(--nuraly-color-layer-hover-01, #393939);
+}
+
+/* File name - dark theme */
+:host-context([data-theme*="dark"]) .file-name,
+:host([data-theme*="dark"]) .file-name {
+  color: var(--nuraly-color-text-primary, #f4f4f4);
+}
+
+/* File size - dark theme */
+:host-context([data-theme*="dark"]) .file-size,
+:host([data-theme*="dark"]) .file-size {
+  color: var(--nuraly-color-text-secondary, #8d8d8d);
+}
+
+/* File actions - dark theme */
+:host-context([data-theme*="dark"]) .file-actions button,
+:host([data-theme*="dark"]) .file-actions button {
+  color: var(--nuraly-color-text-secondary, #8d8d8d);
+}
+:host-context([data-theme*="dark"]) .file-actions button:hover,
+:host([data-theme*="dark"]) .file-actions button:hover {
+  color: var(--nuraly-color-button-primary, #78a9ff);
+}
+
+/* File item SVG icons - dark theme */
+:host-context([data-theme*="dark"]) .file-item > svg,
+:host([data-theme*="dark"]) .file-item > svg {
+  color: var(--nuraly-color-text-secondary, #8d8d8d);
+}
+
+/* Progress bar - dark theme */
+:host-context([data-theme*="dark"]) .progress-bar,
+:host([data-theme*="dark"]) .progress-bar {
+  background-color: var(--nuraly-color-border-subtle, #525252);
+}
+
+/* Preview modal - dark theme */
+:host-context([data-theme*="dark"]) .preview-modal,
+:host([data-theme*="dark"]) .preview-modal {
+  background-color: rgba(0, 0, 0, 0.85);
+}
+
+/* Progress bar styles - fixed to ensure full width */
+.progress-bar {
+  height: 2px;
+  width: 100%;
+  background-color: var(--nuraly-color-border, #e6e6e6);
+  margin-top: 4px;
+  position: relative;
+  border-radius: 2px;
+  overflow: hidden;
+}
+.progress-inner {
+  height: 100%;
+  background-color: var(--nuraly-color-primary, #409eff);
+  position: absolute;
+  left: 0;
+  top: 0;
+  transition: width 0.3s ease;
+}
+
+/* Progress percentage indicator */
+.progress-percentage {
+  position: absolute;
+  right: 0;
+  top: -18px;
+  font-size: var(--nuraly-font-size-01, 12px);
+  color: var(--nuraly-color-primary, #409eff);
+}
+
+.hidden {
+  display: none;
+}
+.success {
+  color: var(--nuraly-color-success, #67c23a);
+}
+.error {
+  color: var(--nuraly-color-danger, #f56c6c);
+}
+.icon-delete {
+  color: var(--nuraly-color-danger, #f56c6c);
+}
+.file-preview {
+  width: 100%;
+  margin-top: 4px;
+}
+.image-preview {
+  display: block;
+  max-width: 100%;
+  max-height: 200px;
+  border-radius: var(--nuraly-border-radius-sm, 4px);
+  object-fit: contain;
+  cursor: zoom-in;
+}
+.preview-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--nuraly-color-background-overlay, rgba(0, 0, 0, 0.7));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--nuraly-z-modal, 1000);
+}
+.preview-modal img {
+  max-width: 90%;
+  max-height: 90%;
+  object-fit: contain;
+}
+.preview-close {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  color: var(--nuraly-color-text-inverse, white);
+  font-size: 30px;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+.preview-icon {
+  padding: 4px;
+  color: var(--nuraly-color-primary, #409eff);
+  cursor: zoom-in;
+}
+
+/* File item container with progress bar */
+.file-container {
+  width: 100%;
+  position: relative;
+  overflow: hidden; /* Prevent child overflow */
+}
+
+/* Responsive styles */
+@media (max-width: 600px) {
+  .upload-dragger {
+    height: 140px;
+    padding: var(--nuraly-spacing-04, 12px);
+  }
+  .upload-icon {
+    font-size: 24px;
+  }
+  .upload-text,
+  .upload-tip {
+    font-size: var(--nuraly-font-size-01, 13px);
+  }
+  .file-item {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-areas:
+      "icon filename"
+      "size status"
+      "progress progress"
+      "actions actions";
+    gap: 4px 8px;
+    align-items: center;
+    padding: var(--nuraly-spacing-03, 8px);
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden; /* Hide content that overflows */
+  }
+  .file-item > svg:first-child {
+    grid-area: icon;
+    align-self: start;
+  }
+  .file-name {
+    grid-area: filename;
+    margin: 0;
+    padding: 2px 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 0; /* Force shrinking to minimum width */
+    max-width: 100%; /* Ensure it doesn't exceed its container */
+    word-break: break-all; /* Break extremely long words if necessary */
+    flex: 1; /* Take available space */
+  }
+  .file-size {
+    grid-area: size;
+    margin: 0;
+  }
+  .file-status {
+    grid-area: status;
+    justify-self: end;
+  }
+  .progress-bar {
+    grid-area: progress;
+    width: 100%;
+  }
+  .file-actions {
+    grid-area: actions;
+    margin: 4px 0 0 0;
+    justify-content: flex-end;
+    width: 100%;
+  }
+  .upload-button {
+    width: 100%;
+    font-size: var(--nuraly-font-size-03, 16px);
+  }
+}
+`;
+//# sourceMappingURL=styles.js.map

package/dist/src/components/file-upload/types.d.ts

@@ -0,0 +1,11 @@
+export interface UploadFile {
+    name: string;
+    size: string;
+    raw: File;
+    status: 'ready' | 'uploading' | 'success' | 'error';
+    percentage: number;
+    uid: string;
+    url?: string;
+    isImage?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/src/components/file-upload/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/src/components/file-upload/utils.d.ts

@@ -0,0 +1,6 @@
+export declare const fileUtils: {
+    isImageFile(file: File): boolean;
+    formatFileSize(bytes: number): string;
+    createFilePreview(file: File): Promise<string>;
+};
+//# sourceMappingURL=utils.d.ts.map

package/dist/src/components/file-upload/utils.js

@@ -0,0 +1,24 @@
+export const fileUtils = {
+    isImageFile(file) {
+        return file.type.startsWith('image/');
+    },
+    formatFileSize(bytes) {
+        if (bytes === 0)
+            return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    },
+    createFilePreview(file) {
+        return new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                var _a;
+                resolve((_a = e.target) === null || _a === void 0 ? void 0 : _a.result);
+            };
+            reader.readAsDataURL(file);
+        });
+    }
+};
+//# sourceMappingURL=utils.js.map

package/dist/src/components/flex/bundle.js

@@ -0,0 +1,114 @@
+import{css as e,LitElement as t,html as r}from"lit";import{property as n,customElement as i}from"lit/decorators.js";import{NuralyUIBaseMixin as a}from"@nuralyui/common/mixins";const l=e`
+  :host {
+    display: block;
+    box-sizing: border-box;
+  }
+
+  .nr-flex {
+    display: flex;
+    box-sizing: border-box;
+    
+    /* Theme-aware */
+    color: var(--nuraly-color-text);
+  }
+
+  /* Inline flex */
+  .nr-flex[data-inline="true"] {
+    display: inline-flex;
+  }
+
+  /* Flex direction */
+  .nr-flex[data-direction="row"] {
+    flex-direction: row;
+  }
+
+  .nr-flex[data-direction="row-reverse"] {
+    flex-direction: row-reverse;
+  }
+
+  .nr-flex[data-direction="column"] {
+    flex-direction: column;
+  }
+
+  .nr-flex[data-direction="column-reverse"] {
+    flex-direction: column-reverse;
+  }
+
+  /* Flex wrap */
+  .nr-flex[data-wrap="nowrap"] {
+    flex-wrap: nowrap;
+  }
+
+  .nr-flex[data-wrap="wrap"] {
+    flex-wrap: wrap;
+  }
+
+  .nr-flex[data-wrap="wrap-reverse"] {
+    flex-wrap: wrap-reverse;
+  }
+
+  /* Justify content */
+  .nr-flex[data-justify="flex-start"] {
+    justify-content: flex-start;
+  }
+
+  .nr-flex[data-justify="flex-end"] {
+    justify-content: flex-end;
+  }
+
+  .nr-flex[data-justify="center"] {
+    justify-content: center;
+  }
+
+  .nr-flex[data-justify="space-between"] {
+    justify-content: space-between;
+  }
+
+  .nr-flex[data-justify="space-around"] {
+    justify-content: space-around;
+  }
+
+  .nr-flex[data-justify="space-evenly"] {
+    justify-content: space-evenly;
+  }
+
+  /* Align items */
+  .nr-flex[data-align="flex-start"] {
+    align-items: flex-start;
+  }
+
+  .nr-flex[data-align="flex-end"] {
+    align-items: flex-end;
+  }
+
+  .nr-flex[data-align="center"] {
+    align-items: center;
+  }
+
+  .nr-flex[data-align="baseline"] {
+    align-items: baseline;
+  }
+
+  .nr-flex[data-align="stretch"] {
+    align-items: stretch;
+  }
+`,s="";
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var o=function(e,t,r,n){for(var i,a=arguments.length,l=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n,s=e.length-1;s>=0;s--)(i=e[s])&&(l=(a<3?i(l):a>3?i(t,r,l):i(t,r))||l);return a>3&&l&&Object.defineProperty(t,r,l),l};let f=class extends(a(t)){constructor(){super(...arguments),this.direction="row",this.vertical=!1,this.wrap="nowrap",this.justify="",this.align="",this.gap=0,this.inline=!1,this.flex=""}getFlexDirection(){return this.vertical?"column":this.direction}getGapValue(e){if("number"==typeof e)return`${e}px`;if("string"==typeof e)switch(e){case"small":return"var(--nuraly-spacing-2, 8px)";case"medium":return"var(--nuraly-spacing-3, 16px)";case"large":return"var(--nuraly-spacing-4, 24px)";default:return e}return"0"}getGapStyles(){const e={};if(Array.isArray(this.gap)){const[t,r]=this.gap;e["column-gap"]=this.getGapValue(t),e["row-gap"]=this.getGapValue(r)}else this.gap&&(e.gap=this.getGapValue(this.gap));return e}getFlexStyles(){const e=Object.assign({},this.getGapStyles());return this.flex&&(e.flex=this.flex),Object.entries(e).map(([e,t])=>`${e}: ${t}`).join("; ")}render(){const e=this.getFlexDirection(),t=this.getFlexStyles();return r`
+      <div
+        class="nr-flex"
+        data-direction="${e}"
+        data-wrap="${this.wrap}"
+        data-justify="${this.justify}"
+        data-align="${this.align}"
+        data-inline="${this.inline}"
+        data-theme="${this.currentTheme}"
+        style="${t}"
+      >
+        <slot></slot>
+      </div>
+    `}};f.styles=l,o([n({type:String})],f.prototype,"direction",void 0),o([n({type:Boolean})],f.prototype,"vertical",void 0),o([n({type:String})],f.prototype,"wrap",void 0),o([n({type:String})],f.prototype,"justify",void 0),o([n({type:String})],f.prototype,"align",void 0),o([n({type:Object})],f.prototype,"gap",void 0),o([n({type:Boolean})],f.prototype,"inline",void 0),o([n({type:String})],f.prototype,"flex",void 0),f=o([i("nr-flex")],f);export{s as EMPTY_STRING,f as NrFlexElement};

package/dist/src/components/flex/flex.component.d.ts

@@ -0,0 +1,89 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import { FlexDirection, FlexWrap, FlexJustify, FlexAlign, Gap } from './flex.types.js';
+declare const NrFlexElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+/**
+ * Flex layout component for flexible box layouts
+ *
+ * @example
+ * ```html
+ * <!-- Basic flex -->
+ * <nr-flex>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </nr-flex>
+ *
+ * <!-- Flex with gap -->
+ * <nr-flex gap="medium">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </nr-flex>
+ *
+ * <!-- Centered flex -->
+ * <nr-flex justify="center" align="center">
+ *   <div>Centered content</div>
+ * </nr-flex>
+ *
+ * <!-- Column layout with gap -->
+ * <nr-flex vertical gap="16">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </nr-flex>
+ *
+ * <!-- Responsive gap -->
+ * <nr-flex .gap=${[16, 24]}>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </nr-flex>
+ * ```
+ *
+ * @slot default - Flex items
+ */
+export declare class NrFlexElement extends NrFlexElement_base {
+    static styles: import("lit").CSSResult;
+    /** Flex direction (shorthand: use vertical prop for column) */
+    direction: FlexDirection;
+    /** Shorthand for flex-direction: column */
+    vertical: boolean;
+    /** Flex wrap behavior */
+    wrap: FlexWrap;
+    /** Justify content alignment */
+    justify: FlexJustify | '';
+    /** Align items alignment */
+    align: FlexAlign | '';
+    /** Gap between flex items - can be preset string, number (px), or [horizontal, vertical] */
+    gap: Gap;
+    /** Make flex container inline */
+    inline: boolean;
+    /** Custom flex CSS value (e.g., "1", "auto", "none") */
+    flex: string | '';
+    /**
+     * Get computed flex direction
+     */
+    private getFlexDirection;
+    /**
+     * Convert gap value to CSS value
+     */
+    private getGapValue;
+    /**
+     * Get gap styles for flex container
+     */
+    private getGapStyles;
+    /**
+     * Get all inline styles for flex container
+     */
+    private getFlexStyles;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-flex': NrFlexElement;
+    }
+}
+export {};
+//# sourceMappingURL=flex.component.d.ts.map