@iyulab/components 0.1.0

package/dist/components/menu/index.d.ts

@@ -0,0 +1,7 @@
+import { Menu } from './Menu.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-menu': Menu;
+    }
+}
+export { Menu };

package/dist/components/menu-item/MenuItem.d.ts

@@ -0,0 +1,27 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../BaseElement.js';
+/**
+ * MenuItem 컴포넌트는 메뉴의 개별 항목을 나타냅니다.
+ * u-menu 및 u-context-menu와 함께 사용됩니다.
+ */
+export declare class MenuItem extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    /** 메뉴 항목이 비활성화 상태인지 여부입니다. */
+    disabled: boolean;
+    /** 메뉴 항목이 선택된 상태인지 여부입니다. */
+    selected: boolean;
+    /** 체크 가능한 경우, 체크 상태인지 여부입니다. */
+    checked: boolean;
+    /** 메뉴 항목에 체크 표시를 할 수 있는지 여부입니다. */
+    checkable: boolean;
+    /** 메뉴 항목의 값입니다. */
+    value: string;
+    connectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    /** 메뉴 항목의 앞부분을 렌더링합니다. */
+    private renderPrefixItem;
+    /** 클릭 이벤트를 처리합니다. */
+    private handleClick;
+}

package/dist/components/menu-item/MenuItem.js

