@threadlabs/looma 0.19.1 → 0.20.0

package/vue/UiMenuItem.vue

@@ -1,49 +1,146 @@
-<!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.11 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import * as controllerModule from '../components/ui-menu-item/ui-menu-item.js'
-import { createDispatch, useComponentHost } from './host'
+import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
+import type { PropType } from 'vue'
+import { createDispatch, preserveRootFocus, useComponentHost } from './host'
+import { checkedProp } from './props'
 import UiIcon from './UiIcon.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(
-  defineProps<{
-    checked?: boolean
-    disabled?: boolean
-    href?: string
-    type?: 'action' | 'checkbox' | 'radio'
-    value?: string
-  }>(),
-  {
-    checked: false,
-    disabled: false,
-    href: '',
-    type: 'action',
-    value: '',
+const props = defineProps({
+  checked: { type: null as unknown as PropType<boolean | null>, default: false },
+  disabled: { type: null as unknown as PropType<boolean | null>, default: false },
+  href: { type: null as unknown as PropType<string | null>, default: '' },
+  type: {
+    type: null as unknown as PropType<'action' | 'checkbox' | 'radio' | null>,
+    default: 'action',
   },
-)
+  value: { type: null as unknown as PropType<string | null>, default: '' },
+})
+const checkedProps = computed(() => ({
+  checked: checkedProp<boolean>(
+    props['checked'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'checked',
+    undefined,
+    undefined,
+  ) as boolean,
+  disabled: checkedProp<boolean>(
+    props['disabled'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'disabled',
+    undefined,
+    undefined,
+  ) as boolean,
+  href: checkedProp<string>(
+    props['href'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'href',
+    undefined,
+    undefined,
+  ) as string,
+  type: checkedProp<'action' | 'checkbox' | 'radio'>(
+    props['type'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'type',
+    undefined,
+    ['action', 'checkbox', 'radio'],
+  ) as 'action' | 'checkbox' | 'radio',
+  value: checkedProp<string>(
+    props['value'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'value',
+    undefined,
+    undefined,
+  ) as string,
+}))
+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 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<{
   'update:checked': [value: boolean]
-  'update:type': [value: 'action' | 'checkbox' | 'radio']
+  'update:type': [value: string]
   'update:value': [value: string]
   change: [
-    detail: {
-      readonly checked: boolean
-      readonly value: string
-      readonly type: 'checkbox' | 'radio'
-      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
-    },
+    event: CustomEvent<
+      {
+        readonly checked: boolean
+        readonly value: string
+        readonly type: 'checkbox' | 'radio'
+        readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+      }
+    >,
   ]
 }>()
 
-const root = ref<HTMLElement | null>(null)
+const rootArmElement = useTemplateRef<HTMLElement>('@html-next/root')
+const root = rootArmElement
+preserveRootFocus(root)
 const internalChecked = ref(false)
+const hydrationNode = hydrationInstance?.vnode.el
+if (
+  typeof window !== 'undefined' && hydrationNode != null
+  && (!(hydrationNode instanceof Element)
+    || hydrationNode.localName
+      !== ((checkedProps.value.href && checkedProps.value.type === 'action') ? 'a' : ('div')))
+) {
+  throw Object.assign(
+    new Error('HR005: Server markup for <ui-menu-item> has an incompatible root.'),
+    {
+      name: 'HtmlDiagnosticError',
+      diagnostic: Object.freeze({
+        code: 'HR005',
+        message: 'Server markup for <ui-menu-item> has an incompatible root.',
+      }),
+    },
+  )
+}
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
-    props.type && `type type=${props.type}`,
+    checkedProps.value.type && 'type',
+    checkedProps.value.type != null && `type=${encodeURIComponent(checkedProps.value.type)}`,
   ].filter(Boolean).join(' ')
 )
 
@@ -66,10 +163,14 @@ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) =>
   modeled: ['checked', 'type', 'value'],
 })
 
