@threadlabs/looma 0.19.1 → 0.21.0

package/vue/UiTreeItem.vue

@@ -1,51 +1,189 @@
-<!-- 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, useTemplateRef } from 'vue'
-import * as controllerModule from '../components/ui-tree-item/ui-tree-item.js'
+import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
+import type { PropType } from 'vue'
 import { createDispatch, useComponentHost } from './host'
+import { checkedProp } from './props'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(
-  defineProps<{
-    accepts?: string
-    container?: boolean
-    disabled?: boolean
-    dragType?: string
-    dropDepth?: number
-    dropScope?: string
-    expanded?: boolean
-    itemId?: string
-    label?: string
-    lazy?: boolean
-    marquee?: boolean
-    selected?: boolean
-    sortable?: boolean
-    subtreeDepth?: number
-  }>(),
-  {
-    accepts: '',
-    container: false,
-    disabled: false,
-    dragType: 'item',
-    dropScope: '',
-    expanded: false,
-    itemId: '',
-    label: '',
-    lazy: false,
-    marquee: false,
-    selected: false,
-    sortable: false,
-  },
-)
+const props = defineProps({
+  accepts: { type: null as unknown as PropType<string | null>, default: '' },
+  container: { type: null as unknown as PropType<boolean | null>, default: false },
+  disabled: { type: null as unknown as PropType<boolean | null>, default: false },
+  dragType: { type: null as unknown as PropType<string | null>, default: 'item' },
+  dropDepth: { type: null as unknown as PropType<number | null>, default: null },
+  dropScope: { type: null as unknown as PropType<string | null>, default: '' },
+  expanded: { type: null as unknown as PropType<boolean | null>, default: false },
+  itemId: { type: null as unknown as PropType<string | null>, default: '' },
+  label: { type: null as unknown as PropType<string | null>, default: '' },
+  lazy: { type: null as unknown as PropType<boolean | null>, default: false },
+  marquee: { type: null as unknown as PropType<boolean | null>, default: false },
+  selected: { type: null as unknown as PropType<boolean | null>, default: false },
+  sortable: { type: null as unknown as PropType<boolean | null>, default: false },
+  subtreeDepth: { type: null as unknown as PropType<number | null>, default: null },
+})
+const checkedProps = computed(() => ({
+  accepts: checkedProp<string>(
+    props['accepts'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'accepts',
+    undefined,
+    undefined,
+  ) as string,
+  container: checkedProp<boolean>(
+    props['container'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'container',
+    undefined,
+    undefined,
+  ) as boolean,
+  disabled: checkedProp<boolean>(
+    props['disabled'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'disabled',
+    undefined,
+    undefined,
+  ) as boolean,
+  dragType: checkedProp<string>(
+    props['dragType'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'dragType',
+    undefined,
+    undefined,
+  ) as string,
+  dropDepth: checkedProp<number>(
+    props['dropDepth'],
+    { kind: 'terminal', name: 'number' },
+    false,
+    'dropDepth',
+    undefined,
+    undefined,
+  ),
+  dropScope: checkedProp<string>(
+    props['dropScope'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'dropScope',
+    undefined,
+    undefined,
+  ) as string,
+  expanded: checkedProp<boolean>(
+    props['expanded'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'expanded',
+    undefined,
+    undefined,
+  ) as boolean,
+  itemId: checkedProp<string>(
+    props['itemId'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'itemId',
+    undefined,
+    undefined,
+  ) as string,
+  label: checkedProp<string>(
+    props['label'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'label',
+    undefined,
+    undefined,
+  ) as string,
+  lazy: checkedProp<boolean>(
+    props['lazy'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'lazy',
+    undefined,
+    undefined,
+  ) as boolean,
+  marquee: checkedProp<boolean>(
+    props['marquee'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'marquee',
+    undefined,
+    undefined,
+  ) as boolean,
+  selected: checkedProp<boolean>(
+    props['selected'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'selected',
+    undefined,
+    undefined,
+  ) as boolean,
+  sortable: checkedProp<boolean>(
+    props['sortable'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'sortable',
+    undefined,
+    undefined,
+  ) as boolean,
+  subtreeDepth: checkedProp<number>(
+    props['subtreeDepth'],
+    { kind: 'terminal', name: 'number' },
+    false,
+    'subtreeDepth',
+    undefined,
+    undefined,
+  ),
+}))
+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:expanded': [value: boolean]
   expand: [
-    detail: {
-      readonly id: string
-      readonly expanded: boolean
-      readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
-    },
+    event: CustomEvent<
+      {
+        readonly id: string
+        readonly expanded: boolean
+        readonly trigger: 'keyboard' | 'pointer' | 'programmatic'
+      }
+    >,
   ]
 }>()
 
@@ -62,12 +200,28 @@ const internalExpanded = ref(false)
 const structuralLevel = ref(1)
 const tabStop = ref(false)
 const isContainer = ref(false)
+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-item> has an incompatible root.'),
+    {
+      name: 'HtmlDiagnosticError',
+      diagnostic: Object.freeze({
+        code: 'HR005',
+        message: 'Server markup for <ui-tree-item> has an incompatible root.',
+      }),
+    },
+  )
+}
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
-    props.selected && 'selected',
-    props.disabled && 'disabled',
+    checkedProps.value.selected && 'selected',
+    checkedProps.value.disabled && 'disabled',
     isContainer.value && 'isContainer',
   ].filter(Boolean).join(' ')
 )
@@ -88,10 +242,14 @@ const dispatch = createDispatch(root, emit as (name: string, detail: unknown) =>
   modeled: ['expanded'],
 })
 
-useComponentHost(controllerModule.default, {
+useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
   root,
   dispatch,
-  props,
+  controllerSource: {
+    specifier: '../components/ui-tree-item/ui-tree-item.js',
+    definition: './components/ui-tree-item/ui-tree-item.html',
+  },
+  props: checkedProps,
   refs: {
     row: rowElement,
     dragHandle: dragHandleElement,
@@ -110,27 +268,35 @@ useComponentHost(controllerModule.default, {
   <div
     data-component="ui-tree-item"
     role="treeitem"
-    v-bind="$attrs"
-    :aria-label="label"
+    v-bind="nativeAttrs($attrs)"
+    :aria-label="checkedProps.label ?? undefined"
     :aria-level="structuralLevel"
-    :aria-selected="selected"
-    :aria-disabled="disabled"
-    :data-item-id="itemId"
-    :data-drag-type="dragType"
-    :data-drop-scope="dropScope"
-    :data-accepts="accepts"
-    :data-drop-depth="dropDepth"
-    :data-subtree-depth="subtreeDepth"
+    :aria-selected="checkedProps.selected ?? undefined"
+    :aria-disabled="checkedProps.disabled ?? undefined"
+    :data-accepts="reflectedProp('accepts', 'accepts', checkedProps.accepts, undefined, true)"
+    :data-container="reflectedProp('container', 'container', checkedProps.container, undefined, false)"
+    :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-drag-type="reflectedProp('dragType', 'drag-type', checkedProps.dragType, undefined, true)"
+    :data-drop-depth="reflectedProp('dropDepth', 'drop-depth', checkedProps.dropDepth, undefined, true)"
+    :data-drop-scope="reflectedProp('dropScope', 'drop-scope', checkedProps.dropScope, undefined, true)"
+    :data-expanded="reflectedProp('expanded', 'expanded', checkedProps.expanded, undefined, false)"
+    :data-item-id="reflectedProp('itemId', 'item-id', checkedProps.itemId, undefined, true)"
+    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
+    :data-lazy="reflectedProp('lazy', 'lazy', checkedProps.lazy, undefined, false)"
+    :data-marquee="reflectedProp('marquee', 'marquee', checkedProps.marquee, undefined, false)"
+    :data-selected="reflectedProp('selected', 'selected', checkedProps.selected, undefined, false)"
+    :data-sortable="reflectedProp('sortable', 'sortable', checkedProps.sortable, undefined, false)"
+    :data-subtree-depth="reflectedProp('subtreeDepth', 'subtree-depth', checkedProps.subtreeDepth, undefined, true)"
     :data-ui-tree-item-state="hostState || undefined"
     ref="root"
   >
     <div class="row" ref="row">
       <button
-        v-if="sortable && !disabled"
+        v-if="checkedProps.sortable && !checkedProps.disabled"
         class="drag-handle"
         type="button"
         draggable="true"
-        :aria-label="`Drag ${label} to reorder`"
+        :aria-label="`Drag ${checkedProps.label ?? ''} to reorder`"
         ref="dragHandle"
       >
         <svg
@@ -154,7 +320,7 @@ useComponentHost(controllerModule.default, {
       <button
         class="disclosure"
         type="button"
-        :disabled="disabled"
+        :disabled="checkedProps.disabled ?? undefined"
         :hidden="!isContainer"
         ref="disclosure"
       >
@@ -164,13 +330,13 @@ useComponentHost(controllerModule.default, {
           class="selection-checkbox"
           type="checkbox"
           tabindex="-1"
-          :checked="selected"
-          :disabled="disabled"
-          :aria-label="`Select ${label}`"
+          :checked.attr="checkedProps.selected ? true : undefined"
+          :disabled="checkedProps.disabled ?? undefined"
+          :aria-label="`Select ${checkedProps.label ?? ''}`"
         ></label>
       <span class="leading" ref="leading"><slot name="leading" /></span>
       <span class="label" ref="label"><span class="label-text" ref="labelText"><slot name="label">{{
-            label
+            checkedProps.label
           }}</slot></span></span>
       <span class="actions" ref="actions"><slot name="actions" /></span>
       <span class="drop-indicator row-drop-indicator" aria-hidden="true"></span>

package/vue/chunks/UiActionBar.js

@@ -1,5 +1,5 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot } from "vue";
+import { createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot } from "vue";
 //#region .build/vue/UiActionBar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "bar" };
 var _hoisted_2 = { class: "tertiary" };
@@ -11,14 +11,27 @@ var UiActionBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 	inheritAttrs: false,
 	__name: "UiActionBar",
 	setup(__props) {
+		function nativeAttrs(attrs) {
+			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 hydrationNode = getCurrentInstance()?.vnode.el;
+		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "div")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-action-bar> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-action-bar> has an incompatible root."
+			})
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-action-bar" }, _ctx.$attrs), [createElementVNode("div", _hoisted_1, [
+			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-action-bar" }, nativeAttrs(_ctx.$attrs)), [createElementVNode("div", _hoisted_1, [
 				createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "tertiary", {}, void 0, true)]),
 				createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "secondary", {}, void 0, true), renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
 				createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "primary", {}, void 0, true)])
 			])], 16);
 		};
 	}
