@iyulab/components 0.4.0 → 1.0.0

package/dist/components/input/UInput.component.d.ts

@@ -1,92 +0,0 @@
-import { PropertyValues } from 'lit';
-import { UElement } from '../UElement.js';
-/**
- * Supported input types for Input component
- *
- * - Excludes: checkbox, radio, range, color, file, hidden, image, reset, submit, button
- */
-type InputType = ('text' | 'password' | 'email' | 'tel' | 'url' | 'search' | 'number' | 'date' | 'time' | 'datetime-local' | 'month' | 'week');
-/**
- * Input 컴포넌트는 사용자 입력을 받는 텍스트 입력 필드입니다.
- * prefix, suffix 슬롯과 라벨, 도움말, 유효성 검사 등의 기능을 제공합니다.
- */
-export declare class UInput extends UElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof UElement>;
-    inputEl: HTMLInputElement;
-    /** 유효성 여부 */
-    isValid: boolean;
-    /** 현재 표시할 유효성 검사 메시지 */
-    currentValidationMessage: string;
-    /** password type인 경우 비밀번호 표시/숨김 상태 */
-    showPassword: boolean;
-    /** input 요소의 type 속성 */
-    type: InputType;
-    /** 필수 입력 여부 */
-    required: boolean;
-    /** 읽기 전용 여부 */
-    readonly: boolean;
-    /** 비활성화 여부 */
-    disabled: boolean;
-    /** 클리어 버튼 표시 여부 */
-    clearable: boolean;
-    /** input 요소의 name 속성 */
-    name?: string;
-    /** 라벨 텍스트 */
-    label?: string;
-    /** 라벨 도움말 (툴팁) */
-    help?: string;
-    /** placeholder 텍스트 */
-    placeholder?: string;
-    /** 컴포넌트 하단 설명 텍스트 */
-    description?: string;
-    /** 최소 길이 */
-    minlength?: number;
-    /** 최대 길이 */
-    maxlength?: number;
-    /** 맞춤법 검사 여부 */
-    spellcheck: boolean;
-    /** autocomplete 속성 */
-    autocomplete?: string;
-    /** 입력값 */
-    value: string;
-    /** 유효성 검사 패턴 (정규식) */
-    pattern?: string;
-    /** 유효성 검사 실패 시 표시할 메시지 */
-    validationMessage?: string;
-    /** 최솟값 (number, date, time 등) */
-    min?: number;
-    /** 최댓값 (number, date, time 등) */
-    max?: number;
-    /** 증감 단위 (number, date, time 등) */
-    step?: number;
-    /** 모바일 가상 키보드 종류 */
-    inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
-    /** 모바일 엔터 키 라벨 */
-    enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
-    /** 입력 필드 표시 너비 (문자 수 기준) */
-    size?: number;
-    /** 다중 값 허용 (email 타입) */
-    multiple: boolean;
-    protected updated(changedProperties: PropertyValues): void;
-    render(): import('lit-html').TemplateResult<1>;
-    /** 입력 필드에 포커스를 설정합니다. */
-    focus(): void;
-    /** 입력 필드의 포커스를 해제합니다. */
-    blur(): void;
-    /** 입력값을 초기화합니다. */
-    clear(): void;
-    /** 유효성 검사를 수행합니다. */
-    validate(): boolean;
-    /** input 이벤트 핸들러 */
-    private handleInput;
-    /** change 이벤트 핸들러 */
-    private handleInputChange;
-    /** blur 이벤트 핸들러 */
-    private handleInputBlur;
-    /** 비밀번호 표시/숨김 토글 핸들러 */
-    private handlePasswordTogglerClick;
-    /** 클리어 버튼 클릭 핸들러 */
-    private handleClearButtonClick;
-}
-export {};

package/dist/components/input/UInput.component.js

