ui-thing 0.1.7 → 0.1.8

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 (12) hide show
  1. package/.github/workflows/main.yml +1 -1
  2. package/.github/workflows/test.yml +1 -1
  3. package/CHANGELOG.md +490 -471
  4. package/dist/index.js +1321 -1317
  5. package/dist/index.js.map +1 -1
  6. package/package.json +3 -3
  7. package/src/commands/add.ts +302 -302
  8. package/src/commands/init.ts +73 -73
  9. package/src/comps.ts +2417 -2417
  10. package/src/types.ts +35 -35
  11. package/src/utils/config.ts +100 -100
  12. package/src/utils/promptForComponents.ts +20 -20
package/dist/index.js CHANGED
@@ -2350,1070 +2350,1070 @@ DataTable.use(DataTablesCore);
2350
2350
  export default defineNuxtPlugin((nuxtApp) => {
2351
2351
  nuxtApp.vueApp.component("DataTable", DataTable);
2352
2352
  });
2353
- `}],files:[{fileName:"Datatable.client.vue",dirPath:"components/UI",fileContent:`<template>\r
2354
- <DataTable\r
2355
- :columns="columns"\r
2356
- :ajax="ajax"\r
2357
- ref="table"\r
2358
- :data="data"\r
2359
- :class="props.class"\r
2360
- :options="options"\r
2361
- >\r
2362
- <template v-for="(_, name) in $slots" v-slot:[name]="scope">\r
2363
- <slot :name="name" v-bind="scope"></slot>\r
2364
- </template>\r
2365
- </DataTable>\r
2366
- </template>\r
2367
- \r
2368
- <script lang="ts" setup generic="T extends Record<string, any>">\r
2369
- import type DataTableRef from "datatables.net";\r
2370
- import type { Config } from "datatables.net";\r
2371
- \r
2372
- export type DataTablesNamedSlotProps<T> = {\r
2373
- /** The data to show in the cell (from the \`columns.data\` configuration) */\r
2374
- cellData: keyof T | null;\r
2375
- /** The column index for the cell (0-based index) */\r
2376
- colIndex: number;\r
2377
- /** The data object for the whole row */\r
2378
- rowData: T | Record<string, any>;\r
2379
- /** Row index for the cell (data index, not the display index) */\r
2380
- rowIndex: number;\r
2381
- /** Orthogonal data type */\r
2382
- type: string;\r
2383
- };\r
2384
- \r
2385
- const table = shallowRef<{ dt: InstanceType<typeof DataTableRef<T[]>> } | null>(null);\r
2386
- \r
2387
- const props = withDefaults(\r
2388
- defineProps<{\r
2389
- data?: Config["data"];\r
2390
- class?: any;\r
2391
- columns?: Config["columns"];\r
2392
- ajax?: Config["ajax"];\r
2393
- options?: Config;\r
2394
- }>(),\r
2395
- {\r
2396
- data: () => [],\r
2397
- class: "nowrap hover order-column row-border stripe display",\r
2398
- options: () => ({}),\r
2399
- }\r
2400
- );\r
2401
- \r
2402
- const emits = defineEmits<{\r
2403
- ready: [any];\r
2404
- }>();\r
2405
- \r
2406
- onMounted(() => {\r
2407
- nextTick(() => {\r
2408
- emits("ready", table.value?.dt);\r
2409
- });\r
2410
- });\r
2411
- </script>\r
2412
- \r
2413
- <style>\r
2414
- :root {\r
2415
- --dt-row-selected: 262.1, 83.3%, 57.8%;\r
2416
- --dt-row-selected-text: 210, 20%, 98%;\r
2417
- --dt-row-selected-link: 262.1, 83.3%, 57.8%;\r
2418
- --dt-row-stripe: 0, 0%, 100%;\r
2419
- --dt-row-hover: 0, 0%, 100%;\r
2420
- --dt-column-ordering: 0, 0%, 100%;\r
2421
- --dt-border: 220, 13%, 91%;\r
2422
- --dt-foreground: 224, 71.4%, 4.1%;\r
2423
- }\r
2424
- \r
2425
- .dark {\r
2426
- --dt-row-selected: 263.4, 70%, 50.4%;\r
2427
- --dt-row-selected-text: 210, 20%, 98%;\r
2428
- --dt-row-selected-link: 263.4, 70%, 50.4%;\r
2429
- --dt-row-stripe: 224, 71.4%, 4.1%;\r
2430
- --dt-row-hover: 224, 71.4%, 4.1%;\r
2431
- --dt-column-ordering: 224, 71.4%, 4.1%;\r
2432
- --dt-border: 215, 27.9%, 16.9%;\r
2433
- --dt-foreground: 224, 71.4%, 4.1%;\r
2434
- }\r
2435
- \r
2436
- table.dataTable td.dt-control {\r
2437
- text-align: center;\r
2438
- cursor: pointer;\r
2439
- }\r
2440
- table.dataTable td.dt-control:before {\r
2441
- display: inline-block;\r
2442
- color: hsla(var(--dt-foreground), 0.5);\r
2443
- content: "\u25BA";\r
2444
- }\r
2445
- table.dataTable tr.dt-hasChild td.dt-control:before {\r
2446
- content: "\u25BC";\r
2447
- }\r
2448
- \r
2449
- table.dataTable thead > tr > th.sorting,\r
2450
- table.dataTable thead > tr > th.sorting_asc,\r
2451
- table.dataTable thead > tr > th.sorting_desc,\r
2452
- table.dataTable thead > tr > th.sorting_asc_disabled,\r
2453
- table.dataTable thead > tr > th.sorting_desc_disabled,\r
2454
- table.dataTable thead > tr > td.sorting,\r
2455
- table.dataTable thead > tr > td.sorting_asc,\r
2456
- table.dataTable thead > tr > td.sorting_desc,\r
2457
- table.dataTable thead > tr > td.sorting_asc_disabled,\r
2458
- table.dataTable thead > tr > td.sorting_desc_disabled,\r
2459
- /* V2 */\r
2460
- table.dataTable thead > tr > th.dt-orderable-asc,\r
2461
- table.dataTable thead > tr > th.dt-orderable-desc,\r
2462
- table.dataTable thead > tr > td.dt-orderable-asc,\r
2463
- table.dataTable thead > tr > td.dt-orderable-desc {\r
2464
- @apply relative cursor-pointer pr-7;\r
2465
- }\r
2466
- table.dataTable thead > tr > th.sorting:before,\r
2467
- table.dataTable thead > tr > th.sorting:after,\r
2468
- table.dataTable thead > tr > th.sorting_asc:before,\r
2469
- table.dataTable thead > tr > th.sorting_asc:after,\r
2470
- table.dataTable thead > tr > th.sorting_desc:before,\r
2471
- table.dataTable thead > tr > th.sorting_desc:after,\r
2472
- table.dataTable thead > tr > th.sorting_asc_disabled:before,\r
2473
- table.dataTable thead > tr > th.sorting_asc_disabled:after,\r
2474
- table.dataTable thead > tr > th.sorting_desc_disabled:before,\r
2475
- table.dataTable thead > tr > th.sorting_desc_disabled:after,\r
2476
- table.dataTable thead > tr > td.sorting:before,\r
2477
- table.dataTable thead > tr > td.sorting:after,\r
2478
- table.dataTable thead > tr > td.sorting_asc:before,\r
2479
- table.dataTable thead > tr > td.sorting_asc:after,\r
2480
- table.dataTable thead > tr > td.sorting_desc:before,\r
2481
- table.dataTable thead > tr > td.sorting_desc:after,\r
2482
- table.dataTable thead > tr > td.sorting_asc_disabled:before,\r
2483
- table.dataTable thead > tr > td.sorting_asc_disabled:after,\r
2484
- table.dataTable thead > tr > td.sorting_desc_disabled:before,\r
2485
- table.dataTable thead > tr > td.sorting_desc_disabled:after,\r
2486
- /* V2 */\r
2487
- table.dataTable thead > tr > th.dt-orderable-asc:before,\r
2488
- table.dataTable thead > tr > th.dt-orderable-asc:after,\r
2489
- table.dataTable thead > tr > th.dt-orderable-desc:before,\r
2490
- table.dataTable thead > tr > th.dt-orderable-desc:after,\r
2491
- table.dataTable thead > tr > td.dt-orderable-asc:before,\r
2492
- table.dataTable thead > tr > td.dt-orderable-asc:after,\r
2493
- table.dataTable thead > tr > td.dt-orderable-desc:before,\r
2494
- table.dataTable thead > tr > td.dt-orderable-desc:after {\r
2495
- @apply absolute right-2.5 block text-xs leading-3 opacity-25;\r
2496
- }\r
2497
- table.dataTable thead > tr > th.sorting:before,\r
2498
- table.dataTable thead > tr > th.sorting_asc:before,\r
2499
- table.dataTable thead > tr > th.sorting_desc:before,\r
2500
- table.dataTable thead > tr > th.sorting_asc_disabled:before,\r
2501
- table.dataTable thead > tr > th.sorting_desc_disabled:before,\r
2502
- table.dataTable thead > tr > td.sorting:before,\r
2503
- table.dataTable thead > tr > td.sorting_asc:before,\r
2504
- table.dataTable thead > tr > td.sorting_desc:before,\r
2505
- table.dataTable thead > tr > td.sorting_asc_disabled:before,\r
2506
- table.dataTable thead > tr > td.sorting_desc_disabled:before,\r
2507
- /* V2 */\r
2508
- table.dataTable thead > tr > th.dt-orderable-asc:before,\r
2509
- table.dataTable thead > tr > th.dt-orderable-desc:before,\r
2510
- table.dataTable thead > tr > td.dt-orderable-asc:before,\r
2511
- table.dataTable thead > tr > td.dt-orderable-desc:before {\r
2512
- @apply bottom-[43%] h-4 w-4 bg-[url('https://api.iconify.design/lucide:chevron-up.svg')] bg-contain bg-center bg-no-repeat content-[''] dark:bg-[url('https://api.iconify.design/lucide:chevron-up.svg?color=white')];\r
2513
- }\r
2514
- table.dataTable thead > tr > th.sorting:after,\r
2515
- table.dataTable thead > tr > th.sorting_asc:after,\r
2516
- table.dataTable thead > tr > th.sorting_desc:after,\r
2517
- table.dataTable thead > tr > th.sorting_asc_disabled:after,\r
2518
- table.dataTable thead > tr > th.sorting_desc_disabled:after,\r
2519
- table.dataTable thead > tr > td.sorting:after,\r
2520
- table.dataTable thead > tr > td.sorting_asc:after,\r
2521
- table.dataTable thead > tr > td.sorting_desc:after,\r
2522
- table.dataTable thead > tr > td.sorting_asc_disabled:after,\r
2523
- table.dataTable thead > tr > td.sorting_desc_disabled:after,\r
2524
- /* V2 */\r
2525
- table.dataTable thead > tr > th.dt-orderable-asc:after,\r
2526
- table.dataTable thead > tr > th.dt-orderable-desc:after,\r
2527
- table.dataTable thead > tr > td.dt-orderable-asc:after,\r
2528
- table.dataTable thead > tr > td.dt-orderable-desc:after {\r
2529
- @apply top-[43%] h-4 w-4 bg-[url('https://api.iconify.design/lucide:chevron-down.svg')] bg-contain bg-center bg-no-repeat content-[''] dark:bg-[url('https://api.iconify.design/lucide:chevron-down.svg?color=white')];\r
2530
- }\r
2531
- table.dataTable thead > tr > th.sorting_asc:before,\r
2532
- table.dataTable thead > tr > th.sorting_desc:after,\r
2533
- table.dataTable thead > tr > td.sorting_asc:before,\r
2534
- table.dataTable thead > tr > td.sorting_desc:after,\r
2535
- /* V2 */\r
2536
- table.dataTable thead > tr > th.dt-ordering-asc:before,\r
2537
- table.dataTable thead > tr > th.dt-ordering-desc:after {\r
2538
- @apply opacity-80;\r
2539
- }\r
2540
- table.dataTable thead > tr > th.sorting_desc_disabled:after,\r
2541
- table.dataTable thead > tr > th.sorting_asc_disabled:before,\r
2542
- table.dataTable thead > tr > td.sorting_desc_disabled:after,\r
2543
- table.dataTable thead > tr > td.sorting_asc_disabled:before {\r
2544
- @apply hidden;\r
2545
- }\r
2546
- table.dataTable thead > tr > th:active,\r
2547
- table.dataTable thead > tr > td:active {\r
2548
- @apply outline-none;\r
2549
- }\r
2550
- \r
2551
- div.dataTables_scrollBody > table.dataTable > thead > tr > th:before,\r
2552
- div.dataTables_scrollBody > table.dataTable > thead > tr > th:after,\r
2553
- div.dataTables_scrollBody > table.dataTable > thead > tr > td:before,\r
2554
- div.dataTables_scrollBody > table.dataTable > thead > tr > td:after {\r
2555
- @apply hidden;\r
2556
- }\r
2557
- \r
2558
- div.dataTables_processing {\r
2559
- @apply absolute left-[50%] top-[50%] ml-[-100px] mt-[-26px] w-[200px] p-0.5 text-center;\r
2560
- }\r
2561
- div.dataTables_processing > div:last-child {\r
2562
- @apply relative mx-auto my-4 h-4 w-20;\r
2563
- }\r
2564
- div.dataTables_processing > div:last-child > div {\r
2565
- @apply absolute top-0 h-3.5 w-3.5 rounded-full;\r
2566
- background: hsl(var(--dt-row-selected));\r
2567
- animation-timing-function: cubic-bezier(0, 1, 1, 0);\r
2568
- }\r
2569
- div.dataTables_processing > div:last-child > div:nth-child(1) {\r
2570
- left: 8px;\r
2571
- animation: datatables-loader-1 0.6s infinite;\r
2572
- }\r
2573
- div.dataTables_processing > div:last-child > div:nth-child(2) {\r
2574
- left: 8px;\r
2575
- animation: datatables-loader-2 0.6s infinite;\r
2576
- }\r
2577
- div.dataTables_processing > div:last-child > div:nth-child(3) {\r
2578
- left: 32px;\r
2579
- animation: datatables-loader-2 0.6s infinite;\r
2580
- }\r
2581
- div.dataTables_processing > div:last-child > div:nth-child(4) {\r
2582
- left: 56px;\r
2583
- animation: datatables-loader-3 0.6s infinite;\r
2584
- }\r
2585
- \r
2586
- @keyframes datatables-loader-1 {\r
2587
- 0% {\r
2588
- transform: scale(0);\r
2589
- }\r
2590
- 100% {\r
2591
- transform: scale(1);\r
2592
- }\r
2593
- }\r
2594
- @keyframes datatables-loader-3 {\r
2595
- 0% {\r
2596
- transform: scale(1);\r
2597
- }\r
2598
- 100% {\r
2599
- transform: scale(0);\r
2600
- }\r
2601
- }\r
2602
- @keyframes datatables-loader-2 {\r
2603
- 0% {\r
2604
- transform: translate(0, 0);\r
2605
- }\r
2606
- 100% {\r
2607
- transform: translate(24px, 0);\r
2608
- }\r
2609
- }\r
2610
- table.dataTable.nowrap th,\r
2611
- table.dataTable.nowrap td {\r
2612
- white-space: nowrap;\r
2613
- }\r
2614
- table.dataTable th.dt-left,\r
2615
- table.dataTable td.dt-left {\r
2616
- text-align: left;\r
2617
- }\r
2618
- table.dataTable th.dt-center,\r
2619
- table.dataTable td.dt-center,\r
2620
- table.dataTable td.dataTables_empty {\r
2621
- text-align: center;\r
2622
- }\r
2623
- table.dataTable th.dt-right,\r
2624
- table.dataTable td.dt-right {\r
2625
- text-align: right;\r
2626
- }\r
2627
- table.dataTable th.dt-justify,\r
2628
- table.dataTable td.dt-justify {\r
2629
- text-align: justify;\r
2630
- }\r
2631
- table.dataTable th.dt-nowrap,\r
2632
- table.dataTable td.dt-nowrap {\r
2633
- white-space: nowrap;\r
2634
- }\r
2635
- table.dataTable thead th,\r
2636
- table.dataTable thead td,\r
2637
- table.dataTable tfoot th,\r
2638
- table.dataTable tfoot td {\r
2639
- text-align: left;\r
2640
- }\r
2641
- table.dataTable thead th.dt-head-left,\r
2642
- table.dataTable thead td.dt-head-left,\r
2643
- table.dataTable tfoot th.dt-head-left,\r
2644
- table.dataTable tfoot td.dt-head-left {\r
2645
- text-align: left;\r
2646
- }\r
2647
- table.dataTable thead th.dt-head-center,\r
2648
- table.dataTable thead td.dt-head-center,\r
2649
- table.dataTable tfoot th.dt-head-center,\r
2650
- table.dataTable tfoot td.dt-head-center {\r
2651
- text-align: center;\r
2652
- }\r
2653
- table.dataTable thead th.dt-head-right,\r
2654
- table.dataTable thead td.dt-head-right,\r
2655
- table.dataTable tfoot th.dt-head-right,\r
2656
- table.dataTable tfoot td.dt-head-right {\r
2657
- text-align: right;\r
2658
- }\r
2659
- table.dataTable thead th.dt-head-justify,\r
2660
- table.dataTable thead td.dt-head-justify,\r
2661
- table.dataTable tfoot th.dt-head-justify,\r
2662
- table.dataTable tfoot td.dt-head-justify {\r
2663
- text-align: justify;\r
2664
- }\r
2665
- table.dataTable thead th.dt-head-nowrap,\r
2666
- table.dataTable thead td.dt-head-nowrap,\r
2667
- table.dataTable tfoot th.dt-head-nowrap,\r
2668
- table.dataTable tfoot td.dt-head-nowrap {\r
2669
- white-space: nowrap;\r
2670
- }\r
2671
- table.dataTable tbody th.dt-body-left,\r
2672
- table.dataTable tbody td.dt-body-left {\r
2673
- text-align: left;\r
2674
- }\r
2675
- table.dataTable tbody th.dt-body-center,\r
2676
- table.dataTable tbody td.dt-body-center {\r
2677
- text-align: center;\r
2678
- }\r
2679
- table.dataTable tbody th.dt-body-right,\r
2680
- table.dataTable tbody td.dt-body-right {\r
2681
- text-align: right;\r
2682
- }\r
2683
- table.dataTable tbody th.dt-body-justify,\r
2684
- table.dataTable tbody td.dt-body-justify {\r
2685
- text-align: justify;\r
2686
- }\r
2687
- table.dataTable tbody th.dt-body-nowrap,\r
2688
- table.dataTable tbody td.dt-body-nowrap {\r
2689
- white-space: nowrap;\r
2690
- }\r
2691
- \r
2692
- /* Table Styles */\r
2693
- \r
2694
- table.dataTable {\r
2695
- @apply w-full table-auto border-collapse;\r
2696
- }\r
2697
- \r
2698
- /* Table header styles */\r
2699
- table.dataTable thead th,\r
2700
- table.dataTable tfoot th {\r
2701
- @apply text-left text-sm font-medium text-muted-foreground;\r
2702
- }\r
2703
- \r
2704
- table.dataTable > thead > tr > th {\r
2705
- @apply border-b border-t-0 px-6 py-3;\r
2706
- }\r
2707
- table.dataTable > thead > tr > td {\r
2708
- @apply border-b px-6 py-3 text-sm;\r
2709
- }\r
2710
- table.dataTable > thead > tr > th:active,\r
2711
- table.dataTable > thead > tr > td:active {\r
2712
- @apply outline-none;\r
2713
- }\r
2714
- table.dataTable > tfoot > tr > th,\r
2715
- table.dataTable > tfoot > tr > td {\r
2716
- @apply border-t px-6 py-3;\r
2717
- }\r
2718
- table.dataTable tbody tr {\r
2719
- @apply bg-transparent;\r
2720
- }\r
2721
- table.dataTable tbody tr.selected > * {\r
2722
- @apply bg-primary/10;\r
2723
- }\r
2724
- table.dataTable tbody tr.selected a {\r
2725
- @apply text-primary;\r
2726
- }\r
2727
- table.dataTable tbody th,\r
2728
- table.dataTable tbody td {\r
2729
- @apply px-6 py-3 text-sm;\r
2730
- }\r
2731
- table.dataTable.row-border > tbody > tr > th,\r
2732
- table.dataTable.row-border > tbody > tr > td,\r
2733
- table.dataTable.display > tbody > tr > th,\r
2734
- table.dataTable.display > tbody > tr > td {\r
2735
- @apply border-t;\r
2736
- }\r
2737
- table.dataTable.row-border > tbody > tr:first-child > th,\r
2738
- table.dataTable.row-border > tbody > tr:first-child > td,\r
2739
- table.dataTable.display > tbody > tr:first-child > th,\r
2740
- table.dataTable.display > tbody > tr:first-child > td {\r
2741
- @apply border-t-0;\r
2742
- }\r
2743
- table.dataTable.row-border > tbody > tr.selected + tr.selected > td,\r
2744
- table.dataTable.display > tbody > tr.selected + tr.selected > td {\r
2745
- @apply border-t-primary/30;\r
2746
- }\r
2747
- table.dataTable.cell-border > tbody > tr > th,\r
2748
- table.dataTable.cell-border > tbody > tr > td {\r
2749
- @apply border-r border-t;\r
2750
- }\r
2751
- table.dataTable.cell-border > tbody > tr > th:first-child,\r
2752
- table.dataTable.cell-border > tbody > tr > td:first-child {\r
2753
- @apply border-l;\r
2754
- }\r
2755
- table.dataTable.cell-border > tbody > tr:first-child > th,\r
2756
- table.dataTable.cell-border > tbody > tr:first-child > td {\r
2757
- @apply border-t-0;\r
2758
- }\r
2759
- table.dataTable.stripe > tbody > tr.odd > *,\r
2760
- table.dataTable.display > tbody > tr.odd > * {\r
2761
- @apply bg-muted/50;\r
2762
- }\r
2763
- table.dataTable.stripe > tbody > tr.odd.selected > *,\r
2764
- table.dataTable.display > tbody > tr.odd.selected > * {\r
2765
- @apply bg-primary/10;\r
2766
- }\r
2767
- table.dataTable.hover > tbody > tr:hover > *,\r
2768
- table.dataTable.display > tbody > tr:hover > * {\r
2769
- @apply bg-muted;\r
2770
- }\r
2771
- table.dataTable.hover > tbody > tr.selected:hover > *,\r
2772
- table.dataTable.display > tbody > tr.selected:hover > * {\r
2773
- @apply !bg-primary/10;\r
2774
- }\r
2775
- table.dataTable.order-column > tbody tr > .sorting_1,\r
2776
- table.dataTable.order-column > tbody tr > .sorting_2,\r
2777
- table.dataTable.order-column > tbody tr > .sorting_3,\r
2778
- table.dataTable.display > tbody tr > .sorting_1,\r
2779
- table.dataTable.display > tbody tr > .sorting_2,\r
2780
- table.dataTable.display > tbody tr > .sorting_3 {\r
2781
- @apply bg-muted;\r
2782
- }\r
2783
- table.dataTable.order-column > tbody tr.selected > .sorting_1,\r
2784
- table.dataTable.order-column > tbody tr.selected > .sorting_2,\r
2785
- table.dataTable.order-column > tbody tr.selected > .sorting_3,\r
2786
- table.dataTable.display > tbody tr.selected > .sorting_1,\r
2787
- table.dataTable.display > tbody tr.selected > .sorting_2,\r
2788
- table.dataTable.display > tbody tr.selected > .sorting_3 {\r
2789
- @apply !bg-primary/10;\r
2790
- }\r
2791
- table.dataTable.display > tbody > tr.odd > .sorting_1,\r
2792
- table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_1 {\r
2793
- @apply bg-muted/50;\r
2794
- }\r
2795
- table.dataTable.display > tbody > tr.odd > .sorting_2,\r
2796
- table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_2 {\r
2797
- @apply bg-muted/30;\r
2798
- }\r
2799
- table.dataTable.display > tbody > tr.odd > .sorting_3,\r
2800
- table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_3 {\r
2801
- @apply bg-muted/10;\r
2802
- }\r
2803
- table.dataTable.display > tbody > tr.odd.selected > .sorting_1,\r
2804
- table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_1 {\r
2805
- @apply bg-muted/50;\r
2806
- }\r
2807
- table.dataTable.display > tbody > tr.odd.selected > .sorting_2,\r
2808
- table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_2 {\r
2809
- @apply bg-muted/30;\r
2810
- }\r
2811
- table.dataTable.display > tbody > tr.odd.selected > .sorting_3,\r
2812
- table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_3 {\r
2813
- @apply bg-muted/10;\r
2814
- }\r
2815
- table.dataTable.display > tbody > tr.even > .sorting_1,\r
2816
- table.dataTable.order-column.stripe > tbody > tr.even > .sorting_1 {\r
2817
- @apply bg-muted/50;\r
2818
- }\r
2819
- table.dataTable.display > tbody > tr.even > .sorting_2,\r
2820
- table.dataTable.order-column.stripe > tbody > tr.even > .sorting_2 {\r
2821
- @apply bg-muted/30;\r
2822
- }\r
2823
- table.dataTable.display > tbody > tr.even > .sorting_3,\r
2824
- table.dataTable.order-column.stripe > tbody > tr.even > .sorting_3 {\r
2825
- @apply bg-muted/10;\r
2826
- }\r
2827
- table.dataTable.display > tbody > tr.even.selected > .sorting_1,\r
2828
- table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_1 {\r
2829
- @apply bg-primary/10;\r
2830
- }\r
2831
- table.dataTable.display > tbody > tr.even.selected > .sorting_2,\r
2832
- table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_2 {\r
2833
- @apply bg-primary/10;\r
2834
- }\r
2835
- table.dataTable.display > tbody > tr.even.selected > .sorting_3,\r
2836
- table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_3 {\r
2837
- @apply bg-primary/10;\r
2838
- }\r
2839
- table.dataTable.display tbody tr:hover > .sorting_1,\r
2840
- table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {\r
2841
- @apply bg-muted;\r
2842
- }\r
2843
- table.dataTable.display tbody tr:hover > .sorting_2,\r
2844
- table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {\r
2845
- @apply bg-muted;\r
2846
- }\r
2847
- table.dataTable.display tbody tr:hover > .sorting_3,\r
2848
- table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {\r
2849
- @apply bg-muted;\r
2850
- }\r
2851
- table.dataTable.display tbody tr:hover.selected > .sorting_1,\r
2852
- table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {\r
2853
- @apply bg-primary/10;\r
2854
- }\r
2855
- table.dataTable.display tbody tr:hover.selected > .sorting_2,\r
2856
- table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {\r
2857
- @apply bg-primary/10;\r
2858
- }\r
2859
- table.dataTable.display tbody tr:hover.selected > .sorting_3,\r
2860
- table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {\r
2861
- @apply bg-primary/10;\r
2862
- }\r
2863
- table.dataTable.no-footer {\r
2864
- @apply border-b-0;\r
2865
- }\r
2866
- table.dataTable.compact thead th,\r
2867
- table.dataTable.compact thead td,\r
2868
- table.dataTable.compact tfoot th,\r
2869
- table.dataTable.compact tfoot td,\r
2870
- table.dataTable.compact tbody th,\r
2871
- table.dataTable.compact tbody td {\r
2872
- @apply px-4 py-2;\r
2873
- }\r
2874
- \r
2875
- table.dataTable th,\r
2876
- table.dataTable td {\r
2877
- @apply box-content border-y;\r
2878
- }\r
2879
- \r
2880
- table.dataTable tr:last-child td {\r
2881
- @apply !border-b-0;\r
2882
- }\r
2883
- \r
2884
- /* Control feature layout */\r
2885
- .dataTables_wrapper {\r
2886
- @apply w-full overflow-x-auto;\r
2887
- }\r
2888
- \r
2889
- /* Export button styles - v1 of datatables */\r
2890
- .dataTables_wrapper .dt-buttons {\r
2891
- @apply inline-flex flex-wrap items-center gap-2;\r
2892
- button {\r
2893
- @apply inline-flex h-9 items-center gap-2 whitespace-nowrap rounded-md border bg-background px-3 text-sm text-muted-foreground hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\r
2894
- }\r
2895
- }\r
2896
- /* V2 of datatables button styles. \r
2897
- */\r
2898
- .dt-buttons {\r
2899
- @apply inline-flex flex-wrap items-center gap-2;\r
2900
- button {\r
2901
- @apply inline-flex h-9 items-center gap-2 whitespace-nowrap rounded-md border bg-background px-3 text-sm text-muted-foreground hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\r
2902
- }\r
2903
- }\r
2904
- \r
2905
- /* Copy modal */\r
2906
- .dt-button-info {\r
2907
- @apply fixed inset-0 z-50 flex flex-col items-center justify-center bg-background/50 backdrop-blur;\r
2908
- }\r
2909
- \r
2910
- /* Select box at bottom showing number of records being displayed - v1 of datatables */\r
2911
- .dataTables_wrapper .dataTables_length {\r
2912
- label {\r
2913
- @apply inline-flex items-center gap-2 text-sm font-normal text-muted-foreground;\r
2914
- select {\r
2915
- @apply h-9 w-[70px] cursor-pointer rounded-md border border-border bg-background px-2 py-1 transition focus:border-primary focus:outline-none focus-visible:border-input focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background sm:text-sm;\r
2916
- }\r
2917
- }\r
2918
- }\r
2919
- /* Select box at the bottom showing how many items are being display - v2 */\r
2920
- .dt-length {\r
2921
- @apply inline-flex items-center gap-2;\r
2922
- label {\r
2923
- @apply text-sm font-normal text-muted-foreground;\r
2924
- }\r
2925
- select {\r
2926
- @apply h-9 w-[70px] cursor-pointer rounded-md border border-border bg-background px-2 py-1 transition focus:border-primary focus:outline-none focus-visible:border-input focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background sm:text-sm;\r
2927
- }\r
2928
- }\r
2929
- \r
2930
- /* Search box at the top styles - v1 of datatables */\r
2931
- .dataTables_wrapper .dataTables_filter {\r
2932
- label {\r
2933
- @apply inline-flex w-full cursor-pointer items-center gap-2 text-sm font-normal text-muted-foreground;\r
2934
- input {\r
2935
- @apply h-9 w-full rounded-md border border-border bg-background px-2 py-1 transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background focus-visible:border-input sm:text-sm;\r
2936
- }\r
2937
- }\r
2938
- }\r
2939
- \r
2940
- /* Search box at the top styles -v2 */\r
2941
- .dt-search {\r
2942
- @apply flex items-center gap-3;\r
2943
- label {\r
2944
- @apply inline-flex cursor-pointer items-center gap-2 text-sm font-normal text-muted-foreground;\r
2945
- }\r
2946
- input {\r
2947
- @apply h-9 w-full rounded-md border border-border bg-background px-2 py-1 transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background focus-visible:border-input sm:text-sm md:w-[50%] lg:w-[250px];\r
2948
- }\r
2949
- }\r
2950
- \r
2951
- /* Info text that shows \`Showing X to XX of XXXX entries - v1 */\r
2952
- .dataTables_wrapper .dataTables_info,\r
2953
- .dt-info {\r
2954
- @apply flex items-center gap-3 text-sm !text-muted-foreground;\r
2955
- }\r
2956
- \r
2957
- /* Pagination button styles - v1 datatables */\r
2958
- .dataTables_wrapper .dataTables_paginate {\r
2959
- .paginate_button {\r
2960
- @apply ml-1 box-border inline-flex h-9 min-w-[36px] cursor-pointer items-center justify-center rounded bg-transparent px-3 py-2 text-center text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\r
2961
- }\r
2962
- }\r
2963
- /* Pagination button - v2 */\r
2964
- .dt-paging-button {\r
2965
- @apply ml-1 box-border inline-flex h-9 min-w-[36px] cursor-pointer items-center justify-center rounded bg-transparent px-3 py-2 text-center text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\r
2966
- &.current,\r
2967
- &:hover {\r
2968
- @apply bg-muted;\r
2969
- }\r
2970
- &.disabled,\r
2971
- &.disabled:hover,\r
2972
- &.disabled:active {\r
2973
- @apply pointer-events-none opacity-50;\r
2974
- }\r
2975
- }\r
2976
- .dataTables_wrapper .dataTables_paginate .paginate_button.current,\r
2977
- .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {\r
2978
- @apply bg-muted;\r
2979
- }\r
2980
- .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,\r
2981
- .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,\r
2982
- .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {\r
2983
- @apply pointer-events-none opacity-50;\r
2984
- }\r
2985
- .dataTables_wrapper .dataTables_paginate .paginate_button:hover {\r
2986
- @apply bg-muted;\r
2987
- }\r
2988
- .dataTables_wrapper .dataTables_paginate .paginate_button:active {\r
2989
- @apply bg-muted;\r
2990
- }\r
2991
- .dataTables_wrapper .dataTables_paginate .ellipsis,\r
2992
- .dt-paging .ellipsis {\r
2993
- @apply inline-flex h-8 min-w-[32px] items-start justify-center text-sm;\r
2994
- }\r
2995
- .dataTables_wrapper .dataTables_scroll {\r
2996
- clear: both;\r
2997
- }\r
2998
- .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {\r
2999
- -webkit-overflow-scrolling: touch;\r
3000
- }\r
3001
- .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th,\r
3002
- .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td,\r
3003
- .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th,\r
3004
- .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {\r
3005
- vertical-align: middle;\r
3006
- }\r
3007
- .dataTables_wrapper\r
3008
- .dataTables_scroll\r
3009
- div.dataTables_scrollBody\r
3010
- > table\r
3011
- > thead\r
3012
- > tr\r
3013
- > th\r
3014
- > div.dataTables_sizing,\r
3015
- .dataTables_wrapper\r
3016
- .dataTables_scroll\r
3017
- div.dataTables_scrollBody\r
3018
- > table\r
3019
- > thead\r
3020
- > tr\r
3021
- > td\r
3022
- > div.dataTables_sizing,\r
3023
- .dataTables_wrapper\r
3024
- .dataTables_scroll\r
3025
- div.dataTables_scrollBody\r
3026
- > table\r
3027
- > tbody\r
3028
- > tr\r
3029
- > th\r
3030
- > div.dataTables_sizing,\r
3031
- .dataTables_wrapper\r
3032
- .dataTables_scroll\r
3033
- div.dataTables_scrollBody\r
3034
- > table\r
3035
- > tbody\r
3036
- > tr\r
3037
- > td\r
3038
- > div.dataTables_sizing {\r
3039
- height: 0;\r
3040
- overflow: hidden;\r
3041
- margin: 0 !important;\r
3042
- padding: 0 !important;\r
3043
- }\r
3044
- .dataTables_wrapper.no-footer .dataTables_scrollBody {\r
3045
- @apply border-b;\r
3046
- }\r
3047
- .dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable,\r
3048
- .dataTables_wrapper.no-footer div.dataTables_scrollBody > table {\r
3049
- border-bottom: none;\r
3050
- }\r
3051
- .dataTables_wrapper:after {\r
3052
- visibility: hidden;\r
3053
- display: block;\r
3054
- content: "";\r
3055
- clear: both;\r
3056
- height: 0;\r
3057
- }\r
3058
- \r
3059
- /* \r
3060
- responsive styles\r
3061
- */\r
3062
- table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,\r
3063
- table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,\r
3064
- table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {\r
3065
- cursor: default !important;\r
3066
- }\r
3067
- table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,\r
3068
- table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before,\r
3069
- table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before {\r
3070
- display: none !important;\r
3071
- }\r
3072
- table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,\r
3073
- table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {\r
3074
- cursor: pointer;\r
3075
- }\r
3076
- \r
3077
- table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,\r
3078
- table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {\r
3079
- @apply mr-2 inline-flex h-4 w-4 bg-[url('https://api.iconify.design/lucide:chevron-right.svg')] bg-contain bg-center bg-no-repeat pb-[3px] content-[''] dark:bg-[url('https://api.iconify.design/lucide:chevron-right.svg?color=white')];\r
3080
- }\r
3081
- table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control.arrow-right::before,\r
3082
- table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control.arrow-right::before {\r
3083
- content: "\u25C4";\r
3084
- }\r
3085
- table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,\r
3086
- table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before,\r
3087
- table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,\r
3088
- table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control:before {\r
3089
- @apply mr-2 inline-block h-4 w-4 bg-[url('https://api.iconify.design/lucide:chevron-down.svg')] bg-contain bg-center bg-no-repeat content-[''] dark:bg-[url('https://api.iconify.design/lucide:chevron-down.svg?color=white')];\r
3090
- }\r
3091
- table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control,\r
3092
- table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control {\r
3093
- padding-left: 0.333em;\r
3094
- }\r
3095
- table.dataTable.dtr-column > tbody > tr > td.dtr-control,\r
3096
- table.dataTable.dtr-column > tbody > tr > th.dtr-control,\r
3097
- table.dataTable.dtr-column > tbody > tr > td.control,\r
3098
- table.dataTable.dtr-column > tbody > tr > th.control {\r
3099
- cursor: pointer;\r
3100
- }\r
3101
- table.dataTable.dtr-column > tbody > tr > td.dtr-control:before,\r
3102
- table.dataTable.dtr-column > tbody > tr > th.dtr-control:before,\r
3103
- table.dataTable.dtr-column > tbody > tr > td.control:before,\r
3104
- table.dataTable.dtr-column > tbody > tr > th.control:before {\r
3105
- @apply mr-2 inline-flex h-4 w-4 bg-[url('https://api.iconify.design/lucide:chevron-right.svg')] bg-contain bg-center bg-no-repeat pb-[3px] content-[''] dark:bg-[url('https://api.iconify.design/lucide:chevron-right.svg?color=white')];\r
3106
- }\r
3107
- table.dataTable.dtr-column > tbody > tr > td.dtr-control.arrow-right::before,\r
3108
- table.dataTable.dtr-column > tbody > tr > th.dtr-control.arrow-right::before,\r
3109
- table.dataTable.dtr-column > tbody > tr > td.control.arrow-right::before,\r
3110
- table.dataTable.dtr-column > tbody > tr > th.control.arrow-right::before {\r
3111
- content: "\u25C4";\r
3112
- }\r
3113
- table.dataTable.dtr-column > tbody > tr.parent td.dtr-control:before,\r
3114
- table.dataTable.dtr-column > tbody > tr.parent th.dtr-control:before,\r
3115
- table.dataTable.dtr-column > tbody > tr.parent td.control:before,\r
3116
- table.dataTable.dtr-column > tbody > tr.parent th.control:before,\r
3117
- table.dataTable.dtr-column > tbody > tr.dtr-expanded td.dtr-control:before,\r
3118
- table.dataTable.dtr-column > tbody > tr.dtr-expanded th.dtr-control:before,\r
3119
- table.dataTable.dtr-column > tbody > tr.dtr-expanded td.control:before,\r
3120
- table.dataTable.dtr-column > tbody > tr.dtr-expanded th.control:before {\r
3121
- @apply mr-2 inline-block h-4 w-4 bg-[url('https://api.iconify.design/lucide:chevron-down.svg')] bg-contain bg-center bg-no-repeat content-[''] dark:bg-[url('https://api.iconify.design/lucide:chevron-down.svg?color=white')];\r
3122
- }\r
3123
- \r
3124
- table.dataTable > tbody td.child {\r
3125
- @apply p-0;\r
3126
- }\r
3127
- table.dataTable > tbody > tr.child:hover,\r
3128
- table.dataTable > tbody > tr.child:hover > td.child {\r
3129
- background: transparent !important;\r
3130
- }\r
3131
- table.dataTable > tbody > tr.child ul.dtr-details {\r
3132
- @apply m-0 block w-full list-none p-0;\r
3133
- }\r
3134
- table.dataTable > tbody > tr.child ul.dtr-details > li {\r
3135
- @apply border-b p-3 px-7 hover:bg-muted;\r
3136
- }\r
3137
- \r
3138
- table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {\r
3139
- @apply border-b-0;\r
3140
- }\r
3141
- table.dataTable > tbody > tr.child span.dtr-title {\r
3142
- @apply inline-block min-w-[80px] font-bold;\r
3143
- }\r
3144
- /* Responsive modal */\r
3145
- div.dtr-modal {\r
3146
- @apply fixed left-0 top-0 z-[1000] box-border size-full;\r
3147
- }\r
3148
- div.dtr-modal div.dtr-modal-display {\r
3149
- @apply absolute left-1/2 top-1/2 z-[102] max-h-[80%] w-full max-w-screen-sm -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-md border bg-background p-4 pb-0 md:px-7 md:py-4 md:pb-0 lg:max-h-[90%];\r
3150
- }\r
3151
- div.dtr-modal div.dtr-modal-content {\r
3152
- @apply relative flex flex-col p-0 text-[15px];\r
3153
- h2 {\r
3154
- @apply text-lg font-semibold text-foreground;\r
3155
- }\r
3156
- table tr td {\r
3157
- @apply space-x-10 pb-2 first:font-semibold [&:nth-child(2)]:pl-2;\r
3158
- }\r
3159
- }\r
3160
- div.dtr-modal div.dtr-modal-close {\r
3161
- @apply absolute right-2 top-2 z-[10] inline-flex size-6 cursor-pointer items-center justify-center rounded-md bg-muted/10 hover:bg-muted;\r
3162
- }\r
3163
- div.dtr-modal div.dtr-modal-background {\r
3164
- @apply fixed inset-0 z-[101] bg-background/20 backdrop-blur;\r
3165
- }\r
3166
- \r
3167
- /* Search Builder Styles */\r
3168
- div.dt-button-collection {\r
3169
- overflow: visible !important;\r
3170
- z-index: 2002 !important;\r
3171
- }\r
3172
- div.dt-button-collection div.dtsb-searchBuilder {\r
3173
- padding-left: 1em !important;\r
3174
- padding-right: 1em !important;\r
3175
- }\r
3176
- div.dt-button-collection.dtb-collection-closeable div.dtsb-titleRow {\r
3177
- padding-right: 40px;\r
3178
- }\r
3179
- .dtsb-greyscale {\r
3180
- @apply !border;\r
3181
- }\r
3182
- div.dtsb-logicContainer .dtsb-greyscale {\r
3183
- border: none !important;\r
3184
- }\r
3185
- div.dtsb-searchBuilder {\r
3186
- @apply mb-4 cursor-default justify-evenly text-left;\r
3187
- }\r
3188
- div.dtsb-searchBuilder button.dtsb-button,\r
3189
- div.dtsb-searchBuilder select {\r
3190
- @apply text-sm;\r
3191
- }\r
3192
- div.dtsb-searchBuilder div.dtsb-titleRow {\r
3193
- @apply mb-3 flex items-center justify-between;\r
3194
- }\r
3195
- div.dtsb-searchBuilder div.dtsb-titleRow div.dtsb-title {\r
3196
- @apply inline-block text-sm font-normal;\r
3197
- }\r
3198
- div.dtsb-searchBuilder div.dtsb-titleRow div.dtsb-title:empty {\r
3199
- display: inline;\r
3200
- }\r
3201
- div.dtsb-searchBuilder div.dtsb-vertical .dtsb-value,\r
3202
- div.dtsb-searchBuilder div.dtsb-vertical .dtsb-data,\r
3203
- div.dtsb-searchBuilder div.dtsb-vertical .dtsb-condition {\r
3204
- display: block;\r
3205
- }\r
3206
- div.dtsb-searchBuilder div.dtsb-group {\r
3207
- @apply relative clear-both mb-4;\r
3208
- }\r
3209
- div.dtsb-searchBuilder div.dtsb-group button.dtsb-search {\r
3210
- float: right;\r
3211
- }\r
3212
- div.dtsb-searchBuilder div.dtsb-group button.dtsb-clearGroup {\r
3213
- margin: 2px;\r
3214
- text-align: center;\r
3215
- padding: 0;\r
3216
- }\r
3217
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer {\r
3218
- -webkit-transform: rotate(90deg);\r
3219
- -moz-transform: rotate(90deg);\r
3220
- -o-transform: rotate(90deg);\r
3221
- -ms-transform: rotate(90deg);\r
3222
- transform: rotate(90deg);\r
3223
- position: absolute;\r
3224
- margin-top: 0.8em;\r
3225
- margin-right: 0.8em;\r
3226
- }\r
3227
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria {\r
3228
- margin-bottom: 0.8em;\r
3229
- display: flex;\r
3230
- justify-content: flex-start;\r
3231
- flex-flow: row wrap;\r
3232
- }\r
3233
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\r
3234
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\r
3235
- padding: 0.4em;\r
3236
- margin-right: 0.8em;\r
3237
- min-width: 5em;\r
3238
- max-width: 20em;\r
3239
- color: inherit;\r
3240
- }\r
3241
- div.dtsb-searchBuilder\r
3242
- div.dtsb-group\r
3243
- div.dtsb-criteria\r
3244
- select.dtsb-dropDown\r
3245
- option.dtsb-notItalic,\r
3246
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input option.dtsb-notItalic {\r
3247
- font-style: normal;\r
3248
- }\r
3249
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-italic {\r
3250
- font-style: italic;\r
3251
- }\r
3252
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont {\r
3253
- flex: 1;\r
3254
- white-space: nowrap;\r
3255
- }\r
3256
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont span.dtsp-joiner {\r
3257
- margin-right: 0.8em;\r
3258
- }\r
3259
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont input.dtsb-value {\r
3260
- width: 33%;\r
3261
- }\r
3262
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont select,\r
3263
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont input {\r
3264
- height: 100%;\r
3265
- box-sizing: border-box;\r
3266
- }\r
3267
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer {\r
3268
- margin-left: auto;\r
3269
- display: inline-block;\r
3270
- }\r
3271
- div.dtsb-searchBuilder\r
3272
- div.dtsb-group\r
3273
- div.dtsb-criteria\r
3274
- div.dtsb-buttonContainer\r
3275
- button.dtsb-delete,\r
3276
- div.dtsb-searchBuilder\r
3277
- div.dtsb-group\r
3278
- div.dtsb-criteria\r
3279
- div.dtsb-buttonContainer\r
3280
- button.dtsb-right,\r
3281
- div.dtsb-searchBuilder\r
3282
- div.dtsb-group\r
3283
- div.dtsb-criteria\r
3284
- div.dtsb-buttonContainer\r
3285
- button.dtsb-left {\r
3286
- margin-right: 0.8em;\r
3287
- }\r
3288
- div.dtsb-searchBuilder\r
3289
- div.dtsb-group\r
3290
- div.dtsb-criteria\r
3291
- div.dtsb-buttonContainer\r
3292
- button.dtsb-delete:last-child,\r
3293
- div.dtsb-searchBuilder\r
3294
- div.dtsb-group\r
3295
- div.dtsb-criteria\r
3296
- div.dtsb-buttonContainer\r
3297
- button.dtsb-right:last-child,\r
3298
- div.dtsb-searchBuilder\r
3299
- div.dtsb-group\r
3300
- div.dtsb-criteria\r
3301
- div.dtsb-buttonContainer\r
3302
- button.dtsb-left:last-child {\r
3303
- margin-right: 0;\r
3304
- }\r
3305
- @media screen and (max-width: 550px) {\r
3306
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria {\r
3307
- display: flex;\r
3308
- flex-flow: none;\r
3309
- flex-direction: column;\r
3310
- justify-content: flex-start;\r
3311
- padding-right: calc(35px + 0.8em);\r
3312
- margin-bottom: 0px;\r
3313
- }\r
3314
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:first-child),\r
3315
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:nth-child(2)),\r
3316
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:last-child) {\r
3317
- padding-top: 0.8em;\r
3318
- }\r
3319
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:first-child,\r
3320
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:nth-child(2),\r
3321
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:last-child {\r
3322
- padding-top: 0em;\r
3323
- }\r
3324
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\r
3325
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\r
3326
- max-width: none;\r
3327
- width: 100%;\r
3328
- margin-bottom: 0.8em;\r
3329
- margin-right: 0.8em;\r
3330
- }\r
3331
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont {\r
3332
- margin-right: 0.8em;\r
3333
- }\r
3334
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer {\r
3335
- position: absolute;\r
3336
- width: 35px;\r
3337
- display: flex;\r
3338
- flex-wrap: wrap-reverse;\r
3339
- right: 0;\r
3340
- }\r
3341
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button {\r
3342
- margin-right: 0px !important;\r
3343
- }\r
3344
- }\r
3345
- div.dtsb-searchBuilder button,\r
3346
- div.dtsb-searchBuilder select.dtsb-dropDown,\r
3347
- div.dtsb-searchBuilder input {\r
3348
- @apply bg-background;\r
3349
- }\r
3350
- div.dtsb-searchBuilder button.dtsb-button {\r
3351
- @apply relative box-border inline-flex h-9 cursor-pointer select-none items-center justify-center overflow-hidden text-ellipsis whitespace-nowrap rounded-md border bg-background px-3 py-2 text-sm font-normal text-muted-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;\r
3352
- }\r
3353
- div.dtsb-searchBuilder button.dtsb-button:hover {\r
3354
- @apply cursor-pointer bg-muted;\r
3355
- }\r
3356
- div.dtsb-searchBuilder div.dtsb-logicContainer {\r
3357
- @apply overflow-hidden rounded-none border;\r
3358
- }\r
3359
- div.dtsb-searchBuilder div.dtsb-logicContainer button {\r
3360
- @apply rounded-md border-transparent bg-transparent;\r
3361
- }\r
3362
- div.dtsb-searchBuilder button.dtsb-clearGroup {\r
3363
- min-width: 2em;\r
3364
- padding: 0;\r
3365
- }\r
3366
- div.dtsb-searchBuilder button.dtsb-iptbtn {\r
3367
- min-width: 100px;\r
3368
- text-align: left;\r
3369
- }\r
3370
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer {\r
3371
- @apply flex flex-row content-start items-start justify-start rounded-md;\r
3372
- }\r
3373
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-logic {\r
3374
- @apply m-0 shrink-0 grow rounded-none border-0;\r
3375
- flex-basis: 3em;\r
3376
- }\r
3377
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-clearGroup {\r
3378
- border: none;\r
3379
- border-radius: 0px;\r
3380
- width: 2em;\r
3381
- margin: 0px;\r
3382
- }\r
3383
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\r
3384
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\r
3385
- @apply rounded-md border;\r
3386
- }\r
3387
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-condition,\r
3388
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-data,\r
3389
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-value {\r
3390
- @apply rounded-md border border-input bg-background text-sm transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background focus-visible:border-input;\r
3391
- }\r
3392
- \r
3393
- div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-value {\r
3394
- @apply rounded-md border border-input bg-background text-sm transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background focus-visible:border-input;\r
3395
- }\r
3396
- \r
3397
- /* Col vis styles */\r
3398
- .dt-button-background {\r
3399
- @apply fixed inset-0 z-50 flex flex-col items-center justify-center bg-background/50 backdrop-blur-sm;\r
3400
- }\r
3401
- .dt-button-down-arrow {\r
3402
- @apply text-[10px];\r
3403
- }\r
3404
- .dt-button-collection {\r
3405
- @apply relative;\r
3406
- [role="menu"] {\r
3407
- @apply absolute -left-20 top-7 flex min-w-[200px] flex-col rounded-md border bg-background py-2 shadow before:mx-2 before:mb-2 before:text-xs before:text-muted-foreground/70 before:content-['Select_columns'];\r
3408
- button {\r
3409
- @apply h-8 rounded-none border-none px-4 text-xs;\r
3410
- }\r
3411
- .dt-button.buttons-columnVisibility.dt-button-active {\r
3412
- @apply text-foreground after:ml-auto after:content-['\u2713'];\r
3413
- }\r
3414
- }\r
3415
- }\r
3416
- </style>\r
2353
+ `}],files:[{fileName:"Datatable.client.vue",dirPath:"components/UI",fileContent:`<template>
2354
+ <DataTable
2355
+ :columns="columns"
2356
+ :ajax="ajax"
2357
+ ref="table"
2358
+ :data="data"
2359
+ :class="props.class"
2360
+ :options="options"
2361
+ >
2362
+ <template v-for="(_, name) in $slots" v-slot:[name]="scope">
2363
+ <slot :name="name" v-bind="scope"></slot>
2364
+ </template>
2365
+ </DataTable>
2366
+ </template>
2367
+
2368
+ <script lang="ts" setup generic="T extends Record<string, any>">
2369
+ import type DataTableRef from "datatables.net";
2370
+ import type { Config } from "datatables.net";
2371
+
2372
+ export type DataTablesNamedSlotProps<T> = {
2373
+ /** The data to show in the cell (from the \`columns.data\` configuration) */
2374
+ cellData: keyof T | null;
2375
+ /** The column index for the cell (0-based index) */
2376
+ colIndex: number;
2377
+ /** The data object for the whole row */
2378
+ rowData: T | Record<string, any>;
2379
+ /** Row index for the cell (data index, not the display index) */
2380
+ rowIndex: number;
2381
+ /** Orthogonal data type */
2382
+ type: string;
2383
+ };
2384
+
2385
+ const table = shallowRef<{ dt: InstanceType<typeof DataTableRef<T[]>> } | null>(null);
2386
+
2387
+ const props = withDefaults(
2388
+ defineProps<{
2389
+ data?: Config["data"];
2390
+ class?: any;
2391
+ columns?: Config["columns"];
2392
+ ajax?: Config["ajax"];
2393
+ options?: Config;
2394
+ }>(),
2395
+ {
2396
+ data: () => [],
2397
+ class: "nowrap hover order-column row-border stripe display",
2398
+ options: () => ({}),
2399
+ }
2400
+ );
2401
+
2402
+ const emits = defineEmits<{
2403
+ ready: [any];
2404
+ }>();
2405
+
2406
+ onMounted(() => {
2407
+ nextTick(() => {
2408
+ emits("ready", table.value?.dt);
2409
+ });
2410
+ });
2411
+ </script>
2412
+
2413
+ <style>
2414
+ :root {
2415
+ --dt-row-selected: 262.1, 83.3%, 57.8%;
2416
+ --dt-row-selected-text: 210, 20%, 98%;
2417
+ --dt-row-selected-link: 262.1, 83.3%, 57.8%;
2418
+ --dt-row-stripe: 0, 0%, 100%;
2419
+ --dt-row-hover: 0, 0%, 100%;
2420
+ --dt-column-ordering: 0, 0%, 100%;
2421
+ --dt-border: 220, 13%, 91%;
2422
+ --dt-foreground: 224, 71.4%, 4.1%;
2423
+ }
2424
+
2425
+ .dark {
2426
+ --dt-row-selected: 263.4, 70%, 50.4%;
2427
+ --dt-row-selected-text: 210, 20%, 98%;
2428
+ --dt-row-selected-link: 263.4, 70%, 50.4%;
2429
+ --dt-row-stripe: 224, 71.4%, 4.1%;
2430
+ --dt-row-hover: 224, 71.4%, 4.1%;
2431
+ --dt-column-ordering: 224, 71.4%, 4.1%;
2432
+ --dt-border: 215, 27.9%, 16.9%;
2433
+ --dt-foreground: 224, 71.4%, 4.1%;
2434
+ }
2435
+
2436
+ table.dataTable td.dt-control {
2437
+ text-align: center;
2438
+ cursor: pointer;
2439
+ }
2440
+ table.dataTable td.dt-control:before {
2441
+ display: inline-block;
2442
+ color: hsla(var(--dt-foreground), 0.5);
2443
+ content: "\u25BA";
2444
+ }
2445
+ table.dataTable tr.dt-hasChild td.dt-control:before {
2446
+ content: "\u25BC";
2447
+ }
2448
+
2449
+ table.dataTable thead > tr > th.sorting,
2450
+ table.dataTable thead > tr > th.sorting_asc,
2451
+ table.dataTable thead > tr > th.sorting_desc,
2452
+ table.dataTable thead > tr > th.sorting_asc_disabled,
2453
+ table.dataTable thead > tr > th.sorting_desc_disabled,
2454
+ table.dataTable thead > tr > td.sorting,
2455
+ table.dataTable thead > tr > td.sorting_asc,
2456
+ table.dataTable thead > tr > td.sorting_desc,
2457
+ table.dataTable thead > tr > td.sorting_asc_disabled,
2458
+ table.dataTable thead > tr > td.sorting_desc_disabled,
2459
+ /* V2 */
2460
+ table.dataTable thead > tr > th.dt-orderable-asc,
2461
+ table.dataTable thead > tr > th.dt-orderable-desc,
2462
+ table.dataTable thead > tr > td.dt-orderable-asc,
2463
+ table.dataTable thead > tr > td.dt-orderable-desc {
2464
+ @apply relative cursor-pointer pr-7;
2465
+ }
2466
+ table.dataTable thead > tr > th.sorting:before,
2467
+ table.dataTable thead > tr > th.sorting:after,
2468
+ table.dataTable thead > tr > th.sorting_asc:before,
2469
+ table.dataTable thead > tr > th.sorting_asc:after,
2470
+ table.dataTable thead > tr > th.sorting_desc:before,
2471
+ table.dataTable thead > tr > th.sorting_desc:after,
2472
+ table.dataTable thead > tr > th.sorting_asc_disabled:before,
2473
+ table.dataTable thead > tr > th.sorting_asc_disabled:after,
2474
+ table.dataTable thead > tr > th.sorting_desc_disabled:before,
2475
+ table.dataTable thead > tr > th.sorting_desc_disabled:after,
2476
+ table.dataTable thead > tr > td.sorting:before,
2477
+ table.dataTable thead > tr > td.sorting:after,
2478
+ table.dataTable thead > tr > td.sorting_asc:before,
2479
+ table.dataTable thead > tr > td.sorting_asc:after,
2480
+ table.dataTable thead > tr > td.sorting_desc:before,
2481
+ table.dataTable thead > tr > td.sorting_desc:after,
2482
+ table.dataTable thead > tr > td.sorting_asc_disabled:before,
2483
+ table.dataTable thead > tr > td.sorting_asc_disabled:after,
2484
+ table.dataTable thead > tr > td.sorting_desc_disabled:before,
2485
+ table.dataTable thead > tr > td.sorting_desc_disabled:after,
2486
+ /* V2 */
2487
+ table.dataTable thead > tr > th.dt-orderable-asc:before,
2488
+ table.dataTable thead > tr > th.dt-orderable-asc:after,
2489
+ table.dataTable thead > tr > th.dt-orderable-desc:before,
2490
+ table.dataTable thead > tr > th.dt-orderable-desc:after,
2491
+ table.dataTable thead > tr > td.dt-orderable-asc:before,
2492
+ table.dataTable thead > tr > td.dt-orderable-asc:after,
2493
+ table.dataTable thead > tr > td.dt-orderable-desc:before,
2494
+ table.dataTable thead > tr > td.dt-orderable-desc:after {
2495
+ @apply absolute right-2.5 block text-xs leading-3 opacity-25;
2496
+ }
2497
+ table.dataTable thead > tr > th.sorting:before,
2498
+ table.dataTable thead > tr > th.sorting_asc:before,
2499
+ table.dataTable thead > tr > th.sorting_desc:before,
2500
+ table.dataTable thead > tr > th.sorting_asc_disabled:before,
2501
+ table.dataTable thead > tr > th.sorting_desc_disabled:before,
2502
+ table.dataTable thead > tr > td.sorting:before,
2503
+ table.dataTable thead > tr > td.sorting_asc:before,
2504
+ table.dataTable thead > tr > td.sorting_desc:before,
2505
+ table.dataTable thead > tr > td.sorting_asc_disabled:before,
2506
+ table.dataTable thead > tr > td.sorting_desc_disabled:before,
2507
+ /* V2 */
2508
+ table.dataTable thead > tr > th.dt-orderable-asc:before,
2509
+ table.dataTable thead > tr > th.dt-orderable-desc:before,
2510
+ table.dataTable thead > tr > td.dt-orderable-asc:before,
2511
+ table.dataTable thead > tr > td.dt-orderable-desc:before {
2512
+ @apply bottom-[43%] h-4 w-4 bg-[url('https://api.iconify.design/lucide:chevron-up.svg')] bg-contain bg-center bg-no-repeat content-[''] dark:bg-[url('https://api.iconify.design/lucide:chevron-up.svg?color=white')];
2513
+ }
2514
+ table.dataTable thead > tr > th.sorting:after,
2515
+ table.dataTable thead > tr > th.sorting_asc:after,
2516
+ table.dataTable thead > tr > th.sorting_desc:after,
2517
+ table.dataTable thead > tr > th.sorting_asc_disabled:after,
2518
+ table.dataTable thead > tr > th.sorting_desc_disabled:after,
2519
+ table.dataTable thead > tr > td.sorting:after,
2520
+ table.dataTable thead > tr > td.sorting_asc:after,
2521
+ table.dataTable thead > tr > td.sorting_desc:after,
2522
+ table.dataTable thead > tr > td.sorting_asc_disabled:after,
2523
+ table.dataTable thead > tr > td.sorting_desc_disabled:after,
2524
+ /* V2 */
2525
+ table.dataTable thead > tr > th.dt-orderable-asc:after,
2526
+ table.dataTable thead > tr > th.dt-orderable-desc:after,
2527
+ table.dataTable thead > tr > td.dt-orderable-asc:after,
2528
+ table.dataTable thead > tr > td.dt-orderable-desc:after {
2529
+ @apply top-[43%] h-4 w-4 bg-[url('https://api.iconify.design/lucide:chevron-down.svg')] bg-contain bg-center bg-no-repeat content-[''] dark:bg-[url('https://api.iconify.design/lucide:chevron-down.svg?color=white')];
2530
+ }
2531
+ table.dataTable thead > tr > th.sorting_asc:before,
2532
+ table.dataTable thead > tr > th.sorting_desc:after,
2533
+ table.dataTable thead > tr > td.sorting_asc:before,
2534
+ table.dataTable thead > tr > td.sorting_desc:after,
2535
+ /* V2 */
2536
+ table.dataTable thead > tr > th.dt-ordering-asc:before,
2537
+ table.dataTable thead > tr > th.dt-ordering-desc:after {
2538
+ @apply opacity-80;
2539
+ }
2540
+ table.dataTable thead > tr > th.sorting_desc_disabled:after,
2541
+ table.dataTable thead > tr > th.sorting_asc_disabled:before,
2542
+ table.dataTable thead > tr > td.sorting_desc_disabled:after,
2543
+ table.dataTable thead > tr > td.sorting_asc_disabled:before {
2544
+ @apply hidden;
2545
+ }
2546
+ table.dataTable thead > tr > th:active,
2547
+ table.dataTable thead > tr > td:active {
2548
+ @apply outline-none;
2549
+ }
2550
+
2551
+ div.dataTables_scrollBody > table.dataTable > thead > tr > th:before,
2552
+ div.dataTables_scrollBody > table.dataTable > thead > tr > th:after,
2553
+ div.dataTables_scrollBody > table.dataTable > thead > tr > td:before,
2554
+ div.dataTables_scrollBody > table.dataTable > thead > tr > td:after {
2555
+ @apply hidden;
2556
+ }
2557
+
2558
+ div.dataTables_processing {
2559
+ @apply absolute left-[50%] top-[50%] ml-[-100px] mt-[-26px] w-[200px] p-0.5 text-center;
2560
+ }
2561
+ div.dataTables_processing > div:last-child {
2562
+ @apply relative mx-auto my-4 h-4 w-20;
2563
+ }
2564
+ div.dataTables_processing > div:last-child > div {
2565
+ @apply absolute top-0 h-3.5 w-3.5 rounded-full;
2566
+ background: hsl(var(--dt-row-selected));
2567
+ animation-timing-function: cubic-bezier(0, 1, 1, 0);
2568
+ }
2569
+ div.dataTables_processing > div:last-child > div:nth-child(1) {
2570
+ left: 8px;
2571
+ animation: datatables-loader-1 0.6s infinite;
2572
+ }
2573
+ div.dataTables_processing > div:last-child > div:nth-child(2) {
2574
+ left: 8px;
2575
+ animation: datatables-loader-2 0.6s infinite;
2576
+ }
2577
+ div.dataTables_processing > div:last-child > div:nth-child(3) {
2578
+ left: 32px;
2579
+ animation: datatables-loader-2 0.6s infinite;
2580
+ }
2581
+ div.dataTables_processing > div:last-child > div:nth-child(4) {
2582
+ left: 56px;
2583
+ animation: datatables-loader-3 0.6s infinite;
2584
+ }
2585
+
2586
+ @keyframes datatables-loader-1 {
2587
+ 0% {
2588
+ transform: scale(0);
2589
+ }
2590
+ 100% {
2591
+ transform: scale(1);
2592
+ }
2593
+ }
2594
+ @keyframes datatables-loader-3 {
2595
+ 0% {
2596
+ transform: scale(1);
2597
+ }
2598
+ 100% {
2599
+ transform: scale(0);
2600
+ }
2601
+ }
2602
+ @keyframes datatables-loader-2 {
2603
+ 0% {
2604
+ transform: translate(0, 0);
2605
+ }
2606
+ 100% {
2607
+ transform: translate(24px, 0);
2608
+ }
2609
+ }
2610
+ table.dataTable.nowrap th,
2611
+ table.dataTable.nowrap td {
2612
+ white-space: nowrap;
2613
+ }
2614
+ table.dataTable th.dt-left,
2615
+ table.dataTable td.dt-left {
2616
+ text-align: left;
2617
+ }
2618
+ table.dataTable th.dt-center,
2619
+ table.dataTable td.dt-center,
2620
+ table.dataTable td.dataTables_empty {
2621
+ text-align: center;
2622
+ }
2623
+ table.dataTable th.dt-right,
2624
+ table.dataTable td.dt-right {
2625
+ text-align: right;
2626
+ }
2627
+ table.dataTable th.dt-justify,
2628
+ table.dataTable td.dt-justify {
2629
+ text-align: justify;
2630
+ }
2631
+ table.dataTable th.dt-nowrap,
2632
+ table.dataTable td.dt-nowrap {
2633
+ white-space: nowrap;
2634
+ }
2635
+ table.dataTable thead th,
2636
+ table.dataTable thead td,
2637
+ table.dataTable tfoot th,
2638
+ table.dataTable tfoot td {
2639
+ text-align: left;
2640
+ }
2641
+ table.dataTable thead th.dt-head-left,
2642
+ table.dataTable thead td.dt-head-left,
2643
+ table.dataTable tfoot th.dt-head-left,
2644
+ table.dataTable tfoot td.dt-head-left {
2645
+ text-align: left;
2646
+ }
2647
+ table.dataTable thead th.dt-head-center,
2648
+ table.dataTable thead td.dt-head-center,
2649
+ table.dataTable tfoot th.dt-head-center,
2650
+ table.dataTable tfoot td.dt-head-center {
2651
+ text-align: center;
2652
+ }
2653
+ table.dataTable thead th.dt-head-right,
2654
+ table.dataTable thead td.dt-head-right,
2655
+ table.dataTable tfoot th.dt-head-right,
2656
+ table.dataTable tfoot td.dt-head-right {
2657
+ text-align: right;
2658
+ }
2659
+ table.dataTable thead th.dt-head-justify,
2660
+ table.dataTable thead td.dt-head-justify,
2661
+ table.dataTable tfoot th.dt-head-justify,
2662
+ table.dataTable tfoot td.dt-head-justify {
2663
+ text-align: justify;
2664
+ }
2665
+ table.dataTable thead th.dt-head-nowrap,
2666
+ table.dataTable thead td.dt-head-nowrap,
2667
+ table.dataTable tfoot th.dt-head-nowrap,
2668
+ table.dataTable tfoot td.dt-head-nowrap {
2669
+ white-space: nowrap;
2670
+ }
2671
+ table.dataTable tbody th.dt-body-left,
2672
+ table.dataTable tbody td.dt-body-left {
2673
+ text-align: left;
2674
+ }
2675
+ table.dataTable tbody th.dt-body-center,
2676
+ table.dataTable tbody td.dt-body-center {
2677
+ text-align: center;
2678
+ }
2679
+ table.dataTable tbody th.dt-body-right,
2680
+ table.dataTable tbody td.dt-body-right {
2681
+ text-align: right;
2682
+ }
2683
+ table.dataTable tbody th.dt-body-justify,
2684
+ table.dataTable tbody td.dt-body-justify {
2685
+ text-align: justify;
2686
+ }
2687
+ table.dataTable tbody th.dt-body-nowrap,
2688
+ table.dataTable tbody td.dt-body-nowrap {
2689
+ white-space: nowrap;
2690
+ }
2691
+
2692
+ /* Table Styles */
2693
+
2694
+ table.dataTable {
2695
+ @apply w-full table-auto border-collapse;
2696
+ }
2697
+
2698
+ /* Table header styles */
2699
+ table.dataTable thead th,
2700
+ table.dataTable tfoot th {
2701
+ @apply text-left text-sm font-medium text-muted-foreground;
2702
+ }
2703
+
2704
+ table.dataTable > thead > tr > th {
2705
+ @apply border-b border-t-0 px-6 py-3;
2706
+ }
2707
+ table.dataTable > thead > tr > td {
2708
+ @apply border-b px-6 py-3 text-sm;
2709
+ }
2710
+ table.dataTable > thead > tr > th:active,
2711
+ table.dataTable > thead > tr > td:active {
2712
+ @apply outline-none;
2713
+ }
2714
+ table.dataTable > tfoot > tr > th,
2715
+ table.dataTable > tfoot > tr > td {
2716
+ @apply border-t px-6 py-3;
2717
+ }
2718
+ table.dataTable tbody tr {
2719
+ @apply bg-transparent;
2720
+ }
2721
+ table.dataTable tbody tr.selected > * {
2722
+ @apply bg-primary/10;
2723
+ }
2724
+ table.dataTable tbody tr.selected a {
2725
+ @apply text-primary;
2726
+ }
2727
+ table.dataTable tbody th,
2728
+ table.dataTable tbody td {
2729
+ @apply px-6 py-3 text-sm;
2730
+ }
2731
+ table.dataTable.row-border > tbody > tr > th,
2732
+ table.dataTable.row-border > tbody > tr > td,
2733
+ table.dataTable.display > tbody > tr > th,
2734
+ table.dataTable.display > tbody > tr > td {
2735
+ @apply border-t;
2736
+ }
2737
+ table.dataTable.row-border > tbody > tr:first-child > th,
2738
+ table.dataTable.row-border > tbody > tr:first-child > td,
2739
+ table.dataTable.display > tbody > tr:first-child > th,
2740
+ table.dataTable.display > tbody > tr:first-child > td {
2741
+ @apply border-t-0;
2742
+ }
2743
+ table.dataTable.row-border > tbody > tr.selected + tr.selected > td,
2744
+ table.dataTable.display > tbody > tr.selected + tr.selected > td {
2745
+ @apply border-t-primary/30;
2746
+ }
2747
+ table.dataTable.cell-border > tbody > tr > th,
2748
+ table.dataTable.cell-border > tbody > tr > td {
2749
+ @apply border-r border-t;
2750
+ }
2751
+ table.dataTable.cell-border > tbody > tr > th:first-child,
2752
+ table.dataTable.cell-border > tbody > tr > td:first-child {
2753
+ @apply border-l;
2754
+ }
2755
+ table.dataTable.cell-border > tbody > tr:first-child > th,
2756
+ table.dataTable.cell-border > tbody > tr:first-child > td {
2757
+ @apply border-t-0;
2758
+ }
2759
+ table.dataTable.stripe > tbody > tr.odd > *,
2760
+ table.dataTable.display > tbody > tr.odd > * {
2761
+ @apply bg-muted/50;
2762
+ }
2763
+ table.dataTable.stripe > tbody > tr.odd.selected > *,
2764
+ table.dataTable.display > tbody > tr.odd.selected > * {
2765
+ @apply bg-primary/10;
2766
+ }
2767
+ table.dataTable.hover > tbody > tr:hover > *,
2768
+ table.dataTable.display > tbody > tr:hover > * {
2769
+ @apply bg-muted;
2770
+ }
2771
+ table.dataTable.hover > tbody > tr.selected:hover > *,
2772
+ table.dataTable.display > tbody > tr.selected:hover > * {
2773
+ @apply !bg-primary/10;
2774
+ }
2775
+ table.dataTable.order-column > tbody tr > .sorting_1,
2776
+ table.dataTable.order-column > tbody tr > .sorting_2,
2777
+ table.dataTable.order-column > tbody tr > .sorting_3,
2778
+ table.dataTable.display > tbody tr > .sorting_1,
2779
+ table.dataTable.display > tbody tr > .sorting_2,
2780
+ table.dataTable.display > tbody tr > .sorting_3 {
2781
+ @apply bg-muted;
2782
+ }
2783
+ table.dataTable.order-column > tbody tr.selected > .sorting_1,
2784
+ table.dataTable.order-column > tbody tr.selected > .sorting_2,
2785
+ table.dataTable.order-column > tbody tr.selected > .sorting_3,
2786
+ table.dataTable.display > tbody tr.selected > .sorting_1,
2787
+ table.dataTable.display > tbody tr.selected > .sorting_2,
2788
+ table.dataTable.display > tbody tr.selected > .sorting_3 {
2789
+ @apply !bg-primary/10;
2790
+ }
2791
+ table.dataTable.display > tbody > tr.odd > .sorting_1,
2792
+ table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_1 {
2793
+ @apply bg-muted/50;
2794
+ }
2795
+ table.dataTable.display > tbody > tr.odd > .sorting_2,
2796
+ table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_2 {
2797
+ @apply bg-muted/30;
2798
+ }
2799
+ table.dataTable.display > tbody > tr.odd > .sorting_3,
2800
+ table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_3 {
2801
+ @apply bg-muted/10;
2802
+ }
2803
+ table.dataTable.display > tbody > tr.odd.selected > .sorting_1,
2804
+ table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_1 {
2805
+ @apply bg-muted/50;
2806
+ }
2807
+ table.dataTable.display > tbody > tr.odd.selected > .sorting_2,
2808
+ table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_2 {
2809
+ @apply bg-muted/30;
2810
+ }
2811
+ table.dataTable.display > tbody > tr.odd.selected > .sorting_3,
2812
+ table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_3 {
2813
+ @apply bg-muted/10;
2814
+ }
2815
+ table.dataTable.display > tbody > tr.even > .sorting_1,
2816
+ table.dataTable.order-column.stripe > tbody > tr.even > .sorting_1 {
2817
+ @apply bg-muted/50;
2818
+ }
2819
+ table.dataTable.display > tbody > tr.even > .sorting_2,
2820
+ table.dataTable.order-column.stripe > tbody > tr.even > .sorting_2 {
2821
+ @apply bg-muted/30;
2822
+ }
2823
+ table.dataTable.display > tbody > tr.even > .sorting_3,
2824
+ table.dataTable.order-column.stripe > tbody > tr.even > .sorting_3 {
2825
+ @apply bg-muted/10;
2826
+ }
2827
+ table.dataTable.display > tbody > tr.even.selected > .sorting_1,
2828
+ table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_1 {
2829
+ @apply bg-primary/10;
2830
+ }
2831
+ table.dataTable.display > tbody > tr.even.selected > .sorting_2,
2832
+ table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_2 {
2833
+ @apply bg-primary/10;
2834
+ }
2835
+ table.dataTable.display > tbody > tr.even.selected > .sorting_3,
2836
+ table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_3 {
2837
+ @apply bg-primary/10;
2838
+ }
2839
+ table.dataTable.display tbody tr:hover > .sorting_1,
2840
+ table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
2841
+ @apply bg-muted;
2842
+ }
2843
+ table.dataTable.display tbody tr:hover > .sorting_2,
2844
+ table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {
2845
+ @apply bg-muted;
2846
+ }
2847
+ table.dataTable.display tbody tr:hover > .sorting_3,
2848
+ table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
2849
+ @apply bg-muted;
2850
+ }
2851
+ table.dataTable.display tbody tr:hover.selected > .sorting_1,
2852
+ table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {
2853
+ @apply bg-primary/10;
2854
+ }
2855
+ table.dataTable.display tbody tr:hover.selected > .sorting_2,
2856
+ table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {
2857
+ @apply bg-primary/10;
2858
+ }
2859
+ table.dataTable.display tbody tr:hover.selected > .sorting_3,
2860
+ table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {
2861
+ @apply bg-primary/10;
2862
+ }
2863
+ table.dataTable.no-footer {
2864
+ @apply border-b-0;
2865
+ }
2866
+ table.dataTable.compact thead th,
2867
+ table.dataTable.compact thead td,
2868
+ table.dataTable.compact tfoot th,
2869
+ table.dataTable.compact tfoot td,
2870
+ table.dataTable.compact tbody th,
2871
+ table.dataTable.compact tbody td {
2872
+ @apply px-4 py-2;
2873
+ }
2874
+
2875
+ table.dataTable th,
2876
+ table.dataTable td {
2877
+ @apply box-content border-y;
2878
+ }
2879
+
2880
+ table.dataTable tr:last-child td {
2881
+ @apply !border-b-0;
2882
+ }
2883
+
2884
+ /* Control feature layout */
2885
+ .dataTables_wrapper {
2886
+ @apply w-full overflow-x-auto;
2887
+ }
2888
+
2889
+ /* Export button styles - v1 of datatables */
2890
+ .dataTables_wrapper .dt-buttons {
2891
+ @apply inline-flex flex-wrap items-center gap-2;
2892
+ button {
2893
+ @apply inline-flex h-9 items-center gap-2 whitespace-nowrap rounded-md border bg-background px-3 text-sm text-muted-foreground hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;
2894
+ }
2895
+ }
2896
+ /* V2 of datatables button styles.
2897
+ */
2898
+ .dt-buttons {
2899
+ @apply inline-flex flex-wrap items-center gap-2;
2900
+ button {
2901
+ @apply inline-flex h-9 items-center gap-2 whitespace-nowrap rounded-md border bg-background px-3 text-sm text-muted-foreground hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;
2902
+ }
2903
+ }
2904
+
2905
+ /* Copy modal */
2906
+ .dt-button-info {
2907
+ @apply fixed inset-0 z-50 flex flex-col items-center justify-center bg-background/50 backdrop-blur;
2908
+ }
2909
+
2910
+ /* Select box at bottom showing number of records being displayed - v1 of datatables */
2911
+ .dataTables_wrapper .dataTables_length {
2912
+ label {
2913
+ @apply inline-flex items-center gap-2 text-sm font-normal text-muted-foreground;
2914
+ select {
2915
+ @apply h-9 w-[70px] cursor-pointer rounded-md border border-border bg-background px-2 py-1 transition focus:border-primary focus:outline-none focus-visible:border-input focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background sm:text-sm;
2916
+ }
2917
+ }
2918
+ }
2919
+ /* Select box at the bottom showing how many items are being display - v2 */
2920
+ .dt-length {
2921
+ @apply inline-flex items-center gap-2;
2922
+ label {
2923
+ @apply text-sm font-normal text-muted-foreground;
2924
+ }
2925
+ select {
2926
+ @apply h-9 w-[70px] cursor-pointer rounded-md border border-border bg-background px-2 py-1 transition focus:border-primary focus:outline-none focus-visible:border-input focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background sm:text-sm;
2927
+ }
2928
+ }
2929
+
2930
+ /* Search box at the top styles - v1 of datatables */
2931
+ .dataTables_wrapper .dataTables_filter {
2932
+ label {
2933
+ @apply inline-flex w-full cursor-pointer items-center gap-2 text-sm font-normal text-muted-foreground;
2934
+ input {
2935
+ @apply h-9 w-full rounded-md border border-border bg-background px-2 py-1 transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background focus-visible:border-input sm:text-sm;
2936
+ }
2937
+ }
2938
+ }
2939
+
2940
+ /* Search box at the top styles -v2 */
2941
+ .dt-search {
2942
+ @apply flex items-center gap-3;
2943
+ label {
2944
+ @apply inline-flex cursor-pointer items-center gap-2 text-sm font-normal text-muted-foreground;
2945
+ }
2946
+ input {
2947
+ @apply h-9 w-full rounded-md border border-border bg-background px-2 py-1 transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background focus-visible:border-input sm:text-sm md:w-[50%] lg:w-[250px];
2948
+ }
2949
+ }
2950
+
2951
+ /* Info text that shows \`Showing X to XX of XXXX entries - v1 */
2952
+ .dataTables_wrapper .dataTables_info,
2953
+ .dt-info {
2954
+ @apply flex items-center gap-3 text-sm !text-muted-foreground;
2955
+ }
2956
+
2957
+ /* Pagination button styles - v1 datatables */
2958
+ .dataTables_wrapper .dataTables_paginate {
2959
+ .paginate_button {
2960
+ @apply ml-1 box-border inline-flex h-9 min-w-[36px] cursor-pointer items-center justify-center rounded bg-transparent px-3 py-2 text-center text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;
2961
+ }
2962
+ }
2963
+ /* Pagination button - v2 */
2964
+ .dt-paging-button {
2965
+ @apply ml-1 box-border inline-flex h-9 min-w-[36px] cursor-pointer items-center justify-center rounded bg-transparent px-3 py-2 text-center text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;
2966
+ &.current,
2967
+ &:hover {
2968
+ @apply bg-muted;
2969
+ }
2970
+ &.disabled,
2971
+ &.disabled:hover,
2972
+ &.disabled:active {
2973
+ @apply pointer-events-none opacity-50;
2974
+ }
2975
+ }
2976
+ .dataTables_wrapper .dataTables_paginate .paginate_button.current,
2977
+ .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
2978
+ @apply bg-muted;
2979
+ }
2980
+ .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
2981
+ .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
2982
+ .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
2983
+ @apply pointer-events-none opacity-50;
2984
+ }
2985
+ .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
2986
+ @apply bg-muted;
2987
+ }
2988
+ .dataTables_wrapper .dataTables_paginate .paginate_button:active {
2989
+ @apply bg-muted;
2990
+ }
2991
+ .dataTables_wrapper .dataTables_paginate .ellipsis,
2992
+ .dt-paging .ellipsis {
2993
+ @apply inline-flex h-8 min-w-[32px] items-start justify-center text-sm;
2994
+ }
2995
+ .dataTables_wrapper .dataTables_scroll {
2996
+ clear: both;
2997
+ }
2998
+ .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
2999
+ -webkit-overflow-scrolling: touch;
3000
+ }
3001
+ .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th,
3002
+ .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td,
3003
+ .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th,
3004
+ .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {
3005
+ vertical-align: middle;
3006
+ }
3007
+ .dataTables_wrapper
3008
+ .dataTables_scroll
3009
+ div.dataTables_scrollBody
3010
+ > table
3011
+ > thead
3012
+ > tr
3013
+ > th
3014
+ > div.dataTables_sizing,
3015
+ .dataTables_wrapper
3016
+ .dataTables_scroll
3017
+ div.dataTables_scrollBody
3018
+ > table
3019
+ > thead
3020
+ > tr
3021
+ > td
3022
+ > div.dataTables_sizing,
3023
+ .dataTables_wrapper
3024
+ .dataTables_scroll
3025
+ div.dataTables_scrollBody
3026
+ > table
3027
+ > tbody
3028
+ > tr
3029
+ > th
3030
+ > div.dataTables_sizing,
3031
+ .dataTables_wrapper
3032
+ .dataTables_scroll
3033
+ div.dataTables_scrollBody
3034
+ > table
3035
+ > tbody
3036
+ > tr
3037
+ > td
3038
+ > div.dataTables_sizing {
3039
+ height: 0;
3040
+ overflow: hidden;
3041
+ margin: 0 !important;
3042
+ padding: 0 !important;
3043
+ }
3044
+ .dataTables_wrapper.no-footer .dataTables_scrollBody {
3045
+ @apply border-b;
3046
+ }
3047
+ .dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable,
3048
+ .dataTables_wrapper.no-footer div.dataTables_scrollBody > table {
3049
+ border-bottom: none;
3050
+ }
3051
+ .dataTables_wrapper:after {
3052
+ visibility: hidden;
3053
+ display: block;
3054
+ content: "";
3055
+ clear: both;
3056
+ height: 0;
3057
+ }
3058
+
3059
+ /*
3060
+ responsive styles
3061
+ */
3062
+ table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,
3063
+ table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,
3064
+ table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {
3065
+ cursor: default !important;
3066
+ }
3067
+ table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,
3068
+ table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before,
3069
+ table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before {
3070
+ display: none !important;
3071
+ }
3072
+ table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
3073
+ table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
3074
+ cursor: pointer;
3075
+ }
3076
+
3077
+ table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
3078
+ table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
3079
+ @apply mr-2 inline-flex h-4 w-4 bg-[url('https://api.iconify.design/lucide:chevron-right.svg')] bg-contain bg-center bg-no-repeat pb-[3px] content-[''] dark:bg-[url('https://api.iconify.design/lucide:chevron-right.svg?color=white')];
3080
+ }
3081
+ table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control.arrow-right::before,
3082
+ table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control.arrow-right::before {
3083
+ content: "\u25C4";
3084
+ }
3085
+ table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
3086
+ table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before,
3087
+ table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,
3088
+ table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control:before {
3089
+ @apply mr-2 inline-block h-4 w-4 bg-[url('https://api.iconify.design/lucide:chevron-down.svg')] bg-contain bg-center bg-no-repeat content-[''] dark:bg-[url('https://api.iconify.design/lucide:chevron-down.svg?color=white')];
3090
+ }
3091
+ table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control,
3092
+ table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control {
3093
+ padding-left: 0.333em;
3094
+ }
3095
+ table.dataTable.dtr-column > tbody > tr > td.dtr-control,
3096
+ table.dataTable.dtr-column > tbody > tr > th.dtr-control,
3097
+ table.dataTable.dtr-column > tbody > tr > td.control,
3098
+ table.dataTable.dtr-column > tbody > tr > th.control {
3099
+ cursor: pointer;
3100
+ }
3101
+ table.dataTable.dtr-column > tbody > tr > td.dtr-control:before,
3102
+ table.dataTable.dtr-column > tbody > tr > th.dtr-control:before,
3103
+ table.dataTable.dtr-column > tbody > tr > td.control:before,
3104
+ table.dataTable.dtr-column > tbody > tr > th.control:before {
3105
+ @apply mr-2 inline-flex h-4 w-4 bg-[url('https://api.iconify.design/lucide:chevron-right.svg')] bg-contain bg-center bg-no-repeat pb-[3px] content-[''] dark:bg-[url('https://api.iconify.design/lucide:chevron-right.svg?color=white')];
3106
+ }
3107
+ table.dataTable.dtr-column > tbody > tr > td.dtr-control.arrow-right::before,
3108
+ table.dataTable.dtr-column > tbody > tr > th.dtr-control.arrow-right::before,
3109
+ table.dataTable.dtr-column > tbody > tr > td.control.arrow-right::before,
3110
+ table.dataTable.dtr-column > tbody > tr > th.control.arrow-right::before {
3111
+ content: "\u25C4";
3112
+ }
3113
+ table.dataTable.dtr-column > tbody > tr.parent td.dtr-control:before,
3114
+ table.dataTable.dtr-column > tbody > tr.parent th.dtr-control:before,
3115
+ table.dataTable.dtr-column > tbody > tr.parent td.control:before,
3116
+ table.dataTable.dtr-column > tbody > tr.parent th.control:before,
3117
+ table.dataTable.dtr-column > tbody > tr.dtr-expanded td.dtr-control:before,
3118
+ table.dataTable.dtr-column > tbody > tr.dtr-expanded th.dtr-control:before,
3119
+ table.dataTable.dtr-column > tbody > tr.dtr-expanded td.control:before,
3120
+ table.dataTable.dtr-column > tbody > tr.dtr-expanded th.control:before {
3121
+ @apply mr-2 inline-block h-4 w-4 bg-[url('https://api.iconify.design/lucide:chevron-down.svg')] bg-contain bg-center bg-no-repeat content-[''] dark:bg-[url('https://api.iconify.design/lucide:chevron-down.svg?color=white')];
3122
+ }
3123
+
3124
+ table.dataTable > tbody td.child {
3125
+ @apply p-0;
3126
+ }
3127
+ table.dataTable > tbody > tr.child:hover,
3128
+ table.dataTable > tbody > tr.child:hover > td.child {
3129
+ background: transparent !important;
3130
+ }
3131
+ table.dataTable > tbody > tr.child ul.dtr-details {
3132
+ @apply m-0 block w-full list-none p-0;
3133
+ }
3134
+ table.dataTable > tbody > tr.child ul.dtr-details > li {
3135
+ @apply border-b p-3 px-7 hover:bg-muted;
3136
+ }
3137
+
3138
+ table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {
3139
+ @apply border-b-0;
3140
+ }
3141
+ table.dataTable > tbody > tr.child span.dtr-title {
3142
+ @apply inline-block min-w-[80px] font-bold;
3143
+ }
3144
+ /* Responsive modal */
3145
+ div.dtr-modal {
3146
+ @apply fixed left-0 top-0 z-[1000] box-border size-full;
3147
+ }
3148
+ div.dtr-modal div.dtr-modal-display {
3149
+ @apply absolute left-1/2 top-1/2 z-[102] max-h-[80%] w-full max-w-screen-sm -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-md border bg-background p-4 pb-0 md:px-7 md:py-4 md:pb-0 lg:max-h-[90%];
3150
+ }
3151
+ div.dtr-modal div.dtr-modal-content {
3152
+ @apply relative flex flex-col p-0 text-[15px];
3153
+ h2 {
3154
+ @apply text-lg font-semibold text-foreground;
3155
+ }
3156
+ table tr td {
3157
+ @apply space-x-10 pb-2 first:font-semibold [&:nth-child(2)]:pl-2;
3158
+ }
3159
+ }
3160
+ div.dtr-modal div.dtr-modal-close {
3161
+ @apply absolute right-2 top-2 z-[10] inline-flex size-6 cursor-pointer items-center justify-center rounded-md bg-muted/10 hover:bg-muted;
3162
+ }
3163
+ div.dtr-modal div.dtr-modal-background {
3164
+ @apply fixed inset-0 z-[101] bg-background/20 backdrop-blur;
3165
+ }
3166
+
3167
+ /* Search Builder Styles */
3168
+ div.dt-button-collection {
3169
+ overflow: visible !important;
3170
+ z-index: 2002 !important;
3171
+ }
3172
+ div.dt-button-collection div.dtsb-searchBuilder {
3173
+ padding-left: 1em !important;
3174
+ padding-right: 1em !important;
3175
+ }
3176
+ div.dt-button-collection.dtb-collection-closeable div.dtsb-titleRow {
3177
+ padding-right: 40px;
3178
+ }
3179
+ .dtsb-greyscale {
3180
+ @apply !border;
3181
+ }
3182
+ div.dtsb-logicContainer .dtsb-greyscale {
3183
+ border: none !important;
3184
+ }
3185
+ div.dtsb-searchBuilder {
3186
+ @apply mb-4 cursor-default justify-evenly text-left;
3187
+ }
3188
+ div.dtsb-searchBuilder button.dtsb-button,
3189
+ div.dtsb-searchBuilder select {
3190
+ @apply text-sm;
3191
+ }
3192
+ div.dtsb-searchBuilder div.dtsb-titleRow {
3193
+ @apply mb-3 flex items-center justify-between;
3194
+ }
3195
+ div.dtsb-searchBuilder div.dtsb-titleRow div.dtsb-title {
3196
+ @apply inline-block text-sm font-normal;
3197
+ }
3198
+ div.dtsb-searchBuilder div.dtsb-titleRow div.dtsb-title:empty {
3199
+ display: inline;
3200
+ }
3201
+ div.dtsb-searchBuilder div.dtsb-vertical .dtsb-value,
3202
+ div.dtsb-searchBuilder div.dtsb-vertical .dtsb-data,
3203
+ div.dtsb-searchBuilder div.dtsb-vertical .dtsb-condition {
3204
+ display: block;
3205
+ }
3206
+ div.dtsb-searchBuilder div.dtsb-group {
3207
+ @apply relative clear-both mb-4;
3208
+ }
3209
+ div.dtsb-searchBuilder div.dtsb-group button.dtsb-search {
3210
+ float: right;
3211
+ }
3212
+ div.dtsb-searchBuilder div.dtsb-group button.dtsb-clearGroup {
3213
+ margin: 2px;
3214
+ text-align: center;
3215
+ padding: 0;
3216
+ }
3217
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer {
3218
+ -webkit-transform: rotate(90deg);
3219
+ -moz-transform: rotate(90deg);
3220
+ -o-transform: rotate(90deg);
3221
+ -ms-transform: rotate(90deg);
3222
+ transform: rotate(90deg);
3223
+ position: absolute;
3224
+ margin-top: 0.8em;
3225
+ margin-right: 0.8em;
3226
+ }
3227
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria {
3228
+ margin-bottom: 0.8em;
3229
+ display: flex;
3230
+ justify-content: flex-start;
3231
+ flex-flow: row wrap;
3232
+ }
3233
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,
3234
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {
3235
+ padding: 0.4em;
3236
+ margin-right: 0.8em;
3237
+ min-width: 5em;
3238
+ max-width: 20em;
3239
+ color: inherit;
3240
+ }
3241
+ div.dtsb-searchBuilder
3242
+ div.dtsb-group
3243
+ div.dtsb-criteria
3244
+ select.dtsb-dropDown
3245
+ option.dtsb-notItalic,
3246
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input option.dtsb-notItalic {
3247
+ font-style: normal;
3248
+ }
3249
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-italic {
3250
+ font-style: italic;
3251
+ }
3252
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont {
3253
+ flex: 1;
3254
+ white-space: nowrap;
3255
+ }
3256
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont span.dtsp-joiner {
3257
+ margin-right: 0.8em;
3258
+ }
3259
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont input.dtsb-value {
3260
+ width: 33%;
3261
+ }
3262
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont select,
3263
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont input {
3264
+ height: 100%;
3265
+ box-sizing: border-box;
3266
+ }
3267
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer {
3268
+ margin-left: auto;
3269
+ display: inline-block;
3270
+ }
3271
+ div.dtsb-searchBuilder
3272
+ div.dtsb-group
3273
+ div.dtsb-criteria
3274
+ div.dtsb-buttonContainer
3275
+ button.dtsb-delete,
3276
+ div.dtsb-searchBuilder
3277
+ div.dtsb-group
3278
+ div.dtsb-criteria
3279
+ div.dtsb-buttonContainer
3280
+ button.dtsb-right,
3281
+ div.dtsb-searchBuilder
3282
+ div.dtsb-group
3283
+ div.dtsb-criteria
3284
+ div.dtsb-buttonContainer
3285
+ button.dtsb-left {
3286
+ margin-right: 0.8em;
3287
+ }
3288
+ div.dtsb-searchBuilder
3289
+ div.dtsb-group
3290
+ div.dtsb-criteria
3291
+ div.dtsb-buttonContainer
3292
+ button.dtsb-delete:last-child,
3293
+ div.dtsb-searchBuilder
3294
+ div.dtsb-group
3295
+ div.dtsb-criteria
3296
+ div.dtsb-buttonContainer
3297
+ button.dtsb-right:last-child,
3298
+ div.dtsb-searchBuilder
3299
+ div.dtsb-group
3300
+ div.dtsb-criteria
3301
+ div.dtsb-buttonContainer
3302
+ button.dtsb-left:last-child {
3303
+ margin-right: 0;
3304
+ }
3305
+ @media screen and (max-width: 550px) {
3306
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria {
3307
+ display: flex;
3308
+ flex-flow: none;
3309
+ flex-direction: column;
3310
+ justify-content: flex-start;
3311
+ padding-right: calc(35px + 0.8em);
3312
+ margin-bottom: 0px;
3313
+ }
3314
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:first-child),
3315
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:nth-child(2)),
3316
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:last-child) {
3317
+ padding-top: 0.8em;
3318
+ }
3319
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:first-child,
3320
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:nth-child(2),
3321
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:last-child {
3322
+ padding-top: 0em;
3323
+ }
3324
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,
3325
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {
3326
+ max-width: none;
3327
+ width: 100%;
3328
+ margin-bottom: 0.8em;
3329
+ margin-right: 0.8em;
3330
+ }
3331
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont {
3332
+ margin-right: 0.8em;
3333
+ }
3334
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer {
3335
+ position: absolute;
3336
+ width: 35px;
3337
+ display: flex;
3338
+ flex-wrap: wrap-reverse;
3339
+ right: 0;
3340
+ }
3341
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button {
3342
+ margin-right: 0px !important;
3343
+ }
3344
+ }
3345
+ div.dtsb-searchBuilder button,
3346
+ div.dtsb-searchBuilder select.dtsb-dropDown,
3347
+ div.dtsb-searchBuilder input {
3348
+ @apply bg-background;
3349
+ }
3350
+ div.dtsb-searchBuilder button.dtsb-button {
3351
+ @apply relative box-border inline-flex h-9 cursor-pointer select-none items-center justify-center overflow-hidden text-ellipsis whitespace-nowrap rounded-md border bg-background px-3 py-2 text-sm font-normal text-muted-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background;
3352
+ }
3353
+ div.dtsb-searchBuilder button.dtsb-button:hover {
3354
+ @apply cursor-pointer bg-muted;
3355
+ }
3356
+ div.dtsb-searchBuilder div.dtsb-logicContainer {
3357
+ @apply overflow-hidden rounded-none border;
3358
+ }
3359
+ div.dtsb-searchBuilder div.dtsb-logicContainer button {
3360
+ @apply rounded-md border-transparent bg-transparent;
3361
+ }
3362
+ div.dtsb-searchBuilder button.dtsb-clearGroup {
3363
+ min-width: 2em;
3364
+ padding: 0;
3365
+ }
3366
+ div.dtsb-searchBuilder button.dtsb-iptbtn {
3367
+ min-width: 100px;
3368
+ text-align: left;
3369
+ }
3370
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer {
3371
+ @apply flex flex-row content-start items-start justify-start rounded-md;
3372
+ }
3373
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-logic {
3374
+ @apply m-0 shrink-0 grow rounded-none border-0;
3375
+ flex-basis: 3em;
3376
+ }
3377
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-clearGroup {
3378
+ border: none;
3379
+ border-radius: 0px;
3380
+ width: 2em;
3381
+ margin: 0px;
3382
+ }
3383
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,
3384
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {
3385
+ @apply rounded-md border;
3386
+ }
3387
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-condition,
3388
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-data,
3389
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-value {
3390
+ @apply rounded-md border border-input bg-background text-sm transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background focus-visible:border-input;
3391
+ }
3392
+
3393
+ div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-value {
3394
+ @apply rounded-md border border-input bg-background text-sm transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background focus-visible:border-input;
3395
+ }
3396
+
3397
+ /* Col vis styles */
3398
+ .dt-button-background {
3399
+ @apply fixed inset-0 z-50 flex flex-col items-center justify-center bg-background/50 backdrop-blur-sm;
3400
+ }
3401
+ .dt-button-down-arrow {
3402
+ @apply text-[10px];
3403
+ }
3404
+ .dt-button-collection {
3405
+ @apply relative;
3406
+ [role="menu"] {
3407
+ @apply absolute -left-20 top-7 flex min-w-[200px] flex-col rounded-md border bg-background py-2 shadow before:mx-2 before:mb-2 before:text-xs before:text-muted-foreground/70 before:content-['Select_columns'];
3408
+ button {
3409
+ @apply h-8 rounded-none border-none px-4 text-xs;
3410
+ }
3411
+ .dt-button.buttons-columnVisibility.dt-button-active {
3412
+ @apply text-foreground after:ml-auto after:content-['\u2713'];
3413
+ }
3414
+ }
3415
+ }
3416
+ </style>
3417
3417
  `}],utils:[],composables:[]},{name:"Date Field",value:"date-field",devDeps:["@internationalized/date"],files:[{fileName:"DateField.vue",dirPath:"components/UI",fileContent:`<template>
