@threadlabs/looma 0.5.1 → 0.5.2

package/vue/UiToastRegion.vue

@@ -1,256 +1,319 @@
-<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.2 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from "vue";
-import UiIconButton from "./UiIconButton.vue";
-import * as controllerModule from "../components/ui-toast-region/ui-toast-region.js";
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from 'vue'
+import * as controllerModule from '../components/ui-toast-region/ui-toast-region.js'
+import UiIconButton from './UiIconButton.vue'
 
-defineOptions({ inheritAttrs: false });
+defineOptions({ inheritAttrs: false })
 
-const hn = {
-  t: (v: unknown): boolean => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
-  n: (v: unknown): number | undefined => typeof v === "number" && v === v ? v : undefined,
-  text: (v: unknown): string => v === undefined || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
-  attr: (v: unknown): any => v === undefined || v === null || v === false ? undefined : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? undefined : String(v),
-  call: (fn: string, ...args: unknown[]): any => {
-    if (fn === "format") {
-      let index = 1;
-      return typeof args[0] === "string" ? args[0].replace(/%s/g, () => index < args.length ? hn.text(args[index++]) : "%s") : undefined;
-    }
-    const n = args.map(hn.n);
-    if (n.some((value) => value === undefined)) return undefined;
-    const v = n as number[];
-    switch (fn) {
-      case "abs": return v.length === 1 ? Math.abs(v[0]!) : undefined;
-      case "round": return v.length === 1 ? Math.round(v[0]!) : undefined;
-      case "min": return v.length > 0 ? Math.min(...v) : undefined;
-      case "max": return v.length > 0 ? Math.max(...v) : undefined;
-      case "clamp": return v.length === 3 ? Math.min(Math.max(v[0]!, v[1]!), v[2]!) : undefined;
-    }
-    return undefined;
-  },
-  shape: (items: unknown, where: ((item: any) => unknown) | undefined, sort: readonly string[], limit: unknown): any[] => {
-    let list = Array.isArray(items) ? items.slice() : [];
-    if (where !== undefined) list = list.filter((item) => hn.t(where(item)));
-    if (sort.length > 0) {
-      const field = (item: unknown, path: string): unknown => item !== null && typeof item === "object" && !Array.isArray(item)
-        ? path.split(".").reduce<unknown>((value, key) => (value as Record<string, unknown> | undefined)?.[key], item)
-        : item;
-      const compare = (a: unknown, b: unknown): number => typeof a === "number" && typeof b === "number" ? a - b : hn.text(a).localeCompare(hn.text(b));
-      list.sort((a, b) => {
-        for (const key of sort) {
-          const descending = key.startsWith("-");
-          const order = compare(field(a, descending ? key.slice(1) : key), field(b, descending ? key.slice(1) : key));
-          if (order !== 0) return descending ? -order : order;
-        }
-        return 0;
-      });
-    }
-    return typeof limit === "number" ? list.slice(0, Math.max(0, Math.trunc(limit))) : list;
+const props = withDefaults(
+  defineProps<{
+    auto?: boolean
+    duration?: number
+    message?: string
+    open?: boolean
+  }>(),
+  {
+    auto: false,
+    duration: 5000,
+    message: 'Notification',
+    open: false,
   },
-};
-
-const props = withDefaults(defineProps<{
-  auto?: boolean | null;
-  duration?: number | null;
-  message?: string | null;
-  open?: boolean | null;
-}>(), {
-  auto: false,
-  duration: 5000,
-  message: "Notification",
-  open: false,
-});
+)
 const emit = defineEmits<{
-  "close": [detail: { readonly open: boolean; readonly reason: "action" | "timeout" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
-  "dismiss": [detail: { readonly id: string; readonly reason: "action" | "timeout"; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
-}>();
-const root = ref<HTMLElement | null>(null);
-const refs: Record<string, Element | undefined> = {};
-const state_internalOpen = ref<any>(false);
-const state_toasts = ref<any>([]);
+  'update:open': [value: boolean]
+  close: [
+    detail: {
+      readonly open: boolean
+      readonly reason: 'action' | 'timeout' | 'programmatic' | 'light-dismiss' | 'escape'
+      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+    },
+  ]
+  dismiss: [
+    detail: {
+      readonly id: string
+      readonly reason: 'action' | 'timeout'
+      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+    },
+  ]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const internalOpen = ref(false)
+const toasts = ref<{ id: string; message: string; role: 'alert' | 'status'; closing: boolean }[]>(
+  [],
+)
 
 /** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-const dispatch = (name: string, detail?: unknown): boolean => {
-  const declared = {"close":{"bubbles":true,"composed":true,"cancelable":false},"dismiss":{"bubbles":true,"composed":true,"cancelable":false}} as Record<string, EventInit | undefined>;
+function dispatch(name: string, detail?: unknown): boolean {
+  const declared: Record<string, EventInit | undefined> = {
+    close: { bubbles: true, composed: true, cancelable: false },
+    dismiss: { bubbles: true, composed: true, cancelable: false },
+  }
   const checks: Record<string, (detail: unknown) => boolean> = {
-    "close": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof (detail as Record<string, unknown>)["open"] === "boolean" && ((detail as Record<string, unknown>)["reason"] === "action" || (detail as Record<string, unknown>)["reason"] === "timeout" || (detail as Record<string, unknown>)["reason"] === "programmatic" || (detail as Record<string, unknown>)["reason"] === "light-dismiss" || (detail as Record<string, unknown>)["reason"] === "escape") && ((detail as Record<string, unknown>)["trigger"] === "keyboard" || (detail as Record<string, unknown>)["trigger"] === "pointer" || (detail as Record<string, unknown>)["trigger"] === "programmatic") && Object.keys(detail as object).every((key) => ["open","reason","trigger"].includes(key))),
-    "dismiss": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof (detail as Record<string, unknown>)["id"] === "string" && ((detail as Record<string, unknown>)["reason"] === "action" || (detail as Record<string, unknown>)["reason"] === "timeout") && ((detail as Record<string, unknown>)["trigger"] === "keyboard" || (detail as Record<string, unknown>)["trigger"] === "pointer" || (detail as Record<string, unknown>)["trigger"] === "programmatic") && Object.keys(detail as object).every((key) => ["id","reason","trigger"].includes(key))),
-  };
+    close: (detail) =>
+      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+      && typeof (detail as Record<string, unknown>)['open'] === 'boolean'
+      && ((detail as Record<string, unknown>)['reason'] === 'action'
+        || (detail as Record<string, unknown>)['reason'] === 'timeout'
+        || (detail as Record<string, unknown>)['reason'] === 'programmatic'
+        || (detail as Record<string, unknown>)['reason'] === 'light-dismiss'
+        || (detail as Record<string, unknown>)['reason'] === 'escape')
+      && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+        || (detail as Record<string, unknown>)['trigger'] === 'pointer'
+        || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
+      && Object.keys(detail as object).every((key) => ['open', 'reason', 'trigger'].includes(key)),
+    dismiss: (detail) =>
+      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+      && typeof (detail as Record<string, unknown>)['id'] === 'string'
+      && ((detail as Record<string, unknown>)['reason'] === 'action'
+        || (detail as Record<string, unknown>)['reason'] === 'timeout')
+      && ((detail as Record<string, unknown>)['trigger'] === 'keyboard'
+        || (detail as Record<string, unknown>)['trigger'] === 'pointer'
+        || (detail as Record<string, unknown>)['trigger'] === 'programmatic')
+      && Object.keys(detail as object).every((key) => ['id', 'reason', 'trigger'].includes(key)),
+  }
   if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {
-    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
+    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`)
+  }
+  const emitEvent = emit as (name: string, detail: unknown) => void
+  emitEvent(name, detail)
+  if (detail !== null && typeof detail === 'object' && 'open' in detail) {
+    emitEvent('update:open', (detail as Record<string, unknown>)['open'])
   }
-  (emit as (name: string, detail: unknown) => void)(name, detail);
-  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail })) ?? true;
-};
+  return root.value?.dispatchEvent(
+    new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail }),
+  ) ?? true
+}
 
 function read(name: string): unknown {
-  if (name === "internalOpen") return state_internalOpen.value;
-  if (name === "toasts") return state_toasts.value;
-  return (props as Record<string, unknown>)[name];
+  if (name === 'internalOpen') return internalOpen.value
+  if (name === 'toasts') return toasts.value
+  return (props as Record<string, unknown>)[name]
 }
 
 function write(name: string, value: unknown): boolean {
-  if (name === "internalOpen") { state_internalOpen.value = value; return true; }
-  if (name === "toasts") { state_toasts.value = value; return true; }
-  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
+  if (name === 'internalOpen') {
+    internalOpen.value = value as never
+    return true
+  }
+  if (name === 'toasts') {
+    toasts.value = value as never
+    return true
+  }
+  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`)
 }
 
-const stops: Array<() => void> = [];
+const stops: Array<() => void> = []
 const host = {
-  get element(): Element { return root.value as Element; },
+  get element(): Element {
+    return root.value as Element
+  },
   state: new Proxy({} as Record<string, unknown>, {
-    get: (_target, name) => typeof name === "string" ? read(name) : undefined,
-    set: (_target, name, value) => typeof name === "string" && write(name, value),
+    get: (_target, name) => typeof name === 'string' ? read(name) : undefined,
+    set: (_target, name, value) => typeof name === 'string' && write(name, value),
   }),
-  refs: refs as Readonly<Record<string, Element>>,
+  refs: {} as Readonly<Record<string, Element>>,
   elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
     get: (_target, name) => {
-      if (typeof name !== "string" || root.value === null) return undefined;
-      const form = root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form");
-      return form?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined;
+      if (typeof name !== 'string' || root.value === null) return undefined
+      const form = root.value instanceof HTMLFormElement
+        ? root.value
+        : root.value.querySelector('form')
+      return form?.elements.namedItem(name)
+        ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined
     },
   }),
   signal<T>(initialValue: T) {
-    const value = shallowRef(initialValue);
+    const value = shallowRef(initialValue)
     return {
       get: (): T => value.value,
-      set: (next: T): void => { if (!Object.is(value.value, next)) value.value = next; },
-      update: (next: (current: T) => T): void => { const updated = next(value.value); if (!Object.is(value.value, updated)) value.value = updated; },
-    };
+      set: (next: T): void => {
+        if (!Object.is(value.value, next)) value.value = next
+      },
+      update: (next: (current: T) => T): void => {
+        const updated = next(value.value)
+        if (!Object.is(value.value, updated)) value.value = updated
+      },
+    }
   },
   computed<T>(compute: () => T) {
-    const value = computed(compute);
-    return { get: (): T => value.value };
+    const value = computed(compute)
+    return { get: (): T => value.value }
   },
   effect(run: () => void | (() => void)): () => void {
     const stop = watchEffect((onCleanup) => {
-      const cleanup = run();
-      if (typeof cleanup === "function") onCleanup(cleanup);
-    }, { flush: "post" });
-    stops.push(stop);
-    return stop;
+      const cleanup = run()
+      if (typeof cleanup === 'function') onCleanup(cleanup)
+    }, { flush: 'post' })
+    stops.push(stop)
+    return stop
   },
   on(event: string, listener: EventListener): () => void {
-    const element = root.value;
-    element?.addEventListener(event, listener);
-    const off = (): void => element?.removeEventListener(event, listener);
-    stops.push(off);
-    return off;
+    const element = root.value
+    element?.addEventListener(event, listener)
+    const off = (): void => element?.removeEventListener(event, listener)
+    stops.push(off)
+    return off
   },
   dispatch,
-};
+}
 
-let cleanup: void | (() => void);
-let ready: Promise<void> | undefined;
+let cleanup: void | (() => void)
+let ready: Promise<void> | undefined
 onMounted(() => {
-  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => { cleanup = result; });
-});
+  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => {
+    cleanup = result
+  })
+})
 onBeforeUnmount(() => {
-  for (const stop of stops.splice(0)) stop();
-  if (typeof cleanup === "function") cleanup();
-});
+  for (const stop of stops.splice(0)) stop()
+  if (typeof cleanup === 'function') cleanup()
+})
 defineExpose({
-  show: async (...args: unknown[]) => { await ready; return (controllerModule as Record<string, (...values: unknown[]) => unknown>)["show"]!(host, ...args); },
-});
+  show: async (...args: unknown[]) => {
+    await ready
+    return (controllerModule as Record<string, (...values: unknown[]) => unknown>)['show']!(
+      host,
+      ...args,
+    )
+  },
+})
 </script>
 
 <template>
-  <div data-component="ui-toast-region" role="region" aria-label="Notifications" aria-live="polite" popover="manual" v-bind="$attrs" ref="root"><slot></slot><template v-for="(toast, index) in hn.shape(state_toasts, undefined, [], undefined)" :key="(toast)?.id"><div class="toast" :id="hn.attr((toast)?.id)" :role="hn.attr((toast)?.role)" :class="{ 'closing': hn.t((toast)?.closing) }"><span class="message">{{ hn.text((toast)?.message) }}</span><span class="dismiss" :data-toast="hn.attr((toast)?.id)"><UiIconButton size="sm" variant="ghost" :round="true" :label="hn.call('format', 'Dismiss %s', (toast)?.message)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"></path></svg></UiIconButton></span></div></template></div>
+  <div
+    data-component="ui-toast-region"
+    role="region"
+    aria-label="Notifications"
+    aria-live="polite"
+    popover="manual"
+    v-bind="$attrs"
+    ref="root"
+  >
+    <slot />
+    <div
+      v-for="toast in toasts"
+      :key="toast.id"
+      class="toast"
+      :id="toast.id"
+      :role="toast.role"
+      :class="{ closing: toast.closing }"
+    >
+      <span class="message">{{ toast.message }}</span>
+      <span class="dismiss" :data-toast="toast.id"><UiIconButton
+          size="sm"
+          variant="ghost"
+          :round="true"
+          :label="`Dismiss ${toast.message}`"
+        ><svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            aria-hidden="true"
+          >
+            <path d="M18 6 6 18M6 6l12 12"></path>
+          </svg></UiIconButton></span>
+    </div>
+  </div>
 </template>
 
 <style scoped>
 [data-component~="ui-toast-region"] {
-      position: fixed;
-      top: calc(var(--ui-space-4) + env(safe-area-inset-top));
-      right: auto;
-      bottom: auto;
-      left: 50%;
-      transform: translateX(-50%);
-      z-index: 9999;
-      display: grid;
-      gap: var(--ui-space-2);
-      inline-size: min(24rem, calc(100vw - var(--ui-space-4) * 2));
-      max-inline-size: 100%;
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-      overflow: visible;
-      border: 0;
-      outline: 0;
-      background: transparent;
-      box-shadow: none;
-      pointer-events: none;
-    }
+  position: fixed;
+  top: calc(var(--ui-space-4) + env(safe-area-inset-top));
+  right: auto;
+  bottom: auto;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 9999;
+  display: grid;
+  gap: var(--ui-space-2);
+  inline-size: min(24rem, calc(100vw - var(--ui-space-4) * 2));
+  max-inline-size: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  overflow: visible;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  box-shadow: none;
+  pointer-events: none;
+}
 
-    [data-component~="ui-toast-region"]:not(:popover-open) {
-      display: none;
-    }
+[data-component~="ui-toast-region"]:not(:popover-open) {
+  display: none;
+}
 
-    [data-component~="ui-toast-region"] > .toast,
-    [data-component~="ui-toast-region"] > :slotted(*) {
-      pointer-events: auto;
-    }
+[data-component~="ui-toast-region"] > .toast,
+[data-component~="ui-toast-region"] > :slotted(*) {
+  pointer-events: auto;
+}
 
-    .toast {
-      display: grid;
-      grid-template-columns: 1fr auto;
-      gap: var(--ui-space-2);
-      align-items: start;
-      border: 1px solid var(--ui-border-default);
-      border-radius: var(--ui-radius-3);
-      padding: var(--ui-space-3) var(--ui-space-4);
-      background: var(--ui-surface-elevated);
-      color: var(--ui-text-primary);
-      box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
-      animation: ui-toast-enter var(--ui-toast-enter-duration, 0.32s) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
-    }
+.toast {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--ui-space-2);
+  align-items: start;
+  border: 1px solid var(--ui-border-default);
+  border-radius: var(--ui-radius-3);
+  padding: var(--ui-space-3) var(--ui-space-4);
+  background: var(--ui-surface-elevated);
+  color: var(--ui-text-primary);
+  box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+  animation: ui-toast-enter var(--ui-toast-enter-duration, 0.32s)
+    var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
 
-    /* Leaving slides on down and fades; the controller removes the toast when this ends. */
-    .toast.closing {
-      animation: ui-toast-exit var(--ui-toast-exit-duration, 0.22s) var(--ui-motion-ease, ease) both;
-      pointer-events: none;
-    }
+/* Leaving slides on down and fades; the controller removes the toast when this ends. */
+.toast.closing {
+  animation: ui-toast-exit var(--ui-toast-exit-duration, 0.22s) var(--ui-motion-ease, ease) both;
+  pointer-events: none;
+}
 
-    @keyframes ui-toast-enter {
-      from {
-        opacity: 0;
-        transform: translateY(-1rem);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
+@keyframes ui-toast-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 
-    @keyframes ui-toast-exit {
-      from {
-        opacity: 1;
-        transform: translateY(0);
-      }
-      to {
-        opacity: 0;
-        transform: translateY(0.75rem);
-      }
-    }
+@keyframes ui-toast-exit {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(0.75rem);
+  }
+}
 
-    @media (prefers-reduced-motion: reduce) {
-      .toast, .toast.closing {
-        animation: none;
-      }
-    }
+@media (prefers-reduced-motion: reduce) {
+  .toast, .toast.closing {
+    animation: none;
+  }
+}
 
-    .message {
-      min-inline-size: 0;
-      align-self: center;
-    }
+.message {
+  min-inline-size: 0;
+  align-self: center;
+}
 
-    .dismiss {
-      align-self: center;
-      margin-inline-end: calc(var(--ui-space-2) * -1);
-    }
+.dismiss {
+  align-self: center;
+  margin-inline-end: calc(var(--ui-space-2) * -1);
+}
 
-    /* A component that sets its display still honours the hidden attribute on its root. */
-    [data-component~="ui-toast-region"][hidden] {
-      display: none;
-    }
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-toast-region"][hidden] {
+  display: none;
+}
 </style>

package/vue/UiTooltip.d.ts

@@ -1,10 +1,10 @@
 type __VLS_Props = {
-    for?: string | null;
-    hideDelay?: number | null;
-    inverse?: boolean | null;
-    open?: boolean | null;
-    placement?: string | null;
-    showDelay?: number | null;
+    for?: string;
+    hideDelay?: number;
+    inverse?: boolean;
+    open?: boolean;
+    placement?: string;
+    showDelay?: number;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -21,6 +21,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
         readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any;
+    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClose?: ((detail: {
         readonly open: boolean;
@@ -32,13 +33,14 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
         readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
-    for: string | null;
-    hideDelay: number | null;
-    inverse: boolean | null;
-    open: boolean | null;
-    placement: string | null;
-    showDelay: number | null;
+    for: string;
+    hideDelay: number;
+    inverse: boolean;
+    open: boolean;
+    placement: string;
+    showDelay: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;