-}), [["__scopeId", "data-v-e04a135e"]]);
+}), [["__scopeId", "data-v-14655296"]]);
 //#endregion
 export { UiActionBar_default as t };

package/vue/chunks/UiAffordanceScope.js

@@ -1,39 +1,94 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { n as useComponentHost, t as createDispatch } from "./host.js";
-import { computed, createElementBlock, defineComponent, mergeProps, openBlock, ref, renderSlot } from "vue";
-import * as controllerModule from "@threadlabs/looma/components/ui-affordance-scope/ui-affordance-scope.js";
+import { r as useComponentHost, t as createDispatch } from "./host.js";
+import { t as checkedProp } from "./props.js";
+import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, watchSyncEffect } from "vue";
 //#region .build/vue/UiAffordanceScope.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-ui-affordance-scope-state"];
+var _hoisted_1 = [
+	"data-guide",
+	"data-near-radius",
+	"data-ui-affordance-scope-state"
+];
 //#endregion
 //#region .build/vue/UiAffordanceScope.vue
 var UiAffordanceScope_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "UiAffordanceScope",
 	props: {
-		guide: { default: "dot" },
-		nearRadius: { default: 16 }
+		guide: {
+			type: null,
+			default: "dot"
+		},
+		nearRadius: {
+			type: null,
+			default: 16
+		}
 	},
 	setup(__props) {
 		const props = __props;
+		const checkedProps = computed(() => ({
+			guide: checkedProp(props["guide"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "guide", void 0, ["dot", "none"]),
+			nearRadius: checkedProp(props["nearRadius"], {
+				kind: "terminal",
+				name: "number"
+			}, false, "nearRadius", void 0, void 0)
+		}));
+		checkedProps.value;
+		watchSyncEffect(() => {
+			checkedProps.value;
+		});
+		function nativeAttrs(attrs) {
+			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, kebab, value, fallback, bound, separator) {
+			const incoming = componentInstance?.vnode.props;
+			if (!bound && (incoming === null || incoming === void 0 || !Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab))) return fallback;
+			if (value === null || value === void 0) return void 0;
+			return Array.isArray(value) && separator !== void 0 ? value.join(separator) : typeof value === "object" ? JSON.stringify(value) : String(value);
+		}
+		const hydrationInstance = getCurrentInstance();
 		const root = ref(null);
 		const engaged = ref(false);
+		const hydrationNode = hydrationInstance?.vnode.el;
+		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "span")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-affordance-scope> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-affordance-scope> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [engaged.value && "engaged", props.guide && `guide guide=${props.guide}`].filter(Boolean).join(" "));
+		const hostState = computed(() => [
+			engaged.value && "engaged",
+			checkedProps.value.guide && "guide",
+			checkedProps.value.guide != null && `guide=${encodeURIComponent(checkedProps.value.guide)}`
+		].filter(Boolean).join(" "));
 		const dispatch = createDispatch(root);
-		useComponentHost(controllerModule.default, {
+		useComponentHost(() => import("@threadlabs/looma/components/ui-affordance-scope/ui-affordance-scope.js"), {
 			root,
 			dispatch,
-			props,
+			controllerSource: {
+				specifier: "../components/ui-affordance-scope/ui-affordance-scope.js",
+				definition: "./components/ui-affordance-scope/ui-affordance-scope.html"
+			},
+			props: checkedProps,
 			state: { engaged }
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-affordance-scope" }, _ctx.$attrs, {
+			return openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-affordance-scope" }, nativeAttrs(_ctx.$attrs), {
+				"data-guide": reflectedProp("guide", "guide", checkedProps.value.guide, void 0, false),
+				"data-near-radius": reflectedProp("nearRadius", "near-radius", checkedProps.value.nearRadius, void 0, false),
 				"data-ui-affordance-scope-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-0ec8d3e6"]]);
+}), [["__scopeId", "data-v-e4d0c94e"]]);
 //#endregion
 export { UiAffordanceScope_default as t };