@@ -1,267 +0,0 @@
-import { html } from 'lit';
-import { query, state, property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { live } from 'lit/directives/live.js';
-import { UElement } from '../UElement.js';
-import { UIcon } from '../icon/UIcon.component.js';
-import { UTooltip } from '../tooltip/UTooltip.component.js';
-import { styles } from './UInput.styles.js';
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class UInput extends UElement {
-  constructor() {
-    super(...arguments);
-    this.isValid = true;
-    this.currentValidationMessage = "";
-    this.showPassword = false;
-    this.type = "text";
-    this.required = false;
-    this.readonly = false;
-    this.disabled = false;
-    this.clearable = false;
-    this.spellcheck = false;
-    this.value = "";
-    this.multiple = false;
-    /** input 이벤트 핸들러 */
-    this.handleInput = (e) => {
-      const input = e.target;
-      this.value = input.value;
-      this.emit("u-input", { value: this.value });
-    };
-    /** change 이벤트 핸들러 */
-    this.handleInputChange = (e) => {
-      const input = e.target;
-      this.value = input.value;
-      this.emit("u-change", { value: this.value });
-    };
-    /** blur 이벤트 핸들러 */
-    this.handleInputBlur = (_) => {
-      this.validate();
-    };
-    /** 비밀번호 표시/숨김 토글 핸들러 */
-    this.handlePasswordTogglerClick = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      this.showPassword = !this.showPassword;
-      this.focus();
-    };
-    /** 클리어 버튼 클릭 핸들러 */
-    this.handleClearButtonClick = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      this.clear();
-    };
-  }
-  static {
-    this.styles = [super.styles, styles];
-  }
-  static {
-    this.dependencies = {
-      "u-icon": UIcon,
-      "u-tooltip": UTooltip
-    };
-  }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (changedProperties.has("value") && this.inputEl) {
-      if (this.inputEl.value !== this.value) {
-        this.inputEl.value = this.value;
-      }
-    }
-  }
-  render() {
-    return html`
-      <div class="header" ?hidden=${!this.label}>
-        <span class="required" ?hidden=${!this.required}>*</span>
-      
-        <label class="label" @click=${this.focus}>
-          ${this.label}
-        </label>
-        
-        <div class="helper" ?hidden=${!this.help}>
-          <u-icon lib="internal" name="info-circle-fill"></u-icon>
-          <u-tooltip distance="6" placement="right-end">
-            ${this.help}
-          </u-tooltip>
-        </div>
-      </div>
-      
-      <div class="container"
-        ?invalid=${!this.isValid}
-        ?disabled=${this.disabled}
-        ?readonly=${this.readonly}>
-
-        <slot name="prefix"></slot>
-        
-        <input part="input"
-          type=${this.type === "password" && this.showPassword ? "text" : this.type}
-          name=${ifDefined(this.name)}
-          ?required=${this.required}
-          ?disabled=${this.disabled}
-          ?readonly=${this.readonly}
-          minlength=${ifDefined(this.minlength)}
-          maxlength=${ifDefined(this.maxlength)}
-          spellcheck=${this.spellcheck}
-          autocomplete=${ifDefined(this.autocomplete)}
-          placeholder=${ifDefined(this.placeholder)}
-          pattern=${ifDefined(this.pattern)}
-          min=${ifDefined(this.min)}
-          max=${ifDefined(this.max)}
-          step=${ifDefined(this.step)}
-          inputmode=${ifDefined(this.inputmode)}
-          enterkeyhint=${ifDefined(this.enterkeyhint)}
-          size=${ifDefined(this.size)}
-          ?multiple=${this.multiple}
-          .value=${live(this.value)}
-          @input=${this.handleInput}
-          @change=${this.handleInputChange}
-          @blur=${this.handleInputBlur}
-        />
-        
-        <slot name="suffix"></slot>
-        
-        <u-icon class="suffix icon" tabindex="0"
-          ?hidden=${this.type !== "password" || this.disabled || this.readonly}  
-          lib="internal"
-          name=${this.showPassword ? "eye-slash" : "eye"}
-          @click=${this.handlePasswordTogglerClick}
-        ></u-icon>
-        <u-icon class="suffix icon" tabindex="0"
-          ?hidden=${!this.clearable || this.disabled || this.readonly}
-          lib="internal"
-          name="x-lg"
-          @click=${this.handleClearButtonClick}
-        ></u-icon>
-      </div>
-
-      <div class="validation-message" ?hidden=${!this.currentValidationMessage}>
-        ${this.currentValidationMessage}
-      </div>
-
-      <div class="description" ?hidden=${!this.description}>
-        ${this.description}
-      </div>
-    `;
-  }
-  /** 입력 필드에 포커스를 설정합니다. */
-  focus() {
-    this.inputEl?.focus();
-  }
-  /** 입력 필드의 포커스를 해제합니다. */
-  blur() {
-    this.inputEl?.blur();
-  }
-  /** 입력값을 초기화합니다. */
-  clear() {
-    this.value = "";
-    this.isValid = true;
-    this.currentValidationMessage = "";
-    this.focus();
-  }
-  /** 유효성 검사를 수행합니다. */
-  validate() {
-    if (!this.inputEl) return true;
-    const validity = this.inputEl.validity;
-    this.isValid = validity.valid;
-    if (this.isValid) {
-      this.currentValidationMessage = "";
-    } else {
-      this.currentValidationMessage = validity.patternMismatch ? this.validationMessage || this.inputEl.validationMessage : this.inputEl.validationMessage;
-    }
-    return this.isValid;
-  }
-}
-__decorateClass([
-  query("input")
-], UInput.prototype, "inputEl");
-__decorateClass([
-  state()
-], UInput.prototype, "isValid");
-__decorateClass([
-  state()
-], UInput.prototype, "currentValidationMessage");
-__decorateClass([
-  state()
-], UInput.prototype, "showPassword");
-__decorateClass([
-  property({ type: String, reflect: true })
-], UInput.prototype, "type");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UInput.prototype, "required");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UInput.prototype, "readonly");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UInput.prototype, "disabled");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UInput.prototype, "clearable");
-__decorateClass([
-  property({ type: String })
-], UInput.prototype, "name");
-__decorateClass([
-  property({ type: String })
-], UInput.prototype, "label");
-__decorateClass([
-  property({ type: String })
-], UInput.prototype, "help");
-__decorateClass([
-  property({ type: String })
-], UInput.prototype, "placeholder");
-__decorateClass([
-  property({ type: String })
-], UInput.prototype, "description");
-__decorateClass([
-  property({ type: Number })
-], UInput.prototype, "minlength");
-__decorateClass([
-  property({ type: Number })
-], UInput.prototype, "maxlength");
-__decorateClass([
-  property({ type: Boolean })
-], UInput.prototype, "spellcheck");
-__decorateClass([
-  property({ type: String })
-], UInput.prototype, "autocomplete");
-__decorateClass([
-  property({ type: String })
-], UInput.prototype, "value");
-__decorateClass([
-  property({ type: String })
-], UInput.prototype, "pattern");
-__decorateClass([
-  property({ type: String })
-], UInput.prototype, "validationMessage");
-__decorateClass([
-  property({ type: Number })
-], UInput.prototype, "min");
-__decorateClass([
-  property({ type: Number })
-], UInput.prototype, "max");
-__decorateClass([
-  property({ type: Number })
-], UInput.prototype, "step");
-__decorateClass([
-  property({ type: String })
-], UInput.prototype, "inputmode");
-__decorateClass([
-  property({ type: String })
-], UInput.prototype, "enterkeyhint");
-__decorateClass([
-  property({ type: Number })
-], UInput.prototype, "size");
-__decorateClass([
-  property({ type: Boolean })
-], UInput.prototype, "multiple");
-
-export { UInput };

