@iyulab/components 0.2.2 → 0.3.0

package/dist/components/carousel/UCarousel.component.js

@@ -0,0 +1,243 @@
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { BaseElement } from '../BaseElement.js';
+import { UButton } from '../button/UButton.component.js';
+import { UIcon } from '../icon/UIcon.component.js';
+import { styles } from './UCarousel.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 UCarousel extends BaseElement {
+  constructor() {
+    super(...arguments);
+    this.currentIndex = 0;
+    this.autoplay = false;
+    this.autoplayInterval = 3e3;
+    this.navigation = true;
+    this.pagination = true;
+    this.loop = true;
+    this.draggable = false;
+    this.slidesPerView = 1;
+    this.slidesPerMove = 1;
+    this.gap = 0;
+    this._slideCount = 0;
+    this._isDragging = false;
+    this._dragOffset = 0;
+    this._dragStartX = 0;
+    this._dragStartTime = 0;
+    this.handleDragStart = (e) => {
+      e.preventDefault();
+    };
+    this.handlePointerDown = (e) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      this._isDragging = true;
+      this._dragStartX = e.clientX;
+      this._dragOffset = 0;
+      this._dragStartTime = Date.now();
+      if (this.autoplay) this.stopAutoplay();
+      const wrapper = e.currentTarget;
+      wrapper.setPointerCapture(e.pointerId);
+    };
+    this.handlePointerMove = (e) => {
+      if (!this._isDragging) return;
+      const wrapper = e.currentTarget;
+      this._dragOffset = (e.clientX - this._dragStartX) / wrapper.offsetWidth * 100;
+    };
+    this.handlePointerUp = (e) => {
+      if (!this._isDragging) return;
+      const elapsed = Date.now() - this._dragStartTime;
+      const absDrag = Math.abs(this._dragOffset);
+      if (absDrag > 20 || absDrag > 5 && elapsed < 300) {
+        if (this._dragOffset < 0) this.next();
+        else this.prev();
+      }
+      this._isDragging = false;
+      this._dragOffset = 0;
+      if (this.autoplay) this.startAutoplay();
+      const wrapper = e.currentTarget;
+      wrapper.releasePointerCapture(e.pointerId);
+    };
+  }
+  static {
+    this.styles = [super.styles, styles];
+  }
+  static {
+    this.dependencies = {
+      "u-button": UButton,
+      "u-icon": UIcon
+    };
+  }
+  get _perView() {
+    return Math.max(1, this.slidesPerView);
+  }
+  get _perMove() {
+    return Math.max(1, this.slidesPerMove);
+  }
+  get _maxIndex() {
+    return Math.max(0, this._slideCount - this._perView);
+  }
+  get _pageCount() {
+    return this._maxIndex <= 0 ? 1 : Math.ceil(this._maxIndex / this._perMove) + 1;
+  }
+  get _currentPage() {
+    return this.currentIndex >= this._maxIndex ? this._pageCount - 1 : Math.floor(this.currentIndex / this._perMove);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.autoplay) this.startAutoplay();
+  }
+  disconnectedCallback() {
+    this.stopAutoplay();
+    super.disconnectedCallback();
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("slidesPerView")) {
+      this.style.setProperty("--slides-per-view", String(this._perView));
+    }
+    if (changedProperties.has("gap")) {
+      this.style.setProperty("--slide-gap", `${this.gap}px`);
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("autoplay") || changedProperties.has("autoplayInterval")) {
+      if (this.autoplay) this.startAutoplay();
+      else this.stopAutoplay();
+    }
+  }
+  render() {
+    const pct = -(this.currentIndex * (100 / this._perView)) + this._dragOffset;
+    const gapPx = this.gap > 0 ? -(this.currentIndex * this.gap / this._perView) : 0;
+    const transform = gapPx ? `translateX(calc(${pct}% + ${gapPx}px))` : `translateX(${pct}%)`;
+    const style = `transform: ${transform}${this._isDragging ? "; transition: none" : ""}`;
+    return html`
+      <div class="slides-wrapper"
+        @dragstart=${this.handleDragStart}
+        @pointerdown=${this.draggable ? this.handlePointerDown : null}
+        @pointermove=${this.draggable ? this.handlePointerMove : null}
+        @pointerup=${this.draggable ? this.handlePointerUp : null}
+        @pointerleave=${this.draggable ? this.handlePointerUp : null}>
+        <div part="slides" class="slides" style="${style}">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+      </div>
+
+      <u-button part="prev-button" class="nav-button prev" variant="borderless"
+        ?hidden=${!this.navigation}
+        ?disabled=${!this.loop && this.currentIndex <= 0}
+        @click=${this.prev}>
+        <u-icon lib="internal" name="chevron-left"></u-icon>
+      </u-button>
+      <u-button part="next-button" class="nav-button next" variant="borderless"
+        ?hidden=${!this.navigation}
+        ?disabled=${!this.loop && this.currentIndex >= this._maxIndex}
+        @click=${this.next}>
+        <u-icon lib="internal" name="chevron-right"></u-icon>
+      </u-button>
+
+      <div part="indicator" class="indicator"
+        ?hidden=${!this.pagination || !this._slideCount}>
+        ${Array.from({ length: this._pageCount }, (_, i) => html`
+          <button part="dot"
+            class="dot ${i === this._currentPage ? "active" : ""}"
+            @click=${() => this.goTo(Math.min(i * this._perMove, this._maxIndex))}>
+          </button>
+        `)}
+      </div>
+    `;
+  }
+  /** 이전 슬라이드로 이동 */
+  prev() {
+    const target = Math.max(0, this.currentIndex - this._perMove);
+    if (target !== this.currentIndex) {
+      this.goTo(target);
+    } else if (this.loop) {
+      this.goTo(Math.min((this._pageCount - 1) * this._perMove, this._maxIndex));
+    }
+  }
+  /** 다음 슬라이드로 이동 */
+  next() {
+    const target = Math.min(this._maxIndex, this.currentIndex + this._perMove);
+    if (target !== this.currentIndex) {
+      this.goTo(target);
+    } else if (this.loop) {
+      this.goTo(0);
+    }
+  }
+  /** 지정한 인덱스로 이동 */
+  goTo(index) {
+    if (index < 0 || index > this._maxIndex || index === this.currentIndex) return;
+    this.currentIndex = index;
+    this.emit("u-change", {
+      currentIndex: this.currentIndex
+    });
+    if (this.autoplay) this.startAutoplay();
+  }
+  handleSlotChange(e) {
+    const slot = e.target;
+    this._slideCount = slot.assignedElements().length;
+    if (this.currentIndex >= this._slideCount) {
+      this.currentIndex = Math.max(0, this._slideCount - 1);
+    }
+  }
+  startAutoplay() {
+    this.stopAutoplay();
+    this._autoplayTimer = window.setInterval(() => this.next(), this.autoplayInterval);
+  }
+  stopAutoplay() {
+    if (this._autoplayTimer) {
+      clearInterval(this._autoplayTimer);
+      this._autoplayTimer = void 0;
+    }
+  }
+}
+__decorateClass([
+  property({ type: Number, reflect: true, attribute: "current-index" })
+], UCarousel.prototype, "currentIndex");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UCarousel.prototype, "autoplay");
+__decorateClass([
+  property({ type: Number, attribute: "autoplay-interval" })
+], UCarousel.prototype, "autoplayInterval");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UCarousel.prototype, "navigation");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UCarousel.prototype, "pagination");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UCarousel.prototype, "loop");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UCarousel.prototype, "draggable");
+__decorateClass([
+  property({ type: Number, reflect: true, attribute: "slides-per-view" })
+], UCarousel.prototype, "slidesPerView");
+__decorateClass([
+  property({ type: Number, attribute: "slides-per-move" })
+], UCarousel.prototype, "slidesPerMove");
+__decorateClass([
+  property({ type: Number, reflect: true })
+], UCarousel.prototype, "gap");
+__decorateClass([
+  state()
+], UCarousel.prototype, "_slideCount");
+__decorateClass([
+  state()
+], UCarousel.prototype, "_isDragging");
+__decorateClass([
+  state()
+], UCarousel.prototype, "_dragOffset");
+
+export { UCarousel };

