nuance-ui 0.1.27 → 0.1.29

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.0.0"
   },
-  "version": "0.1.27",
+  "version": "0.1.29",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/table/lib.d.ts

@@ -1,6 +1,11 @@
 import type { Updater } from '@tanstack/vue-table';
 import type { Ref } from 'vue';
-import type { TableColumn, TableData } from './model.js';
+import type { TableColumn, TableData, TableProps, TableRow } from './model.js';
 export declare function processColumns<T extends TableData>(columns: TableColumn<T>[]): TableColumn<T>[];
 export declare function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref): void;
 export declare function resolveValue<T, A = undefined>(prop: T | ((arg: A) => T), arg?: A): T | undefined;
+export declare function createRowHandlers<T extends TableData>(props: TableProps<T>): {
+    onRowSelect: (e: Event, row: TableRow<T>) => void;
+    onRowHover: (e: Event, row: TableRow<T> | null) => void;
+    onRowContextmenu: (e: Event, row: TableRow<T>) => void;
+};

package/dist/runtime/components/table/lib.js

@@ -22,3 +22,34 @@ export function resolveValue(prop, arg) {
     return prop(arg);
   return prop;
 }
+export function createRowHandlers(props) {
+  function onRowSelect(e, row) {
+    if (!props?.onSelect)
+      return;
+    const target = e.target;
+    const isInteractive = target.closest("button") || target.closest("a");
+    if (isInteractive)
+      return;
+    e.preventDefault();
+    e.stopPropagation();
+    props.onSelect(e, row);
+  }
+  function onRowHover(e, row) {
+    if (!props?.onHover)
+      return;
+    props.onHover(e, row);
+  }
+  function onRowContextmenu(e, row) {
+    if (!props?.onContextmenu)
+      return;
+    if (Array.isArray(props.onContextmenu))
+      props.onContextmenu.forEach((fn) => fn(e, row));
+    else
+      props.onContextmenu(e, row);
+  }
+  return {
+    onRowSelect,
+    onRowHover,
+    onRowContextmenu
+  };
+}

package/dist/runtime/components/table/model.d.ts

@@ -1,11 +1,11 @@
 import type { RowData, TableMeta } from '@tanstack/table-core';
 import type { CellContext, ColumnDef, ColumnFiltersOptions, ColumnPinningOptions, ColumnSizingOptions, CoreOptions, ExpandedOptions, FacetedOptions, GlobalFilterOptions, GroupingOptions, HeaderContext, PaginationOptions, Row, RowPinningOptions, RowSelectionOptions, SortingOptions, VisibilityOptions } from '@tanstack/vue-table';
 import type { VirtualizerOptions } from '@tanstack/vue-virtual';
-import type { TableHTMLAttributes, WatchOptions } from 'vue';
+import type { CSSProperties, TableHTMLAttributes, WatchOptions } from 'vue';
 import type { NuanceColor } from '../../types/index.js';
 export type TableRow<T> = Row<T>;
 export type TableData = RowData;
-export type TableColumn<T extends TableData, D = unknown> = ColumnDef<T, D>;
+export type TableColumn<T extends TableData, D = any> = ColumnDef<T, D>;
 export interface TableOptions<T extends TableData = TableData> extends Omit<CoreOptions<T>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'> {
     state?: CoreOptions<T>['state'];
     onStateChange?: CoreOptions<T>['onStateChange'];
@@ -63,6 +63,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
      * @defaultValue 'primary'
      */
     loadingColor?: NuanceColor | string;
+    verticalAlign?: CSSProperties['verticalAlign'];
     onSelect?: (e: Event, row: TableRow<T>) => void;
     onHover?: (e: Event, row: TableRow<T> | null) => void;
     onContextmenu?: ((e: Event, row: TableRow<T>) => void) | Array<((e: Event, row: TableRow<T>) => void)>;
@@ -71,6 +72,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
         table?: string;
         thead?: string;
         th?: string;
+        td?: string;
         tr?: string;
         tbody?: string;
         tfoot?: string;

package/dist/runtime/components/table/table.vue

@@ -1,14 +1,18 @@
 <script setup>
-import { FlexRender, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getSortedRowModel, useVueTable } from "@tanstack/vue-table";
-import { useVirtualizer } from "@tanstack/vue-virtual";
+import {
+  FlexRender,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  useVueTable
+} from "@tanstack/vue-table";
 import { reactivePick, unrefElement } from "@vueuse/core";
 import { useStyleResolver } from "#imports";
-import defu from "defu";
-import { computed, ref, toRef, useTemplateRef, watch } from "vue";
+import { computed, ref, useTemplateRef, watch } from "vue";
 import { getThemeColor } from "../../utils";
 import Box from "../box.vue";
