@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiTree.vue

@@ -1,8 +1,15 @@
-<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { createDispatch, useComponentHost } from './host'
+import {
+  checkHydratedRoot,
+  createDispatch,
+  isInteger,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
@@ -151,38 +158,7 @@ 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 reflectedProp = useReflectedProp()
 const hydrationInstance = getCurrentInstance()
 const emit = defineEmits<{
   'update:maxDepth': [value: number]
@@ -225,19 +201,7 @@ const emit = defineEmits<{
 }>()
 
 const root = ref<HTMLElement | null>(null)
-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-tree> has an incompatible root.'), {
-    name: 'HtmlDiagnosticError',
-    diagnostic: Object.freeze({
-      code: 'HR005',
-      message: 'Server markup for <ui-tree> has an incompatible root.',
-    }),
-  })
-}
+checkHydratedRoot('div', 'ui-tree')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -353,7 +317,7 @@ useComponentHost(() => import('../components/ui-tree/ui-tree.js'), {
 
 <template>
   <div
-    data-component="ui-tree"
+    class="ui-tree"
     role="tree"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
@@ -394,41 +358,44 @@ useComponentHost(() => import('../components/ui-tree/ui-tree.js'), {
 
 /* Reaches the items the way density does, so the setting lives on the tree the way a reader
    thinks about it: this list scrolls its long names. */
-[data-component~="ui-tree"][data-ui-tree-state~="marquee"] {
-  --_ui-default-tree-item-marquee: 1;
-}
 
 /* The items' defaults for this density: an item's own hook still wins. */
-[data-component~="ui-tree"][data-ui-tree-state~="density=compact"] {
-  --_ui-default-tree-item-min-block-size: var(--ui-control-size-sm);
-  --_ui-default-tree-item-font-size: var(--ui-font-size-sm);
-  --_ui-default-tree-item-label-padding-block: 0;
-}
 
-[data-component~="ui-tree"] {
-  /* Hooks do not inherit: the tree hands its own to its items here, and a tree nested in an item
-     starts again from its own settings. */
-  --_ui-tree-indent: var(--ui-tree-indent);
-  --_ui-tree-drop-color: var(--ui-tree-drop-color);
-  --_ui-default-tree-item-marquee: initial;
-  --_ui-default-tree-item-min-block-size: initial;
-  --_ui-default-tree-item-font-size: initial;
-  --_ui-default-tree-item-label-padding-block: initial;
-  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"][data-move-mode]::after {
-  content: "Choose a destination row, or use Up and Down; Right nests inside a branch. Enter places it, Escape cancels.";
-  display: block;
-  padding: var(--ui-space-2);
-  color: var(--ui-text-secondary);
-  font-size: var(--ui-font-size-sm);
-}
+@scope (.ui-tree) {
+  :scope:where(:scope):is([data-ui-tree-state~="marquee"]) {
+    --_ui-default-tree-item-marquee: 1;
+  }
+  :scope:where(:scope):is([data-ui-tree-state~="density=compact"]) {
+    --_ui-default-tree-item-min-block-size: var(--ui-control-size-sm);
+    --_ui-default-tree-item-font-size: var(--ui-font-size-sm);
+    --_ui-default-tree-item-label-padding-block: 0;
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-tree"][hidden] {
-  display: none;
+  :scope:where(:scope) {
+    /* Hooks do not inherit: the tree hands its own to its items here, and a tree nested in an item
+       starts again from its own settings. */
+    --_ui-tree-indent: var(--ui-tree-indent);
+    --_ui-tree-drop-color: var(--ui-tree-drop-color);
+    --_ui-default-tree-item-marquee: initial;
+    --_ui-default-tree-item-min-block-size: initial;
+    --_ui-default-tree-item-font-size: initial;
+    --_ui-default-tree-item-label-padding-block: initial;
+    display: block;
+    min-inline-size: 0;
+    padding-inline-start: var(--ui-tree-gutter, 0px);
+  }
+
+  :scope:where(:scope):is([data-move-mode])::after {
+    content: "Choose a destination row, or use Up and Down; Right nests inside a branch. Enter places it, Escape cancels.";
+    display: block;
+    padding: var(--ui-space-2);
+    color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-sm);
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiTreeItem.d.ts

@@ -1,7 +1,15 @@
 import type { PropType } from 'vue';
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_11: {}, __VLS_13: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_1) => any;
+} & {
+    label?: (props: typeof __VLS_3) => any;
+} & {
+    actions?: (props: typeof __VLS_11) => any;
+} & {
+    default?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     accepts: {
         type: PropType<string | null>;
         default: string;
@@ -143,25 +151,20 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
     selected: boolean | null;
     disabled: boolean | null;
     expanded: boolean | null;
+    container: boolean | null;
+    lazy: boolean | null;
+    sortable: boolean | null;
     accepts: string | null;
     actionsVisible: boolean | null;
-    container: boolean | null;
     dragType: string | null;
     dropDepth: number | null;
     dropScope: string | null;
     itemId: string | null;
-    lazy: boolean | null;
-    sortable: boolean | null;
     subtreeDepth: number | null;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
-    leading?: (props: {}) => any;
-} & {
-    label?: (props: {}) => any;
-} & {
-    actions?: (props: {}) => any;
-} & {
-    default?: (props: {}) => any;
-}>;
+}, {}, {}, {}, 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;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;