-useComponentHost(controllerModule.default, {
+useComponentHost(() => import('../components/ui-menu-item/ui-menu-item.js'), {
   root,
   dispatch,
-  props,
+  controllerSource: {
+    specifier: '../components/ui-menu-item/ui-menu-item.js',
+    definition: './components/ui-menu-item/ui-menu-item.html',
+  },
+  props: checkedProps,
   state: { internalChecked },
 })
 
@@ -89,34 +190,62 @@ function attribute(value: unknown): any {
 
 <template>
   <a
-    v-if="href && type === 'action'"
+    v-if="checkedProps.href && checkedProps.type === 'action'"
     data-component="ui-menu-item"
     role="menuitem"
     tabindex="-1"
-    v-bind="$attrs"
-    :aria-disabled="disabled"
-    :data-value="value"
-    :href="attribute(({ true: null, false: href })[`${disabled}`])"
+    v-bind="nativeAttrs($attrs)"
+    :aria-disabled="checkedProps.disabled ?? undefined"
+    :href="attribute(
+      (({ true: null, false: checkedProps.href }) as Record<string, any>)[
+        `${checkedProps.disabled ?? ''}`
+      ],
+    )"
+    :data-checked="reflectedProp('checked', 'checked', checkedProps.checked, undefined, false)"
+    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
+    :data-type="reflectedProp('type', 'type', checkedProps.type, undefined, false)"
+    :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, true)"
     :data-ui-menu-item-state="hostState || undefined"
-    ref="root"
+    ref="@html-next/root"
   ><span class="label"><slot /></span>
     <span class="shortcut" aria-hidden="true"><slot name="shortcut" /></span></a>
   <div
     v-else
     data-component="ui-menu-item"
     tabindex="-1"
-    v-bind="$attrs"
-    :role="attribute(({ action: 'menuitem', checkbox: 'menuitemcheckbox', radio: 'menuitemradio' })[type])"
-    :aria-checked="typeof (({ action: null, checkbox: internalChecked, radio: internalChecked })[type]) === 'boolean'
-    ? String(({ action: null, checkbox: internalChecked, radio: internalChecked })[type])
-    : attribute(({ action: null, checkbox: internalChecked, radio: internalChecked })[type])"
-    :aria-disabled="disabled"
-    :data-value="value"
+    v-bind="nativeAttrs($attrs)"
+    :role="attribute(
+      (({ action: 'menuitem', checkbox: 'menuitemcheckbox', radio: 'menuitemradio' }) as Record<
+        string,
+        any
+      >)[checkedProps.type],
+    )"
+    :aria-checked="typeof ((({ action: null, checkbox: internalChecked, radio: internalChecked }) as Record<
+      string,
+      any
+    >)[checkedProps.type]) === 'boolean'
+    ? String(
+      (({ action: null, checkbox: internalChecked, radio: internalChecked }) as Record<string, any>)[
+        checkedProps.type
+      ],
+    )
+    : attribute(
+      (({ action: null, checkbox: internalChecked, radio: internalChecked }) as Record<string, any>)[
+        checkedProps.type
+      ],
+    )"
+    :aria-disabled="checkedProps.disabled ?? undefined"
+    :data-checked="reflectedProp('checked', 'checked', checkedProps.checked, undefined, false)"
+    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
+    :data-type="reflectedProp('type', 'type', checkedProps.type, undefined, false)"
+    :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, true)"
     :data-ui-menu-item-state="hostState || undefined"
-    ref="root"
+    ref="@html-next/root"
   >
     <span class="indicator" aria-hidden="true"><UiIcon
-        v-if="type === 'checkbox' && internalChecked"
+        v-if="checkedProps.type === 'checkbox' && internalChecked"
         name="check"
       /></span>
     <span class="label"><slot /></span>

package/vue/UiMeter.d.ts