-import TableRow from "./_ui/table-row.vue";
-import { processColumns, resolveValue, valueUpdater } from "./lib";
+import { createRowHandlers, processColumns, resolveValue, valueUpdater } from "./lib";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   data: { type: Array, required: false },
@@ -20,6 +24,7 @@ const props = defineProps({
   sticky: { type: [Boolean, String], required: false },
   loading: { type: Boolean, required: false },
   loadingColor: { type: null, required: false },
+  verticalAlign: { type: null, required: false },
   onSelect: { type: Function, required: false },
   onHover: { type: Function, required: false },
   onContextmenu: { type: [Function, Array], required: false },
@@ -196,32 +201,11 @@ const rows = computed(() => table.getRowModel().rows);
 watch(() => props.data, () => {
   data.value = props.data ? [...props.data] : [];
 }, props.watchOptions);
-const virtualizerProps = toRef(() => defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
-  estimateSize: 65,
-  overscan: 12
-}));
-const virtualizer = !!props.virtualize && useVirtualizer({
-  ...virtualizerProps.value,
-  get count() {
-    return rows.value.length;
-  },
-  getScrollElement: () => unrefElement(rootRef),
-  estimateSize: (index) => {
-    const estimate = virtualizerProps.value.estimateSize;
-    return typeof estimate === "function" ? estimate(index) : estimate;
-  }
-});
-const renderedSize = computed(() => {
-  if (!virtualizer)
-    return 0;
-  const virtualItems = virtualizer.value.getVirtualItems();
-  if (!virtualItems?.length)
-    return 0;
-  return virtualItems.reduce((sum, item) => sum + item.size, 0);
-});
 const style = computed(() => useStyleResolver((theme) => ({
-  "--table-loader-color": props.loadingColor ? getThemeColor(props.loadingColor, theme) : void 0
+  "--table-loader-color": props.loadingColor ? getThemeColor(props.loadingColor, theme) : void 0,
+  "--vertical-align": props.verticalAlign
 })));
