@threadlabs/looma 0.19.1 → 0.21.0

package/vue/UiToastRegion.vue

@@ -1,30 +1,115 @@
-<!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.12 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import * as controllerModule from '../components/ui-toast-region/ui-toast-region.js'
+import { computed, defineComponent, getCurrentInstance, h, ref, watchSyncEffect } from 'vue'
+import type { PropType, VNode } from 'vue'
 import { createDispatch, useComponentHost } from './host'
+import { checkedProp } from './props'
 import UiIcon from './UiIcon.vue'
 import UiIconButton from './UiIconButton.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(
-  defineProps<{
-    duration?: number
-    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
-  }>(),
-  {
-    duration: 0,
-    placement: 'top',
+const props = defineProps({
+  duration: { type: null as unknown as PropType<number | null>, default: 0 },
+  placement: {
+    type: null as unknown as PropType<
+      'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | null
+    >,
+    default: 'top',
   },
-)
+})
+const checkedProps = computed(() => ({
+  duration: checkedProp<number>(
+    props['duration'],
+    { kind: 'terminal', name: 'number' },
+    false,
+    'duration',
+    undefined,
+    undefined,
+  ) as number,
+  placement: checkedProp<
+    'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
+  >(props['placement'], { kind: 'terminal', name: 'keyword' }, false, 'placement', undefined, [
+    'top',
+    'top-start',
+    'top-end',
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+  ]) as 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end',
+}))
+void checkedProps.value
+watchSyncEffect(() => {
+  void checkedProps.value
+})
+function nativeAttrs(attrs: Record<string, unknown>): Record<string, unknown> {
+  const names = Object.keys(attrs)
+  if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs
+  return Object.fromEntries(names.map((name) => [
+    Object.hasOwn(Object.prototype, name)
+      ? name === '__proto__' ? '__Proto__' : name[0]!.toUpperCase() + name.slice(1)
+      : name,
+    attrs[name],
+  ]))
+}
+const KeyedFailure = defineComponent({
+  props: { error: { type: null, required: true } },
+  setup(props) {
+    return () => {
+      throw props.error
+    }
+  },
+})
+const KeyedBoundary = defineComponent({
+  setup(_props, { slots }) {
+    let last: VNode[] = []
+    return () => {
+      try {
+        last = slots.default?.() ?? []
+        return last
+      } catch (error) {
+        if (
+          !(error instanceof Error)
+          || (error as Error & { diagnostic?: { code?: string } }).diagnostic?.code !== 'HR004'
+        ) throw error
+        if (typeof window === 'undefined') throw error
+        return [...last, h(KeyedFailure, { error })]
+      }
+    }
+  },
+})
+const componentInstance = getCurrentInstance()
+function reflectedProp(
+  name: string,
+  kebab: string,
+  value: unknown,
+  fallback: string | undefined,
+  bound: boolean,
+  separator?: string,
+): string | undefined {
+  const incoming = componentInstance?.vnode.props
+  if (
+    !bound
+    && (incoming === null || incoming === undefined
+      || (!Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab)))
+  ) return fallback
+  if (value === null || value === undefined) return undefined
+  return Array.isArray(value) && separator !== undefined
+    ? value.join(separator)
+    : typeof value === 'object'
+    ? JSON.stringify(value)
+    : String(value)
+}
+const hydrationInstance = getCurrentInstance()
 const emit = defineEmits<{
   dismiss: [
-    detail: {
-      readonly id: string
-      readonly reason: 'action' | 'timeout'
-      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
-    },
+    event: CustomEvent<
+      {
+        readonly id: string
+        readonly reason: 'action' | 'timeout'
+        readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+      }
+    >,
   ]
 }>()
 
@@ -38,11 +123,29 @@ const toasts = ref<
     closing: boolean
   }[]
 >([])
+const hydrationNode = hydrationInstance?.vnode.el
+if (
+  typeof window !== 'undefined' && hydrationNode != null
+  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('div'))
+) {
+  throw Object.assign(
+    new Error('HR005: Server markup for <ui-toast-region> has an incompatible root.'),
+    {
+      name: 'HtmlDiagnosticError',
+      diagnostic: Object.freeze({
+        code: 'HR005',
+        message: 'Server markup for <ui-toast-region> has an incompatible root.',
+      }),
+    },
+  )
+}
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
-    props.placement && `placement placement=${props.placement}`,
+    checkedProps.value.placement && 'placement',
+    checkedProps.value.placement != null
+    && `placement=${encodeURIComponent(checkedProps.value.placement)}`,
   ].filter(Boolean).join(' ')
 )
 
@@ -61,22 +164,72 @@ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) =>
   },
 })
 
-const { host, ready } = useComponentHost(controllerModule.default, {
-  root,
-  dispatch,
-  props,
-  state: { toasts },
-})
+const { host, ready } = useComponentHost(
+  () => import('../components/ui-toast-region/ui-toast-region.js'),
+  {
+    root,
+    dispatch,
+    controllerSource: {
+      specifier: '../components/ui-toast-region/ui-toast-region.js',
+      definition: './components/ui-toast-region/ui-toast-region.html',
+    },
+    props: checkedProps,
+    state: { toasts },
+  },
+)
 
 defineExpose({
   show: async (...args: unknown[]) => {
-    await ready()
-    return (controllerModule as Record<string, (...values: unknown[]) => unknown>)['show']!(
-      host,
-      ...args,
-    )
+    const controllerModule = await ready()
+    if (controllerModule === undefined) {
+      throw new TypeError('Controller method `show` is not ready for <ui-toast-region>.')
+    }
+    const method = Reflect.get(controllerModule, 'show')
+    if (typeof method !== 'function') {
+      throw Object.assign(new Error('HJ003: Controller does not export method `show`.'), {
+        name: 'HtmlDiagnosticError',
+        diagnostic: Object.freeze({
+          code: 'HJ003',
+          message: 'Controller does not export method `show`.',
+        }),
+      })
+    }
+    return method(host, ...args)
   },
 })
