@iyulab/components 0.3.0 → 1.0.0

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 };

package/dist/components/tag/UTag.styles.js

@@ -1,83 +1,229 @@
-import { css } from 'lit';
+import { css } from "lit";
+//#region src/components/tag/UTag.styles.ts
+var styles = css`
+  :host {
+    --tag-color: var(--u-neutral-800);
+    --tag-bg-color: var(--u-neutral-100);
+    --tag-border-color: transparent;
+  }
+
+  /* Variant: solid (강한 채움) */
+  :host([variant="solid"]) {
+    --tag-color: var(--u-neutral-0);
+    --tag-bg-color: var(--u-neutral-600);
+    --tag-border-color: var(--u-neutral-600);
+  }
+  :host([variant="solid"][color="blue"]) {
+    --tag-bg-color: var(--u-blue-500);
+    --tag-border-color: var(--u-blue-500);
+  }
+  :host([variant="solid"][color="green"]) {
+    --tag-bg-color: var(--u-green-500);
+    --tag-border-color: var(--u-green-500);
+  }
+  :host([variant="solid"][color="yellow"]) {
+    --tag-bg-color: var(--u-yellow-600);
+    --tag-border-color: var(--u-yellow-600);
+  }
+  :host([variant="solid"][color="red"]) {
+    --tag-bg-color: var(--u-red-500);
+    --tag-border-color: var(--u-red-500);
+  }
+  :host([variant="solid"][color="orange"]) {
+    --tag-bg-color: var(--u-orange-500);
+    --tag-border-color: var(--u-orange-500);
+  }
+  :host([variant="solid"][color="teal"]) {
+    --tag-bg-color: var(--u-teal-500);
+    --tag-border-color: var(--u-teal-500);
+  }
+  :host([variant="solid"][color="cyan"]) {
+    --tag-bg-color: var(--u-cyan-500);
+    --tag-border-color: var(--u-cyan-500);
+  }
+  :host([variant="solid"][color="purple"]) {
+    --tag-bg-color: var(--u-purple-500);
+    --tag-border-color: var(--u-purple-500);
+  }
+  :host([variant="solid"][color="pink"]) {
+    --tag-bg-color: var(--u-pink-500);
+    --tag-border-color: var(--u-pink-500);
+  }
+
+  /* Variant: surface (채우기 + 테두리) */
+  :host([variant="surface"]) {
+    --tag-color: var(--u-neutral-800);
+    --tag-bg-color: var(--u-neutral-100);
+    --tag-border-color: var(--u-neutral-300);
+  }
+  :host([variant="surface"][color="blue"]) {
+    --tag-color: var(--u-blue-800);
+    --tag-bg-color: var(--u-blue-100);
+    --tag-border-color: var(--u-blue-300);
+  }
+  :host([variant="surface"][color="green"]) {
+    --tag-color: var(--u-green-800);
+    --tag-bg-color: var(--u-green-100);
+    --tag-border-color: var(--u-green-300);
+  }
+  :host([variant="surface"][color="yellow"]) {
+    --tag-color: var(--u-yellow-800);
+    --tag-bg-color: var(--u-yellow-100);
+    --tag-border-color: var(--u-yellow-300);
+  }
+  :host([variant="surface"][color="red"]) {
+    --tag-color: var(--u-red-800);
+    --tag-bg-color: var(--u-red-100);
+    --tag-border-color: var(--u-red-300);
+  }
+  :host([variant="surface"][color="orange"]) {
+    --tag-color: var(--u-orange-800);
+    --tag-bg-color: var(--u-orange-100);
+    --tag-border-color: var(--u-orange-300);
+  }
+  :host([variant="surface"][color="teal"]) {
+    --tag-color: var(--u-teal-800);
+    --tag-bg-color: var(--u-teal-100);
+    --tag-border-color: var(--u-teal-300);
+  }
+  :host([variant="surface"][color="cyan"]) {
+    --tag-color: var(--u-cyan-800);
+    --tag-bg-color: var(--u-cyan-100);
+    --tag-border-color: var(--u-cyan-300);
+  }
+  :host([variant="surface"][color="purple"]) {
+    --tag-color: var(--u-purple-800);
+    --tag-bg-color: var(--u-purple-100);
+    --tag-border-color: var(--u-purple-300);
+  }
+  :host([variant="surface"][color="pink"]) {
+    --tag-color: var(--u-pink-800);
+    --tag-bg-color: var(--u-pink-100);
+    --tag-border-color: var(--u-pink-300);
+  }
+
+  /* Variant: filled (채우기만, 테두리 없음) */
+  :host([variant="filled"]) {
+    --tag-color: var(--u-neutral-800);
+    --tag-bg-color: var(--u-neutral-100);
+    --tag-border-color: transparent;
+  }
+  :host([variant="filled"][color="blue"]) {
+    --tag-color: var(--u-blue-800);
+    --tag-bg-color: var(--u-blue-100);
+  }
+  :host([variant="filled"][color="green"]) {
+    --tag-color: var(--u-green-800);
+    --tag-bg-color: var(--u-green-100);
+  }
+  :host([variant="filled"][color="yellow"]) {
+    --tag-color: var(--u-yellow-800);
+    --tag-bg-color: var(--u-yellow-100);
+  }
+  :host([variant="filled"][color="red"]) {
+    --tag-color: var(--u-red-800);
+    --tag-bg-color: var(--u-red-100);
+  }
+  :host([variant="filled"][color="orange"]) {
+    --tag-color: var(--u-orange-800);
+    --tag-bg-color: var(--u-orange-100);
+  }
+  :host([variant="filled"][color="teal"]) {
+    --tag-color: var(--u-teal-800);
+    --tag-bg-color: var(--u-teal-100);
+  }
+  :host([variant="filled"][color="cyan"]) {
+    --tag-color: var(--u-cyan-800);
+    --tag-bg-color: var(--u-cyan-100);
+  }
+  :host([variant="filled"][color="purple"]) {
+    --tag-color: var(--u-purple-800);
+    --tag-bg-color: var(--u-purple-100);
+  }
+  :host([variant="filled"][color="pink"]) {
+    --tag-color: var(--u-pink-800);
+    --tag-bg-color: var(--u-pink-100);
+  }
+
+  /* Variant: outlined (테두리만) */
+  :host([variant="outlined"]) {
+    --tag-color: var(--u-neutral-700);
+    --tag-bg-color: transparent;
+    --tag-border-color: var(--u-neutral-300);
+  }
+  :host([variant="outlined"][color="blue"]) {
+    --tag-color: var(--u-blue-600);
+    --tag-border-color: var(--u-blue-300);
+  }
+  :host([variant="outlined"][color="green"]) {
+    --tag-color: var(--u-green-600);
+    --tag-border-color: var(--u-green-300);
+  }
+  :host([variant="outlined"][color="yellow"]) {
+    --tag-color: var(--u-yellow-700);
+    --tag-border-color: var(--u-yellow-300);
+  }
+  :host([variant="outlined"][color="red"]) {
+    --tag-color: var(--u-red-600);
+    --tag-border-color: var(--u-red-300);
+  }
+  :host([variant="outlined"][color="orange"]) {
+    --tag-color: var(--u-orange-600);
+    --tag-border-color: var(--u-orange-300);
+  }
+  :host([variant="outlined"][color="teal"]) {
+    --tag-color: var(--u-teal-600);
+    --tag-border-color: var(--u-teal-300);
+  }
+  :host([variant="outlined"][color="cyan"]) {
+    --tag-color: var(--u-cyan-600);
+    --tag-border-color: var(--u-cyan-300);
+  }
+  :host([variant="outlined"][color="purple"]) {
+    --tag-color: var(--u-purple-600);
+    --tag-border-color: var(--u-purple-300);
+  }
+  :host([variant="outlined"][color="pink"]) {
+    --tag-color: var(--u-pink-600);
+    --tag-border-color: var(--u-pink-300);
+  }
 
-const styles = css`
   :host {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     font-size: 12px;
+    font-weight: 500;
     padding: 0.25em 0.5em;
+    border: 1px solid var(--tag-border-color);
     border-radius: 4px;
-    font-weight: 500;
+    color: var(--tag-color);
+    background-color: var(--tag-bg-color);
     line-height: 1.5em;
     white-space: nowrap;
     user-select: none;
-    opacity: 1;
-    transform: scale(1);
-    transition: opacity 0.2s ease, transform 0.2s ease;
-  }
-  /* Style variants */
-  :host([variant="default"]) {
-    color: var(--u-neutral-800);
-    border: 1px solid var(--u-neutral-300);
-    background-color: var(--u-neutral-100);
-  }
-  :host([variant="info"]) {
-    color: var(--u-blue-800);
-    border: 1px solid var(--u-blue-300);
-    background-color: var(--u-blue-100);
-  }
-  :host([variant="success"]) {
-    color: var(--u-green-800);
-    border: 1px solid var(--u-green-300);
-    background-color: var(--u-green-100);
-  }
-  :host([variant="warning"]) {
-    color: var(--u-yellow-800);
-    border: 1px solid var(--u-yellow-300);
-    background-color: var(--u-yellow-100);
-  }
-  :host([variant="danger"]) {
-    color: var(--u-red-800);
-    border: 1px solid var(--u-red-300);
-    background-color: var(--u-red-100);
-  }
-  /* Rounded variant */
+    box-sizing: border-box;
+  }
   :host([rounded]) {
     border-radius: 999px;
   }
 
