@threadlabs/looma 0.5.0 → 0.5.2

package/vue/UiSearchResultRow.vue

@@ -1,124 +1,133 @@
-<!-- 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 } from "vue";
-
-defineOptions({ inheritAttrs: false });
-
-const hn = {
-  t: (v: unknown): boolean => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
-  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),
-};
-
-const props = withDefaults(defineProps<{
-  disabled?: boolean | null;
-  selected?: boolean | null;
-}>(), {
-  disabled: false,
-  selected: false,
-});
-
-/** The resolved values the styles' :host-state() rules test. */
-const hostState = computed(() => (["selected"] as const).flatMap((name) => {
-  const value = read(name);
-  const tokens: string[] = hn.t(value) ? [name] : [];
-  if (typeof value === "string" || typeof value === "number") tokens.push(`${name}=${encodeURIComponent(String(value))}`);
-  return tokens;
-}).join(" "));
-
-function read(name: string): unknown {
-  return (props as Record<string, unknown>)[name];
-}
-
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean
+    selected?: boolean
+  }>(),
+  {
+    disabled: false,
+    selected: false,
+  },
+)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.selected && 'selected',
+  ].filter(Boolean).join(' ')
+)
 </script>
 
 <template>
-  <button data-component="ui-search-result-row" type="button" v-bind="$attrs" :disabled="hn.attr(props.disabled)" :data-ui-search-result-row-state="hostState || undefined"><span class="leading"><slot name="leading"></slot></span><span class="content"><span class="title"><slot name="title"></slot></span><span class="meta"><slot name="meta"></slot></span><span class="excerpt"><slot name="excerpt"></slot></span></span><span class="trailing"><slot name="trailing"></slot></span></button>
+  <button
+    data-component="ui-search-result-row"
+    type="button"
+    v-bind="$attrs"
+    :disabled="disabled"
+    :data-ui-search-result-row-state="hostState || undefined"
+  >
+    <span class="leading"><slot name="leading" /></span>
+    <span class="content"><span class="title"><slot name="title" /></span>
+      <span class="meta"><slot name="meta" /></span>
+      <span class="excerpt"><slot name="excerpt" /></span></span>
+    <span class="trailing"><slot name="trailing" /></span>
+  </button>
 </template>
 
 <style scoped>
 [data-component~="ui-search-result-row"] {
-      appearance: none;
-      inline-size: 100%;
-      min-block-size: var(--ui-search-result-row-min-height, 56px);
-      margin: 0;
-      padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-3, 0.75rem));
-      padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-4, 1rem));
-      display: flex;
-      align-items: flex-start;
-      gap: var(--ui-search-result-row-gap, var(--ui-space-3, 0.75rem));
-      background: var(--ui-search-result-row-bg, transparent);
-      border: none;
-      border-block-end: 1px solid var(--ui-search-result-row-border, var(--ui-border, #e5e7eb));
-      color: inherit;
-      cursor: pointer;
-      text-align: left;
-      transition: background-color var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease);
-    }
-
-    [data-component~="ui-search-result-row"]:last-child {
-      border-block-end: none;
-    }
-
-    [data-component~="ui-search-result-row"]:hover:enabled {
-      background: var(--ui-search-result-row-hover-bg, color-mix(in srgb, var(--ui-surface, #ffffff) 85%, black 3%));
-    }
-
-    [data-component~="ui-search-result-row"][data-ui-search-result-row-state~="selected"] {
-      background: var(
-        --ui-search-result-row-selected-bg,
-        var(--ui-search-result-row-hover-bg, color-mix(in srgb, var(--ui-surface, #ffffff) 85%, black 3%))
-      );
-    }
-
-    [data-component~="ui-search-result-row"]:focus-visible {
-      outline: 2px solid var(--ui-focus-ring, #2563eb);
-      outline-offset: -2px;
-    }
-
-    [data-component~="ui-search-result-row"]:disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
-
-    .leading,
-    .trailing {
-      display: inline-flex;
-      align-items: flex-start;
-      flex-shrink: 0;
-    }
-
-    .content {
-      min-inline-size: 0;
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .title,
-    .meta,
-    .excerpt {
-      display: block;
-      min-inline-size: 0;
-    }
-
-    /* An unused region takes no space. */
-    .leading:empty,
-    .meta:empty,
-    .excerpt:empty,
-    .trailing:empty {
-      display: none;
-    }
-
-    :slotted([slot="title"]),
-    :slotted([slot="meta"]),
-    :slotted([slot="excerpt"]) {
-      display: block;
-      margin: 0;
-    }
-
-    /* A component that sets its display still honours the hidden attribute on its root. */
-    [data-component~="ui-search-result-row"][hidden] {
-      display: none;
-    }
+  appearance: none;
+  inline-size: 100%;
+  min-block-size: var(--ui-search-result-row-min-height, 56px);
+  margin: 0;
+  padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-3, 0.75rem));
+  padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-4, 1rem));
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ui-search-result-row-gap, var(--ui-space-3, 0.75rem));
+  background: var(--ui-search-result-row-bg, transparent);
+  border: none;
+  border-block-end: 1px solid var(--ui-search-result-row-border, var(--ui-border, #e5e7eb));
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+  transition: background-color var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease);
+}
+
+[data-component~="ui-search-result-row"]:last-child {
+  border-block-end: none;
+}
+
+[data-component~="ui-search-result-row"]:hover:enabled {
+  background: var(
+    --ui-search-result-row-hover-bg,
+    color-mix(in srgb, var(--ui-surface, #ffffff) 85%, black 3%)
+  );
+}
+
+[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="selected"] {
+  background: var(
+    --ui-search-result-row-selected-bg,
+    var(
+      --ui-search-result-row-hover-bg,
+      color-mix(in srgb, var(--ui-surface, #ffffff) 85%, black 3%)
+    )
+  );
+}
+
+[data-component~="ui-search-result-row"]:focus-visible {
+  outline: 2px solid var(--ui-focus-ring, #2563eb);
+  outline-offset: -2px;
+}
+
+[data-component~="ui-search-result-row"]:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.leading,
+.trailing {
+  display: inline-flex;
+  align-items: flex-start;
+  flex-shrink: 0;
+}
+
+.content {
+  min-inline-size: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.title,
+.meta,
+.excerpt {
+  display: block;
+  min-inline-size: 0;
+}
+
+/* An unused region takes no space. */
+.leading:empty,
+.meta:empty,
+.excerpt:empty,
+.trailing:empty {
+  display: none;
+}
+
+:slotted([slot="title"]),
+:slotted([slot="meta"]),
+:slotted([slot="excerpt"]) {
+  display: block;
+  margin: 0;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-search-result-row"][hidden] {
+  display: none;
+}
 </style>

package/vue/UiSearchShell.d.ts

@@ -1,8 +1,8 @@
 type __VLS_Props = {
-    dismissible?: boolean | null;
-    label?: string | null;
-    modal?: boolean | null;
-    open?: boolean | null;
+    dismissible?: boolean;
+    label?: string;
+    modal?: boolean;
+    open?: boolean;
 };
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
 type __VLS_Slots = {} & {
@@ -20,17 +20,19 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
         readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any;
+    "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClose?: ((detail: {
         readonly open: boolean;
         readonly reason: "action" | "programmatic" | "light-dismiss" | "escape";
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
-    label: string | null;
-    open: boolean | null;
-    dismissible: boolean | null;
-    modal: boolean | null;
+    label: string;
+    open: boolean;
+    dismissible: boolean;
+    modal: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;