@iyulab/components 0.1.0 → 0.1.1

package/dist/components/alert/Alert.js

@@ -1,30 +1,49 @@
-import { html as p } from "lit";
-import { property as e } from "lit/decorators.js";
-import { BaseElement as c } from "../BaseElement.js";
-import { Icon as h } from "../icon/Icon.js";
-import { styles as m } from "./Alert.styles.js";
-var u = Object.defineProperty, i = (r, t, a, d) => {
-  for (var o = void 0, n = r.length - 1, l; n >= 0; n--)
-    (l = r[n]) && (o = l(t, a, o) || o);
-  return o && u(t, a, o), o;
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { BaseElement } from '../BaseElement.js';
+import { Icon } from '../icon/Icon.js';
+import { styles } from './Alert.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 s extends c {
+class Alert extends BaseElement {
   constructor() {
-    super(...arguments), this.open = !1, this.type = "info", this.minRows = 1, this.maxRows = 3, this.duration = 0;
+    super(...arguments);
+    this.open = false;
+    this.type = "info";
+    this.minRows = 1;
+    this.maxRows = 3;
+    this.duration = 0;
   }
   static {
-    this.styles = [super.styles, m];
+    this.styles = [super.styles, styles];
   }
   static {
     this.dependencies = {
-      "u-icon": h
+      "u-icon": Icon
     };
   }
-  updated(t) {
-    super.updated(t), t.has("minRows") && this.minRows < this.maxRows && this.minRows > 0 && this.style.setProperty("--min-content-rows", `${this.minRows}`), t.has("maxRows") && this.maxRows > this.minRows && this.maxRows > 0 && this.style.setProperty("--max-content-rows", `${this.maxRows}`), t.has("open") && this.updateOpenState(this.open);
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("minRows") && this.minRows < this.maxRows && this.minRows > 0) {
+      this.style.setProperty("--min-content-rows", `${this.minRows}`);
+    }
+    if (changedProperties.has("maxRows") && this.maxRows > this.minRows && this.maxRows > 0) {
+      this.style.setProperty("--max-content-rows", `${this.maxRows}`);
+    }
+    if (changedProperties.has("open")) {
+      this.updateOpenState(this.open);
+    }
   }
   render() {
-    return p`
+    return html`
       <div class="container">
         <div class="header">
           <u-icon class="icon" 
@@ -39,7 +58,7 @@ class s extends c {
           ></u-icon>
         </div>
         <div class="content scrollable">
-          ${this.content || p`<slot></slot>`}
+          ${this.content || html`<slot></slot>`}
         </div>
         <div class="footer"></div>
       </div>
@@ -47,19 +66,21 @@ class s extends c {
   }
   /** Alert를 표시합니다. */
   async show() {
-    await this.updateComplete, requestAnimationFrame(() => {
-      this.open = !0;
+    await this.updateComplete;
+    requestAnimationFrame(() => {
+      this.open = true;
     });
   }
   /** Alert를 숨깁니다. */
   async hide() {
-    await this.updateComplete, requestAnimationFrame(() => {
-      this.open = !1;
+    await this.updateComplete;
+    requestAnimationFrame(() => {
+      this.open = false;
     });
   }
   /** Alert 타입에 따른 아이콘 이름을 반환합니다. */
-  getIcon(t) {
-    switch (t) {
+  getIcon(type) {
+    switch (type) {
       case "error":
         return "exclamation-circle-fill";
       case "warning":
@@ -75,33 +96,40 @@ class s extends c {
     }
   }
   /** open 속성 변경에 따른 상태 업데이트를 처리합니다. */
-  updateOpenState(t) {
-    t ? (this.duration && this.duration > 0 && (this.timeoutId = window.setTimeout(() => {
-      this.hide();
-    }, this.duration)), this.emit("u-show")) : (clearTimeout(this.timeoutId), this.emit("u-hide"));
+  updateOpenState(open) {
+    if (open) {
+      if (this.duration && this.duration > 0) {
+        this.timeoutId = window.setTimeout(() => {
+          this.hide();
+        }, this.duration);
+      }
+      this.emit("u-show");
+    } else {
+      clearTimeout(this.timeoutId);
+      this.emit("u-hide");
+    }
   }
 }
-i([
-  e({ type: Boolean, reflect: !0 })
-], s.prototype, "open");
-i([
-  e({ type: String, reflect: !0 })
-], s.prototype, "type");
-i([
-  e({ type: String })
-], s.prototype, "label");
-i([
-  e({ type: String })
-], s.prototype, "content");
-i([
-  e({ type: Number })
-], s.prototype, "minRows");
-i([
-  e({ type: Number })
-], s.prototype, "maxRows");
-i([
-  e({ type: Number })
-], s.prototype, "duration");
-export {
-  s as Alert
-};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Alert.prototype, "open");
+__decorateClass([
+  property({ type: String, reflect: true })
+], Alert.prototype, "type");
+__decorateClass([
+  property({ type: String })
+], Alert.prototype, "label");
+__decorateClass([
+  property({ type: String })
+], Alert.prototype, "content");
+__decorateClass([
+  property({ type: Number })
+], Alert.prototype, "minRows");
+__decorateClass([
+  property({ type: Number })
+], Alert.prototype, "maxRows");
+__decorateClass([
+  property({ type: Number })
+], Alert.prototype, "duration");
+
+export { Alert };

package/dist/components/alert/Alert.styles.js

@@ -1,5 +1,6 @@
-import { css as r } from "lit";
-const e = r`
+import { css } from 'lit';
+
+const styles = css`
   :host {
     display: block;
     min-width: 300px;
@@ -109,6 +110,5 @@ const e = r`
     display: none;
   }
 `;
-export {
-  e as styles
-};
+
+export { styles };

package/dist/components/button/Button.js

@@ -1,27 +1,34 @@
-import { html as p } from "lit";
-import { property as n } from "lit/decorators.js";
-import { BaseElement as d } from "../BaseElement.js";
-import { Spinner as f } from "../spinner/Spinner.js";
-import { styles as u } from "./Button.styles.js";
-var m = Object.defineProperty, l = (t, r, o, h) => {
-  for (var e = void 0, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = i(r, o, e) || e);
-  return e && m(r, o, e), e;
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { BaseElement } from '../BaseElement.js';
+import { Spinner } from '../spinner/Spinner.js';
+import { styles } from './Button.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 a extends d {
+class Button extends BaseElement {
   constructor() {
-    super(...arguments), this.disabled = !1, this.loading = !1;
+    super(...arguments);
+    this.disabled = false;
+    this.loading = false;
   }
   static {
-    this.styles = [super.styles, u];
+    this.styles = [super.styles, styles];
   }
   static {
     this.dependencies = {
-      "u-spinner": f
+      "u-spinner": Spinner
     };
   }
   render() {
-    return p`
+    return html`
       <button part="base" ?disabled=${this.disabled || this.loading}>
         <slot name="prefix"></slot>
         <slot></slot>
@@ -34,12 +41,11 @@ class a extends d {
     `;
   }
 }
-l([
-  n({ type: Boolean, reflect: !0 })
-], a.prototype, "disabled");
-l([
-  n({ type: Boolean, reflect: !0 })
-], a.prototype, "loading");
-export {
-  a as Button
-};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Button.prototype, "disabled");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Button.prototype, "loading");
+
+export { Button };

package/dist/components/button/Button.styles.js

@@ -1,5 +1,6 @@
-import { css as o } from "lit";
-const t = o`
+import { css } from 'lit';
+
+const styles = css`
   :host {
     position: relative;
     display: inline-flex;
@@ -84,6 +85,5 @@ const t = o`
     background-color: inherit;
   }
 `;
-export {
-  t as styles
-};
+
+export { styles };

package/dist/components/context-menu/ContextMenu.js

@@ -1,20 +1,35 @@
-import { html as l } from "lit";
-import { property as n } from "lit/decorators.js";
-import { offset as m, shift as u, flip as d, autoPlacement as p, computePosition as g } from "@floating-ui/dom";
-import { getParentElement as f } from "../../internals/node-helpers.js";
-import { BaseElement as v } from "../BaseElement.js";
-import { MenuItem as C } from "../menu-item/MenuItem.js";
-import { styles as y } from "./ContextMenu.styles.js";
-var b = Object.defineProperty, o = (h, t, s, a) => {
-  for (var e = void 0, i = h.length - 1, c; i >= 0; i--)
-    (c = h[i]) && (e = c(t, s, e) || e);
-  return e && b(t, s, e), e;
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { offset, shift, flip, autoPlacement, computePosition } from '@floating-ui/dom';
+import { getParentElement } from '../../internals/node-helpers.js';
+import { BaseElement } from '../BaseElement.js';
+import { MenuItem } from '../menu-item/MenuItem.js';
+import { styles } from './ContextMenu.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 r extends v {
+class ContextMenu extends BaseElement {
   constructor() {
-    super(...arguments), this.mouseX = 0, this.mouseY = 0, this.open = !1, this.hoist = !0, this.distance = 2, this.show = async (t, s) => {
-      t !== void 0 && (this.mouseX = t), s !== void 0 && (this.mouseY = s), await this.updateComplete;
-      const a = {
+    super(...arguments);
+    /** 마우스 클릭 위치 */
+    this.mouseX = 0;
+    this.mouseY = 0;
+    this.open = false;
+    this.hoist = true;
+    this.distance = 2;
+    /** 컨텍스트 메뉴를 표시합니다. */
+    this.show = async (x, y) => {
+      if (x !== void 0) this.mouseX = x;
+      if (y !== void 0) this.mouseY = y;
+      await this.updateComplete;
+      const virtualElement = {
         getBoundingClientRect: () => ({
           width: 0,
           height: 0,
@@ -25,64 +40,95 @@ class r extends v {
           right: this.mouseX,
           bottom: this.mouseY
         })
-      }, e = [
-        m({ mainAxis: this.distance }),
-        u({ padding: 8 }),
-        d()
+      };
+      const middleware = [
+        offset({ mainAxis: this.distance }),
+        shift({ padding: 8 }),
+        flip()
       ];
-      this.placement || e.push(p({ allowedPlacements: ["bottom-start", "bottom-end", "top-start", "top-end"] }));
-      const i = await g(a, this, {
+      if (!this.placement) {
+        middleware.push(autoPlacement({ allowedPlacements: ["bottom-start", "bottom-end", "top-start", "top-end"] }));
+      }
+      const position = await computePosition(virtualElement, this, {
         placement: this.placement || "bottom-start",
-        middleware: e,
+        middleware,
         strategy: this.hoist ? "fixed" : "absolute"
       });
       Object.assign(this.style, {
-        left: `${i.x}px`,
-        top: `${i.y}px`,
-        transformOrigin: this.getTransformOrigin(i.placement)
-      }), await this.updateComplete, requestAnimationFrame(() => {
-        this.open = !0, this.emit("u-show");
+        left: `${position.x}px`,
+        top: `${position.y}px`,
+        transformOrigin: this.getTransformOrigin(position.placement)
       });
-    }, this.hide = async () => {
-      await this.updateComplete, requestAnimationFrame(() => {
-        this.open = !1, this.emit("u-hide");
+      await this.updateComplete;
+      requestAnimationFrame(() => {
+        this.open = true;
+        this.emit("u-show");
       });
-    }, this.handleContextMenu = (t) => {
-      t.preventDefault(), t.stopPropagation(), this.show(t.clientX, t.clientY);
-    }, this.handleDocumentClick = (t) => {
-      this.open && !this.contains(t.target) && this.hide();
-    }, this.handleDocumentContextMenu = (t) => {
-      this.open && !this.trigger?.contains(t.target) && this.hide();
-    }, this.handleSlotChange = () => {
-      this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: !0 })?.forEach((a) => {
-        a.addEventListener("u-select", () => {
+    };
+    /** 컨텍스트 메뉴를 숨깁니다. */
+    this.hide = async () => {
+      await this.updateComplete;
+      requestAnimationFrame(() => {
+        this.open = false;
+        this.emit("u-hide");
+      });
+    };
+    /** 컨텍스트 메뉴 이벤트를 처리합니다. */
+    this.handleContextMenu = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.show(e.clientX, e.clientY);
+    };
+    /** 문서 클릭 이벤트를 처리합니다. */
+    this.handleDocumentClick = (e) => {
+      if (this.open && !this.contains(e.target)) {
+        this.hide();
+      }
+    };
+    /** 문서 컨텍스트 메뉴 이벤트를 처리합니다. */
+    this.handleDocumentContextMenu = (e) => {
+      if (this.open && !this.trigger?.contains(e.target)) {
+        this.hide();
+      }
+    };
+    /** 슬롯 변경 이벤트를 처리합니다. */
+    this.handleSlotChange = () => {
+      const slot = this.shadowRoot?.querySelector("slot");
+      const items = slot?.assignedElements({ flatten: true });
+      items?.forEach((item) => {
+        item.addEventListener("u-select", () => {
           this.hide();
         });
       });
     };
   }
   static {
-    this.styles = [super.styles, y];
+    this.styles = [super.styles, styles];
   }
   static {
     this.dependencies = {
-      "u-menu-item": C
+      "u-menu-item": MenuItem
     };
   }
   connectedCallback() {
-    super.connectedCallback(), this.trigger ||= f(this), this.setAttribute("role", "menu");
+    super.connectedCallback();
+    this.trigger ||= getParentElement(this);
+    this.setAttribute("role", "menu");
   }
   disconnectedCallback() {
-    this.detachTrigger(this.trigger), super.disconnectedCallback();
+    this.detachTrigger(this.trigger);
+    super.disconnectedCallback();
   }
-  updated(t) {
-    if (super.updated(t), t.has("trigger") && this.trigger) {
-      const s = t.get("trigger");
-      this.detachTrigger(s), this.attachTrigger(this.trigger);
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("trigger") && this.trigger) {
+      const oldTrigger = changedProperties.get("trigger");
+      this.detachTrigger(oldTrigger);
+      this.attachTrigger(this.trigger);
     }
   }
   render() {
-    return l`
+    return html`
       <div class="container">
         <slot @slotchange=${this.handleSlotChange}></slot>
       </div>
@@ -91,8 +137,8 @@ class r extends v {
   /**
    * 메뉴가 나타날 위치에 따라 transform-origin 값을 반환합니다.
    */
-  getTransformOrigin(t) {
-    switch (t) {
+  getTransformOrigin(placement) {
+    switch (placement) {
       case "top":
       case "top-start":
       case "top-end":
@@ -114,29 +160,34 @@ class r extends v {
     }
   }
   /** 대상 엘리먼트에 컨텍스트 메뉴 이벤트를 바인딩 합니다. */
-  attachTrigger(t) {
-    t && (t.addEventListener("contextmenu", this.handleContextMenu), document.addEventListener("click", this.handleDocumentClick), document.addEventListener("contextmenu", this.handleDocumentContextMenu));
+  attachTrigger(trigger) {
+    if (!trigger) return;
+    trigger.addEventListener("contextmenu", this.handleContextMenu);
+    document.addEventListener("click", this.handleDocumentClick);
+    document.addEventListener("contextmenu", this.handleDocumentContextMenu);
   }
   /** 대상 엘리먼트에 바인딩된 컨텍스트 메뉴 이벤트를 제거합니다. */
-  detachTrigger(t) {
-    t && (t.removeEventListener("contextmenu", this.handleContextMenu), document.removeEventListener("click", this.handleDocumentClick), document.removeEventListener("contextmenu", this.handleDocumentContextMenu));
+  detachTrigger(trigger) {
+    if (!trigger) return;
+    trigger.removeEventListener("contextmenu", this.handleContextMenu);
+    document.removeEventListener("click", this.handleDocumentClick);
+    document.removeEventListener("contextmenu", this.handleDocumentContextMenu);
   }
 }
-o([
-  n({ attribute: !1 })
-], r.prototype, "trigger");
-o([
-  n({ type: Boolean, reflect: !0 })
-], r.prototype, "open");
-o([
-  n({ type: Boolean, reflect: !0 })
-], r.prototype, "hoist");
-o([
-  n({ type: String })
-], r.prototype, "placement");
-o([
-  n({ type: Number })
-], r.prototype, "distance");
-export {
-  r as ContextMenu
-};
+__decorateClass([
+  property({ attribute: false })
+], ContextMenu.prototype, "trigger");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ContextMenu.prototype, "open");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ContextMenu.prototype, "hoist");
+__decorateClass([
+  property({ type: String })
+], ContextMenu.prototype, "placement");
+__decorateClass([
+  property({ type: Number })
+], ContextMenu.prototype, "distance");
+
+export { ContextMenu };

package/dist/components/context-menu/ContextMenu.styles.js

@@ -1,5 +1,6 @@
-import { css as o } from "lit";
-const e = o`
+import { css } from 'lit';
+
+const styles = css`
   :host {
     position: absolute;
     z-index: 1000;
@@ -35,6 +36,5 @@ const e = o`
     overflow: hidden;
   }
 `;
-export {
-  e as styles
-};
+
+export { styles };