@threadlabs/looma 0.5.1 → 0.6.0-rc.1

package/vue/UiSelect.vue

@@ -1,183 +1,211 @@
-<!-- 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 * as controllerModule from "../components/ui-select/ui-select.js";
-
-defineOptions({ inheritAttrs: false });
-
-const hn = {
-  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),
-  enumerated: (v: unknown): any => typeof v === "boolean" ? String(v) : hn.attr(v),
-};
-
-const props = withDefaults(defineProps<{
-  disabled?: boolean | null;
-  invalid?: boolean | null;
-  multiple?: boolean | null;
-  required?: boolean | null;
-  value?: string | null;
-  modelValue?: string | null;
-}>(), {
-  disabled: false,
-  invalid: false,
-  multiple: false,
-  required: false,
-});
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from 'vue'
+import * as controllerModule from '../components/ui-select/ui-select.js'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean
+    invalid?: boolean
+    multiple?: boolean
+    required?: boolean
+    value?: string
+    modelValue?: string | null
+  }>(),
+  {
+    disabled: false,
+    invalid: false,
+    multiple: false,
+    required: false,
+  },
+)
 const emit = defineEmits<{
-  "update:modelValue": [value: string];
-}>();
-const updateModel = (event: Event): void => emit("update:modelValue", (event.target as HTMLInputElement).value);
-const root = ref<HTMLElement | null>(null);
-const refs: Record<string, Element | undefined> = {};
+  'update:modelValue': [value: string]
+}>()
+const model = computed({
+  get: () => props.modelValue ?? props.value ?? undefined,
+  set: (value) => emit('update:modelValue', value as string),
+})
+
+const root = ref<HTMLElement | null>(null)
 
 /** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-const dispatch = (name: string, detail?: unknown): boolean => {
-  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail })) ?? true;
-};
+function dispatch(name: string, detail?: unknown): boolean {
+  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail }))
+    ?? true
+}
 
 function read(name: string): unknown {
-  return (props as Record<string, unknown>)[name];
+  return (props as Record<string, unknown>)[name]
 }
 
 function write(name: string, value: unknown): boolean {
-  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
+  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()
+})
 </script>
 
 <template>
-  <select data-component="ui-select" v-bind="$attrs" :disabled="hn.attr(props.disabled)" :required="hn.attr(props.required)" :multiple="hn.attr(props.multiple)" :aria-invalid="hn.enumerated(props.invalid)" @change="updateModel" ref="root"><slot></slot></select>
+  <select
+    data-component="ui-select"
+    v-bind="$attrs"
+    :disabled="disabled"
+    :required="required"
+    :multiple="multiple"
+    :aria-invalid="invalid"
+    v-model="model"
+    ref="root"
+  >
+    <slot />
+  </select>
 </template>
 
 <style scoped>
 [data-component~="ui-select"] {
-      box-sizing: border-box;
-      display: inline-block;
-      inline-size: 100%;
-      min-inline-size: 0;
-      min-block-size: var(--ui-control-size-md, 2.5rem);
-      margin: 0;
-      padding: var(--ui-space-2) var(--ui-space-3);
-      border: 1px solid var(--ui-control-border, var(--ui-border-strong));
-      border-radius: var(--ui-select-radius, var(--ui-radius-2));
-      background-color: var(--ui-control-surface, var(--ui-surface-elevated));
-      color: var(--ui-text-primary);
-      color-scheme: light dark;
-      font: inherit;
-      line-height: var(--ui-line-height-md);
-      box-shadow: var(--ui-select-shadow, var(--ui-control-inset));
-      transition:
-        border-color var(--ui-motion-fast) var(--ui-motion-ease),
-        box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
-        background-color var(--ui-motion-fast) var(--ui-motion-ease);
-    }
+  box-sizing: border-box;
+  display: inline-block;
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: var(--ui-control-size-md);
+  margin: 0;
+  padding: var(--ui-space-2) var(--ui-space-3);
+  border: 1px solid var(--ui-control-border, var(--ui-border-strong));
+  border-radius: var(--ui-select-radius, var(--ui-radius-md));
+  background-color: var(--ui-control-surface, var(--ui-surface-elevated));
+  color: var(--ui-text-primary);
+  color-scheme: light dark;
+  font: inherit;
+  line-height: var(--ui-line-height-md);
+  box-shadow: var(--ui-select-shadow, var(--ui-control-inset));
+  transition:
+    border-color var(--ui-motion-fast) var(--ui-motion-ease),
+    box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+    background-color var(--ui-motion-fast) var(--ui-motion-ease);
+}
 
-    /* Single selects draw their own chevron: the native caret cannot be inset or sized consistently.
-     * The root stays a native <s-lect>, so the icon is a background image rather than an element. */
-    [data-component~="ui-select"]:not([multiple]) {
-      appearance: none;
-      padding-inline-end: calc(var(--ui-space-3) + 1.5rem);
-      background-image: var(
-        --ui-select-chevron,
-        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5c58' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
-      );
-      background-repeat: no-repeat;
-      background-position: right var(--ui-space-3) center;
-      background-size: 1.125rem 1.125rem;
-    }
+/* Single selects draw their own chevron: the native caret cannot be inset or sized consistently.
+ * The root stays a native <s-lect>, so the icon is a background image rather than an element. */
+[data-component~="ui-select"]:not([multiple]) {
+  appearance: none;
+  padding-inline-end: calc(var(--ui-space-3) + 1.5rem);
+  background-image: var(
+    --ui-select-chevron,
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5c58' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
+  );
+  background-repeat: no-repeat;
+  background-position: right var(--ui-space-3) center;
+  background-size: 1.125rem 1.125rem;
+}
 