3418
3418
  <DateFieldRoot
3419
3419
  v-slot="{ segments, modelValue, isInvalid }"
@@ -3914,155 +3914,155 @@ export default defineNuxtPlugin((nuxtApp) => {
3914
3914
 
3915
3915
  const { base, border, container, icon: iconClass, label: labelClass } = style();
3916
3916
  </script>
3917
- `}],utils:[],composables:[],plugins:[]},{name:"Drawer",value:"drawer",deps:["vaul-vue"],files:[{fileName:"Drawer/Close.vue",dirPath:"components/UI",fileContent:`<template>\r
3918
- <DrawerClose v-bind="props">\r
3919
- <slot />\r
3920
- </DrawerClose>\r
3921
- </template>\r
3922
- \r
3923
- <script lang="ts" setup>\r
3924
- import { DrawerClose } from "vaul-vue";\r
3925
- \r
3926
- interface Props\r
3927
- extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerClose>, "$props">> {}\r
3928
- const props = defineProps<Props>();\r
3929
- </script>\r
3930
- `},{fileName:"Drawer/Content.vue",dirPath:"components/UI",fileContent:`<template>\r
3931
- <UiDrawerPortal>\r
3932
- <slot name="overlay">\r
3933
- <UiDrawerOverlay />\r
3934
- </slot>\r
3935
- <slot name="content">\r
3936
- <DrawerContent v-bind="{ ...props, ...$attrs }" :class="styles({ class: props.class })">\r
3937
- <slot name="knob">\r
3938
- <div\r
3939
- className="mx-auto shrink-0 cursor-grab active:cursor-grabbing my-5 h-2 w-[60px] rounded-full bg-muted"\r
3940
- />\r
3941
- </slot>\r
3942
- <slot />\r
3943
- </DrawerContent>\r
3944
- </slot>\r
3945
- </UiDrawerPortal>\r
3946
- </template>\r
3947
- \r
3948
- <script lang="ts" setup>\r
3949
- import { DrawerContent } from "vaul-vue";\r
3950
- \r
3951
- defineOptions({ inheritAttrs: false });\r
3952
- \r
3953
- interface Props\r
3954
- extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerContent>, "$props">> {}\r
3955
- \r
3956
- const props = defineProps<Props & { class?: any }>();\r
3957
- const styles = tv({\r
3958
- base: "fixed bottom-0 left-0 right-0 z-50 mt-24 flex h-auto max-h-[95%] flex-col rounded-t-[10px] border bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/40",\r
3959
- });\r
3960
- </script>\r
3961
- `},{fileName:"Drawer/Description.vue",dirPath:"components/UI",fileContent:`<template>\r
3962
- <DrawerDescription v-bind="props" :class="styles({ class: props.class })">\r
3963
- <slot>\r
3964
- {{ props.text }}\r
3965
- </slot>\r
3966
- </DrawerDescription>\r
3967
- </template>\r
3968
- \r
3969
- <script lang="ts" setup>\r
3970
- import { DrawerDescription } from "vaul-vue";\r
3971
- \r
3972
- interface Props\r
3973
- extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerDescription>, "$props">> {\r
3974
- class?: any;\r
3975
- text?: string;\r
3976
- }\r
3977
- \r
3978
- const props = defineProps<Props>();\r
3979
- \r
3980
- const styles = tv({\r
3981
- base: "text-sm text-muted-foreground",\r
3982
- });\r
3983
- </script>\r
3984
- `},{fileName:"Drawer/Drawer.vue",dirPath:"components/UI",fileContent:`<template>\r
3985
- <DrawerRoot v-bind="forwarded">\r
3986
- <slot />\r
3987
- </DrawerRoot>\r
3988
- </template>\r
3989
- \r
3990
- <script lang="ts" setup>\r
3991
- import { useForwardPropsEmits } from "radix-vue";\r
3992
- import { DrawerRoot } from "vaul-vue";\r
3993
- import type { DrawerRootEmits, DrawerRootProps } from "vaul-vue";\r
3994
- \r
3995
- const props = defineProps<DrawerRootProps>();\r
3996
- const emits = defineEmits<DrawerRootEmits>();\r
3997
- const forwarded = useForwardPropsEmits(props, emits);\r
3998
- </script>\r
3999
- `},{fileName:"Drawer/Overlay.vue",dirPath:"components/UI",fileContent:`<template>\r
4000
- <DrawerOverlay v-bind="props" :class="styles({ class: props.class })" />\r
4001
- </template>\r
4002
- \r
4003
- <script lang="ts" setup>\r
4004
- import { DrawerOverlay } from "vaul-vue";\r
4005
- \r
4006
- interface Props\r
4007
- extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerOverlay>, "$props">> {}\r
4008
- \r
4009
- const props = defineProps<Props & { class?: any }>();\r
4010
- \r
4011
- const styles = tv({\r
4012
- base: "fixed inset-0 z-50 bg-black/40 backdrop-blur",\r
4013
- });\r
4014
- </script>\r
4015
- `},{fileName:"Drawer/Portal.vue",dirPath:"components/UI",fileContent:`<template>\r
4016
- <DrawerPortal v-bind="props">\r
4017
- <slot />\r
4018
- </DrawerPortal>\r
4019
- </template>\r
4020
- \r
4021
- <script lang="ts" setup>\r
4022
- import { DrawerPortal } from "vaul-vue";\r
4023
- \r
4024
- interface Props\r
4025
- extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerPortal>, "$props">> {}\r
4026
- \r
4027
- const props = defineProps<Props>();\r
4028
- </script>\r
4029
- `},{fileName:"Drawer/Title.vue",dirPath:"components/UI",fileContent:`<template>\r
4030
- <DrawerTitle v-bind="props" :class="styles({ class: props.class })">\r
4031
- <slot>\r
4032
- {{ props.text }}\r
4033
- </slot>\r
4034
- </DrawerTitle>\r
4035
- </template>\r
4036
- \r
4037
- <script lang="ts" setup>\r
4038
- import { DrawerTitle } from "vaul-vue";\r
4039
- \r
4040
- interface Props\r
4041
- extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerTitle>, "$props">> {\r
4042
- class?: any;\r
4043
- text?: string;\r
4044
- }\r
4045
- \r
4046
- const props = defineProps<Props>();\r
4047
- \r
4048
- const styles = tv({\r
4049
- base: "text-lg font-semibold leading-none tracking-tight",\r
4050
- });\r
4051
- </script>\r
4052
- `},{fileName:"Drawer/Trigger.vue",dirPath:"components/UI",fileContent:`<template>\r
4053
- <DrawerTrigger v-bind="props">\r
4054
- <slot />\r
4055
- </DrawerTrigger>\r
4056
- </template>\r
4057
- \r
4058
- <script lang="ts" setup>\r
4059
- import { DrawerTrigger } from "vaul-vue";\r
4060
- \r
4061
- interface Props\r
4062
- extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerTrigger>, "$props">> {}\r
4063
- \r
4064
- const props = defineProps<Props>();\r
4065
- </script>\r
3917
+ `}],utils:[],composables:[],plugins:[]},{name:"Drawer",value:"drawer",deps:["vaul-vue"],files:[{fileName:"Drawer/Close.vue",dirPath:"components/UI",fileContent:`<template>
3918
+ <DrawerClose v-bind="props">
3919
+ <slot />
3920
+ </DrawerClose>
3921
+ </template>
3922
+
3923
+ <script lang="ts" setup>
3924
+ import { DrawerClose } from "vaul-vue";
3925
+
3926
+ interface Props
3927
+ extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerClose>, "$props">> {}
3928
+ const props = defineProps<Props>();
3929
+ </script>
3930
+ `},{fileName:"Drawer/Content.vue",dirPath:"components/UI",fileContent:`<template>
3931
+ <UiDrawerPortal>
3932
+ <slot name="overlay">
3933
+ <UiDrawerOverlay />
3934
+ </slot>
3935
+ <slot name="content">
3936
+ <DrawerContent v-bind="{ ...props, ...$attrs }" :class="styles({ class: props.class })">
3937
+ <slot name="knob">
3938
+ <div
3939
+ className="mx-auto shrink-0 cursor-grab active:cursor-grabbing my-5 h-2 w-[60px] rounded-full bg-muted"
3940
+ />
3941
+ </slot>
3942
+ <slot />
3943
+ </DrawerContent>
3944
+ </slot>
3945
+ </UiDrawerPortal>
3946
+ </template>
3947
+
3948
+ <script lang="ts" setup>
3949
+ import { DrawerContent } from "vaul-vue";
3950
+
3951
+ defineOptions({ inheritAttrs: false });
3952
+
3953
+ interface Props
3954
+ extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerContent>, "$props">> {}
3955
+
3956
+ const props = defineProps<Props & { class?: any }>();
3957
+ const styles = tv({
3958
+ base: "fixed bottom-0 left-0 right-0 z-50 mt-24 flex h-auto max-h-[95%] flex-col rounded-t-[10px] border bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/40",
3959
+ });
3960
+ </script>
3961
+ `},{fileName:"Drawer/Description.vue",dirPath:"components/UI",fileContent:`<template>
3962
+ <DrawerDescription v-bind="props" :class="styles({ class: props.class })">
3963
+ <slot>
3964
+ {{ props.text }}
3965
+ </slot>
3966
+ </DrawerDescription>
3967
+ </template>
3968
+
3969
+ <script lang="ts" setup>
3970
+ import { DrawerDescription } from "vaul-vue";
3971
+
3972
+ interface Props
3973
+ extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerDescription>, "$props">> {
3974
+ class?: any;
3975
+ text?: string;
3976
+ }
3977
+
3978
+ const props = defineProps<Props>();
3979
+
3980
+ const styles = tv({
3981
+ base: "text-sm text-muted-foreground",
3982
+ });
3983
+ </script>
3984
+ `},{fileName:"Drawer/Drawer.vue",dirPath:"components/UI",fileContent:`<template>
3985
+ <DrawerRoot v-bind="forwarded">
3986
+ <slot />
3987
+ </DrawerRoot>
3988
+ </template>
3989
+
3990
+ <script lang="ts" setup>
3991
+ import { useForwardPropsEmits } from "radix-vue";
3992
+ import { DrawerRoot } from "vaul-vue";
3993
+ import type { DrawerRootEmits, DrawerRootProps } from "vaul-vue";
3994
+
3995
+ const props = defineProps<DrawerRootProps>();
3996
+ const emits = defineEmits<DrawerRootEmits>();
3997
+ const forwarded = useForwardPropsEmits(props, emits);
3998
+ </script>
3999
+ `},{fileName:"Drawer/Overlay.vue",dirPath:"components/UI",fileContent:`<template>
4000
+ <DrawerOverlay v-bind="props" :class="styles({ class: props.class })" />
4001
+ </template>
4002
+
4003
+ <script lang="ts" setup>
4004
+ import { DrawerOverlay } from "vaul-vue";
4005
+
4006
+ interface Props
4007
+ extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerOverlay>, "$props">> {}
4008
+
4009
+ const props = defineProps<Props & { class?: any }>();
4010
+
4011
+ const styles = tv({
4012
+ base: "fixed inset-0 z-50 bg-black/40 backdrop-blur",
4013
+ });
4014
+ </script>
4015
+ `},{fileName:"Drawer/Portal.vue",dirPath:"components/UI",fileContent:`<template>
4016
+ <DrawerPortal v-bind="props">
4017
+ <slot />
4018
+ </DrawerPortal>
4019
+ </template>
4020
+
4021
+ <script lang="ts" setup>
4022
+ import { DrawerPortal } from "vaul-vue";
4023
+
4024
+ interface Props
4025
+ extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerPortal>, "$props">> {}
4026
+
4027
+ const props = defineProps<Props>();
4028
+ </script>
4029
+ `},{fileName:"Drawer/Title.vue",dirPath:"components/UI",fileContent:`<template>
4030
+ <DrawerTitle v-bind="props" :class="styles({ class: props.class })">
4031
+ <slot>
4032
+ {{ props.text }}
4033
+ </slot>
4034
+ </DrawerTitle>
4035
+ </template>
4036
+
4037
+ <script lang="ts" setup>
4038
+ import { DrawerTitle } from "vaul-vue";
4039
+
4040
+ interface Props
4041
+ extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerTitle>, "$props">> {
4042
+ class?: any;
4043
+ text?: string;
4044
+ }
4045
+
4046
+ const props = defineProps<Props>();
4047
+
4048
+ const styles = tv({
4049
+ base: "text-lg font-semibold leading-none tracking-tight",
4050
+ });
4051
+ </script>
4052
+ `},{fileName:"Drawer/Trigger.vue",dirPath:"components/UI",fileContent:`<template>
4053
+ <DrawerTrigger v-bind="props">
4054
+ <slot />
4055
+ </DrawerTrigger>
4056
+ </template>
4057
+
4058
+ <script lang="ts" setup>
4059
+ import { DrawerTrigger } from "vaul-vue";
4060
+
4061
+ interface Props
4062
+ extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerTrigger>, "$props">> {}
4063
+
4064
+ const props = defineProps<Props>();
4065
+ </script>
4066
4066
  `}],utils:[],composables:[],plugins:[]},{name:"Dropdown Menu",value:"dropdown-menu",files:[{fileName:"DropdownMenu/Arrow.vue",dirPath:"components/UI",fileContent:`<template>
4067
4067
  <DropdownMenuArrow
4068
4068
  v-bind="reactiveOmit(props, 'class')"
@@ -4512,104 +4512,104 @@ export default defineNuxtPlugin((nuxtApp) => {
4512
4512
 
4513
4513
  const props = defineProps<DropdownMenuTriggerProps>();
4514
4514
  </script>
4515
- `}],utils:[],composables:[],plugins:[]},{name:"Dropfile",value:"dropfile",files:[{fileName:"Dropfile.vue",dirPath:"components/UI",fileContent:`<template>\r
4516
- <div @click="open()" ref="dropZoneRef" :class="styles({ isOverDropZone, class: props.class })">\r
4517
- <slot name="message">\r
4518
- <div class="py-10 text-center">\r
4519
- <slot name="icon">\r
4520
- <div\r
4521
- v-if="icon"\r
4522
- class="inline-flex items-center justify-center rounded-md border p-2 transition"\r
4523
- :class="[isOverDropZone && 'animate-bounce border-primary']"\r
4524
- >\r
4525
- <Icon\r
4526
- :name="icon"\r
4527
- class="h-7 w-7 opacity-70"\r
4528
- :class="[isOverDropZone && 'text-primary']"\r
4529
- />\r
4530
- </div>\r
4531
- </slot>\r
4532
- <slot name="title">\r
4533
- <p class="mt-5 text-sm font-medium" v-html="title"></p>\r
4534
- </slot>\r
4535
- <slot name="subtext">\r
4536
- <p class="mt-1 text-sm text-muted-foreground/60" v-html="subtext"></p>\r
4537
- </slot>\r
4538
- </div>\r
4539
- </slot>\r
4540
- </div>\r
4541
- </template>\r
4542
- \r
4543
- <script setup lang="ts">\r
4544
- const props = withDefaults(\r
4545
- defineProps<{\r
4546
- /**\r
4547
- * The text to display as the title of the dropzone.\r
4548
- */\r
4549
- title?: string;\r
4550
- /**\r
4551
- * The text to display as the subtext of the dropzone.\r
4552
- */\r
4553
- subtext?: string;\r
4554
- /**\r
4555
- * The icon to display in the dropzone.\r
4556
- */\r
4557
- icon?: string;\r
4558
- /**\r
4559
- * The function to call when files are dropped.\r
4560
- */\r
4561
- onDrop?: Function;\r
4562
- /**\r
4563
- * Whether or not to allow multiple files to be picked. Does not affect drag and drop.\r
4564
- */\r
4565
- multiple?: boolean;\r
4566
- /**\r
4567
- * The file types to accept. Does not affect drag and drop.\r
4568
- */\r
4569
- accept?: string;\r
4570
- class?: any;\r
4571
- }>(),\r
4572
- {\r
4573
- title: "Click to upload or drag & drop files.",\r
4574
- subtext: "All file types accepted",\r
4575
- icon: "heroicons:cloud-arrow-up",\r
4576
- multiple: true,\r
4577
- accept: "*",\r
4578
- }\r
4579
- );\r
4580
- \r
4581
- const { open, reset, onChange } = useFileDialog({\r
4582
- multiple: props.multiple,\r
4583
- accept: props.accept,\r
4584
- });\r
4585
- \r
4586
- onChange((files: FileList | null) => {\r
4587
- if (files?.length) {\r
4588
- handleDrop(Array.from(files || []))\r
4589
- reset()\r
4590
- }\r
4591
- })\r
4592
- \r
4593
- const dropZoneRef = ref<HTMLDivElement>();\r
4594
- const emits = defineEmits<{\r
4595
- dropped: [any];\r
4596
- }>();\r
4597
- \r
4598
- const handleDrop = (files: File[] | null) => {\r
4599
- if (!files) return;\r
4600
- if (props.onDrop) props.onDrop(files);\r
4601
- emits("dropped", files);\r
4602
- };\r
4603
- \r
4604
- const { isOverDropZone } = useDropZone(dropZoneRef, handleDrop);\r
4605
- \r
4606
- const styles = tv({\r
4607
- base: "flex w-full cursor-pointer items-center justify-center rounded-md border border-dashed transition hover:border-primary",\r
4608
- variants: {\r
4609
- isOverDropZone: { true: "border-primary bg-primary/10" },\r
4610
- },\r
4611
- });\r
4612
- </script>\r
4515
+ `}],utils:[],composables:[],plugins:[]},{name:"Dropfile",value:"dropfile",files:[{fileName:"Dropfile.vue",dirPath:"components/UI",fileContent:`<template>
4516
+ <div @click="open()" ref="dropZoneRef" :class="styles({ isOverDropZone, class: props.class })">
4517
+ <slot name="message">
4518
+ <div class="py-10 text-center">
4519
+ <slot name="icon">
4520
+ <div
4521
+ v-if="icon"
4522
+ class="inline-flex items-center justify-center rounded-md border p-2 transition"
4523
+ :class="[isOverDropZone && 'animate-bounce border-primary']"
4524
+ >
4525
+ <Icon
4526
+ :name="icon"
4527
+ class="h-7 w-7 opacity-70"
4528
+ :class="[isOverDropZone && 'text-primary']"
4529
+ />
4530
+ </div>
4531
+ </slot>
4532
+ <slot name="title">
4533
+ <p class="mt-5 text-sm font-medium" v-html="title"></p>
4534
+ </slot>
4535
+ <slot name="subtext">
4536
+ <p class="mt-1 text-sm text-muted-foreground/60" v-html="subtext"></p>
4537
+ </slot>
4538
+ </div>
4539
+ </slot>
4540
+ </div>
4541
+ </template>
4542
+
4543
+ <script setup lang="ts">
4544
+ const props = withDefaults(
4545
+ defineProps<{
4546
+ /**
4547
+ * The text to display as the title of the dropzone.
4548
+ */
4549
+ title?: string;
4550
+ /**
4551
+ * The text to display as the subtext of the dropzone.
4552
+ */
4553
+ subtext?: string;
4554
+ /**
4555
+ * The icon to display in the dropzone.
4556
+ */
4557
+ icon?: string;
4558
+ /**
4559
+ * The function to call when files are dropped.
4560
+ */
4561
+ onDrop?: Function;
4562
+ /**
4563
+ * Whether or not to allow multiple files to be picked. Does not affect drag and drop.
4564
+ */
4565
+ multiple?: boolean;
4566
+ /**
4567
+ * The file types to accept. Does not affect drag and drop.
4568
+ */
4569
+ accept?: string;
4570
+ class?: any;
4571
+ }>(),
4572
+ {
4573
+ title: "Click to upload or drag & drop files.",
4574
+ subtext: "All file types accepted",
4575
+ icon: "heroicons:cloud-arrow-up",
4576
+ multiple: true,
4577
+ accept: "*",
4578
+ }
4579
+ );
4580
+
4581
+ const { open, reset, onChange } = useFileDialog({
4582
+ multiple: props.multiple,
4583
+ accept: props.accept,
4584
+ });
4585
+
4586
+ onChange((files: FileList | null) => {
4587
+ if (files?.length) {
4588
+ handleDrop(Array.from(files || []))
4589
+ reset()
4590
+ }
4591
+ })
4592
+
4593
+ const dropZoneRef = ref<HTMLDivElement>();
4594
+ const emits = defineEmits<{
4595
+ dropped: [any];
4596
+ }>();
4597
+
4598
+ const handleDrop = (files: File[] | null) => {
4599
+ if (!files) return;
4600
+ if (props.onDrop) props.onDrop(files);
4601
+ emits("dropped", files);
4602
+ };
4603
+
4604
+ const { isOverDropZone } = useDropZone(dropZoneRef, handleDrop);
4605
+
4606
+ const styles = tv({
4607
+ base: "flex w-full cursor-pointer items-center justify-center rounded-md border border-dashed transition hover:border-primary",
4608
+ variants: {
4609
+ isOverDropZone: { true: "border-primary bg-primary/10" },
4610
+ },
4611
+ });
4612
+ </script>
4613
4613
  `}],utils:[],composables:[],plugins:[]},{name:"Form",value:"form",deps:["@vee-validate/nuxt"],nuxtModules:["@vee-validate/nuxt"],composables:[{fileName:"useFormField.ts",dirPath:"composables",fileContent:`import { FORM_ITEM_INJECTION_KEY } from "@/components/Ui/Form/Item.vue";
4614
4614
  import {
4615
4615
  FieldContextKey,
@@ -5781,7 +5781,9 @@ export function useFormField() {
5781
5781
  `},{fileName:"NavigationMenu/NavigationMenu.vue",dirPath:"components/UI",fileContent:`<template>
5782
5782
  <NavigationMenuRoot :class="styles({ class: props.class })" v-bind="forwarded">
5783
5783
  <slot></slot>
5784
- <UiNavigationMenuViewport />
5784
+ <slot name="viewport">
5785
+ <UiNavigationMenuViewport />
5786
+ </slot>
5785
5787
  </NavigationMenuRoot>
5786
5788
  </template>
5787
5789
 
@@ -5822,11 +5824,13 @@ export function useFormField() {
5822
5824
  :class="styles({ class: props.class })"
5823
5825
  >
5824
5826
  <slot>{{ title }}</slot>
5825
- <Icon
5826
- :name="icon || 'lucide:chevron-down'"
5827
- class="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
5828
- aria-hidden="true"
5829
- />
5827
+ <slot name="icon">
5828
+ <Icon
5829
+ :name="icon || 'lucide:chevron-down'"
5830
+ class="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
5831
+ aria-hidden="true"
5832
+ />
5833
+ </slot>
5830
5834
  </NavigationMenuTrigger>
5831
5835
  </template>
5832
5836