@@ -1,20 +1,70 @@
-type __VLS_Props = {
-    label?: string;
-    max?: number;
-    segments?: number;
-    size?: 'sm' | 'md';
-    tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
-    value?: number;
-    valueText?: string;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    label: string;
-    size: "sm" | "md";
-    value: number;
-    max: number;
-    tone: "neutral" | "accent" | "info" | "success" | "warning" | "danger";
-    segments: number;
-    valueText: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+import type { PropType } from 'vue';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    label: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    max: {
+        type: PropType<number | null>;
+        default: number;
+    };
+    segments: {
+        type: PropType<number | null>;
+        default: number;
+    };
+    size: {
+        type: PropType<"sm" | "md" | null>;
+        default: string;
+    };
+    tone: {
+        type: PropType<"neutral" | "accent" | "info" | "success" | "warning" | "danger" | null>;
+        default: string;
+    };
+    value: {
+        type: PropType<number | null>;
+        default: number;
+    };
+    valueText: {
+        type: PropType<string | null>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: PropType<string | null>;
+        default: string;
+    };
+    max: {
+        type: PropType<number | null>;
+        default: number;
+    };
+    segments: {
+        type: PropType<number | null>;
+        default: number;
+    };
+    size: {
+        type: PropType<"sm" | "md" | null>;
+        default: string;
+    };
+    tone: {
+        type: PropType<"neutral" | "accent" | "info" | "success" | "warning" | "danger" | null>;
+        default: string;
+    };
+    value: {
+        type: PropType<number | null>;
+        default: number;
+    };
+    valueText: {
+        type: PropType<string | null>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    label: string | null;
+    value: number | null;
+    size: "sm" | "md" | null;
+    max: number | null;
+    tone: "info" | "neutral" | "accent" | "success" | "warning" | "danger" | null;
+    segments: number | null;
+    valueText: string | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/vue/UiMeter.vue

@@ -1,48 +1,174 @@
-<!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.11 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
+import type { PropType } from 'vue'
+import { checkedProp } from './props'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(
-  defineProps<{
-    label?: string
-    max?: number
-    segments?: number
-    size?: 'sm' | 'md'
-    tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
-    value?: number
-    valueText?: string
-  }>(),
-  {
-    label: '',
-    max: 1,
-    segments: 0,
-    size: 'md',
-    tone: 'neutral',
-    value: 0,
-    valueText: '',
+const props = defineProps({
+  label: { type: null as unknown as PropType<string | null>, default: '' },
+  max: { type: null as unknown as PropType<number | null>, default: 1 },
+  segments: { type: null as unknown as PropType<number | null>, default: 0 },
+  size: { type: null as unknown as PropType<'sm' | 'md' | null>, default: 'md' },
+  tone: {
+    type: null as unknown as PropType<
+      'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | null
+    >,
+    default: 'neutral',
   },
+  value: { type: null as unknown as PropType<number | null>, default: 0 },
+  valueText: { type: null as unknown as PropType<string | null>, default: '' },
+})
+const checkedProps = computed(() => ({
+  label: checkedProp<string>(
+    props['label'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'label',
+    undefined,
+    undefined,
+  ) as string,
+  max: checkedProp<number>(
+    props['max'],
+    { kind: 'terminal', name: 'number' },
+    false,
+    'max',
+    undefined,
+    undefined,
+  ) as number,
+  segments: checkedProp<number>(
+    props['segments'],
+    { kind: 'terminal', name: 'number' },
+    false,
+    'segments',
+    undefined,
+    undefined,
+  ) as number,
+  size: checkedProp<'sm' | 'md'>(
+    props['size'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'size',
+    undefined,
+    ['sm', 'md'],
+  ) as 'sm' | 'md',
+  tone: checkedProp<'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'>(
+    props['tone'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'tone',
+    undefined,
+    ['neutral', 'accent', 'info', 'success', 'warning', 'danger'],
+  ) as 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger',
+  value: checkedProp<number>(
+    props['value'],
+    { kind: 'terminal', name: 'number' },
+    false,
+    'value',
+    undefined,
+    undefined,
+  ) as number,
+  valueText: checkedProp<string>(
+    props['valueText'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'valueText',
+    undefined,
+    undefined,
+  ) as string,
+}))
+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 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()
+
+// Vue may return an in-progress computed value on a cyclic read; guard the public value access instead.
+function cycleCheckedComputed<T>(evaluate: () => T) {
+  const value = computed(evaluate)
+  let reading = false
+  return new Proxy(value, {
+    get(target, property) {
+      if (property !== 'value') return Reflect.get(target, property)
+      if (reading) {
+        const message = 'A reactive computed value depends on itself.'
+        throw Object.assign(new Error(`HR006: ${message}`), {
+          name: 'HtmlDiagnosticError',
+          diagnostic: Object.freeze({ code: 'HR006', message }),
+        })
+      }
+      reading = true
+      try {
+        return target.value
+      } finally {
+        reading = false
+      }
+    },
+  })
+}
+const amount = cycleCheckedComputed(() =>
+  ((values: (number | undefined)[]) =>
+    values.includes(undefined)
+      ? undefined
+      : Math.min(
+        Math.max((values as number[])[0]!, (values as number[])[1]!),
+        (values as number[])[2]!,
+      ))([number(0), number(checkedProps.value.value), number(checkedProps.value.max)])
 )
-
-const amount = computed(() => Math.min(Math.max(0, props.value), props.max))
-const percent = computed(() =>
-  ({
+const percent = cycleCheckedComputed(() =>
+  (({
     true: number(
-            number(amount.value) === undefined || number(props.max) === undefined
+            number(amount.value) === undefined || number(checkedProps.value.max) === undefined
               ? undefined
-              : number(amount.value)! / number(props.max)!,
+              : number(amount.value)! / number(checkedProps.value.max)!,
           ) === undefined || number(100) === undefined
       ? undefined
       : number(
-        number(amount.value) === undefined || number(props.max) === undefined
+        number(amount.value) === undefined || number(checkedProps.value.max) === undefined
           ? undefined
-          : number(amount.value)! / number(props.max)!,
+          : number(amount.value)! / number(checkedProps.value.max)!,
       )! * number(100)!,
     false: 0,
-  })[`${props.max > 0}`]
+  }) as Record<string, any>)[
+    `${(number(checkedProps.value.max) === undefined || number(0) === undefined
+      ? undefined
+      : number(checkedProps.value.max)! > number(0)!)}`
+  ]
 )
-const whole = computed(
+const whole = cycleCheckedComputed(
   () => (number(
           number(percent.value) === undefined || number(0.5) === undefined
             ? undefined
@@ -80,12 +206,27 @@ const whole = computed(
         )! % number(1)!,
     )!)
 )
+const hydrationNode = hydrationInstance?.vnode.el
+if (
+  typeof window !== 'undefined' && hydrationNode != null
+  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('span'))
+) {
+  throw Object.assign(new Error('HR005: Server markup for <ui-meter> has an incompatible root.'), {
+    name: 'HtmlDiagnosticError',
+    diagnostic: Object.freeze({
+      code: 'HR005',
+      message: 'Server markup for <ui-meter> has an incompatible root.',
+    }),
+  })
+}
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
-    props.size && `size size=${props.size}`,
-    props.tone && `tone tone=${props.tone}`,
+    checkedProps.value.size && 'size',
+    checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
+    checkedProps.value.tone && 'tone',
+    checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
   ].filter(Boolean).join(' ')
 )
 
@@ -112,16 +253,49 @@ function number(value: unknown): number | undefined {
     data-component="ui-meter"
     role="meter"
     aria-valuemin="0"
-    v-bind="$attrs"
-    :aria-valuemax="max"
+    v-bind="nativeAttrs($attrs)"
+    :aria-valuemax="checkedProps.max ?? undefined"
     :aria-valuenow="amount"
-    :aria-valuetext="typeof (({ true: valueText, false: `${whole ?? ''}%` })[`${valueText !== ''}`]) === 'boolean'
-    ? String(({ true: valueText, false: `${whole ?? ''}%` })[`${valueText !== ''}`])
-    : attribute(({ true: valueText, false: `${whole ?? ''}%` })[`${valueText !== ''}`])"
-    :aria-label="typeof (({ true: label, false: null })[`${label !== ''}`]) === 'boolean'
-    ? String(({ true: label, false: null })[`${label !== ''}`])
-    : attribute(({ true: label, false: null })[`${label !== ''}`])"
-    :data-ui-meter-segments="attribute(({ true: segments, false: null })[`${segments > 1}`])"
+    :aria-valuetext="typeof ((({ true: checkedProps.valueText, false: `${whole ?? ''}%` }) as Record<string, any>)[
+      `${checkedProps.valueText !== ''}`
+    ]) === 'boolean'
+    ? String(
+      (({ true: checkedProps.valueText, false: `${whole ?? ''}%` }) as Record<string, any>)[
+        `${checkedProps.valueText !== ''}`
+      ],
+    )
+    : attribute(
+      (({ true: checkedProps.valueText, false: `${whole ?? ''}%` }) as Record<string, any>)[
+        `${checkedProps.valueText !== ''}`
+      ],
+    )"
+    :aria-label="typeof ((({ true: checkedProps.label, false: null }) as Record<string, any>)[
+      `${checkedProps.label !== ''}`
+    ]) === 'boolean'
+    ? String(
+      (({ true: checkedProps.label, false: null }) as Record<string, any>)[
+        `${checkedProps.label !== ''}`
+      ],
+    )
+    : attribute(
+      (({ true: checkedProps.label, false: null }) as Record<string, any>)[
+        `${checkedProps.label !== ''}`
+      ],
+    )"
+    :data-ui-meter-segments="attribute(
+      (({ true: checkedProps.segments, false: null }) as Record<string, any>)[
+        `${(number(checkedProps.segments) === undefined || number(1) === undefined
+          ? undefined
+          : number(checkedProps.segments)! > number(1)!)}`
+      ],
+    )"
+    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-max="reflectedProp('max', 'max', checkedProps.max, undefined, false)"
+    :data-segments="reflectedProp('segments', 'segments', checkedProps.segments, undefined, false)"
+    :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
+    :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-value="reflectedProp('value', 'value', checkedProps.value, undefined, false)"
+    :data-value-text="reflectedProp('valueText', 'value-text', checkedProps.valueText, undefined, false)"
     :data-ui-meter-state="hostState || undefined"
   ><span class="fill" :style="{ 'inline-size': `${text(percent)}%` }"></span></span>
 </template>