package/dist/components/carousel/UCarousel.d.ts

@@ -0,0 +1,7 @@
+import { UCarousel } from './UCarousel.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-carousel": UCarousel;
+    }
+}
+export { UCarousel };

package/dist/components/carousel/UCarousel.js

@@ -0,0 +1,5 @@
+import { UCarousel } from './UCarousel.component.js';
+
+UCarousel.define("u-carousel");
+
+export { UCarousel };

package/dist/components/carousel/UCarousel.styles.d.ts

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

package/dist/components/carousel/UCarousel.styles.js

@@ -0,0 +1,113 @@
+import { css } from 'lit';
+
+const styles = css`
+  /* ── Host ── */
+  :host {
+    --slide-gap: 0px;
+    --slides-per-view: 1;
+  }
+  :host {
+    display: block;
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+  
+  /* ── Draggable ── */
+  :host([draggable]) .slides-wrapper {
+    cursor: grab;
+    user-select: none;
+  }
+  :host([draggable]) .slides-wrapper:active {
+    cursor: grabbing;
+  }
+  :host([draggable]) ::slotted(*) {
+    -webkit-user-drag: none;
+    user-select: none;
+  }
+
+  /* ── Slides ── */
+  .slides-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    touch-action: pan-y;
+  }
+
+  .slides {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    gap: var(--slide-gap, 0px);
+    transition: transform 0.3s ease-in-out;
+  }
+
+  ::slotted(*) {
+    flex: 0 0 calc(
+      (100% - (var(--slides-per-view) - 1) * var(--slide-gap, 0px))
+      / var(--slides-per-view)
+    );
+    min-width: 0;
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  /* ── Navigation ── */
+  .nav-button {
+    position: absolute;
+    z-index: 10;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    font-size: 16px;
+    background-color: var(--u-panel-bg-color, #fff);
+    box-shadow: 0 2px 8px var(--u-shadow-color-normal, rgba(0, 0, 0, 0.12));
+    opacity: 0.9;
+  }
+  .nav-button:hover {
+    opacity: 1;
+    background-color: var(--u-bg-color-hover, #f3f4f6);
+  }
+
+  .nav-button.prev { left: 16px; }
+  .nav-button.next { right: 16px; }
+
+  /* ── Indicator ── */
+  .indicator {
+    position: absolute;
+    z-index: 10;
+    bottom: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 8px;
+  }
+
+  .dot {
+    width: 10px;
+    height: 10px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background-color: var(--u-neutral-400, rgba(0, 0, 0, 0.3));
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  .dot:hover {
+    background-color: var(--u-neutral-200, rgba(0, 0, 0, 0.5));
+  }
+  .dot.active {
+    background-color: var(--u-neutral-100, rgba(0, 0, 0, 0.8));
+    width: 24px;
+    border-radius: 5px;
+  }
+`;
+
+export { styles };

