@threadlabs/looma 0.5.1 → 0.6.0-rc.1

package/vue/UiTree.vue

@@ -1,117 +1,227 @@
-<!-- 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-tree/ui-tree.js";
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from 'vue'
+import * as controllerModule from '../components/ui-tree/ui-tree.js'
 
-defineOptions({ inheritAttrs: false });
+defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<{
-  hoverExpandDelay?: number | null;
-  label?: string | null;
-  maxDepth?: number | null;
-}>(), {
-  hoverExpandDelay: 700,
-  label: "Tree",
-  maxDepth: 0,
-});
+const props = withDefaults(
+  defineProps<{
+    density?: 'comfortable' | 'compact'
+    hoverExpandDelay?: number
+    label?: string
+    maxDepth?: number
+  }>(),
+  {
+    density: 'comfortable',
+    hoverExpandDelay: 700,
+    label: 'Tree',
+    maxDepth: 0,
+  },
+)
 const emit = defineEmits<{
-  "reorder": [detail: { readonly sourceId: string; readonly targetId: string; readonly position: "before" | "inside" | "after"; readonly sourceType: string; readonly targetType: string; readonly sourceScope: string; readonly targetScope: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
-  "reorder-rejected": [detail: { readonly sourceId: string; readonly targetId: string; readonly position: "before" | "inside" | "after"; readonly reason: "max-depth"; readonly maxDepth: number; readonly resultingDepth: number; readonly trigger: "keyboard" | "pointer" | "programmatic" }];
-}>();
-const root = ref<HTMLElement | null>(null);
-const refs: Record<string, Element | undefined> = {};
+  'update:maxDepth': [value: number]
+  reorder: [
+    detail: {
+      readonly sourceId: string
+      readonly targetId: string
+      readonly position: 'before' | 'inside' | 'after'
+      readonly sourceType: string
+      readonly targetType: string
+      readonly sourceScope: string
+      readonly targetScope: string
+      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+    },
+  ]
+  'reorder-rejected': [
+    detail: {
+      readonly sourceId: string
+      readonly targetId: string
+      readonly position: 'before' | 'inside' | 'after'
+      readonly reason: 'max-depth'
+      readonly maxDepth: number
+      readonly resultingDepth: number
+      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+    },
+  ]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.density && `density density=${props.density}`,
+  ].filter(Boolean).join(' ')
+)
 
 /** 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 = {"reorder":{"bubbles":true,"composed":true,"cancelable":false},"reorder-rejected":{"bubbles":true,"composed":true,"cancelable":false}} as Record<string, EventInit | undefined>;
+function dispatch(name: string, detail?: unknown): boolean {
+  const declared: Record<string, EventInit | undefined> = {
+    reorder: { bubbles: true, composed: true, cancelable: false },
+    'reorder-rejected': { bubbles: true, composed: true, cancelable: false },
+  }
   const checks: Record<string, (detail: unknown) => boolean> = {
-    "reorder": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof (detail as Record<string, unknown>)["sourceId"] === "string" && typeof (detail as Record<string, unknown>)["targetId"] === "string" && ((detail as Record<string, unknown>)["position"] === "before" || (detail as Record<string, unknown>)["position"] === "inside" || (detail as Record<string, unknown>)["position"] === "after") && typeof (detail as Record<string, unknown>)["sourceType"] === "string" && typeof (detail as Record<string, unknown>)["targetType"] === "string" && typeof (detail as Record<string, unknown>)["sourceScope"] === "string" && typeof (detail as Record<string, unknown>)["targetScope"] === "string" && ((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) => ["sourceId","targetId","position","sourceType","targetType","sourceScope","targetScope","trigger"].includes(key))),
-    "reorder-rejected": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof (detail as Record<string, unknown>)["sourceId"] === "string" && typeof (detail as Record<string, unknown>)["targetId"] === "string" && ((detail as Record<string, unknown>)["position"] === "before" || (detail as Record<string, unknown>)["position"] === "inside" || (detail as Record<string, unknown>)["position"] === "after") && (detail as Record<string, unknown>)["reason"] === "max-depth" && Number.isInteger((detail as Record<string, unknown>)["maxDepth"]) && Number.isInteger((detail as Record<string, unknown>)["resultingDepth"]) && ((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) => ["sourceId","targetId","position","reason","maxDepth","resultingDepth","trigger"].includes(key))),
-  };
+    reorder: (detail) =>
+      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+      && typeof (detail as Record<string, unknown>)['sourceId'] === 'string'
+      && typeof (detail as Record<string, unknown>)['targetId'] === 'string'
+      && ((detail as Record<string, unknown>)['position'] === 'before'
+        || (detail as Record<string, unknown>)['position'] === 'inside'
+        || (detail as Record<string, unknown>)['position'] === 'after')
+      && typeof (detail as Record<string, unknown>)['sourceType'] === 'string'
+      && typeof (detail as Record<string, unknown>)['targetType'] === 'string'
+      && typeof (detail as Record<string, unknown>)['sourceScope'] === 'string'
+      && typeof (detail as Record<string, unknown>)['targetScope'] === 'string'
+      && ((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) =>
+        [
+          'sourceId',
+          'targetId',
+          'position',
+          'sourceType',
+          'targetType',
+          'sourceScope',
+          'targetScope',
+          'trigger',
+        ].includes(key)
+      ),
+    'reorder-rejected': (detail) =>
+      detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+      && typeof (detail as Record<string, unknown>)['sourceId'] === 'string'
+      && typeof (detail as Record<string, unknown>)['targetId'] === 'string'
+      && ((detail as Record<string, unknown>)['position'] === 'before'
+        || (detail as Record<string, unknown>)['position'] === 'inside'
+        || (detail as Record<string, unknown>)['position'] === 'after')
+      && (detail as Record<string, unknown>)['reason'] === 'max-depth'
+      && Number.isInteger((detail as Record<string, unknown>)['maxDepth'])
+      && Number.isInteger((detail as Record<string, unknown>)['resultingDepth'])
+      && ((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) =>
+        ['sourceId', 'targetId', 'position', 'reason', 'maxDepth', 'resultingDepth', '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.`)
   }
-  (emit as (name: string, detail: unknown) => void)(name, detail);
-  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail })) ?? true;
-};
+  const emitEvent = emit as (name: string, detail: unknown) => void
+  emitEvent(name, detail)
+  if (detail !== null && typeof detail === 'object' && 'maxDepth' in detail) {
+    emitEvent('update:maxDepth', (detail as Record<string, unknown>)['maxDepth'])
+  }
+  return root.value?.dispatchEvent(
+    new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], 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>
-  <div data-component="ui-tree" role="tree" v-bind="$attrs" ref="root"><slot></slot></div>
+  <div
+    data-component="ui-tree"
+    role="tree"
+    v-bind="$attrs"
+    :data-ui-tree-state="hostState || undefined"
+    ref="root"
+  >
+    <slot />
+  </div>
 </template>
 
 <style scoped>
+[data-component~="ui-tree"][data-ui-tree-state~="density=compact"] {
+  --ui-tree-item-min-block-size: var(--ui-control-size-sm);
+  --ui-tree-item-font-size: var(--ui-font-size-sm);
+  --ui-tree-item-label-padding-block: 0;
+}
+
 [data-component~="ui-tree"] {
-      display: block;
-      min-inline-size: 0;
-      padding-inline-start: var(--ui-tree-gutter, 0px);
-    }
+  display: block;
+  min-inline-size: 0;
+  padding-inline-start: var(--ui-tree-gutter, 0px);
+}
 
-    /* A component that sets its display still honours the hidden attribute on its root. */
-    [data-component~="ui-tree"][hidden] {
-      display: none;
-    }
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-tree"][hidden] {
+  display: none;
+}
 </style>

