warqadui 0.0.27 → 0.0.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.mts +2 -0
  2. package/dist/index.d.ts +2 -0
  3. package/dist/index.js +59 -8
  4. package/dist/index.mjs +59 -8
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -423,6 +423,8 @@ defaultExpanded, onChange, selectable, filterables, }: DataTableProps<TData, TVa
423
423
 
424
424
  declare module "@tanstack/react-table" {
425
425
  interface ColumnMeta<TData extends RowData, TValue> {
426
+ className?: string;
427
+ width?: string | number;
426
428
  field?: (props: {
427
429
  value: any;
428
430
  onChange: (value: any) => void;
package/dist/index.d.ts CHANGED
@@ -423,6 +423,8 @@ defaultExpanded, onChange, selectable, filterables, }: DataTableProps<TData, TVa
423
423
 
424
424
  declare module "@tanstack/react-table" {
425
425
  interface ColumnMeta<TData extends RowData, TValue> {
426
+ className?: string;
427
+ width?: string | number;
426
428
  field?: (props: {
427
429
  value: any;
428
430
  onChange: (value: any) => void;
package/dist/index.js CHANGED
@@ -3384,7 +3384,18 @@ function PostTable({
3384
3384
  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("thead", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-b border-gray-200 dark:border-zinc-800", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
3385
3385
  "th",
3386
3386
  {
3387
- className: `${rowPadding} text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" ? "w-px whitespace-nowrap" : ""}`,
3387
+ className: cn(
3388
+ rowPadding,
3389
+ "text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left",
3390
+ verticalLines && "border-x border-gray-200 dark:border-zinc-800",
3391
+ header.id === "_index" && "w-px whitespace-nowrap",
3392
+ header.column.columnDef.meta?.className
3393
+ ),
3394
+ style: {
3395
+ width: header.column.columnDef.meta?.width ?? header.column.getSize(),
3396
+ minWidth: header.column.columnDef.meta?.width ?? header.column.columnDef.minSize,
3397
+ maxWidth: header.column.columnDef.meta?.width ?? header.column.columnDef.maxSize
3398
+ },
3388
3399
  children: header.isPlaceholder ? null : (0, import_react_table2.flexRender)(
3389
3400
  header.column.columnDef.header,
3390
3401
  header.getContext()
@@ -3397,10 +3408,19 @@ function PostTable({
3397
3408
  "tr",
3398
3409
  {
3399
3410
  className: "border-b border-gray-100 dark:border-zinc-800/50",
3400
- children: columns.map((_2, j) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
3411
+ children: columns.map((col, j) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
3401
3412
  "td",
3402
3413
  {
3403
- className: `${rowPadding} ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800/50" : ""}`,
3414
+ className: cn(
3415
+ rowPadding,
3416
+ verticalLines && "border-x border-gray-200 dark:border-zinc-800/50",
3417
+ col.meta?.className
3418
+ ),
3419
+ style: {
3420
+ width: col.meta?.width ?? col.getSize?.() ?? col.size,
3421
+ minWidth: col.meta?.width ?? col.minSize,
3422
+ maxWidth: col.meta?.width ?? col.maxSize
3423
+ },
3404
3424
  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-4 bg-gray-100 dark:bg-zinc-800 rounded animate-pulse w-full" })
3405
3425
  },
3406
3426
  `skeleton-cell-${j}`
@@ -3426,7 +3446,18 @@ function PostTable({
3426
3446
  children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
3427
3447
  "td",
3428
3448
  {
3429
- className: `${rowPadding} text-sm text-gray-700 dark:text-gray-200 ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${cell.column.id === "_index" ? "w-px whitespace-nowrap" : ""}`,
3449
+ className: cn(
3450
+ rowPadding,
3451
+ "text-sm text-gray-700 dark:text-gray-200",
3452
+ verticalLines && "border-x border-gray-200 dark:border-zinc-800",
3453
+ cell.column.id === "_index" && "w-px whitespace-nowrap",
3454
+ cell.column.columnDef.meta?.className
3455
+ ),
3456
+ style: {
3457
+ width: cell.column.columnDef.meta?.width ?? cell.column.getSize(),
3458
+ minWidth: cell.column.columnDef.meta?.width ?? cell.column.columnDef.minSize,
3459
+ maxWidth: cell.column.columnDef.meta?.width ?? cell.column.columnDef.maxSize
3460
+ },
3430
3461
  children: (0, import_react_table2.flexRender)(
3431
3462
  cell.column.columnDef.cell,
3432
3463
  cell.getContext()
@@ -3555,14 +3586,23 @@ function PostTable({
3555
3586
  column.id !== "_index" ? "cursor-text" : "",
3556
3587
  verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : "",
3557
3588
  column.id === "_index" ? "w-px whitespace-nowrap" : "",
3558
- hasError && "ring-1 ring-inset ring-red-500"
3589
+ hasError && "ring-1 ring-inset ring-red-500",
3590
+ column.columnDef.meta?.className
3559
3591
  ),
3592
+ style: {
3593
+ width: column.columnDef.meta?.width ?? column.getSize(),
3594
+ minWidth: column.columnDef.meta?.width ?? column.columnDef.minSize,
3595
+ maxWidth: column.columnDef.meta?.width ?? column.columnDef.maxSize
3596
+ },
3560
3597
  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
3561
3598
  "div",
3562
3599
  {
3563
3600
  className: cn(
3564
- "flex items-center relative group w-full",
3565
- column.id === "_index" ? "" : "min-w-32 h-9"
3601
+ "flex items-center relative group w-full min-w-0",
3602
+ column.id === "_index" ? "" : "h-9",
3603
+ !column.columnDef.meta?.className?.match(
3604
+ /\b(w-|min-w-|max-w-)/
3605
+ ) && !column.columnDef.meta?.width && "min-w-32"
3566
3606
  ),
3567
3607
  onKeyDown: (e) => {
3568
3608
  if (e.key === "Enter") {
@@ -3616,7 +3656,18 @@ function PostTable({
3616
3656
  ) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tfoot", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-t border-gray-200 dark:border-zinc-800", children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { children: footerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
3617
3657
  "td",
3618
3658
  {
3619
- className: `${rowPadding} text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" ? "w-px whitespace-nowrap" : ""}`,
3659
+ className: cn(
3660
+ rowPadding,
3661
+ "text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left",
3662
+ verticalLines && "border-x border-gray-200 dark:border-zinc-800",
3663
+ header.id === "_index" && "w-px whitespace-nowrap",
3664
+ header.column.columnDef.meta?.className
3665
+ ),
3666
+ style: {
3667
+ width: header.column.columnDef.meta?.width ?? header.column.getSize(),
3668
+ minWidth: header.column.columnDef.meta?.width ?? header.column.columnDef.minSize,
3669
+ maxWidth: header.column.columnDef.meta?.width ?? header.column.columnDef.maxSize
3670
+ },
3620
3671
  children: header.isPlaceholder ? null : (0, import_react_table2.flexRender)(
3621
3672
  header.column.columnDef.footer,
3622
3673
  header.getContext()
package/dist/index.mjs CHANGED
@@ -3342,7 +3342,18 @@ function PostTable({
3342
3342
  /* @__PURE__ */ jsx24("thead", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-b border-gray-200 dark:border-zinc-800", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx24("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx24(
3343
3343
  "th",
3344
3344
  {
3345
- className: `${rowPadding} text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" ? "w-px whitespace-nowrap" : ""}`,
3345
+ className: cn(
3346
+ rowPadding,
3347
+ "text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left",
3348
+ verticalLines && "border-x border-gray-200 dark:border-zinc-800",
3349
+ header.id === "_index" && "w-px whitespace-nowrap",
3350
+ header.column.columnDef.meta?.className
3351
+ ),
3352
+ style: {
3353
+ width: header.column.columnDef.meta?.width ?? header.column.getSize(),
3354
+ minWidth: header.column.columnDef.meta?.width ?? header.column.columnDef.minSize,
3355
+ maxWidth: header.column.columnDef.meta?.width ?? header.column.columnDef.maxSize
3356
+ },
3346
3357
  children: header.isPlaceholder ? null : flexRender2(
3347
3358
  header.column.columnDef.header,
3348
3359
  header.getContext()
@@ -3355,10 +3366,19 @@ function PostTable({
3355
3366
  "tr",
3356
3367
  {
3357
3368
  className: "border-b border-gray-100 dark:border-zinc-800/50",
3358
- children: columns.map((_2, j) => /* @__PURE__ */ jsx24(
3369
+ children: columns.map((col, j) => /* @__PURE__ */ jsx24(
3359
3370
  "td",
3360
3371
  {
3361
- className: `${rowPadding} ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800/50" : ""}`,
3372
+ className: cn(
3373
+ rowPadding,
3374
+ verticalLines && "border-x border-gray-200 dark:border-zinc-800/50",
3375
+ col.meta?.className
3376
+ ),
3377
+ style: {
3378
+ width: col.meta?.width ?? col.getSize?.() ?? col.size,
3379
+ minWidth: col.meta?.width ?? col.minSize,
3380
+ maxWidth: col.meta?.width ?? col.maxSize
3381
+ },
3362
3382
  children: /* @__PURE__ */ jsx24("div", { className: "h-4 bg-gray-100 dark:bg-zinc-800 rounded animate-pulse w-full" })
3363
3383
  },
3364
3384
  `skeleton-cell-${j}`
@@ -3384,7 +3404,18 @@ function PostTable({
3384
3404
  children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx24(
3385
3405
  "td",
3386
3406
  {
3387
- className: `${rowPadding} text-sm text-gray-700 dark:text-gray-200 ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${cell.column.id === "_index" ? "w-px whitespace-nowrap" : ""}`,
3407
+ className: cn(
3408
+ rowPadding,
3409
+ "text-sm text-gray-700 dark:text-gray-200",
3410
+ verticalLines && "border-x border-gray-200 dark:border-zinc-800",
3411
+ cell.column.id === "_index" && "w-px whitespace-nowrap",
3412
+ cell.column.columnDef.meta?.className
3413
+ ),
3414
+ style: {
3415
+ width: cell.column.columnDef.meta?.width ?? cell.column.getSize(),
3416
+ minWidth: cell.column.columnDef.meta?.width ?? cell.column.columnDef.minSize,
3417
+ maxWidth: cell.column.columnDef.meta?.width ?? cell.column.columnDef.maxSize
3418
+ },
3388
3419
  children: flexRender2(
3389
3420
  cell.column.columnDef.cell,
3390
3421
  cell.getContext()
@@ -3513,14 +3544,23 @@ function PostTable({
3513
3544
  column.id !== "_index" ? "cursor-text" : "",
3514
3545
  verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : "",
3515
3546
  column.id === "_index" ? "w-px whitespace-nowrap" : "",
3516
- hasError && "ring-1 ring-inset ring-red-500"
3547
+ hasError && "ring-1 ring-inset ring-red-500",
3548
+ column.columnDef.meta?.className
3517
3549
  ),
3550
+ style: {
3551
+ width: column.columnDef.meta?.width ?? column.getSize(),
3552
+ minWidth: column.columnDef.meta?.width ?? column.columnDef.minSize,
3553
+ maxWidth: column.columnDef.meta?.width ?? column.columnDef.maxSize
3554
+ },
3518
3555
  children: /* @__PURE__ */ jsxs18(
3519
3556
  "div",
3520
3557
  {
3521
3558
  className: cn(
3522
- "flex items-center relative group w-full",
3523
- column.id === "_index" ? "" : "min-w-32 h-9"
3559
+ "flex items-center relative group w-full min-w-0",
3560
+ column.id === "_index" ? "" : "h-9",
3561
+ !column.columnDef.meta?.className?.match(
3562
+ /\b(w-|min-w-|max-w-)/
3563
+ ) && !column.columnDef.meta?.width && "min-w-32"
3524
3564
  ),
3525
3565
  onKeyDown: (e) => {
3526
3566
  if (e.key === "Enter") {
@@ -3574,7 +3614,18 @@ function PostTable({
3574
3614
  ) && /* @__PURE__ */ jsx24("tfoot", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-t border-gray-200 dark:border-zinc-800", children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ jsx24("tr", { children: footerGroup.headers.map((header) => /* @__PURE__ */ jsx24(
3575
3615
  "td",
3576
3616
  {
3577
- className: `${rowPadding} text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" ? "w-px whitespace-nowrap" : ""}`,
3617
+ className: cn(
3618
+ rowPadding,
3619
+ "text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left",
3620
+ verticalLines && "border-x border-gray-200 dark:border-zinc-800",
3621
+ header.id === "_index" && "w-px whitespace-nowrap",
3622
+ header.column.columnDef.meta?.className
3623
+ ),
3624
+ style: {
3625
+ width: header.column.columnDef.meta?.width ?? header.column.getSize(),
3626
+ minWidth: header.column.columnDef.meta?.width ?? header.column.columnDef.minSize,
3627
+ maxWidth: header.column.columnDef.meta?.width ?? header.column.columnDef.maxSize
3628
+ },
3578
3629
  children: header.isPlaceholder ? null : flexRender2(
3579
3630
  header.column.columnDef.footer,
3580
3631
  header.getContext()
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "warqadui",
3
- "version": "0.0.27",
3
+ "version": "0.0.28",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",