@threadlabs/looma 0.10.10 → 0.10.12

package/vue/UiListItem.d.ts

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    current?: boolean;
+    variant?: 'row' | 'card';
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    description?: (props: typeof __VLS_5) => any;
+} & {
+    trailing?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: "row" | "card";
+    current: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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;
+    };
+};

package/vue/UiListItem.js

@@ -0,0 +1,2 @@
+import { t as UiListItem_default } from "./chunks/UiListItem.js";
+export { UiListItem_default as default };

package/vue/UiListItem.vue

@@ -0,0 +1,171 @@
+<!-- Generated by HTML Next 1.0.0-alpha.5 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    current?: boolean
+    variant?: 'row' | 'card'
+  }>(),
+  {
+    current: false,
+    variant: 'row',
+  },
+)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.variant && `variant variant=${props.variant}`,
+    props.current && 'current',
+  ].filter(Boolean).join(' ')
+)
+</script>
+
+<template>
+  <li
+    data-component="ui-list-item"
+    v-bind="$attrs"
+    :aria-current="current"
+    :data-ui-list-item-state="hostState || undefined"
+  >
+    <span class="leading"><slot name="leading" /></span>
+    <span class="content"><span class="title"><slot /></span>
+      <span class="description"><slot name="description" /></span></span>
+    <span class="trailing"><slot name="trailing" /></span>
+  </li>
+</template>
+
+<style scoped>
+/* One entry in a list: something to recognise (leading, usually an icon), its name (the default
+       slot), one line about it (description), and what it offers (trailing, such as a button or a
+       badge). The title and description are one line each and end in an ellipsis, so every item in a
+       list has the same height.
+
+       A link in the title is the whole item: its hit area stretches over the item, so the icon and the
+       padding follow it too, and the item takes the link's focus ring. The link stays a real link, so
+       a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
+       stay their own. */
+[data-component~="ui-list-item"] {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--ui-list-item-gap, var(--ui-space-3));
+  min-inline-size: 0;
+  min-block-size: var(--ui-control-size, 2.5rem);
+  padding-block: var(--ui-list-item-padding-block, var(--ui-space-2));
+  padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-3));
+  border-radius: var(--ui-radius-md);
+  color: var(--ui-text-primary);
+  transition:
+    background-color var(--ui-motion-fast) var(--ui-motion-ease),
+    border-color var(--ui-motion-fast) var(--ui-motion-ease);
+}
+
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"] {
+  padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
+  padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
+  border: 1px solid var(--ui-border-default);
+  border-radius: var(--ui-radius-lg);
+  background: var(--ui-surface-raised);
+}
+
+[data-component~="ui-list-item"]:has(.title a[href]:hover) {
+  background: var(--ui-surface-hover);
+}
+
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"]:has(.title
+  a[href]:hover) {
+  border-color: var(--ui-border-strong);
+}
+
+[data-component~="ui-list-item"][data-ui-list-item-state~="current"] {
+  background: var(--ui-surface-hover);
+}
+
+[data-component~="ui-list-item"]:has(.title a[href]:focus-visible) {
+  box-shadow: 0 0 0 2px var(--ui-focus-ring);
+}
+
+.leading,
+.trailing {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--ui-space-2);
+}
+
+.leading {
+  color: var(--ui-text-muted);
+  font-size: var(--ui-list-item-icon-size, var(--ui-font-size-lg));
+}
+
+/* Trailing controls take their own clicks, above the title link's stretched hit area. */
+.trailing {
+  position: relative;
+  z-index: 1;
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-sm);
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--ui-space-0-5, 2px);
+  min-inline-size: 0;
+}
+
+.title,
+.description {
+  display: block;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.title {
+  font-size: var(--ui-font-size-md);
+  font-weight: var(--ui-font-medium);
+  line-height: var(--ui-line-height-tight);
+}
+
+.description {
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-sm);
+  line-height: var(--ui-line-height-tight);
+}
+
+.title > :slotted(a) {
+  color: inherit;
+  text-decoration: none;
+}
+
+.title > :slotted(a:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.title > :slotted(a[href])::after {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  content: "";
+}
+
+/* An unused region takes no space. */
+.leading:empty,
+.description:empty,
+.trailing:empty {
+  display: none;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-list-item"][hidden] {
+  display: none;
+}
+</style>

package/vue/UiTreeItem.vue

@@ -51,6 +51,8 @@ const root = ref<HTMLElement | null>(null)
 const rowElement = useTemplateRef<HTMLElement>('row')
 const dragHandleElement = useTemplateRef<HTMLElement>('dragHandle')
 const disclosureElement = useTemplateRef<HTMLElement>('disclosure')
+const leadingElement = useTemplateRef<HTMLElement>('leading')
+const labelElement = useTemplateRef<HTMLElement>('label')
 const labelTextElement = useTemplateRef<HTMLElement>('labelText')
 const actionsElement = useTemplateRef<HTMLElement>('actions')
 const childrenElement = useTemplateRef<HTMLElement>('children')
@@ -92,6 +94,8 @@ useComponentHost(controllerModule.default, {
     row: rowElement,
     dragHandle: dragHandleElement,
     disclosure: disclosureElement,
+    leading: leadingElement,
+    label: labelElement,
     labelText: labelTextElement,
     actions: actionsElement,
     children: childrenElement,
@@ -154,8 +158,8 @@ useComponentHost(controllerModule.default, {
       >
         <span class="disclosure-icon" aria-hidden="true"></span>
       </button>
-      <span class="leading"><slot name="leading" /></span>
-      <span class="label"><span class="label-text" ref="labelText"><slot name="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
           }}</slot></span></span>
       <span class="actions" ref="actions"><slot name="actions" /></span>
@@ -296,6 +300,9 @@ useComponentHost(controllerModule.default, {
   block-size: 1em;
   margin-inline-start: var(--ui-space-1);
   color: var(--ui-text-muted);
+  /* Above the label, so a sliding name passes under the icon. */
+  position: relative;
+  z-index: 1;
 }
 
 .leading:empty {
@@ -324,6 +331,9 @@ useComponentHost(controllerModule.default, {
   overflow: hidden;
   padding: var(--ui-tree-item-label-padding-block, var(--ui-space-1))
     var(--ui-tree-item-label-padding-inline, var(--ui-space-2));
+  /* The length of the fade before the controls. The label's one flex child lays out no gap; this
+     is where the controller reads the length in pixels to stop a sliding name before the fade. */
+  column-gap: var(--ui-space-3);
 }
 
 /* Slotted label content fills the cell, so a link is the row's hit area rather than sizing to
@@ -344,6 +354,27 @@ useComponentHost(controllerModule.default, {
   min-inline-size: 0;
 }
 
+/* The controls sit over the label's end, so the text fades out where they begin. The fade is
+   the truncation mark while it shows: an ellipsis under it would read as a second one. */
+.row:hover > .label,
+.row:focus-within > .label {
+  text-overflow: clip;
+  mask-image: linear-gradient(
+    to right,
+    #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+    transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+  );
+}
+
+.row:hover > .label:dir(rtl),
+.row:focus-within > .label:dir(rtl) {
+  mask-image: linear-gradient(
+    to left,
+    #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+    transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+  );
+}
+
 /* A hovered row reads its whole name: the label slides far enough to show the end, waits
    there, and comes back. Only when it actually overflows — the controller measures by how
    much — after the controls have taken their place over its end — and hands over the distance
@@ -355,13 +386,21 @@ useComponentHost(controllerModule.default, {
   will-change: transform;
 }
 
-/* While it slides, the start fades too: the name is leaving the cell at both ends, and a hard
-   edge beside the icon reads as a collision rather than as more text. */
+/* This comes after the hover fade, which it replaces at the same specificity. While the name
+   slides, the label reaches back under the icon (the controller measures how far) with its text
+   where it was, and fades out across that stretch, gone by the icon's middle: the name slips
+   under the icon rather than stopping at a hard edge beside it. */
 .row[data-ui-marquee] > .label {
+  margin-inline-start: calc(-1 * var(--_marquee-lead, 0px));
+  padding-inline-start: calc(
+    var(--_marquee-lead, 0px) + var(--ui-tree-item-label-padding-inline, var(--ui-space-2))
+  );
   mask-image: linear-gradient(
     to right,
-    transparent 0,
-    #000 var(--ui-space-2),
+    transparent calc(var(--_marquee-lead, 0px) / 2),
+    #000 calc(
+      var(--_marquee-lead, 0px) + var(--ui-tree-item-label-padding-inline, var(--ui-space-2))
+    ),
     #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
@@ -370,8 +409,10 @@ useComponentHost(controllerModule.default, {
 .row[data-ui-marquee] > .label:dir(rtl) {
   mask-image: linear-gradient(
     to left,
-    transparent 0,
-    #000 var(--ui-space-2),
+    transparent calc(var(--_marquee-lead, 0px) / 2),
+    #000 calc(
+      var(--_marquee-lead, 0px) + var(--ui-tree-item-label-padding-inline, var(--ui-space-2))
+    ),
     #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
@@ -394,27 +435,6 @@ useComponentHost(controllerModule.default, {
   }
 }
 
-/* The controls sit over the label's end, so the text fades out where they begin. The fade is
-   the truncation mark while it shows: an ellipsis under it would read as a second one. */
-.row:hover > .label,
-.row:focus-within > .label {
-  text-overflow: clip;
-  mask-image: linear-gradient(
-    to right,
-    #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
-    transparent calc(100% - var(--_tree-actions-width, 1.75rem))
-  );
-}
-
-.row:hover > .label:dir(rtl),
-.row:focus-within > .label:dir(rtl) {
-  mask-image: linear-gradient(
-    to left,
-    #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
-    transparent calc(100% - var(--_tree-actions-width, 1.75rem))
-  );
-}
-
 .row:hover > .label > :slotted(*),
 .row:focus-within > .label > :slotted(*) {
   text-overflow: clip;

package/vue/chunks/UiList.js

@@ -0,0 +1,24 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createElementBlock, defineComponent, mergeProps, openBlock, renderSlot } from "vue";
+//#region .build/vue/UiList.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-ui-list-state"];
+//#endregion
+//#region .build/vue/UiList.vue
+var UiList_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiList",
+	props: { layout: { default: "rows" } },
+	setup(__props) {
+		const props = __props;
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.layout && `layout layout=${props.layout}`].filter(Boolean).join(" "));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("ul", mergeProps({
+				"data-component": "ui-list",
+				role: "list"
+			}, _ctx.$attrs, { "data-ui-list-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-935b1197"]]);
+//#endregion
+export { UiList_default as t };

package/vue/chunks/UiListItem.js

@@ -0,0 +1,39 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot } from "vue";
+//#region .build/vue/UiListItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-current", "data-ui-list-item-state"];
+var _hoisted_2 = { class: "leading" };
+var _hoisted_3 = { class: "content" };
+var _hoisted_4 = { class: "title" };
+var _hoisted_5 = { class: "description" };
+var _hoisted_6 = { class: "trailing" };
+//#endregion
+//#region .build/vue/UiListItem.vue
+var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiListItem",
+	props: {
+		current: {
+			type: Boolean,
+			default: false
+		},
+		variant: { default: "row" }
+	},
+	setup(__props) {
+		const props = __props;
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.variant && `variant variant=${props.variant}`, props.current && "current"].filter(Boolean).join(" "));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("li", mergeProps({ "data-component": "ui-list-item" }, _ctx.$attrs, {
+				"aria-current": __props.current,
+				"data-ui-list-item-state": hostState.value || void 0
+			}), [
+				createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "leading")]),
+				createElementVNode("span", _hoisted_3, [createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "default")]), createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "description")])]),
+				createElementVNode("span", _hoisted_6, [renderSlot(_ctx.$slots, "trailing")])
+			], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-d61daf46"]]);
+//#endregion
+export { UiListItem_default as t };

package/vue/chunks/UiTreeItem.js

@@ -22,8 +22,14 @@ var _hoisted_2 = {
 };
 var _hoisted_3 = ["aria-label"];
 var _hoisted_4 = ["disabled", "hidden"];
-var _hoisted_5 = { class: "leading" };
-var _hoisted_6 = { class: "label" };
+var _hoisted_5 = {
+	class: "leading",
+	ref: "leading"
+};
+var _hoisted_6 = {
+	class: "label",
+	ref: "label"
+};
 var _hoisted_7 = {
 	class: "label-text",
 	ref: "labelText"
@@ -79,6 +85,8 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const rowElement = useTemplateRef("row");
 		const dragHandleElement = useTemplateRef("dragHandle");
 		const disclosureElement = useTemplateRef("disclosure");
+		const leadingElement = useTemplateRef("leading");
+		const labelElement = useTemplateRef("label");
 		const labelTextElement = useTemplateRef("labelText");
 		const actionsElement = useTemplateRef("actions");
 		const childrenElement = useTemplateRef("children");
@@ -114,6 +122,8 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				row: rowElement,
 				dragHandle: dragHandleElement,
 				disclosure: disclosureElement,
+				leading: leadingElement,
+				label: labelElement,
 				labelText: labelTextElement,
 				actions: actionsElement,
 				children: childrenElement
@@ -203,8 +213,8 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 						class: "disclosure-icon",
 						"aria-hidden": "true"
 					}, null, -1)])], 8, _hoisted_4),
-					createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "leading")]),
-					createElementVNode("span", _hoisted_6, [createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 512)]),
+					createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "leading")], 512),
+					createElementVNode("span", _hoisted_6, [createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 512)], 512),
 					createElementVNode("span", _hoisted_8, [renderSlot(_ctx.$slots, "actions")], 512),
 					_cache[2] || (_cache[2] = createElementVNode("span", {
 						class: "drop-indicator row-drop-indicator",
@@ -224,6 +234,6 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-a950b4d2"]]);
+}), [["__scopeId", "data-v-3778b642"]]);
 //#endregion
 export { UiTreeItem_default as t };