nuance-ui 0.1.27 → 0.1.28

package/dist/module.json

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

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,5 +1,12 @@
 <script setup>
-import { FlexRender, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getSortedRowModel, useVueTable } from "@tanstack/vue-table";
+import {
+  FlexRender,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  useVueTable
+} from "@tanstack/vue-table";
 import { useVirtualizer } from "@tanstack/vue-virtual";
 import { reactivePick, unrefElement } from "@vueuse/core";
 import { useStyleResolver } from "#imports";
@@ -20,6 +27,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 },
@@ -220,7 +228,8 @@ const renderedSize = computed(() => {
   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
 })));
 defineExpose({
   get $el() {
@@ -374,6 +383,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 +443,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 +495,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.28",
 	"description": "A UI Library for Modern Web Apps, powered by Vue.",
 	"repository": {
 		"type": "git",