@inglorious/ui 9.9.0 → 9.10.0

package/src/feedback/confirm-dialog/style.css

@@ -0,0 +1,16 @@
+.iw-confirm-dialog-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--iw-space-2);
+  width: 100%;
+
+  > * {
+    flex: 1;
+  }
+}
+
+@media (min-width: 48rem) {
+  .iw-confirm-dialog-actions {
+    flex-direction: row;
+  }
+}

package/src/feedback/confirm-dialog/template.js

@@ -0,0 +1,70 @@
+/**
+ * @typedef {import('../../../types/feedback/confirm-dialog').ConfirmDialogProps} ConfirmDialogProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { html } from "@inglorious/web"
+
+import { Button } from "../../controls/button/index.js"
+import { Dialog } from "../dialog/index.js"
+
+/**
+ * Renders a sheet asking to confirm an action, with the confirm button first.
+ * While `isBusy` it cannot be dismissed, and the confirm button shows
+ * `busyLabel`.
+ * @param {ConfirmDialogProps} props
+ * @returns {TemplateResult}
+ */
+export function render(props) {
+  const {
+    id,
+    isOpen = false,
+    message,
+    children,
+    confirmLabel,
+    busyLabel = confirmLabel,
+    cancelLabel = "Cancel",
+    closeLabel,
+    tone = "danger",
+    isBusy = false,
+    isDisabled = false,
+    className = "",
+    onConfirm,
+    onCancel,
+  } = props
+
+  const isDanger = tone === "danger"
+
+  return Dialog.render({
+    id,
+    isOpen,
+    variant: "sheet",
+    size: "sm",
+    description: message,
+    children,
+    className: ["iw-confirm-dialog", className].filter(Boolean).join(" "),
+    closeLabel,
+    actions: html`<div class="iw-confirm-dialog-actions">
+      ${Button.render({
+        children: isBusy ? busyLabel : confirmLabel,
+        color: isDanger ? "error" : "primary",
+        variant: isDanger ? "outline" : "default",
+        shape: "pill",
+        size: "md",
+        isDisabled: isBusy || isDisabled,
+        onClick: () => {
+          if (!isBusy && !isDisabled) onConfirm?.()
+        },
+      })}
+      ${Button.render({
+        children: cancelLabel,
+        variant: "outline",
+        shape: "pill",
+        size: "md",
+        isDisabled: isBusy,
+        onClick: onCancel,
+      })}
+    </div>`,
+    onClose: isBusy ? undefined : onCancel,
+  })
+}

package/src/feedback/crop-dialog/index.js

@@ -0,0 +1,3 @@
+import * as renderers from "./template.js"
+
+export const CropDialog = { ...renderers }

package/src/feedback/crop-dialog/style.css

@@ -0,0 +1,43 @@
+.iw-dialog.iw-crop-dialog {
+  width: min(48rem, calc(100vw - 2 * var(--iw-space-4)));
+  min-width: 0;
+  max-width: none;
+  max-height: calc(
+    100dvh - 2 * var(--iw-space-4) - var(--safe-area-top, 0px) -
+      var(--safe-area-bottom, 0px)
+  );
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.iw-crop-dialog-viewport {
+  width: 100%;
+  --iw-image-cropper-max-height: 55dvh;
+}
+
+@media (max-height: 32rem) {
+  .iw-crop-dialog-viewport {
+    --iw-image-cropper-max-height: 35dvh;
+  }
+}
+
+.iw-crop-dialog-error {
+  margin: var(--iw-space-3) 0 0;
+}
+
+.iw-crop-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--iw-space-2);
+  width: 100%;
+
+  .iw-button {
+    flex: 0 1 auto;
+    min-width: 0;
+    padding-inline: var(--iw-space-3);
+    font-size: var(--iw-font-size-sm);
+    white-space: nowrap;
+  }
+}

package/src/feedback/crop-dialog/template.js