-  /* Slot styles */
+  /* === Slots === */
   ::slotted([slot="prefix"]) {
-    margin-right: 0.2em;
+    margin-right: 0.15em;
   }
   ::slotted([slot="suffix"]) {
-    margin-left: 0.2em;
+    margin-left: 0.15em;
   }
 
-  /* Remove button */
-  .remove-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.5em;
-    width: 1em;
-    height: 1em;
-    line-height: 1.2em;
-    padding: 0;
-    border: none;
-    border-radius: 50%;
-    color: currentColor;
-    background-color: transparent;
-    transition: background-color 0.2s ease;
-    cursor: pointer;
-  }
-  .remove-btn:hover {
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-  .remove-btn:active {
-    background-color: rgba(0, 0, 0, 0.2);
+  /* === Content === */
+  .content {
+    display: inline-block;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/textarea/UTextarea.d.ts

@@ -0,0 +1,65 @@
+import { PropertyValues } from 'lit';
+import { UFormControlElement } from '../UFormControlElement.js';
+import { AutoCapitalize, EnterKeyHint, InputModeOption } from '../input/UInput.js';
+type TextareaVariant = 'outlined' | 'filled' | 'underlined' | 'borderless';
+type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both' | 'auto';
+/**
+ * 여러 줄의 텍스트 입력을 지원하는 텍스트에어리어 컴포넌트입니다.
+ *
+ * @csspart field - u-field 요소
+ * @csspart container - 텍스트에어리어를 감싸는 요소
+ * @csspart textarea - 실제 텍스트에어리어 요소
+ * @csspart counter - 글자 수 표시 영역
+ *
+ * @event input - 입력값이 변경될 때 발생
+ * @event change - 값이 확정됐을 때 발생
+ */
+export declare class UTextarea extends UFormControlElement<string> {
+    static styles: import('lit').CSSResultGroup[];
+    /** 스타일 변형 */
+    variant: TextareaVariant;
+    /** 리사이즈 모드 */
+    resize: TextareaResize;
+    /** 최소 행 수 */
+    minRows?: number;
+    /** 최대 행 수 */
+    maxRows?: number;
+    /** 글자수 표시 여부 */
+    counter: boolean;
+    /** 최소 길이 */
+    minlength?: number;
+    /** 최대 길이 */
+    maxlength?: number;
+    /** 입력 방향 정보 */
+    dirname?: string;
+    /** 모바일 가상 키보드 유형 */
+    inputmode?: InputModeOption;
+    /** 모바일 엔터 키 레이블 */
+    enterkeyhint?: EnterKeyHint;
+    /** 맞춤법 검사 여부 */
+    spellcheck: boolean;
+    /** 자동 포커스 여부 */
+    autofocus: boolean;
+    /** 자동 교정 기능 설정 (iOS) */
+    autocorrect: boolean;
+    /** 대문자 자동 변환 */
+    autocapitalize: AutoCapitalize;
+    /** 자동 완성 기능 설정 */
+    autocomplete?: AutoFill;
+    /** placeholder 텍스트 */
+    placeholder?: string;
+    textareaEl?: HTMLTextAreaElement;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    validate(): boolean;
+    reset(): void;
+    private resizeTextarea;
+    private handleTextareaInput;
+    private handleTextareaChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-textarea': UTextarea;
+    }
+}
+export {};