@iyulab/components 0.3.0 → 1.0.0

package/dist/components/switch/USwitch.styles.js

@@ -0,0 +1,191 @@
+import { css } from "lit";
+//#region src/components/switch/USwitch.styles.ts
+var styles = css`
+  :host {
+    --switch-track-width: 2.4em;
+    --switch-track-height: 1.4em;
+    --switch-track-color: var(--u-neutral-300);
+    --switch-track-color-checked: var(--u-blue-600);
+    --switch-thumb-size: 1.1em;
+    --switch-thumb-offset: 0.15em;
+    --switch-thumb-color: #fff;
+    --switch-thumb-color-checked: #fff;
+    --switch-radius: 9999px;
+    --switch-duration: 0.25s;
+    --switch-move-width: calc(var(--switch-track-width) - var(--switch-thumb-size) - var(--switch-thumb-offset) * 2);
+  }
+
+  :host {
+    display: inline-flex;
+    flex-direction: column;
+    color: var(--u-txt-color);
+    font-size: inherit;
+    font-family: var(--u-font-base);
+    user-select: none;
+    cursor: pointer;
+  }
+
+  /* === 상태 스타일 === */
+  :host([disabled]) {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  :host([readonly]) {
+    cursor: default;
+  }
+  :host([invalid]) .track {
+    outline: 2px solid var(--u-red-600);
+    outline-offset: 1px;
+  }
+  :host(:not([disabled]):not([readonly]):hover) .track {
+    filter: brightness(0.95);
+  }
+
+  .wrapper {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.6em;
+    cursor: inherit;
+  }
+
+  /* === 네이티브 input === */
+  input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+  input:focus-visible ~ .track {
+    box-shadow:
+      0 0 0 1px var(--u-input-border-color-focus),
+      0 0 0 3px rgba(59, 130, 246, 0.22);
+  }
+
+  /* === 트랙 === */
+  .track {
+    position: relative;
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    width: var(--switch-track-width);
+    height: var(--switch-track-height);
+    border-radius: var(--switch-radius);
+    background: var(--switch-track-color);
+    transition: background var(--switch-duration) ease;
+  }
+  :host([checked]) .track {
+    background: var(--switch-track-color-checked);
+  }
+
+  /* === 트랙 인디케이터(슬롯) === */
+  .track-checked,
+  .track-unchecked {
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(50% - var(--switch-thumb-offset));
+    font-size: 0.5em;
+    font-weight: 600;
+    line-height: 1;
+    white-space: nowrap;
+    pointer-events: none;
+    transition: opacity var(--switch-duration) ease;
+  }
+  .track-checked {
+    opacity: 0;
+    left: var(--switch-thumb-offset);
+    color: #fff;
+  }
+  :host([checked]) .track-checked {
+    opacity: 1;
+  }
+  .track-unchecked {
+    opacity: 1;
+    right: var(--switch-thumb-offset);
+    color: var(--u-txt-color-weak);
+  }
+  :host([checked]) .track-unchecked {
+    opacity: 0;
+  }
+
+  /* === 핸들 === */
+  .thumb {
+    position: absolute;
+    z-index: 1;
+    left: var(--switch-thumb-offset);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--switch-thumb-size);
+    height: var(--switch-thumb-size);
+    border-radius: var(--switch-radius);
+    background: var(--switch-thumb-color);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+    transition:
+      transform var(--switch-duration) cubic-bezier(0.4, 0, 0.2, 1),
+      background var(--switch-duration) ease;
+  }
+  :host([checked]) .thumb {
+    transform: translateX(var(--switch-move-width));
+    background: var(--switch-thumb-color-checked);
+  }
+
+  /* === 핸들 인디케이터(슬롯) === */
+  .thumb-checked,
+  .thumb-unchecked {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    font-size: 0.5em;
+    font-weight: 600;
+    line-height: 1;
+    pointer-events: none;
+    transition:
+      opacity var(--switch-duration) ease,
+      transform var(--switch-duration) ease;
+  }
+  .thumb-checked {
+    opacity: 0;
+    transform: scale(0.5) rotate(-90deg);
+    color: var(--switch-track-color-checked);
+  }
+  :host([checked]) .thumb-checked {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+  .thumb-unchecked {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+    color: var(--u-txt-color-weak);
+  }
+  :host([checked]) .thumb-unchecked {
+    opacity: 0;
+    transform: scale(0.5) rotate(90deg);
+  }
+
+  .label {
+    font-size: 1em;
+    line-height: var(--switch-track-height);
+  }
+
+  .required {
+    color: var(--u-red-600);
+    font-weight: 500;
+  }
+
+  .description {
+    margin-top: 0.5em;
+    color: var(--u-txt-color-weak);
+    font-size: 0.75em;
+    line-height: 1.3;
+  }
+`;
+//#endregion
+export { styles };

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

@@ -0,0 +1,31 @@
+import { UElement } from '../UElement.js';
+/**
+ * 탭 패널에서 사용하는 탭 아이템(탭 버튼) 컴포넌트입니다.
+ *
+ * @slot - 탭 레이블 콘텐츠
+ * @slot prefix - 탭 레이블 앞에 표시되는 콘텐츠
+ * @slot suffix - 탭 레이블 뒤에 표시되는 콘텐츠
+ *
+ * @csspart remove-btn - 탭 닫기 버튼
+ *
+ * @event remove - 탭이 닫힐 때 발생. 이벤트 리스너에서 preventDefault()를 호출하면 탭이 닫히지 않습니다.
+ */
+export declare class UTab extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 탭 비활성화 여부 */
+    disabled: boolean;
+    /** 탭 닫기 가능 여부 */
+    removable: boolean;
+    /** 탭 고유값 (패널 매칭에 사용) */
+    value: string;
+    /** 탭 드래그 여부 */
+    draggable: boolean;
+    connectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private handleRemoveClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-tab': UTab;
+    }
+}

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;