@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiTable.vue

@@ -1,8 +1,14 @@
-<!-- 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,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
@@ -56,54 +62,11 @@ 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 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-table> has an incompatible root.'), {
-    name: 'HtmlDiagnosticError',
-    diagnostic: Object.freeze({
-      code: 'HR005',
-      message: 'Server markup for <ui-table> has an incompatible root.',
-    }),
-  })
-}
+checkHydratedRoot('div', 'ui-table')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -140,7 +103,7 @@ useComponentHost(() => import('../components/ui-table/ui-table.js'), {
 
 <template>
   <div
-    data-component="ui-table"
+    class="ui-table"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
@@ -158,120 +121,122 @@ useComponentHost(() => import('../components/ui-table/ui-table.js'), {
        wider than it, or taller than a bounded height; while it does, the controller makes the root a named, focusable region so a
        keyboard can scroll it. A cell's data-ui-align (start, center, or end; start by default) sets its
        content along the row, such as end for a column of figures. */
-[data-component~="ui-table"] {
-  --_pad-block: var(--ui-space-1);
-  --_pad-inline: var(--ui-space-3);
-  --_row-size: var(--ui-control-size);
-  display: block;
-  box-sizing: border-box;
-  max-inline-size: 100%;
-  min-inline-size: 0;
-  min-block-size: 0;
-  overflow: auto;
-  overscroll-behavior-inline: contain;
-  /* The sideways scroll fade every Looma scroller uses (see ui-scroll-area). Only the inline edges
-     fade, so a sticky header never fades. */
-  --_ui-scroll-fade-direction: to right;
-  --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
-  mask-image: linear-gradient(
-    var(--_ui-scroll-fade-direction),
-    transparent,
-    #000 var(--_ui-scroll-fade-start),
-    #000 calc(100% - var(--_ui-scroll-fade-end)),
-    transparent
-  );
-  animation:
-    ui-scroll-fade-start linear,
-    ui-scroll-fade-start-hold linear,
-    ui-scroll-fade-end-hold linear,
-    ui-scroll-fade-end linear;
-  animation-timeline: scroll(self inline);
-  animation-range:
-    0 var(--_ui-scroll-fade-size),
-    var(--_ui-scroll-fade-size) calc(100% + 1px),
-    -1px calc(100% - var(--_ui-scroll-fade-size)),
-    calc(100% - var(--_ui-scroll-fade-size)) 100%;
-}
-
-[data-component~="ui-table"]:dir(rtl) {
-  --_ui-scroll-fade-direction: to left;
-}
-
-[data-component~="ui-table"]:focus-visible {
-  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-  outline-offset: calc(-1 * var(--ui-focus-width));
-}
-
-[data-component~="ui-table"][data-ui-table-state~="density=compact"] {
-  --_pad-block: var(--ui-space-0-5);
-  --_pad-inline: var(--ui-space-2);
-  --_row-size: var(--ui-control-size-sm);
-}
 
 /* Separate borders stay on their cells when a sticky header scrolls; collapsed ones stay behind. */
-:slotted(table) {
-  inline-size: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  color: var(--ui-text-primary);
-  font-size: var(--ui-font-size-sm);
-  line-height: var(--ui-line-height);
-  font-variant-numeric: tabular-nums;
-}
-
-:slotted(caption) {
-  padding-block-end: var(--ui-space-2);
-  color: var(--ui-text-secondary);
-  font-weight: var(--ui-font-medium);
-  text-align: start;
-}
 
 /* Every row is at least one control tall, so a row holding a checkbox, select, or input keeps the
    rhythm of the rows around it. A cell's height is its minimum. */
-:slotted(th),
-:slotted(td) {
-  block-size: var(--_row-size);
-  padding: var(--_pad-block) var(--_pad-inline);
-  border-block-end: var(--ui-border-width) solid var(--ui-border-subtle);
-  text-align: start;
-  vertical-align: middle;
-}
-
-:slotted(thead th) {
-  block-size: auto;
-  padding-block: var(--ui-space-2);
-  border-block-end-color: var(--ui-border-divider);
-  background: var(--ui-surface);
-  color: var(--ui-text-muted);
-  font-weight: var(--ui-font-medium);
-  white-space: nowrap;
-  vertical-align: bottom;
-}
-
-:slotted(tbody th) {
-  font-weight: var(--ui-font-medium);
-}
-
-:slotted(tbody tr:last-child > *) {
-  border-block-end-width: 0;
-}
-
-:slotted([data-ui-align="center"]) {
-  text-align: center;
-}
-
-:slotted([data-ui-align="end"]) {
-  text-align: end;
-}
-
-[data-component~="ui-table"][data-ui-table-state~="stickyHeader"] :slotted(thead th) {
-  position: sticky;
-  inset-block-start: 0;
-  z-index: 1;
-}
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-table"][hidden] {
-  display: none;
+
+@scope (.ui-table) {
+  :scope:where(:scope) {
+    --_pad-block: var(--ui-space-1);
+    --_pad-inline: var(--ui-space-3);
+    --_row-size: var(--ui-control-size);
+    display: block;
+    box-sizing: border-box;
+    max-inline-size: 100%;
+    min-inline-size: 0;
+    min-block-size: 0;
+    overflow: auto;
+    overscroll-behavior-inline: contain;
+    /* The sideways scroll fade every Looma scroller uses (see ui-scroll-area). Only the inline edges
+       fade, so a sticky header never fades. */
+    --_ui-scroll-fade-direction: to right;
+    --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+    mask-image: linear-gradient(
+      var(--_ui-scroll-fade-direction),
+      transparent,
+      #000 var(--_ui-scroll-fade-start),
+      #000 calc(100% - var(--_ui-scroll-fade-end)),
+      transparent
+    );
+    animation:
+      ui-scroll-fade-start linear,
+      ui-scroll-fade-start-hold linear,
+      ui-scroll-fade-end-hold linear,
+      ui-scroll-fade-end linear;
+    animation-timeline: scroll(self inline);
+    animation-range:
+      0 var(--_ui-scroll-fade-size),
+      var(--_ui-scroll-fade-size) calc(100% + 1px),
+      -1px calc(100% - var(--_ui-scroll-fade-size)),
+      calc(100% - var(--_ui-scroll-fade-size)) 100%;
+  }
+
+  :scope:where(:scope):is(:dir(rtl)) {
+    --_ui-scroll-fade-direction: to left;
+  }
+
+  :scope:where(:scope):is(:focus-visible) {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: calc(-1 * var(--ui-focus-width));
+  }
+
+  :scope:where(:scope):is([data-ui-table-state~="density=compact"]) {
+    --_pad-block: var(--ui-space-0-5);
+    --_pad-inline: var(--ui-space-2);
+    --_row-size: var(--ui-control-size-sm);
+  }
+  :slotted(table) {
+    inline-size: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    color: var(--ui-text-primary);
+    font-size: var(--ui-font-size-sm);
+    line-height: var(--ui-line-height);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :slotted(caption) {
+    padding-block-end: var(--ui-space-2);
+    color: var(--ui-text-secondary);
+    font-weight: var(--ui-font-medium);
+    text-align: start;
+  }
+  :slotted(th), :slotted(td) {
+    block-size: var(--_row-size);
+    padding: var(--_pad-block) var(--_pad-inline);
+    border-block-end: var(--ui-border-width) solid var(--ui-border-subtle);
+    text-align: start;
+    vertical-align: middle;
+  }
+
+  :slotted(thead th) {
+    block-size: auto;
+    padding-block: var(--ui-space-2);
+    border-block-end-color: var(--ui-border-divider);
+    background: var(--ui-surface);
+    color: var(--ui-text-muted);
+    font-weight: var(--ui-font-medium);
+    white-space: nowrap;
+    vertical-align: bottom;
+  }
+
+  :slotted(tbody th) {
+    font-weight: var(--ui-font-medium);
+  }
+
+  :slotted(tbody tr:last-child > *) {
+    border-block-end-width: 0;
+  }
+
+  :slotted([data-ui-align="center"]) {
+    text-align: center;
+  }
+
+  :slotted([data-ui-align="end"]) {
+    text-align: end;
+  }
+
+  :scope[data-ui-table-state~="stickyHeader"] :slotted(thead th) {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 1;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiTabs.d.ts

@@ -78,8 +78,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     }>) => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
-    label: string | null;
     value: string | null;
+    label: string | null;
     group: string | null;
     stretch: boolean | null;
     density: "comfortable" | "compact" | null;