+const { onRowContextmenu, onRowHover, onRowSelect } = createRowHandlers(props);
 defineExpose({
   get $el() {
     return unrefElement(rootRef);
@@ -232,15 +216,7 @@ defineExpose({
 </script>
 
 <template>
-	<Box
-		ref='rootRef'
-		:class='[$style.root, props.classes?.root]'
-		:style='[
-  virtualizer ? { height: `${virtualizer.getTotalSize()}px` } : void 0,
-  style
-]'
-		:mod='{ virtualize: !!virtualizer }'
-	>
+	<Box ref='rootRef' :class='[$style.root, props.classes?.root]' :style>
 		<table ref='tableRef' :class='[$style.table, props.classes?.table]'>
 			<caption v-if='caption || $slots.caption' :class='props.classes?.caption'>
 				<slot name='caption'>
@@ -265,8 +241,15 @@ defineExpose({
 						:scope="header.colSpan > 1 ? 'colgroup' : 'col'"
 						:colspan='header.colSpan > 1 ? header.colSpan : void 0'
 						:rowspan='header.rowSpan > 1 ? header.rowSpan : void 0'
-						:class='[$style.th, props.classes?.th, resolveValue(header.column.columnDef.meta?.class?.th, header)]'
-						:style='resolveValue(header.column.columnDef.meta?.style?.th, header)'
+						:class='[
+  $style.th,
+  props.classes?.th,
+  resolveValue(header.column.columnDef.meta?.class?.th, header)
+]'
+						:style='[
+  { width: header.getSize() !== 150 ? `${header.getSize()}px` : void 0 },
+  resolveValue(header.column.columnDef.meta?.style?.th, header)
+]'
 					>
 						<slot :name='`${header.id}-header`' v-bind='header.getContext()'>
 							<FlexRender
@@ -285,36 +268,47 @@ defineExpose({
 				<slot name='body-top' />
 
 				<template v-if='rows.length'>
-					<template v-if='virtualizer'>
-						<template v-for='(virtualRow, index) in virtualizer.getVirtualItems()' :key='rows[virtualRow.index]?.id'>
-							<TableRow
-								:row='rows[virtualRow.index]'
-								:class='[$style.tr, props.classes?.tr, resolveValue(table.options.meta?.class?.tr, virtualRow)]'
-								:style='[
-  {
-    height: `${virtualRow.size}px`,
-    transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`
-  },
-  resolveValue(table.options.meta?.style?.tr, virtualRow)
-]'
-								:on-select='props?.onSelect'
-								:on-hover='props?.onHover'
-								:on-contextmenu='props?.onContextmenu'
-							/>
-						</template>
-					</template>
-
-					<template v-else>
-						<TableRow
-							v-for='row in rows'
-							:key='row.id'
-							:row='row'
+					<template v-for='row in rows' :key='row.id'>
+						<Box
+							is='tr'
+							:mod='{
+  selected: row.getIsSelected(),
+  expanded: row.getIsExpanded(),
+  selectable: !!onSelect || !!onHover || !!onContextmenu
+}'
+							:role="onSelect ? 'button' : void 0"
+							:tabindex='onSelect ? 0 : void 0'
 							:class='[$style.tr, props.classes?.tr, resolveValue(table.options.meta?.class?.tr, row)]'
 							:style='resolveValue(table.options.meta?.style?.tr, row)'
-							:on-select='props?.onSelect'
-							:on-hover='props?.onHover'
-							:on-contextmenu='props?.onContextmenu'
-						/>
+							@click='onRowSelect($event, row)'
+							@pointerenter='onRowHover($event, row)'
+							@pointerleave='onRowHover($event, null)'
+							@contextmenu='onRowContextmenu($event, row)'
+						>
+							<Box
+								is='td'
+								v-for='cell in row.getVisibleCells()'
+								:key='cell.id'
+								:mod='{ pinned: cell.column.getIsPinned() }'
+								:colspan='resolveValue(cell.column.columnDef.meta?.colspan?.td, cell)'
+								:rowspan='resolveValue(cell.column.columnDef.meta?.rowspan?.td, cell)'
+								:class='resolveValue(cell.column.columnDef.meta?.class?.td, cell)'
+								:style='[
+  { width: cell.column.getSize() !== 150 ? `${cell.column.getSize()}px` : void 0 },
+  resolveValue(cell.column.columnDef.meta?.style?.td, cell)
+]'
+							>
+								<slot :name='`${cell.column.id}-cell`' v-bind='cell.getContext()'>
+									<FlexRender :render='cell.column.columnDef.cell' :props='cell.getContext()' />
+								</slot>
+							</Box>
+						</Box>
+
+						<tr v-if='row.getIsExpanded()'>
+							<td :colspan='row.getAllCells().length'>
+								<slot name='expanded' :row='row' />
+							</td>
+						</tr>
 					</template>
 				</template>
 
@@ -339,7 +333,6 @@ defineExpose({
 				is='tfoot'
 				v-if='hasFooter'
 				:class='[$style.tfoot, props.classes?.tfoot]'
-				:style='virtualizer ? { transform: `translateY(${virtualizer.getTotalSize() - renderedSize}px)` } : void 0'
 				:mod='{ sticky: props.sticky === "footer" || props.sticky === true }'
 			>
 				<tr :class='[$style.separator, props.classes?.separator]' />
@@ -374,6 +367,9 @@ defineExpose({
 	--table-color: var(--color-primary-4);
 	--table-loader-color: var(--table-color);
 	--table-loader-animation: carousel 2s ease-in-out infinite;
+	--table-padding-x: .5rem;
+	--table-padding-y: .5rem;
+	--vertical-align: baseline;
 
 	@mixin where-light {
 		--table-active-bg: alpha(var(--color-slate-1), .5);
@@ -431,10 +427,11 @@ defineExpose({
 
 .th {
 	font-weight: 600;
-	padding-block: .75rem;
-	padding-inline: 1rem;
+	padding-block: var(--table-padding-y);
+	padding-inline: var(--table-padding-x);
 	text-align: left;
 	color: var(--table-c);
+	vertical-align: var(--vertical-align);
 
 	&:has([role='checkbox']) {
 		padding-inline-end: 0;
@@ -482,8 +479,10 @@ defineExpose({
 
 	td {
 		white-space: nowrap;
-		padding: 1rem;
+		padding-block: var(--table-padding-y);
+		padding-inline: var(--table-padding-x);
 		color: var(--table-c);
+		vertical-align: var(--vertical-align);
 
 		&:has([role='checkbox']) {
 			padding-inline-end: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nuance-ui",
-	"version": "0.1.27",
+	"version": "0.1.29",
 	"description": "A UI Library for Modern Web Apps, powered by Vue.",
 	"repository": {
 		"type": "git",

package/dist/runtime/components/table/_ui/table-row.d.vue.ts

@@ -1,35 +0,0 @@
-import type { Row } from '@tanstack/vue-table';
-import type { TableData, TableRow } from '../model.js';
-export interface TableRowProps<T extends TableData> {
-    row: Row<T>;
-    onSelect?: (e: Event, row: TableRow<T>) => void;
-    onHover?: (e: Event, row: TableRow<T> | null) => void;
-    onContextmenu?: ((e: Event, row: TableRow<T>) => void) | Array<((e: Event, row: TableRow<T>) => void)>;
-}
-declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<TableRowProps<T>> & import("vue").PublicProps;
-    expose: (exposed: {}) => void;
-    attrs: any;
-    slots: {
-        [x: `${string}-cell`]: ((props: {
-            cell: import("@tanstack/table-core").Cell<T, unknown>;
-            column: import("@tanstack/table-core").Column<T, unknown>;
-            getValue: import("@tanstack/table-core").Getter<unknown>;
-            renderValue: import("@tanstack/table-core").Getter<unknown>;
-            row: Row<T>;
-            table: import("@tanstack/table-core").Table<T>;
-        }) => any) | undefined;
-    } & {
-        expanded?: (props: {
-            row: Row<T>;
-        }) => any;
-    };
-    emit: {};
-}>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
-};
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T as K]: T[K];
-} & {};

package/dist/runtime/components/table/_ui/table-row.vue

@@ -1,74 +0,0 @@
-<script setup>
-import { FlexRender } from "@tanstack/vue-table";
-import Box from "../../box.vue";
-import { resolveValue } from "../lib";
-const { row, onSelect, onHover, onContextmenu } = defineProps({
-  row: { type: Object, required: true },
-  onSelect: { type: Function, required: false },
-  onHover: { type: Function, required: false },
-  onContextmenu: { type: [Function, Array], required: false }
-});
-function onRowSelect(e, row2) {
-  if (!onSelect)
-    return;
-  const target = e.target;
-  const isInteractive = target.closest("button") || target.closest("a");
-  if (isInteractive)
-    return;
-  e.preventDefault();
-  e.stopPropagation();
-  onSelect(e, row2);
-}
-function onRowHover(e, row2) {
-  if (!onHover)
-    return;
-  onHover(e, row2);
-}
-function onRowContextmenu(e, row2) {
-  if (!onContextmenu)
-    return;
-  if (Array.isArray(onContextmenu))
-    onContextmenu.forEach((fn) => fn(e, row2));
-  else
-    onContextmenu(e, row2);
-}
-</script>
-
-<template>
-	<Box
-		is='tr'
-		v-bind='$attrs'
-		:mod='{
-  selected: row.getIsSelected(),
-  expanded: row.getIsExpanded(),
-  selectable: !!onSelect || !!onHover || !!onContextmenu
-}'
-		:role="onSelect ? 'button' : void 0"
-		:tabindex='onSelect ? 0 : void 0'
-		@click='onRowSelect($event, row)'
-		@pointerenter='onRowHover($event, row)'
-		@pointerleave='onRowHover($event, null)'
-		@contextmenu='onRowContextmenu($event, row)'
-	>
-		<Box
-			is='td'
-			v-for='cell in row.getVisibleCells()'
-			:key='cell.id'
-			:mod='{ pinned: cell.column.getIsPinned() }'
-			:colspan='resolveValue(cell.column.columnDef.meta?.colspan?.td, cell)'
-			:rowspan='resolveValue(cell.column.columnDef.meta?.rowspan?.td, cell)'
-			:class='resolveValue(cell.column.columnDef.meta?.class?.td, cell)'
-			:style='resolveValue(cell.column.columnDef.meta?.style?.td, cell)'
-		>
-			<slot :name='`${cell.column.id}-cell`' v-bind='cell.getContext()'>
-				<FlexRender :render='cell.column.columnDef.cell' :props='cell.getContext()' />
-			</slot>
-		</Box>
-	</Box>
-
-	<tr v-if='row.getIsExpanded()'>
-		<td :colspan='row.getAllCells().length'>
-			<slot name='expanded' :row='row' />
-		</td>
-	</tr>
-</template>

package/dist/runtime/components/table/_ui/table-row.vue.d.ts

@@ -1,35 +0,0 @@
-import type { Row } from '@tanstack/vue-table';
-import type { TableData, TableRow } from '../model.js';
-export interface TableRowProps<T extends TableData> {
-    row: Row<T>;
-    onSelect?: (e: Event, row: TableRow<T>) => void;
-    onHover?: (e: Event, row: TableRow<T> | null) => void;
-    onContextmenu?: ((e: Event, row: TableRow<T>) => void) | Array<((e: Event, row: TableRow<T>) => void)>;
-}
-declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<TableRowProps<T>> & import("vue").PublicProps;
-    expose: (exposed: {}) => void;
-    attrs: any;
-    slots: {
-        [x: `${string}-cell`]: ((props: {
-            cell: import("@tanstack/table-core").Cell<T, unknown>;
-            column: import("@tanstack/table-core").Column<T, unknown>;
-            getValue: import("@tanstack/table-core").Getter<unknown>;
-            renderValue: import("@tanstack/table-core").Getter<unknown>;
-            row: Row<T>;
-            table: import("@tanstack/table-core").Table<T>;
-        }) => any) | undefined;
-    } & {
-        expanded?: (props: {
-            row: Row<T>;
-        }) => any;
-    };
-    emit: {};
-}>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
-};
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T as K]: T[K];
-} & {};