package/vue/UiTreeItem.d.ts

@@ -1,16 +1,16 @@
 type __VLS_Props = {
-    accepts?: string | null;
-    container?: boolean | null;
-    disabled?: boolean | null;
-    dragType?: string | null;
-    dropDepth?: number | null;
-    dropScope?: string | null;
-    expanded?: boolean | null;
-    itemId?: string | null;
-    label?: string | null;
-    selected?: boolean | null;
-    sortable?: boolean | null;
-    subtreeDepth?: number | null;
+    accepts?: string;
+    container?: boolean;
+    disabled?: boolean;
+    dragType?: string;
+    dropDepth?: number;
+    dropScope?: string;
+    expanded?: boolean;
+    itemId?: string;
+    label?: string;
+    selected?: boolean;
+    sortable?: boolean;
+    subtreeDepth?: number;
 };
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
 type __VLS_Slots = {} & {
@@ -23,28 +23,30 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:expanded": (value: boolean) => any;
     expand: (detail: {
         readonly id: string;
         readonly expanded: boolean;
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
     onExpand?: ((detail: {
         readonly id: string;
         readonly expanded: boolean;
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any) | undefined;
 }>, {
-    label: string | null;
-    disabled: boolean | null;
-    selected: boolean | null;
-    expanded: boolean | null;
-    accepts: string | null;
-    container: boolean | null;
-    dragType: string | null;
-    dropScope: string | null;
-    itemId: string | null;
-    sortable: boolean | null;
+    label: string;
+    disabled: boolean;
+    selected: boolean;
+    expanded: boolean;
+    accepts: string;
+    container: boolean;
+    dragType: string;
+    dropScope: string;
+    itemId: string;
+    sortable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;