@iyulab/components 0.4.0 → 1.0.1

package/dist/components/chip/UChip.js

@@ -0,0 +1,103 @@
+import { UElement } from "../UElement.js";
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import "../icon/UIcon.js";
+import "../button/UButton.js";
+import "../tooltip/UTooltip.js";
+import "../tag/UTag.js";
+import { styles } from "./UChip.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/chip/UChip.ts
+var UChip = class UChip extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "filled";
+		this.color = "neutral";
+		this.rounded = false;
+		this.removable = false;
+		this.selectable = false;
+		this.selected = false;
+		this.value = "";
+		this.handleTagClick = (e) => {
+			if (!this.selectable) return;
+			this.selected = !this.selected;
+			this.fire("pick", { detail: {
+				value: this.value,
+				selected: this.selected,
+				shiftKey: e.shiftKey,
+				metaKey: e.metaKey,
+				ctrlKey: e.ctrlKey
+			} });
+		};
+		this.handleRemoveClick = (e) => {
+			e.stopImmediatePropagation();
+			if (this.fire("remove")) this.remove();
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <u-tag part="tag"
+        .variant=${this.variant}
+        .color=${this.color}
+        .rounded=${this.rounded}
+        @click=${this.handleTagClick}
+      >
+        <u-icon class="check-icon" part="check" slot="prefix"
+          ?hidden=${!this.selectable || !this.selected}  
+          lib="internal" 
+          name="check-lg"
+        ></u-icon>
+
+        <slot name="prefix" slot="prefix"></slot>
+        <slot></slot>
+        <slot name="suffix" slot="suffix"></slot>
+        
+        <u-button class="remove-btn" part="remove" slot="suffix"
+          ?hidden=${!this.removable}
+          rounded
+          variant="ghost"
+          tabindex="-1"
+          aria-label="Remove"
+          @click=${this.handleRemoveClick}>
+          <u-icon lib="internal" name="x-lg"></u-icon>
+        </u-button>
+      </u-tag>
+
+      <u-tooltip part="tooltip">
+        <slot name="tooltip"></slot>
+      </u-tooltip>
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UChip.prototype, "variant", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UChip.prototype, "color", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UChip.prototype, "rounded", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UChip.prototype, "removable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UChip.prototype, "selectable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UChip.prototype, "selected", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UChip.prototype, "value", void 0);
+UChip = __decorate([customElement("u-chip")], UChip);
+//#endregion
+export { UChip };

package/dist/components/chip/UChip.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

package/dist/components/chip/UChip.styles.js

