@konomi-app/ui 2.2.4 → 3.0.0

package/dist/index.cjs

@@ -0,0 +1,763 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ATTRIBUTE_ANIMATION: () => ATTRIBUTE_ANIMATION,
+  LoadingOverlay: () => LoadingOverlay,
+  Modal: () => Modal,
+  TaskListOverlay: () => TaskListOverlay,
+  withLoading: () => withLoading
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/overlay/style.ts
+var import_css = require("@emotion/css");
+var getBodyStyle = () => import_css.css`
+  overflow: visible;
+  &[${ATTRIBUTE_KEY}] {
+    overflow: hidden;
+  }
+`;
+var getRootStyle = () => import_css.css`
+  font-family: 'Yu Gothic Medium', '游ゴシック', YuGothic, 'メイリオ', 'Hiragino Kaku Gothic ProN',
+    Meiryo, sans-serif;
+  color: #356;
+  font-size: 14px;
+
+  overflow: hidden;
+  background-color: #fffb;
+  backdrop-filter: blur(4px);
+  box-sizing: content-box;
+
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+
+  display: grid;
+  transition: all 250ms ease;
+  z-index: 1000;
+  opacity: 0;
+  transition: all 250ms ease;
+
+  place-items: end stretch;
+  @media (min-width: 640px) {
+    font-size: 16px;
+    place-items: center;
+  }
+
+  opacity: 0;
+  pointer-events: none;
+  &[${ATTRIBUTE_SHOWN}] {
+    opacity: 1;
+    pointer-events: all;
+  }
+`;
+
+// src/overlay/index.ts
+var ATTRIBUTE_KEY = "data-konomi-ui-overlay";
+var ATTRIBUTE_SHOWN = "data-shown";
+var Overlay = class {
+  /**
+   * オーバーレイをレンダリングするルート要素。
+   */
+  #root;
+  /**
+   * オーバーレイをレンダリングするルート要素の`dataset`。
+   */
+  _rootDataset;
+  /**
+   * オーバーレイが表示されているかどうか。
+   */
+  _shown;
+  /**
+   * オーバーレイを表示中にページを離れようとした場合にアラートを表示するかどうかを設定します。
+   */
+  _disableBeforeUnload;
+  constructor() {
+    this._shown = false;
+    this._disableBeforeUnload = false;
+    this._rootDataset = {};
+    const root = document.createElement("div");
+    this.#root = root;
+    this.#root.classList.add(getRootStyle());
+    document.body.classList.add(getBodyStyle());
+    this.#root.setAttribute(ATTRIBUTE_KEY, "");
+    document.body.append(root);
+  }
+  show() {
+    this._shown = true;
+    this.#root.setAttribute(ATTRIBUTE_SHOWN, "");
+    document.body.setAttribute(ATTRIBUTE_KEY, "");
+    window.addEventListener("beforeunload", this.beforeunload);
+    this.render();
+  }
+  hide() {
+    this._shown = false;
+    this.#root.removeAttribute(ATTRIBUTE_SHOWN);
+    document.body.removeAttribute(ATTRIBUTE_KEY);
+    window.removeEventListener("beforeunload", this.beforeunload);
+    this.render();
+  }
+  render() {
+  }
+  /** JavaScript中にページを離れようとした場合にアラートを表示します */
+  beforeunload(event) {
+    event.preventDefault();
+  }
+  get root() {
+    return this.#root;
+  }
+  /** @deprecated このメソッドは非推奨です。代わりに`show`メソッドを使用してください。 */
+  start() {
+    this.show();
+  }
+  /** @deprecated このメソッドは非推奨です。代わりに`hide`メソッドを使用してください。 */
+  stop() {
+    this.hide();
+  }
+};
+
+// src/loading-overlay/style.ts
+var import_css2 = require("@emotion/css");
+var containerStyle = import_css2.css`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 32px;
+  padding: 24px;
+  background-color: #fff;
+  border-radius: 0;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  border: 1px solid #f3f4f6;
+  min-height: 200px;
+  position: relative;
+  overflow: hidden;
+  transition: all 250ms ease;
+
+  @media (min-width: 640px) {
+    width: 400px;
+    max-width: 90vw;
+    border-radius: 4px;
+    padding: 32px;
+  }
+`;
+var getLoaderStyle = () => import_css2.css`
+  font-size: 60px;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px #3b82f633;
+  position: relative;
+
+  animation: none;
+  &[${ATTRIBUTE_ANIMATION}] {
+    animation: rotate 1.2s infinite linear;
+  }
+
+  > div {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 0.5em;
+    height: 1em;
+    margin-left: -0.5em;
+    margin-top: -0.5em;
+    overflow: hidden;
+    transform-origin: 0.5em 0.5em;
+    mask-image: linear-gradient(top, #000f, #0000);
+    -webkit-mask-image: -webkit-linear-gradient(top, #000f, #0000);
+
+    > div {
+      width: 1em;
+      height: 1em;
+      border-radius: 50%;
+      box-shadow: inset 0 0 0 1px #3b82f6;
+    }
+  }
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+var progressStyle = import_css2.css`
+  position: absolute;
+  bottom: 0px;
+  left: 0;
+  width: 0%;
+  height: 2px;
+  background-color: #2563eb;
+  transition: all 350ms ease;
+`;
+
+// src/loading-overlay/index.ts
+var ATTRIBUTE_ANIMATION = "data-animation";
+var LoadingOverlay = class extends Overlay {
+  #label;
+  #html;
+  #progress;
+  _loaderElement;
+  _progressElement;
+  _contentElement;
+  constructor(props = {}) {
+    super();
+    this.#label = props.label ?? "";
+    this.#html = "";
+    this.#progress = props.progress ?? null;
+    const container = document.createElement("div");
+    container.classList.add(containerStyle);
+    this.root.append(container);
+    const loaderElement = document.createElement("div");
+    loaderElement.innerHTML = "<div><div></div></div>";
+    loaderElement.classList.add(getLoaderStyle());
+    this._loaderElement = loaderElement;
+    container.append(loaderElement);
+    const progressElement = document.createElement("div");
+    progressElement.classList.add(progressStyle);
+    this._progressElement = progressElement;
+    container.append(progressElement);
+    const contentElement = document.createElement("div");
+    this._contentElement = contentElement;
+    container.append(contentElement);
+    this.render();
+  }
+  show() {
+    super.show();
+    this._loaderElement.setAttribute(ATTRIBUTE_ANIMATION, "");
+  }
+  hide() {
+    super.hide();
+    this._loaderElement.removeAttribute(ATTRIBUTE_ANIMATION);
+    this.#progress = 0;
+    this.#html = "";
+    this.#label = "";
+  }
+  set label(label) {
+    this.#label = label;
+    this.render();
+  }
+  set html(html) {
+    this.#html = html;
+    this.render();
+  }
+  /**
+   * 進捗状況を設定します。
+   * @param percent 進捗のパーセンテージ(0-100)
+   */
+  set progress(percent) {
+    this.#progress = percent;
+    this.render();
+  }
+  render() {
+    super.render();
+    this._progressElement.style.width = `${this.#progress}%`;
+    if (this.#html) {
+      this._contentElement.innerHTML = this.#html;
+    } else {
+      if (this.#label instanceof Array) {
+        this._contentElement.innerHTML = `<div>${this.#label.join("</div><div>")}</div>`;
+      } else {
+        this._contentElement.innerText = this.#label;
+      }
+    }
+  }
+};
+
+// src/task-list-overlay.ts
+var import_css3 = require("@emotion/css");
+var TaskListOverlay = class extends Overlay {
+  #taskList;
+  _contentElement;
+  constructor(props = {}) {
+    super();
+    this.#taskList = props.taskList ?? [];
+    const container = document.createElement("div");
+    container.classList.add(this.containerStyle);
+    this.root.append(container);
+    const contentElement = document.createElement("div");
+    this._contentElement = contentElement;
+    contentElement.classList.add(this.contentStyle);
+    container.append(contentElement);
+    this.render();
+  }
+  hide() {
+    this.#taskList = [];
+    super.hide();
+  }
+  done(key) {
+    const task = this.#taskList.find((t) => t.key === key);
+    if (task) {
+      task.status = "done";
+      this.render();
+    }
+  }
+  error(key) {
+    const task = this.#taskList.find((t) => t.key === key);
+    if (task) {
+      task.status = "error";
+      this.render();
+    }
+  }
+  inProgress(key) {
+    const task = this.#taskList.find((t) => t.key === key);
+    if (task) {
+      task.status = "in-progress";
+      this.render();
+    }
+  }
+  addTask(...tasks) {
+    this.#taskList.push(...tasks.map(({ key, label }) => ({ key, label, status: "new" })));
+    this.render();
+  }
+  render() {
+    super.render();
+    this._contentElement.innerHTML = `
+      <div class="${this.taskListContainerStyle}">
+        ${this.#taskList.map((task) => this.renderTask(task)).join("")}
+      </div>
+    `;
+  }
+  renderTask(task) {
+    const label = Array.isArray(task.label) ? task.label.join(" ") : task.label;
+    const status = task.status;
+    return `
+      <div class="${this.taskContainerStyle}">
+        <div class="${this.taskStatusStyle} status-${status}">${this.getTaskStatusElement(
+      task.status
+    )}</div>
+        <div class="${this.taskLabelStyle}">${label}</div>
+      </div>
+    `;
+  }
+  getTaskStatusElement(status) {
+    switch (status) {
+      case "new":
+        return `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="#ddd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="8" y1="12" x2="16" y2="12"></line></svg>`;
+      case "in-progress":
+        return `<div><div></div></div>`;
+      case "done":
+        return `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="#80beaf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>`;
+      default:
+        return ``;
+    }
+  }
+  containerStyle = import_css3.css`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 32px;
+    padding: 32px 64px;
+    background-color: #fffc;
+    border-radius: 8px;
+    box-shadow: 0 5px 24px -6px #0002;
+    width: 300px;
+    max-width: 90vw;
+    min-height: 200px;
+    position: relative;
+    overflow: hidden;
+    transition: all 250ms ease;
+
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+        border-radius: 1em;
+      }
+      20% {
+        transform: rotate(0deg);
+      }
+      30%,
+      60% {
+        border-radius: 0.25em;
+      }
+      70% {
+        transform: rotate(180deg);
+      }
+      100% {
+        transform: rotate(180deg);
+        border-radius: 1em;
+      }
+    }
+  `;
+  contentStyle = import_css3.css`
+    width: 100%;
+  `;
+  taskListContainerStyle = import_css3.css`
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    width: 100%;
+  `;
+  taskContainerStyle = import_css3.css`
+    display: flex;
+    align-items: center;
+    gap: 1em;
+  `;
+  taskLabelStyle = import_css3.css``;
+  taskStatusStyle = import_css3.css`
+    font-size: 32px;
+    width: 1em;
+    height: 1em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.status-new {
+    }
+
+    &.status-in-progress {
+      border-radius: 50%;
+      box-shadow: inset 0 0 0 1px #3b82f633;
+      position: relative;
+      animation: rotate 1.2s infinite linear;
+      > div {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 0.5em;
+        height: 1em;
+        margin-left: -0.5em;
+        margin-top: -0.5em;
+        overflow: hidden;
+        transform-origin: 0.5em 0.5em;
+        mask-image: linear-gradient(top, #000f, #0000);
+        -webkit-mask-image: -webkit-linear-gradient(top, #000f, #0000);
+
+        > div {
+          width: 1em;
+          height: 1em;
+          border-radius: 50%;
+          box-shadow: inset 0 0 0 1px #3b82f6;
+        }
+      }
+      @keyframes rotate {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    }
+  `;
+};
+
+// src/modal/style.ts
+var import_css4 = require("@emotion/css");
+var containerStyle2 = import_css4.css`
+  display: grid;
+  gap: 2px;
+  padding: 24px;
+  background-color: #fff;
+  border-radius: 0;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  border: 1px solid #f3f4f6;
+  min-height: 200px;
+  position: relative;
+  overflow: hidden;
+  transition: all 250ms ease;
+
+  @media (min-width: 640px) {
+    width: 400px;
+    max-width: 90vw;
+    border-radius: 4px;
+    padding: 32px;
+  }
+`;
+var iconStyle = import_css4.css``;
+var titleStyle = import_css4.css`
+  font-size: 18px;
+  font-weight: 600;
+  color: #1f2937;
+  text-align: center;
+  @media (min-width: 640px) {
+    text-align: left;
+  }
+`;
+var loaderStyle = import_css4.css`
+  font-size: 60px;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px #3b82f633;
+  position: relative;
+
+  animation: none;
+  &[data-state='loading'] {
+    animation: rotate 1s linear infinite;
+  }
+
+  > div {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 0.5em;
+    height: 1em;
+    margin-left: -0.5em;
+    margin-top: -0.5em;
+    overflow: hidden;
+    transform-origin: 0.5em 0.5em;
+    mask-image: linear-gradient(top, #000f, #0000);
+    -webkit-mask-image: -webkit-linear-gradient(top, #000f, #0000);
+
+    > div {
+      width: 1em;
+      height: 1em;
+      border-radius: 50%;
+      box-shadow: inset 0 0 0 1px #3b82f6;
+    }
+  }
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+var progressStyle2 = import_css4.css`
+  position: absolute;
+  bottom: 0px;
+  left: 0;
+  width: 0%;
+  height: 2px;
+  background-color: #2563eb;
+  transition: all 350ms ease;
+`;
+var actionsStyle = import_css4.css`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-end;
+  gap: 8px;
+
+  @media (min-width: 640px) {
+    flex-direction: row;
+  }
+`;
+
+// src/modal/index.ts
+var Modal = class extends Overlay {
+  #title;
+  #html;
+  #label;
+  #progress;
+  #state;
+  _containerElement;
+  _iconElement;
+  _titleElement;
+  _loaderElement;
+  _progressElement;
+  _contentElement;
+  _actionsElement;
+  _okButtonElement;
+  _cancelButtonElement;
+  constructor(props = {}) {
+    super();
+    this.#title = "";
+    this.#html = "";
+    this.#label = props.label ?? "";
+    this.#progress = props.progress ?? null;
+    this.#state = "hidden";
+    const container = document.createElement("div");
+    container.classList.add(containerStyle2);
+    this._containerElement = container;
+    this.root.append(container);
+    const iconElement = document.createElement("div");
+    iconElement.classList.add(iconStyle);
+    this._iconElement = iconElement;
+    container.append(iconElement);
+    const titleElement = document.createElement("div");
+    titleElement.classList.add(titleStyle);
+    this._titleElement = titleElement;
+    container.append(titleElement);
+    const loaderElement = document.createElement("div");
+    loaderElement.innerHTML = "<div><div></div></div>";
+    loaderElement.classList.add(loaderStyle);
+    this._loaderElement = loaderElement;
+    const progressElement = document.createElement("div");
+    progressElement.classList.add(progressStyle2);
+    this._progressElement = progressElement;
+    container.append(progressElement);
+    const contentElement = document.createElement("div");
+    this._contentElement = contentElement;
+    container.append(contentElement);
+    const actionsElement = document.createElement("div");
+    actionsElement.classList.add(actionsStyle);
+    this._actionsElement = actionsElement;
+    container.append(actionsElement);
+    const okButtonElement = document.createElement("button");
+    okButtonElement.type = "button";
+    okButtonElement.textContent = "OK";
+    this._okButtonElement = okButtonElement;
+    actionsElement.append(okButtonElement);
+    const cancelButtonElement = document.createElement("button");
+    cancelButtonElement.type = "button";
+    cancelButtonElement.textContent = "\u30AD\u30E3\u30F3\u30BB\u30EB";
+    this._cancelButtonElement = cancelButtonElement;
+    actionsElement.append(cancelButtonElement);
+    this.render();
+  }
+  alert(params) {
+    const {
+      title = "",
+      text = "",
+      icon = "",
+      disableClose = false,
+      disableEscape = false
+    } = params;
+    this.#title = title;
+    this.#label = text;
+    this.changeState("alert");
+    this.show();
+    return new Promise((resolve) => {
+      this._okButtonElement.addEventListener("click", () => {
+        if (!disableClose) {
+          this.hide();
+        }
+        resolve({
+          isConfirmed: true
+        });
+      });
+      this._cancelButtonElement.addEventListener("click", () => {
+        if (!disableClose) {
+          this.hide();
+        }
+        resolve({
+          isConfirmed: false
+        });
+      });
+      this.root.addEventListener("click", (event) => {
+        if (event.currentTarget === event.target) {
+          if (!disableClose) {
+            this.hide();
+          }
+          resolve({
+            isConfirmed: false
+          });
+        }
+      });
+      this.root.addEventListener("keydown", (event) => {
+        if (event.key === "Escape") {
+          if (!disableEscape) {
+            this.hide();
+          }
+          resolve({
+            isConfirmed: false
+          });
+        }
+      });
+    });
+  }
+  loading() {
+    this._iconElement.append(this._loaderElement);
+    this.changeState("loading");
+    this.show();
+  }
+  hide() {
+    this.#progress = 0;
+    this.#html = "";
+    this.#label = "";
+    this.changeState("hidden");
+    super.hide();
+  }
+  set label(label) {
+    this.#label = label;
+    this.render();
+  }
+  set html(html) {
+    this.#html = html;
+    this.render();
+  }
+  set progress(progress) {
+    this.#progress = progress;
+    this.render();
+  }
+  changeState(state) {
+    this.#state = state;
+    const elements = [
+      this.root,
+      this._actionsElement,
+      this._contentElement,
+      this._iconElement,
+      this._loaderElement,
+      this._progressElement,
+      this._titleElement
+    ];
+    for (const element of elements) {
+      element.dataset.state = state;
+    }
+    this.render();
+  }
+  render() {
+    super.render();
+    this._progressElement.style.width = `${this.#progress}%`;
+    switch (this.#state) {
+      case "loading":
+        break;
+      case "alert":
+        this._iconElement.innerHTML = "";
+        break;
+      case "hidden":
+      default:
+        this._iconElement.innerHTML = "";
+        break;
+    }
+    this._titleElement.textContent = this.#title;
+    if (this.#html) {
+      this._contentElement.innerHTML = this.#html;
+    } else {
+      if (this.#label instanceof Array) {
+        this._contentElement.innerHTML = `<div>${this.#label.join("</div><div>")}</div>`;
+      } else {
+        this._contentElement.textContent = this.#label;
+      }
+    }
+  }
+};
+
+// src/utilities.ts
+var withLoading = (fn, label = "Loading...") => {
+  return async (...args) => {
+    const overlay = new LoadingOverlay({ label });
+    overlay.show();
+    try {
+      return await fn(...args);
+    } finally {
+      overlay.hide();
+    }
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ATTRIBUTE_ANIMATION,
+  LoadingOverlay,
+  Modal,
+  TaskListOverlay,
+  withLoading
+});
+//# sourceMappingURL=index.cjs.map