+
+function text(value: unknown): string {
+  if (Array.isArray(value)) return value.map(text).join(' ')
+  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
+}
+
+function uniqueKeys<T>(
+  items: readonly T[],
+  keyOf: (
+    item: T,
+    index: number,
+    loop: { index: number; first: boolean; last: boolean; count: number },
+  ) => unknown,
+): readonly T[] {
+  const seen = new Set<unknown>()
+  for (let index = 0; index < items.length; index += 1) {
+    const key = keyOf(items[index]!, index, {
+      index,
+      first: index === 0,
+      last: index === items.length - 1,
+      count: items.length,
+    })
+    if (seen.has(key)) {
+      const message = `A keyed list produced duplicate key \`${text(key)}\`.`
+      throw Object.assign(new Error(`HR004: ${message}`), {
+        name: 'HtmlDiagnosticError',
+        diagnostic: Object.freeze({ code: 'HR004', message }),
+      })
+    }
+    seen.add(key)
+  }
+  return items
+}
 </script>
 
 <template>
@@ -86,28 +239,30 @@ defineExpose({
     aria-label="Notifications"
     aria-live="polite"
     popover="manual"
-    v-bind="$attrs"
+    v-bind="nativeAttrs($attrs)"
+    :data-duration="reflectedProp('duration', 'duration', checkedProps.duration, undefined, false)"
+    :data-placement="reflectedProp('placement', 'placement', checkedProps.placement, undefined, false)"
     :data-ui-toast-region-state="hostState || undefined"
     ref="root"
   >
     <slot />
-    <div
-      v-for="toast in toasts"
-      :key="toast.id"
-      class="toast"
-      :id="toast.id"
-      :role="toast.role"
-      :data-tone="toast.tone"
-      :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}`"
-        ><UiIcon name="x" /></UiIconButton></span>
-    </div>
+    <KeyedBoundary><div
+        v-for="toast in uniqueKeys(toasts, (toast, index, loop) => toast.id)"
+        :key="toast.id"
+        class="toast"
+        :id="toast.id"
+        :role="toast.role"
+        :data-tone="toast.tone"
+        :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}`"
+          ><UiIcon name="x" /></UiIconButton></span>
+      </div></KeyedBoundary>
   </div>
 </template>
 

package/vue/UiTooltip.d.ts

@@ -1,51 +1,101 @@
-type __VLS_Props = {
-    for?: string;
-    hideDelay?: number;
-    inverse?: boolean;
-    open?: boolean;
-    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
-    showDelay?: number;
-    trigger?: 'hover' | 'click' | 'focus';
-};
+import type { PropType } from 'vue';
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (detail: {
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    for: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    hideDelay: {
+        type: PropType<number | null>;
+        default: number;
+    };
+    inverse: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    open: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    placement: {
+        type: PropType<"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | null>;
+        default: string;
+    };
+    showDelay: {
+        type: PropType<number | null>;
+        default: number;
+    };
+    trigger: {
+        type: PropType<"hover" | "click" | "focus" | null>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: (event: CustomEvent<{
         readonly open: boolean;
         readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
-    }) => any;
-    open: (detail: {
+    }>) => any;
+    "update:open": (value: boolean) => any;
+    "update:trigger": (value: string) => any;
+    close: (event: CustomEvent<{
         readonly open: boolean;
         readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
-    }) => any;
-    "update:open": (value: boolean) => any;
-    "update:trigger": (value: "click" | "focus" | "hover") => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: ((detail: {
+    }>) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    for: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    hideDelay: {
+        type: PropType<number | null>;
+        default: number;
+    };
+    inverse: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    open: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
+    placement: {
+        type: PropType<"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | null>;
+        default: string;
+    };
+    showDelay: {
+        type: PropType<number | null>;
+        default: number;
+    };
+    trigger: {
+        type: PropType<"hover" | "click" | "focus" | null>;
+        default: string;
+    };
+}>> & Readonly<{
+    onOpen?: ((event: CustomEvent<{
         readonly open: boolean;
         readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
-    }) => any) | undefined;
-    onOpen?: ((detail: {
+    }>) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:trigger"?: ((value: string) => any) | undefined;
+    onClose?: ((event: CustomEvent<{
         readonly open: boolean;
         readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
-    }) => any) | undefined;
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
-    "onUpdate:trigger"?: ((value: "click" | "focus" | "hover") => any) | undefined;
+    }>) => any) | undefined;
 }>, {
-    trigger: "hover" | "click" | "focus";
-    for: string;
-    hideDelay: number;
-    inverse: boolean;
-    open: boolean;
-    placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
-    showDelay: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    open: boolean | null;
+    trigger: "hover" | "click" | "focus" | null;
+    for: string | null;
+    hideDelay: number | null;
+    inverse: boolean | null;
+    placement: "left" | "right" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | null;
+    showDelay: number | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;