@iyulab/components 0.4.0 → 1.0.0

package/dist/components/select/USelect.styles.js

@@ -0,0 +1,200 @@
+import { css } from "lit";
+//#region src/components/select/USelect.styles.ts
+var styles = css`
+  :host {
+    --select-popover-min-width: 100%;
+    --select-popover-max-width: 80vw;
+    --select-popover-min-height: 0px;
+    --select-popover-max-height: 50vh;
+  }
+
+  :host {
+    position: relative;
+    display: inline-block;
+    color: var(--u-txt-color);
+    font-size: inherit;
+    font-family: var(--u-font-base);
+  }
+
+  .container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.3em 0.6em;
+    border: 1px solid var(--u-input-border-color);
+    border-radius: 0.25em;
+    background-color: var(--u-input-bg-color);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    overflow: hidden;
+    user-select: none;
+    cursor: pointer;
+  }
+  :host([readonly]) .container,
+  :host([disabled]) .container {
+    border-color: var(--u-border-color-weak);
+    background-color: var(--u-bg-color-disabled);
+  }
+  :host([disabled]) .container {
+    cursor: not-allowed;
+  }
+  :host([readonly]) .container {
+    cursor: default;
+  }
+  :host(:not([readonly]):not([disabled])) .container:hover {
+    box-shadow: 0 0 0 1px var(--u-input-border-color-hover);
+  }
+  :host(:not([readonly]):not([disabled])) .container:focus-within {
+    box-shadow: 0 0 0 1px var(--u-input-border-color-focus);
+  }
+  :host([invalid]:not([readonly]):not([disabled])) .container {
+    box-shadow: 0 0 0 1px var(--u-input-border-color-invalid);
+  }
+
+  /* ===== Variant: filled ===== */
+  :host([variant="filled"]) .container {
+    border: none;
+    border-radius: 0.25em 0.25em 0 0;
+    border-bottom: 2px solid var(--u-input-border-color);
+    background-color: var(--u-neutral-200);
+  }
+  :host([variant="filled"][readonly]) .container,
+  :host([variant="filled"][disabled]) .container {
+    background-color: var(--u-bg-color-disabled);
+    border-bottom-color: var(--u-border-color-weak);
+  }
+  :host([variant="filled"]:not([readonly]):not([disabled])) .container:hover {
+    box-shadow: none;
+    background-color: var(--u-neutral-300);
+    border-bottom-color: var(--u-input-border-color-hover);
+  }
+  :host([variant="filled"]:not([readonly]):not([disabled])) .container:focus-within {
+    box-shadow: none;
+    border-bottom-color: var(--u-input-border-color-focus);
+  }
+  :host([variant="filled"][invalid]:not([readonly]):not([disabled])) .container {
+    box-shadow: none;
+    border-bottom-color: var(--u-input-border-color-invalid);
+  }
+
+  /* ===== Variant: underlined ===== */
+  :host([variant="underlined"]) .container {
+    border: none;
+    border-radius: 0;
+    background-color: transparent;
+    padding-left: 0;
+    padding-right: 0;
+    border-bottom: 1px solid var(--u-input-border-color);
+  }
+  :host([variant="underlined"][readonly]) .container,
+  :host([variant="underlined"][disabled]) .container {
+    background-color: transparent;
+    border-bottom-color: var(--u-border-color-weak);
+  }
+  :host([variant="underlined"]:not([readonly]):not([disabled])) .container:hover {
+    box-shadow: none;
+    border-bottom-color: var(--u-input-border-color-hover);
+  }
+  :host([variant="underlined"]:not([readonly]):not([disabled])) .container:focus-within {
+    box-shadow: none;
+    border-bottom-color: var(--u-input-border-color-focus);
+    border-bottom-width: 2px;
+  }
+  :host([variant="underlined"][invalid]:not([readonly]):not([disabled])) .container {
+    box-shadow: none;
+    border-bottom-color: var(--u-input-border-color-invalid);
+  }
+
+  /* ===== Variant: borderless ===== */
+  :host([variant="borderless"]) .container {
+    border: none;
+    border-radius: 0;
+    background-color: transparent;
+    padding: 0;
+    box-shadow: none;
+  }
+  :host([variant="borderless"]:not([readonly]):not([disabled])) .container:hover,
+  :host([variant="borderless"]:not([readonly]):not([disabled])) .container:focus-within {
+    box-shadow: none;
+  }
+
+  .count {
+    color: var(--u-txt-color-weak);
+    line-height: 1.25;
+  }
+
+  .text-content {
+    flex: 1;
+    min-width: 0;
+    line-height: 1.5;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .text-content.placeholder {
+    color: var(--u-txt-color-weak);
+  }
+
+  .chips-content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  ::slotted([slot="prefix"]) {
+    margin-right: 0.25em;
+  }
+  ::slotted([slot="suffix"]) {
+    margin-left: 0.25em;
+  }
+
+  .suffix-item {
+    margin-left: 0.25em;
+    font-size: 1em;
+    color: var(--u-icon-color);
+    transition: color 0.2s ease;
+    cursor: pointer;
+  }
+  .suffix-item:hover {
+    color: var(--u-icon-color-hover);
+  }
+  .suffix-item:active {
+    color: var(--u-icon-color-active);
+  }
+
+  /* 드롭다운 패널 */
+  u-popover {
+    min-width: var(--select-popover-min-width);
+    max-width: var(--select-popover-max-width);
+    min-height: var(--select-popover-min-height);
+    max-height: var(--select-popover-max-height);
+    padding: 4px;
+    border: 1px solid var(--u-border-color);
+    border-radius: 6px;
+    background-color: var(--u-panel-bg-color);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .search-input {
+    display: flex;
+    align-items: center;
+    gap: 0.4em;
+    padding: 0.3em 0.6em;
+    color: var(--u-txt-color-weak);
+    border-bottom: 1px solid var(--u-border-color);
+  }
+  .search-input input {
+    all: unset;
+    flex: 1;
+    min-width: 0;
+    line-height: 1.5;
+  }
+  .search-input input::placeholder {
+    color: var(--u-txt-color-weak);
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/skeleton/USkeleton.d.ts

@@ -1,8 +1,32 @@
-import { USkeleton } from './USkeleton.component.js';
+import { PropertyValues } from 'lit';
+import { UElement } from '../UElement.js';
+export type SkeletonShape = 'rectangle' | 'circle' | 'rounded';
+export type SkeletonEffect = 'none' | 'pulse' | 'shimmer';
+/**
+ * 콘텐츠 로딩 중임을 나타내는 스켈레톤 컴포넌트입니다.
+ *
+ * @slot - 내부 콘텐츠 (로딩 완료 후 표시)
+ *
+ * @cssprop --skeleton-width - 스켈레톤의 너비 (기본값: 100%)
+ * @cssprop --skeleton-height - 스켈레톤의 높이 (기본값: 1em)
+ * @cssprop --skeleton-color - 스켈레톤의 기본 색상 (기본값: var(--u-neutral-200))
+ * @cssprop --skeleton-shimmer-color - shimmer 효과의 색상 (기본값: var(--u-neutral-100))
+ */
+export declare class USkeleton extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 모양 */
+    shape: SkeletonShape;
+    /** 애니메이션 효과 */
+    effect: SkeletonEffect;
+    /** 너비 (CSS 값) */
+    width?: string;
+    /** 높이 (CSS 값) */
+    height?: string;
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-skeleton': USkeleton;
     }
 }
-export { USkeleton };
-export type { SkeletonShape, SkeletonEffect } from './USkeleton.component.js';

package/dist/components/skeleton/USkeleton.js

@@ -1,5 +1,38 @@
-import { USkeleton } from './USkeleton.component.js';
-
-USkeleton.define("u-skeleton");
-
+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 "./USkeleton.styles.js";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/skeleton/USkeleton.ts
+var USkeleton = class USkeleton extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.shape = "rectangle";
+		this.effect = "shimmer";
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("width") && this.width) this.style.setProperty("--skeleton-width", this.width);
+		if (changedProperties.has("height") && this.height) this.style.setProperty("--skeleton-height", this.height);
+	}
+	render() {
+		return html`<slot></slot>`;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], USkeleton.prototype, "shape", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], USkeleton.prototype, "effect", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], USkeleton.prototype, "width", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], USkeleton.prototype, "height", void 0);
+USkeleton = __decorate([customElement("u-skeleton")], USkeleton);
+//#endregion
 export { USkeleton };

package/dist/components/skeleton/USkeleton.styles.js

@@ -1,44 +1,41 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/skeleton/USkeleton.styles.ts
+var styles = css`
   :host {
     --skeleton-width: 100%;
     --skeleton-height: 1em;
-    --skeleton-color: var(--u-neutral-200, #e5e5e5);
-    --skeleton-shimmer-color: var(--u-neutral-100, #f5f5f5);
+    --skeleton-color: var(--u-neutral-200);
+    --skeleton-shimmer-color: var(--u-neutral-100);
   }
 
   :host {
     display: inline-block;
     width: var(--skeleton-width);
     height: var(--skeleton-height);
-  }
-
-  .skeleton {
-    width: 100%;
-    height: 100%;
     background-color: var(--skeleton-color);
-    border-radius: 4px;
     animation: none;
   }
-  
+
   /* 모양 설정 */
-  .skeleton[shape="circle"] {
+  :host([shape="rectangle"]) {
+    border-radius: 4px;
+  }
+  :host([shape="circle"]) {
     border-radius: 50%;
   }
-  .skeleton[shape="rounded"] {
+  :host([shape="rounded"]) {
     border-radius: 9999px;
   }
 
   /* 애니메이션 효과 설정 */
-  .skeleton[effect="pulse"] {
+  :host([effect="pulse"]) {
     animation: pulse 1.5s ease-in-out infinite;
   }
-  .skeleton[effect="shimmer"] {
+  :host([effect="shimmer"]) {
     position: relative;
     overflow: hidden;
   }
-  .skeleton[effect="shimmer"]::after {
+  :host([effect="shimmer"])::after {
     content: '';
     position: absolute;
     top: 0;
@@ -70,5 +67,5 @@ const styles = css`
     }
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/slider/USlider.d.ts

@@ -0,0 +1,88 @@
+import { PropertyValues, TemplateResult } from 'lit';
+import { UFormControlElement } from '../UFormControlElement.js';
+export interface SliderMark {
+    value: number;
+    label?: string;
+}
+export type SliderFormatter = (value: number) => string;
+/**
+ * 범위 내에서 값을 선택하는 슬라이더 컴포넌트입니다.
+ * 단일 thumb 및 range(dual-thumb) 모드를 지원합니다.
+ *
+ * @slot thumb - 커스텀 thumb 콘텐츠
+ * @slot thumb-end - range 모드에서 끝 커스텀 thumb
+ *
+ * @csspart field - u-field 요소
+ * @csspart container - 슬라이더 전체 컨테이너
+ * @csspart track - 트랙 영역
+ * @csspart fill - 활성화 영역
+ * @csspart thumb - 첫 번째 thumb
+ * @csspart thumb-end - range 모드의 끝 thumb
+ * @csspart thumb-tooltip - thumb에 표시되는 툴팁
+ * @csspart mark - 마크 요소
+ * @csspart mark-label - 마크 라벨
+ *
+ * @cssprop --slider-fill-color - 활성화 영역 색상
+ * @cssprop --slider-track-height - 트랙 높이
+ * @cssprop --slider-track-color - 트랙 배경 색상
+ * @cssprop --slider-thumb-size - thumb 크기
+ * @cssprop --slider-thumb-color - thumb 색상
+ * @cssprop --slider-thumb-border-color - thumb 테두리 색상
+ * @cssprop --slider-mark-size - 마크 크기
+ * @cssprop --slider-mark-color - 마크 색상
+ * @cssprop --slider-mark-border-color - 마크 테두리 색상
+ *
+ * @event change - 드래그 완료 후 값이 확정됐을 때 발생
+ */
+export declare class USlider extends UFormControlElement<number | number[]> {
+    static styles: import('lit').CSSResultGroup[];
+    /** range 모드 (dual-thumb) */
+    range: boolean;
+    /** 슬라이더 옆에 현재 값 표시 여부 */
+    showValue: boolean;
+    /** 드래그 시 마우스 위치 값 표시 여부 */
+    showTooltip: boolean;
+    /** 커스텀 포매터 */
+    formatter?: SliderFormatter;
+    /** 마크 설정 */
+    marks?: SliderMark[];
+    /** 시작값 오프셋 (single value only) */
+    offset?: number;
+    /** 최솟값 */
+    min: number;
+    /** 최댓값 */
+    max: number;
+    /** 값 변경 단위 */
+    step: number;
+    private dragging;
+    private trackEl;
+    get valueAsNumber(): number;
+    get valueAsArray(): number[];
+    private get minVal();
+    private set minVal(value);
+    private get maxVal();
+    private set maxVal(value);
+    private get fillStart();
+    private get fillEnd();
+    private get hasMarks();
+    protected willUpdate(changedProperties: PropertyValues): void;
+    render(): TemplateResult<1>;
+    validate(): boolean;
+    reset(): void;
+    private onChangeValue;
+    private getValidity;
+    private renderThumb;
+    private formatDisplay;
+    private formatValue;
+    private valToPercent;
+    private percentToVal;
+    private snap;
+    private getThumbValue;
+    private handleContainerPointerDown;
+    private handleThumbKeyDown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-slider': USlider;
+    }
+}