package/dist/components/icon/UIcon.component.d.ts

@@ -1,3 +1,4 @@
+import { nothing } from 'lit';
 import { BaseElement } from '../BaseElement.js';
 export type IconLibrary = "internal" | "default" | (string & {});
 /**
@@ -18,7 +19,9 @@ export declare class UIcon extends BaseElement {
      * 사용할 아이콘의 이름을 지정합니다.
      */
     name?: string;
-    render(): import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/until.js').UntilDirective>;
+    render(): import('lit-html/directive.js').DirectiveResult<{
+        new (_partInfo: import('lit-html/directive.js').PartInfo): import('lit-html/directives/until.js').UntilDirective<typeof nothing | Promise<import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/unsafe-html.js').UnsafeHTMLDirective>>>;
+    }>;
     /**
      * SVG 콘텐츠가 유효한 HTML인지 검사합니다.
      */

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

@@ -60,6 +60,14 @@ export declare class UInput extends BaseElement {
     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>;
     /** 입력 필드에 포커스를 설정합니다. */

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

@@ -29,6 +29,7 @@ class UInput extends BaseElement {
     this.clearable = false;
     this.spellcheck = false;
     this.value = "";
+    this.multiple = false;
     /** input 이벤트 핸들러 */
     this.handleInput = (e) => {
       const input = e.target;
@@ -115,6 +116,10 @@ class UInput extends BaseElement {
           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}
@@ -246,5 +251,17 @@ __decorateClass([
 __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/index.d.ts

@@ -1,5 +1,7 @@
 export * from './components/alert/UAlert.js';
 export * from './components/button/UButton.js';
+export * from './components/card/UCard.js';
+export * from './components/carousel/UCarousel.js';
 export * from './components/dialog/UDialog.js';
 export * from './components/divider/UDivider.js';
 export * from './components/drawer/UDrawer.js';

package/dist/index.js

@@ -1,5 +1,7 @@
 import './components/alert/UAlert.js';
 import './components/button/UButton.js';
+import './components/card/UCard.js';
+import './components/carousel/UCarousel.js';
 import './components/dialog/UDialog.js';
 import './components/divider/UDivider.js';
 import './components/drawer/UDrawer.js';
@@ -23,6 +25,8 @@ export { Notifier } from './utilities/Notifier.js';
 export { Theme } from './utilities/Theme.js';
 export { UAlert } from './components/alert/UAlert.component.js';
 export { UButton } from './components/button/UButton.component.js';
+export { UCard } from './components/card/UCard.component.js';
+export { UCarousel } from './components/carousel/UCarousel.component.js';
 export { UDialog } from './components/dialog/UDialog.component.js';
 export { UDivider } from './components/divider/UDivider.component.js';
 export { UDrawer } from './components/drawer/UDrawer.component.js';

package/dist/react-components/UCard.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { UCard } from '../components/card/UCard';
+
+export declare const UCard: React.ForwardRefExoticComponent<
+  Partial<UCard> & React.HTMLAttributes<UCard>
+>;
+
+export type UCardProps = React.ComponentProps<typeof UCard>;

package/dist/react-components/UCard.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { UCard } from '../components/card/UCard';
+
+export const UCard = createComponent({
+  react: React,
+  tagName: 'u-card',
+  elementClass: UCard,
+  events: {}
+});

package/dist/react-components/UCarousel.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { UCarousel } from '../components/carousel/UCarousel';
+
+export declare const UCarousel: React.ForwardRefExoticComponent<
+  Partial<UCarousel> & React.HTMLAttributes<UCarousel>
+>;
+
+export type UCarouselProps = React.ComponentProps<typeof UCarousel>;

package/dist/react-components/UCarousel.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { UCarousel } from '../components/carousel/UCarousel';
+
+export const UCarousel = createComponent({
+  react: React,
+  tagName: 'u-carousel',
+  elementClass: UCarousel,
+  events: {}
+});

package/dist/react-components/index.d.ts

@@ -7,6 +7,8 @@
 
 export { UAlert, UAlertProps } from './UAlert';
 export { UButton, UButtonProps } from './UButton';
+export { UCard, UCardProps } from './UCard';
+export { UCarousel, UCarouselProps } from './UCarousel';
 export { UDialog, UDialogProps } from './UDialog';
 export { UDivider, UDividerProps } from './UDivider';
 export { UDrawer, UDrawerProps } from './UDrawer';

package/dist/react-components/index.js

@@ -1,5 +1,7 @@
 export { UAlert } from './UAlert.js';
 export { UButton } from './UButton.js';
+export { UCard } from './UCard.js';
+export { UCarousel } from './UCarousel.js';
 export { UDialog } from './UDialog.js';
 export { UDivider } from './UDivider.js';
 export { UDrawer } from './UDrawer.js';

package/package.json

@@ -1,60 +1,71 @@
-{
-  "name": "@iyulab/components",
-  "description": "web-components library based on lit-element made by iyulab",
-  "version": "0.2.2",
-  "keywords": [
-    "iyulab",
-    "components",
-    "web-components",
-    "lit",
-    "lit-element"
-  ],
-  "license": "MIT",
-  "author": "iyulab",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/iyulab/node-components.git"
-  },
-  "files": [
-    "dist",
-    "LICENSE",
-    "README.md",
-    "CHANGELOG.md",
-    "package.json"
-  ],
-  "type": "module",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./src/index.d.ts",
-      "import": "./src/index.js"
-    },
-    "./dist/*": {
-      "types": "./src/*.d.ts",
-      "import": "./src/*"
-    }
-  },
-  "scripts": {
-    "test": "vite --force",
-    "build": "eslint && vite build"
-  },
-  "dependencies": {
-    "@floating-ui/dom": "^1.7.4",
-    "@lit/react": "^1.0.8",
-    "lit": "^3.3.2",
-    "react": "^19.2.3",
-    "reflect-metadata": "^0.2.2"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.39.2",
-    "@types/node": "^25.0.9",
-    "eslint": "^9.39.2",
-    "eslint-plugin-lit": "^2.1.1",
-    "globals": "^17.0.0",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.53.1",
-    "vite": "^7.3.1",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-static-copy": "^3.1.5"
-  }
-}
+{
+  "name": "@iyulab/components",
+  "description": "web-components library based on lit-element made by iyulab",
+  "version": "0.3.0",
+  "keywords": [
+    "iyulab",
+    "components",
+    "web-components",
+    "lit",
+    "lit-element"
+  ],
+  "license": "MIT",
+  "author": "iyulab",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/iyulab/node-components.git"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md",
+    "package.json"
+  ],
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./dist/*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*"
+    }
+  },
+  "scripts": {
+    "test": "vite --force",
+    "build": "eslint && vite build"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.7.5",
+    "lit": "^3.3.2",
+    "quill": "2.0.3",
+    "reflect-metadata": "^0.2.2"
+  },
+  "peerDependencies": {
+    "@lit/react": ">=1.0.0",
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "@lit/react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^25.3.0",
+    "eslint": "^10.0.2",
+    "eslint-plugin-lit": "^2.2.1",
+    "globals": "^17.3.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.56.1",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-static-copy": "^3.2.0"
+  }
+}