-    [data-component~="ui-select"]:hover:not(:focus):not(:disabled) {
-      border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
-    }
+[data-component~="ui-select"]:hover:not(:focus):not(:disabled) {
+  border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
+}
 
-    [data-component~="ui-select"]:focus-visible {
-      border-color: var(--ui-control-focus, var(--ui-accent-solid));
-      outline: none;
-      box-shadow: var(--ui-select-focus-shadow, var(--ui-control-inset), var(--ui-control-focus-halo-shadow));
-    }
+[data-component~="ui-select"]:focus-visible {
+  border-color: var(--ui-control-focus, var(--ui-accent-solid));
+  outline: none;
+  box-shadow: var(
+    --ui-select-focus-shadow,
+    var(--ui-control-inset),
+    var(--ui-control-focus-halo-shadow)
+  );
+}
 
-    /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
-    [data-component~="ui-select"][aria-invalid="true"],
-    [data-component~="ui-select"]:is(:user-invalid, [data-user-invalid]) {
-      border-color: var(--ui-danger-solid);
-    }
+/* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
+[data-component~="ui-select"][aria-invalid="true"],
+[data-component~="ui-select"]:is(:user-invalid, [data-user-invalid]) {
+  border-color: var(--ui-danger-solid);
+}
 
-    [data-component~="ui-select"]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
-      box-shadow:
-        var(--ui-control-inset),
-        0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
-    }
+[data-component~="ui-select"]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+  box-shadow:
+    var(--ui-control-inset),
+    0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
+}
 
-    [data-component~="ui-select"]:disabled {
-      background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-      color: var(--ui-text-muted);
-      box-shadow: none;
-      cursor: not-allowed;
-    }
+[data-component~="ui-select"]:disabled {
+  background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+  color: var(--ui-text-muted);
+  box-shadow: none;
+  cursor: not-allowed;
+}
 
-    [data-component~="ui-select"][multiple],
-    [data-component~="ui-select"][size]:not([size="1"]) {
-      min-block-size: 7rem;
-      padding: var(--ui-space-2);
-    }
+[data-component~="ui-select"][multiple],
+[data-component~="ui-select"][size]:not([size="1"]) {
+  min-block-size: 7rem;
+  padding: var(--ui-space-2);
+}
 
-    /* A component that sets its display still honours the hidden attribute on its root. */
-    [data-component~="ui-select"][hidden] {
-      display: none;
-    }
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-select"][hidden] {
+  display: none;
+}
 </style>