@@ -0,0 +1,31 @@
+import { css } from "lit";
+//#region src/components/chip/UChip.styles.ts
+var styles = css`
+  :host {
+    display: inline-flex;
+    user-select: none;
+    cursor: default;
+  }
+  :host([selectable]) {
+    cursor: pointer;
+  }
+
+  :host([selectable]:hover) u-tag {
+    filter: brightness(0.95);
+  }
+  :host([selectable][selected]) u-tag {
+    outline: 2px solid currentColor;
+    outline-offset: -1px;
+    font-weight: 600;
+  }
+
+  .check-icon {
+    font-size: 1em;
+  }
+
+  .remove-btn {
+    font-size: 0.7em;
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/dialog/UDialog.d.ts

@@ -1,7 +1,34 @@
-import { UDialog } from './UDialog.component.js';
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { UOverlayElement } from '../UOverlayElement.js';
+export type DialogPlacement = 'top-start' | 'top' | 'top-end' | 'start' | 'center' | 'end' | 'bottom-start' | 'bottom' | 'bottom-end';
+/**
+ * 오버레이 위에 모달 창을 제공하는 다이얼로그 컴포넌트입니다.
+ *
+ * @slot - 본문 영역
+ * @slot header - 헤더 콘텐츠 영역
+ * @slot footer - 푸터 영역 (액션 버튼 등)
+ *
+ * @csspart container - 다이얼로그의 컨테이너 요소
+ * @csspart panel - 다이얼로그의 패널 요소
+ * @csspart header - 다이얼로그의 헤더 요소
+ * @csspart body - 다이얼로그의 본문 요소
+ * @csspart close-btn - 닫기 버튼 요소
+ */
+export declare class UDialog extends UOverlayElement {
+    static styles: CSSResultGroup;
+    /** 닫기 버튼 표시 여부 */
+    closable: boolean;
+    /** 다이얼로그 배치 위치 */
+    placement: DialogPlacement;
+    /** 가장자리로부터의 간격 (px) */
+    offset: number;
+    private hasHeader;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private handleHeaderSlotChange;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-dialog': UDialog;
     }
 }
-export { UDialog };

package/dist/components/dialog/UDialog.js

@@ -1,5 +1,67 @@
-import { UDialog } from './UDialog.component.js';
-
-UDialog.define("u-dialog");
-
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import "../icon/UIcon.js";
+import { UOverlayElement } from "../UOverlayElement.js";
+import "../button/UButton.js";
+import { styles } from "./UDialog.styles.js";
+import { customElement, property, state } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/dialog/UDialog.ts
+var UDialog = class UDialog extends UOverlayElement {
+	constructor(..._args) {
+		super(..._args);
+		this.closable = false;
+		this.placement = "center";
+		this.offset = 0;
+		this.hasHeader = false;
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("offset")) this.style.setProperty("--container-offset", `${this.offset}px`);
+	}
+	render() {
+		return html`
+      <div class="container" part="container">
+        <div class="panel" part="panel">
+          <div class="header" part="header"
+            ?hidden=${!this.hasHeader && !this.closable}>
+            <slot name="header" @slotchange=${this.handleHeaderSlotChange}></slot>
+            <div style="flex: 1;"></div>
+            <u-button class="close-btn" part="close-btn"
+              variant="ghost"
+              ?hidden=${!this.closable}
+              @click=${() => this.requestClose("button")}>
+              <u-icon lib="internal" name="x-lg"></u-icon>
+            </u-button>
+          </div>
+          <div class="body" part="body">
+            <slot></slot>
+          </div>
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `;
+	}
+	handleHeaderSlotChange(e) {
+		this.hasHeader = e.target.assignedNodes({ flatten: true }).length > 0;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UDialog.prototype, "closable", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UDialog.prototype, "placement", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UDialog.prototype, "offset", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], UDialog.prototype, "hasHeader", void 0);
+UDialog = __decorate([customElement("u-dialog")], UDialog);
+//#endregion
 export { UDialog };

package/dist/components/dialog/UDialog.styles.js

@@ -1,66 +1,117 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/dialog/UDialog.styles.ts
+var styles = css`
   :host {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    --container-offset: 0px;
   }
 
-  .dialog {
-    position: relative;
-    display: block;
-    max-width: 90vw;
-    max-height: 90vh;
-    padding: 20px;
+  /* placement별 정렬 */
+  :host([placement="center"])       .container { align-items: center;     justify-content: center;     }
+  :host([placement="top"])          .container { align-items: flex-start;  justify-content: center;    }
+  :host([placement="bottom"])       .container { align-items: flex-end;    justify-content: center;    }
+  :host([placement="start"])        .container { align-items: center;      justify-content: flex-start; }
+  :host([placement="end"])          .container { align-items: center;      justify-content: flex-end;   }
+  :host([placement="top-start"])    .container { align-items: flex-start;  justify-content: flex-start; }
+  :host([placement="top-end"])      .container { align-items: flex-start;  justify-content: flex-end;   }
+  :host([placement="bottom-start"]) .container { align-items: flex-end;    justify-content: flex-start; }
+  :host([placement="bottom-end"])   .container { align-items: flex-end;    justify-content: flex-end;   }
+
+  /* placement별 초기 transform */
+  :host([placement="top"]) .panel,
+  :host([placement="top-start"]) .panel,
+  :host([placement="top-end"]) .panel       { 
+    transform: scale(0.92) translateY(-12px); 
+  }
+
+  :host([placement="bottom"]) .panel,
+  :host([placement="bottom-start"]) .panel,
+  :host([placement="bottom-end"]) .panel    { 
+    transform: scale(0.92) translateY(12px); 
+  }
+
+  :host([placement="start"]) .panel         { 
+    transform: scale(0.92) translateX(-12px); 
+  }
+  :host([placement="end"]) .panel           { 
+    transform: scale(0.92) translateX(12px); 
+  }
+
+  :host([open][placement="top"]) .panel,
+  :host([open][placement="top-start"]) .panel,
+  :host([open][placement="top-end"]) .panel,
+  :host([open][placement="bottom"]) .panel,
+  :host([open][placement="bottom-start"]) .panel,
+  :host([open][placement="bottom-end"]) .panel,
+  :host([open][placement="start"]) .panel,
+  :host([open][placement="end"]) .panel {
+    opacity: 1;
+    transform: scale(1) translate(0);
+  }
+
+  .container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    padding: var(--container-offset);
+    pointer-events: none;
+  }
+  
+  .panel {
+    display: flex;
+    flex-direction: column;
+    max-width: 90%;
+    max-height: 90%;
     border: 1px solid var(--u-border-color);
     border-radius: 6px;
     background: var(--u-panel-bg-color);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    pointer-events: auto;
     opacity: 0;
-    transform: scale(0.9);
+    transform: scale(0.92);
     transition: opacity 0.3s ease, transform 0.3s ease;
   }
