@iyulab/components 0.4.0 → 1.0.0

package/dist/components/tab/UTab.js

@@ -0,0 +1,68 @@
+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 { styles } from "./UTab.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/tab/UTab.ts
+var UTab = class UTab extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.removable = false;
+		this.value = "";
+		this.draggable = false;
+		this.handleRemoveClick = (e) => {
+			e.stopPropagation();
+			if (this.disabled) return;
+			if (this.fire("remove")) this.remove();
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("role", "tab");
+		this.setAttribute("tabindex", "0");
+		if (!this.hasAttribute("slot")) this.setAttribute("slot", "tab");
+	}
+	render() {
+		return html`
+      <slot name="prefix"></slot>
+      <slot></slot>
+      <slot name="suffix"></slot>
+      
+      <u-button class="remove-btn" part="remove-btn"
+        ?hidden=${!this.removable}
+        variant="ghost"
+        tabindex="-1"
+        aria-label="Close tab"
+        @click=${this.handleRemoveClick}
+      >
+        <u-icon lib="internal" name="x-lg"></u-icon>
+      </u-button>
+    `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UTab.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UTab.prototype, "removable", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UTab.prototype, "value", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UTab.prototype, "draggable", void 0);
+UTab = __decorate([customElement("u-tab")], UTab);
+//#endregion
+export { UTab };

package/dist/components/tab/UTab.styles.d.ts

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

package/dist/components/tab/UTab.styles.js

