warqadui 0.0.27 → 0.0.29

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 (7) hide show
  1. package/dist/index.d.mts +2 -0
  2. package/dist/index.d.ts +2 -0
  3. package/dist/index.js +63 -9
  4. package/dist/index.mjs +63 -9
  5. package/dist/styles.js +9 -0
  6. package/dist/styles.mjs +9 -0
  7. 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
@@ -3339,6 +3339,9 @@ function PostTable({
3339
3339
  finalColumns.unshift({
3340
3340
  id: "_index",
3341
3341
  header: "#",
3342
+ size: 40,
3343
+ minSize: 40,
3344
+ maxSize: 40,
3342
3345
  cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-2", children: [
3343
3346
  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-gray-500 font-medium ml-1", children: row.index + 1 }),
3344
3347
  renderSubComponent && hasSubComponent(row.original) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
@@ -3384,7 +3387,18 @@ function PostTable({
3384
3387
  /* @__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
3388
  "th",
3386
3389
  {
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" : ""}`,
3390
+ className: cn(
3391
+ rowPadding,
3392
+ "text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left",
3393
+ verticalLines && "border-x border-gray-200 dark:border-zinc-800",
3394
+ header.id === "_index" && "w-[1%] min-w-[40px] max-w-[40px] whitespace-nowrap",
3395
+ header.column.columnDef.meta?.className
3396
+ ),
3397
+ style: {
3398
+ width: header.column.columnDef.meta?.width ?? header.column.getSize(),
3399
+ minWidth: header.column.columnDef.meta?.width ?? header.column.columnDef.minSize,
3400
+ maxWidth: header.column.columnDef.meta?.width ?? header.column.columnDef.maxSize
3401
+ },
3388
3402
  children: header.isPlaceholder ? null : (0, import_react_table2.flexRender)(
3389
3403
  header.column.columnDef.header,
3390
3404
  header.getContext()
@@ -3397,10 +3411,19 @@ function PostTable({
3397
3411
  "tr",
3398
3412
  {
3399
3413
  className: "border-b border-gray-100 dark:border-zinc-800/50",
3400
- children: columns.map((_2, j) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
3414
+ children: columns.map((col, j) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
3401
3415
  "td",
3402
3416
  {
3403
- className: `${rowPadding} ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800/50" : ""}`,
3417
+ className: cn(
3418
+ rowPadding,
3419
+ verticalLines && "border-x border-gray-200 dark:border-zinc-800/50",
3420
+ col.meta?.className
3421
+ ),
3422
+ style: {
3423
+ width: col.meta?.width ?? col.getSize?.() ?? col.size,
3424
+ minWidth: col.meta?.width ?? col.minSize,
3425
+ maxWidth: col.meta?.width ?? col.maxSize
3426
+ },
3404
3427
  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-4 bg-gray-100 dark:bg-zinc-800 rounded animate-pulse w-full" })
3405
3428
  },
3406
3429
  `skeleton-cell-${j}`
@@ -3426,7 +3449,18 @@ function PostTable({
3426
3449
  children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
3427
3450
  "td",
3428
3451
  {
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" : ""}`,
3452
+ className: cn(
3453
+ rowPadding,
3454
+ "text-sm text-gray-700 dark:text-gray-200",
3455
+ verticalLines && "border-x border-gray-200 dark:border-zinc-800",
3456
+ cell.column.id === "_index" && "w-[1%] min-w-[40px] max-w-[40px] whitespace-nowrap",
3457
+ cell.column.columnDef.meta?.className
3458
+ ),
3459
+ style: {
3460
+ width: cell.column.columnDef.meta?.width ?? cell.column.getSize(),
3461
+ minWidth: cell.column.columnDef.meta?.width ?? cell.column.columnDef.minSize,
3462
+ maxWidth: cell.column.columnDef.meta?.width ?? cell.column.columnDef.maxSize
3463
+ },
3430
3464
  children: (0, import_react_table2.flexRender)(
3431
3465
  cell.column.columnDef.cell,
3432
3466
  cell.getContext()
@@ -3554,15 +3588,24 @@ function PostTable({
3554
3588
  "py-1! text-sm align-middle transition-colors duration-200",
3555
3589
  column.id !== "_index" ? "cursor-text" : "",
3556
3590
  verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : "",
3557
- column.id === "_index" ? "w-px whitespace-nowrap" : "",
3558
- hasError && "ring-1 ring-inset ring-red-500"
3591
+ column.id === "_index" ? "w-[1%] min-w-[40px] max-w-[40px] whitespace-nowrap" : "",
3592
+ hasError && "ring-1 ring-inset ring-red-500",
3593
+ column.columnDef.meta?.className
3559
3594
  ),
3595
+ style: {
3596
+ width: column.columnDef.meta?.width ?? column.getSize(),
3597
+ minWidth: column.columnDef.meta?.width ?? column.columnDef.minSize,
3598
+ maxWidth: column.columnDef.meta?.width ?? column.columnDef.maxSize
3599
+ },
3560
3600
  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
3561
3601
  "div",
3562
3602
  {
3563
3603
  className: cn(
3564
- "flex items-center relative group w-full",
3565
- column.id === "_index" ? "" : "min-w-32 h-9"
3604
+ "flex items-center relative group w-full min-w-0",
3605
+ column.id === "_index" ? "" : "h-9",
3606
+ !column.columnDef.meta?.className?.match(
3607
+ /\b(w-|min-w-|max-w-)/
3608
+ ) && !column.columnDef.meta?.width && (!column.columnDef.maxSize || column.columnDef.maxSize >= 128) && (!column.columnDef.size || column.columnDef.size >= 128) && "min-w-32"
3566
3609
  ),
3567
3610
  onKeyDown: (e) => {
3568
3611
  if (e.key === "Enter") {
@@ -3616,7 +3659,18 @@ function PostTable({
3616
3659
  ) && /* @__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
3660
  "td",
3618
3661
  {
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" : ""}`,
3662
+ className: cn(
3663
+ rowPadding,
3664
+ "text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left",
3665
+ verticalLines && "border-x border-gray-200 dark:border-zinc-800",
3666
+ header.id === "_index" && "w-[1%] min-w-[40px] max-w-[40px] whitespace-nowrap",
3667
+ header.column.columnDef.meta?.className
3668
+ ),
3669
+ style: {
3670
+ width: header.column.columnDef.meta?.width ?? header.column.getSize(),
3671
+ minWidth: header.column.columnDef.meta?.width ?? header.column.columnDef.minSize,
3672
+ maxWidth: header.column.columnDef.meta?.width ?? header.column.columnDef.maxSize
3673
+ },
3620
3674
  children: header.isPlaceholder ? null : (0, import_react_table2.flexRender)(
3621
3675
  header.column.columnDef.footer,
3622
3676
  header.getContext()
package/dist/index.mjs CHANGED
@@ -3297,6 +3297,9 @@ function PostTable({
3297
3297
  finalColumns.unshift({
3298
3298
  id: "_index",
3299
3299
  header: "#",
3300
+ size: 40,
3301
+ minSize: 40,
3302
+ maxSize: 40,
3300
3303
  cell: ({ row }) => /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
3301
3304
  /* @__PURE__ */ jsx24("span", { className: "text-gray-500 font-medium ml-1", children: row.index + 1 }),
3302
3305
  renderSubComponent && hasSubComponent(row.original) && /* @__PURE__ */ jsx24(
@@ -3342,7 +3345,18 @@ function PostTable({
3342
3345
  /* @__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
3346
  "th",
3344
3347
  {
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" : ""}`,
3348
+ className: cn(
3349
+ rowPadding,
3350
+ "text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left",
3351
+ verticalLines && "border-x border-gray-200 dark:border-zinc-800",
3352
+ header.id === "_index" && "w-[1%] min-w-[40px] max-w-[40px] whitespace-nowrap",
3353
+ header.column.columnDef.meta?.className
3354
+ ),
3355
+ style: {
3356
+ width: header.column.columnDef.meta?.width ?? header.column.getSize(),
3357
+ minWidth: header.column.columnDef.meta?.width ?? header.column.columnDef.minSize,
3358
+ maxWidth: header.column.columnDef.meta?.width ?? header.column.columnDef.maxSize
3359
+ },
3346
3360
  children: header.isPlaceholder ? null : flexRender2(
3347
3361
  header.column.columnDef.header,
3348
3362
  header.getContext()
@@ -3355,10 +3369,19 @@ function PostTable({
3355
3369
  "tr",
3356
3370
  {
3357
3371
  className: "border-b border-gray-100 dark:border-zinc-800/50",
3358
- children: columns.map((_2, j) => /* @__PURE__ */ jsx24(
3372
+ children: columns.map((col, j) => /* @__PURE__ */ jsx24(
3359
3373
  "td",
3360
3374
  {
3361
- className: `${rowPadding} ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800/50" : ""}`,
3375
+ className: cn(
3376
+ rowPadding,
3377
+ verticalLines && "border-x border-gray-200 dark:border-zinc-800/50",
3378
+ col.meta?.className
3379
+ ),
3380
+ style: {
3381
+ width: col.meta?.width ?? col.getSize?.() ?? col.size,
3382
+ minWidth: col.meta?.width ?? col.minSize,
3383
+ maxWidth: col.meta?.width ?? col.maxSize
3384
+ },
3362
3385
  children: /* @__PURE__ */ jsx24("div", { className: "h-4 bg-gray-100 dark:bg-zinc-800 rounded animate-pulse w-full" })
3363
3386
  },
3364
3387
  `skeleton-cell-${j}`
@@ -3384,7 +3407,18 @@ function PostTable({
3384
3407
  children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx24(
3385
3408
  "td",
3386
3409
  {
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" : ""}`,
3410
+ className: cn(
3411
+ rowPadding,
3412
+ "text-sm text-gray-700 dark:text-gray-200",
3413
+ verticalLines && "border-x border-gray-200 dark:border-zinc-800",
3414
+ cell.column.id === "_index" && "w-[1%] min-w-[40px] max-w-[40px] whitespace-nowrap",
3415
+ cell.column.columnDef.meta?.className
3416
+ ),
3417
+ style: {
3418
+ width: cell.column.columnDef.meta?.width ?? cell.column.getSize(),
3419
+ minWidth: cell.column.columnDef.meta?.width ?? cell.column.columnDef.minSize,
3420
+ maxWidth: cell.column.columnDef.meta?.width ?? cell.column.columnDef.maxSize
3421
+ },
3388
3422
  children: flexRender2(
3389
3423
  cell.column.columnDef.cell,
3390
3424
  cell.getContext()
@@ -3512,15 +3546,24 @@ function PostTable({
3512
3546
  "py-1! text-sm align-middle transition-colors duration-200",
3513
3547
  column.id !== "_index" ? "cursor-text" : "",
3514
3548
  verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : "",
3515
- column.id === "_index" ? "w-px whitespace-nowrap" : "",
3516
- hasError && "ring-1 ring-inset ring-red-500"
3549
+ column.id === "_index" ? "w-[1%] min-w-[40px] max-w-[40px] whitespace-nowrap" : "",
3550
+ hasError && "ring-1 ring-inset ring-red-500",
3551
+ column.columnDef.meta?.className
3517
3552
  ),
3553
+ style: {
3554
+ width: column.columnDef.meta?.width ?? column.getSize(),
3555
+ minWidth: column.columnDef.meta?.width ?? column.columnDef.minSize,
3556
+ maxWidth: column.columnDef.meta?.width ?? column.columnDef.maxSize
3557
+ },
3518
3558
  children: /* @__PURE__ */ jsxs18(
3519
3559
  "div",
3520
3560
  {
3521
3561
  className: cn(
3522
- "flex items-center relative group w-full",
3523
- column.id === "_index" ? "" : "min-w-32 h-9"
3562
+ "flex items-center relative group w-full min-w-0",
3563
+ column.id === "_index" ? "" : "h-9",
3564
+ !column.columnDef.meta?.className?.match(
3565
+ /\b(w-|min-w-|max-w-)/
3566
+ ) && !column.columnDef.meta?.width && (!column.columnDef.maxSize || column.columnDef.maxSize >= 128) && (!column.columnDef.size || column.columnDef.size >= 128) && "min-w-32"
3524
3567
  ),
3525
3568
  onKeyDown: (e) => {
3526
3569
  if (e.key === "Enter") {
@@ -3574,7 +3617,18 @@ function PostTable({
3574
3617
  ) && /* @__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
3618
  "td",
3576
3619
  {
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" : ""}`,
3620
+ className: cn(
3621
+ rowPadding,
3622
+ "text-sm font-semibold text-gray-900 dark:text-zinc-100 text-left",
3623
+ verticalLines && "border-x border-gray-200 dark:border-zinc-800",
3624
+ header.id === "_index" && "w-[1%] min-w-[40px] max-w-[40px] whitespace-nowrap",
3625
+ header.column.columnDef.meta?.className
3626
+ ),
3627
+ style: {
3628
+ width: header.column.columnDef.meta?.width ?? header.column.getSize(),
3629
+ minWidth: header.column.columnDef.meta?.width ?? header.column.columnDef.minSize,
3630
+ maxWidth: header.column.columnDef.meta?.width ?? header.column.columnDef.maxSize
3631
+ },
3578
3632
  children: header.isPlaceholder ? null : flexRender2(
3579
3633
  header.column.columnDef.footer,
3580
3634
  header.getContext()
package/dist/styles.js CHANGED
@@ -699,6 +699,9 @@ select:-webkit-autofill:focus {
699
699
  .w-8 {
700
700
  width: 2rem;
701
701
  }
702
+ .w-\\[1\\%\\] {
703
+ width: 1%;
704
+ }
702
705
  .w-full {
703
706
  width: 100%;
704
707
  }
@@ -714,9 +717,15 @@ select:-webkit-autofill:focus {
714
717
  .min-w-32 {
715
718
  min-width: 8rem;
716
719
  }
720
+ .min-w-\\[40px\\] {
721
+ min-width: 40px;
722
+ }
717
723
  .max-w-2xl {
718
724
  max-width: 42rem;
719
725
  }
726
+ .max-w-\\[40px\\] {
727
+ max-width: 40px;
728
+ }
720
729
  .max-w-full {
721
730
  max-width: 100%;
722
731
  }
package/dist/styles.mjs CHANGED
@@ -697,6 +697,9 @@ select:-webkit-autofill:focus {
697
697
  .w-8 {
698
698
  width: 2rem;
699
699
  }
700
+ .w-\\[1\\%\\] {
701
+ width: 1%;
702
+ }
700
703
  .w-full {
701
704
  width: 100%;
702
705
  }
@@ -712,9 +715,15 @@ select:-webkit-autofill:focus {
712
715
  .min-w-32 {
713
716
  min-width: 8rem;
714
717
  }
718
+ .min-w-\\[40px\\] {
719
+ min-width: 40px;
720
+ }
715
721
  .max-w-2xl {
716
722
  max-width: 42rem;
717
723
  }
724
+ .max-w-\\[40px\\] {
725
+ max-width: 40px;
726
+ }
718
727
  .max-w-full {
719
728
  max-width: 100%;
720
729
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "warqadui",
3
- "version": "0.0.27",
3
+ "version": "0.0.29",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",