@hina-ui/vue 1.7.1 → 1.7.2

package/dist/types/components/anchor/composables/useScrollSpy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollSpy.d.ts","sourceRoot":"","sources":["../../../../../src/components/anchor/composables/useScrollSpy.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,QAAQ,EAAE;;;;;kBAqD/B,UAAU,MAAM,MAAM;EAU5C"}
+{"version":3,"file":"useScrollSpy.d.ts","sourceRoot":"","sources":["../../../../../src/components/anchor/composables/useScrollSpy.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,QAAQ,EAAE;;;;;kBAkD/B,UAAU,MAAM,MAAM;EAU5C"}

package/dist/types/components/data-table/DataTable.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/data-table/DataTable.vue"],"names":[],"mappings":"AA4WE,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EACf,YAAY,EACZ,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,aAAa,EACd,MAAM,SAAS,CAAA;AAEhB,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,MAAM,EACxC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAguBO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;eA/lB/C,MAAM;mBACF,MAAM;kBACP,aAAa,EAAE;iBAChB,MAAM;wBACC,eAAe,EAAE;mBACtB,MAAM,EAAE;mBACR,YAAY,EAAE;mBACd,YAAY,EAAE;yBACR,MAAM,EAAE;wBACT,MAAM,EAAE;sBACV,MAAM,EAAE;uBACP,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;KAolBoD,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,OAAO,KAAK,EAAE,gBAAgB;;;;;MAAsB,KAAK,IAAI;WACxE,GAAG;;UAEJ,knCAAoC;EAEvC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"DataTable.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/data-table/DataTable.vue"],"names":[],"mappings":"AA6WE,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EACf,YAAY,EACZ,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,aAAa,EACd,MAAM,SAAS,CAAA;AAEhB,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,MAAM,EACxC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAkuBO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;eAjmB/C,MAAM;mBACF,MAAM;kBACP,aAAa,EAAE;iBAChB,MAAM;wBACC,eAAe,EAAE;mBACtB,MAAM,EAAE;mBACR,YAAY,EAAE;mBACd,YAAY,EAAE;yBACR,MAAM,EAAE;wBACT,MAAM,EAAE;sBACV,MAAM,EAAE;uBACP,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;KAslBoD,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,OAAO,KAAK,EAAE,gBAAgB;;;;;MAAsB,KAAK,IAAI;WACxE,GAAG;;UAEJ,knCAAoC;EAEvC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/types/components/data-table/column-sizing-styles.d.ts

@@ -0,0 +1,4 @@
+import type { CSSProperties } from 'vue';
+import type { DataTableColumn } from './types';
+export declare function columnSizingStyles<T extends object>(columns: DataTableColumn<T>[], overrides: Record<string, number>, controls: number): CSSProperties;
+//# sourceMappingURL=column-sizing-styles.d.ts.map

package/dist/types/components/data-table/column-sizing-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-sizing-styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-table/column-sizing-styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,KAAK,CAAA;AAExC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9C,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,EACjD,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,EAC7B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACjC,QAAQ,EAAE,MAAM,GACf,aAAa,CA+Bf"}

package/dist/types/components/data-table/composables/useTableColumns.d.ts