@@ -0,0 +1,82 @@
+/**
+ * @typedef {import('../../../types/feedback/crop-dialog').CropDialogProps} CropDialogProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ * @typedef {import('@inglorious/web').Api} Api
+ */
+
+import { html } from "@inglorious/web"
+import { when } from "@inglorious/web/directives/when"
+
+import { Button } from "../../controls/button/index.js"
+import { Alert } from "../alert/index.js"
+import { Dialog } from "../dialog/index.js"
+
+/**
+ * Renders an ImageCropper entity in a dialog, with cancel and apply buttons.
+ * Apply stays disabled until the image has loaded, and passes the cropper's
+ * `rect`.
+ * @param {CropDialogProps} props
+ * @param {Api} api
+ * @returns {TemplateResult}
+ */
+export function render(props, api) {
+  const {
+    id,
+    isOpen = false,
+    cropperId,
+    title,
+    description,
+    applyLabel = "Apply",
+    savingLabel = "Saving…",
+    cancelLabel = "Cancel",
+    closeLabel,
+    loadErrorText = "The image could not be loaded.",
+    error,
+    isSaving = false,
+    className = "",
+    onCancel,
+    onApply,
+  } = props
+
+  const cropper = api.getEntity(cropperId)
+  const isLoaded = Boolean(cropper?.naturalWidth)
+  const shownError = error || (cropper?.hasError ? loadErrorText : null)
+
+  return Dialog.render({
+    id,
+    isOpen,
+    title,
+    description,
+    closeLabel,
+    className: ["iw-crop-dialog", className].filter(Boolean).join(" "),
+    onClose: onCancel,
+    children: html`
+      <div class="iw-crop-dialog-viewport">${api.render(cropperId)}</div>
+      ${when(shownError, () =>
+        Alert.render({
+          severity: "error",
+          className: "iw-crop-dialog-error",
+          children: shownError,
+        }),
+      )}
+    `,
+    actions: html`<div class="iw-crop-dialog-actions">
+      ${Button.render({
+        children: cancelLabel,
+        variant: "ghost",
+        shape: "pill",
+        size: "sm",
+        isDisabled: isSaving,
+        onClick: onCancel,
+      })}
+      ${Button.render({
+        children: isSaving ? savingLabel : applyLabel,
+        color: "primary",
+        shape: "pill",
+        size: "sm",
+        isDisabled: isSaving || !isLoaded,
+        onClick: () => onApply?.(cropper.rect),
+      })}
+    </div>`,
+  })
+}

package/src/feedback/dialog/style.css

@@ -43,8 +43,9 @@
   font-size: 1.1rem;
 }
 