package/dist/components/menu/UMenu.component.d.ts

@@ -1,67 +0,0 @@
-import { PropertyValues } from 'lit';
-import { UElement } from '../UElement.js';
-import { UFloatingElement } from '../UFloatingElement.js';
-import { UMenuItem } from '../menu-item/UMenuItem.component.js';
-export type MenuType = 'default' | 'dropdown' | 'contextmenu' | 'submenu';
-export type MenuMode = 'none' | 'single' | 'multiple';
-type MenuItemFilter = 'all' | 'enabled' | 'disabled' | 'selected' | 'unselected' | 'checked' | 'unchecked';
-/**
- * Menu 컴포넌트는 드롭다운 메뉴, 컨텍스트 메뉴, 서브메뉴 등을 구현하기 위한 컴포넌트입니다.
- */
-export declare class UMenu extends UFloatingElement {
-    static styles: import('lit').CSSResultGroup[];
-    static dependencies: Record<string, typeof UElement>;
-    items?: UMenuItem[];
-    /**
-     * 메뉴 타입
-     * - default: 일반 메뉴 (수동 제어)
-     * - dropdown: 드롭다운 메뉴 (앵커 클릭 시 토글)
-     * - contextmenu: 컨텍스트 메뉴 (앵커 우클릭 시 표시)
-     */
-    type: MenuType;
-    /**
-     * 메뉴 선택 모드
-     * - none: 액션만 실행, 상태 관리 없음
-     * - single: 하나만 선택 가능
-     * - multiple: 여러 개 선택 가능 (체크박스)
-     */
-    mode: MenuMode;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected willUpdate(changedProperties: PropertyValues): void;
-    render(): import('lit-html').TemplateResult<1>;
-    /**
-     * 특정 인덱스의 아이템에 포커스 (기본: 첫 번째)
-     * @param index 인덱스 (음수 가능)
-     */
-    focusAt: (index?: number) => Promise<void>;
-    /**
-     * 모든 아이템들의 선택 상태를 해제합니다
-     * 재귀적으로 서브메뉴의 아이템들도 해제됩니다.
-     */
-    clearAll(): void;
-    /**
-     * 조건에 맞는 메뉴 아이템들을 반환합니다
-     *
-     * @param filter - 필터 조건입니다
-     * @return 조건에 맞는 아이템들의 배열입니다
-     */
-    getItems(filter?: MenuItemFilter): UMenuItem[];
-    /** 앵커에 이벤트 바인딩 */
-    private bind;
-    /** 앵커에서 이벤트 바인딩 해제 */
-    private unbind;
-    private handleClick;
-    private handleKeydown;
-    private handleWindowFocusOut;
-    private handleWindowKeydown;
-    private handleWindowPointerDown;
-    private handleAnchorPointerDown;
-    private handleAnchorKeydown;
-    private handleAnchorContextMenu;
-    private handleSubmenuAnchorPointerEnter;
-    private handleSubmenuAnchorPointerLeave;
-    private handleSubmenuAnchorFocusIn;
-    private handleSubmenuAnchorFocusOut;
-}
-export {};