ui-thing 0.1.2 → 0.1.4
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.
- package/CHANGELOG.md +28 -0
- package/dist/index.js +1162 -1151
- package/dist/index.js.map +1 -1
- package/package.json +5 -5
- package/src/comps.ts +33 -13
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ui-thing",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.4",
|
|
4
4
|
"description": "CLI used to add Nuxt 3 components to a project",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"axios": "^1.6.7",
|
|
45
45
|
"boxen": "^7.1.1",
|
|
46
46
|
"build": "^0.1.4",
|
|
47
|
-
"c12": "^1.
|
|
47
|
+
"c12": "^1.10.0",
|
|
48
48
|
"commander": "^12.0.0",
|
|
49
49
|
"defu": "^6.1.4",
|
|
50
50
|
"execa": "^8.0.1",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"fs-extra": "^11.2.0",
|
|
53
53
|
"kleur": "^4.1.5",
|
|
54
54
|
"lodash": "^4.17.21",
|
|
55
|
-
"nypm": "^0.3.
|
|
55
|
+
"nypm": "^0.3.8",
|
|
56
56
|
"ora": "^8.0.1",
|
|
57
57
|
"prompts": "^2.4.2"
|
|
58
58
|
},
|
|
@@ -62,12 +62,12 @@
|
|
|
62
62
|
"@types/figlet": "^1.5.8",
|
|
63
63
|
"@types/fs-extra": "^11.0.4",
|
|
64
64
|
"@types/lodash": "^4.14.202",
|
|
65
|
-
"@types/node": "^20.11.
|
|
65
|
+
"@types/node": "^20.11.25",
|
|
66
66
|
"@types/prompts": "^2.4.9",
|
|
67
67
|
"@vitest/coverage-v8": "^1.3.1",
|
|
68
68
|
"magicast": "^0.3.3",
|
|
69
69
|
"tsup": "^8.0.2",
|
|
70
|
-
"typescript": "^5.
|
|
70
|
+
"typescript": "^5.4.2",
|
|
71
71
|
"vitest": "^1.3.1"
|
|
72
72
|
}
|
|
73
73
|
}
|
package/src/comps.ts
CHANGED
|
@@ -664,7 +664,7 @@ export default [
|
|
|
664
664
|
"datatables.net-responsive-dt@^2.5.1",
|
|
665
665
|
"datatables.net-searchbuilder-dt@^1.7.0",
|
|
666
666
|
"datatables.net-select-dt@^1.7.1",
|
|
667
|
-
"datatables.net-vue3
|
|
667
|
+
"datatables.net-vue3",
|
|
668
668
|
"jszip",
|
|
669
669
|
],
|
|
670
670
|
overrides: {
|
|
@@ -684,12 +684,28 @@ export default [
|
|
|
684
684
|
fileName: "Datatable.client.vue",
|
|
685
685
|
dirPath: "components/UI",
|
|
686
686
|
fileContent:
|
|
687
|
-
"<template>\n <DataTable ref=\"table\" :data=\"data\" :class=\"props.class\" :options=\"options\">\n <slot></slot>\n </DataTable>\n</template>\n\n<script lang=\"ts\" setup generic=\"T\">\n import type DataTableRef from \"datatables.net\";\n import type { Config } from \"datatables.net/types/types\";\n\n const table = shallowRef<{ dt: InstanceType<typeof DataTableRef<T[]>> } | null>(null);\n\n const props = withDefaults(\n defineProps<{\n data?: Config[\"data\"];\n class?: any;\n options?: Config;\n }>(),\n {\n data: () => [],\n class: \"nowrap hover order-column row-border stripe display\",\n options: () => ({}),\n }\n );\n\n const emits = defineEmits<{\n ready: [any];\n }>();\n\n onMounted(() => {\n nextTick(() => {\n emits(\"ready\", table.value?.dt);\n });\n });\n</script>\n\n<style>\n :root {\n --dt-row-selected: 262.1, 83.3%, 57.8%;\n --dt-row-selected-text: 210, 20%, 98%;\n --dt-row-selected-link: 262.1, 83.3%, 57.8%;\n --dt-row-stripe: 0, 0%, 100%;\n --dt-row-hover: 0, 0%, 100%;\n --dt-column-ordering: 0, 0%, 100%;\n --dt-border: 220, 13%, 91%;\n --dt-foreground: 224, 71.4%, 4.1%;\n }\n\n .dark {\n --dt-row-selected: 263.4, 70%, 50.4%;\n --dt-row-selected-text: 210, 20%, 98%;\n --dt-row-selected-link: 263.4, 70%, 50.4%;\n --dt-row-stripe: 224, 71.4%, 4.1%;\n --dt-row-hover: 224, 71.4%, 4.1%;\n --dt-column-ordering: 224, 71.4%, 4.1%;\n --dt-border: 215, 27.9%, 16.9%;\n --dt-foreground: 224, 71.4%, 4.1%;\n }\n\n table.dataTable td.dt-control {\n text-align: center;\n cursor: pointer;\n }\n table.dataTable td.dt-control:before {\n display: inline-block;\n color: hsla(var(--dt-foreground), 0.5);\n content: \"►\";\n }\n table.dataTable tr.dt-hasChild td.dt-control:before {\n content: \"▼\";\n }\n\n table.dataTable thead > tr > th.sorting,\n table.dataTable thead > tr > th.sorting_asc,\n table.dataTable thead > tr > th.sorting_desc,\n table.dataTable thead > tr > th.sorting_asc_disabled,\n table.dataTable thead > tr > th.sorting_desc_disabled,\n table.dataTable thead > tr > td.sorting,\n table.dataTable thead > tr > td.sorting_asc,\n table.dataTable thead > tr > td.sorting_desc,\n table.dataTable thead > tr > td.sorting_asc_disabled,\n table.dataTable thead > tr > td.sorting_desc_disabled {\n @apply relative cursor-pointer pr-7;\n }\n table.dataTable thead > tr > th.sorting:before,\n table.dataTable thead > tr > th.sorting:after,\n table.dataTable thead > tr > th.sorting_asc:before,\n table.dataTable thead > tr > th.sorting_asc:after,\n table.dataTable thead > tr > th.sorting_desc:before,\n table.dataTable thead > tr > th.sorting_desc:after,\n table.dataTable thead > tr > th.sorting_asc_disabled:before,\n table.dataTable thead > tr > th.sorting_asc_disabled:after,\n table.dataTable thead > tr > th.sorting_desc_disabled:before,\n table.dataTable thead > tr > th.sorting_desc_disabled:after,\n table.dataTable thead > tr > td.sorting:before,\n table.dataTable thead > tr > td.sorting:after,\n table.dataTable thead > tr > td.sorting_asc:before,\n table.dataTable thead > tr > td.sorting_asc:after,\n table.dataTable thead > tr > td.sorting_desc:before,\n table.dataTable thead > tr > td.sorting_desc:after,\n table.dataTable thead > tr > td.sorting_asc_disabled:before,\n table.dataTable thead > tr > td.sorting_asc_disabled:after,\n table.dataTable thead > tr > td.sorting_desc_disabled:before,\n table.dataTable thead > tr > td.sorting_desc_disabled:after {\n @apply absolute right-2.5 block text-xs leading-3 opacity-25;\n }\n table.dataTable thead > tr > th.sorting:before,\n table.dataTable thead > tr > th.sorting_asc:before,\n table.dataTable thead > tr > th.sorting_desc:before,\n table.dataTable thead > tr > th.sorting_asc_disabled:before,\n table.dataTable thead > tr > th.sorting_desc_disabled:before,\n table.dataTable thead > tr > td.sorting:before,\n table.dataTable thead > tr > td.sorting_asc:before,\n table.dataTable thead > tr > td.sorting_desc:before,\n table.dataTable thead > tr > td.sorting_asc_disabled:before,\n table.dataTable thead > tr > td.sorting_desc_disabled:before {\n @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')];\n }\n table.dataTable thead > tr > th.sorting:after,\n table.dataTable thead > tr > th.sorting_asc:after,\n table.dataTable thead > tr > th.sorting_desc:after,\n table.dataTable thead > tr > th.sorting_asc_disabled:after,\n table.dataTable thead > tr > th.sorting_desc_disabled:after,\n table.dataTable thead > tr > td.sorting:after,\n table.dataTable thead > tr > td.sorting_asc:after,\n table.dataTable thead > tr > td.sorting_desc:after,\n table.dataTable thead > tr > td.sorting_asc_disabled:after,\n table.dataTable thead > tr > td.sorting_desc_disabled:after {\n @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')];\n }\n table.dataTable thead > tr > th.sorting_asc:before,\n table.dataTable thead > tr > th.sorting_desc:after,\n table.dataTable thead > tr > td.sorting_asc:before,\n table.dataTable thead > tr > td.sorting_desc:after {\n @apply opacity-80;\n }\n table.dataTable thead > tr > th.sorting_desc_disabled:after,\n table.dataTable thead > tr > th.sorting_asc_disabled:before,\n table.dataTable thead > tr > td.sorting_desc_disabled:after,\n table.dataTable thead > tr > td.sorting_asc_disabled:before {\n @apply hidden;\n }\n table.dataTable thead > tr > th:active,\n table.dataTable thead > tr > td:active {\n @apply outline-none;\n }\n\n div.dataTables_scrollBody > table.dataTable > thead > tr > th:before,\n div.dataTables_scrollBody > table.dataTable > thead > tr > th:after,\n div.dataTables_scrollBody > table.dataTable > thead > tr > td:before,\n div.dataTables_scrollBody > table.dataTable > thead > tr > td:after {\n @apply hidden;\n }\n\n div.dataTables_processing {\n @apply absolute left-[50%] top-[50%] ml-[-100px] mt-[-26px] w-[200px] p-0.5 text-center;\n }\n div.dataTables_processing > div:last-child {\n @apply relative mx-auto my-4 h-4 w-20;\n }\n div.dataTables_processing > div:last-child > div {\n @apply absolute top-0 h-3.5 w-3.5 rounded-full;\n background: hsl(var(--dt-row-selected));\n animation-timing-function: cubic-bezier(0, 1, 1, 0);\n }\n div.dataTables_processing > div:last-child > div:nth-child(1) {\n left: 8px;\n animation: datatables-loader-1 0.6s infinite;\n }\n div.dataTables_processing > div:last-child > div:nth-child(2) {\n left: 8px;\n animation: datatables-loader-2 0.6s infinite;\n }\n div.dataTables_processing > div:last-child > div:nth-child(3) {\n left: 32px;\n animation: datatables-loader-2 0.6s infinite;\n }\n div.dataTables_processing > div:last-child > div:nth-child(4) {\n left: 56px;\n animation: datatables-loader-3 0.6s infinite;\n }\n\n @keyframes datatables-loader-1 {\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n }\n @keyframes datatables-loader-3 {\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n }\n @keyframes datatables-loader-2 {\n 0% {\n transform: translate(0, 0);\n }\n 100% {\n transform: translate(24px, 0);\n }\n }\n table.dataTable.nowrap th,\n table.dataTable.nowrap td {\n white-space: nowrap;\n }\n table.dataTable th.dt-left,\n table.dataTable td.dt-left {\n text-align: left;\n }\n table.dataTable th.dt-center,\n table.dataTable td.dt-center,\n table.dataTable td.dataTables_empty {\n text-align: center;\n }\n table.dataTable th.dt-right,\n table.dataTable td.dt-right {\n text-align: right;\n }\n table.dataTable th.dt-justify,\n table.dataTable td.dt-justify {\n text-align: justify;\n }\n table.dataTable th.dt-nowrap,\n table.dataTable td.dt-nowrap {\n white-space: nowrap;\n }\n table.dataTable thead th,\n table.dataTable thead td,\n table.dataTable tfoot th,\n table.dataTable tfoot td {\n text-align: left;\n }\n table.dataTable thead th.dt-head-left,\n table.dataTable thead td.dt-head-left,\n table.dataTable tfoot th.dt-head-left,\n table.dataTable tfoot td.dt-head-left {\n text-align: left;\n }\n table.dataTable thead th.dt-head-center,\n table.dataTable thead td.dt-head-center,\n table.dataTable tfoot th.dt-head-center,\n table.dataTable tfoot td.dt-head-center {\n text-align: center;\n }\n table.dataTable thead th.dt-head-right,\n table.dataTable thead td.dt-head-right,\n table.dataTable tfoot th.dt-head-right,\n table.dataTable tfoot td.dt-head-right {\n text-align: right;\n }\n table.dataTable thead th.dt-head-justify,\n table.dataTable thead td.dt-head-justify,\n table.dataTable tfoot th.dt-head-justify,\n table.dataTable tfoot td.dt-head-justify {\n text-align: justify;\n }\n table.dataTable thead th.dt-head-nowrap,\n table.dataTable thead td.dt-head-nowrap,\n table.dataTable tfoot th.dt-head-nowrap,\n table.dataTable tfoot td.dt-head-nowrap {\n white-space: nowrap;\n }\n table.dataTable tbody th.dt-body-left,\n table.dataTable tbody td.dt-body-left {\n text-align: left;\n }\n table.dataTable tbody th.dt-body-center,\n table.dataTable tbody td.dt-body-center {\n text-align: center;\n }\n table.dataTable tbody th.dt-body-right,\n table.dataTable tbody td.dt-body-right {\n text-align: right;\n }\n table.dataTable tbody th.dt-body-justify,\n table.dataTable tbody td.dt-body-justify {\n text-align: justify;\n }\n table.dataTable tbody th.dt-body-nowrap,\n table.dataTable tbody td.dt-body-nowrap {\n white-space: nowrap;\n }\n\n /* Table Styles */\n\n table.dataTable {\n @apply w-full table-auto border-collapse;\n }\n\n /* Table header styles */\n table.dataTable thead th,\n table.dataTable tfoot th {\n @apply text-left text-sm font-medium text-muted-foreground;\n }\n\n table.dataTable > thead > tr > th {\n @apply border-b border-t-0 px-6 py-3;\n }\n table.dataTable > thead > tr > td {\n @apply border-b px-6 py-3 text-sm;\n }\n table.dataTable > thead > tr > th:active,\n table.dataTable > thead > tr > td:active {\n @apply outline-none;\n }\n table.dataTable > tfoot > tr > th,\n table.dataTable > tfoot > tr > td {\n @apply border-t px-6 py-3;\n }\n table.dataTable tbody tr {\n @apply bg-transparent;\n }\n table.dataTable tbody tr.selected > * {\n @apply bg-primary/10;\n }\n table.dataTable tbody tr.selected a {\n @apply text-primary;\n }\n table.dataTable tbody th,\n table.dataTable tbody td {\n @apply px-6 py-3 text-sm;\n }\n table.dataTable.row-border > tbody > tr > th,\n table.dataTable.row-border > tbody > tr > td,\n table.dataTable.display > tbody > tr > th,\n table.dataTable.display > tbody > tr > td {\n @apply border-t;\n }\n table.dataTable.row-border > tbody > tr:first-child > th,\n table.dataTable.row-border > tbody > tr:first-child > td,\n table.dataTable.display > tbody > tr:first-child > th,\n table.dataTable.display > tbody > tr:first-child > td {\n @apply border-t-0;\n }\n table.dataTable.row-border > tbody > tr.selected + tr.selected > td,\n table.dataTable.display > tbody > tr.selected + tr.selected > td {\n @apply border-t-primary/30;\n }\n table.dataTable.cell-border > tbody > tr > th,\n table.dataTable.cell-border > tbody > tr > td {\n @apply border-r border-t;\n }\n table.dataTable.cell-border > tbody > tr > th:first-child,\n table.dataTable.cell-border > tbody > tr > td:first-child {\n @apply border-l;\n }\n table.dataTable.cell-border > tbody > tr:first-child > th,\n table.dataTable.cell-border > tbody > tr:first-child > td {\n @apply border-t-0;\n }\n table.dataTable.stripe > tbody > tr.odd > *,\n table.dataTable.display > tbody > tr.odd > * {\n @apply bg-muted/50;\n }\n table.dataTable.stripe > tbody > tr.odd.selected > *,\n table.dataTable.display > tbody > tr.odd.selected > * {\n @apply bg-primary/10;\n }\n table.dataTable.hover > tbody > tr:hover > *,\n table.dataTable.display > tbody > tr:hover > * {\n @apply bg-muted;\n }\n table.dataTable.hover > tbody > tr.selected:hover > *,\n table.dataTable.display > tbody > tr.selected:hover > * {\n @apply !bg-primary/10;\n }\n table.dataTable.order-column > tbody tr > .sorting_1,\n table.dataTable.order-column > tbody tr > .sorting_2,\n table.dataTable.order-column > tbody tr > .sorting_3,\n table.dataTable.display > tbody tr > .sorting_1,\n table.dataTable.display > tbody tr > .sorting_2,\n table.dataTable.display > tbody tr > .sorting_3 {\n @apply bg-muted;\n }\n table.dataTable.order-column > tbody tr.selected > .sorting_1,\n table.dataTable.order-column > tbody tr.selected > .sorting_2,\n table.dataTable.order-column > tbody tr.selected > .sorting_3,\n table.dataTable.display > tbody tr.selected > .sorting_1,\n table.dataTable.display > tbody tr.selected > .sorting_2,\n table.dataTable.display > tbody tr.selected > .sorting_3 {\n @apply !bg-primary/10;\n }\n table.dataTable.display > tbody > tr.odd > .sorting_1,\n table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_1 {\n @apply bg-muted/50;\n }\n table.dataTable.display > tbody > tr.odd > .sorting_2,\n table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_2 {\n @apply bg-muted/30;\n }\n table.dataTable.display > tbody > tr.odd > .sorting_3,\n table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_3 {\n @apply bg-muted/10;\n }\n table.dataTable.display > tbody > tr.odd.selected > .sorting_1,\n table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_1 {\n @apply bg-muted/50;\n }\n table.dataTable.display > tbody > tr.odd.selected > .sorting_2,\n table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_2 {\n @apply bg-muted/30;\n }\n table.dataTable.display > tbody > tr.odd.selected > .sorting_3,\n table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_3 {\n @apply bg-muted/10;\n }\n table.dataTable.display > tbody > tr.even > .sorting_1,\n table.dataTable.order-column.stripe > tbody > tr.even > .sorting_1 {\n @apply bg-muted/50;\n }\n table.dataTable.display > tbody > tr.even > .sorting_2,\n table.dataTable.order-column.stripe > tbody > tr.even > .sorting_2 {\n @apply bg-muted/30;\n }\n table.dataTable.display > tbody > tr.even > .sorting_3,\n table.dataTable.order-column.stripe > tbody > tr.even > .sorting_3 {\n @apply bg-muted/10;\n }\n table.dataTable.display > tbody > tr.even.selected > .sorting_1,\n table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_1 {\n @apply bg-primary/10;\n }\n table.dataTable.display > tbody > tr.even.selected > .sorting_2,\n table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_2 {\n @apply bg-primary/10;\n }\n table.dataTable.display > tbody > tr.even.selected > .sorting_3,\n table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_3 {\n @apply bg-primary/10;\n }\n table.dataTable.display tbody tr:hover > .sorting_1,\n table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {\n @apply bg-muted;\n }\n table.dataTable.display tbody tr:hover > .sorting_2,\n table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {\n @apply bg-muted;\n }\n table.dataTable.display tbody tr:hover > .sorting_3,\n table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {\n @apply bg-muted;\n }\n table.dataTable.display tbody tr:hover.selected > .sorting_1,\n table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {\n @apply bg-primary/10;\n }\n table.dataTable.display tbody tr:hover.selected > .sorting_2,\n table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {\n @apply bg-primary/10;\n }\n table.dataTable.display tbody tr:hover.selected > .sorting_3,\n table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {\n @apply bg-primary/10;\n }\n table.dataTable.no-footer {\n @apply border-b-0;\n }\n table.dataTable.compact thead th,\n table.dataTable.compact thead td,\n table.dataTable.compact tfoot th,\n table.dataTable.compact tfoot td,\n table.dataTable.compact tbody th,\n table.dataTable.compact tbody td {\n @apply px-4 py-2;\n }\n\n table.dataTable th,\n table.dataTable td {\n @apply box-content border-y;\n }\n\n table.dataTable tr:last-child td {\n @apply !border-b-0;\n }\n\n /* Control feature layout */\n .dataTables_wrapper {\n @apply w-full overflow-x-auto;\n }\n\n /* Export button styles */\n .dataTables_wrapper .dt-buttons {\n @apply inline-flex flex-wrap items-center gap-2;\n button {\n @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;\n }\n }\n\n /* Copy modal */\n .dt-button-info {\n @apply fixed inset-0 z-50 flex flex-col items-center justify-center bg-background/50 backdrop-blur;\n }\n\n .dataTables_wrapper .dataTables_length {\n label {\n @apply inline-flex items-center gap-2 text-sm font-normal text-muted-foreground;\n select {\n @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;\n }\n }\n }\n .dataTables_wrapper .dataTables_filter {\n label {\n @apply inline-flex w-full cursor-pointer items-center gap-2 text-sm font-normal text-muted-foreground;\n input {\n @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;\n }\n }\n }\n .dataTables_wrapper .dataTables_info {\n @apply flex items-center gap-3 text-sm !text-muted-foreground;\n }\n .dataTables_wrapper .dataTables_paginate {\n .paginate_button {\n @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;\n }\n }\n .dataTables_wrapper .dataTables_paginate .paginate_button.current,\n .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {\n @apply bg-muted;\n }\n .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,\n .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,\n .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {\n @apply pointer-events-none opacity-50;\n }\n .dataTables_wrapper .dataTables_paginate .paginate_button:hover {\n @apply bg-muted;\n }\n .dataTables_wrapper .dataTables_paginate .paginate_button:active {\n @apply bg-muted;\n }\n .dataTables_wrapper .dataTables_paginate .ellipsis {\n @apply inline-flex h-8 min-w-[32px] items-start justify-center text-sm;\n }\n .dataTables_wrapper .dataTables_scroll {\n clear: both;\n }\n .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {\n -webkit-overflow-scrolling: touch;\n }\n .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th,\n .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td,\n .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th,\n .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {\n vertical-align: middle;\n }\n .dataTables_wrapper\n .dataTables_scroll\n div.dataTables_scrollBody\n > table\n > thead\n > tr\n > th\n > div.dataTables_sizing,\n .dataTables_wrapper\n .dataTables_scroll\n div.dataTables_scrollBody\n > table\n > thead\n > tr\n > td\n > div.dataTables_sizing,\n .dataTables_wrapper\n .dataTables_scroll\n div.dataTables_scrollBody\n > table\n > tbody\n > tr\n > th\n > div.dataTables_sizing,\n .dataTables_wrapper\n .dataTables_scroll\n div.dataTables_scrollBody\n > table\n > tbody\n > tr\n > td\n > div.dataTables_sizing {\n height: 0;\n overflow: hidden;\n margin: 0 !important;\n padding: 0 !important;\n }\n .dataTables_wrapper.no-footer .dataTables_scrollBody {\n @apply border-b;\n }\n .dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable,\n .dataTables_wrapper.no-footer div.dataTables_scrollBody > table {\n border-bottom: none;\n }\n .dataTables_wrapper:after {\n visibility: hidden;\n display: block;\n content: \"\";\n clear: both;\n height: 0;\n }\n\n /* \n responsive styles\n */\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,\n table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {\n cursor: default !important;\n }\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,\n table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before,\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before {\n display: none !important;\n }\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,\n table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {\n cursor: pointer;\n }\n\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,\n table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {\n @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')];\n }\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control.arrow-right::before,\n table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control.arrow-right::before {\n content: \"◄\";\n }\n table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,\n table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {\n @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')];\n }\n table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control,\n table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control {\n padding-left: 0.333em;\n }\n table.dataTable.dtr-column > tbody > tr > td.dtr-control,\n table.dataTable.dtr-column > tbody > tr > th.dtr-control,\n table.dataTable.dtr-column > tbody > tr > td.control,\n table.dataTable.dtr-column > tbody > tr > th.control {\n cursor: pointer;\n }\n table.dataTable.dtr-column > tbody > tr > td.dtr-control:before,\n table.dataTable.dtr-column > tbody > tr > th.dtr-control:before,\n table.dataTable.dtr-column > tbody > tr > td.control:before,\n table.dataTable.dtr-column > tbody > tr > th.control:before {\n @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')];\n }\n table.dataTable.dtr-column > tbody > tr > td.dtr-control.arrow-right::before,\n table.dataTable.dtr-column > tbody > tr > th.dtr-control.arrow-right::before,\n table.dataTable.dtr-column > tbody > tr > td.control.arrow-right::before,\n table.dataTable.dtr-column > tbody > tr > th.control.arrow-right::before {\n content: \"◄\";\n }\n table.dataTable.dtr-column > tbody > tr.parent td.dtr-control:before,\n table.dataTable.dtr-column > tbody > tr.parent th.dtr-control:before,\n table.dataTable.dtr-column > tbody > tr.parent td.control:before,\n table.dataTable.dtr-column > tbody > tr.parent th.control:before {\n @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')];\n }\n\n table.dataTable > tbody td.child {\n @apply p-0;\n }\n table.dataTable > tbody > tr.child:hover,\n table.dataTable > tbody > tr.child:hover > td.child {\n background: transparent !important;\n }\n table.dataTable > tbody > tr.child ul.dtr-details {\n @apply m-0 block w-full list-none p-0;\n }\n table.dataTable > tbody > tr.child ul.dtr-details > li {\n @apply border-b p-3 px-7 hover:bg-muted;\n }\n\n table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {\n @apply border-b-0;\n }\n table.dataTable > tbody > tr.child span.dtr-title {\n @apply inline-block min-w-[80px] font-bold;\n }\n div.dtr-modal {\n position: fixed;\n box-sizing: border-box;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 100;\n padding: 10em 1em;\n }\n div.dtr-modal div.dtr-modal-display {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n width: 50%;\n height: fit-content;\n max-height: 75%;\n overflow: auto;\n margin: auto;\n z-index: 102;\n overflow: auto;\n background-color: #f5f5f7;\n border: 1px solid black;\n border-radius: 0.5em;\n box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);\n }\n div.dtr-modal div.dtr-modal-content {\n position: relative;\n padding: 2.5em;\n }\n div.dtr-modal div.dtr-modal-content h2 {\n margin-top: 0;\n }\n div.dtr-modal div.dtr-modal-close {\n position: absolute;\n top: 6px;\n right: 6px;\n width: 22px;\n height: 22px;\n text-align: center;\n border-radius: 3px;\n cursor: pointer;\n z-index: 12;\n }\n div.dtr-modal div.dtr-modal-background {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 101;\n background: rgba(0, 0, 0, 0.6);\n }\n\n /* Search Builder Styles */\n div.dt-button-collection {\n overflow: visible !important;\n z-index: 2002 !important;\n }\n div.dt-button-collection div.dtsb-searchBuilder {\n padding-left: 1em !important;\n padding-right: 1em !important;\n }\n div.dt-button-collection.dtb-collection-closeable div.dtsb-titleRow {\n padding-right: 40px;\n }\n .dtsb-greyscale {\n @apply !border;\n }\n div.dtsb-logicContainer .dtsb-greyscale {\n border: none !important;\n }\n div.dtsb-searchBuilder {\n @apply mb-4 cursor-default justify-evenly text-left;\n }\n div.dtsb-searchBuilder button.dtsb-button,\n div.dtsb-searchBuilder select {\n @apply text-sm;\n }\n div.dtsb-searchBuilder div.dtsb-titleRow {\n @apply mb-3 flex items-center justify-between;\n }\n div.dtsb-searchBuilder div.dtsb-titleRow div.dtsb-title {\n @apply inline-block text-sm font-normal;\n }\n div.dtsb-searchBuilder div.dtsb-titleRow div.dtsb-title:empty {\n display: inline;\n }\n div.dtsb-searchBuilder div.dtsb-vertical .dtsb-value,\n div.dtsb-searchBuilder div.dtsb-vertical .dtsb-data,\n div.dtsb-searchBuilder div.dtsb-vertical .dtsb-condition {\n display: block;\n }\n div.dtsb-searchBuilder div.dtsb-group {\n @apply relative clear-both mb-4;\n }\n div.dtsb-searchBuilder div.dtsb-group button.dtsb-search {\n float: right;\n }\n div.dtsb-searchBuilder div.dtsb-group button.dtsb-clearGroup {\n margin: 2px;\n text-align: center;\n padding: 0;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer {\n -webkit-transform: rotate(90deg);\n -moz-transform: rotate(90deg);\n -o-transform: rotate(90deg);\n -ms-transform: rotate(90deg);\n transform: rotate(90deg);\n position: absolute;\n margin-top: 0.8em;\n margin-right: 0.8em;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria {\n margin-bottom: 0.8em;\n display: flex;\n justify-content: flex-start;\n flex-flow: row wrap;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\n padding: 0.4em;\n margin-right: 0.8em;\n min-width: 5em;\n max-width: 20em;\n color: inherit;\n }\n div.dtsb-searchBuilder\n div.dtsb-group\n div.dtsb-criteria\n select.dtsb-dropDown\n option.dtsb-notItalic,\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input option.dtsb-notItalic {\n font-style: normal;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-italic {\n font-style: italic;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont {\n flex: 1;\n white-space: nowrap;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont span.dtsp-joiner {\n margin-right: 0.8em;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont input.dtsb-value {\n width: 33%;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont select,\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont input {\n height: 100%;\n box-sizing: border-box;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer {\n margin-left: auto;\n display: inline-block;\n }\n div.dtsb-searchBuilder\n div.dtsb-group\n div.dtsb-criteria\n div.dtsb-buttonContainer\n button.dtsb-delete,\n div.dtsb-searchBuilder\n div.dtsb-group\n div.dtsb-criteria\n div.dtsb-buttonContainer\n button.dtsb-right,\n div.dtsb-searchBuilder\n div.dtsb-group\n div.dtsb-criteria\n div.dtsb-buttonContainer\n button.dtsb-left {\n margin-right: 0.8em;\n }\n div.dtsb-searchBuilder\n div.dtsb-group\n div.dtsb-criteria\n div.dtsb-buttonContainer\n button.dtsb-delete:last-child,\n div.dtsb-searchBuilder\n div.dtsb-group\n div.dtsb-criteria\n div.dtsb-buttonContainer\n button.dtsb-right:last-child,\n div.dtsb-searchBuilder\n div.dtsb-group\n div.dtsb-criteria\n div.dtsb-buttonContainer\n button.dtsb-left:last-child {\n margin-right: 0;\n }\n @media screen and (max-width: 550px) {\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria {\n display: flex;\n flex-flow: none;\n flex-direction: column;\n justify-content: flex-start;\n padding-right: calc(35px + 0.8em);\n margin-bottom: 0px;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:first-child),\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:nth-child(2)),\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:last-child) {\n padding-top: 0.8em;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:first-child,\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:nth-child(2),\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:last-child {\n padding-top: 0em;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\n max-width: none;\n width: 100%;\n margin-bottom: 0.8em;\n margin-right: 0.8em;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont {\n margin-right: 0.8em;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer {\n position: absolute;\n width: 35px;\n display: flex;\n flex-wrap: wrap-reverse;\n right: 0;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button {\n margin-right: 0px !important;\n }\n }\n div.dtsb-searchBuilder button,\n div.dtsb-searchBuilder select.dtsb-dropDown,\n div.dtsb-searchBuilder input {\n @apply bg-background;\n }\n div.dtsb-searchBuilder button.dtsb-button {\n @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;\n }\n div.dtsb-searchBuilder button.dtsb-button:hover {\n @apply cursor-pointer bg-muted;\n }\n div.dtsb-searchBuilder div.dtsb-logicContainer {\n @apply overflow-hidden rounded-none border;\n }\n div.dtsb-searchBuilder div.dtsb-logicContainer button {\n @apply rounded-md border-transparent bg-transparent;\n }\n div.dtsb-searchBuilder button.dtsb-clearGroup {\n min-width: 2em;\n padding: 0;\n }\n div.dtsb-searchBuilder button.dtsb-iptbtn {\n min-width: 100px;\n text-align: left;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer {\n @apply flex flex-row content-start items-start justify-start rounded-md;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-logic {\n @apply m-0 shrink-0 grow rounded-none border-0;\n flex-basis: 3em;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-clearGroup {\n border: none;\n border-radius: 0px;\n width: 2em;\n margin: 0px;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\n @apply rounded-md border;\n }\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-condition,\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-data,\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-value {\n @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;\n }\n\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-value {\n @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;\n }\n\n /* Col vis styles */\n .dt-button-background {\n @apply fixed inset-0 z-50 flex flex-col items-center justify-center bg-background/50 backdrop-blur-sm;\n }\n .dt-button-down-arrow {\n @apply text-[10px];\n }\n .dt-button-collection {\n @apply relative;\n [role=\"menu\"] {\n @apply absolute -left-40 top-7 flex w-[300px] flex-wrap gap-x-3 gap-y-2 rounded-md border bg-background p-2 shadow lg:w-[500px];\n button {\n @apply h-7 px-2 text-xs;\n }\n .dt-button.buttons-columnVisibility.dt-button-active {\n @apply bg-primary text-primary-foreground;\n }\n }\n }\n</style>\n",
|
|
687
|
+
"<template>\r\n <DataTable ref=\"table\" :data=\"data\" :class=\"props.class\" :options=\"options\">\r\n <slot></slot>\r\n </DataTable>\r\n</template>\r\n\r\n<script lang=\"ts\" setup generic=\"T\">\r\n import type DataTableRef from \"datatables.net\";\r\n import type { Config } from \"datatables.net/types/types\";\r\n\r\n const table = shallowRef<{ dt: InstanceType<typeof DataTableRef<T[]>> } | null>(null);\r\n\r\n const props = withDefaults(\r\n defineProps<{\r\n data?: Config[\"data\"];\r\n class?: any;\r\n options?: Config;\r\n }>(),\r\n {\r\n data: () => [],\r\n class: \"nowrap hover order-column row-border stripe display\",\r\n options: () => ({}),\r\n }\r\n );\r\n\r\n const emits = defineEmits<{\r\n ready: [any];\r\n }>();\r\n\r\n onMounted(() => {\r\n nextTick(() => {\r\n emits(\"ready\", table.value?.dt);\r\n });\r\n });\r\n</script>\r\n\r\n<style>\r\n :root {\r\n --dt-row-selected: 262.1, 83.3%, 57.8%;\r\n --dt-row-selected-text: 210, 20%, 98%;\r\n --dt-row-selected-link: 262.1, 83.3%, 57.8%;\r\n --dt-row-stripe: 0, 0%, 100%;\r\n --dt-row-hover: 0, 0%, 100%;\r\n --dt-column-ordering: 0, 0%, 100%;\r\n --dt-border: 220, 13%, 91%;\r\n --dt-foreground: 224, 71.4%, 4.1%;\r\n }\r\n\r\n .dark {\r\n --dt-row-selected: 263.4, 70%, 50.4%;\r\n --dt-row-selected-text: 210, 20%, 98%;\r\n --dt-row-selected-link: 263.4, 70%, 50.4%;\r\n --dt-row-stripe: 224, 71.4%, 4.1%;\r\n --dt-row-hover: 224, 71.4%, 4.1%;\r\n --dt-column-ordering: 224, 71.4%, 4.1%;\r\n --dt-border: 215, 27.9%, 16.9%;\r\n --dt-foreground: 224, 71.4%, 4.1%;\r\n }\r\n\r\n table.dataTable td.dt-control {\r\n text-align: center;\r\n cursor: pointer;\r\n }\r\n table.dataTable td.dt-control:before {\r\n display: inline-block;\r\n color: hsla(var(--dt-foreground), 0.5);\r\n content: \"►\";\r\n }\r\n table.dataTable tr.dt-hasChild td.dt-control:before {\r\n content: \"▼\";\r\n }\r\n\r\n table.dataTable thead > tr > th.sorting,\r\n table.dataTable thead > tr > th.sorting_asc,\r\n table.dataTable thead > tr > th.sorting_desc,\r\n table.dataTable thead > tr > th.sorting_asc_disabled,\r\n table.dataTable thead > tr > th.sorting_desc_disabled,\r\n table.dataTable thead > tr > td.sorting,\r\n table.dataTable thead > tr > td.sorting_asc,\r\n table.dataTable thead > tr > td.sorting_desc,\r\n table.dataTable thead > tr > td.sorting_asc_disabled,\r\n table.dataTable thead > tr > td.sorting_desc_disabled {\r\n @apply relative cursor-pointer pr-7;\r\n }\r\n table.dataTable thead > tr > th.sorting:before,\r\n table.dataTable thead > tr > th.sorting:after,\r\n table.dataTable thead > tr > th.sorting_asc:before,\r\n table.dataTable thead > tr > th.sorting_asc:after,\r\n table.dataTable thead > tr > th.sorting_desc:before,\r\n table.dataTable thead > tr > th.sorting_desc:after,\r\n table.dataTable thead > tr > th.sorting_asc_disabled:before,\r\n table.dataTable thead > tr > th.sorting_asc_disabled:after,\r\n table.dataTable thead > tr > th.sorting_desc_disabled:before,\r\n table.dataTable thead > tr > th.sorting_desc_disabled:after,\r\n table.dataTable thead > tr > td.sorting:before,\r\n table.dataTable thead > tr > td.sorting:after,\r\n table.dataTable thead > tr > td.sorting_asc:before,\r\n table.dataTable thead > tr > td.sorting_asc:after,\r\n table.dataTable thead > tr > td.sorting_desc:before,\r\n table.dataTable thead > tr > td.sorting_desc:after,\r\n table.dataTable thead > tr > td.sorting_asc_disabled:before,\r\n table.dataTable thead > tr > td.sorting_asc_disabled:after,\r\n table.dataTable thead > tr > td.sorting_desc_disabled:before,\r\n table.dataTable thead > tr > td.sorting_desc_disabled:after {\r\n @apply absolute right-2.5 block text-xs leading-3 opacity-25;\r\n }\r\n table.dataTable thead > tr > th.sorting:before,\r\n table.dataTable thead > tr > th.sorting_asc:before,\r\n table.dataTable thead > tr > th.sorting_desc:before,\r\n table.dataTable thead > tr > th.sorting_asc_disabled:before,\r\n table.dataTable thead > tr > th.sorting_desc_disabled:before,\r\n table.dataTable thead > tr > td.sorting:before,\r\n table.dataTable thead > tr > td.sorting_asc:before,\r\n table.dataTable thead > tr > td.sorting_desc:before,\r\n table.dataTable thead > tr > td.sorting_asc_disabled:before,\r\n table.dataTable thead > tr > td.sorting_desc_disabled:before {\r\n @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\n }\r\n table.dataTable thead > tr > th.sorting:after,\r\n table.dataTable thead > tr > th.sorting_asc:after,\r\n table.dataTable thead > tr > th.sorting_desc:after,\r\n table.dataTable thead > tr > th.sorting_asc_disabled:after,\r\n table.dataTable thead > tr > th.sorting_desc_disabled:after,\r\n table.dataTable thead > tr > td.sorting:after,\r\n table.dataTable thead > tr > td.sorting_asc:after,\r\n table.dataTable thead > tr > td.sorting_desc:after,\r\n table.dataTable thead > tr > td.sorting_asc_disabled:after,\r\n table.dataTable thead > tr > td.sorting_desc_disabled:after {\r\n @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\n }\r\n table.dataTable thead > tr > th.sorting_asc:before,\r\n table.dataTable thead > tr > th.sorting_desc:after,\r\n table.dataTable thead > tr > td.sorting_asc:before,\r\n table.dataTable thead > tr > td.sorting_desc:after {\r\n @apply opacity-80;\r\n }\r\n table.dataTable thead > tr > th.sorting_desc_disabled:after,\r\n table.dataTable thead > tr > th.sorting_asc_disabled:before,\r\n table.dataTable thead > tr > td.sorting_desc_disabled:after,\r\n table.dataTable thead > tr > td.sorting_asc_disabled:before {\r\n @apply hidden;\r\n }\r\n table.dataTable thead > tr > th:active,\r\n table.dataTable thead > tr > td:active {\r\n @apply outline-none;\r\n }\r\n\r\n div.dataTables_scrollBody > table.dataTable > thead > tr > th:before,\r\n div.dataTables_scrollBody > table.dataTable > thead > tr > th:after,\r\n div.dataTables_scrollBody > table.dataTable > thead > tr > td:before,\r\n div.dataTables_scrollBody > table.dataTable > thead > tr > td:after {\r\n @apply hidden;\r\n }\r\n\r\n div.dataTables_processing {\r\n @apply absolute left-[50%] top-[50%] ml-[-100px] mt-[-26px] w-[200px] p-0.5 text-center;\r\n }\r\n div.dataTables_processing > div:last-child {\r\n @apply relative mx-auto my-4 h-4 w-20;\r\n }\r\n div.dataTables_processing > div:last-child > div {\r\n @apply absolute top-0 h-3.5 w-3.5 rounded-full;\r\n background: hsl(var(--dt-row-selected));\r\n animation-timing-function: cubic-bezier(0, 1, 1, 0);\r\n }\r\n div.dataTables_processing > div:last-child > div:nth-child(1) {\r\n left: 8px;\r\n animation: datatables-loader-1 0.6s infinite;\r\n }\r\n div.dataTables_processing > div:last-child > div:nth-child(2) {\r\n left: 8px;\r\n animation: datatables-loader-2 0.6s infinite;\r\n }\r\n div.dataTables_processing > div:last-child > div:nth-child(3) {\r\n left: 32px;\r\n animation: datatables-loader-2 0.6s infinite;\r\n }\r\n div.dataTables_processing > div:last-child > div:nth-child(4) {\r\n left: 56px;\r\n animation: datatables-loader-3 0.6s infinite;\r\n }\r\n\r\n @keyframes datatables-loader-1 {\r\n 0% {\r\n transform: scale(0);\r\n }\r\n 100% {\r\n transform: scale(1);\r\n }\r\n }\r\n @keyframes datatables-loader-3 {\r\n 0% {\r\n transform: scale(1);\r\n }\r\n 100% {\r\n transform: scale(0);\r\n }\r\n }\r\n @keyframes datatables-loader-2 {\r\n 0% {\r\n transform: translate(0, 0);\r\n }\r\n 100% {\r\n transform: translate(24px, 0);\r\n }\r\n }\r\n table.dataTable.nowrap th,\r\n table.dataTable.nowrap td {\r\n white-space: nowrap;\r\n }\r\n table.dataTable th.dt-left,\r\n table.dataTable td.dt-left {\r\n text-align: left;\r\n }\r\n table.dataTable th.dt-center,\r\n table.dataTable td.dt-center,\r\n table.dataTable td.dataTables_empty {\r\n text-align: center;\r\n }\r\n table.dataTable th.dt-right,\r\n table.dataTable td.dt-right {\r\n text-align: right;\r\n }\r\n table.dataTable th.dt-justify,\r\n table.dataTable td.dt-justify {\r\n text-align: justify;\r\n }\r\n table.dataTable th.dt-nowrap,\r\n table.dataTable td.dt-nowrap {\r\n white-space: nowrap;\r\n }\r\n table.dataTable thead th,\r\n table.dataTable thead td,\r\n table.dataTable tfoot th,\r\n table.dataTable tfoot td {\r\n text-align: left;\r\n }\r\n table.dataTable thead th.dt-head-left,\r\n table.dataTable thead td.dt-head-left,\r\n table.dataTable tfoot th.dt-head-left,\r\n table.dataTable tfoot td.dt-head-left {\r\n text-align: left;\r\n }\r\n table.dataTable thead th.dt-head-center,\r\n table.dataTable thead td.dt-head-center,\r\n table.dataTable tfoot th.dt-head-center,\r\n table.dataTable tfoot td.dt-head-center {\r\n text-align: center;\r\n }\r\n table.dataTable thead th.dt-head-right,\r\n table.dataTable thead td.dt-head-right,\r\n table.dataTable tfoot th.dt-head-right,\r\n table.dataTable tfoot td.dt-head-right {\r\n text-align: right;\r\n }\r\n table.dataTable thead th.dt-head-justify,\r\n table.dataTable thead td.dt-head-justify,\r\n table.dataTable tfoot th.dt-head-justify,\r\n table.dataTable tfoot td.dt-head-justify {\r\n text-align: justify;\r\n }\r\n table.dataTable thead th.dt-head-nowrap,\r\n table.dataTable thead td.dt-head-nowrap,\r\n table.dataTable tfoot th.dt-head-nowrap,\r\n table.dataTable tfoot td.dt-head-nowrap {\r\n white-space: nowrap;\r\n }\r\n table.dataTable tbody th.dt-body-left,\r\n table.dataTable tbody td.dt-body-left {\r\n text-align: left;\r\n }\r\n table.dataTable tbody th.dt-body-center,\r\n table.dataTable tbody td.dt-body-center {\r\n text-align: center;\r\n }\r\n table.dataTable tbody th.dt-body-right,\r\n table.dataTable tbody td.dt-body-right {\r\n text-align: right;\r\n }\r\n table.dataTable tbody th.dt-body-justify,\r\n table.dataTable tbody td.dt-body-justify {\r\n text-align: justify;\r\n }\r\n table.dataTable tbody th.dt-body-nowrap,\r\n table.dataTable tbody td.dt-body-nowrap {\r\n white-space: nowrap;\r\n }\r\n\r\n /* Table Styles */\r\n\r\n table.dataTable {\r\n @apply w-full table-auto border-collapse;\r\n }\r\n\r\n /* Table header styles */\r\n table.dataTable thead th,\r\n table.dataTable tfoot th {\r\n @apply text-left text-sm font-medium text-muted-foreground;\r\n }\r\n\r\n table.dataTable > thead > tr > th {\r\n @apply border-b border-t-0 px-6 py-3;\r\n }\r\n table.dataTable > thead > tr > td {\r\n @apply border-b px-6 py-3 text-sm;\r\n }\r\n table.dataTable > thead > tr > th:active,\r\n table.dataTable > thead > tr > td:active {\r\n @apply outline-none;\r\n }\r\n table.dataTable > tfoot > tr > th,\r\n table.dataTable > tfoot > tr > td {\r\n @apply border-t px-6 py-3;\r\n }\r\n table.dataTable tbody tr {\r\n @apply bg-transparent;\r\n }\r\n table.dataTable tbody tr.selected > * {\r\n @apply bg-primary/10;\r\n }\r\n table.dataTable tbody tr.selected a {\r\n @apply text-primary;\r\n }\r\n table.dataTable tbody th,\r\n table.dataTable tbody td {\r\n @apply px-6 py-3 text-sm;\r\n }\r\n table.dataTable.row-border > tbody > tr > th,\r\n table.dataTable.row-border > tbody > tr > td,\r\n table.dataTable.display > tbody > tr > th,\r\n table.dataTable.display > tbody > tr > td {\r\n @apply border-t;\r\n }\r\n table.dataTable.row-border > tbody > tr:first-child > th,\r\n table.dataTable.row-border > tbody > tr:first-child > td,\r\n table.dataTable.display > tbody > tr:first-child > th,\r\n table.dataTable.display > tbody > tr:first-child > td {\r\n @apply border-t-0;\r\n }\r\n table.dataTable.row-border > tbody > tr.selected + tr.selected > td,\r\n table.dataTable.display > tbody > tr.selected + tr.selected > td {\r\n @apply border-t-primary/30;\r\n }\r\n table.dataTable.cell-border > tbody > tr > th,\r\n table.dataTable.cell-border > tbody > tr > td {\r\n @apply border-r border-t;\r\n }\r\n table.dataTable.cell-border > tbody > tr > th:first-child,\r\n table.dataTable.cell-border > tbody > tr > td:first-child {\r\n @apply border-l;\r\n }\r\n table.dataTable.cell-border > tbody > tr:first-child > th,\r\n table.dataTable.cell-border > tbody > tr:first-child > td {\r\n @apply border-t-0;\r\n }\r\n table.dataTable.stripe > tbody > tr.odd > *,\r\n table.dataTable.display > tbody > tr.odd > * {\r\n @apply bg-muted/50;\r\n }\r\n table.dataTable.stripe > tbody > tr.odd.selected > *,\r\n table.dataTable.display > tbody > tr.odd.selected > * {\r\n @apply bg-primary/10;\r\n }\r\n table.dataTable.hover > tbody > tr:hover > *,\r\n table.dataTable.display > tbody > tr:hover > * {\r\n @apply bg-muted;\r\n }\r\n table.dataTable.hover > tbody > tr.selected:hover > *,\r\n table.dataTable.display > tbody > tr.selected:hover > * {\r\n @apply !bg-primary/10;\r\n }\r\n table.dataTable.order-column > tbody tr > .sorting_1,\r\n table.dataTable.order-column > tbody tr > .sorting_2,\r\n table.dataTable.order-column > tbody tr > .sorting_3,\r\n table.dataTable.display > tbody tr > .sorting_1,\r\n table.dataTable.display > tbody tr > .sorting_2,\r\n table.dataTable.display > tbody tr > .sorting_3 {\r\n @apply bg-muted;\r\n }\r\n table.dataTable.order-column > tbody tr.selected > .sorting_1,\r\n table.dataTable.order-column > tbody tr.selected > .sorting_2,\r\n table.dataTable.order-column > tbody tr.selected > .sorting_3,\r\n table.dataTable.display > tbody tr.selected > .sorting_1,\r\n table.dataTable.display > tbody tr.selected > .sorting_2,\r\n table.dataTable.display > tbody tr.selected > .sorting_3 {\r\n @apply !bg-primary/10;\r\n }\r\n table.dataTable.display > tbody > tr.odd > .sorting_1,\r\n table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_1 {\r\n @apply bg-muted/50;\r\n }\r\n table.dataTable.display > tbody > tr.odd > .sorting_2,\r\n table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_2 {\r\n @apply bg-muted/30;\r\n }\r\n table.dataTable.display > tbody > tr.odd > .sorting_3,\r\n table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_3 {\r\n @apply bg-muted/10;\r\n }\r\n table.dataTable.display > tbody > tr.odd.selected > .sorting_1,\r\n table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_1 {\r\n @apply bg-muted/50;\r\n }\r\n table.dataTable.display > tbody > tr.odd.selected > .sorting_2,\r\n table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_2 {\r\n @apply bg-muted/30;\r\n }\r\n table.dataTable.display > tbody > tr.odd.selected > .sorting_3,\r\n table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_3 {\r\n @apply bg-muted/10;\r\n }\r\n table.dataTable.display > tbody > tr.even > .sorting_1,\r\n table.dataTable.order-column.stripe > tbody > tr.even > .sorting_1 {\r\n @apply bg-muted/50;\r\n }\r\n table.dataTable.display > tbody > tr.even > .sorting_2,\r\n table.dataTable.order-column.stripe > tbody > tr.even > .sorting_2 {\r\n @apply bg-muted/30;\r\n }\r\n table.dataTable.display > tbody > tr.even > .sorting_3,\r\n table.dataTable.order-column.stripe > tbody > tr.even > .sorting_3 {\r\n @apply bg-muted/10;\r\n }\r\n table.dataTable.display > tbody > tr.even.selected > .sorting_1,\r\n table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_1 {\r\n @apply bg-primary/10;\r\n }\r\n table.dataTable.display > tbody > tr.even.selected > .sorting_2,\r\n table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_2 {\r\n @apply bg-primary/10;\r\n }\r\n table.dataTable.display > tbody > tr.even.selected > .sorting_3,\r\n table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_3 {\r\n @apply bg-primary/10;\r\n }\r\n table.dataTable.display tbody tr:hover > .sorting_1,\r\n table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {\r\n @apply bg-muted;\r\n }\r\n table.dataTable.display tbody tr:hover > .sorting_2,\r\n table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {\r\n @apply bg-muted;\r\n }\r\n table.dataTable.display tbody tr:hover > .sorting_3,\r\n table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {\r\n @apply bg-muted;\r\n }\r\n table.dataTable.display tbody tr:hover.selected > .sorting_1,\r\n table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {\r\n @apply bg-primary/10;\r\n }\r\n table.dataTable.display tbody tr:hover.selected > .sorting_2,\r\n table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {\r\n @apply bg-primary/10;\r\n }\r\n table.dataTable.display tbody tr:hover.selected > .sorting_3,\r\n table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {\r\n @apply bg-primary/10;\r\n }\r\n table.dataTable.no-footer {\r\n @apply border-b-0;\r\n }\r\n table.dataTable.compact thead th,\r\n table.dataTable.compact thead td,\r\n table.dataTable.compact tfoot th,\r\n table.dataTable.compact tfoot td,\r\n table.dataTable.compact tbody th,\r\n table.dataTable.compact tbody td {\r\n @apply px-4 py-2;\r\n }\r\n\r\n table.dataTable th,\r\n table.dataTable td {\r\n @apply box-content border-y;\r\n }\r\n\r\n table.dataTable tr:last-child td {\r\n @apply !border-b-0;\r\n }\r\n\r\n /* Control feature layout */\r\n .dataTables_wrapper {\r\n @apply w-full overflow-x-auto;\r\n }\r\n\r\n /* Export button styles */\r\n .dataTables_wrapper .dt-buttons {\r\n @apply inline-flex flex-wrap items-center gap-2;\r\n button {\r\n @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\n }\r\n }\r\n\r\n /* Copy modal */\r\n .dt-button-info {\r\n @apply fixed inset-0 z-50 flex flex-col items-center justify-center bg-background/50 backdrop-blur;\r\n }\r\n\r\n .dataTables_wrapper .dataTables_length {\r\n label {\r\n @apply inline-flex items-center gap-2 text-sm font-normal text-muted-foreground;\r\n select {\r\n @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\n }\r\n }\r\n }\r\n .dataTables_wrapper .dataTables_filter {\r\n label {\r\n @apply inline-flex w-full cursor-pointer items-center gap-2 text-sm font-normal text-muted-foreground;\r\n input {\r\n @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\n }\r\n }\r\n }\r\n .dataTables_wrapper .dataTables_info {\r\n @apply flex items-center gap-3 text-sm !text-muted-foreground;\r\n }\r\n .dataTables_wrapper .dataTables_paginate {\r\n .paginate_button {\r\n @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\n }\r\n }\r\n .dataTables_wrapper .dataTables_paginate .paginate_button.current,\r\n .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {\r\n @apply bg-muted;\r\n }\r\n .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,\r\n .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,\r\n .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {\r\n @apply pointer-events-none opacity-50;\r\n }\r\n .dataTables_wrapper .dataTables_paginate .paginate_button:hover {\r\n @apply bg-muted;\r\n }\r\n .dataTables_wrapper .dataTables_paginate .paginate_button:active {\r\n @apply bg-muted;\r\n }\r\n .dataTables_wrapper .dataTables_paginate .ellipsis {\r\n @apply inline-flex h-8 min-w-[32px] items-start justify-center text-sm;\r\n }\r\n .dataTables_wrapper .dataTables_scroll {\r\n clear: both;\r\n }\r\n .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {\r\n -webkit-overflow-scrolling: touch;\r\n }\r\n .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th,\r\n .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td,\r\n .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th,\r\n .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {\r\n vertical-align: middle;\r\n }\r\n .dataTables_wrapper\r\n .dataTables_scroll\r\n div.dataTables_scrollBody\r\n > table\r\n > thead\r\n > tr\r\n > th\r\n > div.dataTables_sizing,\r\n .dataTables_wrapper\r\n .dataTables_scroll\r\n div.dataTables_scrollBody\r\n > table\r\n > thead\r\n > tr\r\n > td\r\n > div.dataTables_sizing,\r\n .dataTables_wrapper\r\n .dataTables_scroll\r\n div.dataTables_scrollBody\r\n > table\r\n > tbody\r\n > tr\r\n > th\r\n > div.dataTables_sizing,\r\n .dataTables_wrapper\r\n .dataTables_scroll\r\n div.dataTables_scrollBody\r\n > table\r\n > tbody\r\n > tr\r\n > td\r\n > div.dataTables_sizing {\r\n height: 0;\r\n overflow: hidden;\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n .dataTables_wrapper.no-footer .dataTables_scrollBody {\r\n @apply border-b;\r\n }\r\n .dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable,\r\n .dataTables_wrapper.no-footer div.dataTables_scrollBody > table {\r\n border-bottom: none;\r\n }\r\n .dataTables_wrapper:after {\r\n visibility: hidden;\r\n display: block;\r\n content: \"\";\r\n clear: both;\r\n height: 0;\r\n }\r\n\r\n /* \r\n responsive styles\r\n */\r\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,\r\n table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,\r\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {\r\n cursor: default !important;\r\n }\r\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,\r\n table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before,\r\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before {\r\n display: none !important;\r\n }\r\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,\r\n table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {\r\n cursor: pointer;\r\n }\r\n\r\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,\r\n table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {\r\n @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\n }\r\n table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control.arrow-right::before,\r\n table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control.arrow-right::before {\r\n content: \"◄\";\r\n }\r\n table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,\r\n table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {\r\n @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\n }\r\n table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control,\r\n table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control {\r\n padding-left: 0.333em;\r\n }\r\n table.dataTable.dtr-column > tbody > tr > td.dtr-control,\r\n table.dataTable.dtr-column > tbody > tr > th.dtr-control,\r\n table.dataTable.dtr-column > tbody > tr > td.control,\r\n table.dataTable.dtr-column > tbody > tr > th.control {\r\n cursor: pointer;\r\n }\r\n table.dataTable.dtr-column > tbody > tr > td.dtr-control:before,\r\n table.dataTable.dtr-column > tbody > tr > th.dtr-control:before,\r\n table.dataTable.dtr-column > tbody > tr > td.control:before,\r\n table.dataTable.dtr-column > tbody > tr > th.control:before {\r\n @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\n }\r\n table.dataTable.dtr-column > tbody > tr > td.dtr-control.arrow-right::before,\r\n table.dataTable.dtr-column > tbody > tr > th.dtr-control.arrow-right::before,\r\n table.dataTable.dtr-column > tbody > tr > td.control.arrow-right::before,\r\n table.dataTable.dtr-column > tbody > tr > th.control.arrow-right::before {\r\n content: \"◄\";\r\n }\r\n table.dataTable.dtr-column > tbody > tr.parent td.dtr-control:before,\r\n table.dataTable.dtr-column > tbody > tr.parent th.dtr-control:before,\r\n table.dataTable.dtr-column > tbody > tr.parent td.control:before,\r\n table.dataTable.dtr-column > tbody > tr.parent th.control:before {\r\n @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\n }\r\n\r\n table.dataTable > tbody td.child {\r\n @apply p-0;\r\n }\r\n table.dataTable > tbody > tr.child:hover,\r\n table.dataTable > tbody > tr.child:hover > td.child {\r\n background: transparent !important;\r\n }\r\n table.dataTable > tbody > tr.child ul.dtr-details {\r\n @apply m-0 block w-full list-none p-0;\r\n }\r\n table.dataTable > tbody > tr.child ul.dtr-details > li {\r\n @apply border-b p-3 px-7 hover:bg-muted;\r\n }\r\n\r\n table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {\r\n @apply border-b-0;\r\n }\r\n table.dataTable > tbody > tr.child span.dtr-title {\r\n @apply inline-block min-w-[80px] font-bold;\r\n }\r\n div.dtr-modal {\r\n position: fixed;\r\n box-sizing: border-box;\r\n top: 0;\r\n left: 0;\r\n height: 100%;\r\n width: 100%;\r\n z-index: 100;\r\n padding: 10em 1em;\r\n }\r\n div.dtr-modal div.dtr-modal-display {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n bottom: 0;\r\n right: 0;\r\n width: 50%;\r\n height: fit-content;\r\n max-height: 75%;\r\n overflow: auto;\r\n margin: auto;\r\n z-index: 102;\r\n overflow: auto;\r\n background-color: #f5f5f7;\r\n border: 1px solid black;\r\n border-radius: 0.5em;\r\n box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);\r\n }\r\n div.dtr-modal div.dtr-modal-content {\r\n position: relative;\r\n padding: 2.5em;\r\n }\r\n div.dtr-modal div.dtr-modal-content h2 {\r\n margin-top: 0;\r\n }\r\n div.dtr-modal div.dtr-modal-close {\r\n position: absolute;\r\n top: 6px;\r\n right: 6px;\r\n width: 22px;\r\n height: 22px;\r\n text-align: center;\r\n border-radius: 3px;\r\n cursor: pointer;\r\n z-index: 12;\r\n }\r\n div.dtr-modal div.dtr-modal-background {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n z-index: 101;\r\n background: rgba(0, 0, 0, 0.6);\r\n }\r\n\r\n /* Search Builder Styles */\r\n div.dt-button-collection {\r\n overflow: visible !important;\r\n z-index: 2002 !important;\r\n }\r\n div.dt-button-collection div.dtsb-searchBuilder {\r\n padding-left: 1em !important;\r\n padding-right: 1em !important;\r\n }\r\n div.dt-button-collection.dtb-collection-closeable div.dtsb-titleRow {\r\n padding-right: 40px;\r\n }\r\n .dtsb-greyscale {\r\n @apply !border;\r\n }\r\n div.dtsb-logicContainer .dtsb-greyscale {\r\n border: none !important;\r\n }\r\n div.dtsb-searchBuilder {\r\n @apply mb-4 cursor-default justify-evenly text-left;\r\n }\r\n div.dtsb-searchBuilder button.dtsb-button,\r\n div.dtsb-searchBuilder select {\r\n @apply text-sm;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-titleRow {\r\n @apply mb-3 flex items-center justify-between;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-titleRow div.dtsb-title {\r\n @apply inline-block text-sm font-normal;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-titleRow div.dtsb-title:empty {\r\n display: inline;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-vertical .dtsb-value,\r\n div.dtsb-searchBuilder div.dtsb-vertical .dtsb-data,\r\n div.dtsb-searchBuilder div.dtsb-vertical .dtsb-condition {\r\n display: block;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group {\r\n @apply relative clear-both mb-4;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group button.dtsb-search {\r\n float: right;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group button.dtsb-clearGroup {\r\n margin: 2px;\r\n text-align: center;\r\n padding: 0;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer {\r\n -webkit-transform: rotate(90deg);\r\n -moz-transform: rotate(90deg);\r\n -o-transform: rotate(90deg);\r\n -ms-transform: rotate(90deg);\r\n transform: rotate(90deg);\r\n position: absolute;\r\n margin-top: 0.8em;\r\n margin-right: 0.8em;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria {\r\n margin-bottom: 0.8em;\r\n display: flex;\r\n justify-content: flex-start;\r\n flex-flow: row wrap;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\r\n padding: 0.4em;\r\n margin-right: 0.8em;\r\n min-width: 5em;\r\n max-width: 20em;\r\n color: inherit;\r\n }\r\n div.dtsb-searchBuilder\r\n div.dtsb-group\r\n div.dtsb-criteria\r\n select.dtsb-dropDown\r\n option.dtsb-notItalic,\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input option.dtsb-notItalic {\r\n font-style: normal;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-italic {\r\n font-style: italic;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont {\r\n flex: 1;\r\n white-space: nowrap;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont span.dtsp-joiner {\r\n margin-right: 0.8em;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont input.dtsb-value {\r\n width: 33%;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont select,\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont input {\r\n height: 100%;\r\n box-sizing: border-box;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer {\r\n margin-left: auto;\r\n display: inline-block;\r\n }\r\n div.dtsb-searchBuilder\r\n div.dtsb-group\r\n div.dtsb-criteria\r\n div.dtsb-buttonContainer\r\n button.dtsb-delete,\r\n div.dtsb-searchBuilder\r\n div.dtsb-group\r\n div.dtsb-criteria\r\n div.dtsb-buttonContainer\r\n button.dtsb-right,\r\n div.dtsb-searchBuilder\r\n div.dtsb-group\r\n div.dtsb-criteria\r\n div.dtsb-buttonContainer\r\n button.dtsb-left {\r\n margin-right: 0.8em;\r\n }\r\n div.dtsb-searchBuilder\r\n div.dtsb-group\r\n div.dtsb-criteria\r\n div.dtsb-buttonContainer\r\n button.dtsb-delete:last-child,\r\n div.dtsb-searchBuilder\r\n div.dtsb-group\r\n div.dtsb-criteria\r\n div.dtsb-buttonContainer\r\n button.dtsb-right:last-child,\r\n div.dtsb-searchBuilder\r\n div.dtsb-group\r\n div.dtsb-criteria\r\n div.dtsb-buttonContainer\r\n button.dtsb-left:last-child {\r\n margin-right: 0;\r\n }\r\n @media screen and (max-width: 550px) {\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria {\r\n display: flex;\r\n flex-flow: none;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n padding-right: calc(35px + 0.8em);\r\n margin-bottom: 0px;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:first-child),\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:nth-child(2)),\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:not(:last-child) {\r\n padding-top: 0.8em;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:first-child,\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:nth-child(2),\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria:last-child {\r\n padding-top: 0em;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\r\n max-width: none;\r\n width: 100%;\r\n margin-bottom: 0.8em;\r\n margin-right: 0.8em;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-inputCont {\r\n margin-right: 0.8em;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer {\r\n position: absolute;\r\n width: 35px;\r\n display: flex;\r\n flex-wrap: wrap-reverse;\r\n right: 0;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button {\r\n margin-right: 0px !important;\r\n }\r\n }\r\n div.dtsb-searchBuilder button,\r\n div.dtsb-searchBuilder select.dtsb-dropDown,\r\n div.dtsb-searchBuilder input {\r\n @apply bg-background;\r\n }\r\n div.dtsb-searchBuilder button.dtsb-button {\r\n @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\n }\r\n div.dtsb-searchBuilder button.dtsb-button:hover {\r\n @apply cursor-pointer bg-muted;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-logicContainer {\r\n @apply overflow-hidden rounded-none border;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-logicContainer button {\r\n @apply rounded-md border-transparent bg-transparent;\r\n }\r\n div.dtsb-searchBuilder button.dtsb-clearGroup {\r\n min-width: 2em;\r\n padding: 0;\r\n }\r\n div.dtsb-searchBuilder button.dtsb-iptbtn {\r\n min-width: 100px;\r\n text-align: left;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer {\r\n @apply flex flex-row content-start items-start justify-start rounded-md;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-logic {\r\n @apply m-0 shrink-0 grow rounded-none border-0;\r\n flex-basis: 3em;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer button.dtsb-clearGroup {\r\n border: none;\r\n border-radius: 0px;\r\n width: 2em;\r\n margin: 0px;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown,\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input {\r\n @apply rounded-md border;\r\n }\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-condition,\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-data,\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-value {\r\n @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\n }\r\n\r\n div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-value {\r\n @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\n }\r\n\r\n /* Col vis styles */\r\n .dt-button-background {\r\n @apply fixed inset-0 z-50 flex flex-col items-center justify-center bg-background/50 backdrop-blur-sm;\r\n }\r\n .dt-button-down-arrow {\r\n @apply text-[10px];\r\n }\r\n .dt-button-collection {\r\n @apply relative;\r\n [role=\"menu\"] {\r\n @apply absolute -left-40 top-7 flex w-[300px] flex-wrap gap-x-3 gap-y-2 rounded-md border bg-background p-2 shadow lg:w-[500px];\r\n button {\r\n @apply h-7 px-2 text-xs;\r\n }\r\n .dt-button.buttons-columnVisibility.dt-button-active {\r\n @apply bg-primary text-primary-foreground;\r\n }\r\n }\r\n }\r\n</style>\r\n",
|
|
688
688
|
},
|
|
689
689
|
],
|
|
690
690
|
utils: [],
|
|
691
691
|
composables: [],
|
|
692
692
|
},
|
|
693
|
+
{
|
|
694
|
+
name: "Date Field",
|
|
695
|
+
value: "date-field",
|
|
696
|
+
devDeps: ["@internationalized/date"],
|
|
697
|
+
files: [
|
|
698
|
+
{
|
|
699
|
+
fileName: "DateField.vue",
|
|
700
|
+
dirPath: "components/UI",
|
|
701
|
+
fileContent:
|
|
702
|
+
'<template>\n <DateFieldRoot\n v-slot="{ segments, modelValue, isInvalid }"\n :class="styles({ class: props.class })"\n v-bind="props"\n v-model="localModel"\n >\n <template v-for="item in segments" :key="item.part">\n <DateFieldInput\n v-if="item.part === \'literal\'"\n :part="item.part"\n class="flex items-center justify-center text-muted-foreground"\n >\n <Icon :name="separatorIcon" class="text-muted-foreground" v-if="separatorIcon" />\n <span class="mx-1 text-muted-foreground" v-else-if="separator">{{ separator }}</span>\n </DateFieldInput>\n <DateFieldInput\n v-else\n :part="item.part"\n class="flex cursor-text items-center rounded px-1 transition focus:outline-none focus:ring-1 focus:ring-ring aria-[valuetext=Empty]:text-muted-foreground"\n >\n {{ item.value }}\n </DateFieldInput>\n </template>\n </DateFieldRoot>\n</template>\n\n<script lang="ts" setup>\n import { type DateValue } from "@internationalized/date";\n import { DateFieldInput, DateFieldRoot } from "radix-vue";\n import type { DateFieldRootEmits, DateFieldRootProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n DateFieldRootProps & {\n class?: any;\n separator?: string;\n separatorIcon?: string;\n }\n >(),\n {\n separator: "/",\n }\n );\n const emits = defineEmits<DateFieldRootEmits>();\n const localModel = defineModel<DateValue>();\n\n const styles = tv({\n base: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-[16px] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground file:hover:cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[disabled]:cursor-not-allowed data-[invalid]:border-destructive data-[disabled]:opacity-50 sm:text-sm",\n });\n</script>\n',
|
|
703
|
+
},
|
|
704
|
+
],
|
|
705
|
+
utils: [],
|
|
706
|
+
composables: [],
|
|
707
|
+
plugins: [],
|
|
708
|
+
},
|
|
693
709
|
{
|
|
694
710
|
name: "Datepicker",
|
|
695
711
|
value: "datepicker",
|
|
@@ -810,7 +826,7 @@ export default [
|
|
|
810
826
|
fileName: "Drawer/Content.vue",
|
|
811
827
|
dirPath: "components/UI",
|
|
812
828
|
fileContent:
|
|
813
|
-
'<template>\r\n <UiDrawerPortal>\r\n <slot name="overlay">\r\n <UiDrawerOverlay />\r\n </slot>\r\n <slot name="content">\r\n <DrawerContent v-bind="{ ...props, ...$attrs }" :class="styles({ class: props.class })">\r\n <slot name="knob">\r\n <div\r\n className="mx-auto cursor-grab active:cursor-grabbing my-5 h-2 w-[60px] rounded-full bg-muted"\r\n />\r\n </slot>\r\n <slot />\r\n </DrawerContent>\r\n </slot>\r\n </UiDrawerPortal>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { DrawerContent } from "vaul-vue";\r\n\r\n defineOptions({ inheritAttrs: false });\r\n\r\n interface Props\r\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerContent>, "$props">> {}\r\n\r\n const props = defineProps<Props & { class?: any }>();\r\n const styles = tv({\r\n 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\n });\r\n</script>\r\n',
|
|
829
|
+
'<template>\r\n <UiDrawerPortal>\r\n <slot name="overlay">\r\n <UiDrawerOverlay />\r\n </slot>\r\n <slot name="content">\r\n <DrawerContent v-bind="{ ...props, ...$attrs }" :class="styles({ class: props.class })">\r\n <slot name="knob">\r\n <div\r\n className="mx-auto shrink-0 cursor-grab active:cursor-grabbing my-5 h-2 w-[60px] rounded-full bg-muted"\r\n />\r\n </slot>\r\n <slot />\r\n </DrawerContent>\r\n </slot>\r\n </UiDrawerPortal>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { DrawerContent } from "vaul-vue";\r\n\r\n defineOptions({ inheritAttrs: false });\r\n\r\n interface Props\r\n extends /* @vue-ignore */ Partial<Pick<InstanceType<typeof DrawerContent>, "$props">> {}\r\n\r\n const props = defineProps<Props & { class?: any }>();\r\n const styles = tv({\r\n 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\n });\r\n</script>\r\n',
|
|
814
830
|
},
|
|
815
831
|
{
|
|
816
832
|
fileName: "Drawer/Description.vue",
|
|
@@ -1120,7 +1136,7 @@ export default [
|
|
|
1120
1136
|
fileName: "Label.vue",
|
|
1121
1137
|
dirPath: "components/UI",
|
|
1122
1138
|
fileContent:
|
|
1123
|
-
'<template>\n <Label :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot />\n </Label>\n</template>\n\n<script lang="ts" setup>\n import { Label } from "radix-vue";\n import type { LabelProps } from "radix-vue";\n\n const props = defineProps<\n LabelProps & {\n /** Custom class(es) to add to the label */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "
|
|
1139
|
+
'<template>\n <Label :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot />\n <slot name="hint">\n <span v-if="hint">\n {{ hint }}\n </span>\n </slot>\n </Label>\n</template>\n\n<script lang="ts" setup>\n import { Label } from "radix-vue";\n import type { LabelProps } from "radix-vue";\n\n const props = defineProps<\n LabelProps & {\n /** Custom class(es) to add to the label */\n class?: any;\n hint?: string;\n }\n >();\n\n const styles = tv({\n base: "flex items-center justify-between text-[15px] font-medium leading-none hover:cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm",\n });\n</script>\n',
|
|
1124
1140
|
},
|
|
1125
1141
|
],
|
|
1126
1142
|
utils: [],
|
|
@@ -1843,22 +1859,26 @@ export default [
|
|
|
1843
1859
|
plugins: [],
|
|
1844
1860
|
},
|
|
1845
1861
|
{
|
|
1846
|
-
name: "
|
|
1847
|
-
value: "
|
|
1848
|
-
deps: ["splitpanes"],
|
|
1849
|
-
devDeps: ["@types/splitpanes"],
|
|
1862
|
+
name: "Splitter",
|
|
1863
|
+
value: "splitter",
|
|
1850
1864
|
files: [
|
|
1851
1865
|
{
|
|
1852
|
-
fileName: "
|
|
1866
|
+
fileName: "Splitter/Splitter.vue",
|
|
1867
|
+
dirPath: "components/UI",
|
|
1868
|
+
fileContent:
|
|
1869
|
+
'<template>\n <SplitterGroup\n v-bind="forwarded"\n :class="styles({ class: props.class })"\n v-slot="{ layout }: { layout: number[] }"\n >\n <slot :layout="layout"></slot>\n </SplitterGroup>\n</template>\n\n<script lang="ts" setup>\n import { SplitterGroup, useForwardPropsEmits } from "radix-vue";\n import type { SplitterGroupEmits, SplitterGroupProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n SplitterGroupProps & {\n direction?: "horizontal" | "vertical";\n class?: any;\n }\n >(),\n {\n direction: "horizontal",\n as: "div",\n keyboardResizeBy: 10,\n }\n );\n\n const emit = defineEmits<SplitterGroupEmits>();\n\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emit);\n\n const styles = tv({\n base: "flex h-full w-full data-[orientation=vertical]:flex-col",\n });\n</script>\n',
|
|
1870
|
+
},
|
|
1871
|
+
{
|
|
1872
|
+
fileName: "Splitter/Panel.vue",
|
|
1853
1873
|
dirPath: "components/UI",
|
|
1854
1874
|
fileContent:
|
|
1855
|
-
'<template>\
|
|
1875
|
+
'<template>\n <SplitterPanel\n v-bind="forwarded"\n v-slot="{ isCollapsed, isExpanded }: { isCollapsed: boolean; isExpanded: boolean }"\n >\n <slot :isCollapsed="isCollapsed" :isExpanded="isExpanded"></slot>\n </SplitterPanel>\n</template>\n\n<script lang="ts" setup>\n import { SplitterPanel, useForwardPropsEmits } from "radix-vue";\n import type { SplitterPanelEmits, SplitterPanelProps } from "radix-vue";\n\n const props = withDefaults(defineProps<SplitterPanelProps>(), {});\n\n const emit = defineEmits<SplitterPanelEmits>();\n\n const forwarded = useForwardPropsEmits(props, emit);\n</script>\n',
|
|
1856
1876
|
},
|
|
1857
1877
|
{
|
|
1858
|
-
fileName: "
|
|
1878
|
+
fileName: "Splitter/Handle.vue",
|
|
1859
1879
|
dirPath: "components/UI",
|
|
1860
1880
|
fileContent:
|
|
1861
|
-
'<template>\
|
|
1881
|
+
'<template>\n <SplitterResizeHandle v-bind="forwarded" :class="styles({ class: props.class })">\n <slot>\n <div\n v-if="withHandle"\n class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border"\n >\n <Icon :name="icon" class="h-2.5 w-2.5" />\n </div>\n </slot>\n </SplitterResizeHandle>\n</template>\n\n<script lang="ts" setup>\n import { SplitterResizeHandle, useForwardPropsEmits } from "radix-vue";\n import type { SplitterResizeHandleEmits, SplitterResizeHandleProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n SplitterResizeHandleProps & {\n direction?: "horizontal" | "vertical";\n class?: any;\n withHandle?: boolean;\n icon?: string;\n }\n >(),\n {\n direction: "horizontal",\n icon: "lucide:grip-vertical",\n }\n );\n\n const emit = defineEmits<SplitterResizeHandleEmits>();\n\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "withHandle", "icon"), emit);\n\n const styles = tv({\n base: "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90",\n });\n</script>\n',
|
|
1862
1882
|
},
|
|
1863
1883
|
],
|
|
1864
1884
|
utils: [],
|
|
@@ -2260,7 +2280,7 @@ export default [
|
|
|
2260
2280
|
fileName: "Vee/Input.vue",
|
|
2261
2281
|
dirPath: "components/UI",
|
|
2262
2282
|
fileContent:
|
|
2263
|
-
'<template>\n <div class="w-full">\n <UiLabel\n :for="inputId"\n v-if="label"\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n >{{ label }}</UiLabel\n >\n <div class="relative">\n <slot name="icon">\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\n <Icon :name="icon" v-if="icon" class="h-4 w-4 text-muted-foreground/70" />\n </span>\n </slot>\n <UiInput\n :type="type"\n v-model="value"\n @blur="handleBlur"\n :id="inputId"\n :name="name"\n :disabled="disabled"\n v-bind="$attrs"\n :class="[hasIcon && \'pl-9\']"\n :placeholder="placeholder"\n />\n </div>\n <TransitionSlide group tag="div">\n <p key="hint" class="mt-1.5 text-sm text-muted-foreground" v-if="hint && !errorMessage">\n {{ hint }}\n </p>\n\n <p key="errorMessage" class="mt-1.5 text-sm text-destructive" v-if="errorMessage">\n {{ errorMessage }}\n </p>\n </TransitionSlide>\n </div>\n</template>\n\n<script lang="ts" setup>\n import { useId } from "radix-vue";\n\n const props = defineProps<{\n label?: string;\n icon?: string;\n hint?: string;\n disabled?: boolean;\n modelValue?: string;\n name?: string;\n id?: string;\n rules?: any;\n validateOnMount?: boolean;\n type?: string;\n placeholder?: string;\n }>();\n\n defineOptions({ inheritAttrs: false });\n\n const inputId = useId(props.id);\n\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\n\n const { errorMessage, value, handleBlur } = useField(() => props.name || inputId, props.rules, {\n initialValue: props.modelValue,\n label: props.label,\n validateOnMount: props.validateOnMount,\n syncVModel: true,\n });\n</script>\n',
|
|
2283
|
+
'<template>\n <div class="w-full">\n <UiLabel\n :for="inputId"\n v-if="label"\n :hint="labelHint"\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n >{{ label }}</UiLabel\n >\n <div class="relative">\n <slot name="icon">\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\n <Icon :name="icon" v-if="icon" class="h-4 w-4 text-muted-foreground/70" />\n </span>\n </slot>\n <UiInput\n :type="type"\n v-model="value"\n @blur="handleBlur"\n :id="inputId"\n :name="name"\n :disabled="disabled"\n v-bind="$attrs"\n :class="[hasIcon && \'pl-9\']"\n :placeholder="placeholder"\n />\n </div>\n <TransitionSlide group tag="div">\n <p key="hint" class="mt-1.5 text-sm text-muted-foreground" v-if="hint && !errorMessage">\n {{ hint }}\n </p>\n\n <p key="errorMessage" class="mt-1.5 text-sm text-destructive" v-if="errorMessage">\n {{ errorMessage }}\n </p>\n </TransitionSlide>\n </div>\n</template>\n\n<script lang="ts" setup>\n import { useId } from "radix-vue";\n\n const props = defineProps<{\n label?: string;\n labelHint?: string;\n icon?: string;\n hint?: string;\n disabled?: boolean;\n modelValue?: string;\n name?: string;\n id?: string;\n rules?: any;\n validateOnMount?: boolean;\n type?: string;\n placeholder?: string;\n }>();\n\n defineOptions({ inheritAttrs: false });\n\n const inputId = useId(props.id);\n\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\n\n const { errorMessage, value, handleBlur } = useField(() => props.name || inputId, props.rules, {\n initialValue: props.modelValue,\n label: props.label,\n validateOnMount: props.validateOnMount,\n syncVModel: true,\n });\n</script>\n',
|
|
2264
2284
|
},
|
|
2265
2285
|
],
|
|
2266
2286
|
utils: [],
|