-  .dialog[open] {
+  :host([open]) .panel {
     opacity: 1;
     transform: scale(1);
   }
-  .dialog[shake] {
-    animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
-  }
 
   .header {
+    flex-shrink: 0;
+    position: relative;
     display: flex;
-    flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    font-size: 20px;
-    margin-bottom: 20px;
-  }
-  .header .title {
-    line-height: 1.2;
+    gap: 8px;
+    padding: 12px 16px;
+    font-size: 18px;
     font-weight: 600;
+    line-height: 1.3;
+    border-bottom: 1px solid var(--u-border-color);
+  }
+  .header .close-btn {
+    flex-shrink: 0;
+    padding: 4px;
+    font-size: inherit;
+    border-radius: 4px;
   }
 
-  .content {
+  .body {
+    flex: 1 1 auto;
+    min-height: 0;
     display: block;
-    max-width: calc(90vw - 40px);
-    max-height: calc(90vh - 100px);
+    padding: 16px;
     overflow: auto;
   }
 
-  /* 진동 애니메이션 */
-  @keyframes shake {
-    0%, 100% {
-      transform: translateX(0);
-    }
-    10%, 30%, 50%, 70%, 90% {
-      transform: translateX(-8px);
-    }
-    20%, 40%, 60%, 80% {
-      transform: translateX(8px);
-    }
+  ::slotted([slot="footer"]) {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 12px 16px;
+    border-top: 1px solid var(--u-border-color);
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/divider/UDivider.d.ts

@@ -1,7 +1,32 @@
-import { UDivider } from './UDivider.component.js';
+import { UElement } from '../UElement.js';
+export type DividerVariant = 'solid' | 'dashed' | 'dotted';
+export type DividerAlign = 'start' | 'center' | 'end';
+/**
+ * 요소 사이에 구분선을 제공하는 컴포넌트입니다.
+ *
+ * @slot - 구분선 위에 오버레이하는 콘텐츠 (텍스트, 아이콘)
+ *
+ * @csspart line-start - 구분선의 시작 부분
+ * @csspart label - 슬롯 콘텐츠 부분
+ * @csspart line-end - 구분선의 끝 부분
+ *
+ * @cssprop --divider-size - 선의 두께 (기본: 1px)
+ * @cssprop --divider-color - 선의 색상
+ * @cssprop --divider-spacing - 상하/좌우 간격 (기본: 8px)
+ */
+export declare class UDivider extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 수직 방향 여부 (기본값 수평) */
+    vertical: boolean;
+    /** 선의 색상 */
+    variant: DividerVariant;
+    /** 슬롯 콘텐츠 정렬 위치 */
+    align: DividerAlign;
+    protected render(): import('lit-html').TemplateResult<1>;
+    private handleSlotChange;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-divider': UDivider;
     }
 }
-export { UDivider };

package/dist/components/divider/UDivider.js

@@ -1,5 +1,46 @@
-import { UDivider } from './UDivider.component.js';
-
-UDivider.define("u-divider");
-
+import { UElement } from "../UElement.js";
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { styles } from "./UDivider.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/divider/UDivider.ts
+var UDivider = class UDivider extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.vertical = false;
+		this.variant = "solid";
+		this.align = "center";
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <span class="line" part="line-start"></span>
+      <span class="label" part="label">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </span>
+      <span class="line" part="line-end"></span>
+    `;
+	}
+	handleSlotChange(e) {
+		const hasContent = e.target.assignedNodes({ flatten: true }).some((n) => n.nodeType === Node.ELEMENT_NODE || n.nodeType === Node.TEXT_NODE && n.textContent?.trim());
+		this.toggleAttribute("has-label", hasContent);
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UDivider.prototype, "vertical", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UDivider.prototype, "variant", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UDivider.prototype, "align", void 0);
+UDivider = __decorate([customElement("u-divider")], UDivider);
+//#endregion
 export { UDivider };

package/dist/components/divider/UDivider.styles.js

@@ -1,23 +1,93 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/divider/UDivider.styles.ts
+var styles = css`
   :host {
     --divider-size: 1px;
-    --divider-color: var(--u-neutral-200, #e5e7eb);
+    --divider-color: var(--u-neutral-300);
     --divider-spacing: 8px;
   }
 
   :host {
-    display: block;
-    background-color: var(--divider-color);
-    height: var(--divider-size);
+    display: flex;
+    align-items: center;
     margin: var(--divider-spacing) 0;
   }
+
+  /* variant */
+  :host([variant="dashed"]) .line {
+    border-top-style: dashed;
+  }
+  :host([variant="dotted"]) .line {
+    border-top-style: dotted;
+  }
+
+  /* align */
+  :host([align="start"]) .line:first-child {
+    flex: 0 0 24px;
+  }
+  :host([align="end"]) .line:last-child {
+    flex: 0 0 24px;
+  }
+
+  :host([has-label]) .label {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  /* 구분 선 */
+  .line {
+    flex: 1;
+    border-top: var(--divider-size) solid var(--divider-color);
+  }
+
+  /* 슬롯 콘텐츠 */
+  .label {
+    display: none;
+    padding: 0 12px;
+    color: var(--u-txt-color-weak);
+    font-size: 0.85em;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  /* vertical */
   :host([vertical]) {
-    width: var(--divider-size);
-    height: auto;
+    flex-direction: column;
     margin: 0 var(--divider-spacing);
+    height: auto;
+    min-height: 1em;
+  }
+
+  :host([vertical]) .line {
+    flex: 1;
+    min-height: 8px;
+    border-top: none;
+    border-left: var(--divider-size) solid var(--divider-color);
+  }
+
+  :host([vertical][variant="dashed"]) .line {
+    border-left-style: dashed;
+  }
+  :host([vertical][variant="dotted"]) .line {
+    border-left-style: dotted;
   }
-`;
 
+  :host([vertical][align="start"]) .line:first-child {
+    flex: 0 0 12px;
+  }
+  :host([vertical][align="start"]) .line:last-child {
+    flex: 1;
+  }
+  :host([vertical][align="end"]) .line:first-child {
+    flex: 1;
+  }
+  :host([vertical][align="end"]) .line:last-child {
+    flex: 0 0 12px;
+  }
+
+  :host([vertical]) .label {
+    padding: 12px 0;
+  }
+`;
+//#endregion
 export { styles };

package/dist/components/drawer/UDrawer.d.ts

@@ -1,8 +1,30 @@
-import { UDrawer } from './UDrawer.component.js';
+import { CSSResultGroup } from 'lit';
+import { UOverlayElement } from '../UOverlayElement.js';
+export type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
+/**
+ * 화면 가장자리에서 슬라이드하여 표시되는 드로어 컴포넌트입니다.
+ *
+ * @slot - 본문 영역
+ * @slot header - 헤더 콘텐츠 영역
+ * @slot footer - 푸터 영역 (액션 버튼 등)
+ *
+ * @csspart panel - 드로어 패널 전체
+ * @csspart header - 헤더 영역
+ * @csspart body - 본문 영역
+ * @csspart close-btn - 닫기 버튼
+ */
+export declare class UDrawer extends UOverlayElement {
+    static styles: CSSResultGroup;
+    /** 닫기 버튼 표시 여부 */
+    closable: boolean;
+    /** 드로어가 열리는 위치 */
+    placement: DrawerPlacement;
+    private hasHeader;
+    render(): import('lit-html').TemplateResult<1>;
+    private handleHeaderSlotChange;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-drawer': UDrawer;
     }
 }
-export { UDrawer };
-export type { DrawerPlacement } from './UDrawer.component.js';