@iyulab/components 0.1.0 → 0.1.2

package/dist/components/menu-item/MenuItem.js

@@ -1,36 +1,63 @@
-import { html as d, nothing as n } from "lit";
-import { property as s } from "lit/decorators.js";
-import { BaseElement as o } from "../BaseElement.js";
-import { styles as p } from "./MenuItem.styles.js";
-var u = Object.defineProperty, i = (l, e, c, f) => {
-  for (var t = void 0, a = l.length - 1, h; a >= 0; a--)
-    (h = l[a]) && (t = h(e, c, t) || t);
-  return t && u(e, c, t), t;
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { BaseElement } from '../BaseElement.js';
+import { styles } from './MenuItem.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 o {
+class MenuItem extends BaseElement {
   constructor() {
-    super(...arguments), this.disabled = !1, this.selected = !1, this.checked = !1, this.checkable = !1, this.value = "", this.handleClick = (e) => {
+    super(...arguments);
+    this.disabled = false;
+    this.selected = false;
+    this.checked = false;
+    this.checkable = false;
+    this.value = "";
+    /** 클릭 이벤트를 처리합니다. */
+    this.handleClick = (e) => {
       if (this.disabled) {
-        e.preventDefault(), e.stopPropagation();
+        e.preventDefault();
+        e.stopPropagation();
         return;
       }
-      this.checkable ? (this.checked = !this.checked, this.emit("u-check", { checked: this.checked })) : this.emit("u-select", { value: this.value });
+      if (this.checkable) {
+        this.checked = !this.checked;
+        this.emit("u-check", { checked: this.checked });
+      } else {
+        this.emit("u-select", { value: this.value });
+      }
     };
   }
   static {
-    this.styles = [super.styles, p];
+    this.styles = [super.styles, styles];
   }
   static {
     this.dependencies = {};
   }
   connectedCallback() {
-    super.connectedCallback(), this.setAttribute("role", "menuitem"), this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+    super.connectedCallback();
+    this.setAttribute("role", "menuitem");
+    this.setAttribute("tabindex", this.disabled ? "-1" : "0");
   }
-  updated(e) {
-    super.updated(e), e.has("disabled") && (this.setAttribute("tabindex", this.disabled ? "-1" : "0"), this.setAttribute("aria-disabled", this.disabled ? "true" : "false")), e.has("checked") && this.setAttribute("aria-checked", this.checked ? "true" : "false");
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("disabled")) {
+      this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+      this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    }
+    if (changedProperties.has("checked")) {
+      this.setAttribute("aria-checked", this.checked ? "true" : "false");
+    }
   }
   render() {
-    return d`
+    return html`
       <div class="container" @click=${this.handleClick}>
         ${this.renderPrefixItem()}
         <slot name="prefix"></slot>
@@ -43,26 +70,29 @@ class r extends o {
   }
   /** 메뉴 항목의 앞부분을 렌더링합니다. */
   renderPrefixItem() {
-    return this.checkable ? d`
+    if (this.checkable) {
+      return html`
         <span class="checker" ?checked=${this.checked}>✓</span>
-      ` : n;
+      `;
+    } else {
+      return nothing;
+    }
   }
 }
-i([
-  s({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled");
-i([
-  s({ type: Boolean, reflect: !0 })
-], r.prototype, "selected");
-i([
-  s({ type: Boolean, reflect: !0 })
-], r.prototype, "checked");
-i([
-  s({ type: Boolean })
-], r.prototype, "checkable");
-i([
-  s({ type: String })
-], r.prototype, "value");
-export {
-  r as MenuItem
-};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MenuItem.prototype, "disabled");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MenuItem.prototype, "selected");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MenuItem.prototype, "checked");
+__decorateClass([
+  property({ type: Boolean })
+], MenuItem.prototype, "checkable");
+__decorateClass([
+  property({ type: String })
+], MenuItem.prototype, "value");
+
+export { MenuItem };

package/dist/components/menu-item/MenuItem.styles.js

@@ -1,5 +1,6 @@
-import { css as e } from "lit";
-const r = e`
+import { css } from 'lit';
+
+const styles = css`
   :host {
     display: block;
 
@@ -59,6 +60,5 @@ const r = e`
     white-space: nowrap;
   }
 `;
-export {
-  r as styles
-};
+
+export { styles };

package/dist/components/panel/Panel.js

@@ -1,20 +1,21 @@
-import { html as e } from "lit";
-import { BaseElement as s } from "../BaseElement.js";
-import { styles as t } from "./Panel.styles.js";
-class o extends s {
+import { html } from 'lit';
+import { BaseElement } from '../BaseElement.js';
+import { styles } from './Panel.styles.js';
+
+class Panel extends BaseElement {
   static {
-    this.styles = [super.styles, t];
+    this.styles = [super.styles, styles];
   }
   static {
     this.dependencies = {};
   }
   connectedCallback() {
-    super.connectedCallback(), this.classList.add("scrollable");
+    super.connectedCallback();
+    this.classList.add("scrollable");
   }
   render() {
-    return e`<slot></slot>`;
+    return html`<slot></slot>`;
   }
 }
-export {
-  o as Panel
-};
+
+export { Panel };

package/dist/components/panel/Panel.styles.js

@@ -1,5 +1,6 @@
-import { css as t } from "lit";
-const s = t`
+import { css } from 'lit';
+
+const styles = css`
   :host {
     position: relative;
     display: block;
@@ -7,6 +8,5 @@ const s = t`
     height: 100%;
   }
 `;
-export {
-  s as styles
-};
+
+export { styles };

package/dist/components/progress-ring/ProgressRing.js

@@ -1,48 +1,65 @@
-import { html as d } from "lit";
-import { state as n, property as h } from "lit/decorators.js";
-import { BaseElement as c } from "../BaseElement.js";
-import { styles as m } from "./ProgressRing.styles.js";
-var y = Object.defineProperty, a = (p, r, s, o) => {
-  for (var e = void 0, l = p.length - 1, u; l >= 0; l--)
-    (u = p[l]) && (e = u(r, s, e) || e);
-  return e && y(r, s, e), e;
+import { html } from 'lit';
+import { state, property } from 'lit/decorators.js';
+import { BaseElement } from '../BaseElement.js';
+import { styles } from './ProgressRing.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;
 };
-const t = 100;
-class i extends c {
+const PATH_LENGTH = 100;
+class ProgressRing extends BaseElement {
   constructor() {
-    super(...arguments), this.progress = 0, this.dasharray = t.toString(), this.variant = "smooth", this.minValue = 0, this.maxValue = 100, this.value = 0;
+    super(...arguments);
+    this.progress = 0;
+    this.dasharray = PATH_LENGTH.toString();
+    this.variant = "smooth";
+    this.minValue = 0;
+    this.maxValue = 100;
+    this.value = 0;
   }
   static {
-    this.styles = [super.styles, m];
+    this.styles = [super.styles, styles];
   }
   static {
     this.dependencies = {};
   }
-  willUpdate(r) {
-    super.willUpdate(r), r.has("variant") && (this.dasharray = this.updateDashArray(this.variant)), (r.has("minValue") || r.has("maxValue") || r.has("value")) && (this.progress = this.updateProgress(this.minValue, this.maxValue, this.value));
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("variant")) {
+      this.dasharray = this.updateDashArray(this.variant);
+    }
+    if (changedProperties.has("minValue") || changedProperties.has("maxValue") || changedProperties.has("value")) {
+      this.progress = this.updateProgress(this.minValue, this.maxValue, this.value);
+    }
   }
   render() {
-    return d`
+    return html`
       <svg class="progress-ring" part="base">
         <defs>
           <mask id="progress-mask">
             <circle
-              pathLength="${t}"
+              pathLength="${PATH_LENGTH}"
               stroke="white"
-              stroke-dasharray="${t}"
-              stroke-dashoffset="${t * (1 - this.progress)}"
+              stroke-dasharray="${PATH_LENGTH}"
+              stroke-dashoffset="${PATH_LENGTH * (1 - this.progress)}"
             ></circle>
           </mask>
         </defs>
         
         <circle 
           class="track"
-          pathLength="${t}"
+          pathLength="${PATH_LENGTH}"
           stroke-dasharray="${this.dasharray}"
         ></circle>
         <circle 
           class="indicator"
-          pathLength="${t}"
+          pathLength="${PATH_LENGTH}"
           stroke-dasharray="${this.dasharray}"
           mask="url(#progress-mask)"
         ></circle>
@@ -51,35 +68,43 @@ class i extends c {
     `;
   }
   /** 진행 상태를 0과 1 사이의 값으로 반환합니다. */
-  updateProgress(r, s, o) {
-    return r = Number(r ?? 0), s = Number(s ?? 100), o = Math.min(Math.max(Number(o ?? 0), r), s), s === r ? 0 : (o - r) / (s - r);
+  updateProgress(min, max, val) {
+    min = Number(min ?? 0);
+    max = Number(max ?? 100);
+    val = Math.min(Math.max(Number(val ?? 0), min), max);
+    return max === min ? 0 : (val - min) / (max - min);
   }
   /** 
    * variant에 따라 dasharray 값을 반환합니다. 
    * [dash-length] [gap-length] or [dash-length] 형식
    */
-  updateDashArray(r) {
-    return r === "ticks" ? "1 1" : r === "blocks" ? "8 2" : t.toString();
+  updateDashArray(variant) {
+    if (variant === "ticks") {
+      return "1 1";
+    } else if (variant === "blocks") {
+      return "8 2";
+    } else {
+      return PATH_LENGTH.toString();
+    }
   }
 }
-a([
-  n()
-], i.prototype, "progress");
-a([
-  n()
-], i.prototype, "dasharray");
-a([
-  h({ type: String, reflect: !0 })
-], i.prototype, "variant");
-a([
-  h({ type: Number })
-], i.prototype, "minValue");
-a([
-  h({ type: Number })
-], i.prototype, "maxValue");
-a([
-  h({ type: Number })
-], i.prototype, "value");
-export {
-  i as ProgressRing
-};
+__decorateClass([
+  state()
+], ProgressRing.prototype, "progress");
+__decorateClass([
+  state()
+], ProgressRing.prototype, "dasharray");
+__decorateClass([
+  property({ type: String, reflect: true })
+], ProgressRing.prototype, "variant");
+__decorateClass([
+  property({ type: Number })
+], ProgressRing.prototype, "minValue");
+__decorateClass([
+  property({ type: Number })
+], ProgressRing.prototype, "maxValue");
+__decorateClass([
+  property({ type: Number })
+], ProgressRing.prototype, "value");
+
+export { ProgressRing };

package/dist/components/progress-ring/ProgressRing.styles.js

@@ -1,5 +1,6 @@
-import { css as t } from "lit";
-const r = t`
+import { css } from 'lit';
+
+const styles = css`
   :host {
     position: relative;
     display: inline-flex;
@@ -48,6 +49,5 @@ const r = t`
     pointer-events: none;
   }
 `;
-export {
-  r as styles
-};
+
+export { styles };

package/dist/components/spinner/Spinner.js

@@ -1,15 +1,16 @@
-import { html as s } from "lit";
-import { BaseElement as e } from "../BaseElement.js";
-import { styles as r } from "./Spinner.styles.js";
-class a extends e {
+import { html } from 'lit';
+import { BaseElement } from '../BaseElement.js';
+import { styles } from './Spinner.styles.js';
+
+class Spinner extends BaseElement {
   static {
-    this.styles = [super.styles, r];
+    this.styles = [super.styles, styles];
   }
   static {
     this.dependencies = {};
   }
   render() {
-    return s`
+    return html`
       <svg class="spinner" part="base">
         <circle class="track"></circle>
         <circle class="indicator"></circle>
@@ -17,6 +18,5 @@ class a extends e {
     `;
   }
 }
-export {
-  a as Spinner
-};
+
+export { Spinner };

package/dist/components/spinner/Spinner.styles.js

@@ -1,5 +1,6 @@
-import { css as r } from "lit";
-const t = r`
+import { css } from 'lit';
+
+const styles = css`
   :host {
     display: inline-flex;
     font-size: inherit;
@@ -52,6 +53,5 @@ const t = r`
     }
   }
 `;
-export {
-  t as styles
-};
+
+export { styles };

package/dist/components/split-panel/SplitPanel.js

@@ -1,86 +1,147 @@
-import { html as f } from "lit";
-import { property as p } from "lit/decorators.js";
-import { arrayAttributeConverter as g } from "../../internals/attribute-converters.js";
-import { BaseElement as v } from "../BaseElement.js";
-import { Panel as c } from "../panel/Panel.js";
-import { Splitter as u } from "./Splitter.js";
-import { styles as y } from "./SplitPanel.styles.js";
-var S = Object.defineProperty, d = (a, s, r, o) => {
-  for (var t = void 0, e = a.length - 1, i; e >= 0; e--)
-    (i = a[e]) && (t = i(s, r, t) || t);
-  return t && S(s, r, t), t;
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { arrayAttributeConverter } from '../../internals/attribute-converters.js';
+import { BaseElement } from '../BaseElement.js';
+import { Panel } from '../panel/Panel.js';
+import { Splitter } from './Splitter.js';
+import { styles } from './SplitPanel.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 m extends v {
+class SplitPanel extends BaseElement {
   constructor() {
-    super(...arguments), this.panels = [], this.splitters = [], this.isDragging = !1, this.currentSplitter = null, this.totalSize = 0, this.startPosition = 0, this.startRatio = [], this.orientation = "horizontal", this.ratio = [], this.handleSlotChange = async (s) => {
-      const t = s.target.assignedElements({ flatten: !0 }).filter((e) => e instanceof c);
-      if (!(this.panels.length === t.length && this.panels.every((e, i) => e === t[i]))) {
-        if (this.splitters.forEach((e) => e.remove()), this.splitters = [], this.panels = t, t.forEach((e, i) => {
-          if (i === t.length - 1)
-            return;
-          const n = new u();
-          n.orientation = this.orientation, n.addEventListener("mousedown", this.handleMouseDown), this.splitters.push(n), e.after(n);
-        }), this.ratio.length === t.length) {
-          const e = this.ratio.reduce((i, n) => i + n, 0);
-          t.forEach((i, n) => {
-            const l = this.ratio[n] / e * 100;
-            i.style.flex = `${l} 1 0%`;
-          });
+    super(...arguments);
+    this.panels = [];
+    this.splitters = [];
+    this.isDragging = false;
+    this.currentSplitter = null;
+    this.totalSize = 0;
+    this.startPosition = 0;
+    this.startRatio = [];
+    this.orientation = "horizontal";
+    this.ratio = [];
+    this.handleSlotChange = async (e) => {
+      const slot = e.target;
+      const childrens = slot.assignedElements({ flatten: true });
+      const panels = childrens.filter((el) => el instanceof Panel);
+      if (this.panels.length === panels.length && this.panels.every((p, i) => p === panels[i])) {
+        return;
+      }
+      this.splitters.forEach((splitter) => splitter.remove());
+      this.splitters = [];
+      this.panels = panels;
+      panels.forEach((panel, index) => {
+        if (index === panels.length - 1) {
           return;
-        } else
-          t.forEach((e) => {
-            e.style.flex = `${100 / t.length} 1 0%`;
-          });
-        this.requestUpdate(), await this.updateComplete;
+        }
+        const splitter = new Splitter();
+        splitter.orientation = this.orientation;
+        splitter.addEventListener("mousedown", this.handleMouseDown);
+        this.splitters.push(splitter);
+        panel.after(splitter);
+      });
+      if (this.ratio.length === panels.length) {
+        const totalRatio = this.ratio.reduce((sum, r) => sum + r, 0);
+        panels.forEach((panel, i) => {
+          const panelRatio = this.ratio[i] / totalRatio * 100;
+          panel.style.flex = `${panelRatio} 1 0%`;
+        });
+        return;
+      } else {
+        panels.forEach((panel) => {
+          panel.style.flex = `${100 / panels.length} 1 0%`;
+        });
       }
-    }, this.handleMouseDown = (s) => {
-      s.preventDefault();
-      const r = s.currentTarget;
-      this.currentSplitter = r, this.isDragging = !0, this.startPosition = this.orientation === "horizontal" ? s.clientX : s.clientY;
-      const o = this.getBoundingClientRect(), t = this.orientation === "horizontal" ? o.width : o.height, e = this.splitters.reduce((i, n) => i + n.size, 0);
-      this.totalSize = t - e, this.startRatio = this.panels.map((i) => {
-        const n = i.getBoundingClientRect();
-        return (this.orientation === "horizontal" ? n.width : n.height) / this.totalSize * 100;
-      }), r.dragging = !0, document.addEventListener("mousemove", this.handleMouseMove), document.addEventListener("mouseup", this.handleMouseUp), document.body.style.userSelect = "none", document.body.style.cursor = this.orientation === "horizontal" ? "col-resize" : "row-resize";
-    }, this.handleMouseMove = (s) => {
+      this.requestUpdate();
+      await this.updateComplete;
+    };
+    this.handleMouseDown = (e) => {
+      e.preventDefault();
+      const splitter = e.currentTarget;
+      this.currentSplitter = splitter;
+      this.isDragging = true;
+      this.startPosition = this.orientation === "horizontal" ? e.clientX : e.clientY;
+      const containerRect = this.getBoundingClientRect();
+      const containerSize = this.orientation === "horizontal" ? containerRect.width : containerRect.height;
+      const splittersSize = this.splitters.reduce((sum, sp) => sum + sp.size, 0);
+      this.totalSize = containerSize - splittersSize;
+      this.startRatio = this.panels.map((panel) => {
+        const rect = panel.getBoundingClientRect();
+        const size = this.orientation === "horizontal" ? rect.width : rect.height;
+        return size / this.totalSize * 100;
+      });
+      splitter.dragging = true;
+      document.addEventListener("mousemove", this.handleMouseMove);
+      document.addEventListener("mouseup", this.handleMouseUp);
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = this.orientation === "horizontal" ? "col-resize" : "row-resize";
+    };
+    this.handleMouseMove = (e) => {
       if (!this.isDragging || !this.currentSplitter) return;
-      s.preventDefault();
-      const o = (this.orientation === "horizontal" ? s.clientX : s.clientY) - this.startPosition, t = this.splitters.indexOf(this.currentSplitter);
-      if (t === -1) return;
-      const e = this.panels[t], i = this.panels[t + 1];
-      if (!e || !i) return;
-      const n = o / this.totalSize * 100, l = this.startRatio[t] + n, h = this.startRatio[t + 1] - n;
-      l < 0 || h < 0 || (e.style.flex = `${l} 1 0%`, i.style.flex = `${h} 1 0%`);
-    }, this.handleMouseUp = (s) => {
-      this.isDragging && (this.isDragging = !1, this.currentSplitter && (this.currentSplitter.dragging = !1, this.currentSplitter = null), document.removeEventListener("mousemove", this.handleMouseMove), document.removeEventListener("mouseup", this.handleMouseUp), document.body.style.userSelect = "", document.body.style.cursor = "");
+      e.preventDefault();
+      const currentPosition = this.orientation === "horizontal" ? e.clientX : e.clientY;
+      const deltaPixels = currentPosition - this.startPosition;
+      const splitterIndex = this.splitters.indexOf(this.currentSplitter);
+      if (splitterIndex === -1) return;
+      const prevPanel = this.panels[splitterIndex];
+      const nextPanel = this.panels[splitterIndex + 1];
+      if (!prevPanel || !nextPanel) return;
+      const deltaRatio = deltaPixels / this.totalSize * 100;
+      const prevRatio = this.startRatio[splitterIndex] + deltaRatio;
+      const nextRatio = this.startRatio[splitterIndex + 1] - deltaRatio;
+      if (prevRatio < 0 || nextRatio < 0) return;
+      prevPanel.style.flex = `${prevRatio} 1 0%`;
+      nextPanel.style.flex = `${nextRatio} 1 0%`;
+    };
+    this.handleMouseUp = (_e) => {
+      if (!this.isDragging) return;
+      this.isDragging = false;
+      if (this.currentSplitter) {
+        this.currentSplitter.dragging = false;
+        this.currentSplitter = null;
+      }
+      document.removeEventListener("mousemove", this.handleMouseMove);
+      document.removeEventListener("mouseup", this.handleMouseUp);
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
     };
   }
   static {
-    this.styles = [super.styles, y];
+    this.styles = [super.styles, styles];
   }
   static {
     this.dependencies = {
-      "u-panel": c,
-      "u-splitter": u
+      "u-panel": Panel,
+      "u-splitter": Splitter
     };
   }
   disconnectedCallback() {
-    document.removeEventListener("mousemove", this.handleMouseMove), document.removeEventListener("mouseup", this.handleMouseUp), this.splitters.forEach((s) => {
-      s.removeEventListener("mousedown", this.handleMouseDown), s.remove();
-    }), super.disconnectedCallback();
+    document.removeEventListener("mousemove", this.handleMouseMove);
+    document.removeEventListener("mouseup", this.handleMouseUp);
+    this.splitters.forEach((splitter) => {
+      splitter.removeEventListener("mousedown", this.handleMouseDown);
+      splitter.remove();
+    });
+    super.disconnectedCallback();
   }
   render() {
-    return f`
+    return html`
       <slot @slotchange=${this.handleSlotChange}></slot>
     `;
   }
 }
-d([
-  p({ type: String, reflect: !0 })
-], m.prototype, "orientation");
-d([
-  p({ type: Array, converter: g(parseFloat) })
-], m.prototype, "ratio");
-export {
-  m as SplitPanel
-};
+__decorateClass([
+  property({ type: String, reflect: true })
+], SplitPanel.prototype, "orientation");
+__decorateClass([
+  property({ type: Array, converter: arrayAttributeConverter(parseFloat) })
+], SplitPanel.prototype, "ratio");
+
+export { SplitPanel };