@@ -0,0 +1,68 @@
+import { html as d, nothing as n } from "lit";
+import { property as s } from "lit/decorators.js";
+import { BaseElement as o } from "../BaseElement.js";
+import { styles as p } from "./MenuItem.styles.js";
+var u = Object.defineProperty, i = (l, e, c, f) => {
+  for (var t = void 0, a = l.length - 1, h; a >= 0; a--)
+    (h = l[a]) && (t = h(e, c, t) || t);
+  return t && u(e, c, t), t;
+};
+class r extends o {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.selected = !1, this.checked = !1, this.checkable = !1, this.value = "", this.handleClick = (e) => {
+      if (this.disabled) {
+        e.preventDefault(), e.stopPropagation();
+        return;
+      }
+      this.checkable ? (this.checked = !this.checked, this.emit("u-check", { checked: this.checked })) : this.emit("u-select", { value: this.value });
+    };
+  }
+  static {
+    this.styles = [super.styles, p];
+  }
+  static {
+    this.dependencies = {};
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "menuitem"), this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+  }
+  updated(e) {
+    super.updated(e), e.has("disabled") && (this.setAttribute("tabindex", this.disabled ? "-1" : "0"), this.setAttribute("aria-disabled", this.disabled ? "true" : "false")), e.has("checked") && this.setAttribute("aria-checked", this.checked ? "true" : "false");
+  }
+  render() {
+    return d`
+      <div class="container" @click=${this.handleClick}>
+        ${this.renderPrefixItem()}
+        <slot name="prefix"></slot>
+        <span class="content">
+          <slot></slot>
+        </span>
+        <slot name="suffix"></slot>
+      </div>
+    `;
+  }
+  /** 메뉴 항목의 앞부분을 렌더링합니다. */
+  renderPrefixItem() {
+    return this.checkable ? d`
+        <span class="checker" ?checked=${this.checked}>✓</span>
+      ` : n;
+  }
+}
+i([
+  s({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled");
+i([
+  s({ type: Boolean, reflect: !0 })
+], r.prototype, "selected");
+i([
+  s({ type: Boolean, reflect: !0 })
+], r.prototype, "checked");
+i([
+  s({ type: Boolean })
+], r.prototype, "checkable");
+i([
+  s({ type: String })
+], r.prototype, "value");
+export {
+  r as MenuItem
+};

package/dist/components/menu-item/MenuItem.styles.d.ts

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

package/dist/components/menu-item/MenuItem.styles.js

@@ -0,0 +1,64 @@
+import { css as e } from "lit";
+const r = e`
+  :host {
+    display: block;
+
+    --selected-color: var(--u-blue-600, #0066cc);
+    --selected-bg-color: var(--u-blue-50, #e8f4f8);
+  }
+  :host([disabled]) {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+  :host([disabled]) .container {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  :host(:not([disabled])) .container:hover {
+    background-color: var(--u-bg-color-hover, #f5f5f5);
+  }
+  :host([selected]) .container {
+    color: var(--selected-color, #0066cc);
+    background-color: var(--selected-bg-color, #e8f4f8);
+  }
+
+  .container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    line-height: 1.5;
+    border-radius: 4px;
+    background-color: transparent;
+    transition: background-color 0.2s ease;
+    user-select: none;
+    cursor: pointer;
+  }
+
+  .checker {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    width: 1em;
+    font-size: 0.75em;
+    font-weight: bold;
+    color: var(--u-blue-600, #0066cc);
+    transition: opacity 0.2s ease;
+  }
+  .checker[checked] {
+    opacity: 1;
+  }
+
+  .content {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+export {
+  r as styles
+};

package/dist/components/menu-item/index.d.ts

@@ -0,0 +1,7 @@
+import { MenuItem } from './MenuItem.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-menu-item': MenuItem;
+    }
+}
+export { MenuItem };

package/dist/components/panel/Panel.d.ts

@@ -0,0 +1,10 @@
+import { BaseElement } from '../BaseElement.js';
+/**
+ * 각 패널은 독립적인 크기와 콘텐츠를 가질 수 있습니다.
+ */
+export declare class Panel extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    connectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/panel/Panel.js

@@ -0,0 +1,20 @@
+import { html as e } from "lit";
+import { BaseElement as s } from "../BaseElement.js";
+import { styles as t } from "./Panel.styles.js";
+class o extends s {
+  static {
+    this.styles = [super.styles, t];
+  }
+  static {
+    this.dependencies = {};
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("scrollable");
+  }
+  render() {
+    return e`<slot></slot>`;
+  }
+}
+export {
+  o as Panel
+};

package/dist/components/panel/Panel.styles.d.ts

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

package/dist/components/panel/Panel.styles.js

@@ -0,0 +1,12 @@
+import { css as t } from "lit";
+const s = t`
+  :host {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+`;
+export {
+  s as styles
+};

package/dist/components/panel/index.d.ts

@@ -0,0 +1,7 @@
+import { Panel } from './Panel.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-panel': Panel;
+    }
+}
+export { Panel };

package/dist/components/progress-ring/ProgressRing.d.ts

@@ -0,0 +1,31 @@
+import { PropertyValues } from 'lit';
+import { BaseElement } from '../BaseElement.js';
+/** 원형 진행 표시기의 변형 타입 */
+export type ProgressRingVariant = 'smooth' | 'blocks' | 'ticks';
+/**
+ * ProgressRing 컴포넌트는 원형 진행 표시기를 제공합니다.
+ * 진행 상태를 시각적으로 나타내며, 크기와 두께를 스타일 속성으로 조절할 수 있습니다.
+ */
+export declare class ProgressRing extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    progress: number;
+    dasharray: string;
+    /** 진행 표시기의 스타일 변형을 설정합니다. */
+    variant: ProgressRingVariant;
+    /** 진행 표시기의 최소값을 설정합니다. */
+    minValue: number;
+    /** 진행 표시기의 최대값을 설정합니다. */
+    maxValue: number;
+    /** 진행 표시기의 현재 값을 설정합니다. */
+    value: number;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    /** 진행 상태를 0과 1 사이의 값으로 반환합니다. */
+    private updateProgress;
+    /**
+     * variant에 따라 dasharray 값을 반환합니다.
+     * [dash-length] [gap-length] or [dash-length] 형식
+     */
+    private updateDashArray;
+}

package/dist/components/progress-ring/ProgressRing.js

@@ -0,0 +1,85 @@
+import { html as d } from "lit";
+import { state as n, property as h } from "lit/decorators.js";
+import { BaseElement as c } from "../BaseElement.js";
+import { styles as m } from "./ProgressRing.styles.js";
+var y = Object.defineProperty, a = (p, r, s, o) => {
+  for (var e = void 0, l = p.length - 1, u; l >= 0; l--)
+    (u = p[l]) && (e = u(r, s, e) || e);
+  return e && y(r, s, e), e;
+};
+const t = 100;
+class i extends c {
+  constructor() {
+    super(...arguments), this.progress = 0, this.dasharray = t.toString(), this.variant = "smooth", this.minValue = 0, this.maxValue = 100, this.value = 0;
+  }
+  static {
+    this.styles = [super.styles, m];
+  }
+  static {
+    this.dependencies = {};
+  }
+  willUpdate(r) {
+    super.willUpdate(r), r.has("variant") && (this.dasharray = this.updateDashArray(this.variant)), (r.has("minValue") || r.has("maxValue") || r.has("value")) && (this.progress = this.updateProgress(this.minValue, this.maxValue, this.value));
+  }
+  render() {
+    return d`
+      <svg class="progress-ring" part="base">
+        <defs>
+          <mask id="progress-mask">
+            <circle
+              pathLength="${t}"
+              stroke="white"
+              stroke-dasharray="${t}"
+              stroke-dashoffset="${t * (1 - this.progress)}"
+            ></circle>
+          </mask>
+        </defs>
+        
+        <circle 
+          class="track"
+          pathLength="${t}"
+          stroke-dasharray="${this.dasharray}"
+        ></circle>
+        <circle 
+          class="indicator"
+          pathLength="${t}"
+          stroke-dasharray="${this.dasharray}"
+          mask="url(#progress-mask)"
+        ></circle>
+      </svg>
+      <div class="label" part="label">${Math.round(this.progress * 100)}%</div>
+    `;
+  }
+  /** 진행 상태를 0과 1 사이의 값으로 반환합니다. */
+  updateProgress(r, s, o) {
+    return r = Number(r ?? 0), s = Number(s ?? 100), o = Math.min(Math.max(Number(o ?? 0), r), s), s === r ? 0 : (o - r) / (s - r);
+  }
+  /** 
+   * variant에 따라 dasharray 값을 반환합니다. 
+   * [dash-length] [gap-length] or [dash-length] 형식
+   */
+  updateDashArray(r) {
+    return r === "ticks" ? "1 1" : r === "blocks" ? "8 2" : t.toString();
+  }
+}
+a([
+  n()
+], i.prototype, "progress");
+a([
+  n()
+], i.prototype, "dasharray");
+a([
+  h({ type: String, reflect: !0 })
+], i.prototype, "variant");
+a([
+  h({ type: Number })
+], i.prototype, "minValue");
+a([
+  h({ type: Number })
+], i.prototype, "maxValue");
+a([
+  h({ type: Number })
+], i.prototype, "value");
+export {
+  i as ProgressRing
+};

package/dist/components/progress-ring/ProgressRing.styles.d.ts

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

package/dist/components/progress-ring/ProgressRing.styles.js

@@ -0,0 +1,53 @@
+import { css as t } from "lit";
+const r = t`
+  :host {
+    position: relative;
+    display: inline-flex;
+    font-size: inherit;
+
+    --track-width: 0.25em;
+    --track-color: var(--u-neutral-200, #e5e7eb);
+    --indicator-color: var(--u-blue-600, #3b82f6);
+  }
+  /* smooth variant - 매끄러운 원형 */
+  :host([variant="smooth"]) .mask {
+    stroke-linecap: round;
+  }
+
+  .progress-ring {
+    width: 6em;
+    height: 6em;
+    transform: rotate(-90deg); /* 0%가 위에서 시작하도록 회전 */
+  }
+  .progress-ring circle {
+    fill: none;
+    stroke-width: var(--track-width);
+    r: calc(3em - var(--track-width) / 2);
+    cx: 3em;
+    cy: 3em;
+  }
+
+  .track {
+    stroke: var(--track-color);
+  }
+  .indicator {
+    stroke: var(--indicator-color);
+    transition: stroke-dashoffset 350ms ease;
+  }
+
+  /* 라벨 중앙 숫자 */
+  .label {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    font-size: 1.1em;
+    color: var(--indicator-color);
+    pointer-events: none;
+  }
+`;
+export {
+  r as styles
+};

package/dist/components/progress-ring/index.d.ts

@@ -0,0 +1,7 @@
+import { ProgressRing } from './ProgressRing.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-progress-ring': ProgressRing;
+    }
+}
+export { ProgressRing };

package/dist/components/spinner/Spinner.d.ts

@@ -0,0 +1,9 @@
+import { BaseElement } from '../BaseElement.js';
+/**
+ * Spinner 컴포넌트는 로딩 상태를 시각적으로 표시하는 회전하는 원형 스피너를 제공합니다.
+ */
+export declare class Spinner extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/spinner/Spinner.js

@@ -0,0 +1,22 @@
+import { html as s } from "lit";
+import { BaseElement as e } from "../BaseElement.js";
+import { styles as r } from "./Spinner.styles.js";
+class a extends e {
+  static {
+    this.styles = [super.styles, r];
+  }
+  static {
+    this.dependencies = {};
+  }
+  render() {
+    return s`
+      <svg class="spinner" part="base">
+        <circle class="track"></circle>
+        <circle class="indicator"></circle>
+      </svg>
+    `;
+  }
+}
+export {
+  a as Spinner
+};

package/dist/components/spinner/Spinner.styles.d.ts

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

package/dist/components/spinner/Spinner.styles.js

@@ -0,0 +1,57 @@
+import { css as r } from "lit";
+const t = r`
+  :host {
+    display: inline-flex;
+    font-size: inherit;
+
+    --track-width: 0.125em;
+    --track-color: var(--u-neutral-200, #e5e7eb);
+    --indicator-color: var(--u-neutral-800, #1f2937);
+  }
+
+  .spinner {
+    flex: 1 1 auto;
+    width: 1em;
+    height: 1em;
+  }
+  .spinner circle {
+    fill: none;
+    stroke-width: var(--track-width);
+    r: calc(0.5em - var(--track-width) / 2);
+    cx: 0.5em;
+    cy: 0.5em;
+  }
+
+  .track {
+    stroke: var(--track-color);
+    transform-origin: 0% 0%;
+  }
+
+  .indicator {
+    stroke: var(--indicator-color);
+    stroke-linecap: round;
+    stroke-dasharray: 150% 75%;
+    transform-origin: 50% 50%;
+    animation: spin 2s linear infinite;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+      stroke-dasharray: 0.05em, 3em;
+    }
+
+    50% {
+      transform: rotate(450deg);
+      stroke-dasharray: 1.375em, 1.375em;
+    }
+
+    100% {
+      transform: rotate(1080deg);
+      stroke-dasharray: 0.05em, 3em;
+    }
+  }
+`;
+export {
+  t as styles
+};

package/dist/components/spinner/index.d.ts

@@ -0,0 +1,7 @@
+import { Spinner } from './Spinner.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-spinner': Spinner;
+    }
+}
+export { Spinner };

package/dist/components/split-panel/SplitPanel.d.ts

@@ -0,0 +1,26 @@
+import { BaseElement } from '../BaseElement.js';
+import { PanelOrientation } from './SplitPanel.types.js';
+/**
+ * SplitPanel 컴포넌트는 화면을 여러 개의 패널로 분할하여 표시합니다.
+ */
+export declare class SplitPanel extends BaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    static dependencies: Record<string, typeof BaseElement>;
+    private panels;
+    private splitters;
+    private isDragging;
+    private currentSplitter;
+    private totalSize;
+    private startPosition;
+    private startRatio;
+    /** 분할 방향을 설정합니다. 'horizontal'은 좌우 분할, 'vertical'은 상하 분할입니다. */
+    orientation: PanelOrientation;
+    /** 초기 패널 크기 비율을 설정합니다. (예: [30, 70]은 첫 번째 패널이 30%, 두 번째 패널이 70%를 차지) */
+    ratio: number[];
+    disconnectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private handleSlotChange;
+    private handleMouseDown;
+    private handleMouseMove;
+    private handleMouseUp;
+}

package/dist/components/split-panel/SplitPanel.js

@@ -0,0 +1,86 @@
+import { html as f } from "lit";
+import { property as p } from "lit/decorators.js";
+import { arrayAttributeConverter as g } from "../../internals/attribute-converters.js";
+import { BaseElement as v } from "../BaseElement.js";
+import { Panel as c } from "../panel/Panel.js";
+import { Splitter as u } from "./Splitter.js";
+import { styles as y } from "./SplitPanel.styles.js";
+var S = Object.defineProperty, d = (a, s, r, o) => {
+  for (var t = void 0, e = a.length - 1, i; e >= 0; e--)
+    (i = a[e]) && (t = i(s, r, t) || t);
+  return t && S(s, r, t), t;
+};
+class m extends v {
+  constructor() {
+    super(...arguments), this.panels = [], this.splitters = [], this.isDragging = !1, this.currentSplitter = null, this.totalSize = 0, this.startPosition = 0, this.startRatio = [], this.orientation = "horizontal", this.ratio = [], this.handleSlotChange = async (s) => {
+      const t = s.target.assignedElements({ flatten: !0 }).filter((e) => e instanceof c);
+      if (!(this.panels.length === t.length && this.panels.every((e, i) => e === t[i]))) {
+        if (this.splitters.forEach((e) => e.remove()), this.splitters = [], this.panels = t, t.forEach((e, i) => {
+          if (i === t.length - 1)
+            return;
+          const n = new u();
+          n.orientation = this.orientation, n.addEventListener("mousedown", this.handleMouseDown), this.splitters.push(n), e.after(n);
+        }), this.ratio.length === t.length) {
+          const e = this.ratio.reduce((i, n) => i + n, 0);
+          t.forEach((i, n) => {
+            const l = this.ratio[n] / e * 100;
+            i.style.flex = `${l} 1 0%`;
+          });
+          return;
+        } else
+          t.forEach((e) => {
+            e.style.flex = `${100 / t.length} 1 0%`;
+          });
+        this.requestUpdate(), await this.updateComplete;
+      }
+    }, this.handleMouseDown = (s) => {
+      s.preventDefault();
+      const r = s.currentTarget;
+      this.currentSplitter = r, this.isDragging = !0, this.startPosition = this.orientation === "horizontal" ? s.clientX : s.clientY;
+      const o = this.getBoundingClientRect(), t = this.orientation === "horizontal" ? o.width : o.height, e = this.splitters.reduce((i, n) => i + n.size, 0);
+      this.totalSize = t - e, this.startRatio = this.panels.map((i) => {
+        const n = i.getBoundingClientRect();
+        return (this.orientation === "horizontal" ? n.width : n.height) / this.totalSize * 100;
+      }), r.dragging = !0, document.addEventListener("mousemove", this.handleMouseMove), document.addEventListener("mouseup", this.handleMouseUp), document.body.style.userSelect = "none", document.body.style.cursor = this.orientation === "horizontal" ? "col-resize" : "row-resize";
+    }, this.handleMouseMove = (s) => {
+      if (!this.isDragging || !this.currentSplitter) return;
+      s.preventDefault();
+      const o = (this.orientation === "horizontal" ? s.clientX : s.clientY) - this.startPosition, t = this.splitters.indexOf(this.currentSplitter);
+      if (t === -1) return;
+      const e = this.panels[t], i = this.panels[t + 1];
+      if (!e || !i) return;
+      const n = o / this.totalSize * 100, l = this.startRatio[t] + n, h = this.startRatio[t + 1] - n;
+      l < 0 || h < 0 || (e.style.flex = `${l} 1 0%`, i.style.flex = `${h} 1 0%`);
+    }, this.handleMouseUp = (s) => {
+      this.isDragging && (this.isDragging = !1, this.currentSplitter && (this.currentSplitter.dragging = !1, this.currentSplitter = null), document.removeEventListener("mousemove", this.handleMouseMove), document.removeEventListener("mouseup", this.handleMouseUp), document.body.style.userSelect = "", document.body.style.cursor = "");
+    };
+  }
+  static {
+    this.styles = [super.styles, y];
+  }
+  static {
+    this.dependencies = {
+      "u-panel": c,
+      "u-splitter": u
+    };
+  }
+  disconnectedCallback() {
+    document.removeEventListener("mousemove", this.handleMouseMove), document.removeEventListener("mouseup", this.handleMouseUp), this.splitters.forEach((s) => {
+      s.removeEventListener("mousedown", this.handleMouseDown), s.remove();
+    }), super.disconnectedCallback();
+  }
+  render() {
+    return f`
+      <slot @slotchange=${this.handleSlotChange}></slot>
+    `;
+  }
+}
+d([
+  p({ type: String, reflect: !0 })
+], m.prototype, "orientation");
+d([
+  p({ type: Array, converter: g(parseFloat) })
+], m.prototype, "ratio");
+export {
+  m as SplitPanel
+};

package/dist/components/split-panel/SplitPanel.styles.d.ts

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

package/dist/components/split-panel/SplitPanel.styles.js

@@ -0,0 +1,19 @@
+import { css as o } from "lit";
+const i = o`
+  :host {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+  :host([orientation="horizontal"]) {
+    flex-direction: row;
+  }
+  :host([orientation="vertical"]) {
+    flex-direction: column;
+  }
+`;
+export {
+  i as styles
+};

package/dist/components/split-panel/SplitPanel.types.d.ts

@@ -0,0 +1,2 @@
+/** 분할 패널의 방향을 나타내는 타입입니다. */
+export type PanelOrientation = 'horizontal' | 'vertical';