@iyulab/components 0.3.0 → 1.0.0

package/dist/components/select/USelect.js

@@ -0,0 +1,315 @@
+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 { UFormControlElement } from "../UFormControlElement.js";
+import "../icon/UIcon.js";
+import "../spinner/USpinner.js";
+import "../field/UField.js";
+import { UOption } from "../option/UOption.js";
+import { UPopover } from "../popover/UPopover.js";
+import { styles } from "./USelect.styles.js";
+import { customElement, property, query } from "lit/decorators.js";
+import { html } from "lit";
+//#region src/components/select/USelect.ts
+var _ref, _ref2;
+var USelect = class USelect extends UFormControlElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "outlined";
+		this.multiple = false;
+		this.searchable = false;
+		this.clearable = false;
+		this.loading = false;
+		this.options = [];
+		this.handleSlotChange = (e) => {
+			this.cleanup(this.options);
+			this.options = e.target.assignedElements({ flatten: true }).filter((el) => el instanceof UOption);
+			this.setup(this.options);
+		};
+		this.handleOptionClick = (e) => {
+			const option = e.currentTarget;
+			if (option.disabled) return;
+			if (this.multiple) {
+				const values = this.valueAsArray;
+				if (values.includes(option.value)) this.value = values.filter((v) => v !== option.value);
+				else {
+					if (this.maxCount != null && values.length >= this.maxCount) return;
+					this.value = [...values, option.value];
+				}
+			} else {
+				this.value = option.value;
+				this.popoverEl?.hide();
+			}
+		};
+		this.handleOptionKeydown = (e) => {
+			const options = this.options.filter((o) => !o.hidden && !o.disabled);
+			const currentOption = e.currentTarget;
+			const currentIndex = options.indexOf(currentOption);
+			if (currentIndex === -1) return;
+			switch (e.key) {
+				case "Enter":
+				case " ":
+					currentOption.click();
+					break;
+				case "ArrowDown":
+					e.preventDefault();
+					options[(currentIndex + 1) % options.length].focus();
+					break;
+				case "ArrowUp":
+					e.preventDefault();
+					options[(currentIndex - 1 + options.length) % options.length].focus();
+					break;
+				case "Home":
+					e.preventDefault();
+					options[0].focus();
+					break;
+				case "End":
+					e.preventDefault();
+					options[options.length - 1].focus();
+					break;
+				case "Escape":
+					e.preventDefault();
+					this.popoverEl?.hide();
+					break;
+			}
+		};
+		this.handleSearchInput = (e) => {
+			const query = e.target.value.toLowerCase().trim();
+			for (const option of this.options) if (!query) option.hidden = false;
+			else {
+				const label = option.getText().toLowerCase();
+				const value = option.value.toLowerCase();
+				option.hidden = !label.includes(query) && !value.includes(query);
+			}
+		};
+		this.handleSearchKeydown = (e) => {
+			const options = this.options.filter((o) => !o.hidden && !o.disabled);
+			if (options.length === 0) return;
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault();
+					options[0].focus();
+					break;
+				case "ArrowUp":
+					e.preventDefault();
+					options[options.length - 1].focus();
+					break;
+				case "Escape":
+					e.preventDefault();
+					this.popoverEl?.hide();
+					break;
+			}
+		};
+		this.handleClearClick = (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			this.reset();
+			this.containerEl?.click();
+		};
+		this.handleChipRemove = (e) => {
+			e.stopImmediatePropagation();
+			const value = e.currentTarget.dataset.value;
+			if (!value) return;
+			this.value = this.valueAsArray.filter((v) => v !== value);
+		};
+		this.handlePopoverEvent = (e) => {
+			e.stopPropagation();
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	get valueAsString() {
+		return Array.isArray(this.value) ? this.value.join(",") : this.value ?? "";
+	}
+	get valueAsArray() {
+		return Array.isArray(this.value) ? this.value : this.value ? [this.value] : [];
+	}
+	get hasValue() {
+		return this.multiple ? this.valueAsArray.length > 0 : !!this.value;
+	}
+	disconnectedCallback() {
+		this.cleanup(this.options);
+		super.disconnectedCallback();
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("value")) this.onChangeValue();
+	}
+	render() {
+		return html`
+      <u-field part="field"
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        ?invalid=${this.invalid}
+        .label=${this.label}
+        .description=${this.description}
+        .validationMessage=${this.validationMessage}
+      >
+        <span slot="label-aside" class="count" ?hidden=${!this.multiple || !this.maxCount}>
+          ${this.valueAsArray.length} / ${this.maxCount}
+        </span>
+
+        <div class="container" part="container" tabindex=${this.disabled ? "-1" : "0"}>
+          <slot name="prefix"></slot>
+          ${this.renderContent()}
+          <slot name="suffix"></slot>
+
+          <u-icon class="suffix-item"
+            ?hidden=${!this.clearable || !this.hasValue || this.disabled || this.readonly}
+            lib="internal"
+            name="x-lg"
+            @click=${this.handleClearClick}
+          ></u-icon>
+          <u-icon class="suffix-item"
+            ?hidden=${this.loading}
+            lib="internal"
+            name="chevron-down"
+          ></u-icon>
+          <u-spinner class="suffix-item"
+            ?hidden=${!this.loading}
+          ></u-spinner>
+        </div>
+      </u-field>
+
+      <u-popover part="popover"
+        role="listbox"
+        scrollable
+        autofocus
+        for=".container"
+        trigger="click"
+        placement="bottom-start"
+        offset="1"
+        @show=${this.handlePopoverEvent}
+        @hide=${this.handlePopoverEvent}
+      >
+        <div class="search-input" part="search-input" 
+          ?hidden=${!this.searchable}>
+          <u-icon lib="internal" name="search"></u-icon>
+          <input
+            type="text"
+            @input=${this.handleSearchInput}
+            @keydown=${this.handleSearchKeydown}
+          />
+        </div>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </u-popover>
+    `;
+	}
+	renderContent() {
+		if (this.multiple) {
+			const values = this.valueAsArray;
+			if (values.length === 0) return html`<span class="text-content placeholder">${this.placeholder ?? ""}</span>`;
+			return html`
+        <div class="chips-content">
+          ${values.map((v) => html`
+              <u-chip 
+                removable
+                data-value=${v} 
+                @remove=${this.handleChipRemove}
+              >
+                ${this.options.find((o) => o.value === v)?.getText() ?? v}
+              </u-chip>`)}
+        </div>
+      `;
+		} else {
+			const text = this.options.find((o) => o.value === this.value)?.getText();
+			if (!text) return html`
+          <span class="text-content placeholder">${this.placeholder ?? ""}</span>`;
+			return html`<span class="text-content">${text}</span>`;
+		}
+	}
+	validate() {
+		if (this.internals) this.invalid = !this.internals.checkValidity();
+		else {
+			const { flags } = this.getValidity(this.valueAsArray);
+			this.invalid = Object.keys(flags).length > 0;
+		}
+		return !this.invalid;
+	}
+	reset() {
+		this.value = this.multiple ? [] : "";
+		this.invalid = false;
+	}
+	setup(options) {
+		for (const option of options) {
+			option.removeEventListener("click", this.handleOptionClick);
+			option.removeEventListener("keydown", this.handleOptionKeydown);
+			option.addEventListener("click", this.handleOptionClick);
+			option.addEventListener("keydown", this.handleOptionKeydown);
+			option.marker = this.multiple ? "check" : void 0;
+			option.disabled = this.disabled;
+			option.selected = this.multiple ? this.valueAsArray.includes(option.value) : option.value === this.value;
+		}
+	}
+	cleanup(options) {
+		for (const option of options) {
+			option.removeEventListener("click", this.handleOptionClick);
+			option.removeEventListener("keydown", this.handleOptionKeydown);
+		}
+	}
+	onChangeValue() {
+		const values = this.valueAsArray;
+		for (const option of this.options) if (this.multiple) option.selected = values.includes(option.value);
+		else option.selected = option.value === this.value;
+		this.internals?.setFormValue(this.valueAsString);
+		const { flags, message } = this.getValidity(values);
+		this.internals?.setValidity(flags, this.validationMessage || message, this.containerEl || void 0);
+		if (!this.novalidate) this.validate();
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	getValidity(values) {
+		if (this.required && !values.length) return {
+			flags: { valueMissing: true },
+			message: "This field is required"
+		};
+		if (this.multiple && this.minCount != null && values.length > 0 && values.length < this.minCount) return {
+			flags: { rangeUnderflow: true },
+			message: `Please select at least ${this.minCount} items`
+		};
+		if (this.multiple && this.maxCount != null && values.length > this.maxCount) return {
+			flags: { rangeOverflow: true },
+			message: `Please select no more than ${this.maxCount} items`
+		};
+		return {
+			flags: {},
+			message: ""
+		};
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+}), __decorateMetadata("design:type", Object)], USelect.prototype, "variant", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], USelect.prototype, "multiple", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], USelect.prototype, "searchable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], USelect.prototype, "clearable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], USelect.prototype, "loading", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "min-count"
+}), __decorateMetadata("design:type", Number)], USelect.prototype, "minCount", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "max-count"
+}), __decorateMetadata("design:type", Number)], USelect.prototype, "maxCount", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], USelect.prototype, "placeholder", void 0);
+__decorate([query(".container", true), __decorateMetadata("design:type", typeof (_ref = typeof HTMLElement !== "undefined" && HTMLElement) === "function" ? _ref : Object)], USelect.prototype, "containerEl", void 0);
+__decorate([query("u-popover", true), __decorateMetadata("design:type", typeof (_ref2 = typeof UPopover !== "undefined" && UPopover) === "function" ? _ref2 : Object)], USelect.prototype, "popoverEl", void 0);
+USelect = __decorate([customElement("u-select")], USelect);
+//#endregion
+export { USelect };

package/dist/components/select/USelect.styles.d.ts

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

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