@sparklingopinions/sparkling-ui 0.5.0 → 0.6.0

package/dist/composables/toast.js

@@ -1,32 +1,40 @@
 import { shallowReactive as e } from "vue";
 //#region src/composables/toast.ts
-var t = e([]), n = 0;
-function r(e, r, i = {}) {
-	t.push({
-		life: 3e3,
-		...i,
-		id: n++,
+function t(e) {
+	return (e.actions ?? (e.action ? [e.action] : [])).slice(0, 2);
+}
+var n = e([]), r = 0;
+function i(e, i, a = {}) {
+	let { action: o, ...s } = a, c = t(a);
+	n.push({
+		...s,
+		life: a.life ?? (c.length ? 6e3 : 3e3),
+		actions: c,
+		id: r++,
 		severity: e,
-		summary: r,
+		summary: i,
 		open: !0
 	});
 }
-function i(e) {
-	let n = t.findIndex((t) => t.id === e);
-	n < 0 || (t[n] = {
-		...t[n],
+function a(e, t = "close") {
+	let r = n.findIndex((t) => t.id === e);
+	if (r < 0 || !n[r].open) return;
+	let i = n[r];
+	n[r] = {
+		...i,
 		open: !1
-	}, setTimeout(() => {
-		let n = t.findIndex((t) => t.id === e);
-		n >= 0 && t.splice(n, 1);
-	}, 500));
+	}, i.onDismiss?.(t), setTimeout(() => {
+		let t = n.findIndex((t) => t.id === e);
+		t >= 0 && n.splice(t, 1);
+	}, 500);
 }
-var a = {
-	info: (e, t) => r("info", e, t),
-	success: (e, t) => r("success", e, t),
-	error: (e, t) => r("error", e, t)
+var o = {
+	info: (e, t) => i("info", e, t),
+	success: (e, t) => i("success", e, t),
+	warning: (e, t) => i("warning", e, t),
+	error: (e, t) => i("error", e, t)
 };
 //#endregion
-export { i as removeToast, a as toast, t as toasts };
+export { a as removeToast, o as toast, t as toastActions, n as toasts };
 
 //# sourceMappingURL=toast.js.map

package/dist/composables/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","names":["toasts","shallowReactive","nextId","add","options","removeToast","index","item","id","at","toast","summary"],"sources":["../../src/composables/toast.ts"],"sourcesContent":["import { shallowReactive } from 'vue'\n\nexport type ToastSeverity = 'info' | 'success' | 'error'\n\nexport interface ToastOptions {\n  /** A second line under the message. */\n  detail?: string\n  /** How long it stays, in ms; 0 keeps it until closed. */\n  life?: number\n  closable?: boolean\n}\n\nexport interface ToastItem extends ToastOptions {\n  id: number\n  severity: ToastSeverity\n  summary: string\n  open: boolean\n}\n\n// The messages one <Toaster /> near the app root shows.\nexport const toasts = shallowReactive<ToastItem[]>([])\n\nlet nextId = 0\n\nfunction add(severity: ToastSeverity, summary: string, options: ToastOptions = {}) {\n  toasts.push({ life: 3000, ...options, id: nextId++, severity, summary, open: true })\n}\n\n/** Removes a toast once its closing animation has had time to play. */\nexport function removeToast(id: number) {\n  const index = toasts.findIndex((item) => item.id === id)\n  if (index < 0) return\n  toasts[index] = { ...toasts[index]!, open: false }\n  setTimeout(() => {\n    const at = toasts.findIndex((item) => item.id === id)\n    if (at >= 0) toasts.splice(at, 1)\n  }, 500)\n}\n\n/** Shows a message in the app's <Toaster />: `toast.info('Saved')`. */\nexport const toast = {\n  info: (summary: string, options?: ToastOptions) => add('info', summary, options),\n  success: (summary: string, options?: ToastOptions) => add('success', summary, options),\n  error: (summary: string, options?: ToastOptions) => add('error', summary, options)\n}\n"],"mappings":";;AAoBA,IAAaA,IAASC,EAA6B,CAAC,CAAC,GAEjDC,IAAS;AAEb,SAASC,EAAI,GAAyB,GAAiB,IAAwB,CAAC,GAAG;CACjF,EAAO,KAAK;EAAE,MAAM;EAAM,GAAGC;EAAS,IAAI;EAAU;EAAU;EAAS,MAAM;CAAK,CAAC;AACrF;AAGA,SAAgBC,EAAY,GAAY;CACtC,IAAMC,IAAQN,EAAO,WAAW,MAASO,EAAK,OAAOC,CAAE;CACvD,AAAIF,IAAQ,MACZ,EAAOA,KAAS;EAAE,GAAGN,EAAOM;EAAS,MAAM;CAAM,GACjD,iBAAiB;EACf,IAAMG,IAAKT,EAAO,WAAW,MAASO,EAAK,OAAOC,CAAE;EACpD,AAAIC,KAAM,KAAGT,EAAO,OAAOS,GAAI,CAAC;CAClC,GAAG,GAAG;AACR;AAGA,IAAaC,IAAQ;CACnB,OAAO,GAAiB,MAA2BP,EAAI,QAAQQ,GAASP,CAAO;CAC/E,UAAU,GAAiB,MAA2BD,EAAI,WAAWQ,GAASP,CAAO;CACrF,QAAQ,GAAiB,MAA2BD,EAAI,SAASQ,GAASP,CAAO;AACnF"}
+{"version":3,"file":"toast.js","names":["toastActions","options","toasts","shallowReactive","nextId","add","_","rest","actions","removeToast","index","item","id","reason","at","toast","summary"],"sources":["../../src/composables/toast.ts"],"sourcesContent":["import { shallowReactive } from 'vue'\n\nexport type ToastSeverity = 'info' | 'success' | 'warning' | 'error'\n\n/** A button on the toast: pressing it runs `onClick`, then closes the toast. */\nexport interface ToastAction {\n  label: string\n  onClick: () => void\n}\n\n/** Why a toast left: one of its actions, its close button (or Escape), or its timer running out. */\nexport type ToastDismissReason = 'action' | 'close' | 'timeout'\n\nexport interface ToastOptions {\n  /** A second line under the message. */\n  detail?: string\n  /** How long it stays, in ms; 0 keeps it until closed. 3000 by default, 6000 with an action. */\n  life?: number\n  closable?: boolean\n  action?: ToastAction\n  /** One or two; any more are ignored. */\n  actions?: ToastAction[]\n  onDismiss?: (reason: ToastDismissReason) => void\n}\n\nexport interface ToastItem extends Omit<ToastOptions, 'action'> {\n  id: number\n  severity: ToastSeverity\n  summary: string\n  actions: ToastAction[]\n  open: boolean\n}\n\n/** A toast's actions, from `action` or `actions`, at most two. */\nexport function toastActions(options: Pick<ToastOptions, 'action' | 'actions'>): ToastAction[] {\n  return (options.actions ?? (options.action ? [options.action] : [])).slice(0, 2)\n}\n\n// The messages one <Toaster /> near the app root shows.\nexport const toasts = shallowReactive<ToastItem[]>([])\n\nlet nextId = 0\n\nfunction add(severity: ToastSeverity, summary: string, options: ToastOptions = {}) {\n  const { action: _, ...rest } = options\n  const actions = toastActions(options)\n  toasts.push({\n    ...rest,\n    life: options.life ?? (actions.length ? 6000 : 3000),\n    actions,\n    id: nextId++,\n    severity,\n    summary,\n    open: true\n  })\n}\n\n/** Closes a toast, then removes it once its closing animation has had time to play. */\nexport function removeToast(id: number, reason: ToastDismissReason = 'close') {\n  const index = toasts.findIndex((item) => item.id === id)\n  if (index < 0 || !toasts[index]!.open) return\n  const item = toasts[index]!\n  toasts[index] = { ...item, open: false }\n  item.onDismiss?.(reason)\n  setTimeout(() => {\n    const at = toasts.findIndex((item) => item.id === id)\n    if (at >= 0) toasts.splice(at, 1)\n  }, 500)\n}\n\n/** Shows a message in the app's <Toaster />: `toast.info('Saved')`. */\nexport const toast = {\n  info: (summary: string, options?: ToastOptions) => add('info', summary, options),\n  success: (summary: string, options?: ToastOptions) => add('success', summary, options),\n  warning: (summary: string, options?: ToastOptions) => add('warning', summary, options),\n  error: (summary: string, options?: ToastOptions) => add('error', summary, options)\n}\n"],"mappings":";;AAkCA,SAAgBA,EAAa,GAAkE;CAC7F,QAAQC,EAAQ,YAAYA,EAAQ,SAAS,CAACA,EAAQ,MAAM,IAAI,CAAC,GAAA,CAAI,MAAM,GAAG,CAAC;AACjF;AAGA,IAAaC,IAASC,EAA6B,CAAC,CAAC,GAEjDC,IAAS;AAEb,SAASC,EAAI,GAAyB,GAAiB,IAAwB,CAAC,GAAG;CACjF,IAAM,EAAE,QAAQC,GAAG,GAAGC,MAASN,GACzBO,IAAUR,EAAaC,CAAO;CACpC,EAAO,KAAK;EACV,GAAGM;EACH,MAAMN,EAAQ,SAASO,EAAQ,SAAS,MAAO;EAC/C;EACA,IAAI;EACJ;EACA;EACA,MAAM;CACR,CAAC;AACH;AAGA,SAAgBC,EAAY,GAAY,IAA6B,SAAS;CAC5E,IAAMC,IAAQR,EAAO,WAAW,MAASS,EAAK,OAAOC,CAAE;CACvD,IAAIF,IAAQ,KAAK,CAACR,EAAOQ,EAAM,CAAE,MAAM;CACvC,IAAMC,IAAOT,EAAOQ;CAGpB,AAFA,EAAOA,KAAS;EAAE,GAAGC;EAAM,MAAM;CAAM,GACvCA,EAAK,YAAYE,CAAM,GACvB,iBAAiB;EACf,IAAMC,IAAKZ,EAAO,WAAW,MAASS,EAAK,OAAOC,CAAE;EACpD,AAAIE,KAAM,KAAGZ,EAAO,OAAOY,GAAI,CAAC;CAClC,GAAG,GAAG;AACR;AAGA,IAAaC,IAAQ;CACnB,OAAO,GAAiB,MAA2BV,EAAI,QAAQW,GAASf,CAAO;CAC/E,UAAU,GAAiB,MAA2BI,EAAI,WAAWW,GAASf,CAAO;CACrF,UAAU,GAAiB,MAA2BI,EAAI,WAAWW,GAASf,CAAO;CACrF,QAAQ,GAAiB,MAA2BI,EAAI,SAASW,GAASf,CAAO;AACnF"}

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export * from './components/Board';
 export * from './components/Button';
 export * from './components/Calendar';
 export * from './components/Checkbox';
+export * from './components/ContextMenu';
 export * from './components/DataList';
 export * from './components/Dialog';
 export * from './components/DropdownMenu';
@@ -35,6 +36,6 @@ export * from './components/Tooltip';
 export * from './components/TypingIndicator';
 export { hueFor, type Hue } from './utils/hues';
 export { initColorMode, useColorMode, useForceLightMode, type ColorMode } from './composables/useColorMode';
-export { toast, type ToastOptions, type ToastSeverity } from './composables/toast';
+export { toast, type ToastAction, type ToastDismissReason, type ToastOptions, type ToastSeverity } from './composables/toast';
 export { useConfirm, type ConfirmOptions } from './composables/useConfirm';
 export * from './aliases';

package/dist/index.js

@@ -13,36 +13,37 @@ import f from "./components/Skeleton/Skeleton.js";
 import p from "./components/Board/Board.js";
 import m from "./components/Calendar/Calendar.js";
 import h from "./components/Checkbox/Checkbox.js";
-import g from "./components/DataList/DataList.js";
-import { saveHint as _ } from "./components/Dialog/focus.js";
-import v from "./components/Dialog/Dialog.js";
-import y from "./components/DropdownMenu/DropdownMenu.js";
-import b from "./components/EmptyState/EmptyState.js";
-import x from "./components/ErrorSummary/ErrorSummary.js";
-import S from "./components/Input/Input.js";
-import C from "./components/SegmentedControl/SegmentedControl.js";
-import { datePresets as w, describeFilter as T, filterOperators as E, sortDirections as D } from "./components/Filters/defaults.js";
-import O from "./components/Filters/FilterChip.js";
-import k from "./components/Filters/FilterMenu.js";
-import A from "./components/Filters/SortMenu.js";
-import j from "./components/FormField/FormField.js";
-import M from "./components/ImageUpload/ImageUpload.js";
-import N from "./components/Kbd/Kbd.js";
-import P from "./components/Pagination/Pagination.js";
-import F from "./components/Popover/Popover.js";
-import I from "./components/Spinner/Spinner.js";
-import L from "./components/Tag/Tag.js";
-import R from "./components/Select/Select.js";
-import z from "./components/Textarea/Textarea.js";
-import B from "./components/PropertyList/Editable.js";
-import V from "./components/PropertyList/PropertyList.js";
-import H from "./components/PropertyRow/Collapsible.js";
-import U from "./components/PropertyRow/PropertyRow.js";
-import W from "./components/Radio/Radio.js";
-import G from "./components/Table/Table.js";
-import { toast as K } from "./composables/toast.js";
-import q from "./components/Toast/Toaster.js";
-import J from "./components/TypingIndicator/TypingIndicator.js";
-import { initColorMode as Y, useColorMode as X, useForceLightMode as Z } from "./composables/useColorMode.js";
-import { Banner as Q, BulkActions as $, CalendarMonth as ee, Chip as te, ConfirmDialog as ne, Field as re, FilterFieldPicker as ie, FormErrors as ae, ImageInput as oe, InlineField as se, InlineForm as ce, LedgerMore as le, LedgerRow as ue, List as de, Modal as fe, OptionsMenu as pe, Pill as me, SortControl as he, TextInput as ge, TypingDots as _e } from "./aliases.js";
-export { a as ActionBar, o as Alert, c as AlertDialog, u as Avatar, d as Badge, Q as Banner, p as Board, $ as BulkActions, e as Button, m as Calendar, ee as CalendarMonth, h as Checkbox, te as Chip, H as Collapsible, ne as ConfirmDialog, g as DataList, v as Dialog, y as DropdownMenu, B as Editable, b as EmptyState, x as ErrorSummary, re as Field, O as FilterChip, ie as FilterFieldPicker, k as FilterMenu, ae as FormErrors, j as FormField, r as Icon, oe as ImageInput, M as ImageUpload, se as InlineField, ce as InlineForm, S as Input, N as Kbd, le as LedgerMore, ue as LedgerRow, de as List, fe as Modal, pe as OptionsMenu, P as Pagination, me as Pill, F as Popover, V as PropertyList, U as PropertyRow, W as Radio, C as SegmentedControl, R as Select, f as Skeleton, he as SortControl, A as SortMenu, I as Spinner, G as Table, L as Tag, ge as TextInput, z as Textarea, q as Toaster, i as Tooltip, _e as TypingDots, J as TypingIndicator, w as datePresets, T as describeFilter, E as filterOperators, l as hueFor, t as iconNames, Y as initColorMode, _ as saveHint, n as setIconResolver, D as sortDirections, K as toast, X as useColorMode, s as useConfirm, Z as useForceLightMode };
+import g from "./components/ContextMenu/ContextMenu.js";
+import _ from "./components/DataList/DataList.js";
+import { saveHint as v } from "./components/Dialog/focus.js";
+import y from "./components/Dialog/Dialog.js";
+import b from "./components/DropdownMenu/DropdownMenu.js";
+import x from "./components/EmptyState/EmptyState.js";
+import S from "./components/ErrorSummary/ErrorSummary.js";
+import C from "./components/Input/Input.js";
+import w from "./components/SegmentedControl/SegmentedControl.js";
+import { datePresets as T, describeFilter as E, filterOperators as D, sortDirections as O } from "./components/Filters/defaults.js";
+import k from "./components/Filters/FilterChip.js";
+import A from "./components/Filters/FilterMenu.js";
+import j from "./components/Filters/SortMenu.js";
+import M from "./components/FormField/FormField.js";
+import N from "./components/ImageUpload/ImageUpload.js";
+import P from "./components/Kbd/Kbd.js";
+import F from "./components/Pagination/Pagination.js";
+import I from "./components/Popover/Popover.js";
+import L from "./components/Spinner/Spinner.js";
+import R from "./components/Tag/Tag.js";
+import z from "./components/Select/Select.js";
+import B from "./components/Textarea/Textarea.js";
+import V from "./components/PropertyList/Editable.js";
+import H from "./components/PropertyList/PropertyList.js";
+import U from "./components/PropertyRow/Collapsible.js";
+import W from "./components/PropertyRow/PropertyRow.js";
+import G from "./components/Radio/Radio.js";
+import K from "./components/Table/Table.js";
+import { toast as q } from "./composables/toast.js";
+import J from "./components/Toast/Toaster.js";
+import Y from "./components/TypingIndicator/TypingIndicator.js";
+import { initColorMode as X, useColorMode as Z, useForceLightMode as Q } from "./composables/useColorMode.js";
+import { Banner as $, BulkActions as ee, CalendarMonth as te, Chip as ne, ConfirmDialog as re, Field as ie, FilterFieldPicker as ae, FormErrors as oe, ImageInput as se, InlineField as ce, InlineForm as le, LedgerMore as ue, LedgerRow as de, List as fe, Modal as pe, OptionsMenu as me, Pill as he, SortControl as ge, TextInput as _e, TypingDots as ve } from "./aliases.js";
+export { a as ActionBar, o as Alert, c as AlertDialog, u as Avatar, d as Badge, $ as Banner, p as Board, ee as BulkActions, e as Button, m as Calendar, te as CalendarMonth, h as Checkbox, ne as Chip, U as Collapsible, re as ConfirmDialog, g as ContextMenu, _ as DataList, y as Dialog, b as DropdownMenu, V as Editable, x as EmptyState, S as ErrorSummary, ie as Field, k as FilterChip, ae as FilterFieldPicker, A as FilterMenu, oe as FormErrors, M as FormField, r as Icon, se as ImageInput, N as ImageUpload, ce as InlineField, le as InlineForm, C as Input, P as Kbd, ue as LedgerMore, de as LedgerRow, fe as List, pe as Modal, me as OptionsMenu, F as Pagination, he as Pill, I as Popover, H as PropertyList, W as PropertyRow, G as Radio, w as SegmentedControl, z as Select, f as Skeleton, ge as SortControl, j as SortMenu, L as Spinner, K as Table, R as Tag, _e as TextInput, B as Textarea, J as Toaster, i as Tooltip, ve as TypingDots, Y as TypingIndicator, T as datePresets, E as describeFilter, D as filterOperators, l as hueFor, t as iconNames, X as initColorMode, v as saveHint, n as setIconResolver, O as sortDirections, q as toast, Z as useColorMode, s as useConfirm, Q as useForceLightMode };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sparklingopinions/sparkling-ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "A product-agnostic Vue 3 component library, themed by semantic tokens",
   "type": "module",
   "license": "MIT",

package/src/styles/tailwind.css

@@ -294,6 +294,10 @@
   --sui-button-padding-x: 0.875rem;
   --sui-button-text: 0.875rem;
   --sui-radius-button: 0.5rem;
+  /* A bottom sheet's top corners. */
+  --sui-radius-sheet: 1.25rem;
+  /* Table rows and headers at one height, e.g. 44px; unset (initial), each Table's size decides. */
+  --sui-table-row: initial;
   --sui-shadow-raised: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --sui-focus-width: 2px;
   --sui-focus-offset: 2px;
@@ -357,10 +361,14 @@
   --animate-sui-scrim-out: sui-scrim-out 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
   --animate-sui-dialog-in: sui-dialog-in 200ms ease-out;
   --animate-sui-dialog-out: sui-dialog-out 200ms ease-out forwards;
+  --animate-sui-sheet-in: sui-sheet-in 300ms cubic-bezier(0.32, 0.72, 0, 1);
+  --animate-sui-sheet-out: sui-sheet-out 200ms cubic-bezier(0.4, 0, 1, 1) forwards;
   --animate-sui-toast-in: sui-toast-in 300ms cubic-bezier(0.4, 0, 0.2, 1);
   --animate-sui-toast-out:
     sui-toast-collapse 450ms cubic-bezier(0, 1, 0, 1) forwards,
     sui-toast-fade 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  /* Its duration is the toast's life, set inline. */
+  --animate-sui-toast-timer: sui-toast-timer linear forwards;
 
   @keyframes sui-spinner-rotate {
     to {
@@ -430,6 +438,18 @@
     }
   }
 
+  @keyframes sui-sheet-in {
+    from {
+      transform: translateY(100%);
+    }
+  }
+
+  @keyframes sui-sheet-out {
+    to {
+      transform: translateY(100%);
+    }
+  }
+
   @keyframes sui-toast-in {
     from {
       opacity: 0;
@@ -453,6 +473,15 @@
     }
   }
 
+  @keyframes sui-toast-timer {
+    from {
+      transform: scaleX(1);
+    }
+    to {
+      transform: scaleX(0);
+    }
+  }
+
   @keyframes sui-typing {
     0%,
     80%,