@konomi-app/ui 2.2.4 → 3.0.0

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/overlay/style.ts","../src/overlay/index.ts","../src/loading-overlay/style.ts","../src/loading-overlay/index.ts","../src/task-list-overlay.ts","../src/modal/style.ts","../src/modal/index.ts","../src/utilities.ts"],"sourcesContent":["export * from './loading-overlay';\r\nexport * from './task-list-overlay';\r\nexport * from './modal';\r\nexport * from './utilities';\r\n","import { css } from '@emotion/css';\r\nimport { ATTRIBUTE_KEY, ATTRIBUTE_SHOWN } from '.';\r\n\r\nexport const getBodyStyle = () => css`\r\n  overflow: visible;\r\n  &[${ATTRIBUTE_KEY}] {\r\n    overflow: hidden;\r\n  }\r\n`;\r\n\r\nexport const getRootStyle = () => css`\r\n  font-family: 'Yu Gothic Medium', '游ゴシック', YuGothic, 'メイリオ', 'Hiragino Kaku Gothic ProN',\r\n    Meiryo, sans-serif;\r\n  color: #356;\r\n  font-size: 14px;\r\n\r\n  overflow: hidden;\r\n  background-color: #fffb;\r\n  backdrop-filter: blur(4px);\r\n  box-sizing: content-box;\r\n\r\n  position: fixed;\r\n  inset: 0;\r\n  width: 100vw;\r\n  height: 100vh;\r\n\r\n  display: grid;\r\n  transition: all 250ms ease;\r\n  z-index: 1000;\r\n  opacity: 0;\r\n  transition: all 250ms ease;\r\n\r\n  place-items: end stretch;\r\n  @media (min-width: 640px) {\r\n    font-size: 16px;\r\n    place-items: center;\r\n  }\r\n\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  &[${ATTRIBUTE_SHOWN}] {\r\n    opacity: 1;\r\n    pointer-events: all;\r\n  }\r\n`;\r\n","import { getBodyStyle, getRootStyle } from './style';\r\n\r\nexport const ATTRIBUTE_KEY = 'data-konomi-ui-overlay';\r\nexport const ATTRIBUTE_SHOWN = 'data-shown';\r\n\r\nexport class Overlay {\r\n  /**\r\n   * オーバーレイをレンダリングするルート要素。\r\n   */\r\n  readonly #root: HTMLDivElement;\r\n  /**\r\n   * オーバーレイをレンダリングするルート要素の`dataset`。\r\n   */\r\n  protected readonly _rootDataset: DOMStringMap;\r\n  /**\r\n   * オーバーレイが表示されているかどうか。\r\n   */\r\n  protected _shown: boolean;\r\n  /**\r\n   * オーバーレイを表示中にページを離れようとした場合にアラートを表示するかどうかを設定します。\r\n   */\r\n  protected _disableBeforeUnload: boolean;\r\n\r\n  public constructor() {\r\n    this._shown = false;\r\n    this._disableBeforeUnload = false;\r\n    this._rootDataset = {};\r\n\r\n    const root = document.createElement('div');\r\n    this.#root = root;\r\n    this.#root.classList.add(getRootStyle());\r\n    document.body.classList.add(getBodyStyle());\r\n    this.#root.setAttribute(ATTRIBUTE_KEY, '');\r\n    document.body.append(root);\r\n  }\r\n\r\n  public show(): void {\r\n    this._shown = true;\r\n    this.#root.setAttribute(ATTRIBUTE_SHOWN, '');\r\n    document.body.setAttribute(ATTRIBUTE_KEY, '');\r\n    window.addEventListener('beforeunload', this.beforeunload);\r\n    this.render();\r\n  }\r\n\r\n  public hide(): void {\r\n    this._shown = false;\r\n    this.#root.removeAttribute(ATTRIBUTE_SHOWN);\r\n    document.body.removeAttribute(ATTRIBUTE_KEY);\r\n    window.removeEventListener('beforeunload', this.beforeunload);\r\n    this.render();\r\n  }\r\n\r\n  protected render(): void {}\r\n\r\n  /** JavaScript中にページを離れようとした場合にアラートを表示します */\r\n  private beforeunload(event: BeforeUnloadEvent): void {\r\n    event.preventDefault();\r\n  }\r\n\r\n  protected get root(): HTMLDivElement {\r\n    return this.#root;\r\n  }\r\n\r\n  /** @deprecated このメソッドは非推奨です。代わりに`show`メソッドを使用してください。 */\r\n  public start(): void {\r\n    this.show();\r\n  }\r\n  /** @deprecated このメソッドは非推奨です。代わりに`hide`メソッドを使用してください。 */\r\n  public stop(): void {\r\n    this.hide();\r\n  }\r\n}\r\n","import { css } from '@emotion/css';\r\nimport { ATTRIBUTE_ANIMATION } from '.';\r\n\r\nexport const containerStyle = css`\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 32px;\r\n  padding: 24px;\r\n  background-color: #fff;\r\n  border-radius: 0;\r\n  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\r\n  border: 1px solid #f3f4f6;\r\n  min-height: 200px;\r\n  position: relative;\r\n  overflow: hidden;\r\n  transition: all 250ms ease;\r\n\r\n  @media (min-width: 640px) {\r\n    width: 400px;\r\n    max-width: 90vw;\r\n    border-radius: 4px;\r\n    padding: 32px;\r\n  }\r\n`;\r\n\r\nexport const getLoaderStyle = () => css`\r\n  font-size: 60px;\r\n  width: 1em;\r\n  height: 1em;\r\n  border-radius: 50%;\r\n  box-shadow: inset 0 0 0 1px #3b82f633;\r\n  position: relative;\r\n\r\n  animation: none;\r\n  &[${ATTRIBUTE_ANIMATION}] {\r\n    animation: rotate 1.2s infinite linear;\r\n  }\r\n\r\n  > div {\r\n    position: absolute;\r\n    left: 50%;\r\n    top: 50%;\r\n    width: 0.5em;\r\n    height: 1em;\r\n    margin-left: -0.5em;\r\n    margin-top: -0.5em;\r\n    overflow: hidden;\r\n    transform-origin: 0.5em 0.5em;\r\n    mask-image: linear-gradient(top, #000f, #0000);\r\n    -webkit-mask-image: -webkit-linear-gradient(top, #000f, #0000);\r\n\r\n    > div {\r\n      width: 1em;\r\n      height: 1em;\r\n      border-radius: 50%;\r\n      box-shadow: inset 0 0 0 1px #3b82f6;\r\n    }\r\n  }\r\n  @keyframes rotate {\r\n    0% {\r\n      transform: rotate(0deg);\r\n    }\r\n    100% {\r\n      transform: rotate(360deg);\r\n    }\r\n  }\r\n`;\r\n\r\nexport const progressStyle = css`\r\n  position: absolute;\r\n  bottom: 0px;\r\n  left: 0;\r\n  width: 0%;\r\n  height: 2px;\r\n  background-color: #2563eb;\r\n  transition: all 350ms ease;\r\n`;\r\n","import { Overlay } from '../overlay';\r\nimport { containerStyle, getLoaderStyle, progressStyle } from './style';\r\n\r\ntype Label = string | string[];\r\ntype ConstructorProps = Readonly<Partial<{ label: Label; progress: number }>>;\r\n\r\nexport const ATTRIBUTE_ANIMATION = 'data-animation';\r\n\r\nexport class LoadingOverlay extends Overlay {\r\n  #label: Label;\r\n  #html: string;\r\n  #progress: number | null;\r\n\r\n  protected readonly _loaderElement: HTMLDivElement;\r\n  protected readonly _progressElement: HTMLDivElement;\r\n  protected readonly _contentElement: HTMLDivElement;\r\n\r\n  public constructor(props: ConstructorProps = {}) {\r\n    super();\r\n\r\n    this.#label = props.label ?? '';\r\n    this.#html = '';\r\n    this.#progress = props.progress ?? null;\r\n\r\n    const container = document.createElement('div');\r\n    container.classList.add(containerStyle);\r\n    this.root.append(container);\r\n\r\n    const loaderElement = document.createElement('div');\r\n    loaderElement.innerHTML = '<div><div></div></div>';\r\n    loaderElement.classList.add(getLoaderStyle());\r\n    this._loaderElement = loaderElement;\r\n    container.append(loaderElement);\r\n\r\n    const progressElement = document.createElement('div');\r\n    progressElement.classList.add(progressStyle);\r\n    this._progressElement = progressElement;\r\n    container.append(progressElement);\r\n\r\n    const contentElement = document.createElement('div');\r\n    this._contentElement = contentElement;\r\n    container.append(contentElement);\r\n\r\n    this.render();\r\n  }\r\n\r\n  override show(): void {\r\n    super.show();\r\n    this._loaderElement.setAttribute(ATTRIBUTE_ANIMATION, '');\r\n  }\r\n\r\n  override hide(): void {\r\n    super.hide();\r\n    this._loaderElement.removeAttribute(ATTRIBUTE_ANIMATION);\r\n    this.#progress = 0;\r\n    this.#html = '';\r\n    this.#label = '';\r\n  }\r\n\r\n  public set label(label: Label) {\r\n    this.#label = label;\r\n    this.render();\r\n  }\r\n\r\n  public set html(html: string) {\r\n    this.#html = html;\r\n    this.render();\r\n  }\r\n\r\n  /**\r\n   * 進捗状況を設定します。\r\n   * @param percent 進捗のパーセンテージ(0-100)\r\n   */\r\n  public set progress(percent: number) {\r\n    this.#progress = percent;\r\n    this.render();\r\n  }\r\n\r\n  override render(): void {\r\n    super.render();\r\n\r\n    this._progressElement.style.width = `${this.#progress}%`;\r\n\r\n    if (this.#html) {\r\n      this._contentElement.innerHTML = this.#html;\r\n    } else {\r\n      if (this.#label instanceof Array) {\r\n        this._contentElement.innerHTML = `<div>${this.#label.join('</div><div>')}</div>`;\r\n      } else {\r\n        this._contentElement.innerText = this.#label;\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { css } from '@emotion/css';\r\nimport { Overlay } from './overlay';\r\n\r\ntype Label = string | string[];\r\ntype TaskStatus = 'new' | 'in-progress' | 'done' | 'error';\r\ntype Task = {\r\n  key: string;\r\n  label: Label;\r\n  status: TaskStatus;\r\n};\r\n\r\ntype ConstructorProps = Readonly<Partial<{ taskList: Task[] }>>;\r\n\r\nexport class TaskListOverlay extends Overlay {\r\n  #taskList: Task[];\r\n\r\n  protected readonly _contentElement: HTMLDivElement;\r\n\r\n  public constructor(props: ConstructorProps = {}) {\r\n    super();\r\n\r\n    this.#taskList = props.taskList ?? [];\r\n\r\n    const container = document.createElement('div');\r\n    container.classList.add(this.containerStyle);\r\n    this.root.append(container);\r\n\r\n    const contentElement = document.createElement('div');\r\n    this._contentElement = contentElement;\r\n    contentElement.classList.add(this.contentStyle);\r\n    container.append(contentElement);\r\n\r\n    this.render();\r\n  }\r\n\r\n  override hide(): void {\r\n    this.#taskList = [];\r\n    super.hide();\r\n  }\r\n\r\n  public done(key: string): void {\r\n    const task = this.#taskList.find((t) => t.key === key);\r\n    if (task) {\r\n      task.status = 'done';\r\n      this.render();\r\n    }\r\n  }\r\n\r\n  public error(key: string): void {\r\n    const task = this.#taskList.find((t) => t.key === key);\r\n    if (task) {\r\n      task.status = 'error';\r\n      this.render();\r\n    }\r\n  }\r\n\r\n  public inProgress(key: string): void {\r\n    const task = this.#taskList.find((t) => t.key === key);\r\n    if (task) {\r\n      task.status = 'in-progress';\r\n      this.render();\r\n    }\r\n  }\r\n\r\n  public addTask(...tasks: { key: string; label: Label }[]): void {\r\n    this.#taskList.push(...tasks.map<Task>(({ key, label }) => ({ key, label, status: 'new' })));\r\n    this.render();\r\n  }\r\n\r\n  override render(): void {\r\n    super.render();\r\n\r\n    this._contentElement.innerHTML = `\r\n      <div class=\"${this.taskListContainerStyle}\">\r\n        ${this.#taskList.map((task) => this.renderTask(task)).join('')}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private renderTask(task: Task): string {\r\n    const label = Array.isArray(task.label) ? task.label.join(' ') : task.label;\r\n    const status = task.status;\r\n\r\n    return `\r\n      <div class=\"${this.taskContainerStyle}\">\r\n        <div class=\"${this.taskStatusStyle} status-${status}\">${this.getTaskStatusElement(\r\n      task.status\r\n    )}</div>\r\n        <div class=\"${this.taskLabelStyle}\">${label}</div>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private getTaskStatusElement(status: TaskStatus): string {\r\n    switch (status) {\r\n      case 'new':\r\n        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>`;\r\n      case 'in-progress':\r\n        return `<div><div></div></div>`;\r\n      case 'done':\r\n        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>`;\r\n      default:\r\n        return ``;\r\n    }\r\n  }\r\n\r\n  private containerStyle = css`\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 32px;\r\n    padding: 32px 64px;\r\n    background-color: #fffc;\r\n    border-radius: 8px;\r\n    box-shadow: 0 5px 24px -6px #0002;\r\n    width: 300px;\r\n    max-width: 90vw;\r\n    min-height: 200px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    transition: all 250ms ease;\r\n\r\n    @keyframes spin {\r\n      0% {\r\n        transform: rotate(0deg);\r\n        border-radius: 1em;\r\n      }\r\n      20% {\r\n        transform: rotate(0deg);\r\n      }\r\n      30%,\r\n      60% {\r\n        border-radius: 0.25em;\r\n      }\r\n      70% {\r\n        transform: rotate(180deg);\r\n      }\r\n      100% {\r\n        transform: rotate(180deg);\r\n        border-radius: 1em;\r\n      }\r\n    }\r\n  `;\r\n\r\n  private contentStyle = css`\r\n    width: 100%;\r\n  `;\r\n\r\n  private taskListContainerStyle = css`\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 1em;\r\n    width: 100%;\r\n  `;\r\n\r\n  private taskContainerStyle = css`\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 1em;\r\n  `;\r\n\r\n  private taskLabelStyle = css``;\r\n\r\n  private taskStatusStyle = css`\r\n    font-size: 32px;\r\n    width: 1em;\r\n    height: 1em;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n\r\n    &.status-new {\r\n    }\r\n\r\n    &.status-in-progress {\r\n      border-radius: 50%;\r\n      box-shadow: inset 0 0 0 1px #3b82f633;\r\n      position: relative;\r\n      animation: rotate 1.2s infinite linear;\r\n      > div {\r\n        position: absolute;\r\n        left: 50%;\r\n        top: 50%;\r\n        width: 0.5em;\r\n        height: 1em;\r\n        margin-left: -0.5em;\r\n        margin-top: -0.5em;\r\n        overflow: hidden;\r\n        transform-origin: 0.5em 0.5em;\r\n        mask-image: linear-gradient(top, #000f, #0000);\r\n        -webkit-mask-image: -webkit-linear-gradient(top, #000f, #0000);\r\n\r\n        > div {\r\n          width: 1em;\r\n          height: 1em;\r\n          border-radius: 50%;\r\n          box-shadow: inset 0 0 0 1px #3b82f6;\r\n        }\r\n      }\r\n      @keyframes rotate {\r\n        0% {\r\n          transform: rotate(0deg);\r\n        }\r\n        100% {\r\n          transform: rotate(360deg);\r\n        }\r\n      }\r\n    }\r\n  `;\r\n}\r\n","import { css } from '@emotion/css';\r\n\r\nexport const containerStyle = css`\r\n  display: grid;\r\n  gap: 2px;\r\n  padding: 24px;\r\n  background-color: #fff;\r\n  border-radius: 0;\r\n  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\r\n  border: 1px solid #f3f4f6;\r\n  min-height: 200px;\r\n  position: relative;\r\n  overflow: hidden;\r\n  transition: all 250ms ease;\r\n\r\n  @media (min-width: 640px) {\r\n    width: 400px;\r\n    max-width: 90vw;\r\n    border-radius: 4px;\r\n    padding: 32px;\r\n  }\r\n`;\r\n\r\nexport const iconStyle = css``;\r\n\r\nexport const titleStyle = css`\r\n  font-size: 18px;\r\n  font-weight: 600;\r\n  color: #1f2937;\r\n  text-align: center;\r\n  @media (min-width: 640px) {\r\n    text-align: left;\r\n  }\r\n`;\r\n\r\nexport const loaderStyle = css`\r\n  font-size: 60px;\r\n  width: 1em;\r\n  height: 1em;\r\n  border-radius: 50%;\r\n  box-shadow: inset 0 0 0 1px #3b82f633;\r\n  position: relative;\r\n\r\n  animation: none;\r\n  &[data-state='loading'] {\r\n    animation: rotate 1s linear infinite;\r\n  }\r\n\r\n  > div {\r\n    position: absolute;\r\n    left: 50%;\r\n    top: 50%;\r\n    width: 0.5em;\r\n    height: 1em;\r\n    margin-left: -0.5em;\r\n    margin-top: -0.5em;\r\n    overflow: hidden;\r\n    transform-origin: 0.5em 0.5em;\r\n    mask-image: linear-gradient(top, #000f, #0000);\r\n    -webkit-mask-image: -webkit-linear-gradient(top, #000f, #0000);\r\n\r\n    > div {\r\n      width: 1em;\r\n      height: 1em;\r\n      border-radius: 50%;\r\n      box-shadow: inset 0 0 0 1px #3b82f6;\r\n    }\r\n  }\r\n  @keyframes rotate {\r\n    0% {\r\n      transform: rotate(0deg);\r\n    }\r\n    100% {\r\n      transform: rotate(360deg);\r\n    }\r\n  }\r\n`;\r\n\r\nexport const progressStyle = css`\r\n  position: absolute;\r\n  bottom: 0px;\r\n  left: 0;\r\n  width: 0%;\r\n  height: 2px;\r\n  background-color: #2563eb;\r\n  transition: all 350ms ease;\r\n`;\r\n\r\nexport const actionsStyle = css`\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: flex-end;\r\n  align-items: flex-end;\r\n  gap: 8px;\r\n\r\n  @media (min-width: 640px) {\r\n    flex-direction: row;\r\n  }\r\n`;\r\n","import { Overlay } from '../overlay';\r\nimport {\r\n  actionsStyle,\r\n  containerStyle,\r\n  iconStyle,\r\n  loaderStyle,\r\n  progressStyle,\r\n  titleStyle,\r\n} from './style';\r\n\r\ntype Label = string | string[];\r\ntype ConstructorProps = Readonly<Partial<{ label: Label; progress: number }>>;\r\n\r\nexport class Modal extends Overlay {\r\n  #title: string;\r\n  #html: string;\r\n  #label: Label;\r\n  #progress: number | null;\r\n  #state: 'loading' | 'alert' | 'hidden';\r\n\r\n  protected readonly _containerElement: HTMLDivElement;\r\n  protected readonly _iconElement: HTMLDivElement;\r\n  protected readonly _titleElement: HTMLDivElement;\r\n  protected readonly _loaderElement: HTMLDivElement;\r\n  protected readonly _progressElement: HTMLDivElement;\r\n  protected readonly _contentElement: HTMLDivElement;\r\n  protected readonly _actionsElement: HTMLDivElement;\r\n  protected readonly _okButtonElement: HTMLButtonElement;\r\n  protected readonly _cancelButtonElement: HTMLButtonElement;\r\n\r\n  public constructor(props: ConstructorProps = {}) {\r\n    super();\r\n\r\n    this.#title = '';\r\n    this.#html = '';\r\n    this.#label = props.label ?? '';\r\n    this.#progress = props.progress ?? null;\r\n    this.#state = 'hidden';\r\n\r\n    const container = document.createElement('div');\r\n    container.classList.add(containerStyle);\r\n    this._containerElement = container;\r\n    this.root.append(container);\r\n\r\n    const iconElement = document.createElement('div');\r\n    iconElement.classList.add(iconStyle);\r\n    this._iconElement = iconElement;\r\n    container.append(iconElement);\r\n\r\n    const titleElement = document.createElement('div');\r\n    titleElement.classList.add(titleStyle);\r\n    this._titleElement = titleElement;\r\n    container.append(titleElement);\r\n\r\n    const loaderElement = document.createElement('div');\r\n    loaderElement.innerHTML = '<div><div></div></div>';\r\n    loaderElement.classList.add(loaderStyle);\r\n    this._loaderElement = loaderElement;\r\n\r\n    const progressElement = document.createElement('div');\r\n    progressElement.classList.add(progressStyle);\r\n    this._progressElement = progressElement;\r\n    container.append(progressElement);\r\n\r\n    const contentElement = document.createElement('div');\r\n    this._contentElement = contentElement;\r\n    container.append(contentElement);\r\n\r\n    const actionsElement = document.createElement('div');\r\n    actionsElement.classList.add(actionsStyle);\r\n    this._actionsElement = actionsElement;\r\n    container.append(actionsElement);\r\n\r\n    const okButtonElement = document.createElement('button');\r\n    okButtonElement.type = 'button';\r\n    okButtonElement.textContent = 'OK';\r\n    this._okButtonElement = okButtonElement;\r\n    actionsElement.append(okButtonElement);\r\n\r\n    const cancelButtonElement = document.createElement('button');\r\n    cancelButtonElement.type = 'button';\r\n    cancelButtonElement.textContent = 'キャンセル';\r\n    this._cancelButtonElement = cancelButtonElement;\r\n    actionsElement.append(cancelButtonElement);\r\n\r\n    this.render();\r\n  }\r\n\r\n  public alert(params: {\r\n    title?: string;\r\n    text?: string;\r\n    icon?: string;\r\n    disableClose?: boolean;\r\n    disableEscape?: boolean;\r\n  }): Promise<any> {\r\n    const {\r\n      title = '',\r\n      text = '',\r\n      icon = '',\r\n      disableClose = false,\r\n      disableEscape = false,\r\n    } = params;\r\n    this.#title = title;\r\n    this.#label = text;\r\n\r\n    this.changeState('alert');\r\n    this.show();\r\n\r\n    return new Promise((resolve) => {\r\n      this._okButtonElement.addEventListener('click', () => {\r\n        if (!disableClose) {\r\n          this.hide();\r\n        }\r\n        resolve({\r\n          isConfirmed: true,\r\n        });\r\n      });\r\n\r\n      this._cancelButtonElement.addEventListener('click', () => {\r\n        if (!disableClose) {\r\n          this.hide();\r\n        }\r\n        resolve({\r\n          isConfirmed: false,\r\n        });\r\n      });\r\n\r\n      this.root.addEventListener('click', (event) => {\r\n        if (event.currentTarget === event.target) {\r\n          if (!disableClose) {\r\n            this.hide();\r\n          }\r\n          resolve({\r\n            isConfirmed: false,\r\n          });\r\n        }\r\n      });\r\n\r\n      this.root.addEventListener('keydown', (event) => {\r\n        if (event.key === 'Escape') {\r\n          if (!disableEscape) {\r\n            this.hide();\r\n          }\r\n          resolve({\r\n            isConfirmed: false,\r\n          });\r\n        }\r\n      });\r\n    });\r\n  }\r\n\r\n  public loading(): void {\r\n    this._iconElement.append(this._loaderElement);\r\n    this.changeState('loading');\r\n    this.show();\r\n  }\r\n\r\n  override hide(): void {\r\n    this.#progress = 0;\r\n    this.#html = '';\r\n    this.#label = '';\r\n    this.changeState('hidden');\r\n    super.hide();\r\n  }\r\n\r\n  public set label(label: Label) {\r\n    this.#label = label;\r\n    this.render();\r\n  }\r\n\r\n  public set html(html: string) {\r\n    this.#html = html;\r\n    this.render();\r\n  }\r\n\r\n  public set progress(progress: number) {\r\n    this.#progress = progress;\r\n    this.render();\r\n  }\r\n\r\n  private changeState(state: 'loading' | 'alert' | 'hidden'): void {\r\n    this.#state = state;\r\n    const elements = [\r\n      this.root,\r\n      this._actionsElement,\r\n      this._contentElement,\r\n      this._iconElement,\r\n      this._loaderElement,\r\n      this._progressElement,\r\n      this._titleElement,\r\n    ];\r\n    for (const element of elements) {\r\n      element.dataset.state = state;\r\n    }\r\n\r\n    this.render();\r\n  }\r\n\r\n  override render(): void {\r\n    super.render();\r\n\r\n    this._progressElement.style.width = `${this.#progress}%`;\r\n\r\n    switch (this.#state) {\r\n      case 'loading':\r\n        break;\r\n      case 'alert':\r\n        this._iconElement.innerHTML = '';\r\n        break;\r\n      case 'hidden':\r\n      default:\r\n        this._iconElement.innerHTML = '';\r\n        break;\r\n    }\r\n\r\n    this._titleElement.textContent = this.#title;\r\n    if (this.#html) {\r\n      this._contentElement.innerHTML = this.#html;\r\n    } else {\r\n      if (this.#label instanceof Array) {\r\n        this._contentElement.innerHTML = `<div>${this.#label.join('</div><div>')}</div>`;\r\n      } else {\r\n        this._contentElement.textContent = this.#label;\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { LoadingOverlay } from './loading-overlay';\n\n/**\n * 指定された関数をラップし、実行中にローディングオーバーレイを表示する高階関数。\n *\n * @template T - 任意の引数を取り、任意の値を返す関数の型。\n * @param {T} fn - 実行する関数。\n * @param {string} [label='Loading...'] - ローディングオーバーレイに表示するラベル。デフォルトは 'Loading...'。\n * @returns {(...args: Parameters<T>) => Promise<ReturnType<T>>} - ラップされた関数。実行中にローディングオーバーレイを表示し、完了後に非表示にする。\n */\nexport const withLoading = <T extends (...args: any[]) => any>(\n  fn: T,\n  label: string = 'Loading...'\n) => {\n  return async (...args: Parameters<T>): Promise<ReturnType<T>> => {\n    const overlay = new LoadingOverlay({ label });\n    overlay.show();\n    try {\n      return await fn(...args);\n    } finally {\n      overlay.hide();\n    }\n  };\n};\n"],"mappings":"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","names":["import_css","import_css","import_css","containerStyle","progressStyle","containerStyle","progressStyle"]}

package/dist/index.d.cts

@@ -0,0 +1,128 @@
+declare class Overlay {
+    #private;
+    /**
+     * オーバーレイをレンダリングするルート要素の`dataset`。
+     */
+    protected readonly _rootDataset: DOMStringMap;
+    /**
+     * オーバーレイが表示されているかどうか。
+     */
+    protected _shown: boolean;
+    /**
+     * オーバーレイを表示中にページを離れようとした場合にアラートを表示するかどうかを設定します。
+     */
+    protected _disableBeforeUnload: boolean;
+    constructor();
+    show(): void;
+    hide(): void;
+    protected render(): void;
+    /** JavaScript中にページを離れようとした場合にアラートを表示します */
+    private beforeunload;
+    protected get root(): HTMLDivElement;
+    /** @deprecated このメソッドは非推奨です。代わりに`show`メソッドを使用してください。 */
+    start(): void;
+    /** @deprecated このメソッドは非推奨です。代わりに`hide`メソッドを使用してください。 */
+    stop(): void;
+}
+
+type Label$2 = string | string[];
+type ConstructorProps$2 = Readonly<Partial<{
+    label: Label$2;
+    progress: number;
+}>>;
+declare const ATTRIBUTE_ANIMATION = "data-animation";
+declare class LoadingOverlay extends Overlay {
+    #private;
+    protected readonly _loaderElement: HTMLDivElement;
+    protected readonly _progressElement: HTMLDivElement;
+    protected readonly _contentElement: HTMLDivElement;
+    constructor(props?: ConstructorProps$2);
+    show(): void;
+    hide(): void;
+    set label(label: Label$2);
+    set html(html: string);
+    /**
+     * 進捗状況を設定します。
+     * @param percent 進捗のパーセンテージ(0-100)
+     */
+    set progress(percent: number);
+    render(): void;
+}
+
+type Label$1 = string | string[];
+type TaskStatus = 'new' | 'in-progress' | 'done' | 'error';
+type Task = {
+    key: string;
+    label: Label$1;
+    status: TaskStatus;
+};
+type ConstructorProps$1 = Readonly<Partial<{
+    taskList: Task[];
+}>>;
+declare class TaskListOverlay extends Overlay {
+    #private;
+    protected readonly _contentElement: HTMLDivElement;
+    constructor(props?: ConstructorProps$1);
+    hide(): void;
+    done(key: string): void;
+    error(key: string): void;
+    inProgress(key: string): void;
+    addTask(...tasks: {
+        key: string;
+        label: Label$1;
+    }[]): void;
+    render(): void;
+    private renderTask;
+    private getTaskStatusElement;
+    private containerStyle;
+    private contentStyle;
+    private taskListContainerStyle;
+    private taskContainerStyle;
+    private taskLabelStyle;
+    private taskStatusStyle;
+}
+
+type Label = string | string[];
+type ConstructorProps = Readonly<Partial<{
+    label: Label;
+    progress: number;
+}>>;
+declare class Modal extends Overlay {
+    #private;
+    protected readonly _containerElement: HTMLDivElement;
+    protected readonly _iconElement: HTMLDivElement;
+    protected readonly _titleElement: HTMLDivElement;
+    protected readonly _loaderElement: HTMLDivElement;
+    protected readonly _progressElement: HTMLDivElement;
+    protected readonly _contentElement: HTMLDivElement;
+    protected readonly _actionsElement: HTMLDivElement;
+    protected readonly _okButtonElement: HTMLButtonElement;
+    protected readonly _cancelButtonElement: HTMLButtonElement;
+    constructor(props?: ConstructorProps);
+    alert(params: {
+        title?: string;
+        text?: string;
+        icon?: string;
+        disableClose?: boolean;
+        disableEscape?: boolean;
+    }): Promise<any>;
+    loading(): void;
+    hide(): void;
+    set label(label: Label);
+    set html(html: string);
+    set progress(progress: number);
+    private changeState;
+    render(): void;
+}
+
+/**
+ * 指定された関数をラップし、実行中にローディングオーバーレイを表示する高階関数。
+ *
+ * @template T - 任意の引数を取り、任意の値を返す関数の型。
+ * @param {T} fn - 実行する関数。
+ * @param {string} [label='Loading...'] - ローディングオーバーレイに表示するラベル。デフォルトは 'Loading...'。
+ * @returns {(...args: Parameters<T>) => Promise<ReturnType<T>>} - ラップされた関数。実行中にローディングオーバーレイを表示し、完了後に非表示にする。
+ */
+declare const withLoading: <T extends (...args: any[]) => any>(fn: T, label?: string) => (...args: Parameters<T>) => Promise<ReturnType<T>>;
+
+export { ATTRIBUTE_ANIMATION, LoadingOverlay, Modal, TaskListOverlay, withLoading };

package/dist/index.d.ts

@@ -1,3 +1,128 @@
-export * from './loading-overlay';
-export * from './task-list-overlay';
-export * from './modal';
+declare class Overlay {
+    #private;
+    /**
+     * オーバーレイをレンダリングするルート要素の`dataset`。
+     */
+    protected readonly _rootDataset: DOMStringMap;
+    /**
+     * オーバーレイが表示されているかどうか。
+     */
+    protected _shown: boolean;
+    /**
+     * オーバーレイを表示中にページを離れようとした場合にアラートを表示するかどうかを設定します。
+     */
+    protected _disableBeforeUnload: boolean;
+    constructor();
+    show(): void;
+    hide(): void;
+    protected render(): void;
+    /** JavaScript中にページを離れようとした場合にアラートを表示します */
+    private beforeunload;
+    protected get root(): HTMLDivElement;
+    /** @deprecated このメソッドは非推奨です。代わりに`show`メソッドを使用してください。 */
+    start(): void;
+    /** @deprecated このメソッドは非推奨です。代わりに`hide`メソッドを使用してください。 */
+    stop(): void;
+}
+
+type Label$2 = string | string[];
+type ConstructorProps$2 = Readonly<Partial<{
+    label: Label$2;
+    progress: number;
+}>>;
+declare const ATTRIBUTE_ANIMATION = "data-animation";
+declare class LoadingOverlay extends Overlay {
+    #private;
+    protected readonly _loaderElement: HTMLDivElement;
+    protected readonly _progressElement: HTMLDivElement;
+    protected readonly _contentElement: HTMLDivElement;
+    constructor(props?: ConstructorProps$2);
+    show(): void;
+    hide(): void;
+    set label(label: Label$2);
+    set html(html: string);
+    /**
+     * 進捗状況を設定します。
+     * @param percent 進捗のパーセンテージ(0-100)
+     */
+    set progress(percent: number);
+    render(): void;
+}
+
+type Label$1 = string | string[];
+type TaskStatus = 'new' | 'in-progress' | 'done' | 'error';
+type Task = {
+    key: string;
+    label: Label$1;
+    status: TaskStatus;
+};
+type ConstructorProps$1 = Readonly<Partial<{
+    taskList: Task[];
+}>>;
+declare class TaskListOverlay extends Overlay {
+    #private;
+    protected readonly _contentElement: HTMLDivElement;
+    constructor(props?: ConstructorProps$1);
+    hide(): void;
+    done(key: string): void;
+    error(key: string): void;
+    inProgress(key: string): void;
+    addTask(...tasks: {
+        key: string;
+        label: Label$1;
+    }[]): void;
+    render(): void;
+    private renderTask;
+    private getTaskStatusElement;
+    private containerStyle;
+    private contentStyle;
+    private taskListContainerStyle;
+    private taskContainerStyle;
+    private taskLabelStyle;
+    private taskStatusStyle;
+}
+
+type Label = string | string[];
+type ConstructorProps = Readonly<Partial<{
+    label: Label;
+    progress: number;
+}>>;
+declare class Modal extends Overlay {
+    #private;
+    protected readonly _containerElement: HTMLDivElement;
+    protected readonly _iconElement: HTMLDivElement;
+    protected readonly _titleElement: HTMLDivElement;
+    protected readonly _loaderElement: HTMLDivElement;
+    protected readonly _progressElement: HTMLDivElement;
+    protected readonly _contentElement: HTMLDivElement;
+    protected readonly _actionsElement: HTMLDivElement;
+    protected readonly _okButtonElement: HTMLButtonElement;
+    protected readonly _cancelButtonElement: HTMLButtonElement;
+    constructor(props?: ConstructorProps);
+    alert(params: {
+        title?: string;
+        text?: string;
+        icon?: string;
+        disableClose?: boolean;
+        disableEscape?: boolean;
+    }): Promise<any>;
+    loading(): void;
+    hide(): void;
+    set label(label: Label);
+    set html(html: string);
+    set progress(progress: number);
+    private changeState;
+    render(): void;
+}
+
+/**
+ * 指定された関数をラップし、実行中にローディングオーバーレイを表示する高階関数。
+ *
+ * @template T - 任意の引数を取り、任意の値を返す関数の型。
+ * @param {T} fn - 実行する関数。
+ * @param {string} [label='Loading...'] - ローディングオーバーレイに表示するラベル。デフォルトは 'Loading...'。
+ * @returns {(...args: Parameters<T>) => Promise<ReturnType<T>>} - ラップされた関数。実行中にローディングオーバーレイを表示し、完了後に非表示にする。
+ */
+declare const withLoading: <T extends (...args: any[]) => any>(fn: T, label?: string) => (...args: Parameters<T>) => Promise<ReturnType<T>>;
+
+export { ATTRIBUTE_ANIMATION, LoadingOverlay, Modal, TaskListOverlay, withLoading };