-.iw-dialog-close {
+.iw-dialog-header .iw-dialog-close {
   flex-shrink: 0;
+  margin-inline-start: auto;
 }
 
 .iw-dialog-description {

package/src/feedback/dialog/template.js

@@ -53,6 +53,9 @@ export function render(props) {
 
   const titleId = id && title ? `${id}-title` : ""
   const descriptionId = id && description ? `${id}-description` : ""
+  // Without a title, the description is what the dialog asks: its name.
+  const labelId = titleId || descriptionId
+  const describedById = titleId ? descriptionId : ""
   const onBackdrop = onBackdropClick ?? onClose
 
   return html`<dialog
@@ -63,8 +66,8 @@ export function render(props) {
       "iw-dialog-sheet": variant === "sheet",
       ...extraClasses,
     })}
-    aria-labelledby=${titleId || nothing}
-    aria-describedby=${descriptionId || nothing}
+    aria-labelledby=${labelId || nothing}
+    aria-describedby=${describedById || nothing}
     @pointerdown=${(event) => {
       backdropPresses.set(
         event.currentTarget,

package/src/feedback/feedback.css

@@ -1,6 +1,9 @@
 @import "./alert/style.css";
 @import "./backdrop/style.css";
+@import "./confirm-dialog/style.css";
+@import "./crop-dialog/style.css";
 @import "./dialog/style.css";
+@import "./load-status/style.css";
 @import "./progress/style.css";
 @import "./skeleton/style.css";
 @import "./snackbar/style.css";

package/src/feedback/load-status/index.js

@@ -0,0 +1,3 @@
+import * as renderers from "./template.js"
+
+export const LoadStatus = { ...renderers }

package/src/feedback/load-status/load-status.stories.js

@@ -0,0 +1,16 @@
+import { createRender } from "../../stories/notify-story.js"
+import { LoadStatus } from "."
+
+export default {
+  title: "Feedback/LoadStatus",
+  tags: ["autodocs"],
+  render: createRender(LoadStatus),
+}
+
+export const Loading = { args: { isLoading: true } }
+
+export const Empty = { args: { isEmpty: true, emptyText: "No events yet." } }
+
+export const Error = {
+  args: { isError: true, error: "The events could not be loaded." },
+}

package/src/feedback/load-status/style.css

@@ -0,0 +1,10 @@
+.iw-load-status {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  grid-column: 1 / -1;
+  padding: var(--iw-space-10) 0;
+  text-align: center;
+  font-size: var(--iw-font-size-sm);
+  color: var(--iw-color-text-muted, var(--iw-color-text));
+}

package/src/feedback/load-status/template.js

@@ -0,0 +1,43 @@
+/**
+ * @typedef {import('../../../types/feedback/load-status').LoadStatusProps} LoadStatusProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { html, nothing } from "@inglorious/web"
+
+import { Progress } from "../progress/index.js"
+
+/**
+ * Renders where a load stands instead of what it loads: an error, a loader or
+ * an empty message, in that order of precedence. Otherwise it renders
+ * `content`, a function so that it runs only once there is something to show.
+ * @param {LoadStatusProps} props
+ * @returns {import('../../../types/shared/renderable').Renderable}
+ */
+export function render(props) {
+  const {
+    isError = false,
+    error,
+    isLoading = false,
+    loader,
+    loadingLabel = "Loading…",
+    isEmpty = false,
+    emptyText,
+    content,
+    className = "",
+  } = props
+
+  const classes = ["iw-load-status", className].filter(Boolean).join(" ")
+
+  if (isError) return html`<div class=${classes} role="alert">${error}</div>`
+  if (isLoading) {
+    return html`<div class=${classes} role="status">
+      ${
+        loader ??
+        Progress.render({ variant: "circular", ariaLabel: loadingLabel })
+      }
+    </div>`
+  }
+  if (isEmpty) return html`<div class=${classes}>${emptyText}</div>`
+  return content ? content() : nothing
+}

package/src/index.js

@@ -1,6 +1,7 @@
 export { Button } from "./controls/button/index.js"
 export { ButtonGroup } from "./controls/button-group/index.js"
 export { Checkbox } from "./controls/checkbox/index.js"
+export { ChipPicker } from "./controls/chip-picker/index.js"
 export { Fab } from "./controls/fab/index.js"
 export { FileUpload } from "./controls/file-upload/index.js"
 export { IconButton } from "./controls/icon-button/index.js"
@@ -25,6 +26,7 @@ export { Chip } from "./data-display/chip/index.js"
 export { DataGrid } from "./data-display/data-grid/index.js"
 export { Divider } from "./data-display/divider/index.js"
 export { Icon } from "./data-display/icon/index.js"
+export { Lightbox } from "./data-display/lightbox/index.js"
 export { List } from "./data-display/list/index.js"
 export { Table } from "./data-display/table/index.js"
 export { Tooltip } from "./data-display/tooltip/index.js"
@@ -32,7 +34,10 @@ export { Typography } from "./data-display/typography/index.js"
 export { VirtualList } from "./data-display/virtual-list/index.js"
 export { Alert } from "./feedback/alert/index.js"
 export { Backdrop } from "./feedback/backdrop/index.js"
+export { ConfirmDialog } from "./feedback/confirm-dialog/index.js"
+export { CropDialog } from "./feedback/crop-dialog/index.js"
 export { Dialog } from "./feedback/dialog/index.js"
+export { LoadStatus } from "./feedback/load-status/index.js"
 export { Progress } from "./feedback/progress/index.js"
 export { Skeleton } from "./feedback/skeleton/index.js"
 export { Snackbar } from "./feedback/snackbar/index.js"

package/src/shared/icons.js

@@ -9,3 +9,15 @@ export const leftPanelClose = {
   height: 24,
   body: '<path fill="currentColor" d="M16.5 16V8l-4 4zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm3-2V5H5v14zm2 0h9V5h-9zm-2 0H5z"/>',
 }
+
+export const chevronLeft = {
+  width: 24,
+  height: 24,
+  body: '<path fill="currentColor" d="m14 18l-6-6l6-6l1.4 1.4l-4.6 4.6l4.6 4.6z"/>',
+}
+
+export const chevronRight = {
+  width: 24,
+  height: 24,
+  body: '<path fill="currentColor" d="M12.6 12L8 7.4L9.4 6l6 6l-6 6L8 16.6z"/>',
+}

package/types/controls/chip-picker.d.ts

@@ -0,0 +1,23 @@
+import type { TemplateResult } from "@inglorious/web"
+
+import type { ComboboxOption } from "./combobox"
+
+export interface ChipPickerProps {
+  /** The fieldset's legend. */
+  label?: TemplateResult | string
+  hint?: TemplateResult | string
+  /** Strings, numbers or `{ value, label, isDisabled }`, as in Combobox. */
+  options?: ComboboxOption[]
+  /** The values picked. */
+  value?: (string | number)[]
+  isDisabled?: boolean
+  className?: string
+  /** Called with the value of the chip pressed, picked or not. */
+  onToggle?: (value: string | number) => void
+}
+
+export type ChipPickerType = {
+  render(props: ChipPickerProps): TemplateResult
+}
+
+export declare const ChipPicker: ChipPickerType

package/types/controls/combobox.d.ts

@@ -45,6 +45,16 @@ export interface ComboboxProps {
   noOptionsMessage?: string
   loadingMessage?: string
 
+  /** A validation message, shown under the control. */
+  error?: string | null
+  /**
+   * An event to notify when the user picks or clears a value, such as
+   * `"#form:fieldChange"`. The payload is `changePayload` with the new `value`.
+   */
+  changeEvent?: string
+  /** Merged into `changeEvent`'s payload, such as `{ path: "country" }`. */
+  changePayload?: Record<string, unknown>
+
   isFullWidth?: boolean
   size?: "sm" | "md" | "lg"
   onToggle?: () => void
@@ -68,13 +78,21 @@ export type ComboboxType = {
   open(entity: ComboboxProps): void
   close(entity: ComboboxProps): void
   toggle(entity: ComboboxProps): void
-  optionSelect(entity: ComboboxProps, option: ComboboxOption): void
-  clear(entity: ComboboxProps): void
+  optionSelect(entity: ComboboxProps, option: ComboboxOption, api?: Api): void
+  clear(entity: ComboboxProps, payload?: unknown, api?: Api): void
   searchChange(entity: ComboboxProps, searchTerm: string): void
   focusNext(entity: ComboboxProps): void
   focusPrev(entity: ComboboxProps): void
   focusFirst(entity: ComboboxProps): void
   focusLast(entity: ComboboxProps): void
+  focusSet(entity: ComboboxProps, index: number): void
+  /** Sets the value from outside, without notifying `changeEvent`. An empty string is no value. */
+  valueSet(
+    entity: ComboboxProps,
+    value: string | number | (string | number)[] | null,
+  ): void
+  optionsSet(entity: ComboboxProps, options: ComboboxOption[]): void
+  errorSet(entity: ComboboxProps, error: string | null): void
 }
 
 export declare const Combobox: ComboboxType

package/types/data-display/lightbox.d.ts

@@ -0,0 +1,35 @@
+import type { TemplateResult, nothing } from "@inglorious/web"
+
+export interface LightboxImage {
+  src: string
+  /** Defaults to empty, for images the page describes already. */
+  alt?: string
+}
+
+export interface LightboxProps {
+  id?: string
+  /** URLs, or `{ src, alt }`. Renders nothing when empty. */
+  images?: (string | LightboxImage)[]
+  /** The image shown. Any integer: it wraps around. */
+  index?: number
+  isOpen?: boolean
+  /** The dialog's accessible name. Defaults to `"Photos"`. */
+  label?: string
+  /** Defaults to `"Close"`. */
+  closeLabel?: string
+  /** Defaults to `"Previous photo"`. */
+  previousLabel?: string
+  /** Defaults to `"Next photo"`. */
+  nextLabel?: string
+  className?: string
+  /** `1` for the next image, `-1` for the previous. Without it there is no navigation. */
+  onStep?: (step: 1 | -1) => void
+  /** Called by the close button, Esc and a press outside the image. */
+  onClose?: () => void
+}
+
+export type LightboxType = {
+  render(props: LightboxProps): TemplateResult | typeof nothing
+}
+
+export declare const Lightbox: LightboxType

package/types/feedback/confirm-dialog.d.ts

@@ -0,0 +1,34 @@
+import type { TemplateResult } from "@inglorious/web"
+
+import type { Renderable } from "../shared/renderable"
+
+export interface ConfirmDialogProps {
+  id?: string
+  isOpen?: boolean
+  /** The question, such as "Delete this event?". */
+  message?: TemplateResult | string | number
+  /** Anything more to show under the message, such as an error. */
+  children?: Renderable
+  confirmLabel: string
+  /** The confirm button's text while `isBusy`. Defaults to `confirmLabel`. */
+  busyLabel?: string
+  /** Defaults to `"Cancel"`. */
+  cancelLabel?: string
+  /** The close button's accessible name. Defaults to `"Close"`. */
+  closeLabel?: string
+  /** `"danger"` (default) for an action that cannot be undone, `"primary"` otherwise. */
+  tone?: "danger" | "primary"
+  /** The action is running: nothing can be pressed and the sheet stays open. */
+  isBusy?: boolean
+  isDisabled?: boolean
+  className?: string
+  onConfirm?: () => void
+  /** Called by the cancel button, Esc and the backdrop. */
+  onCancel?: () => void
+}
+
+export type ConfirmDialogType = {
+  render(props: ConfirmDialogProps): TemplateResult
+}
+
+export declare const ConfirmDialog: ConfirmDialogType

package/types/feedback/crop-dialog.d.ts

@@ -0,0 +1,35 @@
+import type { Api, TemplateResult } from "@inglorious/web"
+
+import type { CropRect } from "../controls/image-cropper"
+
+export interface CropDialogProps {
+  id?: string
+  isOpen?: boolean
+  /** The id of the ImageCropper entity to show. */
+  cropperId: string
+  title?: TemplateResult | string
+  description?: TemplateResult | string
+  /** Defaults to `"Apply"`. */
+  applyLabel?: string
+  /** The apply button's text while `isSaving`. Defaults to `"Saving…"`. */
+  savingLabel?: string
+  /** Defaults to `"Cancel"`. */
+  cancelLabel?: string
+  /** The close button's accessible name. Defaults to `"Close"`. */
+  closeLabel?: string
+  /** Shown when the cropper cannot load its image. */
+  loadErrorText?: string
+  /** An error of the caller's, such as a failed upload. Wins over `loadErrorText`. */
+  error?: TemplateResult | string | null
+  isSaving?: boolean
+  className?: string
+  onCancel?: () => void
+  /** Receives the cropper's `rect`. */
+  onApply?: (rect: CropRect) => void
+}
+
+export type CropDialogType = {
+  render(props: CropDialogProps, api: Api): TemplateResult
+}
+
+export declare const CropDialog: CropDialogType

package/types/feedback/load-status.d.ts

@@ -0,0 +1,22 @@
+import type { Renderable } from "../shared/renderable"
+
+export interface LoadStatusProps {
+  isError?: boolean
+  error?: Renderable
+  isLoading?: boolean
+  /** Replaces the circular progress, such as with the app's own animation. */
+  loader?: Renderable
+  /** The progress indicator's accessible name. Defaults to `"Loading…"`. */
+  loadingLabel?: string
+  isEmpty?: boolean
+  emptyText?: Renderable
+  /** What to render when there is no status to show. Runs only then, so it can read data still loading. */
+  content?: () => Renderable
+  className?: string
+}
+
+export type LoadStatusType = {
+  render(props: LoadStatusProps): Renderable
+}
+
+export declare const LoadStatus: LoadStatusType

package/types/index.d.ts

@@ -1,6 +1,7 @@
 export { Button } from "./controls/button"
 export { ButtonGroup } from "./controls/button-group"
 export { Checkbox } from "./controls/checkbox"
+export { ChipPicker } from "./controls/chip-picker"
 export { Fab } from "./controls/fab"
 export { FileUpload } from "./controls/file-upload"
 export { IconButton } from "./controls/icon-button"
@@ -18,6 +19,7 @@ export { BeforeAfter } from "./data-display/before-after"
 export { Carousel } from "./data-display/carousel"
 export { Chat } from "./data-display/chat"
 export { Chip } from "./data-display/chip"
+export { Lightbox } from "./data-display/lightbox"
 export { DataGrid } from "./data-display/data-grid"
 export { Divider } from "./data-display/divider"
 export { Icon } from "./data-display/icon"
@@ -28,7 +30,10 @@ export { Typography } from "./data-display/typography"
 export { VirtualList } from "./data-display/virtual-list"
 export { Alert } from "./feedback/alert"
 export { Backdrop } from "./feedback/backdrop"
+export { ConfirmDialog } from "./feedback/confirm-dialog"
+export { CropDialog } from "./feedback/crop-dialog"
 export { Dialog } from "./feedback/dialog"
+export { LoadStatus } from "./feedback/load-status"
 export { Progress } from "./feedback/progress"
 export { Skeleton } from "./feedback/skeleton"
 export { Snackbar } from "./feedback/snackbar"
@@ -53,6 +58,7 @@ export { Paper } from "./surfaces/paper"
 export type { ButtonProps, ButtonType } from "./controls/button"
 export type { ButtonGroupProps, ButtonGroupType } from "./controls/button-group"
 export type { CheckboxProps, CheckboxType } from "./controls/checkbox"
+export type { ChipPickerProps, ChipPickerType } from "./controls/chip-picker"
 export type {
   ComboboxProps,
   ComboboxType,
@@ -119,6 +125,11 @@ export type { PaperProps, PaperType } from "./surfaces/paper"
 export type { AvatarProps, AvatarType } from "./data-display/avatar"
 export type { BadgeProps, BadgeType } from "./data-display/badge"
 export type { ChipProps, ChipType } from "./data-display/chip"
+export type {
+  LightboxImage,
+  LightboxProps,
+  LightboxType,
+} from "./data-display/lightbox"
 export type {
   DataGridProps,
   DataGridType,
@@ -148,7 +159,13 @@ export type {
 } from "./data-display/typography"
 export type { AlertProps, AlertType } from "./feedback/alert"
 export type { BackdropProps, BackdropType } from "./feedback/backdrop"
+export type {
+  ConfirmDialogProps,
+  ConfirmDialogType,
+} from "./feedback/confirm-dialog"
+export type { CropDialogProps, CropDialogType } from "./feedback/crop-dialog"
 export type { DialogProps, DialogType } from "./feedback/dialog"
+export type { LoadStatusProps, LoadStatusType } from "./feedback/load-status"
 export type { ProgressProps, ProgressType } from "./feedback/progress"
 export type { SkeletonProps, SkeletonType } from "./feedback/skeleton"
 export type { SnackbarProps, SnackbarType } from "./feedback/snackbar"