@@ -0,0 +1,46 @@
+import { css } from "lit";
+//#region src/components/tab/UTab.styles.ts
+var styles = css`
+  :host {
+    flex-shrink: 0;
+    position: relative;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.5em 0.75em;
+    font-size: 0.9em;
+    font-weight: 500;
+    color: var(--u-txt-color-weak);
+    white-space: nowrap;
+    user-select: none;
+    cursor: pointer;
+  }
+  :host(:hover:not([disabled])) {
+    color: var(--u-txt-color);
+  }
+  :host([disabled]) {
+    color: var(--u-txt-color-disabled);
+    cursor: not-allowed;
+  }
+
+  ::slotted([slot="prefix"]) {
+    margin-right: 0.2em;
+  }
+  ::slotted([slot="suffix"]) {
+    margin-left: 0.2em;
+  }
+
+  .remove-btn {
+    flex-shrink: 0;
+    margin-left: 0.2em;
+    font-size: 0.75em;
+    color: inherit;
+    opacity: 0.5;
+    transition: opacity 0.15s ease;
+  }
+  .remove-btn:hover {
+    opacity: 1;
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/tab-panel/UTabPanel.d.ts

@@ -0,0 +1,45 @@
+import { PropertyValues } from 'lit';
+import { UElement } from '../UElement.js';
+export type TabPanelVariant = 'line' | 'card' | 'pill' | 'plain';
+export type TabPanelPlacement = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * 탭 기반 콘텐츠 전환을 제공하는 컴포넌트입니다.
+ *
+ * @slot - u-tab 및 u-panel 요소들
+ * @slot toolbar - 탭 영역에 있는 공간에 표시할 콘텐츠
+ *
+ * @csspart header - 탭 버튼들이 있는 헤더 영역
+ * @csspart nav - 탭 버튼들이 실제로 배치되는 네비게이션 영역
+ * @csspart toolbar - 탭 헤더 내 툴바 영역
+ * @csspart content - 탭 패널이 있는 콘텐츠 영역
+ */
+export declare class UTabPanel extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 탭 비활성화 여부 */
+    disabled: boolean;
+    /** 탭 스타일 변형 */
+    variant: TabPanelVariant;
+    /** 탭 위치 */
+    placement: TabPanelPlacement;
+    /** 선택된 탭값 */
+    value: string;
+    /** 탭 추가/삭제 가능 여부 */
+    editable: boolean;
+    draggable: boolean;
+    private tabs;
+    private panels;
+    private get isVertical();
+    protected willUpdate(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private updateTabPanel;
+    private handleSlotChange;
+    private handleTabSlotChange;
+    private handleTabClick;
+    private handleTabKeydown;
+    private handleNavWheel;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-tab-panel': UTabPanel;
+    }
+}

package/dist/components/tab-panel/UTabPanel.js

@@ -0,0 +1,150 @@
+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 { UPanel } from "../panel/UPanel.js";
+import { UTab } from "../tab/UTab.js";
+import { styles } from "./UTabPanel.styles.js";
+import { customElement, property, state } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/tab-panel/UTabPanel.ts
+var UTabPanel = class UTabPanel extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.variant = "line";
+		this.placement = "top";
+		this.value = "";
+		this.editable = false;
+		this.draggable = false;
+		this.tabs = [];
+		this.panels = [];
+		this.handleSlotChange = (e) => {
+			const elements = e.target.assignedElements({ flatten: true });
+			const panels = [];
+			for (const el of elements) if (el instanceof UPanel) panels.push(el);
+			else if (el instanceof UTab) el.setAttribute("slot", "tab");
+			else el.setAttribute("hidden", "");
+			this.panels = panels;
+		};
+		this.handleTabSlotChange = (e) => {
+			this.tabs = e.target.assignedElements({ flatten: true }).filter((el) => el instanceof UTab);
+			this.tabs.forEach((tab) => {
+				tab.removeEventListener("click", this.handleTabClick);
+				tab.removeEventListener("keydown", this.handleTabKeydown);
+				tab.addEventListener("click", this.handleTabClick);
+				tab.addEventListener("keydown", this.handleTabKeydown);
+			});
+			if (!this.value && this.tabs.length > 0) this.value = this.tabs[0].value;
+		};
+		this.handleTabClick = (e) => {
+			const tab = e.currentTarget || e.target;
+			if (tab.disabled || this.disabled) return;
+			this.value = tab.value;
+		};
+		this.handleTabKeydown = (e) => {
+			const enabledTabs = this.tabs.filter((t) => !t.disabled);
+			const currentIndex = enabledTabs.indexOf(e.currentTarget);
+			if (currentIndex === -1) return;
+			let targetIndex = -1;
+			switch (e.key) {
+				case this.isVertical ? "ArrowDown" : "ArrowRight":
+					targetIndex = (currentIndex + 1) % enabledTabs.length;
+					break;
+				case this.isVertical ? "ArrowUp" : "ArrowLeft":
+					targetIndex = (currentIndex - 1 + enabledTabs.length) % enabledTabs.length;
+					break;
+				case "Home":
+					targetIndex = 0;
+					break;
+				case "End":
+					targetIndex = enabledTabs.length - 1;
+					break;
+				case "Enter":
+				case " ":
+					this.value = enabledTabs[currentIndex].value;
+					return;
+				default: return;
+			}
+			if (targetIndex >= 0) {
+				e.preventDefault();
+				enabledTabs[targetIndex].focus();
+				this.value = enabledTabs[targetIndex].value;
+			}
+		};
+		this.handleNavWheel = (e) => {
+			if (!this.isVertical) {
+				e.preventDefault();
+				e.currentTarget.scrollBy({
+					left: e.deltaY,
+					behavior: "smooth"
+				});
+			}
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	get isVertical() {
+		return this.placement === "left" || this.placement === "right";
+	}
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if ([
+			"value",
+			"tabs",
+			"panels"
+		].some((k) => changedProperties.has(k))) this.updateTabPanel();
+	}
+	render() {
+		return html`
+      <div class="header" part="header" role="tablist">
+        <div class="nav" part="nav" @wheel=${this.handleNavWheel}>
+          <slot name="tab" @slotchange=${this.handleTabSlotChange}></slot>
+        </div>
+        <div class="toolbar" part="toolbar">
+          <slot name="toolbar"></slot>
+        </div>
+      </div>
+      <div class="content" part="content">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+	}
+	updateTabPanel() {
+		this.tabs.forEach((tab) => {
+			tab.toggleAttribute("active", tab.value === this.value);
+		});
+		this.panels.forEach((panel) => {
+			panel.hidden = panel.value !== this.value;
+		});
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UTabPanel.prototype, "disabled", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UTabPanel.prototype, "variant", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UTabPanel.prototype, "placement", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UTabPanel.prototype, "value", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UTabPanel.prototype, "editable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UTabPanel.prototype, "draggable", void 0);
+__decorate([state(), __decorateMetadata("design:type", Array)], UTabPanel.prototype, "tabs", void 0);
+__decorate([state(), __decorateMetadata("design:type", Array)], UTabPanel.prototype, "panels", void 0);
+UTabPanel = __decorate([customElement("u-tab-panel")], UTabPanel);
+//#endregion
+export { UTabPanel };

package/dist/components/tab-panel/UTabPanel.styles.d.ts

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

package/dist/components/tab-panel/UTabPanel.styles.js

@@ -0,0 +1,201 @@
+import { css } from "lit";
+//#region src/components/tab-panel/UTabPanel.styles.ts
+var styles = css`
+  :host {
+    display: flex;
+    color: var(--u-txt-color);
+    font-size: inherit;
+    font-family: var(--u-font-base);
+  }
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.6;
+  }
+  :host([placement="top"]) { flex-direction: column; }
+  :host([placement="bottom"]) { flex-direction: column-reverse; }
+  :host([placement="left"]) { flex-direction: row; }
+  :host([placement="right"]) { flex-direction: row-reverse; }
+
+  .header {
+    min-height: 0;
+    display: flex;
+    align-items: stretch;
+  }
+  :host([placement="top"]) .header,
+  :host([placement="bottom"]) .header {
+    flex-direction: row;
+  }
+  :host([placement="left"]) .header,
+  :host([placement="right"]) .header {
+    flex-direction: column;
+  }
+
+  .nav {
+    position: relative;
+    background-color: transparent;
+    display: flex;
+    align-items: stretch;
+    flex: 0 1 auto;
+    min-width: 0;
+    min-height: 0;
+    scrollbar-width: none;
+    scrollbar-color: transparent transparent;
+  }
+  :host([placement="top"]) .nav,
+  :host([placement="bottom"]) .nav {
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+  :host([placement="left"]) .nav,
+  :host([placement="right"]) .nav {
+    flex-direction: column;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex: 1 0 auto;
+  }
+  :host([placement="top"]) .toolbar,
+  :host([placement="bottom"]) .toolbar {
+    flex-direction: row;
+  }
+  :host([placement="left"]) .toolbar,
+  :host([placement="right"]) .toolbar {
+    flex-direction: column;
+  }
+
+  .content {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  /* Variant: line */
+
+  :host([variant="line"]) ::slotted(u-tab[active]) {
+    position: relative;
+    color: var(--u-blue-600);
+  }
+  :host([variant="line"]) ::slotted(u-tab[active])::after {
+    content: '';
+    position: absolute;
+    background-color: var(--u-blue-600);
+  }
+
+  :host([variant="line"][placement="top"]) .header {
+    border-bottom: 1px solid var(--u-border-color);
+  }
+  :host([variant="line"][placement="top"]) ::slotted(u-tab[active])::after {
+    height: 2px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  :host([variant="line"][placement="bottom"]) .header {
+    border-top: 1px solid var(--u-border-color);
+  }
+  :host([variant="line"][placement="bottom"]) ::slotted(u-tab[active])::after {
+    height: 2px;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+
+  :host([variant="line"][placement="left"]) .header {
+    border-right: 1px solid var(--u-border-color);
+  }
+  :host([variant="line"][placement="left"]) ::slotted(u-tab[active])::after {
+    width: 2px;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+
+  :host([variant="line"][placement="right"]) .header {
+    border-left: 1px solid var(--u-border-color);
+  }
+  :host([variant="line"][placement="right"]) ::slotted(u-tab[active])::after {
+    width: 2px;
+    left: 0;
+    top: 0;
+    bottom: 0;
+  }
+
+  /* Variant: card */
+
+  :host([variant="card"]) ::slotted(u-tab) {
+    background-color: var(--u-neutral-100);
+  }
+  :host([variant="card"]) ::slotted(u-tab[active]) {
+    color: var(--u-txt-color);
+    background-color: var(--u-neutral-0);
+  }
+
+  :host([variant="card"][placement="top"]) ::slotted(u-tab) {
+    border-bottom: 1px solid var(--u-border-color);
+    border-right: 1px solid var(--u-border-color);
+  }
+  :host([variant="card"][placement="top"]) ::slotted(u-tab[active]) {
+    border-bottom: none;
+  }
+
+  :host([variant="card"][placement="bottom"]) ::slotted(u-tab) {
+    border-top: 1px solid var(--u-border-color);
+    border-right: 1px solid var(--u-border-color);
+  }
+  :host([variant="card"][placement="bottom"]) ::slotted(u-tab[active]) {
+    border-top: none;
+  }
+
+  :host([variant="card"][placement="left"]) ::slotted(u-tab) {
+    border-right: 1px solid var(--u-border-color);
+    border-bottom: 1px solid var(--u-border-color);
+  }
+  :host([variant="card"][placement="left"]) ::slotted(u-tab[active]) {
+    border-right: none;
+  }
+
+  :host([variant="card"][placement="right"]) ::slotted(u-tab) {
+    border-left: 1px solid var(--u-border-color);
+    border-bottom: 1px solid var(--u-border-color);
+  }
+  :host([variant="card"][placement="right"]) ::slotted(u-tab[active]) {
+    border-left: none;
+  }
+
+  /* Variant: pill */
+
+  :host([variant="pill"]) .nav {
+    gap: 0.25em;
+    padding: 0.25em;
+    background-color: var(--u-neutral-100);
+    border-radius: 8px;
+  }
+  :host([variant="pill"]) ::slotted(u-tab) {
+    border: 1px solid transparent;
+    border-radius: 6px;
+  }
+  :host([variant="pill"]) ::slotted(u-tab[active]) {
+    border-color: var(--u-border-color);
+    background-color: var(--u-neutral-0);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  }
+
+  /* Variant: plain */
+
+  :host([variant="plain"]) .nav {
+    gap: 0.25em;
+  }
+  :host([variant="plain"]) ::slotted(u-tab[active]) {
+    color: var(--u-blue-600);
+    font-weight: 600;
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/tag/UTag.d.ts

@@ -1,8 +1,31 @@
-import { UTag } from './UTag.component.js';
+import { UElement } from '../UElement.js';
+export type TagVariant = "solid" | "surface" | "filled" | "outlined";
+export type TagColor = "neutral" | "blue" | "green" | "yellow" | "red" | "orange" | "teal" | "cyan" | "purple" | "pink";
+/**
+ * 레이블, 카테고리, 상태 등을 표시하는 태그 컴포넌트입니다.
+ *
+ * @slot - 태그 메인 콘텐츠
+ * @slot prefix - 태그 앞에 표시할 콘텐츠
+ * @slot suffix - 태그 뒤에 표시할 콘텐츠
+ *
+ * @csspart content - 콘텐츠 영역
+ *
+ * @cssprop --tag-color - 텍스트 색상
+ * @cssprop --tag-bg-color - 배경 색상
+ * @cssprop --tag-border-color - 테두리 색상
+ */
+export declare class UTag extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 태그의 스타일 변형을 설정합니다. */
+    variant: TagVariant;
+    /** 태그의 색상을 설정합니다. */
+    color: TagColor;
+    /** 태그를 둥글게 표시합니다. */
+    rounded: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-tag': UTag;
     }
 }
-export { UTag };
-export type { TagVariant } from './UTag.component.js';

package/dist/components/tag/UTag.js

@@ -1,5 +1,42 @@
-import { UTag } from './UTag.component.js';
-
-UTag.define("u-tag");
-
+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 "./UTag.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/tag/UTag.ts
+var UTag = class UTag extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "filled";
+		this.color = "neutral";
+		this.rounded = false;
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <slot name="prefix"></slot>
+      <span class="content" part="content">
+        <slot></slot>
+      </span>
+      <slot name="suffix"></slot>
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UTag.prototype, "variant", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UTag.prototype, "color", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], UTag.prototype, "rounded", void 0);
+UTag = __decorate([customElement("u-tag")], UTag);
+//#endregion
 export { UTag };