@@ -42,6 +42,7 @@ export declare function useTableColumns<T extends object>(props: DataTableProps<
     resize: (column: DataTableColumn<T>, event: PointerEvent) => void;
     resizeKey: (column: DataTableColumn<T>, event: KeyboardEvent) => void;
     setWidth: (key: string, value: number) => void;
+    constrained: import("vue").ComputedRef<boolean>;
     headerRows: import("vue").ComputedRef<DataTableHeader<T>[][]>;
     tableStyle: import("vue").ComputedRef<CSSProperties>;
     cellStyle: (column: DataTableColumn<T>, head?: boolean) => CSSProperties;

package/dist/types/components/data-table/composables/useTableColumns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableColumns.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-table/composables/useTableColumns.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,GAAG,EACR,KAAK,aAAa,EACnB,MAAM,KAAK,CAAA;AAKZ,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAChF,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAE1E,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,EAC9C,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,EACxB,MAAM,EAAE,eAAe,EACvB,GAAG,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAC3B,OAAO,EAAE,GAAG,CAAC,gBAAgB,GAAG,SAAS,CAAC,EAC1C,QAAQ,EAAE,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,EACtC,OAAO,EAAE,GAAG,CAAC,MAAM,CAAC,EACpB,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC;oBAwEE,eAAe,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAyBd,eAAe,CAAC,CAAC,CAAC,qBAAiB,aAAa;yBAQ/C,OAAO,GAAG,KAAK,SAAS,MAAM,qBAAiB,aAAa;EA0HzF;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,IAAI,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC,CAAC,CAAC,CAAA"}
+{"version":3,"file":"useTableColumns.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-table/composables/useTableColumns.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,GAAG,EACR,KAAK,aAAa,EACnB,MAAM,KAAK,CAAA;AAMZ,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAChF,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAE1E,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,EAC9C,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,EACxB,MAAM,EAAE,eAAe,EACvB,GAAG,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAC3B,OAAO,EAAE,GAAG,CAAC,gBAAgB,GAAG,SAAS,CAAC,EAC1C,QAAQ,EAAE,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,EACtC,OAAO,EAAE,GAAG,CAAC,MAAM,CAAC,EACpB,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC;oBAwEE,eAAe,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAyBd,eAAe,CAAC,CAAC,CAAC,qBAAiB,aAAa;yBAQ/C,OAAO,GAAG,KAAK,SAAS,MAAM,qBAAiB,aAAa;EAuHzF;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,IAAI,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC,CAAC,CAAC,CAAA"}

package/dist/types/components/table/table.variants.d.ts

@@ -54,7 +54,7 @@ export declare const tableCell: import("tailwind-variants").TVReturnType<{
         true: "";
         false: "";
     };
-}, undefined, "", {
+}, undefined, "py-0", {
     align: {
         start: "";
         center: "text-center";

package/dist/types/components/table/table.variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,cAAc,CAAA;AAEpD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAyBvB,CAAA;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA;AAE7D,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAsBpB,CAAA;AAEF,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAA"}
+{"version":3,"file":"table.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,cAAc,CAAA;AAEpD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAwBvB,CAAA;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA;AAE7D,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAsBpB,CAAA;AAEF,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hina-ui/vue",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "description": "An elegant, restrained Vue 3 component library built on Reka UI and Tailwind CSS v4.",
   "keywords": [
     "vue",

package/src/components/anchor/composables/useScrollSpy.ts

@@ -11,7 +11,7 @@ export interface SpyEntry {
 export function useScrollSpy(entries: () => SpyEntry[]) {
   const visible = shallowRef<ReadonlySet<string>>(new Set())
   const targets = shallowRef<Array<HTMLElement | null>>([])
-  const seen = new Set<string>()
+  const intersecting = new Set<string>()
 
   const covered = computed(() => entries().filter(entry => visible.value.has(entry.id)))
   const current = computed(() => covered.value[0]?.id)
@@ -23,18 +23,15 @@ export function useScrollSpy(entries: () => SpyEntry[]) {
   useIntersectionObserver(
     targets,
     observed => {
-      const next = new Set(visible.value)
       for (const entry of observed) {
-        if (entry.isIntersecting) {
-          seen.add(entry.target.id)
-          next.add(entry.target.id)
-        } else if (seen.has(entry.target.id)) {
-          next.delete(entry.target.id)
-        }
+        if (entry.isIntersecting && entry.intersectionRatio > 0) intersecting.add(entry.target.id)
+        else intersecting.delete(entry.target.id)
       }
-      if (next.size) visible.value = next
+      visible.value = intersecting.size
+        ? new Set(intersecting)
+        : new Set(current.value ? [current.value] : [])
     },
-    { rootMargin: '0px 0px -15% 0px' },
+    { rootMargin: '0px 0px -15% 0px', threshold: [0, Number.EPSILON] },
   )
 
   function targetOf(id: string) {
@@ -42,7 +39,7 @@ export function useScrollSpy(entries: () => SpyEntry[]) {
   }
 
   function locate() {
-    seen.clear()
+    intersecting.clear()
     targets.value = entries().map(({ id }) => targetOf(id))
   }
 

package/src/components/data-table/DataTable.vue

@@ -168,6 +168,7 @@
         :class="
           cn(
             tableWrapper({ variant: props.variant, hover: false }),
+            layout.constrained.value && '@container',
             (props.fill || props.height) && 'h-full',
             props.stickyHeader && '[&_thead_th]:sticky [&_thead_th]:z-[3]',
             props.stickyFooter &&

package/src/components/data-table/DataTableHead.vue

@@ -65,7 +65,7 @@
         :style="header.style"
         :class="
           cn(
-            'hn-table-header relative',
+            'hn-table-header relative p-0',
             header.column.headerClass,
             drag.kind.value === 'column' && drag.key.value === header.column.key && 'opacity-40',
           )

package/src/components/data-table/column-sizing-styles.ts

@@ -0,0 +1,40 @@
+import type { CSSProperties } from 'vue'
+import { allocateWidths, columnBounds } from './column-sizing'
+import type { DataTableColumn } from './types'
+
+export function columnSizingStyles<T extends object>(
+  columns: DataTableColumn<T>[],
+  overrides: Record<string, number>,
+  controls: number,
+): CSSProperties {
+  const initial = allocateWidths(columns, overrides, 0)
+  const total = Object.values(initial).reduce((sum, width) => sum + width, controls)
+  const flexible = columns.filter(
+    column =>
+      !column.pin &&
+      overrides[column.key] === undefined &&
+      initial[column.key]! < columnBounds(column).max,
+  )
+  const capacities = flexible
+    .map(column => columnBounds(column).max - initial[column.key]!)
+    .sort((a, b) => a - b)
+  let consumed = 0
+  const shares = capacities.map((capacity, index) => {
+    const share = `calc((100cqi - ${total + consumed}px) / ${capacities.length - index})`
+    consumed += capacity
+    return share
+  })
+  const keys = new Set(flexible.map(column => column.key))
+  return {
+    width: shares.length ? `clamp(${total}px, 100%, ${total + consumed}px)` : `${total}px`,
+    '--hn-table-column-grow': shares.length ? `max(0px, ${shares.join(', ')})` : '0px',
+    ...Object.fromEntries(
+      columns.map((column, index) => [
+        `--hn-table-column-${index}`,
+        keys.has(column.key)
+          ? `min(${columnBounds(column).max}px, calc(${initial[column.key]}px + var(--hn-table-column-grow)))`
+          : `${initial[column.key]}px`,
+      ]),
+    ),
+  }
+}

package/src/components/data-table/composables/useTableColumns.ts

@@ -9,6 +9,7 @@ import {
 } from 'vue'
 import { cssSize } from '../utils'
 import { allocateWidths, pixelWidth } from '../column-sizing'
+import { columnSizingStyles } from '../column-sizing-styles'
 import { useTableResize } from './useTableResize'
 import { useTableResizeHandles } from './useTableResizeHandles'
 import type { DataTableColumn, DataTableHeader, DataTableProps } from '../types'
@@ -200,15 +201,11 @@ export function useTableColumns<T extends object>(
     '--hn-table-viewport-width': available.value ? `${available.value}px` : undefined,
     tableLayout: constrained.value ? 'fixed' : 'auto',
     ...(constrained.value
-      ? {
-          ...Object.fromEntries(
-            ctl.visibleColumns.value.map((column, index) => [
-              `--hn-table-column-${index}`,
-              `${widths.value[column.key]}px`,
-            ]),
-          ),
-          width: `${ctl.visibleColumns.value.reduce((sum, column) => sum + width(column), leading.value * 48 + trailing.value * 72)}px`,
-        }
+      ? columnSizingStyles(
+          ctl.visibleColumns.value,
+          active.value ?? models.columnWidths.value,
+          leading.value * 48 + trailing.value * 72,
+        )
       : {}),
   }))
   function moveColumn(key: string, target: string) {
@@ -240,6 +237,7 @@ export function useTableColumns<T extends object>(
     observer?.disconnect()
   })
   return {
+    constrained,
     headerRows,
     tableStyle,
     cellStyle,

package/src/components/table/table.variants.ts

@@ -4,7 +4,6 @@ export const tableWrapper = tv({
   base: [
     'max-w-full rounded-lg',
     '[&_th]:h-(--hn-row-h) [&_td]:h-(--hn-row-h)',
-    '[&_th]:py-0 [&_td]:py-0',
     '[&_caption>span]:sticky [&_caption>span]:start-[0.75em] [&_caption>span]:inline-block',
     '[&_tbody_tr:last-child_td]:border-b-0',
   ],
@@ -30,7 +29,7 @@ export const tableWrapper = tv({
 export type TableVariants = VariantProps<typeof tableWrapper>
 
 export const tableCell = tv({
-  base: '',
+  base: 'py-0',
   variants: {
     align: {
       start: '',

package/src/styles/data-table.css

@@ -1,5 +1,4 @@
 .hn-table th.hn-table-header {
-  padding: 0;
   user-select: none;
   isolation: isolate;
 }

package/src/styles/typography.css

@@ -63,8 +63,7 @@
     text-align: start;
   }
 
-  & th,
-  & td {
+  & :where(th, td) {
     border-block-end: 1px solid var(--hn-border);
     padding: 0.5em 0.75em;
   }