@inglorious/ui 9.9.0 → 9.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "9.9.0",
+  "version": "9.10.0",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -211,6 +211,31 @@
       "import": "./src/feedback/backdrop/index.js"
     },
     "./backdrop.css": "./src/feedback/backdrop/style.css",
+    "./chip-picker": {
+      "types": "./types/controls/chip-picker.d.ts",
+      "import": "./src/controls/chip-picker/index.js"
+    },
+    "./chip-picker.css": "./src/controls/chip-picker/style.css",
+    "./confirm-dialog": {
+      "types": "./types/feedback/confirm-dialog.d.ts",
+      "import": "./src/feedback/confirm-dialog/index.js"
+    },
+    "./confirm-dialog.css": "./src/feedback/confirm-dialog/style.css",
+    "./crop-dialog": {
+      "types": "./types/feedback/crop-dialog.d.ts",
+      "import": "./src/feedback/crop-dialog/index.js"
+    },
+    "./crop-dialog.css": "./src/feedback/crop-dialog/style.css",
+    "./lightbox": {
+      "types": "./types/data-display/lightbox.d.ts",
+      "import": "./src/data-display/lightbox/index.js"
+    },
+    "./lightbox.css": "./src/data-display/lightbox/style.css",
+    "./load-status": {
+      "types": "./types/feedback/load-status.d.ts",
+      "import": "./src/feedback/load-status/index.js"
+    },
+    "./load-status.css": "./src/feedback/load-status/style.css",
     "./dialog": {
       "types": "./types/feedback/dialog.d.ts",
       "import": "./src/feedback/dialog/index.js"
@@ -316,7 +341,7 @@
   "peerDependencies": {
     "@inglorious/store": "^12.1.1",
     "@inglorious/utils": "^5.1.0",
-    "@inglorious/web": "^6.13.1"
+    "@inglorious/web": "^6.14.0"
   },
   "devDependencies": {
     "@iconify-icons/fa7-brands": "^2.0.0",
@@ -328,7 +353,7 @@
     "@inglorious/store": "12.1.1",
     "@inglorious/vite-plugin-jsx": "2.0.6",
     "@inglorious/vite-plugin-vue": "1.0.7",
-    "@inglorious/web": "6.13.1",
+    "@inglorious/web": "6.14.0",
     "@storybook/addon-docs": "^10.6.5",
     "@storybook/web-components-vite": "^10.6.5",
     "happy-dom": "^20.14.0",

package/src/controls/chip-picker/chip-picker.stories.js

@@ -0,0 +1,22 @@
+import { createRender } from "../../stories/notify-story.js"
+import { ChipPicker } from "."
+
+export default {
+  title: "Controls/ChipPicker",
+  tags: ["autodocs"],
+  render: createRender(ChipPicker),
+  argTypes: { onToggle: { action: "onToggle" } },
+}
+
+export const Default = {
+  args: {
+    label: "What do you do?",
+    hint: "Pick as many as you like.",
+    options: [
+      { value: "photographer", label: "Photographer" },
+      { value: "videographer", label: "Videographer" },
+      { value: "dj", label: "DJ" },
+    ],
+    value: ["videographer"],
+  },
+}

package/src/controls/chip-picker/index.js

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

package/src/controls/chip-picker/style.css

@@ -0,0 +1,26 @@
+.iw-chip-picker {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.iw-chip-picker-legend {
+  padding: 0;
+  margin-bottom: var(--iw-space-2);
+  font-size: var(--iw-font-size-sm);
+  font-weight: var(--iw-font-weight-medium);
+  color: var(--iw-color-text);
+}
+
+.iw-chip-picker-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--iw-space-2);
+}
+
+.iw-chip-picker-hint {
+  margin: var(--iw-space-2) 0 0;
+  font-size: var(--iw-font-size-xs);
+  color: var(--iw-color-text-muted, var(--iw-color-text));
+}

package/src/controls/chip-picker/template.js

@@ -0,0 +1,53 @@
+/**
+ * @typedef {import('../../../types/controls/chip-picker').ChipPickerProps} ChipPickerProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { html } from "@inglorious/web"
+import { when } from "@inglorious/web/directives/when"
+
+import { Chip } from "../../data-display/chip/index.js"
+import { formatOption } from "../combobox/helpers.js"
+
+/**
+ * Renders a group of toggle chips for picking several options, as a fieldset
+ * whose legend is `label`.
+ * @param {ChipPickerProps} props
+ * @returns {TemplateResult}
+ */
+export function render(props) {
+  const {
+    label,
+    hint,
+    options = [],
+    value = [],
+    isDisabled = false,
+    className = "",
+    onToggle,
+  } = props
+
+  return html`<fieldset
+    class=${["iw-chip-picker", className].filter(Boolean).join(" ")}
+  >
+    ${when(
+      label,
+      () => html`<legend class="iw-chip-picker-legend">${label}</legend>`,
+    )}
+    <div class="iw-chip-picker-chips">
+      ${options.map((option) => {
+        const {
+          value: optionValue,
+          label: optionLabel,
+          ...rest
+        } = formatOption(option)
+        return Chip.render({
+          children: optionLabel,
+          isSelected: value.includes(optionValue),
+          isDisabled: isDisabled || Boolean(rest.isDisabled),
+          onClick: () => onToggle?.(optionValue),
+        })
+      })}
+    </div>
+    ${when(hint, () => html`<p class="iw-chip-picker-hint">${hint}</p>`)}
+  </fieldset>`
+}

package/src/controls/combobox/handlers.js

@@ -5,6 +5,8 @@
 
 import { formatOption, getOptionValue, visibleOptions } from "./helpers.js"
 
+const NONE = -1
+
 /**
  * Initialize missing select state defaults.
  * @param {SelectEntity} entity
@@ -16,7 +18,7 @@ export function create(entity) {
 
   entity.isOpen ??= false
   entity.searchTerm ??= ""
-  entity.focusedIndex ??= -1
+  entity.focusedIndex ??= NONE
 
   entity.isMulti ??= false
   entity.selectedValue ??= entity.isMulti ? [] : null
@@ -38,15 +40,13 @@ export function create(entity) {
 export function open(entity) {
   if (entity.isDisabled) return
   entity.isOpen = true
-
-  const filtered = visibleOptions(entity)
-  entity.focusedIndex = filtered.length ? 0 : -1
+  entity.focusedIndex = enabledIndex(visibleOptions(entity), 0, 1)
 }
 
 /** @param {SelectEntity} entity */
 export function close(entity) {
   entity.isOpen = false
-  entity.focusedIndex = -1
+  entity.focusedIndex = NONE
 }
 
 /** @param {SelectEntity} entity */
@@ -60,15 +60,16 @@ export function toggle(entity) {
  * @param {SelectEntity} entity
  * @param {SelectOption} option
  */
-export function optionSelect(entity, option) {
+export function optionSelect(entity, option, api) {
   if (entity.isDisabled) return
 
   const normalizedOption = formatOption(option)
+  if (normalizedOption.isDisabled) return
   const optionValue = getOptionValue(normalizedOption)
 
   if (normalizedOption.isCreated) {
     entity.searchTerm = ""
-    entity.focusedIndex = -1
+    entity.focusedIndex = NONE
   }
 
   if (entity.isMulti) {
@@ -84,17 +85,24 @@ export function optionSelect(entity, option) {
     }
 
     entity.selectedValue = values
+    notifyChange(entity, api)
     return
   }
 
   entity.selectedValue = optionValue
   close(entity)
+  notifyChange(entity, api)
 }
 
-/** @param {SelectEntity} entity */
-export function clear(entity) {
+/**
+ * @param {SelectEntity} entity
+ * @param {unknown} _payload
+ * @param {import('@inglorious/web').Api} [api]
+ */
+export function clear(entity, _payload, api) {
   if (entity.isDisabled) return
   entity.selectedValue = entity.isMulti ? [] : null
+  notifyChange(entity, api)
 }
 
 /**
@@ -103,32 +111,36 @@ export function clear(entity) {
  */
 export function searchChange(entity, searchTerm) {
   entity.searchTerm = searchTerm
-  const filtered = visibleOptions(entity)
-  entity.focusedIndex = filtered.length ? 0 : -1
+  entity.focusedIndex = enabledIndex(visibleOptions(entity), 0, 1)
 }
 
 /** @param {SelectEntity} entity */
 export function focusNext(entity) {
-  const filtered = visibleOptions(entity)
-  if (!filtered.length) return
-  entity.focusedIndex = Math.min(entity.focusedIndex + 1, filtered.length - 1)
+  const next = enabledIndex(visibleOptions(entity), entity.focusedIndex + 1, 1)
+  if (next !== NONE) entity.focusedIndex = next
 }
 
-/** @param {SelectEntity} entity */
+/**
+ * Before the first enabled option, focus goes back to the search box.
+ * @param {SelectEntity} entity
+ */
 export function focusPrev(entity) {
-  entity.focusedIndex = Math.max(entity.focusedIndex - 1, -1)
+  entity.focusedIndex = enabledIndex(
+    visibleOptions(entity),
+    entity.focusedIndex - 1,
+    -1,
+  )
 }
 
 /** @param {SelectEntity} entity */
 export function focusFirst(entity) {
-  const filtered = visibleOptions(entity)
-  if (filtered.length) entity.focusedIndex = 0
+  entity.focusedIndex = enabledIndex(visibleOptions(entity), 0, 1)
 }
 
 /** @param {SelectEntity} entity */
 export function focusLast(entity) {
   const filtered = visibleOptions(entity)
-  if (filtered.length) entity.focusedIndex = filtered.length - 1
+  entity.focusedIndex = enabledIndex(filtered, filtered.length - 1, -1)
 }
 
 /**
@@ -139,3 +151,53 @@ export function focusLast(entity) {
 export function focusSet(entity, index) {
   entity.focusedIndex = Number.isInteger(index) ? index : entity.focusedIndex
 }
+
+/**
+ * Sets the value from outside, such as a form being filled with saved data.
+ * An empty string, as an empty form field holds, is no value. Unlike a
+ * choice, it does not notify `changeEvent`.
+ * @param {SelectEntity} entity
+ * @param {string | number | (string | number)[] | null} value
+ */
+export function valueSet(entity, value) {
+  if (entity.isMulti) entity.selectedValue = [...(value ?? [])]
+  else entity.selectedValue = value === "" ? null : (value ?? null)
+  entity.searchTerm = ""
+  entity.focusedIndex = NONE
+}
+
+/**
+ * Replaces the options, such as when they depend on another field.
+ * @param {SelectEntity} entity
+ * @param {SelectOption[]} options
+ */
+export function optionsSet(entity, options) {
+  entity.options = (options ?? []).map(formatOption)
+  entity.searchTerm = ""
+  entity.focusedIndex = NONE
+}
+
+/**
+ * Shows a validation message. The combobox is its own entity, so the form
+ * that validates it hands the message over.
+ * @param {SelectEntity} entity
+ * @param {string | null} error
+ */
+export function errorSet(entity, error) {
+  entity.error = error ?? null
+}
+
+function notifyChange(entity, api) {
+  if (!entity.changeEvent || !api) return
+  const value = entity.isMulti
+    ? [...entity.selectedValue]
+    : entity.selectedValue
+  api.notify(entity.changeEvent, { ...entity.changePayload, value })
+}
+
+function enabledIndex(options, start, step) {
+  for (let index = start; index >= 0 && index < options.length; index += step) {
+    if (!formatOption(options[index]).isDisabled) return index
+  }
+  return NONE
+}

package/src/controls/controls.css

@@ -1,8 +1,10 @@
-@import "./button/style.css";
 @import "./button-group/style.css";
+@import "./button/style.css";
 @import "./checkbox/style.css";
+@import "./chip-picker/style.css";
 @import "./combobox/style.css";
 @import "./fab/style.css";
+@import "./file-upload/style.css";
 @import "./icon-button/style.css";
 @import "./image-cropper/style.css";
 @import "./input/style.css";
@@ -12,4 +14,3 @@
 @import "./slider/style.css";
 @import "./switch/style.css";
 @import "./textarea/style.css";
-@import "./file-upload/style.css";

package/src/data-display/data-display.css

@@ -7,6 +7,7 @@
 @import "./data-grid/style.css";
 @import "./divider/style.css";
 @import "./icon/style.css";
+@import "./lightbox/style.css";
 @import "./list/style.css";
 @import "./table/style.css";
 @import "./tooltip/style.css";

package/src/data-display/lightbox/index.js

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

package/src/data-display/lightbox/lightbox.stories.js

@@ -0,0 +1,25 @@
+import { createRender } from "../../stories/notify-story.js"
+import { Lightbox } from "."
+
+export default {
+  title: "Data Display/Lightbox",
+  tags: ["autodocs"],
+  render: createRender(Lightbox),
+  argTypes: {
+    index: { control: "number" },
+    onStep: { action: "onStep" },
+    onClose: { action: "onClose" },
+  },
+}
+
+export const Default = {
+  args: {
+    isOpen: true,
+    index: 0,
+    images: [
+      "https://picsum.photos/id/1011/1200/800",
+      "https://picsum.photos/id/1015/1200/800",
+      "https://picsum.photos/id/1016/800/1200",
+    ],
+  },
+}

package/src/data-display/lightbox/style.css

@@ -0,0 +1,97 @@
+.iw-lightbox {
+  width: 100vw;
+  max-width: none;
+  height: 100dvh;
+  max-height: none;
+  margin: 0;
+  padding: var(--iw-space-4);
+  border: none;
+  background: #0c0c0c;
+  color: #fff;
+
+  &[open] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &::backdrop {
+    background: #0c0c0c;
+  }
+
+  .iw-button.iw-lightbox-close {
+    position: absolute;
+    top: calc(var(--iw-space-3) + var(--safe-area-top, 0px));
+    inset-inline-end: var(--iw-space-3);
+    z-index: 1;
+    width: 2.5rem;
+    height: 2.5rem;
+    background: color-mix(in srgb, #fff 14%, transparent);
+    color: #fff;
+
+    &:hover {
+      background: color-mix(in srgb, #fff 24%, transparent);
+    }
+  }
+
+  .iw-button.iw-lightbox-nav {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+    width: 2.5rem;
+    height: 2.5rem;
+    background: color-mix(in srgb, #000 45%, transparent);
+    color: #fff;
+
+    &:hover {
+      background: color-mix(in srgb, #000 62%, transparent);
+    }
+
+    &:dir(rtl) .iw-icon {
+      scale: -1 1;
+    }
+  }
+}
+
+.iw-lightbox-stage {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: min(100%, 56rem);
+  height: min(100%, 90dvh);
+  user-select: none;
+  touch-action: pan-y;
+}
+
+.iw-lightbox-image {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  border-radius: var(--iw-radius-xl);
+  pointer-events: none;
+}
+
+.iw-lightbox-previous {
+  inset-inline-start: var(--iw-space-2);
+}
+
+.iw-lightbox-next {
+  inset-inline-end: var(--iw-space-2);
+}
+
+.iw-lightbox-counter {
+  position: absolute;
+  inset-inline-end: var(--iw-space-3);
+  bottom: var(--iw-space-2);
+  padding: 0.125rem 0.5rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, #000 50%, transparent);
+  color: #fff;
+  font-size: var(--iw-font-size-xs);
+  font-variant-numeric: tabular-nums;
+}

package/src/data-display/lightbox/template.js

@@ -0,0 +1,153 @@
+/**
+ * @typedef {import('../../../types/data-display/lightbox').LightboxProps} LightboxProps
+ * @typedef {import('../../../types/data-display/lightbox').LightboxImage} LightboxImage
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { html, nothing } from "@inglorious/web"
+import { ref } from "@inglorious/web/directives/ref"
+import { when } from "@inglorious/web/directives/when"
+
+import { IconButton } from "../../controls/icon-button/index.js"
+import { chevronLeft, chevronRight, close } from "../../shared/icons.js"
+import { syncDialog } from "../../shared/top-layer.js"
+import { Icon } from "../icon/index.js"
+
+const SWIPE_PX = 40
+const NEXT = 1
+const PREVIOUS = -1
+
+/**
+ * Where each lightbox's current swipe started.
+ * @type {WeakMap<HTMLDialogElement, number>}
+ */
+const swipeStarts = new WeakMap()
+
+/**
+ * Renders images full screen in a modal `<dialog>`, one at a time. With more
+ * than one, the arrows, the arrow keys and a horizontal swipe step through
+ * them, following the writing direction. Esc, the close button and a press
+ * outside the image close it.
+ * @param {LightboxProps} props
+ * @returns {TemplateResult | typeof nothing}
+ */
+export function render(props) {
+  const {
+    id,
+    images = [],
+    index = 0,
+    isOpen = false,
+    label = "Photos",
+    closeLabel = "Close",
+    previousLabel = "Previous photo",
+    nextLabel = "Next photo",
+    className = "",
+    onStep,
+    onClose,
+  } = props
+
+  const total = images.length
+  if (!total) return nothing
+
+  const current = ((index % total) + total) % total
+  const image = toImage(images[current])
+  const isNavigable = total > 1 && Boolean(onStep)
+
+  return html`<dialog
+    id=${id || nothing}
+    class=${["iw-lightbox", className].filter(Boolean).join(" ")}
+    aria-label=${label}
+    @click=${(event) => {
+      if (event.target === event.currentTarget) onClose?.()
+    }}
+    @cancel=${(event) => {
+      if (!onClose) event.preventDefault()
+    }}
+    @keydown=${(event) => {
+      if (!isNavigable) return
+      const step = arrowStep(event)
+      if (!step) return
+      event.preventDefault()
+      onStep(step)
+    }}
+    @pointerdown=${(event) => {
+      swipeStarts.set(event.currentTarget, event.clientX)
+    }}
+    @pointerup=${(event) => {
+      const startX = swipeStarts.get(event.currentTarget)
+      swipeStarts.delete(event.currentTarget)
+      if (!isNavigable || startX == null) return
+      const distance = event.clientX - startX
+      if (Math.abs(distance) < SWIPE_PX) return
+      const towardsEnd = isRtl(event.currentTarget)
+        ? distance > 0
+        : distance < 0
+      onStep(towardsEnd ? NEXT : PREVIOUS)
+    }}
+    @pointercancel=${(event) => swipeStarts.delete(event.currentTarget)}
+    ${ref((element) => syncDialog(element, { isOpen, onClose }))}
+  >
+    ${when(onClose, () =>
+      IconButton.render({
+        icon: Icon.render({ icon: close, size: "lg" }),
+        variant: "ghost",
+        shape: "round",
+        ariaLabel: closeLabel,
+        className: "iw-lightbox-close",
+        onClick: onClose,
+      }),
+    )}
+    <div class="iw-lightbox-stage">
+      <img
+        class="iw-lightbox-image"
+        src=${image.src}
+        alt=${image.alt ?? ""}
+        draggable="false"
+      />
+      ${when(
+        isNavigable,
+        () => html`
+          ${IconButton.render({
+            icon: Icon.render({ icon: chevronLeft, size: "lg" }),
+            variant: "ghost",
+            shape: "round",
+            ariaLabel: previousLabel,
+            className: "iw-lightbox-nav iw-lightbox-previous",
+            onClick: () => onStep(PREVIOUS),
+          })}
+          ${IconButton.render({
+            icon: Icon.render({ icon: chevronRight, size: "lg" }),
+            variant: "ghost",
+            shape: "round",
+            ariaLabel: nextLabel,
+            className: "iw-lightbox-nav iw-lightbox-next",
+            onClick: () => onStep(NEXT),
+          })}
+          <div class="iw-lightbox-counter" aria-hidden="true">
+            ${current + 1}/${total}
+          </div>
+        `,
+      )}
+    </div>
+  </dialog>`
+}
+
+/**
+ * @param {string | LightboxImage} image
+ * @returns {LightboxImage}
+ */
+function toImage(image) {
+  return typeof image === "string" ? { src: image } : image
+}
+
+function arrowStep(event) {
+  const towardsEnd = isRtl(event.currentTarget) ? "ArrowLeft" : "ArrowRight"
+  const towardsStart = isRtl(event.currentTarget) ? "ArrowRight" : "ArrowLeft"
+  if (event.key === towardsEnd) return NEXT
+  if (event.key === towardsStart) return PREVIOUS
+  return 0
+}
+
+function isRtl(element) {
+  return getComputedStyle(element).direction === "rtl"
+}

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

@@ -0,0 +1,33 @@
+import { createRender } from "../../stories/notify-story.js"
+import { ConfirmDialog } from "."
+
+export default {
+  title: "Feedback/ConfirmDialog",
+  tags: ["autodocs"],
+  render: createRender(ConfirmDialog),
+  argTypes: {
+    tone: { control: "select", options: ["danger", "primary"] },
+    isBusy: { control: "boolean" },
+    onConfirm: { action: "onConfirm" },
+    onCancel: { action: "onCancel" },
+  },
+}
+
+export const Danger = {
+  args: {
+    isOpen: true,
+    message: "Delete this event? This cannot be undone.",
+    confirmLabel: "Delete",
+    busyLabel: "Deleting…",
+    cancelLabel: "Keep it",
+  },
+}
+
+export const Primary = {
+  args: {
+    isOpen: true,
+    tone: "primary",
+    message: "Publish this event now?",
+    confirmLabel: "Publish",
+  },
+}

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

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