package/vue/UiSeparator.d.ts

@@ -1,8 +1,8 @@
 type __VLS_Props = {
-    orientation?: "horizontal" | "vertical" | null;
+    orientation?: 'horizontal' | 'vertical';
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    orientation: "horizontal" | "vertical" | null;
+    orientation: "horizontal" | "vertical";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/vue/UiSeparator.vue

@@ -1,38 +1,33 @@
-<!-- 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">
+defineOptions({ inheritAttrs: false })
 
-defineOptions({ inheritAttrs: false });
-
-const hn = {
-  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),
-  enumerated: (v: unknown): any => typeof v === "boolean" ? String(v) : hn.attr(v),
-};
-
-const props = withDefaults(defineProps<{
-  orientation?: "horizontal" | "vertical" | null;
-}>(), {
-  orientation: "horizontal",
-});
-
+withDefaults(
+  defineProps<{
+    orientation?: 'horizontal' | 'vertical'
+  }>(),
+  {
+    orientation: 'horizontal',
+  },
+)
 </script>
 
 <template>
-  <hr data-component="ui-separator" v-bind="$attrs" :aria-orientation="hn.enumerated(props.orientation)">
+  <hr data-component="ui-separator" v-bind="$attrs" :aria-orientation="orientation">
 </template>
 
 <style scoped>
 hr {
-      box-sizing: border-box;
-      align-self: stretch;
-      margin: 0;
-      border: 0;
-      border-block-start: 1px solid var(--ui-separator-color, var(--ui-border-default));
-    }
+  box-sizing: border-box;
+  align-self: stretch;
+  margin: 0;
+  border: 0;
+  border-block-start: 1px solid var(--ui-separator-color, var(--ui-border-default));
+}
 
-    hr[aria-orientation="vertical"] {
-      block-size: auto;
-      border-block-start: 0;
-      border-inline-start: 1px solid var(--ui-separator-color, var(--ui-border-default));
-    }
+hr[aria-orientation="vertical"] {
+  block-size: auto;
+  border-block-start: 0;
+  border-inline-start: 1px solid var(--ui-separator-color, var(--ui-border-default));
+}
 </style>

package/vue/UiSidebar.d.ts

@@ -1,13 +1,13 @@
 type __VLS_Props = {
-    breakpoint?: "sm" | "md" | "lg" | null;
-    collapsed?: boolean | null;
-    maxWidth?: number | null;
-    minWidth?: number | null;
-    resizable?: boolean | null;
-    resizeLabel?: string | null;
-    resizeStep?: number | null;
-    side?: "start" | "end" | null;
-    width?: number | null;
+    breakpoint?: 'sm' | 'md' | 'lg';
+    collapsed?: boolean;
+    maxWidth?: number;
+    minWidth?: number;
+    resizable?: boolean;
+    resizeLabel?: string;
+    resizeStep?: number;
+    side?: 'start' | 'end';
+    width?: number;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -23,6 +23,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
         readonly mode: "docked" | "drawer";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any;
+    "update:width": (value: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onResize?: ((detail: {
         readonly width: number;
@@ -33,16 +34,17 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
         readonly mode: "docked" | "drawer";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any) | undefined;
+    "onUpdate:width"?: ((value: number) => any) | undefined;
 }>, {
-    width: number | null;
-    breakpoint: "sm" | "md" | "lg" | null;
-    collapsed: boolean | null;
-    maxWidth: number | null;
-    minWidth: number | null;
-    resizable: boolean | null;
-    resizeLabel: string | null;
-    resizeStep: number | null;
-    side: "start" | "end" | null;
+    width: number;
+    breakpoint: "sm" | "md" | "lg";
+    collapsed: boolean;
+    maxWidth: number;
+    minWidth: number;
+    resizable: boolean;
+    resizeLabel: string;
+    resizeStep: number;
+    side: "start" | "end";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;