ui-thing 0.1.11 → 0.1.13
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 +34 -3
- package/dist/index.js +1222 -1036
- package/dist/index.js.map +1 -1
- package/package.json +6 -6
- package/src/comps.ts +221 -181
package/src/comps.ts
CHANGED
|
@@ -8,7 +8,7 @@ export default [
|
|
|
8
8
|
fileName: "Accordion/Accordion.vue",
|
|
9
9
|
dirPath: "components/UI",
|
|
10
10
|
fileContent:
|
|
11
|
-
'<template>\n <AccordionRoot v-bind="forwarded">\n <slot :items="items">\n <template v-for="(item, i) in items" :key="i">\n <UiAccordionItem :disabled="item.disabled" :value="item.value">\n <slot name="header" :items="items">\n <UiAccordionHeader>\n <slot name="trigger" :items="items">\n <UiAccordionTrigger :title="item.title" :icon="item.icon" />\n </slot>\n </UiAccordionHeader>\n </slot>\n <slot name="content" :items="items">\n <UiAccordionContent :content="item.content"
|
|
11
|
+
'<template>\n <AccordionRoot v-bind="forwarded">\n <slot :items="items">\n <template v-for="(item, i) in items" :key="i">\n <UiAccordionItem :disabled="item.disabled" :value="item.value">\n <slot name="header" :items="items">\n <UiAccordionHeader>\n <slot name="trigger" :items="items">\n <UiAccordionTrigger :title="item.title" :icon="item.icon" />\n </slot>\n </UiAccordionHeader>\n </slot>\n <slot name="content" :items="items">\n <UiAccordionContent :content="item.content" />\n </slot>\n </UiAccordionItem>\n </template>\n </slot>\n </AccordionRoot>\n</template>\n\n<script setup lang="ts">\n import { AccordionRoot, useForwardPropsEmits } from "radix-vue";\n import type { AccordionRootEmits, AccordionRootProps } from "radix-vue";\n\n export interface AccordionItem {\n title?: string;\n content?: string;\n value: string;\n disabled?: boolean;\n icon?: string;\n }\n\n const props = withDefaults(\n defineProps<\n AccordionRootProps & {\n items?: AccordionItem[];\n }\n >(),\n { type: "single", collapsible: true, items: () => [] }\n );\n\n const emits = defineEmits<AccordionRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "items"), emits);\n</script>\n',
|
|
12
12
|
},
|
|
13
13
|
{
|
|
14
14
|
fileName: "Accordion/Content.vue",
|
|
@@ -20,19 +20,19 @@ export default [
|
|
|
20
20
|
fileName: "Accordion/Header.vue",
|
|
21
21
|
dirPath: "components/UI",
|
|
22
22
|
fileContent:
|
|
23
|
-
'<template>\n <AccordionHeader v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot
|
|
23
|
+
'<template>\n <AccordionHeader v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot/>\n </AccordionHeader>\n</template>\n\n<script lang="ts" setup>\n import { AccordionHeader } from "radix-vue";\n import type { AccordionHeaderProps } from "radix-vue";\n\n const props = defineProps<\n AccordionHeaderProps & {\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "flex",\n });\n</script>\n',
|
|
24
24
|
},
|
|
25
25
|
{
|
|
26
26
|
fileName: "Accordion/Item.vue",
|
|
27
27
|
dirPath: "components/UI",
|
|
28
28
|
fileContent:
|
|
29
|
-
'<template>\n <AccordionItem v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot
|
|
29
|
+
'<template>\n <AccordionItem v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot />\n </AccordionItem>\n</template>\n\n<script setup lang="ts">\n import { AccordionItem } from "radix-vue";\n import type { AccordionItemProps } from "radix-vue";\n\n const props = defineProps<\n AccordionItemProps & {\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "border-b",\n });\n</script>\n',
|
|
30
30
|
},
|
|
31
31
|
{
|
|
32
32
|
fileName: "Accordion/Trigger.vue",
|
|
33
33
|
dirPath: "components/UI",
|
|
34
34
|
fileContent:
|
|
35
|
-
'<template>\n <AccordionTrigger\n v-bind="reactiveOmit(props, \'class\', \'icon\', \'title\')"\n :class="styles({ class: props.class })"\n >\n <slot :props="props">\n {{ title }}\n </slot>\n <slot name="icon" :props="props">\n <Icon v-if="icon" :name="icon" class="h-4 w-4 shrink-0 transition-transform duration-200" />\n </slot>\n </AccordionTrigger>\n</template>\n\n<script lang="ts" setup>\n import { AccordionTrigger } from "radix-vue";\n import type { AccordionTriggerProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n AccordionTriggerProps & {\n class?: any;\n title?: string;\n icon?: string;\n }\n >(),\n {\n icon: "lucide:chevron-down",\n }\n );\n\n const styles = tv({\n base: "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [&[data-state=open]>svg]:rotate-180",\n });\n</script>\n',
|
|
35
|
+
'<template>\n <AccordionTrigger\n v-bind="reactiveOmit(props, \'class\', \'icon\', \'title\')"\n :class="styles({ class: props.class })"\n >\n <slot :props="props">\n {{ title }}\n </slot>\n <slot name="icon" :props="props">\n <Icon v-if="icon" :name="icon" class="h-4 w-4 shrink-0 transition-transform duration-200" />\n </slot>\n </AccordionTrigger>\n</template>\n\n<script lang="ts" setup>\n import { AccordionTrigger } from "radix-vue";\n import type { AccordionTriggerProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n AccordionTriggerProps & {\n class?: any;\n title?: string;\n icon?: string;\n }\n >(),\n {\n class: undefined,\n title: "",\n icon: "lucide:chevron-down",\n }\n );\n\n const styles = tv({\n base: "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [&[data-state=open]>svg]:rotate-180",\n });\n</script>\n',
|
|
36
36
|
},
|
|
37
37
|
],
|
|
38
38
|
utils: [],
|
|
@@ -48,19 +48,19 @@ export default [
|
|
|
48
48
|
fileName: "Alert/Alert.vue",
|
|
49
49
|
dirPath: "components/UI",
|
|
50
50
|
fileContent:
|
|
51
|
-
'<template>\n <div :class="styles({ variant: variant, class: props.class })"
|
|
51
|
+
'<template>\n <div v-if="shown" :class="styles({ variant: variant, class: props.class })">\n <slot :props="props" name="icon">\n <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n </slot>\n <div>\n <slot :props="props">\n <UiAlertTitle v-if="title" :title="title" />\n <UiAlertDescription v-if="description" :description="description" />\n </slot>\n </div>\n </div>\n</template>\n\n<script lang="ts" setup>\n const props = withDefaults(\n defineProps<{\n /** Custom class to add to the `Alert` parent */\n class?: any;\n /**\n * Whether or not the `Alert` is shown.\n * @default true\n */\n modelValue?: boolean;\n /** The variant of the `Alert` */\n variant?: VariantProps<typeof styles>["variant"];\n /** The title that is passed to the `AlertTitle` component */\n title?: string;\n /** The description that is passed to the `AlertDescription` component */\n description?: string;\n /** The icon that should be displayed*/\n icon?: string;\n }>(),\n {\n modelValue: true,\n variant: "default",\n title: undefined,\n description: undefined,\n icon: undefined,\n class: undefined,\n }\n );\n\n const emit = defineEmits(["update:modelValue"]);\n const shown = useVModel(props, "modelValue", emit, { defaultValue: true });\n\n const styles = tv({\n base: "relative flex w-full gap-3 rounded-lg border p-4",\n variants: {\n variant: {\n default: "bg-background text-foreground",\n destructive:\n "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",\n },\n },\n defaultVariants: {\n variant: "default",\n },\n });\n</script>\n',
|
|
52
52
|
},
|
|
53
53
|
{
|
|
54
54
|
fileName: "Alert/Description.vue",
|
|
55
55
|
dirPath: "components/UI",
|
|
56
56
|
fileContent:
|
|
57
|
-
'<template>\n <Primitive\n v-bind="reactiveOmit(props, \'description\', \'class\')"\n :class="styles({ class: props.class })"\n >\n <slot>{{ description }}</slot>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class to add to the parent */\n class?: any;\n /** The description text that should be displayed */\n description?: string;\n }\n >(),\n { as: "div" }\n );\n\n const styles = tv({\n base: "text-sm [&_p]:leading-relaxed",\n });\n</script>\n',
|
|
57
|
+
'<template>\n <Primitive\n v-bind="reactiveOmit(props, \'description\', \'class\')"\n :class="styles({ class: props.class })"\n >\n <slot>{{ description }}</slot>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class to add to the parent */\n class?: any;\n /** The description text that should be displayed */\n description?: string;\n }\n >(),\n { as: "div", class: undefined, description: undefined }\n );\n\n const styles = tv({\n base: "text-sm [&_p]:leading-relaxed",\n });\n</script>\n',
|
|
58
58
|
},
|
|
59
59
|
{
|
|
60
60
|
fileName: "Alert/Title.vue",
|
|
61
61
|
dirPath: "components/UI",
|
|
62
62
|
fileContent:
|
|
63
|
-
'<template>\n <Primitive v-bind="reactiveOmit(props, \'class\', \'title\')" :class="styles({ class: props.class })">\n <slot>{{ title }}</slot>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class to add to the parent */\n class?: any;\n /** The title text that should be displayed */\n title?: string;\n }\n >(),\n { as: "h5" }\n );\n\n const styles = tv({\n base: "mb-1 font-medium leading-none tracking-tight",\n });\n</script>\n',
|
|
63
|
+
'<template>\n <Primitive v-bind="reactiveOmit(props, \'class\', \'title\')" :class="styles({ class: props.class })">\n <slot>{{ title }}</slot>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class to add to the parent */\n class?: any;\n /** The title text that should be displayed */\n title?: string;\n }\n >(),\n { as: "h5", class: undefined, title: undefined }\n );\n\n const styles = tv({\n base: "mb-1 font-medium leading-none tracking-tight",\n });\n</script>\n',
|
|
64
64
|
},
|
|
65
65
|
],
|
|
66
66
|
utils: [],
|
|
@@ -84,7 +84,7 @@ export default [
|
|
|
84
84
|
fileName: "AlertDialog/Action.vue",
|
|
85
85
|
dirPath: "components/UI",
|
|
86
86
|
fileContent:
|
|
87
|
-
'<template>\n <AlertDialogAction\n v-bind="reactiveOmit(props, \'class\', \'text\', \'variant\', \'size\')"\n :class="buttonStyles({ variant, size, disabled, class: props.class })"\n >\n <slot>{{ text }} </slot>\n </AlertDialogAction>\n</template>\n\n<script lang="ts" setup>\n import { AlertDialogAction } from "radix-vue";\n import type { AlertDialogActionProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n AlertDialogActionProps & {\n /** Action to perform when the button is clicked */\n onClick?: () => void;\n /** Text to display in the button */\n text?: string;\n /** Custom class(es) to add to the button */\n class?: any;\n /** Whether the button is disabled */\n disabled?: boolean;\n /** The button\'s visual variant */\n variant?: VariantProps<typeof buttonStyles>["variant"];\n /** The button\'s visual size */\n size?: VariantProps<typeof buttonStyles>["size"];\n }\n >(),\n {\n text: "Continue",\n variant: "default",\n }\n );\n</script>\n',
|
|
87
|
+
'<template>\n <AlertDialogAction\n v-bind="reactiveOmit(props, \'class\', \'text\', \'variant\', \'size\')"\n :class="buttonStyles({ variant, size, disabled, class: props.class })"\n >\n <slot>{{ text }} </slot>\n </AlertDialogAction>\n</template>\n\n<script lang="ts" setup>\n import { AlertDialogAction } from "radix-vue";\n import type { AlertDialogActionProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n AlertDialogActionProps & {\n /** Action to perform when the button is clicked */\n onClick?: () => void;\n /** Text to display in the button */\n text?: string;\n /** Custom class(es) to add to the button */\n class?: any;\n /** Whether the button is disabled */\n disabled?: boolean;\n /** The button\'s visual variant */\n variant?: VariantProps<typeof buttonStyles>["variant"];\n /** The button\'s visual size */\n size?: VariantProps<typeof buttonStyles>["size"];\n }\n >(),\n {\n text: "Continue",\n variant: "default",\n size: "default",\n class: undefined,\n onClick: undefined,\n }\n );\n</script>\n',
|
|
88
88
|
},
|
|
89
89
|
{
|
|
90
90
|
fileName: "AlertDialog/AlertDialog.vue",
|
|
@@ -96,13 +96,13 @@ export default [
|
|
|
96
96
|
fileName: "AlertDialog/Cancel.vue",
|
|
97
97
|
dirPath: "components/UI",
|
|
98
98
|
fileContent:
|
|
99
|
-
'<template>\n <AlertDialogCancel\n v-bind="reactiveOmit(props, \'class\', \'text\', \'variant\', \'size\')"\n :class="buttonStyles({ variant, size, disabled, class: props.class })"\n >\n <slot>{{ text }}</slot>\n </AlertDialogCancel>\n</template>\n\n<script lang="ts" setup>\n import { AlertDialogCancel } from "radix-vue";\n import type { AlertDialogCancelProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n AlertDialogCancelProps & {\n /** Action to perform when the button is clicked */\n onClick?: () => void;\n /** Text to display in the button */\n text?: string;\n /** Custom class(es) to add to the button */\n class?: any;\n /** Whether the button is disabled */\n disabled?: boolean;\n /** The button\'s visual variant */\n variant?: VariantProps<typeof buttonStyles>["variant"];\n /** The button\'s visual size */\n size?: VariantProps<typeof buttonStyles>["size"];\n }\n >(),\n {\n text: "Cancel",\n variant: "outline",\n }\n );\n</script>\n',
|
|
99
|
+
'<template>\n <AlertDialogCancel\n v-bind="reactiveOmit(props, \'class\', \'text\', \'variant\', \'size\')"\n :class="buttonStyles({ variant, size, disabled, class: props.class })"\n >\n <slot>{{ text }}</slot>\n </AlertDialogCancel>\n</template>\n\n<script lang="ts" setup>\n import { AlertDialogCancel } from "radix-vue";\n import type { AlertDialogCancelProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n AlertDialogCancelProps & {\n /** Action to perform when the button is clicked */\n onClick?: () => void;\n /** Text to display in the button */\n text?: string;\n /** Custom class(es) to add to the button */\n class?: any;\n /** Whether the button is disabled */\n disabled?: boolean;\n /** The button\'s visual variant */\n variant?: VariantProps<typeof buttonStyles>["variant"];\n /** The button\'s visual size */\n size?: VariantProps<typeof buttonStyles>["size"];\n }\n >(),\n {\n text: "Cancel",\n variant: "outline",\n size: "default",\n class: undefined,\n onClick: undefined,\n }\n );\n</script>\n',
|
|
100
100
|
},
|
|
101
101
|
{
|
|
102
102
|
fileName: "AlertDialog/Content.vue",
|
|
103
103
|
dirPath: "components/UI",
|
|
104
104
|
fileContent:
|
|
105
|
-
'<template>\n <UiAlertDialogPortal :to="to">\n <slot name="overlay">\n <UiAlertDialogOverlay />\n </slot>\n <AlertDialogContent\n :class="styles({ class: props.class })"\n v-bind="{ ...forwarded, ...$attrs }"\n >\n <slot
|
|
105
|
+
'<template>\n <UiAlertDialogPortal :to="to">\n <slot name="overlay">\n <UiAlertDialogOverlay />\n </slot>\n <AlertDialogContent\n :class="styles({ class: props.class })"\n v-bind="{ ...forwarded, ...$attrs }"\n >\n <slot/>\n </AlertDialogContent>\n </UiAlertDialogPortal>\n</template>\n\n<script lang="ts" setup>\n import { AlertDialogContent, useForwardPropsEmits } from "radix-vue";\n import type { AlertDialogContentEmits, AlertDialogContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = defineProps<\n AlertDialogContentProps & {\n /** Custom class(es) to add to the `AlertDialogContent` */\n class?: any;\n /** The element to render the portal into */\n to?: string | HTMLElement;\n }\n >();\n const emit = defineEmits<AlertDialogContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "to"), emit);\n\n const styles = tv({\n base: "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",\n });\n</script>\n',
|
|
106
106
|
},
|
|
107
107
|
{
|
|
108
108
|
fileName: "AlertDialog/Description.vue",
|
|
@@ -114,13 +114,13 @@ export default [
|
|
|
114
114
|
fileName: "AlertDialog/Footer.vue",
|
|
115
115
|
dirPath: "components/UI",
|
|
116
116
|
fileContent:
|
|
117
|
-
'<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot
|
|
117
|
+
'<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot />\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to the element */\n class?: any;\n }\n >(),\n {\n as: "div",\n class: undefined,\n }\n );\n const styles = tv({\n base: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",\n });\n</script>\n',
|
|
118
118
|
},
|
|
119
119
|
{
|
|
120
120
|
fileName: "AlertDialog/Header.vue",
|
|
121
121
|
dirPath: "components/UI",
|
|
122
122
|
fileContent:
|
|
123
|
-
'<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot
|
|
123
|
+
'<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot />\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to the element */\n class?: any;\n }\n >(),\n {\n as: "div",\n class: undefined,\n }\n );\n\n const styles = tv({\n base: "flex flex-col gap-2 text-center sm:text-left",\n });\n</script>\n',
|
|
124
124
|
},
|
|
125
125
|
{
|
|
126
126
|
fileName: "AlertDialog/Overlay.vue",
|
|
@@ -132,7 +132,7 @@ export default [
|
|
|
132
132
|
fileName: "AlertDialog/Portal.vue",
|
|
133
133
|
dirPath: "components/UI",
|
|
134
134
|
fileContent:
|
|
135
|
-
'<template>\n <AlertDialogPortal v-bind="props">\n <slot
|
|
135
|
+
'<template>\n <AlertDialogPortal v-bind="props">\n <slot/>\n </AlertDialogPortal>\n</template>\n\n<script lang="ts" setup>\n import { AlertDialogPortal } from "radix-vue";\n import type { AlertDialogPortalProps } from "radix-vue";\n\n const props = defineProps<AlertDialogPortalProps>();\n</script>\n',
|
|
136
136
|
},
|
|
137
137
|
{
|
|
138
138
|
fileName: "AlertDialog/Title.vue",
|
|
@@ -144,7 +144,7 @@ export default [
|
|
|
144
144
|
fileName: "AlertDialog/Trigger.vue",
|
|
145
145
|
dirPath: "components/UI",
|
|
146
146
|
fileContent:
|
|
147
|
-
'<template>\n <AlertDialogTrigger v-bind="props">\n <slot
|
|
147
|
+
'<template>\n <AlertDialogTrigger v-bind="props">\n <slot />\n </AlertDialogTrigger>\n</template>\n\n<script lang="ts" setup>\n import { AlertDialogTrigger } from "radix-vue";\n import type { AlertDialogTriggerProps } from "radix-vue";\n\n const props = defineProps<AlertDialogTriggerProps>();\n</script>\n',
|
|
148
148
|
},
|
|
149
149
|
],
|
|
150
150
|
composables: [],
|
|
@@ -174,7 +174,7 @@ export default [
|
|
|
174
174
|
fileName: "Autocomplete/Anchor.vue",
|
|
175
175
|
dirPath: "components/UI",
|
|
176
176
|
fileContent:
|
|
177
|
-
'<template>\n <ComboboxAnchor v-bind="props">\n <slot
|
|
177
|
+
'<template>\n <ComboboxAnchor v-bind="props">\n <slot/>\n </ComboboxAnchor>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxAnchor } from "radix-vue";\n import type { ComboboxAnchorProps } from "radix-vue";\n\n const props = defineProps<ComboboxAnchorProps>();\n</script>\n',
|
|
178
178
|
},
|
|
179
179
|
{
|
|
180
180
|
fileName: "Autocomplete/Arrow.vue",
|
|
@@ -186,31 +186,31 @@ export default [
|
|
|
186
186
|
fileName: "Autocomplete/Autocomplete.vue",
|
|
187
187
|
dirPath: "components/UI",
|
|
188
188
|
fileContent:
|
|
189
|
-
'<template>\n <ComboboxRoot v-bind="forwarded">\n <slot
|
|
189
|
+
'<template>\n <ComboboxRoot v-bind="forwarded">\n <slot/>\n </ComboboxRoot>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxRoot, useForwardPropsEmits } from "radix-vue";\n import type { ComboboxRootEmits, ComboboxRootProps } from "radix-vue";\n\n const props = defineProps<ComboboxRootProps>();\n\n const emits = defineEmits<ComboboxRootEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
|
|
190
190
|
},
|
|
191
191
|
{
|
|
192
192
|
fileName: "Autocomplete/Cancel.vue",
|
|
193
193
|
dirPath: "components/UI",
|
|
194
194
|
fileContent:
|
|
195
|
-
'<template>\n <ComboboxCancel v-bind="props">\n <slot
|
|
195
|
+
'<template>\n <ComboboxCancel v-bind="props">\n <slot/>\n </ComboboxCancel>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxCancel } from "radix-vue";\n import type { ComboboxCancelProps } from "radix-vue";\n\n const props = defineProps<ComboboxCancelProps>();\n</script>\n',
|
|
196
196
|
},
|
|
197
197
|
{
|
|
198
198
|
fileName: "Autocomplete/Content.vue",
|
|
199
199
|
dirPath: "components/UI",
|
|
200
200
|
fileContent:
|
|
201
|
-
'<template>\n <ComboboxContent v-bind="forwarded" :class="styles({ class: props.class })">\n <UiAutocompleteViewport>\n <slot
|
|
201
|
+
'<template>\n <ComboboxContent v-bind="forwarded" :class="styles({ class: props.class })">\n <UiAutocompleteViewport>\n <slot />\n </UiAutocompleteViewport>\n </ComboboxContent>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxContent, useForwardPropsEmits } from "radix-vue";\n import type { ComboboxContentEmits, ComboboxContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n const props = withDefaults(\n defineProps<\n ComboboxContentProps & {\n class?: any;\n }\n >(),\n {\n position: "popper",\n bodyLock: true,\n side: "bottom",\n sideOffset: 8,\n class: undefined,\n }\n );\n\n const emits = defineEmits<ComboboxContentEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n\n const styles = tv({\n base: "z-50 w-[var(--radix-combobox-trigger-width)] min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-accent-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n</script>\n',
|
|
202
202
|
},
|
|
203
203
|
{
|
|
204
204
|
fileName: "Autocomplete/Empty.vue",
|
|
205
205
|
dirPath: "components/UI",
|
|
206
206
|
fileContent:
|
|
207
|
-
'<template>\n <ComboboxEmpty v-bind="props">\n <slot
|
|
207
|
+
'<template>\n <ComboboxEmpty v-bind="props">\n <slot/>\n </ComboboxEmpty>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxEmpty } from "radix-vue";\n import type { ComboboxEmptyProps } from "radix-vue";\n\n const props = defineProps<ComboboxEmptyProps>();\n</script>\n',
|
|
208
208
|
},
|
|
209
209
|
{
|
|
210
210
|
fileName: "Autocomplete/Group.vue",
|
|
211
211
|
dirPath: "components/UI",
|
|
212
212
|
fileContent:
|
|
213
|
-
'<template>\n <ComboboxGroup v-bind="props">\n <slot
|
|
213
|
+
'<template>\n <ComboboxGroup v-bind="props">\n <slot/>\n </ComboboxGroup>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxGroup } from "radix-vue";\n import type { ComboboxGroupProps } from "radix-vue";\n\n const props = defineProps<ComboboxGroupProps>();\n</script>\n',
|
|
214
214
|
},
|
|
215
215
|
{
|
|
216
216
|
fileName: "Autocomplete/Input.vue",
|
|
@@ -222,7 +222,7 @@ export default [
|
|
|
222
222
|
fileName: "Autocomplete/Item.vue",
|
|
223
223
|
dirPath: "components/UI",
|
|
224
224
|
fileContent:
|
|
225
|
-
'<template>\n <ComboboxItem v-bind="forwarded" :class="styles({ class: props.class })">\n <slot name="icon">\n <span class="absolute inset-y-0 left-2 flex items-center justify-center">\n <UiAutocompleteItemIndicator class="animate-in fade-in-0 zoom-in-0" :icon="icon" />\n </span>\n </slot>\n <slot
|
|
225
|
+
'<template>\n <ComboboxItem v-bind="forwarded" :class="styles({ class: props.class })">\n <slot name="icon">\n <span class="absolute inset-y-0 left-2 flex items-center justify-center">\n <UiAutocompleteItemIndicator class="animate-in fade-in-0 zoom-in-0" :icon="icon" />\n </span>\n </slot>\n <slot/>\n </ComboboxItem>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxItem, useForwardPropsEmits } from "radix-vue";\n import type { ComboboxItemEmits, ComboboxItemProps } from "radix-vue";\n\n const props = defineProps<\n ComboboxItemProps & {\n class?: any;\n icon?: string;\n }\n >();\n\n const emits = defineEmits<{\n select: ComboboxItemEmits["select"];\n }>();\n const forwarded = useForwardPropsEmits(props, emits);\n\n const styles = tv({\n base: "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 pl-9 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",\n });\n</script>\n',
|
|
226
226
|
},
|
|
227
227
|
{
|
|
228
228
|
fileName: "Autocomplete/ItemIndicator.vue",
|
|
@@ -234,31 +234,31 @@ export default [
|
|
|
234
234
|
fileName: "Autocomplete/Label.vue",
|
|
235
235
|
dirPath: "components/UI",
|
|
236
236
|
fileContent:
|
|
237
|
-
'<template>\n <ComboboxLabel :class="styles({ class: props.class })" v-bind="props">\n <slot
|
|
237
|
+
'<template>\n <ComboboxLabel :class="styles({ class: props.class })" v-bind="props">\n <slot/>\n </ComboboxLabel>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxLabel } from "radix-vue";\n import type { ComboboxLabelProps } from "radix-vue";\n\n const props = defineProps<\n ComboboxLabelProps & {\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "px-2 py-1.5 pl-9 text-sm font-medium text-muted-foreground",\n });\n</script>\n',
|
|
238
238
|
},
|
|
239
239
|
{
|
|
240
240
|
fileName: "Autocomplete/Portal.vue",
|
|
241
241
|
dirPath: "components/UI",
|
|
242
242
|
fileContent:
|
|
243
|
-
'<template>\n <ComboboxPortal v-bind="props">\n <slot
|
|
243
|
+
'<template>\n <ComboboxPortal v-bind="props">\n <slot/>\n </ComboboxPortal>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxPortal } from "radix-vue";\n import type { ComboboxPortalProps } from "radix-vue";\n\n const props = defineProps<ComboboxPortalProps>();\n</script>\n',
|
|
244
244
|
},
|
|
245
245
|
{
|
|
246
246
|
fileName: "Autocomplete/Separator.vue",
|
|
247
247
|
dirPath: "components/UI",
|
|
248
248
|
fileContent:
|
|
249
|
-
'<template>\n <ComboboxSeparator v-bind="props">\n <slot
|
|
249
|
+
'<template>\n <ComboboxSeparator v-bind="props">\n <slot/>\n </ComboboxSeparator>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxSeparator } from "radix-vue";\n import type { ComboboxSeparatorProps } from "radix-vue";\n\n const props = defineProps<ComboboxSeparatorProps>();\n</script>\n',
|
|
250
250
|
},
|
|
251
251
|
{
|
|
252
252
|
fileName: "Autocomplete/Trigger.vue",
|
|
253
253
|
dirPath: "components/UI",
|
|
254
254
|
fileContent:
|
|
255
|
-
'<template>\n <ComboboxTrigger v-bind="props">\n <slot
|
|
255
|
+
'<template>\n <ComboboxTrigger v-bind="props">\n <slot/>\n </ComboboxTrigger>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxTrigger } from "radix-vue";\n import type { ComboboxTriggerProps } from "radix-vue";\n\n const props = defineProps<ComboboxTriggerProps>();\n</script>\n',
|
|
256
256
|
},
|
|
257
257
|
{
|
|
258
258
|
fileName: "Autocomplete/Viewport.vue",
|
|
259
259
|
dirPath: "components/UI",
|
|
260
260
|
fileContent:
|
|
261
|
-
'<template>\n <ComboboxViewport v-bind="props">\n <slot
|
|
261
|
+
'<template>\n <ComboboxViewport v-bind="props">\n <slot/>\n </ComboboxViewport>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxViewport } from "radix-vue";\n import type { ComboboxViewportProps } from "radix-vue";\n\n const props = defineProps<ComboboxViewportProps>();\n</script>\n',
|
|
262
262
|
},
|
|
263
263
|
],
|
|
264
264
|
utils: [],
|
|
@@ -273,7 +273,7 @@ export default [
|
|
|
273
273
|
fileName: "Avatar/Avatar.vue",
|
|
274
274
|
dirPath: "components/UI",
|
|
275
275
|
fileContent:
|
|
276
|
-
'<template>\n <AvatarRoot :as="as" :as-child="asChild" :class="styles({ class: props.class })">\n <slot>\n <slot name="image">\n <UiAvatarImage\n
|
|
276
|
+
'<template>\n <AvatarRoot :as="as" :as-child="asChild" :class="styles({ class: props.class })">\n <slot>\n <slot name="image">\n <UiAvatarImage\n v-if="src"\n :src="src"\n :alt="alt"\n :class="imageClass"\n @loading-status-change="emits(\'loadingStatusChange\', $event)"\n />\n </slot>\n <slot name="fallback">\n <UiAvatarFallback :delay-ms="delayMs" :class="fallbackClass" :fallback="fallback" />\n </slot>\n </slot>\n </AvatarRoot>\n</template>\n\n<script lang="ts" setup>\n import { AvatarRoot } from "radix-vue";\n import type { AvatarImageEmits, AvatarImageProps, AvatarRootProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n AvatarRootProps &\n Partial<AvatarImageProps> & {\n class?: any;\n imageClass?: any;\n fallbackClass?: any;\n alt?: string;\n fallback?: string;\n delayMs?: number;\n }\n >(),\n {\n class: undefined,\n imageClass: undefined,\n fallbackClass: undefined,\n alt: undefined,\n fallback: undefined,\n delayMs: undefined,\n }\n );\n\n const emits = defineEmits<AvatarImageEmits>();\n const styles = tv({\n base: "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",\n });\n</script>\n',
|
|
277
277
|
},
|
|
278
278
|
{
|
|
279
279
|
fileName: "Avatar/Fallback.vue",
|
|
@@ -285,7 +285,7 @@ export default [
|
|
|
285
285
|
fileName: "Avatar/Image.vue",
|
|
286
286
|
dirPath: "components/UI",
|
|
287
287
|
fileContent:
|
|
288
|
-
'<template>\n <AvatarImage v-bind="
|
|
288
|
+
'<template>\n <AvatarImage v-bind="forwarded" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n import { AvatarImage, useForwardPropsEmits } from "radix-vue";\n import type { AvatarImageEmits, AvatarImageProps } from "radix-vue";\n\n const props = defineProps<\n AvatarImageProps & {\n /** The alt text for the image */\n alt?: string;\n /** Custom class(es) to add to the element */\n class?: any;\n }\n >();\n const emits = defineEmits<AvatarImageEmits>();\n\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "aspect-square h-full w-full object-cover",\n });\n</script>\n',
|
|
289
289
|
},
|
|
290
290
|
],
|
|
291
291
|
utils: [],
|
|
@@ -300,7 +300,7 @@ export default [
|
|
|
300
300
|
fileName: "Badge.vue",
|
|
301
301
|
dirPath: "components/UI",
|
|
302
302
|
fileContent:
|
|
303
|
-
'<template>\n <component\n :is="elementType"\n
|
|
303
|
+
'<template>\n <component\n :is="elementType"\n :to="to"\n :href="href"\n :disabled="disabled"\n :class="badgeVariants({ disabled, variant, class: props.class })"\n @click="onClick"\n >\n <slot/>\n </component>\n</template>\n\n<script lang="ts" setup>\n const badgeVariants = tv({\n base: "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",\n variants: {\n variant: {\n default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",\n secondary:\n "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",\n destructive:\n "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",\n outline: "text-foreground",\n },\n disabled: {\n true: "cursor-not-allowed opacity-50",\n },\n },\n defaultVariants: {\n variant: "default",\n },\n });\n\n type BadgeProps = VariantProps<typeof badgeVariants>;\n\n const props = defineProps<{\n class?: any;\n variant?: BadgeProps["variant"];\n onClick?: () => void;\n to?: string;\n href?: string;\n disabled?: boolean;\n tag?: string;\n }>();\n\n const elementType = computed(() => {\n if (props.tag) return props.tag;\n if (props.href || props.to) return resolveComponent("NuxtLink");\n return props.tag || "div";\n });\n</script>\n',
|
|
304
304
|
},
|
|
305
305
|
],
|
|
306
306
|
utils: [],
|
|
@@ -315,7 +315,7 @@ export default [
|
|
|
315
315
|
fileName: "Breadcrumbs.vue",
|
|
316
316
|
dirPath: "components/UI",
|
|
317
317
|
fileContent:
|
|
318
|
-
'<template>\n <div :class="styles({ class: props.class })">\n <template v-for="(item, i) in items" :key="i">\n <div class="flex items-center gap-3">\n <div class="flex cursor-pointer items-center gap-2">\n <slot name="crumbIcon" :item="item" :index="i">\n <Icon\n v-if="item.icon"\n :name="item.icon"\n :class="[!isNotLastItem(i) && \'text-primary\']"\n />\n </slot>\n <slot :item="item" :
|
|
318
|
+
'<template>\n <div :class="styles({ class: props.class })">\n <template v-for="(item, i) in items" :key="i">\n <div class="flex items-center gap-3">\n <div class="flex cursor-pointer items-center gap-2">\n <slot name="crumbIcon" :item="item" :index="i">\n <Icon\n v-if="item.icon"\n :name="item.icon"\n :class="[!isNotLastItem(i) && \'text-primary\']"\n />\n </slot>\n <slot :item="item" :is-not-last-item="isNotLastItem" :index="i" name="link">\n <NuxtLink\n v-if="item.label"\n :to="!item?.disabled ? item.link : \'\'"\n :class="[\n isNotLastItem(i)\n ? \'text-muted-foreground hover:underline\'\n : \'font-semibold text-primary\',\n ]"\n class="text-sm text-foreground"\n @click="item?.click?.()"\n >{{ item.label }}</NuxtLink\n >\n </slot>\n </div>\n <slot name="separator" :item="item" :index="i">\n <Icon v-if="isNotLastItem(i)" :name="separator" class="h-3 w-3 text-muted-foreground" />\n </slot>\n </div>\n </template>\n </div>\n</template>\n\n<script setup lang="ts">\n export interface Crumbs {\n label: string;\n icon?: string;\n link?: string;\n disabled?: boolean;\n // eslint-disable-next-line @typescript-eslint/ban-types\n click?: Function;\n }\n const props = withDefaults(\n defineProps<{\n /**\n * The items to display in the breadcrumbs.\n */\n items?: Crumbs[];\n /**\n * The separator to use between each breadcrumb.\n */\n separator?: string;\n class?: any;\n }>(),\n {\n separator: "heroicons:chevron-right",\n items: () => [],\n class: undefined,\n }\n );\n\n const isNotLastItem = (index: number) => {\n return index !== props?.items?.length - 1;\n };\n\n const styles = tv({\n base: "flex w-full items-center gap-4",\n });\n</script>\n',
|
|
319
319
|
},
|
|
320
320
|
],
|
|
321
321
|
utils: [],
|
|
@@ -338,7 +338,7 @@ export default [
|
|
|
338
338
|
fileName: "Button.vue",
|
|
339
339
|
dirPath: "components/UI",
|
|
340
340
|
fileContent:
|
|
341
|
-
'<template>\n <component\n :is="elementType"\n :class="\n buttonStyles({\n disabled: disabled || loading,\n variant: variant,\n size: size,\n class: props.class,\n })\n "\n :disabled="disabled || loading"\n :to="to"\n :href="href"\n :type="type"\n @click="onClick"\n >\n <slot>{{ text }}</slot>\n </component>\n</template>\n\n<script setup lang="ts">\n import type { RouteLocationRaw } from "vue-router";\n\n type ButtonProps = VariantProps<typeof buttonStyles>;\n const props = withDefaults(\n defineProps<{\n /** The type fro the button */\n type?: "button" | "submit" | "reset";\n /** Whether the button is disabled */\n disabled?: boolean;\n /** Whether the button is loading */\n loading?: boolean;\n /** The action to perform when the button is clicked */\n onClick?: any;\n /** The location to navigate to when the button is clicked */\n to?: string | RouteLocationRaw;\n /** The location to navigate to when the button is clicked */\n href?: string;\n /** The element to render the button as */\n as?: string;\n /** Custom class(es) to add to parent element */\n class?: any;\n /** The variant of the button */\n variant?: ButtonProps["variant"];\n /** The size of the button */\n size?: ButtonProps["size"];\n /** The text to display in the button */\n text?: string;\n }>(),\n {\n type: "button",\n }\n );\n\n const elementType = computed(() => {\n if (props.as) return props.as;\n if (props.href || props.to) return resolveComponent("NuxtLink");\n return "button";\n });\n</script>\n',
|
|
341
|
+
'<template>\n <component\n :is="elementType"\n :class="\n buttonStyles({\n disabled: disabled || loading,\n variant: variant,\n size: size,\n class: props.class,\n })\n "\n :disabled="disabled || loading"\n :to="to"\n :href="href"\n :type="type"\n @click="onClick"\n >\n <slot>{{ text }}</slot>\n </component>\n</template>\n\n<script setup lang="ts">\n import type { RouteLocationRaw } from "vue-router";\n\n type ButtonProps = VariantProps<typeof buttonStyles>;\n const props = withDefaults(\n defineProps<{\n /** The type fro the button */\n type?: "button" | "submit" | "reset";\n /** Whether the button is disabled */\n disabled?: boolean;\n /** Whether the button is loading */\n loading?: boolean;\n /** The action to perform when the button is clicked */\n onClick?: any;\n /** The location to navigate to when the button is clicked */\n to?: string | RouteLocationRaw;\n /** The location to navigate to when the button is clicked */\n href?: string;\n /** The element to render the button as */\n as?: string;\n /** Custom class(es) to add to parent element */\n class?: any;\n /** The variant of the button */\n variant?: ButtonProps["variant"];\n /** The size of the button */\n size?: ButtonProps["size"];\n /** The text to display in the button */\n text?: string;\n }>(),\n {\n type: "button",\n onClick: undefined,\n to: undefined,\n href: undefined,\n as: undefined,\n class: undefined,\n text: undefined,\n variant: "default",\n size: "default",\n }\n );\n\n const elementType = computed(() => {\n if (props.as) return props.as;\n if (props.href || props.to) return resolveComponent("NuxtLink");\n return "button";\n });\n</script>\n',
|
|
342
342
|
},
|
|
343
343
|
],
|
|
344
344
|
composables: [],
|
|
@@ -355,7 +355,7 @@ export default [
|
|
|
355
355
|
fileName: "Calendar.vue",
|
|
356
356
|
dirPath: "components/UI",
|
|
357
357
|
fileContent:
|
|
358
|
-
'<template>\n <ClientOnly>\n <VCalendar\n :
|
|
358
|
+
'<template>\n <ClientOnly>\n <VCalendar\n :trim-weeks="props.trimWeeks || true"\n :is-dark="$colorMode.value == \'dark\'"\n v-bind="$attrs"\n >\n <template v-for="(_, slot) in $slots" #[slot]="scope">\n <slot :name="slot" v-bind="scope"/>\n </template>\n </VCalendar>\n </ClientOnly>\n</template>\n\n<script lang="ts" setup>\n import type { Calendar } from "v-calendar";\n\n defineOptions({ inheritAttrs: false });\n\n interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof Calendar>["$props"]> {}\n\n const props = defineProps<Props & { trimWeeks?: boolean }>();\n</script>\n\n<style>\n :root {\n --vc-font-family: var(--font-sans);\n --vc-rounded-full: var(--radius);\n --vc-font-bold: 500;\n --vc-font-semibold: 600;\n --vc-text-lg: 16px;\n }\n\n .vc-light,\n .vc-dark {\n --vc-bg: theme("colors.background");\n --vc-border: theme("colors.border");\n --vc-focus-ring: 0 0 0 3px hsl(var(--primary) / 30%);\n --vc-weekday-color: theme("colors.muted.foreground");\n --vc-popover-content-color: theme("colors.popover.foreground");\n --vc-hover-bg: theme("colors.accent.DEFAULT");\n --vc-popover-content-bg: theme("colors.popover.DEFAULT");\n --vc-popover-content-border: theme("colors.border");\n --vc-header-arrow-hover-bg: theme("colors.accent.DEFAULT");\n --vc-weeknumber-color: theme("colors.muted.foreground");\n --vc-nav-hover-bg: theme("colors.accent.DEFAULT");\n\n --vc-nav-item-active-color: theme("colors.primary.foreground");\n --vc-nav-item-active-bg: theme("colors.primary.DEFAULT");\n\n &.vc-attr,\n & .vc-attr {\n --vc-content-color: theme("colors.primary.DEFAULT");\n --vc-highlight-outline-bg: theme("colors.primary.DEFAULT");\n --vc-highlight-outline-border: theme("colors.primary.DEFAULT");\n --vc-highlight-outline-content-color: theme("colors.primary.foreground");\n --vc-highlight-light-bg: var(--vc-accent-200); /* Highlighted color between two dates */\n --vc-highlight-light-content-color: theme("colors.secondary.foreground");\n --vc-highlight-solid-bg: theme("colors.primary.DEFAULT");\n --vc-highlight-solid-content-color: theme("colors.primary.foreground");\n }\n }\n\n .vc-blue {\n --vc-accent-200: theme("colors.primary.DEFAULT / 20%");\n --vc-accent-400: theme("colors.primary.DEFAULT");\n --vc-accent-500: theme("colors.primary.DEFAULT");\n --vc-accent-600: theme("colors.primary.DEFAULT / 70%");\n }\n\n .dark {\n .vc-blue {\n --vc-accent-200: theme("colors.primary.DEFAULT / 20%");\n --vc-accent-400: theme("colors.primary.DEFAULT");\n --vc-accent-500: theme("colors.primary.DEFAULT / 70%");\n }\n }\n .vc-header .vc-title {\n @apply font-medium;\n }\n .vc-weekdays {\n @apply my-2 font-normal;\n }\n .vc-day-content,\n .vc-day,\n .vc-highlight {\n @apply h-9 w-9 rounded-md;\n }\n .vc-focus {\n @apply focus-within:shadow-none;\n }\n .vc-day {\n @apply mb-1.5;\n }\n\n .vc-base-icon {\n @apply h-4 w-4 stroke-1;\n }\n .vc-header .vc-arrow,\n .vc-nav-arrow {\n @apply h-7 w-7 rounded-md;\n border: 1px solid hsl(var(--border));\n }\n .vc-header .vc-prev,\n .vc-header .vc-next {\n @apply border;\n }\n .weekday-position-1 .vc-highlights {\n @apply rounded-l-md;\n }\n .weekday-position-7 .vc-highlights {\n @apply rounded-r-md;\n }\n .vc-highlight-bg-light {\n @apply bg-accent;\n }\n .vc-nav-item {\n @apply font-medium;\n }\n .vc-header .vc-title-wrapper {\n @apply decoration-accent-foreground/60 underline-offset-2 hover:underline;\n }\n .vc-highlights + .vc-day-content {\n @apply hover:bg-accent/5;\n }\n</style>\n',
|
|
359
359
|
},
|
|
360
360
|
],
|
|
361
361
|
utils: [],
|
|
@@ -370,7 +370,7 @@ export default [
|
|
|
370
370
|
fileName: "Card/Card.vue",
|
|
371
371
|
dirPath: "components/UI",
|
|
372
372
|
fileContent:
|
|
373
|
-
'<template>\n <Primitive :as="as" :as-child="asChild" :class="styles({ class: props.class })">\n <slot>\n <slot name="header">\n <UiCardHeader>\n <slot name="title">\n <UiCardTitle v-if="title || $slots.title" :title="title" />\n </slot>\n <slot name="description">\n <UiCardDescription\n v-if="description || $slots.description"\n :description="description"\n />\n </slot>\n </UiCardHeader>\n </slot>\n <slot
|
|
373
|
+
'<template>\n <Primitive :as="as" :as-child="asChild" :class="styles({ class: props.class })">\n <slot>\n <slot name="header">\n <UiCardHeader>\n <slot name="title">\n <UiCardTitle v-if="title || $slots.title" :title="title" />\n </slot>\n <slot name="description">\n <UiCardDescription\n v-if="description || $slots.description"\n :description="description"\n />\n </slot>\n </UiCardHeader>\n </slot>\n <slot v-if="content || $slots.content" name="content">\n <UiCardContent>\n <div v-html="content" />\n </UiCardContent>\n </slot>\n <slot name="footer" />\n </slot>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Title that should be displayed. Passed to the `CardTitle` component */\n title?: string;\n /** Description that should be displayed. Passed to the `CardDescription` component */\n description?: string;\n /** Content that should be displayed. Passed to the `CardContent` component */\n content?: string;\n /** Custom class(es) to add to the element */\n class?: any;\n }\n >(),\n {\n as: "div",\n title: undefined,\n description: undefined,\n content: undefined,\n class: undefined,\n }\n );\n\n const styles = tv({\n base: "rounded-lg border bg-card text-card-foreground shadow-sm",\n });\n</script>\n',
|
|
374
374
|
},
|
|
375
375
|
{
|
|
376
376
|
fileName: "Card/Content.vue",
|
|
@@ -388,13 +388,13 @@ export default [
|
|
|
388
388
|
fileName: "Card/Footer.vue",
|
|
389
389
|
dirPath: "components/UI",
|
|
390
390
|
fileContent:
|
|
391
|
-
'<template>\n <Primitive :class="styles({ class: props.class })" :as="as" :as-child="asChild">\n <slot
|
|
391
|
+
'<template>\n <Primitive :class="styles({ class: props.class })" :as="as" :as-child="asChild">\n <slot/>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to the element */\n class?: any;\n }\n >(),\n { as: "div" }\n );\n\n const styles = tv({\n base: "flex items-center p-6 ",\n });\n</script>\n',
|
|
392
392
|
},
|
|
393
393
|
{
|
|
394
394
|
fileName: "Card/Header.vue",
|
|
395
395
|
dirPath: "components/UI",
|
|
396
396
|
fileContent:
|
|
397
|
-
'<template>\n <Primitive :class="styles({ class: props.class })" :as="as" :as-child="asChild">\n <slot
|
|
397
|
+
'<template>\n <Primitive :class="styles({ class: props.class })" :as="as" :as-child="asChild">\n <slot/>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to the element */\n class?: any;\n }\n >(),\n { as: "div" }\n );\n\n const styles = tv({\n base: "flex flex-col space-y-1.5 p-6 [&+*]:pt-0",\n });\n</script>\n',
|
|
398
398
|
},
|
|
399
399
|
{
|
|
400
400
|
fileName: "Card/Title.vue",
|
|
@@ -436,19 +436,19 @@ export default [
|
|
|
436
436
|
fileName: "Collapsible/Collapsible.vue",
|
|
437
437
|
dirPath: "components/UI",
|
|
438
438
|
fileContent:
|
|
439
|
-
'<template>\n <CollapsibleRoot v-bind="forwarded">\n <slot
|
|
439
|
+
'<template>\n <CollapsibleRoot v-bind="forwarded">\n <slot/>\n </CollapsibleRoot>\n</template>\n\n<script lang="ts" setup>\n import { CollapsibleRoot, useForwardPropsEmits } from "radix-vue";\n import type { CollapsibleRootEmits, CollapsibleRootProps } from "radix-vue";\n\n const props = defineProps<CollapsibleRootProps>();\n\n const emit = defineEmits<CollapsibleRootEmits>();\n\n const forwarded = useForwardPropsEmits(props, emit);\n</script>\n',
|
|
440
440
|
},
|
|
441
441
|
{
|
|
442
442
|
fileName: "Collapsible/Content.vue",
|
|
443
443
|
dirPath: "components/UI",
|
|
444
444
|
fileContent:
|
|
445
|
-
'<template>\n <CollapsibleContent :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot
|
|
445
|
+
'<template>\n <CollapsibleContent :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </CollapsibleContent>\n</template>\n\n<script lang="ts" setup>\n import { CollapsibleContent } from "radix-vue";\n import type { CollapsibleContentProps } from "radix-vue";\n\n const props = defineProps<\n CollapsibleContentProps & {\n /** Customer class(es) to add to the element */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "overflow-hidden transition will-change-auto data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down",\n });\n</script>\n',
|
|
446
446
|
},
|
|
447
447
|
{
|
|
448
448
|
fileName: "Collapsible/Trigger.vue",
|
|
449
449
|
dirPath: "components/UI",
|
|
450
450
|
fileContent:
|
|
451
|
-
'<template>\n <CollapsibleTrigger v-bind="forwarded">\n <slot
|
|
451
|
+
'<template>\n <CollapsibleTrigger v-bind="forwarded">\n <slot/>\n </CollapsibleTrigger>\n</template>\n\n<script lang="ts" setup>\n import { CollapsibleTrigger, useForwardProps } from "radix-vue";\n import type { CollapsibleTriggerProps } from "radix-vue";\n\n const props = defineProps<CollapsibleTriggerProps>();\n const forwarded = useForwardProps(props);\n</script>\n',
|
|
452
452
|
},
|
|
453
453
|
],
|
|
454
454
|
utils: [],
|
|
@@ -469,7 +469,7 @@ export default [
|
|
|
469
469
|
fileName: "Command/Command.vue",
|
|
470
470
|
dirPath: "components/UI",
|
|
471
471
|
fileContent:
|
|
472
|
-
'<template>\n <ComboboxRoot v-bind="forwarded" :open="true" :class="styles({ class: props.class })">\n <slot
|
|
472
|
+
'<template>\n <ComboboxRoot v-bind="forwarded" :open="true" :class="styles({ class: props.class })">\n <slot/>\n </ComboboxRoot>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxRoot, useForwardPropsEmits } from "radix-vue";\n import type { ComboboxRootEmits, ComboboxRootProps } from "radix-vue";\n\n const props = defineProps<ComboboxRootProps & { class?: any }>();\n const emits = defineEmits<ComboboxRootEmits>();\n\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",\n });\n</script>\n',
|
|
473
473
|
},
|
|
474
474
|
{
|
|
475
475
|
fileName: "Command/Dialog.vue",
|
|
@@ -481,13 +481,13 @@ export default [
|
|
|
481
481
|
fileName: "Command/Empty.vue",
|
|
482
482
|
dirPath: "components/UI",
|
|
483
483
|
fileContent:
|
|
484
|
-
'<template>\n <ComboboxEmpty :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot
|
|
484
|
+
'<template>\n <ComboboxEmpty :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </ComboboxEmpty>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxEmpty } from "radix-vue";\n import type { ComboboxEmptyProps } from "radix-vue";\n\n const props = defineProps<\n ComboboxEmptyProps & {\n /**Custom class(es) to add to the element */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "py-6 text-center text-sm",\n });\n</script>\n',
|
|
485
485
|
},
|
|
486
486
|
{
|
|
487
487
|
fileName: "Command/Group.vue",
|
|
488
488
|
dirPath: "components/UI",
|
|
489
489
|
fileContent:
|
|
490
|
-
'<template>\n <ComboboxGroup\n :class="styles({ class: props.class })"\n v-bind="reactiveOmit(props, \'class\', \'heading\')"\n >\n <slot name="heading">\n <UiCommandLabel v-if="heading" :label="heading" />\n </slot>\n <slot
|
|
490
|
+
'<template>\n <ComboboxGroup\n :class="styles({ class: props.class })"\n v-bind="reactiveOmit(props, \'class\', \'heading\')"\n >\n <slot name="heading">\n <UiCommandLabel v-if="heading" :label="heading" />\n </slot>\n <slot/>\n </ComboboxGroup>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxGroup } from "radix-vue";\n import type { ComboboxGroupProps } from "radix-vue";\n\n const props = defineProps<\n ComboboxGroupProps & {\n /**The heading for the group */\n heading?: any;\n /**Custom class(es) to add to the element */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "overflow-hidden p-1 text-foreground",\n });\n</script>\n',
|
|
491
491
|
},
|
|
492
492
|
{
|
|
493
493
|
fileName: "Command/Input.vue",
|
|
@@ -511,13 +511,13 @@ export default [
|
|
|
511
511
|
fileName: "Command/List.vue",
|
|
512
512
|
dirPath: "components/UI",
|
|
513
513
|
fileContent:
|
|
514
|
-
'<template>\n <ComboboxContent v-bind="forwarded" :class="styles({ class: props.class })">\n <slot
|
|
514
|
+
'<template>\n <ComboboxContent v-bind="forwarded" :class="styles({ class: props.class })">\n <slot/>\n </ComboboxContent>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxContent, useForwardPropsEmits } from "radix-vue";\n import type { ComboboxContentEmits, ComboboxContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = defineProps<\n ComboboxContentProps & {\n /**Custom class(es) to add to the element */\n class?: any;\n }\n >();\n\n const emits = defineEmits<ComboboxContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "max-h-[300px] overflow-y-auto overflow-x-hidden",\n });\n</script>\n',
|
|
515
515
|
},
|
|
516
516
|
{
|
|
517
517
|
fileName: "Command/Separator.vue",
|
|
518
518
|
dirPath: "components/UI",
|
|
519
519
|
fileContent:
|
|
520
|
-
'<template>\n <ComboboxSeparator :as-child="asChild" :class="styles({ class: props.class })">\n <slot
|
|
520
|
+
'<template>\n <ComboboxSeparator :as-child="asChild" :class="styles({ class: props.class })">\n <slot />\n </ComboboxSeparator>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxSeparator } from "radix-vue";\n import type { ComboboxSeparatorProps } from "radix-vue";\n\n const props = defineProps<\n ComboboxSeparatorProps & {\n /**Custom class(es) to add to the element */\n class?: any;\n }\n >();\n const styles = tv({\n base: "-mx-1 h-px bg-border",\n });\n</script>\n',
|
|
521
521
|
},
|
|
522
522
|
{
|
|
523
523
|
fileName: "Command/Shortcut.vue",
|
|
@@ -538,7 +538,7 @@ export default [
|
|
|
538
538
|
fileName: "Container.vue",
|
|
539
539
|
dirPath: "components/UI",
|
|
540
540
|
fileContent:
|
|
541
|
-
'<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot
|
|
541
|
+
'<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n class?: any;\n }\n >(),\n {\n as: "div",\n }\n );\n\n const styles = tv({\n base: "container mx-auto",\n });\n</script>\n',
|
|
542
542
|
},
|
|
543
543
|
],
|
|
544
544
|
utils: [],
|
|
@@ -565,19 +565,19 @@ export default [
|
|
|
565
565
|
fileName: "ContextMenu/Content.vue",
|
|
566
566
|
dirPath: "components/UI",
|
|
567
567
|
fileContent:
|
|
568
|
-
'<template>\n <UiContextMenuPortal>\n <ContextMenuContent\n v-bind="{ ...forwarded, ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot
|
|
568
|
+
'<template>\n <UiContextMenuPortal>\n <ContextMenuContent\n v-bind="{ ...forwarded, ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot/>\n </ContextMenuContent>\n </UiContextMenuPortal>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuContent, useForwardPropsEmits } from "radix-vue";\n import type { ContextMenuContentEmits, ContextMenuContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n const props = withDefaults(\n defineProps<\n ContextMenuContentProps & {\n /** Custom class(es) to add to the element */\n class?: any;\n }\n >(),\n {\n loop: true,\n avoidCollisions: true,\n collisionPadding: 5,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<ContextMenuContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n</script>\n',
|
|
569
569
|
},
|
|
570
570
|
{
|
|
571
571
|
fileName: "ContextMenu/ContextMenu.vue",
|
|
572
572
|
dirPath: "components/UI",
|
|
573
573
|
fileContent:
|
|
574
|
-
'<template>\n <ContextMenuRoot v-bind="forwarded">\n <slot
|
|
574
|
+
'<template>\n <ContextMenuRoot v-bind="forwarded">\n <slot/>\n </ContextMenuRoot>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuRoot, useForwardPropsEmits } from "radix-vue";\n import type { ContextMenuRootEmits, ContextMenuRootProps } from "radix-vue";\n\n const props = defineProps<ContextMenuRootProps>();\n const emit = defineEmits<ContextMenuRootEmits>();\n const forwarded = useForwardPropsEmits(props, emit);\n</script>\n',
|
|
575
575
|
},
|
|
576
576
|
{
|
|
577
577
|
fileName: "ContextMenu/Group.vue",
|
|
578
578
|
dirPath: "components/UI",
|
|
579
579
|
fileContent:
|
|
580
|
-
'<template>\n <ContextMenuGroup v-bind="props">\n <slot
|
|
580
|
+
'<template>\n <ContextMenuGroup v-bind="props">\n <slot/>\n </ContextMenuGroup>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuGroup } from "radix-vue";\n import type { ContextMenuGroupProps } from "radix-vue";\n\n const props = defineProps<ContextMenuGroupProps>();\n</script>\n',
|
|
581
581
|
},
|
|
582
582
|
{
|
|
583
583
|
fileName: "ContextMenu/Item.vue",
|
|
@@ -601,13 +601,13 @@ export default [
|
|
|
601
601
|
fileName: "ContextMenu/Portal.vue",
|
|
602
602
|
dirPath: "components/UI",
|
|
603
603
|
fileContent:
|
|
604
|
-
'<template>\n <ContextMenuPortal v-bind="props">\n <slot
|
|
604
|
+
'<template>\n <ContextMenuPortal v-bind="props">\n <slot/>\n </ContextMenuPortal>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuPortal } from "radix-vue";\n import type { ContextMenuPortalProps } from "radix-vue";\n\n const props = defineProps<ContextMenuPortalProps>();\n</script>\n',
|
|
605
605
|
},
|
|
606
606
|
{
|
|
607
607
|
fileName: "ContextMenu/RadioGroup.vue",
|
|
608
608
|
dirPath: "components/UI",
|
|
609
609
|
fileContent:
|
|
610
|
-
'<template>\n <ContextMenuRadioGroup v-bind="forwarded">\n <slot
|
|
610
|
+
'<template>\n <ContextMenuRadioGroup v-bind="forwarded">\n <slot/>\n </ContextMenuRadioGroup>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuRadioGroup, useForwardPropsEmits } from "radix-vue";\n import type { ContextMenuRadioGroupEmits, ContextMenuRadioGroupProps } from "radix-vue";\n\n const props = defineProps<ContextMenuRadioGroupProps>();\n\n const emits = defineEmits<ContextMenuRadioGroupEmits>();\n\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
|
|
611
611
|
},
|
|
612
612
|
{
|
|
613
613
|
fileName: "ContextMenu/RadioItem.vue",
|
|
@@ -631,13 +631,13 @@ export default [
|
|
|
631
631
|
fileName: "ContextMenu/Sub.vue",
|
|
632
632
|
dirPath: "components/UI",
|
|
633
633
|
fileContent:
|
|
634
|
-
'<template>\n <ContextMenuSub v-bind="forwarded">\n <slot
|
|
634
|
+
'<template>\n <ContextMenuSub v-bind="forwarded">\n <slot/>\n </ContextMenuSub>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuSub, useForwardPropsEmits } from "radix-vue";\n import type { ContextMenuSubEmits, ContextMenuSubProps } from "radix-vue";\n\n const props = defineProps<ContextMenuSubProps>();\n const emits = defineEmits<ContextMenuSubEmits>();\n\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
|
|
635
635
|
},
|
|
636
636
|
{
|
|
637
637
|
fileName: "ContextMenu/SubContent.vue",
|
|
638
638
|
dirPath: "components/UI",
|
|
639
639
|
fileContent:
|
|
640
|
-
'<template>\n <UiContextMenuPortal>\n <ContextMenuSubContent\n v-bind="{ ...forwarded, ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot
|
|
640
|
+
'<template>\n <UiContextMenuPortal>\n <ContextMenuSubContent\n v-bind="{ ...forwarded, ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot/>\n </ContextMenuSubContent>\n </UiContextMenuPortal>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuSubContent, useForwardPropsEmits } from "radix-vue";\n import type { ContextMenuSubContentEmits, ContextMenuSubContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = withDefaults(\n defineProps<\n ContextMenuSubContentProps & {\n /**Custom class(es) to add to the element */\n class?: any;\n }\n >(),\n {\n loop: true,\n avoidCollisions: true,\n collisionPadding: 8,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<ContextMenuSubContentEmits>();\n\n const styles = tv({\n base: "z-50 min-w-[100px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
|
|
641
641
|
},
|
|
642
642
|
{
|
|
643
643
|
fileName: "ContextMenu/SubTrigger.vue",
|
|
@@ -649,7 +649,7 @@ export default [
|
|
|
649
649
|
fileName: "ContextMenu/Trigger.vue",
|
|
650
650
|
dirPath: "components/UI",
|
|
651
651
|
fileContent:
|
|
652
|
-
'<template>\n <ContextMenuTrigger v-bind="props">\n <slot
|
|
652
|
+
'<template>\n <ContextMenuTrigger v-bind="props">\n <slot/>\n </ContextMenuTrigger>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuTrigger } from "radix-vue";\n import type { ContextMenuTriggerProps } from "radix-vue";\n\n const props = defineProps<ContextMenuTriggerProps>();\n</script>\n',
|
|
653
653
|
},
|
|
654
654
|
],
|
|
655
655
|
utils: [],
|
|
@@ -665,7 +665,7 @@ export default [
|
|
|
665
665
|
fileName: "CurrencyInput.vue",
|
|
666
666
|
dirPath: "components/UI",
|
|
667
667
|
fileContent:
|
|
668
|
-
'<template>\r\n <input ref="inputRef" type="text" :class="styles({ class: props.class })" v-bind="props"
|
|
668
|
+
'<template>\r\n <input ref="inputRef" type="text" :class="styles({ class: props.class })" v-bind="props" >\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { defu } from "defu";\r\n import { useCurrencyInput } from "vue-currency-input";\r\n import type { CurrencyInputOptions } from "vue-currency-input";\r\n\r\n const props = defineProps<{\r\n class?: any;\r\n id?: string;\r\n name?: string;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n required?: boolean;\r\n modelValue?: any;\r\n options?: CurrencyInputOptions;\r\n }>();\r\n\r\n const { inputRef } = useCurrencyInput(\r\n defu({}, props.options, {\r\n currency: "USD",\r\n locale: "en-US",\r\n hideCurrencySymbolOnFocus: false,\r\n hideGroupingSeparatorOnFocus: false,\r\n })\r\n );\r\n\r\n const styles = tv({\r\n base: "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 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\r\n });\r\n</script>\r\n',
|
|
669
669
|
},
|
|
670
670
|
],
|
|
671
671
|
utils: [],
|
|
@@ -688,7 +688,7 @@ export default [
|
|
|
688
688
|
fileName: "datatables.client.ts",
|
|
689
689
|
dirPath: "plugins",
|
|
690
690
|
fileContent:
|
|
691
|
-
'import DataTablesCore from "datatables.net";\nimport DataTable from "datatables.net-vue3";\nimport JSZip from "jszip";\n\nimport "datatables.net-buttons";\nimport "datatables.net-buttons-dt";\nimport "datatables.net-buttons/js/buttons.colVis.mjs";\nimport "datatables.net-buttons/js/buttons.html5.mjs";\nimport "datatables.net-buttons/js/buttons.print.mjs";\nimport "datatables.net-responsive-dt";\nimport "datatables.net-searchbuilder-dt";\nimport "datatables.net-select-dt";\n\n// @ts-
|
|
691
|
+
'import DataTablesCore from "datatables.net";\nimport DataTable from "datatables.net-vue3";\nimport JSZip from "jszip";\n\nimport "datatables.net-buttons";\nimport "datatables.net-buttons-dt";\nimport "datatables.net-buttons/js/buttons.colVis.mjs";\nimport "datatables.net-buttons/js/buttons.html5.mjs";\nimport "datatables.net-buttons/js/buttons.print.mjs";\nimport "datatables.net-responsive-dt";\nimport "datatables.net-searchbuilder-dt";\nimport "datatables.net-select-dt";\n\n// @ts-expect-error - We are not creating a declaration file for this library\nwindow.JSZip = JSZip;\n\nDataTable.use(DataTablesCore);\n\nexport default defineNuxtPlugin((nuxtApp) => {\n nuxtApp.vueApp.component("DataTable", DataTable);\n});\n',
|
|
692
692
|
},
|
|
693
693
|
],
|
|
694
694
|
files: [
|
|
@@ -696,7 +696,7 @@ export default [
|
|
|
696
696
|
fileName: "Datatable.client.vue",
|
|
697
697
|
dirPath: "components/UI",
|
|
698
698
|
fileContent:
|
|
699
|
-
'<template>\r\n <DataTable\r\n :columns="columns"\r\n :ajax="ajax"\r\n ref="table"\r\n :data="data"\r\n :class="props.class"\r\n :options="options"\r\n >\r\n <template v-for="(_, name) in $slots" v-slot:[name]="scope">\r\n <slot :name="name" v-bind="scope"></slot>\r\n </template>\r\n </DataTable>\r\n</template>\r\n\r\n<script lang="ts" setup generic="T extends Record<string, any>">\r\n import type DataTableRef from "datatables.net";\r\n import type { Config } from "datatables.net";\r\n\r\n export type DataTablesNamedSlotProps<T> = {\r\n /** The data to show in the cell (from the `columns.data` configuration) */\r\n cellData: keyof T | null;\r\n /** The column index for the cell (0-based index) */\r\n colIndex: number;\r\n /** The data object for the whole row */\r\n rowData: T | Record<string, any>;\r\n /** Row index for the cell (data index, not the display index) */\r\n rowIndex: number;\r\n /** Orthogonal data type */\r\n type: string;\r\n };\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 columns?: Config["columns"];\r\n ajax?: Config["ajax"];\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 /* V2 */\r\n table.dataTable thead > tr > th.dt-orderable-asc,\r\n table.dataTable thead > tr > th.dt-orderable-desc,\r\n table.dataTable thead > tr > td.dt-orderable-asc,\r\n table.dataTable thead > tr > td.dt-orderable-desc {\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 /* V2 */\r\n table.dataTable thead > tr > th.dt-orderable-asc:before,\r\n table.dataTable thead > tr > th.dt-orderable-asc:after,\r\n table.dataTable thead > tr > th.dt-orderable-desc:before,\r\n table.dataTable thead > tr > th.dt-orderable-desc:after,\r\n table.dataTable thead > tr > td.dt-orderable-asc:before,\r\n table.dataTable thead > tr > td.dt-orderable-asc:after,\r\n table.dataTable thead > tr > td.dt-orderable-desc:before,\r\n table.dataTable thead > tr > td.dt-orderable-desc: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 /* V2 */\r\n table.dataTable thead > tr > th.dt-orderable-asc:before,\r\n table.dataTable thead > tr > th.dt-orderable-desc:before,\r\n table.dataTable thead > tr > td.dt-orderable-asc:before,\r\n table.dataTable thead > tr > td.dt-orderable-desc: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 /* V2 */\r\n table.dataTable thead > tr > th.dt-orderable-asc:after,\r\n table.dataTable thead > tr > th.dt-orderable-desc:after,\r\n table.dataTable thead > tr > td.dt-orderable-asc:after,\r\n table.dataTable thead > tr > td.dt-orderable-desc: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 /* V2 */\r\n table.dataTable thead > tr > th.dt-ordering-asc:before,\r\n table.dataTable thead > tr > th.dt-ordering-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 - v1 of datatables */\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 /* V2 of datatables button styles. \r\n */\r\n .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 /* Select box at bottom showing number of records being displayed - v1 of datatables */\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 /* Select box at the bottom showing how many items are being display - v2 */\r\n .dt-length {\r\n @apply inline-flex items-center gap-2;\r\n label {\r\n @apply text-sm font-normal text-muted-foreground;\r\n }\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 /* Search box at the top styles - v1 of datatables */\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\r\n /* Search box at the top styles -v2 */\r\n .dt-search {\r\n @apply flex items-center gap-3;\r\n label {\r\n @apply inline-flex cursor-pointer items-center gap-2 text-sm font-normal text-muted-foreground;\r\n }\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 md:w-[50%] lg:w-[250px];\r\n }\r\n }\r\n\r\n /* Info text that shows `Showing X to XX of XXXX entries - v1 */\r\n .dataTables_wrapper .dataTables_info,\r\n .dt-info {\r\n @apply flex items-center gap-3 text-sm !text-muted-foreground;\r\n }\r\n\r\n /* Pagination button styles - v1 datatables */\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 /* Pagination button - v2 */\r\n .dt-paging-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 &.current,\r\n &:hover {\r\n @apply bg-muted;\r\n }\r\n &.disabled,\r\n &.disabled:hover,\r\n &.disabled:active {\r\n @apply pointer-events-none opacity-50;\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 .dt-paging .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 table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,\r\n table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > 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 table.dataTable.dtr-column > tbody > tr.dtr-expanded td.dtr-control:before,\r\n table.dataTable.dtr-column > tbody > tr.dtr-expanded th.dtr-control:before,\r\n table.dataTable.dtr-column > tbody > tr.dtr-expanded td.control:before,\r\n table.dataTable.dtr-column > tbody > tr.dtr-expanded 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 /* Responsive modal */\r\n div.dtr-modal {\r\n @apply fixed left-0 top-0 z-[1000] box-border size-full;\r\n }\r\n div.dtr-modal div.dtr-modal-display {\r\n @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\n }\r\n div.dtr-modal div.dtr-modal-content {\r\n @apply relative flex flex-col p-0 text-[15px];\r\n h2 {\r\n @apply text-lg font-semibold text-foreground;\r\n }\r\n table tr td {\r\n @apply space-x-10 pb-2 first:font-semibold [&:nth-child(2)]:pl-2;\r\n }\r\n }\r\n div.dtr-modal div.dtr-modal-close {\r\n @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\n }\r\n div.dtr-modal div.dtr-modal-background {\r\n @apply fixed inset-0 z-[101] bg-background/20 backdrop-blur;\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-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\n button {\r\n @apply h-8 rounded-none border-none px-4 text-xs;\r\n }\r\n .dt-button.buttons-columnVisibility.dt-button-active {\r\n @apply text-foreground after:ml-auto after:content-[\'✓\'];\r\n }\r\n }\r\n }\r\n</style>\r\n',
|
|
699
|
+
'<template>\r\n <DataTable\r\n ref="table"\r\n :columns="columns"\r\n :ajax="ajax"\r\n :data="data"\r\n :class="props.class"\r\n :options="options"\r\n >\r\n <template v-for="(_, name) in $slots" #[name]="scope">\r\n <slot :name="name" v-bind="scope"/>\r\n </template>\r\n </DataTable>\r\n</template>\r\n\r\n<script lang="ts" setup generic="T extends Record<string, any>">\r\n import type DataTableRef from "datatables.net";\r\n import type { Config } from "datatables.net";\r\n\r\n export type DataTablesNamedSlotProps<T> = {\r\n /** The data to show in the cell (from the `columns.data` configuration) */\r\n cellData: keyof T | null;\r\n /** The column index for the cell (0-based index) */\r\n colIndex: number;\r\n /** The data object for the whole row */\r\n rowData: T | Record<string, any>;\r\n /** Row index for the cell (data index, not the display index) */\r\n rowIndex: number;\r\n /** Orthogonal data type */\r\n type: string;\r\n };\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 columns?: Config["columns"];\r\n ajax?: Config["ajax"];\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 /* V2 */\r\n table.dataTable thead > tr > th.dt-orderable-asc,\r\n table.dataTable thead > tr > th.dt-orderable-desc,\r\n table.dataTable thead > tr > td.dt-orderable-asc,\r\n table.dataTable thead > tr > td.dt-orderable-desc {\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 /* V2 */\r\n table.dataTable thead > tr > th.dt-orderable-asc:before,\r\n table.dataTable thead > tr > th.dt-orderable-asc:after,\r\n table.dataTable thead > tr > th.dt-orderable-desc:before,\r\n table.dataTable thead > tr > th.dt-orderable-desc:after,\r\n table.dataTable thead > tr > td.dt-orderable-asc:before,\r\n table.dataTable thead > tr > td.dt-orderable-asc:after,\r\n table.dataTable thead > tr > td.dt-orderable-desc:before,\r\n table.dataTable thead > tr > td.dt-orderable-desc: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 /* V2 */\r\n table.dataTable thead > tr > th.dt-orderable-asc:before,\r\n table.dataTable thead > tr > th.dt-orderable-desc:before,\r\n table.dataTable thead > tr > td.dt-orderable-asc:before,\r\n table.dataTable thead > tr > td.dt-orderable-desc: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 /* V2 */\r\n table.dataTable thead > tr > th.dt-orderable-asc:after,\r\n table.dataTable thead > tr > th.dt-orderable-desc:after,\r\n table.dataTable thead > tr > td.dt-orderable-asc:after,\r\n table.dataTable thead > tr > td.dt-orderable-desc: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 /* V2 */\r\n table.dataTable thead > tr > th.dt-ordering-asc:before,\r\n table.dataTable thead > tr > th.dt-ordering-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 - v1 of datatables */\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 /* V2 of datatables button styles. \r\n */\r\n .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 /* Select box at bottom showing number of records being displayed - v1 of datatables */\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 /* Select box at the bottom showing how many items are being display - v2 */\r\n .dt-length {\r\n @apply inline-flex items-center gap-2;\r\n label {\r\n @apply text-sm font-normal text-muted-foreground;\r\n }\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 /* Search box at the top styles - v1 of datatables */\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\r\n /* Search box at the top styles -v2 */\r\n .dt-search {\r\n @apply flex items-center gap-3;\r\n label {\r\n @apply inline-flex cursor-pointer items-center gap-2 text-sm font-normal text-muted-foreground;\r\n }\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 md:w-[50%] lg:w-[250px];\r\n }\r\n }\r\n\r\n /* Info text that shows `Showing X to XX of XXXX entries - v1 */\r\n .dataTables_wrapper .dataTables_info,\r\n .dt-info {\r\n @apply flex items-center gap-3 text-sm !text-muted-foreground;\r\n }\r\n\r\n /* Pagination button styles - v1 datatables */\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 /* Pagination button - v2 */\r\n .dt-paging-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 &.current,\r\n &:hover {\r\n @apply bg-muted;\r\n }\r\n &.disabled,\r\n &.disabled:hover,\r\n &.disabled:active {\r\n @apply pointer-events-none opacity-50;\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 .dt-paging .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 table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,\r\n table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > 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 table.dataTable.dtr-column > tbody > tr.dtr-expanded td.dtr-control:before,\r\n table.dataTable.dtr-column > tbody > tr.dtr-expanded th.dtr-control:before,\r\n table.dataTable.dtr-column > tbody > tr.dtr-expanded td.control:before,\r\n table.dataTable.dtr-column > tbody > tr.dtr-expanded 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 /* Responsive modal */\r\n div.dtr-modal {\r\n @apply fixed left-0 top-0 z-[1000] box-border size-full;\r\n }\r\n div.dtr-modal div.dtr-modal-display {\r\n @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\n }\r\n div.dtr-modal div.dtr-modal-content {\r\n @apply relative flex flex-col p-0 text-[15px];\r\n h2 {\r\n @apply text-lg font-semibold text-foreground;\r\n }\r\n table tr td {\r\n @apply space-x-10 pb-2 first:font-semibold [&:nth-child(2)]:pl-2;\r\n }\r\n }\r\n div.dtr-modal div.dtr-modal-close {\r\n @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\n }\r\n div.dtr-modal div.dtr-modal-background {\r\n @apply fixed inset-0 z-[101] bg-background/20 backdrop-blur;\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-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\n button {\r\n @apply h-8 rounded-none border-none px-4 text-xs;\r\n }\r\n .dt-button.buttons-columnVisibility.dt-button-active {\r\n @apply text-foreground after:ml-auto after:content-[\'✓\'];\r\n }\r\n }\r\n }\r\n</style>\r\n',
|
|
700
700
|
},
|
|
701
701
|
],
|
|
702
702
|
utils: [],
|
|
@@ -705,13 +705,13 @@ export default [
|
|
|
705
705
|
{
|
|
706
706
|
name: "Date Field",
|
|
707
707
|
value: "date-field",
|
|
708
|
-
|
|
708
|
+
deps: ["@internationalized/date"],
|
|
709
709
|
files: [
|
|
710
710
|
{
|
|
711
711
|
fileName: "DateField.vue",
|
|
712
712
|
dirPath: "components/UI",
|
|
713
713
|
fileContent:
|
|
714
|
-
'<template>\r\n <DateFieldRoot\r\n v-slot="{ segments
|
|
714
|
+
'<template>\r\n <DateFieldRoot\r\n v-slot="{ segments }"\r\n v-bind="props"\r\n v-model="localModel"\r\n :class="styles({ class: props.class })"\r\n >\r\n <template v-for="item in segments" :key="item.part">\r\n <DateFieldInput\r\n v-if="item.part === \'literal\'"\r\n :part="item.part"\r\n class="inline-flex items-center justify-center text-muted-foreground"\r\n >\r\n <Icon v-if="separatorIcon" :name="separatorIcon" class="text-muted-foreground" />\r\n <span v-else-if="separator" class="mx-1 text-muted-foreground">{{ separator }}</span>\r\n </DateFieldInput>\r\n <DateFieldInput\r\n v-else\r\n :part="item.part"\r\n class="inline-flex cursor-text items-center rounded px-1 transition focus:outline-none focus:ring-1 focus:ring-ring aria-[valuetext=Empty]:text-muted-foreground"\r\n >\r\n {{ item.value }}\r\n </DateFieldInput>\r\n </template>\r\n </DateFieldRoot>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { type DateValue } from "@internationalized/date";\r\n import { DateFieldInput, DateFieldRoot } from "radix-vue";\r\n import type { DateFieldRootProps } from "radix-vue";\r\n\r\n const props = withDefaults(\r\n defineProps<\r\n DateFieldRootProps & {\r\n class?: any;\r\n separator?: string;\r\n separatorIcon?: string;\r\n }\r\n >(),\r\n {\r\n separator: "/",\r\n }\r\n );\r\n const localModel = defineModel<DateValue>();\r\n\r\n const styles = tv({\r\n base: "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",\r\n });\r\n</script>\r\n',
|
|
715
715
|
},
|
|
716
716
|
],
|
|
717
717
|
utils: [],
|
|
@@ -731,7 +731,7 @@ export default [
|
|
|
731
731
|
fileName: "Datepicker.vue",
|
|
732
732
|
dirPath: "components/UI",
|
|
733
733
|
fileContent:
|
|
734
|
-
'<template>\n <ClientOnly>\n <VDatePicker\n :
|
|
734
|
+
'<template>\n <ClientOnly>\n <VDatePicker\n :trim-weeks="props.trimWeeks || true"\n :is-dark="$colorMode.value == \'dark\'"\n v-bind="$attrs"\n >\n <template v-for="(_, slot) in $slots" #[slot]="scope">\n <slot :name="slot" v-bind="scope" />\n </template>\n </VDatePicker>\n </ClientOnly>\n</template>\n\n<script lang="ts" setup>\n import type { Calendar, DatePicker } from "v-calendar";\n\n defineOptions({ inheritAttrs: false });\n\n // @ts-expect-error - This is a hacky way to get the props from the Calendar and DatePicker components\n interface Props\n extends /* @vue-ignore */ Partial<InstanceType<typeof Calendar>["$props"]>,\n /* @vue-ignore */ Omit<Partial<InstanceType<typeof DatePicker>["$props"]>, "attributes"> {}\n\n const props = defineProps<Props & { trimWeeks?: boolean }>();\n</script>\n\n<style>\n :root {\n --vc-font-family: var(--font-sans);\n --vc-rounded-full: var(--radius);\n --vc-font-bold: 500;\n --vc-font-semibold: 600;\n --vc-text-lg: 16px;\n }\n\n .vc-light,\n .vc-dark {\n --vc-bg: theme("colors.background");\n --vc-border: theme("colors.border");\n --vc-focus-ring: 0 0 0 3px hsl(var(--primary) / 30%);\n --vc-weekday-color: theme("colors.muted.foreground");\n --vc-popover-content-color: theme("colors.popover.foreground");\n --vc-hover-bg: theme("colors.accent.DEFAULT");\n --vc-popover-content-bg: theme("colors.popover.DEFAULT");\n --vc-popover-content-border: theme("colors.border");\n --vc-header-arrow-hover-bg: theme("colors.accent.DEFAULT");\n --vc-weeknumber-color: theme("colors.muted.foreground");\n --vc-nav-hover-bg: theme("colors.accent.DEFAULT");\n --vc-time-year-color: theme("colors.foreground");\n --vc-time-weekday-color: theme("colors.foreground");\n --vc-time-month-color: theme("colors.foreground");\n --vc-time-day-color: theme("colors.foreground");\n\n --vc-nav-item-active-color: theme("colors.primary.foreground");\n --vc-nav-item-active-bg: theme("colors.primary.DEFAULT");\n\n --vc-time-select-group-bg: theme("colors.background");\n --vc-time-select-group-border: theme("colors.border");\n --vc-time-picker-border: theme("colors.border");\n\n &.vc-attr,\n & .vc-attr {\n --vc-content-color: theme("colors.primary.DEFAULT");\n --vc-highlight-outline-bg: theme("colors.primary.DEFAULT");\n --vc-highlight-outline-border: theme("colors.primary.DEFAULT");\n --vc-highlight-outline-content-color: theme("colors.primary.foreground");\n --vc-highlight-light-bg: var(--vc-accent-200); /* Highlighted color between two dates */\n --vc-highlight-light-content-color: theme("colors.secondary.foreground");\n --vc-highlight-solid-bg: theme("colors.primary.DEFAULT");\n --vc-highlight-solid-content-color: theme("colors.primary.foreground");\n }\n }\n\n .vc-blue {\n --vc-accent-200: theme("colors.primary.DEFAULT / 20%");\n --vc-accent-400: theme("colors.primary.DEFAULT");\n --vc-accent-500: theme("colors.primary.DEFAULT");\n --vc-accent-600: theme("colors.primary.DEFAULT / 70%");\n }\n\n .dark {\n .vc-blue {\n --vc-accent-200: theme("colors.primary.DEFAULT / 20%");\n --vc-accent-400: theme("colors.primary.DEFAULT");\n --vc-accent-500: theme("colors.primary.DEFAULT / 70%");\n }\n }\n .vc-header .vc-title {\n @apply font-medium;\n }\n .vc-weekdays {\n @apply my-2 font-normal;\n }\n .vc-day-content,\n .vc-day,\n .vc-highlight {\n @apply h-9 w-9 rounded-md;\n }\n .vc-focus {\n @apply focus-within:shadow-none;\n }\n .vc-day {\n @apply mb-1.5;\n }\n\n .vc-base-icon {\n @apply h-4 w-4 stroke-1;\n }\n .vc-header .vc-arrow,\n .vc-nav-arrow {\n @apply h-7 w-7 rounded-md;\n border: 1px solid hsl(var(--border));\n }\n .vc-header .vc-prev,\n .vc-header .vc-next {\n @apply border;\n }\n .weekday-position-1 .vc-highlights {\n @apply rounded-l-md;\n }\n .weekday-position-7 .vc-highlights {\n @apply rounded-r-md;\n }\n .vc-highlight-bg-light {\n @apply bg-accent;\n }\n .vc-nav-item {\n @apply font-medium;\n }\n .vc-header .vc-title-wrapper {\n @apply decoration-accent-foreground/60 underline-offset-2 hover:underline;\n }\n .vc-highlights + .vc-day-content {\n @apply hover:bg-accent/5;\n }\n</style>\n',
|
|
735
735
|
},
|
|
736
736
|
],
|
|
737
737
|
utils: [],
|
|
@@ -746,13 +746,13 @@ export default [
|
|
|
746
746
|
fileName: "Dialog/Close.vue",
|
|
747
747
|
dirPath: "components/UI",
|
|
748
748
|
fileContent:
|
|
749
|
-
'<template>\n <DialogClose v-bind="props">\n <slot
|
|
749
|
+
'<template>\n <DialogClose v-bind="props">\n <slot/>\n </DialogClose>\n</template>\n\n<script lang="ts" setup>\n import { DialogClose } from "radix-vue";\n import type { DialogCloseProps } from "radix-vue";\n\n const props = defineProps<DialogCloseProps>();\n</script>\n',
|
|
750
750
|
},
|
|
751
751
|
{
|
|
752
752
|
fileName: "Dialog/Content.vue",
|
|
753
753
|
dirPath: "components/UI",
|
|
754
754
|
fileContent:
|
|
755
|
-
'<template>\n <UiDialogPortal :to="to">\n <UiDialogOverlay />\n <DialogContent :class="styles({ class: props.class })" v-bind="{ ...forwarded, ...$attrs }">\n <slot>\n <slot name="header">\n <UiDialogHeader>\n <slot name="title">\n <UiDialogTitle v-if="title" :title="title" />\n </slot>\n <slot name="description">\n <UiDialogDescription v-if="description" :description="description" />\n </slot>\n </UiDialogHeader>\n </slot>\n <slot name="content"
|
|
755
|
+
'<template>\n <UiDialogPortal :to="to">\n <UiDialogOverlay />\n <DialogContent :class="styles({ class: props.class })" v-bind="{ ...forwarded, ...$attrs }">\n <slot>\n <slot name="header">\n <UiDialogHeader>\n <slot name="title">\n <UiDialogTitle v-if="title" :title="title" />\n </slot>\n <slot name="description">\n <UiDialogDescription v-if="description" :description="description" />\n </slot>\n </UiDialogHeader>\n </slot>\n <slot name="content"/>\n <slot name="footer"/>\n </slot>\n <slot name="close">\n <UiDialogClose />\n </slot>\n <UiDialogClose\n v-if="!hideClose"\n class="absolute right-4 top-2 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"\n >\n <Icon name="lucide:x" class="h-4 w-4" />\n <span class="sr-only">Close</span>\n </UiDialogClose>\n </DialogContent>\n </UiDialogPortal>\n</template>\n\n<script lang="ts" setup>\n import { DialogContent, useForwardPropsEmits } from "radix-vue";\n import type { DialogContentEmits, DialogContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n const props = defineProps<\n DialogContentProps & {\n /** Icon to display in the close button */\n icon?: string;\n /** Title text */\n title?: string;\n /** Description text */\n description?: string;\n /** Custom class(es) to add to the parent */\n class?: any;\n /** Whether to hide the close button */\n hideClose?: boolean;\n /** Where to render the dialog */\n to?: string | HTMLElement;\n }\n >();\n const emits = defineEmits<DialogContentEmits>();\n const forwarded = useForwardPropsEmits(\n reactiveOmit(props, "icon", "title", "description", "class", "hideClose", "to"),\n emits\n );\n\n const styles = tv({\n base: "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",\n });\n</script>\n',
|
|
756
756
|
},
|
|
757
757
|
{
|
|
758
758
|
fileName: "Dialog/Description.vue",
|
|
@@ -764,19 +764,19 @@ export default [
|
|
|
764
764
|
fileName: "Dialog/Dialog.vue",
|
|
765
765
|
dirPath: "components/UI",
|
|
766
766
|
fileContent:
|
|
767
|
-
'<template>\n <DialogRoot v-bind="forwarded">\n <slot
|
|
767
|
+
'<template>\n <DialogRoot v-bind="forwarded">\n <slot/>\n </DialogRoot>\n</template>\n\n<script lang="ts" setup>\n import { DialogRoot, useForwardPropsEmits } from "radix-vue";\n import type { DialogRootEmits, DialogRootProps } from "radix-vue";\n\n const props = defineProps<DialogRootProps>();\n const emit = defineEmits<DialogRootEmits>();\n const forwarded = useForwardPropsEmits(props, emit);\n</script>\n',
|
|
768
768
|
},
|
|
769
769
|
{
|
|
770
770
|
fileName: "Dialog/Footer.vue",
|
|
771
771
|
dirPath: "components/UI",
|
|
772
772
|
fileContent:
|
|
773
|
-
'<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot
|
|
773
|
+
'<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n as: "div",\n }\n );\n\n const styles = tv({\n base: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",\n });\n</script>\n',
|
|
774
774
|
},
|
|
775
775
|
{
|
|
776
776
|
fileName: "Dialog/Header.vue",
|
|
777
777
|
dirPath: "components/UI",
|
|
778
778
|
fileContent:
|
|
779
|
-
'<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot
|
|
779
|
+
'<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n as: "div",\n }\n );\n\n const styles = tv({\n base: "flex flex-col space-y-1.5 text-center sm:text-left",\n });\n</script>\n',
|
|
780
780
|
},
|
|
781
781
|
{
|
|
782
782
|
fileName: "Dialog/Overlay.vue",
|
|
@@ -788,7 +788,7 @@ export default [
|
|
|
788
788
|
fileName: "Dialog/Portal.vue",
|
|
789
789
|
dirPath: "components/UI",
|
|
790
790
|
fileContent:
|
|
791
|
-
'<template>\n <DialogPortal v-bind="props">\n <slot
|
|
791
|
+
'<template>\n <DialogPortal v-bind="props">\n <slot />\n </DialogPortal>\n</template>\n\n<script lang="ts" setup>\n import { DialogPortal } from "radix-vue";\n import type { DialogPortalProps } from "radix-vue";\n\n const props = defineProps<DialogPortalProps>();\n</script>\n',
|
|
792
792
|
},
|
|
793
793
|
{
|
|
794
794
|
fileName: "Dialog/Title.vue",
|
|
@@ -800,7 +800,7 @@ export default [
|
|
|
800
800
|
fileName: "Dialog/Trigger.vue",
|
|
801
801
|
dirPath: "components/UI",
|
|
802
802
|
fileContent:
|
|
803
|
-
'<template>\n <DialogTrigger v-bind="props">\n <slot
|
|
803
|
+
'<template>\n <DialogTrigger v-bind="props">\n <slot />\n </DialogTrigger>\n</template>\n\n<script lang="ts" setup>\n import { DialogTrigger } from "radix-vue";\n import type { DialogTriggerProps } from "radix-vue";\n\n const props = defineProps<DialogTriggerProps>();\n</script>\n',
|
|
804
804
|
},
|
|
805
805
|
],
|
|
806
806
|
utils: [],
|
|
@@ -901,19 +901,19 @@ export default [
|
|
|
901
901
|
fileName: "DropdownMenu/Content.vue",
|
|
902
902
|
dirPath: "components/UI",
|
|
903
903
|
fileContent:
|
|
904
|
-
'<template>\n <UiDropdownMenuPortal>\n <DropdownMenuContent\n v-bind="{ ...forwarded, ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot
|
|
904
|
+
'<template>\n <UiDropdownMenuPortal>\n <DropdownMenuContent\n v-bind="{ ...forwarded, ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot/>\n </DropdownMenuContent>\n </UiDropdownMenuPortal>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuContent, useForwardPropsEmits } from "radix-vue";\n import type { DropdownMenuContentEmits, DropdownMenuContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = withDefaults(\n defineProps<\n DropdownMenuContentProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n loop: true,\n align: "center",\n sideOffset: 5,\n side: "bottom",\n avoidCollisions: true,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<DropdownMenuContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-accent-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n</script>\n',
|
|
905
905
|
},
|
|
906
906
|
{
|
|
907
907
|
fileName: "DropdownMenu/DropdownMenu.vue",
|
|
908
908
|
dirPath: "components/UI",
|
|
909
909
|
fileContent:
|
|
910
|
-
'<template>\n <DropdownMenuRoot v-bind="forwarded">\n <slot
|
|
910
|
+
'<template>\n <DropdownMenuRoot v-bind="forwarded">\n <slot/>\n </DropdownMenuRoot>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuRoot, useForwardPropsEmits } from "radix-vue";\n import type { DropdownMenuRootEmits, DropdownMenuRootProps } from "radix-vue";\n\n const props = defineProps<DropdownMenuRootProps>();\n\n const emit = defineEmits<DropdownMenuRootEmits>();\n const forwarded = useForwardPropsEmits(props, emit);\n</script>\n',
|
|
911
911
|
},
|
|
912
912
|
{
|
|
913
913
|
fileName: "DropdownMenu/Group.vue",
|
|
914
914
|
dirPath: "components/UI",
|
|
915
915
|
fileContent:
|
|
916
|
-
'<template>\n <DropdownMenuGroup v-bind="props">\n <slot
|
|
916
|
+
'<template>\n <DropdownMenuGroup v-bind="props">\n <slot/>\n </DropdownMenuGroup>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuGroup } from "radix-vue";\n import type { DropdownMenuGroupProps } from "radix-vue";\n\n const props = defineProps<DropdownMenuGroupProps>();\n</script>\n',
|
|
917
917
|
},
|
|
918
918
|
{
|
|
919
919
|
fileName: "DropdownMenu/Item.vue",
|
|
@@ -937,13 +937,13 @@ export default [
|
|
|
937
937
|
fileName: "DropdownMenu/Portal.vue",
|
|
938
938
|
dirPath: "components/UI",
|
|
939
939
|
fileContent:
|
|
940
|
-
'<template>\n <DropdownMenuPortal v-bind="props">\n <slot
|
|
940
|
+
'<template>\n <DropdownMenuPortal v-bind="props">\n <slot/>\n </DropdownMenuPortal>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuPortal } from "radix-vue";\n import type { DropdownMenuPortalProps } from "radix-vue";\n\n const props = defineProps<DropdownMenuPortalProps>();\n</script>\n',
|
|
941
941
|
},
|
|
942
942
|
{
|
|
943
943
|
fileName: "DropdownMenu/RadioGroup.vue",
|
|
944
944
|
dirPath: "components/UI",
|
|
945
945
|
fileContent:
|
|
946
|
-
'<template>\n <DropdownMenuRadioGroup v-bind="forwarded">\n <slot
|
|
946
|
+
'<template>\n <DropdownMenuRadioGroup v-bind="forwarded">\n <slot/>\n </DropdownMenuRadioGroup>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuRadioGroup, useForwardPropsEmits } from "radix-vue";\n import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from "radix-vue";\n\n const props = defineProps<DropdownMenuRadioGroupProps>();\n\n const emits = defineEmits<DropdownMenuRadioGroupEmits>();\n\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
|
|
947
947
|
},
|
|
948
948
|
{
|
|
949
949
|
fileName: "DropdownMenu/RadioItem.vue",
|
|
@@ -967,25 +967,25 @@ export default [
|
|
|
967
967
|
fileName: "DropdownMenu/Sub.vue",
|
|
968
968
|
dirPath: "components/UI",
|
|
969
969
|
fileContent:
|
|
970
|
-
'<template>\n <DropdownMenuSub v-bind="forwarded">\n <slot
|
|
970
|
+
'<template>\n <DropdownMenuSub v-bind="forwarded">\n <slot/>\n </DropdownMenuSub>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuSub, useForwardPropsEmits } from "radix-vue";\n import type { DropdownMenuSubEmits, DropdownMenuSubProps } from "radix-vue";\n\n const props = defineProps<DropdownMenuSubProps>();\n const emits = defineEmits<DropdownMenuSubEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
|
|
971
971
|
},
|
|
972
972
|
{
|
|
973
973
|
fileName: "DropdownMenu/SubContent.vue",
|
|
974
974
|
dirPath: "components/UI",
|
|
975
975
|
fileContent:
|
|
976
|
-
'<template>\n <UiDropdownMenuPortal :to="to">\n <DropdownMenuSubContent\n v-bind="{ ...forwarded, ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot
|
|
976
|
+
'<template>\n <UiDropdownMenuPortal :to="to">\n <DropdownMenuSubContent\n v-bind="{ ...forwarded, ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot/>\n </DropdownMenuSubContent>\n </UiDropdownMenuPortal>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuSubContent, useForwardPropsEmits } from "radix-vue";\n import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n const props = withDefaults(\n defineProps<\n DropdownMenuSubContentProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n /** The element to render the portal into */\n to?: string | HTMLElement;\n }\n >(),\n {\n loop: true,\n sideOffset: 8,\n avoidCollisions: true,\n collisionPadding: 5,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<DropdownMenuSubContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "to"), emits);\n\n const styles = tv({\n base: "z-50 min-w-[180px] overflow-hidden rounded-md border bg-popover p-1 text-accent-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n</script>\n',
|
|
977
977
|
},
|
|
978
978
|
{
|
|
979
979
|
fileName: "DropdownMenu/SubTrigger.vue",
|
|
980
980
|
dirPath: "components/UI",
|
|
981
981
|
fileContent:
|
|
982
|
-
'<template>\n <DropdownMenuSubTrigger\n v-bind="reactiveOmit(props, \'class\', \'inset\', \'icon\', \'title\', \'trailingIcon\')"\n :class="styles({ inset, class: props.class })"\n >\n <slot>\n <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n <span v-if="title">{{ title }}</span>\n </slot>\n <Icon\n class="ml-auto h-4 w-4 text-muted-foreground"\n :name="trailingIcon || \'lucide:chevron-right\'"\n />\n </DropdownMenuSubTrigger>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuSubTrigger
|
|
982
|
+
'<template>\n <DropdownMenuSubTrigger\n v-bind="reactiveOmit(props, \'class\', \'inset\', \'icon\', \'title\', \'trailingIcon\')"\n :class="styles({ inset, class: props.class })"\n >\n <slot>\n <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n <span v-if="title">{{ title }}</span>\n </slot>\n <Icon\n class="ml-auto h-4 w-4 text-muted-foreground"\n :name="trailingIcon || \'lucide:chevron-right\'"\n />\n </DropdownMenuSubTrigger>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuSubTrigger } from "radix-vue";\n import type { DropdownMenuSubTriggerProps } from "radix-vue";\n\n const props = defineProps<\n DropdownMenuSubTriggerProps & {\n /**Custom class(es) to add to the element */\n class?: any;\n /** Wether an indentation should be added to the item or not */\n inset?: boolean;\n /** The icon to display */\n icon?: string;\n /** The title for the item */\n title?: string;\n /** The trailing icon to display */\n trailingIcon?: string;\n }\n >();\n\n const styles = tv({\n base: "flex cursor-default select-none items-center gap-3 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",\n variants: {\n inset: {\n true: "pl-8",\n },\n },\n });\n</script>\n',
|
|
983
983
|
},
|
|
984
984
|
{
|
|
985
985
|
fileName: "DropdownMenu/Trigger.vue",
|
|
986
986
|
dirPath: "components/UI",
|
|
987
987
|
fileContent:
|
|
988
|
-
'<template>\n <DropdownMenuTrigger v-bind="props">\n <slot
|
|
988
|
+
'<template>\n <DropdownMenuTrigger v-bind="props">\n <slot/>\n </DropdownMenuTrigger>\n</template>\n\n<script lang="ts" setup>\n import { DropdownMenuTrigger } from "radix-vue";\n import type { DropdownMenuTriggerProps } from "radix-vue";\n\n const props = defineProps<DropdownMenuTriggerProps>();\n</script>\n',
|
|
989
989
|
},
|
|
990
990
|
],
|
|
991
991
|
utils: [],
|
|
@@ -1000,7 +1000,7 @@ export default [
|
|
|
1000
1000
|
fileName: "Dropfile.vue",
|
|
1001
1001
|
dirPath: "components/UI",
|
|
1002
1002
|
fileContent:
|
|
1003
|
-
'<template>\r\n <div
|
|
1003
|
+
'<template>\r\n <div ref="dropZoneRef" :class="styles({ isOverDropZone, class: props.class })" @click="open()">\r\n <slot name="message">\r\n <div class="py-10 text-center">\r\n <slot name="icon">\r\n <div\r\n v-if="icon"\r\n class="inline-flex items-center justify-center rounded-md border p-2 transition"\r\n :class="[isOverDropZone && \'animate-bounce border-primary\']"\r\n >\r\n <Icon\r\n :name="icon"\r\n class="h-7 w-7 opacity-70"\r\n :class="[isOverDropZone && \'text-primary\']"\r\n />\r\n </div>\r\n </slot>\r\n <slot name="title">\r\n <p class="mt-5 text-sm font-medium" v-html="title" />\r\n </slot>\r\n <slot name="subtext">\r\n <p class="mt-1 text-sm text-muted-foreground/60" v-html="subtext" />\r\n </slot>\r\n </div>\r\n </slot>\r\n </div>\r\n</template>\r\n\r\n<script setup lang="ts">\r\n const props = withDefaults(\r\n defineProps<{\r\n /**\r\n * The text to display as the title of the dropzone.\r\n */\r\n title?: string;\r\n /**\r\n * The text to display as the subtext of the dropzone.\r\n */\r\n subtext?: string;\r\n /**\r\n * The icon to display in the dropzone.\r\n */\r\n icon?: string;\r\n /**\r\n * The function to call when files are dropped.\r\n */\r\n // eslint-disable-next-line @typescript-eslint/ban-types\r\n onDrop?: Function;\r\n /**\r\n * Whether or not to allow multiple files to be picked. Does not affect drag and drop.\r\n */\r\n multiple?: boolean;\r\n /**\r\n * The file types to accept. Does not affect drag and drop.\r\n */\r\n accept?: string;\r\n class?: any;\r\n }>(),\r\n {\r\n title: "Click to upload or drag & drop files.",\r\n subtext: "All file types accepted",\r\n icon: "heroicons:cloud-arrow-up",\r\n multiple: true,\r\n accept: "*",\r\n }\r\n );\r\n\r\n const { open, reset, onChange } = useFileDialog({\r\n multiple: props.multiple,\r\n accept: props.accept,\r\n });\r\n\r\n onChange((files: FileList | null) => {\r\n if (files?.length) {\r\n handleDrop(Array.from(files || []));\r\n reset();\r\n }\r\n });\r\n\r\n const dropZoneRef = ref<HTMLDivElement>();\r\n const emits = defineEmits<{\r\n dropped: [any];\r\n }>();\r\n\r\n const handleDrop = (files: File[] | null) => {\r\n if (!files) return;\r\n if (props.onDrop) props.onDrop(files);\r\n emits("dropped", files);\r\n };\r\n\r\n const { isOverDropZone } = useDropZone(dropZoneRef, handleDrop);\r\n\r\n const styles = tv({\r\n base: "flex w-full cursor-pointer items-center justify-center rounded-md border border-dashed transition hover:border-primary",\r\n variants: {\r\n isOverDropZone: { true: "border-primary bg-primary/10" },\r\n },\r\n });\r\n</script>\r\n',
|
|
1004
1004
|
},
|
|
1005
1005
|
],
|
|
1006
1006
|
utils: [],
|
|
@@ -1031,7 +1031,7 @@ export default [
|
|
|
1031
1031
|
fileName: "Form/Description.vue",
|
|
1032
1032
|
dirPath: "components/UI",
|
|
1033
1033
|
fileContent:
|
|
1034
|
-
'<template>\n <p :id="formDescriptionId" :class="styles({ class: props.class })" v-bind="$attrs">\n <slot>\n <ClientOnly>\n <p v-html="description"
|
|
1034
|
+
'<template>\n <p :id="formDescriptionId" :class="styles({ class: props.class })" v-bind="$attrs">\n <slot>\n <ClientOnly>\n <p v-html="description"/>\n </ClientOnly>\n </slot>\n </p>\n</template>\n<script lang="ts" setup>\n defineOptions({ inheritAttrs: false });\n\n const { formDescriptionId } = useFormField();\n const props = defineProps<{ class?: any; description?: string }>();\n const styles = tv({ base: "text-sm text-muted-foreground" });\n</script>\n',
|
|
1035
1035
|
},
|
|
1036
1036
|
{
|
|
1037
1037
|
fileName: "Form/Item.vue",
|
|
@@ -1084,25 +1084,25 @@ export default [
|
|
|
1084
1084
|
fileName: "HoverCard/Content.vue",
|
|
1085
1085
|
dirPath: "components/UI",
|
|
1086
1086
|
fileContent:
|
|
1087
|
-
'<template>\n <UiHoverCardPortal :to="to">\n <HoverCardContent\n v-bind="{ ...reactiveOmit(props, \'class\', \'to\'), ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot
|
|
1087
|
+
'<template>\n <UiHoverCardPortal :to="to">\n <HoverCardContent\n v-bind="{ ...reactiveOmit(props, \'class\', \'to\'), ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot/>\n </HoverCardContent>\n </UiHoverCardPortal>\n</template>\n\n<script lang="ts" setup>\n import { HoverCardContent } from "radix-vue";\n import type { HoverCardContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = withDefaults(\n defineProps<\n HoverCardContentProps & {\n /** Custom class(es) to add to the content */\n class?: any;\n /** The element or selector the content should be positioned relative to */\n to?: string | HTMLElement;\n }\n >(),\n {\n side: "bottom",\n sideOffset: 5,\n align: "center",\n avoidCollisions: true,\n sticky: "partial",\n }\n );\n\n const styles = tv({\n base: "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n</script>\n',
|
|
1088
1088
|
},
|
|
1089
1089
|
{
|
|
1090
1090
|
fileName: "HoverCard/HoverCard.vue",
|
|
1091
1091
|
dirPath: "components/UI",
|
|
1092
1092
|
fileContent:
|
|
1093
|
-
'<template>\n <HoverCardRoot v-bind="forwarded">\n <slot
|
|
1093
|
+
'<template>\n <HoverCardRoot v-bind="forwarded">\n <slot/>\n </HoverCardRoot>\n</template>\n\n<script lang="ts" setup>\n import { HoverCardRoot, useForwardPropsEmits } from "radix-vue";\n import type { HoverCardRootEmits, HoverCardRootProps } from "radix-vue";\n\n const props = withDefaults(defineProps<HoverCardRootProps>(), {\n openDelay: 200,\n closeDelay: 200,\n });\n\n const emits = defineEmits<HoverCardRootEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
|
|
1094
1094
|
},
|
|
1095
1095
|
{
|
|
1096
1096
|
fileName: "HoverCard/Portal.vue",
|
|
1097
1097
|
dirPath: "components/UI",
|
|
1098
1098
|
fileContent:
|
|
1099
|
-
'<template>\n <HoverCardPortal v-bind="props">\n <slot
|
|
1099
|
+
'<template>\n <HoverCardPortal v-bind="props">\n <slot/>\n </HoverCardPortal>\n</template>\n\n<script lang="ts" setup>\n import { HoverCardPortal } from "radix-vue";\n import type { HoverCardPortalProps } from "radix-vue";\n\n const props = defineProps<HoverCardPortalProps>();\n</script>\n',
|
|
1100
1100
|
},
|
|
1101
1101
|
{
|
|
1102
1102
|
fileName: "HoverCard/Trigger.vue",
|
|
1103
1103
|
dirPath: "components/UI",
|
|
1104
1104
|
fileContent:
|
|
1105
|
-
'<template>\n <HoverCardTrigger v-bind="props">\n <slot
|
|
1105
|
+
'<template>\n <HoverCardTrigger v-bind="props">\n <slot/>\n </HoverCardTrigger>\n</template>\n\n<script lang="ts" setup>\n import { HoverCardTrigger } from "radix-vue";\n import type { HoverCardTriggerProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n const props = defineProps<HoverCardTriggerProps>();\n</script>\n',
|
|
1106
1106
|
},
|
|
1107
1107
|
],
|
|
1108
1108
|
utils: [],
|
|
@@ -1118,7 +1118,7 @@ export default [
|
|
|
1118
1118
|
fileName: "Input.vue",
|
|
1119
1119
|
dirPath: "components/UI",
|
|
1120
1120
|
fileContent:
|
|
1121
|
-
'<template>\r\n <input :class="styles({ class: props.class })"
|
|
1121
|
+
'<template>\r\n <input v-bind="props" v-model="localModel" :class="styles({ class: props.class })" >\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n const props = withDefaults(\r\n defineProps<{\r\n class?: any;\r\n id?: string;\r\n name?: string;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n required?: boolean;\r\n type?: string;\r\n modelValue?: any;\r\n }>(),\r\n { type: "text" }\r\n );\r\n const emits = defineEmits<{\r\n "update:modelValue": [value: any];\r\n }>();\r\n const localModel = useVModel(props, "modelValue", emits);\r\n\r\n const styles = tv({\r\n base: "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 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\r\n });\r\n</script>\r\n',
|
|
1122
1122
|
},
|
|
1123
1123
|
],
|
|
1124
1124
|
utils: [],
|
|
@@ -1163,19 +1163,19 @@ export default [
|
|
|
1163
1163
|
fileName: "List/Content.vue",
|
|
1164
1164
|
dirPath: "components/UI",
|
|
1165
1165
|
fileContent:
|
|
1166
|
-
'<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot
|
|
1166
|
+
'<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n as: "div",\n }\n );\n\n const styles = tv({\n base: "flex flex-col gap-1 leading-none",\n });\n</script>\n',
|
|
1167
1167
|
},
|
|
1168
1168
|
{
|
|
1169
1169
|
fileName: "List/Item.vue",
|
|
1170
1170
|
dirPath: "components/UI",
|
|
1171
1171
|
fileContent:
|
|
1172
|
-
'<template>\n <component\n :is="eltype"\n :href="href"\n :to="to"\n
|
|
1172
|
+
'<template>\n <component\n :is="eltype"\n :href="href"\n :to="to"\n :class="\n styles({\n hover: Boolean(onClick) || Boolean(to) || Boolean(href),\n class: props.class,\n })\n "\n @click="onClick"\n >\n <slot/>\n </component>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n /**Custom class(es) to add to the element */\n class?: any;\n /** Function called when the item is clicked */\n onClick?: () => void;\n /** The location that the item should navigate to when clicked */\n to?: string;\n /** The href for the `a` tag */\n href?: string;\n }>();\n\n const styles = tv({\n base: "flex w-full items-center gap-5 px-4 py-2",\n variants: {\n hover: {\n true: "cursor-pointer outline-none hover:bg-muted focus-visible:ring-4 focus-visible:ring-primary/10",\n },\n },\n });\n\n const eltype = computed(() => {\n if (props.to || props.href) return resolveComponent("NuxtLink");\n if (props.onClick) return "button";\n return "li";\n });\n</script>\n',
|
|
1173
1173
|
},
|
|
1174
1174
|
{
|
|
1175
1175
|
fileName: "List/List.vue",
|
|
1176
1176
|
dirPath: "components/UI",
|
|
1177
1177
|
fileContent:
|
|
1178
|
-
'<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot
|
|
1178
|
+
'<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n as: "ul",\n }\n );\n\n const styles = tv({\n base: "w-full py-2",\n });\n</script>\n',
|
|
1179
1179
|
},
|
|
1180
1180
|
{
|
|
1181
1181
|
fileName: "List/Subtitle.vue",
|
|
@@ -1214,13 +1214,13 @@ export default [
|
|
|
1214
1214
|
fileName: "Menubar/Content.vue",
|
|
1215
1215
|
dirPath: "components/UI",
|
|
1216
1216
|
fileContent:
|
|
1217
|
-
'<template>\n <UiMenubarPortal :to="to">\n <MenubarContent v-bind="{ ...forwarded, ...$attrs }" :class="styles({ class: props.class })">\n <slot
|
|
1217
|
+
'<template>\n <UiMenubarPortal :to="to">\n <MenubarContent v-bind="{ ...forwarded, ...$attrs }" :class="styles({ class: props.class })">\n <slot/>\n </MenubarContent>\n </UiMenubarPortal>\n</template>\n\n<script lang="ts" setup>\n import { MenubarContent, useForwardPropsEmits } from "radix-vue";\n import type { MenubarContentProps, MenubarSubContentEmits } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = withDefaults(\n defineProps<\n MenubarContentProps & {\n to?: string | HTMLElement;\n class?: any;\n }\n >(),\n {\n loop: true,\n side: "bottom",\n sideOffset: 8,\n align: "start",\n alignOffset: -4,\n avoidCollisions: true,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<MenubarSubContentEmits>();\n\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "to"), emits);\n\n const styles = tv({\n base: "z-50 min-w-[220px] overflow-hidden rounded-md border bg-popover p-1 text-accent-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n</script>\n',
|
|
1218
1218
|
},
|
|
1219
1219
|
{
|
|
1220
1220
|
fileName: "Menubar/Group.vue",
|
|
1221
1221
|
dirPath: "components/UI",
|
|
1222
1222
|
fileContent:
|
|
1223
|
-
'<template>\n <MenubarGroup v-bind="props">\n <slot
|
|
1223
|
+
'<template>\n <MenubarGroup v-bind="props">\n <slot/>\n </MenubarGroup>\n</template>\n\n<script lang="ts" setup>\n import { MenubarGroup } from "radix-vue";\n import type { MenubarGroupProps } from "radix-vue";\n\n const props = defineProps<MenubarGroupProps>();\n</script>\n',
|
|
1224
1224
|
},
|
|
1225
1225
|
{
|
|
1226
1226
|
fileName: "Menubar/Item.vue",
|
|
@@ -1238,31 +1238,31 @@ export default [
|
|
|
1238
1238
|
fileName: "Menubar/Label.vue",
|
|
1239
1239
|
dirPath: "components/UI",
|
|
1240
1240
|
fileContent:
|
|
1241
|
-
'<template>\n <MenubarLabel\n :class="styles({ inset, class: props.class })"\n v-bind="reactiveOmit(props, \'class\', \'inset\')"\n >\n <slot
|
|
1241
|
+
'<template>\n <MenubarLabel\n :class="styles({ inset, class: props.class })"\n v-bind="reactiveOmit(props, \'class\', \'inset\')"\n >\n <slot/>\n </MenubarLabel>\n</template>\n\n<script lang="ts" setup>\n import { MenubarLabel } from "radix-vue";\n import type { MenubarLabelProps } from "radix-vue";\n\n const props = defineProps<\n MenubarLabelProps & {\n class?: any;\n inset?: boolean;\n }\n >();\n\n const styles = tv({\n base: "px-2 py-1.5 text-sm font-semibold",\n variants: {\n inset: {\n true: "pl-8",\n },\n },\n });\n</script>\n',
|
|
1242
1242
|
},
|
|
1243
1243
|
{
|
|
1244
1244
|
fileName: "Menubar/Menu.vue",
|
|
1245
1245
|
dirPath: "components/UI",
|
|
1246
1246
|
fileContent:
|
|
1247
|
-
'<template>\n <MenubarMenu v-bind="props">\n <slot
|
|
1247
|
+
'<template>\n <MenubarMenu v-bind="props">\n <slot/>\n </MenubarMenu>\n</template>\n\n<script lang="ts" setup>\n import { MenubarMenu } from "radix-vue";\n import type { MenubarMenuProps } from "radix-vue";\n\n const props = defineProps<MenubarMenuProps>();\n</script>\n',
|
|
1248
1248
|
},
|
|
1249
1249
|
{
|
|
1250
1250
|
fileName: "Menubar/Menubar.vue",
|
|
1251
1251
|
dirPath: "components/UI",
|
|
1252
1252
|
fileContent:
|
|
1253
|
-
'<template>\n <MenubarRoot v-bind="forwarded" :class="styles({ class: props.class })">\n <slot
|
|
1253
|
+
'<template>\n <MenubarRoot v-bind="forwarded" :class="styles({ class: props.class })">\n <slot/>\n </MenubarRoot>\n</template>\n\n<script lang="ts" setup>\n import { MenubarRoot, useForwardPropsEmits } from "radix-vue";\n import type { MenubarRootEmits, MenubarRootProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n MenubarRootProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n loop: true,\n }\n );\n\n const emits = defineEmits<MenubarRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "inline-flex h-10 items-center space-x-1 rounded-md border bg-background p-1",\n });\n</script>\n',
|
|
1254
1254
|
},
|
|
1255
1255
|
{
|
|
1256
1256
|
fileName: "Menubar/Portal.vue",
|
|
1257
1257
|
dirPath: "components/UI",
|
|
1258
1258
|
fileContent:
|
|
1259
|
-
'<template>\n <MenubarPortal v-bind="props">\n <slot
|
|
1259
|
+
'<template>\n <MenubarPortal v-bind="props">\n <slot/>\n </MenubarPortal>\n</template>\n\n<script lang="ts" setup>\n import { type MenubarPortalProps } from "radix-vue";\n\n const props = defineProps<MenubarPortalProps>();\n</script>\n',
|
|
1260
1260
|
},
|
|
1261
1261
|
{
|
|
1262
1262
|
fileName: "Menubar/RadioGroup.vue",
|
|
1263
1263
|
dirPath: "components/UI",
|
|
1264
1264
|
fileContent:
|
|
1265
|
-
'<template>\n <MenubarRadioGroup v-bind="forwarded">\n <slot
|
|
1265
|
+
'<template>\n <MenubarRadioGroup v-bind="forwarded">\n <slot/>\n </MenubarRadioGroup>\n</template>\n\n<script lang="ts" setup>\n import { MenubarRadioGroup, useForwardPropsEmits } from "radix-vue";\n import type { MenubarRadioGroupEmits, MenubarRadioGroupProps } from "radix-vue";\n\n const props = defineProps<MenubarRadioGroupProps>();\n const emits = defineEmits<MenubarRadioGroupEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
|
|
1266
1266
|
},
|
|
1267
1267
|
{
|
|
1268
1268
|
fileName: "Menubar/RadioItem.vue",
|
|
@@ -1286,13 +1286,13 @@ export default [
|
|
|
1286
1286
|
fileName: "Menubar/Sub.vue",
|
|
1287
1287
|
dirPath: "components/UI",
|
|
1288
1288
|
fileContent:
|
|
1289
|
-
'<template>\n <MenubarSub v-bind="forwarded">\n <slot
|
|
1289
|
+
'<template>\n <MenubarSub v-bind="forwarded">\n <slot/>\n </MenubarSub>\n</template>\n\n<script lang="ts" setup>\n import { MenubarSub, useForwardPropsEmits } from "radix-vue";\n import type { MenubarSubEmits, MenubarSubProps } from "radix-vue";\n\n const props = defineProps<MenubarSubProps>();\n const emits = defineEmits<MenubarSubEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
|
|
1290
1290
|
},
|
|
1291
1291
|
{
|
|
1292
1292
|
fileName: "Menubar/SubContent.vue",
|
|
1293
1293
|
dirPath: "components/UI",
|
|
1294
1294
|
fileContent:
|
|
1295
|
-
'<template>\n <UiMenubarPortal :to="to">\n <MenubarSubContent v-bind="{ ...forwarded, ...$attrs }" :class="styles({ class: props.class })">\n <slot
|
|
1295
|
+
'<template>\n <UiMenubarPortal :to="to">\n <MenubarSubContent v-bind="{ ...forwarded, ...$attrs }" :class="styles({ class: props.class })">\n <slot/>\n </MenubarSubContent>\n </UiMenubarPortal>\n</template>\n\n<script lang="ts" setup>\n import { MenubarSubContent, useForwardPropsEmits } from "radix-vue";\n import type { MenubarSubContentEmits, MenubarSubContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n const props = withDefaults(\n defineProps<\n MenubarSubContentProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n /** The target element to portal the component to */\n to?: string | HTMLElement;\n }\n >(),\n {\n loop: true,\n sideOffset: 5,\n avoidCollisions: true,\n collisionPadding: 8,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<MenubarSubContentEmits>();\n\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "to"), emits);\n\n const styles = tv({\n base: "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-accent-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n</script>\n',
|
|
1296
1296
|
},
|
|
1297
1297
|
{
|
|
1298
1298
|
fileName: "Menubar/SubTrigger.vue",
|
|
@@ -1304,7 +1304,7 @@ export default [
|
|
|
1304
1304
|
fileName: "Menubar/Trigger.vue",
|
|
1305
1305
|
dirPath: "components/UI",
|
|
1306
1306
|
fileContent:
|
|
1307
|
-
'<template>\n <MenubarTrigger :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot
|
|
1307
|
+
'<template>\n <MenubarTrigger :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </MenubarTrigger>\n</template>\n\n<script lang="ts" setup>\n import { MenubarTrigger } from "radix-vue";\n import type { MenubarTriggerProps } from "radix-vue";\n\n const props = defineProps<\n MenubarTriggerProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "flex cursor-pointer select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground",\n });\n</script>\n',
|
|
1308
1308
|
},
|
|
1309
1309
|
],
|
|
1310
1310
|
utils: [],
|
|
@@ -1320,7 +1320,7 @@ export default [
|
|
|
1320
1320
|
fileName: "NativeSelect.vue",
|
|
1321
1321
|
dirPath: "components/UI",
|
|
1322
1322
|
fileContent:
|
|
1323
|
-
'<template>\r\n <div class="relative">\r\n <select\r\n ref="select"\r\n
|
|
1323
|
+
'<template>\r\n <div class="relative">\r\n <select\r\n :id="id"\r\n ref="select"\r\n v-model="localModel"\r\n :multiple="multiple"\r\n :name="name"\r\n :size="size"\r\n :placeholder="placeholder"\r\n :disabled="disabled"\r\n :required="required"\r\n :class="styles({ class: props.class })"\r\n >\r\n <slot/>\r\n </select>\r\n <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center justify-center">\r\n <slot name="trailingIcon">\r\n <Icon\r\n :name="trailingIcon || \'lucide:chevrons-up-down\'"\r\n class="h-4 w-4 text-muted-foreground"\r\n />\r\n </slot>\r\n </span>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n const props = defineProps<{\r\n class?: any;\r\n id?: string;\r\n name?: string;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n required?: boolean;\r\n modelValue?: any;\r\n multiple?: boolean;\r\n size?: number;\r\n autofocus?: boolean;\r\n trailingIcon?: string;\r\n }>();\r\n const styles = tv({\r\n base: "h-10 w-full appearance-none rounded-md border border-input bg-background px-3 py-2 pr-10 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\r\n });\r\n\r\n const select = ref<HTMLSelectElement | null>(null);\r\n const emits = defineEmits<{\r\n "update:modelValue": [value: any];\r\n }>();\r\n\r\n const localModel = useVModel(props, "modelValue", emits);\r\n\r\n onMounted(() => {\r\n if (props.autofocus) {\r\n select.value?.focus();\r\n }\r\n });\r\n</script>\r\n',
|
|
1324
1324
|
},
|
|
1325
1325
|
],
|
|
1326
1326
|
utils: [],
|
|
@@ -1335,7 +1335,7 @@ export default [
|
|
|
1335
1335
|
fileName: "Navbar.vue",
|
|
1336
1336
|
dirPath: "components/UI",
|
|
1337
1337
|
fileContent:
|
|
1338
|
-
'<template>\n <Primitive :class="styles({ sticky, class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot
|
|
1338
|
+
'<template>\n <Primitive :class="styles({ sticky, class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n class?: any;\n sticky?: boolean;\n }\n >(),\n {\n as: "header",\n }\n );\n\n const styles = tv({\n base: "z-20 border-b bg-background/90 backdrop-blur",\n variants: {\n sticky: {\n true: "sticky top-0",\n },\n },\n });\n</script>\n',
|
|
1339
1339
|
},
|
|
1340
1340
|
],
|
|
1341
1341
|
utils: [],
|
|
@@ -1350,43 +1350,43 @@ export default [
|
|
|
1350
1350
|
fileName: "NavigationMenu/Content.vue",
|
|
1351
1351
|
dirPath: "components/UI",
|
|
1352
1352
|
fileContent:
|
|
1353
|
-
'<template>\n <NavigationMenuContent v-bind="forwarded" :class="styles({ class: props.class })">\n <slot
|
|
1353
|
+
'<template>\n <NavigationMenuContent v-bind="forwarded" :class="styles({ class: props.class })">\n <slot/>\n </NavigationMenuContent>\n</template>\n\n<script lang="ts" setup>\n import { NavigationMenuContent, useForwardPropsEmits } from "radix-vue";\n import type { NavigationMenuContentEmits, NavigationMenuContentProps } from "radix-vue";\n\n const props = defineProps<\n NavigationMenuContentProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const emits = defineEmits<NavigationMenuContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",\n });\n</script>\n',
|
|
1354
1354
|
},
|
|
1355
1355
|
{
|
|
1356
1356
|
fileName: "NavigationMenu/Indicator.vue",
|
|
1357
1357
|
dirPath: "components/UI",
|
|
1358
1358
|
fileContent:
|
|
1359
|
-
'<template>\n <NavigationMenuIndicator\n v-bind="reactiveOmit(props, \'class\')"\n :class="styles({ class: props.class })"\n >\n <slot
|
|
1359
|
+
'<template>\n <NavigationMenuIndicator\n v-bind="reactiveOmit(props, \'class\')"\n :class="styles({ class: props.class })"\n >\n <slot/>\n <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />\n </NavigationMenuIndicator>\n</template>\n\n<script lang="ts" setup>\n import { NavigationMenuIndicator } from "radix-vue";\n import type { NavigationMenuIndicatorProps } from "radix-vue";\n\n const props = defineProps<\n NavigationMenuIndicatorProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",\n });\n</script>\n',
|
|
1360
1360
|
},
|
|
1361
1361
|
{
|
|
1362
1362
|
fileName: "NavigationMenu/Item.vue",
|
|
1363
1363
|
dirPath: "components/UI",
|
|
1364
1364
|
fileContent:
|
|
1365
|
-
'<template>\n <NavigationMenuItem v-bind="props">\n <slot
|
|
1365
|
+
'<template>\n <NavigationMenuItem v-bind="props">\n <slot/>\n </NavigationMenuItem>\n</template>\n\n<script lang="ts" setup>\n import { NavigationMenuItem } from "radix-vue";\n import type { NavigationMenuItemProps } from "radix-vue";\n\n const props = defineProps<NavigationMenuItemProps>();\n</script>\n',
|
|
1366
1366
|
},
|
|
1367
1367
|
{
|
|
1368
1368
|
fileName: "NavigationMenu/Link.vue",
|
|
1369
1369
|
dirPath: "components/UI",
|
|
1370
1370
|
fileContent:
|
|
1371
|
-
'<template>\n <NavigationMenuLink v-bind="forwarded">\n <slot
|
|
1371
|
+
'<template>\n <NavigationMenuLink v-bind="forwarded">\n <slot/>\n </NavigationMenuLink>\n</template>\n\n<script lang="ts" setup>\n import { NavigationMenuLink, useForwardPropsEmits } from "radix-vue";\n import type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from "radix-vue";\n\n const props = defineProps<NavigationMenuLinkProps>();\n const emits = defineEmits<NavigationMenuLinkEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
|
|
1372
1372
|
},
|
|
1373
1373
|
{
|
|
1374
1374
|
fileName: "NavigationMenu/List.vue",
|
|
1375
1375
|
dirPath: "components/UI",
|
|
1376
1376
|
fileContent:
|
|
1377
|
-
'<template>\n <NavigationMenuList v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot
|
|
1377
|
+
'<template>\n <NavigationMenuList v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot/>\n </NavigationMenuList>\n</template>\n\n<script lang="ts" setup>\n import { NavigationMenuList } from "radix-vue";\n import type { NavigationMenuListProps } from "radix-vue";\n\n const props = defineProps<\n NavigationMenuListProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "group flex flex-1 list-none items-center justify-center space-x-1",\n });\n</script>\n',
|
|
1378
1378
|
},
|
|
1379
1379
|
{
|
|
1380
1380
|
fileName: "NavigationMenu/NavigationMenu.vue",
|
|
1381
1381
|
dirPath: "components/UI",
|
|
1382
1382
|
fileContent:
|
|
1383
|
-
'<template>\r\n <NavigationMenuRoot :class="styles({ class: props.class })" v-bind="forwarded">\r\n <slot
|
|
1383
|
+
'<template>\r\n <NavigationMenuRoot :class="styles({ class: props.class })" v-bind="forwarded">\r\n <slot/>\r\n <slot name="viewport">\r\n <UiNavigationMenuViewport />\r\n </slot>\r\n </NavigationMenuRoot>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { NavigationMenuRoot, useForwardPropsEmits } from "radix-vue";\r\n import type { NavigationMenuRootEmits, NavigationMenuRootProps } from "radix-vue";\r\n\r\n const props = defineProps<\r\n NavigationMenuRootProps & {\r\n /** Custom class(es) to add to the parent */\r\n class?: any;\r\n }\r\n >();\r\n const emits = defineEmits<NavigationMenuRootEmits>();\r\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\r\n\r\n const styles = tv({\r\n base: "relative flex max-w-max flex-1 items-center justify-center",\r\n });\r\n</script>\r\n',
|
|
1384
1384
|
},
|
|
1385
1385
|
{
|
|
1386
1386
|
fileName: "NavigationMenu/Sub.vue",
|
|
1387
1387
|
dirPath: "components/UI",
|
|
1388
1388
|
fileContent:
|
|
1389
|
-
'<template>\n <NavigationMenuSub v-bind="forwarded">\n <slot
|
|
1389
|
+
'<template>\n <NavigationMenuSub v-bind="forwarded">\n <slot/>\n </NavigationMenuSub>\n</template>\n\n<script lang="ts" setup>\n import { NavigationMenuSub, useForwardPropsEmits } from "radix-vue";\n import type { NavigationMenuSubEmits, NavigationMenuSubProps } from "radix-vue";\n\n const props = defineProps<NavigationMenuSubProps>();\n const emits = defineEmits<NavigationMenuSubEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
|
|
1390
1390
|
},
|
|
1391
1391
|
{
|
|
1392
1392
|
fileName: "NavigationMenu/Trigger.vue",
|
|
@@ -1437,7 +1437,7 @@ export default [
|
|
|
1437
1437
|
fileName: "Pagination/List.vue",
|
|
1438
1438
|
dirPath: "components/UI",
|
|
1439
1439
|
fileContent:
|
|
1440
|
-
'<template>\n <PaginationList\n v-slot="{ items }"\n :class="styles({ class: props.class })"\n v-bind="reactiveOmit(props, \'class\')"\n >\n <slot :items="items"
|
|
1440
|
+
'<template>\n <PaginationList\n v-slot="{ items }"\n :class="styles({ class: props.class })"\n v-bind="reactiveOmit(props, \'class\')"\n >\n <slot :items="items"/>\n </PaginationList>\n</template>\n\n<script lang="ts" setup>\n import { PaginationList } from "radix-vue";\n import type { PaginationListProps } from "radix-vue";\n\n const props = defineProps<\n PaginationListProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "flex items-center gap-1",\n });\n</script>\n',
|
|
1441
1441
|
},
|
|
1442
1442
|
{
|
|
1443
1443
|
fileName: "Pagination/Next.vue",
|
|
@@ -1449,7 +1449,7 @@ export default [
|
|
|
1449
1449
|
fileName: "Pagination/Pagination.vue",
|
|
1450
1450
|
dirPath: "components/UI",
|
|
1451
1451
|
fileContent:
|
|
1452
|
-
'<template>\n <PaginationRoot v-bind="forwarded">\n <slot>\n <UiPaginationList v-slot="{ items }">\n <slot name="first"><UiPaginationFirst
|
|
1452
|
+
'<template>\n <PaginationRoot v-bind="forwarded">\n <slot>\n <UiPaginationList v-slot="{ items }">\n <slot name="first"><UiPaginationFirst as-child :icon="firstIcon" /> </slot>\n <slot name="prev"><UiPaginationPrev as-child :icon="prevIcon" /> </slot>\n\n <template v-for="(page, index) in items" :key="index">\n <UiPaginationItem v-if="page.type === \'page\'" as-child v-bind="page" />\n <UiPaginationEllipsis\n v-else-if="page.type === \'ellipsis\'"\n as-child\n v-bind="page"\n :icon="ellipsisIcon"\n />\n </template>\n <slot name="next"><UiPaginationNext as-child :icon="nextIcon" /> </slot>\n <slot name="last"><UiPaginationLast as-child :icon="lastIcon" /></slot>\n </UiPaginationList>\n </slot>\n </PaginationRoot>\n</template>\n\n<script lang="ts" setup>\n import { PaginationRoot, useForwardPropsEmits } from "radix-vue";\n import type { PaginationRootEmits, PaginationRootProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PaginationRootProps & {\n ellipsisIcon?: string;\n firstIcon?: string;\n lastIcon?: string;\n nextIcon?: string;\n prevIcon?: string;\n }\n >(),\n {\n defaultPage: 1,\n total: 10,\n itemsPerPage: 10,\n siblingCount: 3,\n showEdges: true,\n ellipsisIcon: "lucide:more-horizontal",\n firstIcon: "lucide:chevrons-left",\n lastIcon: "lucide:chevrons-right",\n nextIcon: "lucide:chevron-right",\n prevIcon: "lucide:chevron-left",\n }\n );\n\n const emits = defineEmits<PaginationRootEmits>();\n const forwarded = useForwardPropsEmits(\n reactiveOmit(props, "ellipsisIcon", "firstIcon", "lastIcon", "nextIcon", "prevIcon"),\n emits\n );\n</script>\n',
|
|
1453
1453
|
},
|
|
1454
1454
|
{
|
|
1455
1455
|
fileName: "Pagination/Prev.vue",
|
|
@@ -1491,7 +1491,7 @@ export default [
|
|
|
1491
1491
|
fileName: "Popover/Anchor.vue",
|
|
1492
1492
|
dirPath: "components/UI",
|
|
1493
1493
|
fileContent:
|
|
1494
|
-
'<template>\n <PopoverAnchor v-bind="forwarded">\n <slot
|
|
1494
|
+
'<template>\n <PopoverAnchor v-bind="forwarded">\n <slot/>\n </PopoverAnchor>\n</template>\n\n<script lang="ts" setup>\n import { PopoverAnchor, useForwardProps } from "radix-vue";\n import type { PopoverAnchorProps } from "radix-vue";\n\n const props = defineProps<PopoverAnchorProps>();\n const forwarded = useForwardProps(props);\n</script>\n',
|
|
1495
1495
|
},
|
|
1496
1496
|
{
|
|
1497
1497
|
fileName: "Popover/Arrow.vue",
|
|
@@ -1503,31 +1503,31 @@ export default [
|
|
|
1503
1503
|
fileName: "Popover/Close.vue",
|
|
1504
1504
|
dirPath: "components/UI",
|
|
1505
1505
|
fileContent:
|
|
1506
|
-
'<template>\n <PopoverClose v-bind="forwarded">\n <slot
|
|
1506
|
+
'<template>\n <PopoverClose v-bind="forwarded">\n <slot/>\n </PopoverClose>\n</template>\n\n<script lang="ts" setup>\n import { PopoverClose, useForwardProps } from "radix-vue";\n import type { PopoverCloseProps } from "radix-vue";\n\n const props = defineProps<PopoverCloseProps>();\n const forwarded = useForwardProps(props);\n</script>\n',
|
|
1507
1507
|
},
|
|
1508
1508
|
{
|
|
1509
1509
|
fileName: "Popover/Content.vue",
|
|
1510
1510
|
dirPath: "components/UI",
|
|
1511
1511
|
fileContent:
|
|
1512
|
-
'<template>\n <UiPopoverPortal :to="to">\n <PopoverContent v-bind="{ ...forwarded, ...$attrs }" :class="styles({ class: props.class })">\n <slot
|
|
1512
|
+
'<template>\n <UiPopoverPortal :to="to">\n <PopoverContent v-bind="{ ...forwarded, ...$attrs }" :class="styles({ class: props.class })">\n <slot/>\n </PopoverContent>\n </UiPopoverPortal>\n</template>\n\n<script lang="ts" setup>\n import { PopoverContent, useForwardPropsEmits } from "radix-vue";\n import type { PopoverContentEmits, PopoverContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = withDefaults(\n defineProps<\n PopoverContentProps & {\n to?: string | HTMLElement;\n class?: any;\n }\n >(),\n {\n side: "bottom",\n sideOffset: 8,\n align: "start",\n avoidCollisions: true,\n collisionPadding: 0,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<PopoverContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "to", "class"), emits);\n\n const styles = tv({\n base: "z-50 w-72 rounded-md border bg-popover p-4 text-accent-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n</script>\n',
|
|
1513
1513
|
},
|
|
1514
1514
|
{
|
|
1515
1515
|
fileName: "Popover/Popover.vue",
|
|
1516
1516
|
dirPath: "components/UI",
|
|
1517
1517
|
fileContent:
|
|
1518
|
-
'<template>\n <PopoverRoot v-bind="forwarded">\n <slot
|
|
1518
|
+
'<template>\n <PopoverRoot v-bind="forwarded">\n <slot/>\n </PopoverRoot>\n</template>\n\n<script lang="ts" setup>\n import { PopoverRoot, useForwardPropsEmits } from "radix-vue";\n import type { PopoverRootEmits, PopoverRootProps } from "radix-vue";\n\n const props = defineProps<PopoverRootProps>();\n const emits = defineEmits<PopoverRootEmits>();\n\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
|
|
1519
1519
|
},
|
|
1520
1520
|
{
|
|
1521
1521
|
fileName: "Popover/Portal.vue",
|
|
1522
1522
|
dirPath: "components/UI",
|
|
1523
1523
|
fileContent:
|
|
1524
|
-
'<template>\n <PopoverPortal v-bind="forwarded">\n <slot
|
|
1524
|
+
'<template>\n <PopoverPortal v-bind="forwarded">\n <slot/>\n </PopoverPortal>\n</template>\n\n<script lang="ts" setup>\n import { PopoverPortal, useForwardProps } from "radix-vue";\n import type { PopoverPortalProps } from "radix-vue";\n\n const props = defineProps<PopoverPortalProps>();\n const forwarded = useForwardProps(props);\n</script>\n',
|
|
1525
1525
|
},
|
|
1526
1526
|
{
|
|
1527
1527
|
fileName: "Popover/Trigger.vue",
|
|
1528
1528
|
dirPath: "components/UI",
|
|
1529
1529
|
fileContent:
|
|
1530
|
-
'<template>\n <PopoverTrigger v-bind="props">\n <slot
|
|
1530
|
+
'<template>\n <PopoverTrigger v-bind="props">\n <slot/>\n </PopoverTrigger>\n</template>\n\n<script lang="ts" setup>\n import { PopoverTrigger } from "radix-vue";\n import type { PopoverTriggerProps } from "radix-vue";\n\n const props = defineProps<PopoverTriggerProps>();\n</script>\n',
|
|
1531
1531
|
},
|
|
1532
1532
|
{
|
|
1533
1533
|
fileName: "Popover/X.vue",
|
|
@@ -1548,7 +1548,7 @@ export default [
|
|
|
1548
1548
|
fileName: "Progress/Indicator.vue",
|
|
1549
1549
|
dirPath: "components/UI",
|
|
1550
1550
|
fileContent:
|
|
1551
|
-
'<template>\n <ProgressIndicator v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot
|
|
1551
|
+
'<template>\n <ProgressIndicator v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot/>\n </ProgressIndicator>\n</template>\n\n<script lang="ts" setup>\n import { ProgressIndicator } from "radix-vue";\n import type { ProgressIndicatorProps } from "radix-vue";\n\n const props = defineProps<\n ProgressIndicatorProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "h-full w-full flex-1 rounded-full bg-primary transition-all",\n });\n</script>\n',
|
|
1552
1552
|
},
|
|
1553
1553
|
{
|
|
1554
1554
|
fileName: "Progress/Progress.vue",
|
|
@@ -1581,7 +1581,7 @@ export default [
|
|
|
1581
1581
|
fileName: "RadioGroup/RadioGroup.vue",
|
|
1582
1582
|
dirPath: "components/UI",
|
|
1583
1583
|
fileContent:
|
|
1584
|
-
'<template>\n <RadioGroupRoot v-bind="forwarded" :class="styles({ class: props.class })">\n <slot
|
|
1584
|
+
'<template>\n <RadioGroupRoot v-bind="forwarded" :class="styles({ class: props.class })">\n <slot/>\n </RadioGroupRoot>\n</template>\n\n<script lang="ts" setup>\n import { RadioGroupRoot, useForwardPropsEmits } from "radix-vue";\n import type { RadioGroupRootEmits, RadioGroupRootProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n RadioGroupRootProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n orientation: "vertical",\n loop: true,\n }\n );\n\n const emits = defineEmits<RadioGroupRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({ base: "grid gap-3" });\n</script>\n',
|
|
1585
1585
|
},
|
|
1586
1586
|
],
|
|
1587
1587
|
utils: [],
|
|
@@ -1596,31 +1596,31 @@ export default [
|
|
|
1596
1596
|
fileName: "ScrollArea/Corner.vue",
|
|
1597
1597
|
dirPath: "components/UI",
|
|
1598
1598
|
fileContent:
|
|
1599
|
-
'<template>\n <ScrollAreaCorner v-bind="props">\n <slot
|
|
1599
|
+
'<template>\n <ScrollAreaCorner v-bind="props">\n <slot/>\n </ScrollAreaCorner>\n</template>\n\n<script lang="ts" setup>\n import { ScrollAreaCorner } from "radix-vue";\n import type { ScrollAreaCornerProps } from "radix-vue";\n\n const props = defineProps<ScrollAreaCornerProps>();\n</script>\n',
|
|
1600
1600
|
},
|
|
1601
1601
|
{
|
|
1602
1602
|
fileName: "ScrollArea/ScrollArea.vue",
|
|
1603
1603
|
dirPath: "components/UI",
|
|
1604
1604
|
fileContent:
|
|
1605
|
-
'<template>\n <ScrollAreaRoot v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <UiScrollAreaViewport>\n <slot
|
|
1605
|
+
'<template>\n <ScrollAreaRoot v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <UiScrollAreaViewport>\n <slot/>\n </UiScrollAreaViewport>\n <UiScrollAreaScrollbar :orientation="orientation" />\n <UiScrollAreaCorner />\n </ScrollAreaRoot>\n</template>\n\n<script lang="ts" setup>\n import { ScrollAreaRoot } from "radix-vue";\n import type { ScrollAreaRootProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n ScrollAreaRootProps & {\n /** Orientation for scrolling */\n orientation?: "vertical" | "horizontal";\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n orientation: "vertical",\n }\n );\n\n const styles = tv({\n base: "relative overflow-hidden",\n });\n</script>\n',
|
|
1606
1606
|
},
|
|
1607
1607
|
{
|
|
1608
1608
|
fileName: "ScrollArea/Scrollbar.vue",
|
|
1609
1609
|
dirPath: "components/UI",
|
|
1610
1610
|
fileContent:
|
|
1611
|
-
'<template>\n <ScrollAreaScrollbar\n v-bind="reactiveOmit(props, \'class\')"\n :class="styles({ orientation, class: props.class })"\n >\n <slot
|
|
1611
|
+
'<template>\n <ScrollAreaScrollbar\n v-bind="reactiveOmit(props, \'class\')"\n :class="styles({ orientation, class: props.class })"\n >\n <slot/>\n <UiScrollAreaThumb />\n </ScrollAreaScrollbar>\n</template>\n\n<script lang="ts" setup>\n import { ScrollAreaScrollbar } from "radix-vue";\n import type { ScrollAreaScrollbarProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n ScrollAreaScrollbarProps & {\n /** Class to apply to the scrollbar */\n class?: any;\n }\n >(),\n {\n orientation: "vertical",\n }\n );\n\n const styles = tv({\n base: "flex touch-none select-none transition-colors",\n variants: {\n orientation: {\n vertical: "h-full w-2.5 border-l border-l-transparent p-[1px]",\n horizontal: "h-2.5 border-t border-t-transparent p-[1px]",\n },\n },\n });\n</script>\n',
|
|
1612
1612
|
},
|
|
1613
1613
|
{
|
|
1614
1614
|
fileName: "ScrollArea/Thumb.vue",
|
|
1615
1615
|
dirPath: "components/UI",
|
|
1616
1616
|
fileContent:
|
|
1617
|
-
'<template>\n <ScrollAreaThumb\n v-bind="reactiveOmit(props, \'class\')"\n :class="styles({ orientation, class: props.class })"\n >\n <slot
|
|
1617
|
+
'<template>\n <ScrollAreaThumb\n v-bind="reactiveOmit(props, \'class\')"\n :class="styles({ orientation, class: props.class })"\n >\n <slot/>\n </ScrollAreaThumb>\n</template>\n\n<script lang="ts" setup>\n import { ScrollAreaThumb } from "radix-vue";\n import type { ScrollAreaThumbProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n ScrollAreaThumbProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n orientation?: "vertical" | "horizontal";\n }\n >(),\n {\n orientation: "vertical",\n }\n );\n\n const styles = tv({\n base: "relative flex-1 rounded-full bg-border",\n variants: {\n orientation: {\n vertical: "flex-1",\n horizontal: "",\n },\n },\n });\n</script>\n',
|
|
1618
1618
|
},
|
|
1619
1619
|
{
|
|
1620
1620
|
fileName: "ScrollArea/Viewport.vue",
|
|
1621
1621
|
dirPath: "components/UI",
|
|
1622
1622
|
fileContent:
|
|
1623
|
-
'<template>\n <ScrollAreaViewport v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot
|
|
1623
|
+
'<template>\n <ScrollAreaViewport v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot/>\n </ScrollAreaViewport>\n</template>\n\n<script lang="ts" setup>\n import { ScrollAreaViewport } from "radix-vue";\n import type { ScrollAreaViewportProps } from "radix-vue";\n\n const props = defineProps<\n ScrollAreaViewportProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "h-full w-full rounded-[inherit]",\n });\n</script>\n',
|
|
1624
1624
|
},
|
|
1625
1625
|
],
|
|
1626
1626
|
utils: [],
|
|
@@ -1641,13 +1641,13 @@ export default [
|
|
|
1641
1641
|
fileName: "Select/Content.vue",
|
|
1642
1642
|
dirPath: "components/UI",
|
|
1643
1643
|
fileContent:
|
|
1644
|
-
'<template>\n <UiSelectPortal :to="to">\n <SelectContent\n v-bind="{ ...forwarded, ...$attrs }"\n :class="styles({ position, class: props.class })"\n >\n <UiSelectScrollUpButton />\n <UiSelectViewport :position="position">\n <slot
|
|
1644
|
+
'<template>\n <UiSelectPortal :to="to">\n <SelectContent\n v-bind="{ ...forwarded, ...$attrs }"\n :class="styles({ position, class: props.class })"\n >\n <UiSelectScrollUpButton />\n <UiSelectViewport :position="position">\n <slot/>\n </UiSelectViewport>\n <UiSelectScrollDownButton />\n </SelectContent>\n </UiSelectPortal>\n</template>\n\n<script lang="ts" setup>\n import { SelectContent, useForwardPropsEmits } from "radix-vue";\n import type { SelectContentEmits, SelectContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = withDefaults(\n defineProps<\n SelectContentProps & {\n /** Where to render the portal */\n to?: string | HTMLElement;\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >(),\n {\n position: "popper",\n side: "bottom",\n align: "start",\n avoidCollisions: true,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<SelectContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "to"), emits);\n\n const styles = tv({\n base: "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-accent-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n variants: {\n position: {\n popper:\n "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",\n "item-aligned": "",\n },\n },\n });\n</script>\n',
|
|
1645
1645
|
},
|
|
1646
1646
|
{
|
|
1647
1647
|
fileName: "Select/Group.vue",
|
|
1648
1648
|
dirPath: "components/UI",
|
|
1649
1649
|
fileContent:
|
|
1650
|
-
'<template>\n <SelectGroup v-bind="forwarded">\n <slot
|
|
1650
|
+
'<template>\n <SelectGroup v-bind="forwarded">\n <slot/>\n </SelectGroup>\n</template>\n\n<script lang="ts" setup>\n import { SelectGroup, useForwardProps } from "radix-vue";\n import type { SelectGroupProps } from "radix-vue";\n\n const props = defineProps<SelectGroupProps>();\n const forwarded = useForwardProps(props);\n</script>\n',
|
|
1651
1651
|
},
|
|
1652
1652
|
{
|
|
1653
1653
|
fileName: "Select/Icon.vue",
|
|
@@ -1671,19 +1671,19 @@ export default [
|
|
|
1671
1671
|
fileName: "Select/ItemText.vue",
|
|
1672
1672
|
dirPath: "components/UI",
|
|
1673
1673
|
fileContent:
|
|
1674
|
-
'<template>\n <SelectItemText v-bind="props">\n <slot
|
|
1674
|
+
'<template>\n <SelectItemText v-bind="props">\n <slot/>\n </SelectItemText>\n</template>\n\n<script lang="ts" setup>\n import { SelectItemText } from "radix-vue";\n import type { SelectItemTextProps } from "radix-vue";\n\n const props = defineProps<SelectItemTextProps>();\n</script>\n',
|
|
1675
1675
|
},
|
|
1676
1676
|
{
|
|
1677
1677
|
fileName: "Select/Label.vue",
|
|
1678
1678
|
dirPath: "components/UI",
|
|
1679
1679
|
fileContent:
|
|
1680
|
-
'<template>\n <SelectLabel :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot
|
|
1680
|
+
'<template>\n <SelectLabel :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </SelectLabel>\n</template>\n\n<script lang="ts" setup>\n import { SelectLabel } from "radix-vue";\n import type { SelectLabelProps } from "radix-vue";\n\n const props = defineProps<\n SelectLabelProps & {\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "py-1.5 pl-8 pr-2 text-sm font-semibold",\n });\n</script>\n',
|
|
1681
1681
|
},
|
|
1682
1682
|
{
|
|
1683
1683
|
fileName: "Select/Portal.vue",
|
|
1684
1684
|
dirPath: "components/UI",
|
|
1685
1685
|
fileContent:
|
|
1686
|
-
'<template>\n <SelectPortal v-bind="props">\n <slot
|
|
1686
|
+
'<template>\n <SelectPortal v-bind="props">\n <slot/>\n </SelectPortal>\n</template>\n\n<script lang="ts" setup>\n import { SelectPortal } from "radix-vue";\n import type { SelectPortalProps } from "radix-vue";\n\n const props = defineProps<SelectPortalProps>();\n</script>\n',
|
|
1687
1687
|
},
|
|
1688
1688
|
{
|
|
1689
1689
|
fileName: "Select/ScrollDownButton.vue",
|
|
@@ -1701,7 +1701,7 @@ export default [
|
|
|
1701
1701
|
fileName: "Select/Select.vue",
|
|
1702
1702
|
dirPath: "components/UI",
|
|
1703
1703
|
fileContent:
|
|
1704
|
-
'<template>\n <SelectRoot v-bind="forwarded">\n <slot
|
|
1704
|
+
'<template>\n <SelectRoot v-bind="forwarded">\n <slot/>\n </SelectRoot>\n</template>\n\n<script lang="ts" setup>\n import { SelectRoot, useForwardPropsEmits } from "radix-vue";\n import type { SelectRootEmits, SelectRootProps } from "radix-vue";\n\n const props = defineProps<SelectRootProps>();\n\n const emits = defineEmits<SelectRootEmits>();\n\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
|
|
1705
1705
|
},
|
|
1706
1706
|
{
|
|
1707
1707
|
fileName: "Select/Separator.vue",
|
|
@@ -1719,13 +1719,13 @@ export default [
|
|
|
1719
1719
|
fileName: "Select/Value.vue",
|
|
1720
1720
|
dirPath: "components/UI",
|
|
1721
1721
|
fileContent:
|
|
1722
|
-
'<template>\n <SelectValue v-bind="props">\n <slot
|
|
1722
|
+
'<template>\n <SelectValue v-bind="props">\n <slot/>\n </SelectValue>\n</template>\n\n<script lang="ts" setup>\n import { SelectValue } from "radix-vue";\n import type { SelectValueProps } from "radix-vue";\n\n const props = defineProps<SelectValueProps>();\n</script>\n',
|
|
1723
1723
|
},
|
|
1724
1724
|
{
|
|
1725
1725
|
fileName: "Select/Viewport.vue",
|
|
1726
1726
|
dirPath: "components/UI",
|
|
1727
1727
|
fileContent:
|
|
1728
|
-
'<template>\n <SelectViewport\n :class="styles({ position, class: props.class })"\n v-bind="reactiveOmit(props, \'class\')"\n >\n <slot
|
|
1728
|
+
'<template>\n <SelectViewport\n :class="styles({ position, class: props.class })"\n v-bind="reactiveOmit(props, \'class\')"\n >\n <slot/>\n </SelectViewport>\n</template>\n\n<script lang="ts" setup>\n import { SelectViewport } from "radix-vue";\n import type { SelectViewportProps } from "radix-vue";\n\n const props = defineProps<\n SelectViewportProps & {\n position?: "item-aligned" | "popper";\n /** Custom class(es) to add to the parent */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "p-1",\n variants: {\n position: {\n popper:\n "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",\n "item-aligned": "",\n },\n },\n });\n</script>\n',
|
|
1729
1729
|
},
|
|
1730
1730
|
],
|
|
1731
1731
|
utils: [],
|
|
@@ -1755,13 +1755,13 @@ export default [
|
|
|
1755
1755
|
fileName: "Sheet/Close.vue",
|
|
1756
1756
|
dirPath: "components/UI",
|
|
1757
1757
|
fileContent:
|
|
1758
|
-
'<template>\n <DialogClose v-bind="props">\n <slot
|
|
1758
|
+
'<template>\n <DialogClose v-bind="props">\n <slot/>\n </DialogClose>\n</template>\n\n<script lang="ts" setup>\n import { DialogClose } from "radix-vue";\n import type { DialogCloseProps } from "radix-vue";\n\n const props = defineProps<DialogCloseProps>();\n</script>\n',
|
|
1759
1759
|
},
|
|
1760
1760
|
{
|
|
1761
1761
|
fileName: "Sheet/Content.vue",
|
|
1762
1762
|
dirPath: "components/UI",
|
|
1763
1763
|
fileContent:
|
|
1764
|
-
'<template>\n <UiSheetPortal :to="to">\n <slot name="overlay">\n <UiSheetOverlay />\n </slot>\n <DialogContent\n :class="styles({ side, class: props.class })"\n v-bind="{ ...forwarded, ...$attrs }"\n >\n <slot>\n <slot name="header">\n <UiSheetHeader>\n <slot name="title">\n <UiSheetTitle v-if="title" :title="title" />\n </slot>\n <slot name="description">\n <UiSheetDescription v-if="description" :description="description" />\n </slot>\n </UiSheetHeader>\n </slot>\n <slot name="content"
|
|
1764
|
+
'<template>\n <UiSheetPortal :to="to">\n <slot name="overlay">\n <UiSheetOverlay />\n </slot>\n <DialogContent\n :class="styles({ side, class: props.class })"\n v-bind="{ ...forwarded, ...$attrs }"\n >\n <slot>\n <slot name="header">\n <UiSheetHeader>\n <slot name="title">\n <UiSheetTitle v-if="title" :title="title" />\n </slot>\n <slot name="description">\n <UiSheetDescription v-if="description" :description="description" />\n </slot>\n </UiSheetHeader>\n </slot>\n <slot name="content"/>\n <slot name="footer"/>\n </slot>\n <slot name="close">\n <UiSheetClose :icon="icon" />\n </slot>\n </DialogContent>\n </UiSheetPortal>\n</template>\n\n<script lang="ts" setup>\n import { DialogContent, useForwardPropsEmits } from "radix-vue";\n import type { DialogContentEmits, DialogContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = defineProps<\n DialogContentProps & {\n icon?: string;\n title?: string;\n description?: string;\n class?: any;\n side?: VariantProps<typeof styles>["side"];\n to?: string | HTMLElement;\n }\n >();\n const emits = defineEmits<DialogContentEmits>();\n const forwarded = useForwardPropsEmits(\n reactiveOmit(props, "icon", "title", "description", "class", "to", "side"),\n emits\n );\n\n const styles = tv({\n base: "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",\n variants: {\n side: {\n top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",\n bottom:\n "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",\n left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",\n right:\n "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",\n },\n },\n defaultVariants: {\n side: "left",\n },\n });\n</script>\n',
|
|
1765
1765
|
},
|
|
1766
1766
|
{
|
|
1767
1767
|
fileName: "Sheet/Description.vue",
|
|
@@ -1773,13 +1773,13 @@ export default [
|
|
|
1773
1773
|
fileName: "Sheet/Footer.vue",
|
|
1774
1774
|
dirPath: "components/UI",
|
|
1775
1775
|
fileContent:
|
|
1776
|
-
'<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot
|
|
1776
|
+
'<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >(),\n {\n as: "div",\n }\n );\n\n const styles = tv({\n base: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",\n });\n</script>\n',
|
|
1777
1777
|
},
|
|
1778
1778
|
{
|
|
1779
1779
|
fileName: "Sheet/Header.vue",
|
|
1780
1780
|
dirPath: "components/UI",
|
|
1781
1781
|
fileContent:
|
|
1782
|
-
'<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot
|
|
1782
|
+
'<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >(),\n {\n as: "div",\n }\n );\n\n const styles = tv({\n base: "flex flex-col space-y-2 text-center sm:text-left",\n });\n</script>\n',
|
|
1783
1783
|
},
|
|
1784
1784
|
{
|
|
1785
1785
|
fileName: "Sheet/Overlay.vue",
|
|
@@ -1791,13 +1791,13 @@ export default [
|
|
|
1791
1791
|
fileName: "Sheet/Portal.vue",
|
|
1792
1792
|
dirPath: "components/UI",
|
|
1793
1793
|
fileContent:
|
|
1794
|
-
'<template>\n <DialogPortal v-bind="props">\n <slot
|
|
1794
|
+
'<template>\n <DialogPortal v-bind="props">\n <slot/>\n </DialogPortal>\n</template>\n\n<script lang="ts" setup>\n import { DialogPortal } from "radix-vue";\n import type { DialogPortalProps } from "radix-vue";\n\n const props = defineProps<DialogPortalProps>();\n</script>\n',
|
|
1795
1795
|
},
|
|
1796
1796
|
{
|
|
1797
1797
|
fileName: "Sheet/Sheet.vue",
|
|
1798
1798
|
dirPath: "components/UI",
|
|
1799
1799
|
fileContent:
|
|
1800
|
-
'<template>\n <DialogRoot v-bind="forwarded">\n <slot
|
|
1800
|
+
'<template>\n <DialogRoot v-bind="forwarded">\n <slot/>\n </DialogRoot>\n</template>\n\n<script lang="ts" setup>\n import { DialogRoot, useForwardPropsEmits } from "radix-vue";\n import type { DialogRootEmits, DialogRootProps } from "radix-vue";\n\n const props = defineProps<DialogRootProps>();\n const emit = defineEmits<DialogRootEmits>();\n\n const forwarded = useForwardPropsEmits(props, emit);\n</script>\n',
|
|
1801
1801
|
},
|
|
1802
1802
|
{
|
|
1803
1803
|
fileName: "Sheet/Title.vue",
|
|
@@ -1809,7 +1809,7 @@ export default [
|
|
|
1809
1809
|
fileName: "Sheet/Trigger.vue",
|
|
1810
1810
|
dirPath: "components/UI",
|
|
1811
1811
|
fileContent:
|
|
1812
|
-
'<template>\n <DialogTrigger v-bind="props">\n <slot
|
|
1812
|
+
'<template>\n <DialogTrigger v-bind="props">\n <slot/>\n </DialogTrigger>\n</template>\n\n<script lang="ts" setup>\n import { DialogTrigger } from "radix-vue";\n import type { DialogTriggerProps } from "radix-vue";\n\n const props = defineProps<DialogTriggerProps>();\n</script>\n',
|
|
1813
1813
|
},
|
|
1814
1814
|
{
|
|
1815
1815
|
fileName: "Sheet/X.vue",
|
|
@@ -1830,7 +1830,7 @@ export default [
|
|
|
1830
1830
|
fileName: "Skeleton.vue",
|
|
1831
1831
|
dirPath: "components/UI",
|
|
1832
1832
|
fileContent:
|
|
1833
|
-
'<template>\n <Primitive\n :class="styles({ loading, class: props.class })"\n v-bind="reactiveOmit(props, \'class\', \'loading\')"\n >\n <slot
|
|
1833
|
+
'<template>\n <Primitive\n :class="styles({ loading, class: props.class })"\n v-bind="reactiveOmit(props, \'class\', \'loading\')"\n >\n <slot/>\n </Primitive>\n</template>\n\n<script lang="ts" setup>\n import { Primitive } from "radix-vue";\n import type { PrimitiveProps } from "radix-vue";\n\n const styles = tv({\n base: "animate-pulse rounded-md bg-muted",\n variants: {\n loading: { true: "cursor-wait", false: "cursor-default" },\n },\n });\n\n const props = withDefaults(\n defineProps<\n PrimitiveProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n /** Whether the skeleton is loading */\n loading?: boolean;\n }\n >(),\n {\n as: "div",\n }\n );\n</script>\n',
|
|
1834
1834
|
},
|
|
1835
1835
|
],
|
|
1836
1836
|
utils: [],
|
|
@@ -1845,7 +1845,7 @@ export default [
|
|
|
1845
1845
|
fileName: "Slider/Range.vue",
|
|
1846
1846
|
dirPath: "components/UI",
|
|
1847
1847
|
fileContent:
|
|
1848
|
-
'<template>\n <SliderRange :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot
|
|
1848
|
+
'<template>\n <SliderRange :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </SliderRange>\n</template>\n\n<script lang="ts" setup>\n import { SliderRange } from "radix-vue";\n import type { SliderRangeProps } from "radix-vue";\n\n const props = defineProps<\n SliderRangeProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >();\n const styles = tv({\n base: "absolute h-full bg-primary",\n });\n</script>\n',
|
|
1849
1849
|
},
|
|
1850
1850
|
{
|
|
1851
1851
|
fileName: "Slider/Slider.vue",
|
|
@@ -1857,13 +1857,13 @@ export default [
|
|
|
1857
1857
|
fileName: "Slider/Thumb.vue",
|
|
1858
1858
|
dirPath: "components/UI",
|
|
1859
1859
|
fileContent:
|
|
1860
|
-
'<template>\n <SliderThumb :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot
|
|
1860
|
+
'<template>\n <SliderThumb :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </SliderThumb>\n</template>\n\n<script lang="ts" setup>\n import { SliderThumb } from "radix-vue";\n import type { SliderThumbProps } from "radix-vue";\n\n const props = defineProps<\n SliderThumbProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",\n });\n</script>\n',
|
|
1861
1861
|
},
|
|
1862
1862
|
{
|
|
1863
1863
|
fileName: "Slider/Track.vue",
|
|
1864
1864
|
dirPath: "components/UI",
|
|
1865
1865
|
fileContent:
|
|
1866
|
-
'<template>\n <SliderTrack :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot
|
|
1866
|
+
'<template>\n <SliderTrack :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </SliderTrack>\n</template>\n\n<script lang="ts" setup>\n import { SliderTrack } from "radix-vue";\n import type { SliderTrackProps } from "radix-vue";\n\n const props = defineProps<\n SliderTrackProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary",\n });\n</script>\n',
|
|
1867
1867
|
},
|
|
1868
1868
|
],
|
|
1869
1869
|
utils: [],
|
|
@@ -1878,13 +1878,13 @@ export default [
|
|
|
1878
1878
|
fileName: "Splitter/Splitter.vue",
|
|
1879
1879
|
dirPath: "components/UI",
|
|
1880
1880
|
fileContent:
|
|
1881
|
-
'<template>\n <SplitterGroup\n v-bind="forwarded"\n :class="styles({ class: props.class })"\n
|
|
1881
|
+
'<template>\n <SplitterGroup\n v-slot="{ layout }: { layout: number[] }"\n v-bind="forwarded"\n :class="styles({ class: props.class })"\n >\n <slot :layout="layout"/>\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',
|
|
1882
1882
|
},
|
|
1883
1883
|
{
|
|
1884
1884
|
fileName: "Splitter/Panel.vue",
|
|
1885
1885
|
dirPath: "components/UI",
|
|
1886
1886
|
fileContent:
|
|
1887
|
-
'<template>\n <SplitterPanel\n v-bind="forwarded"\n v-slot="{ isCollapsed, isExpanded }: { isCollapsed: boolean; isExpanded: boolean }"\n >\n <slot :
|
|
1887
|
+
'<template>\r\n <SplitterPanel\r\n v-bind="forwarded"\r\n ref="forwardRef"\r\n v-slot="{ isCollapsed, isExpanded }: { isCollapsed: boolean; isExpanded: boolean }"\r\n >\r\n <slot :is-collapsed="isCollapsed" :is-expanded="isExpanded" />\r\n </SplitterPanel>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { SplitterPanel, useForwardPropsEmits } from "radix-vue";\r\n import type { SplitterPanelEmits, SplitterPanelProps } from "radix-vue";\r\n\r\n const props = withDefaults(defineProps<SplitterPanelProps>(), {});\r\n\r\n const forwardRef = ref<InstanceType<typeof SplitterPanel>>();\r\n const emit = defineEmits<\r\n SplitterPanelEmits & {\r\n ready: [value: InstanceType<typeof SplitterPanel>];\r\n }\r\n >();\r\n\r\n const forwarded = useForwardPropsEmits(props, emit);\r\n\r\n onMounted(async () => {\r\n await nextTick();\r\n emit("ready", forwardRef.value!);\r\n });\r\n</script>\r\n',
|
|
1888
1888
|
},
|
|
1889
1889
|
{
|
|
1890
1890
|
fileName: "Splitter/Handle.vue",
|
|
@@ -1905,13 +1905,13 @@ export default [
|
|
|
1905
1905
|
fileName: "Switch/Switch.vue",
|
|
1906
1906
|
dirPath: "components/UI",
|
|
1907
1907
|
fileContent:
|
|
1908
|
-
'<template>\n <SwitchRoot v-bind="forwarded" :class="styles({ class: props.class })">\n <UiSwitchThumb>\n <slot
|
|
1908
|
+
'<template>\n <SwitchRoot v-bind="forwarded" :class="styles({ class: props.class })">\n <UiSwitchThumb>\n <slot/>\n </UiSwitchThumb>\n </SwitchRoot>\n</template>\n\n<script lang="ts" setup>\n import { SwitchRoot, useForwardPropsEmits } from "radix-vue";\n import type { SwitchRootEmits, SwitchRootProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n SwitchRootProps & {\n class?: any;\n id?: any;\n }\n >(),\n {\n as: "button",\n }\n );\n const emits = defineEmits<SwitchRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",\n });\n</script>\n',
|
|
1909
1909
|
},
|
|
1910
1910
|
{
|
|
1911
1911
|
fileName: "Switch/Thumb.vue",
|
|
1912
1912
|
dirPath: "components/UI",
|
|
1913
1913
|
fileContent:
|
|
1914
|
-
'<template>\n <SwitchThumb :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot
|
|
1914
|
+
'<template>\n <SwitchThumb :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </SwitchThumb>\n</template>\n\n<script lang="ts" setup>\n import { SwitchThumb } from "radix-vue";\n import type { SwitchThumbProps } from "radix-vue";\n\n const props = defineProps<\n SwitchThumbProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",\n });\n</script>\n',
|
|
1915
1915
|
},
|
|
1916
1916
|
],
|
|
1917
1917
|
utils: [],
|
|
@@ -1926,55 +1926,55 @@ export default [
|
|
|
1926
1926
|
fileName: "Table/Body.vue",
|
|
1927
1927
|
dirPath: "components/UI",
|
|
1928
1928
|
fileContent:
|
|
1929
|
-
'<template>\n <tbody :class="styles({ class: props.class })">\n <slot
|
|
1929
|
+
'<template>\n <tbody :class="styles({ class: props.class })">\n <slot/>\n </tbody>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n }>();\n\n const styles = tv({\n base: "[&_tr:last-child]:border-0",\n });\n</script>\n',
|
|
1930
1930
|
},
|
|
1931
1931
|
{
|
|
1932
1932
|
fileName: "Table/Caption.vue",
|
|
1933
1933
|
dirPath: "components/UI",
|
|
1934
1934
|
fileContent:
|
|
1935
|
-
'<template>\n <caption :class="styles({ class: props.class })">\n <slot
|
|
1935
|
+
'<template>\n <caption :class="styles({ class: props.class })">\n <slot/>\n </caption>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n }>();\n\n const styles = tv({\n base: "mt-4 text-sm text-muted-foreground",\n });\n</script>\n',
|
|
1936
1936
|
},
|
|
1937
1937
|
{
|
|
1938
1938
|
fileName: "Table/Cell.vue",
|
|
1939
1939
|
dirPath: "components/UI",
|
|
1940
1940
|
fileContent:
|
|
1941
|
-
'<template>\n <td :class="styles({ class: props.class })">\n <slot
|
|
1941
|
+
'<template>\n <td :class="styles({ class: props.class })">\n <slot/>\n </td>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n }>();\n\n const styles = tv({\n base: "whitespace-nowrap p-4 align-middle",\n });\n</script>\n',
|
|
1942
1942
|
},
|
|
1943
1943
|
{
|
|
1944
1944
|
fileName: "Table/Empty.vue",
|
|
1945
1945
|
dirPath: "components/UI",
|
|
1946
1946
|
fileContent:
|
|
1947
|
-
'<template>\n <UiTableRow>\n <UiTableCell :colspan="colspan" :class="styles({ class: props.class })">\n <slot
|
|
1947
|
+
'<template>\n <UiTableRow>\n <UiTableCell :colspan="colspan" :class="styles({ class: props.class })">\n <slot/>\n </UiTableCell>\n </UiTableRow>\n</template>\n\n<script lang="ts" setup>\n const props = withDefaults(\n defineProps<{\n colspan?: number;\n class?: any;\n }>(),\n {\n colspan: 1,\n }\n );\n\n const styles = tv({\n base: "whitespace-nowrap p-4 align-middle text-sm text-foreground",\n });\n</script>\n',
|
|
1948
1948
|
},
|
|
1949
1949
|
{
|
|
1950
1950
|
fileName: "Table/Footer.vue",
|
|
1951
1951
|
dirPath: "components/UI",
|
|
1952
1952
|
fileContent:
|
|
1953
|
-
'<template>\n <tfoot :class="styles({ class: props.class })">\n <slot
|
|
1953
|
+
'<template>\n <tfoot :class="styles({ class: props.class })">\n <slot/>\n </tfoot>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n }>();\n\n const styles = tv({\n base: "bg-primary font-medium text-primary-foreground",\n });\n</script>\n',
|
|
1954
1954
|
},
|
|
1955
1955
|
{
|
|
1956
1956
|
fileName: "Table/Head.vue",
|
|
1957
1957
|
dirPath: "components/UI",
|
|
1958
1958
|
fileContent:
|
|
1959
|
-
'<template>\n <th :class="styles({ class: props.class })">\n <slot
|
|
1959
|
+
'<template>\n <th :class="styles({ class: props.class })">\n <slot/>\n </th>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n }>();\n\n const styles = tv({\n base: "h-12 px-4 text-left align-middle font-medium text-muted-foreground hover:text-foreground",\n });\n</script>\n',
|
|
1960
1960
|
},
|
|
1961
1961
|
{
|
|
1962
1962
|
fileName: "Table/Header.vue",
|
|
1963
1963
|
dirPath: "components/UI",
|
|
1964
1964
|
fileContent:
|
|
1965
|
-
'<template>\n <thead :class="styles({ class: props.class })">\n <slot
|
|
1965
|
+
'<template>\n <thead :class="styles({ class: props.class })">\n <slot/>\n </thead>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n }>();\n\n const styles = tv({\n base: "[&_tr]:border-b",\n });\n</script>\n',
|
|
1966
1966
|
},
|
|
1967
1967
|
{
|
|
1968
1968
|
fileName: "Table/Row.vue",
|
|
1969
1969
|
dirPath: "components/UI",
|
|
1970
1970
|
fileContent:
|
|
1971
|
-
'<template>\n <tr :class="styles({ class: props.class })">\n <slot
|
|
1971
|
+
'<template>\n <tr :class="styles({ class: props.class })">\n <slot/>\n </tr>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n }>();\n\n const styles = tv({\n base: "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",\n });\n</script>\n',
|
|
1972
1972
|
},
|
|
1973
1973
|
{
|
|
1974
1974
|
fileName: "Table/Table.vue",
|
|
1975
1975
|
dirPath: "components/UI",
|
|
1976
1976
|
fileContent:
|
|
1977
|
-
'<template>\n <table :class="styles({ class: props.class })">\n <slot
|
|
1977
|
+
'<template>\n <table :class="styles({ class: props.class })">\n <slot/>\n </table>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n }>();\n\n const styles = tv({\n base: "w-full caption-bottom border-collapse text-sm",\n });\n</script>\n',
|
|
1978
1978
|
},
|
|
1979
1979
|
],
|
|
1980
1980
|
utils: [],
|
|
@@ -1989,31 +1989,31 @@ export default [
|
|
|
1989
1989
|
fileName: "Tabs/Content.vue",
|
|
1990
1990
|
dirPath: "components/UI",
|
|
1991
1991
|
fileContent:
|
|
1992
|
-
'<template>\n <TabsContent v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot
|
|
1992
|
+
'<template>\n <TabsContent v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot/>\n </TabsContent>\n</template>\n\n<script lang="ts" setup>\n import { TabsContent } from "radix-vue";\n import type { TabsContentProps } from "radix-vue";\n\n const props = defineProps<\n TabsContentProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",\n });\n</script>\n',
|
|
1993
1993
|
},
|
|
1994
1994
|
{
|
|
1995
1995
|
fileName: "Tabs/Indicator.vue",
|
|
1996
1996
|
dirPath: "components/UI",
|
|
1997
1997
|
fileContent:
|
|
1998
|
-
'<template>\n <ClientOnly>\n <TabsIndicator\n v-bind="{ ...reactiveOmit(props, \'class\'), ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot>\n <div class="h-full w-full rounded-md bg-primary"
|
|
1998
|
+
'<template>\n <ClientOnly>\n <TabsIndicator\n v-bind="{ ...reactiveOmit(props, \'class\'), ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot>\n <div class="h-full w-full rounded-md bg-primary" />\n </slot>\n </TabsIndicator>\n </ClientOnly>\n</template>\n\n<script lang="ts" setup>\n import { TabsIndicator } from "radix-vue";\n import type { TabsIndicatorProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = defineProps<\n TabsIndicatorProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "absolute bottom-0 left-0 h-[3px] w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] rounded-full px-1 transition-[width,transform] duration-300",\n });\n</script>\n',
|
|
1999
1999
|
},
|
|
2000
2000
|
{
|
|
2001
2001
|
fileName: "Tabs/List.vue",
|
|
2002
2002
|
dirPath: "components/UI",
|
|
2003
2003
|
fileContent:
|
|
2004
|
-
'<template>\n <TabsList :class="styles({ pill, class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot
|
|
2004
|
+
'<template>\n <TabsList :class="styles({ pill, class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </TabsList>\n</template>\n\n<script lang="ts" setup>\n import { TabsList } from "radix-vue";\n import type { TabsListProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n TabsListProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n pill?: boolean;\n }\n >(),\n { pill: true }\n );\n\n const styles = tv({\n base: "inline-flex h-10 items-center justify-center rounded-md p-1 text-muted-foreground",\n variants: {\n pill: {\n true: "bg-muted",\n false: "",\n },\n },\n });\n</script>\n',
|
|
2005
2005
|
},
|
|
2006
2006
|
{
|
|
2007
2007
|
fileName: "Tabs/Tabs.vue",
|
|
2008
2008
|
dirPath: "components/UI",
|
|
2009
2009
|
fileContent:
|
|
2010
|
-
'<template>\n <TabsRoot v-bind="forwarded">\n <slot
|
|
2010
|
+
'<template>\n <TabsRoot v-bind="forwarded">\n <slot/>\n </TabsRoot>\n</template>\n\n<script lang="ts" setup>\n import { TabsRoot, useForwardPropsEmits } from "radix-vue";\n import type { TabsRootEmits, TabsRootProps } from "radix-vue";\n\n const props = withDefaults(defineProps<TabsRootProps>(), {\n orientation: "horizontal",\n activationMode: "automatic",\n });\n const emits = defineEmits<TabsRootEmits>();\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
|
|
2011
2011
|
},
|
|
2012
2012
|
{
|
|
2013
2013
|
fileName: "Tabs/Trigger.vue",
|
|
2014
2014
|
dirPath: "components/UI",
|
|
2015
2015
|
fileContent:
|
|
2016
|
-
'<template>\n <TabsTrigger v-bind="reactiveOmit(props, \'class\')" :class="styles({ pill, class: props.class })">\n <slot
|
|
2016
|
+
'<template>\n <TabsTrigger v-bind="reactiveOmit(props, \'class\')" :class="styles({ pill, class: props.class })">\n <slot/>\n </TabsTrigger>\n</template>\n\n<script lang="ts" setup>\n import { TabsTrigger } from "radix-vue";\n import type { TabsTriggerProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n TabsTriggerProps & {\n /** Custom class(es) to add to parent element */\n class?: any;\n /** Whether the trigger should be pill-shaped */\n pill?: boolean;\n }\n >(),\n {\n pill: true,\n }\n );\n\n const styles = tv({\n base: "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ",\n variants: {\n pill: {\n true: "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",\n false:\n "data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none",\n },\n },\n });\n</script>\n',
|
|
2017
2017
|
},
|
|
2018
2018
|
],
|
|
2019
2019
|
utils: [],
|
|
@@ -2034,7 +2034,7 @@ export default [
|
|
|
2034
2034
|
fileName: "TagsInput/Field.vue",
|
|
2035
2035
|
dirPath: "components/UI",
|
|
2036
2036
|
fileContent:
|
|
2037
|
-
'<template>\n <TagsInputInput v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot
|
|
2037
|
+
'<template>\n <TagsInputInput v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot/>\n </TagsInputInput>\n</template>\n\n<script lang="ts" setup>\n import { TagsInputInput } from "radix-vue";\n import type { TagsInputInputProps } from "radix-vue";\n\n const props = defineProps<TagsInputInputProps & { class?: any }>();\n\n const styles = tv({\n base: "flex-1 bg-transparent focus:outline-none sm:text-sm",\n });\n</script>\n',
|
|
2038
2038
|
},
|
|
2039
2039
|
{
|
|
2040
2040
|
fileName: "TagsInput/Item.vue",
|
|
@@ -2052,13 +2052,13 @@ export default [
|
|
|
2052
2052
|
fileName: "TagsInput/ItemText.vue",
|
|
2053
2053
|
dirPath: "components/UI",
|
|
2054
2054
|
fileContent:
|
|
2055
|
-
'<template>\n <TagsInputItemText v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot
|
|
2055
|
+
'<template>\n <TagsInputItemText v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })">\n <slot/>\n </TagsInputItemText>\n</template>\n\n<script lang="ts" setup>\n import { TagsInputItemText } from "radix-vue";\n import type { TagsInputItemTextProps } from "radix-vue";\n\n const props = defineProps<TagsInputItemTextProps & { class?: any }>();\n\n const styles = tv({\n base: "leading-none sm:text-sm",\n });\n</script>\n',
|
|
2056
2056
|
},
|
|
2057
2057
|
{
|
|
2058
2058
|
fileName: "TagsInput/TagsInput.vue",
|
|
2059
2059
|
dirPath: "components/UI",
|
|
2060
2060
|
fileContent:
|
|
2061
|
-
'<template>\n <TagsInputRoot v-bind="forwarded" :class="styles({ class: props.class })">\n <slot
|
|
2061
|
+
'<template>\n <TagsInputRoot v-bind="forwarded" :class="styles({ class: props.class })">\n <slot/>\n </TagsInputRoot>\n</template>\n\n<script lang="ts" setup>\n import { TagsInputRoot, useForwardPropsEmits } from "radix-vue";\n import type { TagsInputRootEmits, TagsInputRootProps } from "radix-vue";\n\n const props = defineProps<TagsInputRootProps & { class?: any }>();\n const emits = defineEmits<TagsInputRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "flex min-h-[40px] w-full flex-wrap items-center gap-2 rounded-md border border-input bg-background px-3 py-2 leading-none transition focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",\n });\n</script>\n',
|
|
2062
2062
|
},
|
|
2063
2063
|
],
|
|
2064
2064
|
utils: [],
|
|
@@ -2075,7 +2075,7 @@ export default [
|
|
|
2075
2075
|
fileName: "TanStackTable.vue",
|
|
2076
2076
|
dirPath: "components/UI",
|
|
2077
2077
|
fileContent:
|
|
2078
|
-
'<template>\n <div>\n <div :class="styles({ class: props.class })">\n <UiTable :class="tableClass">\n <UiTableHeader>\n <UiTableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">\n <UiTableHead\n v-for="header in headerGroup.headers"\n :key="header.id"\n :colspan="header.colSpan"\n @click="header.column.getToggleSortingHandler()?.($event)"\n :class="[header.column.getCanSort() && \'cursor-pointer select-none\']"\n >\n <template v-if="!header.isPlaceholder">\n <div class="flex items-center gap-3">\n <FlexRender\n :render="header.column.columnDef.header"\n :props="header.getContext()"\n />\n <Icon\n v-if="header.column.getCanSort() && header.column.getIsSorted() === \'asc\'"\n :name="ascIcon"\n class="h-4 w-4"\n />\n <Icon\n v-else-if="header.column.getCanSort() && header.column.getIsSorted() === \'desc\'"\n :name="descIcon"\n class="h-4 w-4"\n />\n <Icon\n v-else-if="header.column.getCanSort() && !header.column.getIsSorted()"\n :name="unsortedIcon"\n class="h-5 w-5"\n />\n </div>\n </template>\n </UiTableHead>\n </UiTableRow>\n </UiTableHeader>\n\n <UiTableBody>\n <UiTableRow\n v-for="row in table.getRowModel().rows"\n :key="row.id"\n :data-state="row.getIsSelected() ? \'selected\' : \'\'"\n >\n <UiTableCell v-for="cell in row.getVisibleCells()" :key="cell.id">\n <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />\n </UiTableCell>\n </UiTableRow>\n\n <UiTableEmpty\n v-if="table.getRowModel().rows.length === 0"\n :colspan="table.getAllLeafColumns().length"\n >\n <slot :table="table" name="empty"> No data available. </slot>\n </UiTableEmpty>\n </UiTableBody>\n </UiTable>\n </div>\n\n <div\n v-if="showPagination"\n class="my-6 flex flex-col justify-between gap-4 px-2 md:flex-row md:items-center"\n >\n <div class="flex items-center justify-between gap-3">\n <slot name="rowsSelected" :table="table">\n <div v-if="showSelect" class="whitespace-nowrap text-sm text-muted-foreground">\n <span>\n {{ table.getFilteredSelectedRowModel().rows.length }} of {{ " " }}\n {{ table.getFilteredRowModel().rows.length }} row(s) selected\n </span>\n </div>\n </slot>\n <slot name="rowsPerPage" :table="table">\n <div class="flex items-center space-x-2 whitespace-nowrap">\n <p class="hidden text-sm font-medium text-foreground md:inline-block">\n {{ rowsPerPageText }}\n </p>\n <UiSelect v-model="pageSize">\n <UiSelectTrigger class="h-9 w-[70px]">\n {{ table.getState().pagination.pageSize }}\n </UiSelectTrigger>\n <UiSelectContent side="top" align="start">\n <UiSelectGroup>\n <UiSelectItem\n v-for="pageSize in pageSizes"\n :key="pageSize"\n :value="`${pageSize}`"\n >\n {{ pageSize }}\n </UiSelectItem>\n </UiSelectGroup>\n </UiSelectContent>\n </UiSelect>\n </div>\n </slot>\n </div>\n\n <div class="flex items-center justify-between gap-3">\n <slot :table="table" name="page">\n <div\n class="flex items-center justify-center whitespace-nowrap text-sm font-medium text-foreground"\n >\n Page {{ table.getState().pagination.pageIndex + 1 }} of\n {{ table.getPageCount() }}\n </div>\n </slot>\n\n <slot :table="table" name="pageButtons">\n <div class="flex items-center space-x-2">\n <UiButton\n variant="outline"\n title="First page"\n class="h-9 w-9 p-0"\n :disabled="!table.getCanPreviousPage()"\n @click="table.setPageIndex(0)"\n >\n <Icon name="lucide:chevrons-left" class="h-4 w-4" />\n </UiButton>\n <UiButton\n variant="outline"\n title="Previous page"\n class="h-9 w-9 p-0"\n :disabled="!table.getCanPreviousPage()"\n @click="table.previousPage()"\n >\n <Icon name="lucide:chevron-left" class="h-4 w-4" />\n </UiButton>\n <UiButton\n variant="outline"\n title="Next page"\n class="h-9 w-9 p-0"\n :disabled="!table.getCanNextPage()"\n @click="table.nextPage()"\n >\n <Icon name="lucide:chevron-right" class="h-4 w-4" />\n </UiButton>\n <UiButton\n variant="outline"\n title="Last page"\n class="h-9 w-9 p-0"\n :disabled="!table.getCanNextPage()"\n @click="table.setPageIndex(table.getPageCount() - 1)"\n >\n <Icon name="lucide:chevrons-right" class="h-4 w-4" />\n </UiButton>\n </div>\n </slot>\n </div>\n </div>\n </div>\n</template>\n\n<script lang="ts" setup generic="T">\n import CheckBox from "@/components/Ui/Checkbox/Checkbox.vue";\n import {\n FlexRender,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useVueTable,\n } from "@tanstack/vue-table";\n import type { ColumnDef, SortingState, Table } from "@tanstack/vue-table";\n\n const props = withDefaults(\n defineProps<{\n data?: T[];\n columns?: ColumnDef<T>[];\n search?: string;\n showSelect?: boolean;\n pageSizes?: number[];\n pageSize?: number;\n sorting?: SortingState;\n tableClass?: any;\n ascIcon?: string;\n descIcon?: string;\n unsortedIcon?: string;\n class?: any;\n showPagination?: boolean;\n rowsPerPageText?: string;\n }>(),\n {\n pageSizes: () => [10, 20, 30, 40, 50, 100],\n pageSize: () => 10,\n columns: () => [],\n data: () => [],\n sorting: () => [],\n ascIcon: "heroicons:chevron-up",\n descIcon: "heroicons:chevron-down",\n unsortedIcon: "heroicons:chevron-up-down",\n showPagination: true,\n rowsPerPageText: "Rows per page:",\n }\n );\n\n defineOptions({ inheritAttrs: false });\n\n const styles = tv({\n base: "w-full overflow-x-auto",\n });\n\n const checkBoxHeader: ColumnDef<any> = {\n id: "checkbox",\n header: ({ table }) => {\n return h(\n "div",\n { class: "flex items-center justify-center" },\n h(CheckBox, {\n checked: table.getIsAllRowsSelected()\n ? true\n : table.getIsSomeRowsSelected()\n ? "indeterminate"\n : false,\n "onUpdate:checked": (value: boolean) => table.toggleAllPageRowsSelected(!!value),\n ariaLabel: "Select all",\n })\n );\n },\n cell: ({ row }) => {\n return h(\n "div",\n { class: "flex items-center justify-center " },\n h(CheckBox, {\n checked: row.getIsSelected(),\n "onUpdate:checked": (value) => row.toggleSelected(!!value),\n ariaLabel: "Select row",\n })\n );\n },\n enableSorting: false,\n enableHiding: false,\n };\n\n const localColumns: ColumnDef<T>[] = [...props.columns];\n\n if (props.showSelect) {\n localColumns.unshift(checkBoxHeader);\n }\n\n const emit = defineEmits<{\n ready: [table: Table<T>];\n }>();\n\n const localSorting = ref(props.sorting);\n const globalFilter = ref(props.search);\n const columnVisibility = ref({});\n const rowSelection = ref({});\n\n const table = useVueTable({\n get data() {\n return props.data;\n },\n get columns() {\n return localColumns;\n },\n initialState: {\n pagination: {\n pageSize: props.pageSize,\n },\n rowSelection: rowSelection.value,\n globalFilter: props.search,\n },\n state: {\n get sorting() {\n return localSorting.value;\n },\n get globalFilter() {\n return props.search;\n },\n get columnVisibility() {\n return columnVisibility.value;\n },\n get rowSelection() {\n return rowSelection.value;\n },\n },\n onSortingChange: (updaterOrValue) => {\n localSorting.value =\n typeof updaterOrValue === "function" ? updaterOrValue(localSorting.value) : updaterOrValue;\n },\n onGlobalFilterChange: (updaterOrValue) => {\n globalFilter.value =\n typeof updaterOrValue === "function" ? updaterOrValue(globalFilter.value) : updaterOrValue;\n },\n onRowSelectionChange: (updaterOrValue) => {\n rowSelection.value =\n typeof updaterOrValue === "function" ? updaterOrValue(rowSelection.value) : updaterOrValue;\n },\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n enableRowSelection: () => !!props.showSelect,\n });\n\n function toggleColumnVisibility(column: any) {\n columnVisibility.value = {\n ...columnVisibility.value,\n [column.id]: !column.getIsVisible(),\n };\n }\n\n const pageSize = computed({\n get() {\n return table.getState().pagination.pageSize.toString();\n },\n set(value) {\n table.setPageSize(Number(value));\n },\n });\n\n onMounted(() => {\n emit("ready", table);\n });\n\n defineExpose({ toggleColumnVisibility });\n</script>\n',
|
|
2078
|
+
'<template>\n <div>\n <div :class="styles({ class: props.class })">\n <UiTable :class="tableClass">\n <UiTableHeader>\n <UiTableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">\n <UiTableHead\n v-for="header in headerGroup.headers"\n :key="header.id"\n :colspan="header.colSpan"\n :class="[header.column.getCanSort() && \'cursor-pointer select-none\']"\n @click="header.column.getToggleSortingHandler()?.($event)"\n >\n <template v-if="!header.isPlaceholder">\n <div class="flex items-center gap-3">\n <FlexRender\n :render="header.column.columnDef.header"\n :props="header.getContext()"\n />\n <Icon\n v-if="header.column.getCanSort() && header.column.getIsSorted() === \'asc\'"\n :name="ascIcon"\n class="h-4 w-4"\n />\n <Icon\n v-else-if="header.column.getCanSort() && header.column.getIsSorted() === \'desc\'"\n :name="descIcon"\n class="h-4 w-4"\n />\n <Icon\n v-else-if="header.column.getCanSort() && !header.column.getIsSorted()"\n :name="unsortedIcon"\n class="h-5 w-5"\n />\n </div>\n </template>\n </UiTableHead>\n </UiTableRow>\n </UiTableHeader>\n\n <UiTableBody>\n <UiTableRow\n v-for="row in table.getRowModel().rows"\n :key="row.id"\n :data-state="row.getIsSelected() ? \'selected\' : \'\'"\n >\n <UiTableCell v-for="cell in row.getVisibleCells()" :key="cell.id">\n <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />\n </UiTableCell>\n </UiTableRow>\n\n <UiTableEmpty\n v-if="table.getRowModel().rows.length === 0"\n :colspan="table.getAllLeafColumns().length"\n >\n <slot :table="table" name="empty"> No data available. </slot>\n </UiTableEmpty>\n </UiTableBody>\n </UiTable>\n </div>\n\n <div\n v-if="showPagination"\n class="my-6 flex flex-col justify-between gap-4 px-2 md:flex-row md:items-center"\n >\n <div class="flex items-center justify-between gap-3">\n <slot name="rowsSelected" :table="table">\n <div v-if="showSelect" class="whitespace-nowrap text-sm text-muted-foreground">\n <span>\n {{ table.getFilteredSelectedRowModel().rows.length }} of {{ " " }}\n {{ table.getFilteredRowModel().rows.length }} row(s) selected\n </span>\n </div>\n </slot>\n <slot name="rowsPerPage" :table="table">\n <div class="flex items-center space-x-2 whitespace-nowrap">\n <p class="hidden text-sm font-medium text-foreground md:inline-block">\n {{ rowsPerPageText }}\n </p>\n <UiSelect v-model="pageSize">\n <UiSelectTrigger class="h-9 w-[70px]">\n {{ table.getState().pagination.pageSize }}\n </UiSelectTrigger>\n <UiSelectContent side="top" align="start">\n <UiSelectGroup>\n <!-- eslint-disable vue/no-template-shadow -->\n <UiSelectItem\n v-for="pageSize in pageSizes"\n :key="pageSize"\n :value="`${pageSize}`"\n >\n {{ pageSize }}\n </UiSelectItem>\n </UiSelectGroup>\n </UiSelectContent>\n </UiSelect>\n </div>\n </slot>\n </div>\n\n <div class="flex items-center justify-between gap-3">\n <slot :table="table" name="page">\n <div\n class="flex items-center justify-center whitespace-nowrap text-sm font-medium text-foreground"\n >\n Page {{ table.getState().pagination.pageIndex + 1 }} of\n {{ table.getPageCount() }}\n </div>\n </slot>\n\n <slot :table="table" name="pageButtons">\n <div class="flex items-center space-x-2">\n <UiButton\n variant="outline"\n title="First page"\n class="h-9 w-9 p-0"\n :disabled="!table.getCanPreviousPage()"\n @click="table.setPageIndex(0)"\n >\n <Icon name="lucide:chevrons-left" class="h-4 w-4" />\n </UiButton>\n <UiButton\n variant="outline"\n title="Previous page"\n class="h-9 w-9 p-0"\n :disabled="!table.getCanPreviousPage()"\n @click="table.previousPage()"\n >\n <Icon name="lucide:chevron-left" class="h-4 w-4" />\n </UiButton>\n <UiButton\n variant="outline"\n title="Next page"\n class="h-9 w-9 p-0"\n :disabled="!table.getCanNextPage()"\n @click="table.nextPage()"\n >\n <Icon name="lucide:chevron-right" class="h-4 w-4" />\n </UiButton>\n <UiButton\n variant="outline"\n title="Last page"\n class="h-9 w-9 p-0"\n :disabled="!table.getCanNextPage()"\n @click="table.setPageIndex(table.getPageCount() - 1)"\n >\n <Icon name="lucide:chevrons-right" class="h-4 w-4" />\n </UiButton>\n </div>\n </slot>\n </div>\n </div>\n </div>\n</template>\n\n<script lang="ts" setup generic="T">\n import CheckBox from "@/components/Ui/Checkbox/Checkbox.vue";\n import {\n FlexRender,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useVueTable,\n } from "@tanstack/vue-table";\n import type { ColumnDef, SortingState, Table } from "@tanstack/vue-table";\n\n const props = withDefaults(\n defineProps<{\n data?: T[];\n columns?: ColumnDef<T>[];\n search?: string;\n showSelect?: boolean;\n pageSizes?: number[];\n pageSize?: number;\n sorting?: SortingState;\n tableClass?: any;\n ascIcon?: string;\n descIcon?: string;\n unsortedIcon?: string;\n class?: any;\n showPagination?: boolean;\n rowsPerPageText?: string;\n }>(),\n {\n pageSizes: () => [10, 20, 30, 40, 50, 100],\n pageSize: () => 10,\n columns: () => [],\n data: () => [],\n sorting: () => [],\n ascIcon: "heroicons:chevron-up",\n descIcon: "heroicons:chevron-down",\n unsortedIcon: "heroicons:chevron-up-down",\n showPagination: true,\n rowsPerPageText: "Rows per page:",\n }\n );\n\n defineOptions({ inheritAttrs: false });\n\n const styles = tv({\n base: "w-full overflow-x-auto",\n });\n\n const checkBoxHeader: ColumnDef<any> = {\n id: "checkbox",\n header: ({ table }) => {\n return h(\n "div",\n { class: "flex items-center justify-center" },\n h(CheckBox, {\n checked: table.getIsAllRowsSelected()\n ? true\n : table.getIsSomeRowsSelected()\n ? "indeterminate"\n : false,\n "onUpdate:checked": (value: boolean) => table.toggleAllPageRowsSelected(!!value),\n ariaLabel: "Select all",\n })\n );\n },\n cell: ({ row }) => {\n return h(\n "div",\n { class: "flex items-center justify-center " },\n h(CheckBox, {\n checked: row.getIsSelected(),\n "onUpdate:checked": (value) => row.toggleSelected(!!value),\n ariaLabel: "Select row",\n })\n );\n },\n enableSorting: false,\n enableHiding: false,\n };\n\n const localColumns: ColumnDef<T>[] = [...props.columns];\n\n if (props.showSelect) {\n localColumns.unshift(checkBoxHeader);\n }\n\n const emit = defineEmits<{\n ready: [table: Table<T>];\n }>();\n\n const localSorting = ref(props.sorting);\n const globalFilter = ref(props.search);\n const columnVisibility = ref({});\n const rowSelection = ref({});\n\n const table = useVueTable({\n get data() {\n return props.data;\n },\n get columns() {\n return localColumns;\n },\n initialState: {\n pagination: {\n pageSize: props.pageSize,\n },\n rowSelection: rowSelection.value,\n globalFilter: props.search,\n },\n state: {\n get sorting() {\n return localSorting.value;\n },\n get globalFilter() {\n return props.search;\n },\n get columnVisibility() {\n return columnVisibility.value;\n },\n get rowSelection() {\n return rowSelection.value;\n },\n },\n onSortingChange: (updaterOrValue) => {\n localSorting.value =\n typeof updaterOrValue === "function" ? updaterOrValue(localSorting.value) : updaterOrValue;\n },\n onGlobalFilterChange: (updaterOrValue) => {\n globalFilter.value =\n typeof updaterOrValue === "function" ? updaterOrValue(globalFilter.value) : updaterOrValue;\n },\n onRowSelectionChange: (updaterOrValue) => {\n rowSelection.value =\n typeof updaterOrValue === "function" ? updaterOrValue(rowSelection.value) : updaterOrValue;\n },\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n enableRowSelection: () => !!props.showSelect,\n });\n\n function toggleColumnVisibility(column: any) {\n columnVisibility.value = {\n ...columnVisibility.value,\n [column.id]: !column.getIsVisible(),\n };\n }\n\n // eslint-disable-next-line vue/no-dupe-keys\n const pageSize = computed({\n get() {\n return table.getState().pagination.pageSize.toString();\n },\n set(value) {\n table.setPageSize(Number(value));\n },\n });\n\n onMounted(() => {\n emit("ready", table);\n });\n\n defineExpose({ toggleColumnVisibility });\n</script>\n',
|
|
2079
2079
|
},
|
|
2080
2080
|
],
|
|
2081
2081
|
utils: [],
|
|
@@ -2091,7 +2091,7 @@ export default [
|
|
|
2091
2091
|
fileName: "Textarea.vue",
|
|
2092
2092
|
dirPath: "components/UI",
|
|
2093
2093
|
fileContent:
|
|
2094
|
-
'<template>\n <textarea :class="styles({ class: props.class })"
|
|
2094
|
+
'<template>\n <textarea v-bind="props" v-model="localModel" :class="styles({ class: props.class })" />\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n class?: any;\n name?: string;\n id?: string;\n placeholder?: string;\n required?: boolean;\n disabled?: boolean;\n rows?: number;\n modelValue?: string;\n }>();\n\n const emits = defineEmits<{\n "update:modelValue": [value: any];\n }>();\n\n const localModel = useVModel(props, "modelValue", emits);\n\n const styles = tv({\n base: "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\n });\n</script>\n',
|
|
2095
2095
|
},
|
|
2096
2096
|
],
|
|
2097
2097
|
utils: [],
|
|
@@ -2115,7 +2115,7 @@ export default [
|
|
|
2115
2115
|
fileName: "Toast/Action.vue",
|
|
2116
2116
|
dirPath: "components/UI",
|
|
2117
2117
|
fileContent:
|
|
2118
|
-
'<template>\n <ToastAction :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot
|
|
2118
|
+
'<template>\n <ToastAction :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </ToastAction>\n</template>\n\n<script lang="ts" setup>\n import { ToastAction } from "radix-vue";\n import type { ToastActionProps } from "radix-vue";\n\n const props = withDefaults(\n defineProps<\n ToastActionProps & {\n /**\n * Custom class names to add to the button.\n */\n class?: any;\n }\n >(),\n {\n altText: "Action button",\n }\n );\n\n const styles = tv({\n base: "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-xs font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",\n });\n</script>\n',
|
|
2119
2119
|
},
|
|
2120
2120
|
{
|
|
2121
2121
|
fileName: "Toast/Close.vue",
|
|
@@ -2133,7 +2133,7 @@ export default [
|
|
|
2133
2133
|
fileName: "Toast/Provider.vue",
|
|
2134
2134
|
dirPath: "components/UI",
|
|
2135
2135
|
fileContent:
|
|
2136
|
-
'<template>\n <ToastProvider v-bind="props">\n <slot
|
|
2136
|
+
'<template>\n <ToastProvider v-bind="props">\n <slot/>\n </ToastProvider>\n</template>\n\n<script lang="ts" setup>\n import { ToastProvider } from "radix-vue";\n import type { ToastProviderProps } from "radix-vue";\n\n const props = withDefaults(defineProps<ToastProviderProps>(), {\n label: "Notification",\n swipeDirection: "right",\n });\n</script>\n',
|
|
2137
2137
|
},
|
|
2138
2138
|
{
|
|
2139
2139
|
fileName: "Toast/Title.vue",
|
|
@@ -2145,7 +2145,7 @@ export default [
|
|
|
2145
2145
|
fileName: "Toast/Toast.vue",
|
|
2146
2146
|
dirPath: "components/UI",
|
|
2147
2147
|
fileContent:
|
|
2148
|
-
'<template>\n <ToastRoot\n v-bind="forwarded"\n :class="styles({ variant, class: props.class })"\n @update:open="onOpenChange"\n >\n <slot
|
|
2148
|
+
'<template>\n <ToastRoot\n v-bind="forwarded"\n :class="styles({ variant, class: props.class })"\n @update:open="onOpenChange"\n >\n <slot/>\n </ToastRoot>\n</template>\n\n<script lang="ts" setup>\n import { ToastRoot, useForwardPropsEmits } from "radix-vue";\n import type { ToastRootEmits, ToastRootProps } from "radix-vue";\n\n export interface ToastProps extends ToastRootProps {\n /**\n * Custom class names to add to the toast.\n */\n class?: any;\n /**\n * The variant of the toast.\n */\n variant?: VariantProps<typeof styles>["variant"];\n /**\n * Callback that fires when the toast is closed.\n */\n onOpenChange?: ((value: boolean) => void) | undefined;\n }\n\n const props = withDefaults(defineProps<ToastProps>(), {});\n\n const emits = defineEmits<ToastRootEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);\n\n const styles = tv({\n base: "group pointer-events-auto relative flex w-full items-center justify-between gap-4 overflow-hidden rounded-md border p-4 pr-9 shadow-sm transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:duration-300 data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",\n variants: {\n variant: {\n default: "border bg-background text-foreground",\n success:\n "success group border-[var(--success-border)] bg-[--success-bg] text-[--success-text]",\n info: "info group border-[var(--info-border)] bg-[--info-bg] text-[--info-text]",\n warning:\n "warning group border-[var(--warning-border)] bg-[--warning-bg] text-[--warning-text]",\n destructive:\n "destructive group border-[var(--error-border)] bg-[--error-bg] text-[--error-text]",\n },\n },\n defaultVariants: {\n variant: "default",\n },\n });\n</script>\n',
|
|
2149
2149
|
},
|
|
2150
2150
|
{
|
|
2151
2151
|
fileName: "Toast/Toaster.vue",
|
|
@@ -2157,7 +2157,7 @@ export default [
|
|
|
2157
2157
|
fileName: "Toast/Viewport.vue",
|
|
2158
2158
|
dirPath: "components/UI",
|
|
2159
2159
|
fileContent:
|
|
2160
|
-
'<template>\n <ToastViewport :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot
|
|
2160
|
+
'<template>\n <ToastViewport :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot/>\n </ToastViewport>\n</template>\n\n<script lang="ts" setup>\n import { ToastViewport } from "radix-vue";\n import type { ToastViewportProps } from "radix-vue";\n\n const props = defineProps<\n ToastViewportProps & {\n /**\n * Custom class names to add to the button.\n */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:bottom-auto sm:right-0 sm:flex-col md:max-w-[420px]",\n });\n</script>\n\n<style>\n [aria-label~="Notifications"] {\n display: grid;\n }\n</style>\n',
|
|
2161
2161
|
},
|
|
2162
2162
|
],
|
|
2163
2163
|
utils: [],
|
|
@@ -2171,7 +2171,28 @@ export default [
|
|
|
2171
2171
|
fileName: "Toggle.vue",
|
|
2172
2172
|
dirPath: "components/UI",
|
|
2173
2173
|
fileContent:
|
|
2174
|
-
'<template>\n <ToggleRoot v-bind="forwarded" :class="styles({ variant, size, class: props.class })">\n <slot
|
|
2174
|
+
'<template>\n <ToggleRoot v-bind="forwarded" :class="styles({ variant, size, class: props.class })">\n <slot/>\n </ToggleRoot>\n</template>\n\n<script lang="ts" setup>\n import { Toggle as ToggleRoot, useForwardPropsEmits } from "radix-vue";\n import type { ToggleEmits, ToggleProps } from "radix-vue";\n\n const props = defineProps<\n ToggleProps & {\n class?: any;\n variant?: Props["variant"];\n size?: Props["size"];\n }\n >();\n\n const emits = defineEmits<ToggleEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "variant", "size"), emits);\n\n type Props = VariantProps<typeof styles>;\n\n const styles = tv({\n base: "inline-flex items-center justify-center rounded-md font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground sm:text-sm",\n variants: {\n variant: {\n default: "bg-transparent",\n outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",\n },\n size: {\n default: "h-10 px-3",\n sm: "h-9 px-2.5",\n lg: "h-11 px-5",\n },\n },\n defaultVariants: {\n variant: "default",\n size: "default",\n },\n });\n</script>\n',
|
|
2175
|
+
},
|
|
2176
|
+
],
|
|
2177
|
+
utils: [],
|
|
2178
|
+
composables: [],
|
|
2179
|
+
plugins: [],
|
|
2180
|
+
},
|
|
2181
|
+
{
|
|
2182
|
+
name: "Toggle Group",
|
|
2183
|
+
value: "toggle-group",
|
|
2184
|
+
files: [
|
|
2185
|
+
{
|
|
2186
|
+
fileName: "ToggleGroup/ToggleGroup.vue",
|
|
2187
|
+
dirPath: "components/UI",
|
|
2188
|
+
fileContent:
|
|
2189
|
+
'<template>\r\n <ToggleGroupRoot\r\n v-slot="{ modelValue }"\r\n v-bind="forwarded"\r\n :class="styles({ class: props.class })"\r\n >\r\n <slot :model-value="modelValue" />\r\n </ToggleGroupRoot>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { ToggleGroupRoot, useForwardPropsEmits } from "radix-vue";\r\n import type { ToggleGroupRootEmits, ToggleGroupRootProps } from "radix-vue";\r\n\r\n const props = defineProps<\r\n ToggleGroupRootProps & {\r\n /** custom class to add to the parent */\r\n class?: any;\r\n }\r\n >();\r\n\r\n const emit = defineEmits<ToggleGroupRootEmits>();\r\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emit);\r\n\r\n const styles = tv({\r\n base: "flex items-center justify-center gap-1",\r\n });\r\n</script>\r\n',
|
|
2190
|
+
},
|
|
2191
|
+
{
|
|
2192
|
+
fileName: "ToggleGroup/ToggleGroupItem.vue",
|
|
2193
|
+
dirPath: "components/UI",
|
|
2194
|
+
fileContent:
|
|
2195
|
+
'<template>\r\n <ToggleGroupItem v-bind="forwarded" :class="styles({ class: props.class, size, variant })">\r\n <slot>\r\n <Icon v-if="icon" class="size-4" :name="icon" />\r\n </slot>\r\n </ToggleGroupItem>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { ToggleGroupItem, useForwardProps } from "radix-vue";\r\n import type { ToggleGroupItemProps } from "radix-vue";\r\n\r\n const props = defineProps<\r\n ToggleGroupItemProps & {\r\n /** custom class to add to the toggle */\r\n class?: any;\r\n /** icon to display */\r\n icon?: string;\r\n /** variant of the toggle */\r\n variant?: VariantProps<typeof styles>["variant"];\r\n /** size of the toggle */\r\n size?: VariantProps<typeof styles>["size"];\r\n }\r\n >();\r\n\r\n const forwarded = useForwardProps(reactiveOmit(props, "class"));\r\n\r\n const styles = tv({\r\n base: "inline-flex items-center justify-center rounded-md font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground sm:text-sm",\r\n variants: {\r\n variant: {\r\n default: "bg-transparent",\r\n outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",\r\n },\r\n size: {\r\n default: "h-10 px-3",\r\n sm: "h-9 px-2.5",\r\n lg: "h-11 px-5",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: "default",\r\n size: "default",\r\n },\r\n });\r\n</script>\r\n',
|
|
2175
2196
|
},
|
|
2176
2197
|
],
|
|
2177
2198
|
utils: [],
|
|
@@ -2192,31 +2213,31 @@ export default [
|
|
|
2192
2213
|
fileName: "Tooltip/Content.vue",
|
|
2193
2214
|
dirPath: "components/UI",
|
|
2194
2215
|
fileContent:
|
|
2195
|
-
'<template>\n <UiTooltipPortal :to="to">\n <TooltipContent v-bind="{ ...forwarded, ...$attrs }" :class="styles({ class: props.class })">\n <slot
|
|
2216
|
+
'<template>\n <UiTooltipPortal :to="to">\n <TooltipContent v-bind="{ ...forwarded, ...$attrs }" :class="styles({ class: props.class })">\n <slot/>\n </TooltipContent>\n </UiTooltipPortal>\n</template>\n\n<script lang="ts" setup>\n import { TooltipContent, useForwardPropsEmits } from "radix-vue";\n import type { TooltipContentEmits, TooltipContentProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = withDefaults(\n defineProps<\n TooltipContentProps & {\n to?: string | HTMLElement;\n class?: any;\n }\n >(),\n {\n side: "top",\n sideOffset: 8,\n align: "start",\n alignOffset: -4,\n avoidCollisions: true,\n collisionBoundary: () => [],\n collisionPadding: 0,\n sticky: "partial",\n }\n );\n\n const emits = defineEmits<TooltipContentEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "to"), emits);\n\n const styles = tv({\n base: "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",\n });\n</script>\n',
|
|
2196
2217
|
},
|
|
2197
2218
|
{
|
|
2198
2219
|
fileName: "Tooltip/Portal.vue",
|
|
2199
2220
|
dirPath: "components/UI",
|
|
2200
2221
|
fileContent:
|
|
2201
|
-
'<template>\n <TooltipPortal v-bind="props">\n <slot
|
|
2222
|
+
'<template>\n <TooltipPortal v-bind="props">\n <slot/>\n </TooltipPortal>\n</template>\n\n<script lang="ts" setup>\n import { TooltipPortal } from "radix-vue";\n import type { TooltipPortalProps } from "radix-vue";\n\n const props = defineProps<TooltipPortalProps>();\n</script>\n',
|
|
2202
2223
|
},
|
|
2203
2224
|
{
|
|
2204
2225
|
fileName: "Tooltip/Provider.vue",
|
|
2205
2226
|
dirPath: "components/UI",
|
|
2206
2227
|
fileContent:
|
|
2207
|
-
'<template>\n <TooltipProvider v-bind="props">\n <slot
|
|
2228
|
+
'<template>\n <TooltipProvider v-bind="props">\n <slot/>\n </TooltipProvider>\n</template>\n\n<script lang="ts" setup>\n import { TooltipProvider } from "radix-vue";\n import type { TooltipProviderProps } from "radix-vue";\n\n const props = defineProps<TooltipProviderProps>();\n</script>\n',
|
|
2208
2229
|
},
|
|
2209
2230
|
{
|
|
2210
2231
|
fileName: "Tooltip/Tooltip.vue",
|
|
2211
2232
|
dirPath: "components/UI",
|
|
2212
2233
|
fileContent:
|
|
2213
|
-
'<template>\n <UiTooltipProvider v-bind="props">\n <TooltipRoot v-bind="{ ...forwarded, ...$attrs }">\n <slot>\n <slot name="trigger"
|
|
2234
|
+
'<template>\n <UiTooltipProvider v-bind="props">\n <TooltipRoot v-bind="{ ...forwarded, ...$attrs }">\n <slot>\n <slot name="trigger"/>\n <slot name="content"/>\n </slot>\n </TooltipRoot>\n </UiTooltipProvider>\n</template>\n\n<script lang="ts" setup>\n import { TooltipRoot, useForwardPropsEmits } from "radix-vue";\n import type { TooltipProviderProps, TooltipRootEmits, TooltipRootProps } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n const props = withDefaults(defineProps<TooltipRootProps & TooltipProviderProps>(), {\n delayDuration: 200,\n });\n\n const emits = defineEmits<TooltipRootEmits>();\n\n const forwarded = useForwardPropsEmits(props, emits);\n</script>\n',
|
|
2214
2235
|
},
|
|
2215
2236
|
{
|
|
2216
2237
|
fileName: "Tooltip/Trigger.vue",
|
|
2217
2238
|
dirPath: "components/UI",
|
|
2218
2239
|
fileContent:
|
|
2219
|
-
'<template>\n <TooltipTrigger v-bind="props">\n <slot
|
|
2240
|
+
'<template>\n <TooltipTrigger v-bind="props">\n <slot/>\n </TooltipTrigger>\n</template>\n\n<script lang="ts" setup>\n import { TooltipTrigger } from "radix-vue";\n import type { TooltipTriggerProps } from "radix-vue";\n\n const props = defineProps<TooltipTriggerProps>();\n</script>\n',
|
|
2220
2241
|
},
|
|
2221
2242
|
],
|
|
2222
2243
|
utils: [],
|
|
@@ -2235,7 +2256,7 @@ export default [
|
|
|
2235
2256
|
fileName: "Vee/Checkbox.vue",
|
|
2236
2257
|
dirPath: "components/UI",
|
|
2237
2258
|
fileContent:
|
|
2238
|
-
'<template>\n <div :class="styles({ class: props.class })">\n <UiCheckbox\n :id="inputId"\n v-bind="$attrs"\n :icon="icon"\n :value="value"\n :name="name"\n :required="required"\n :disabled="disabled"\n :checked="checked"\n @update:checked="handleChange"\n />\n <div class="flex flex-col gap-1.5">\n <slot name="label" :
|
|
2259
|
+
'<template>\n <div :class="styles({ class: props.class })">\n <UiCheckbox\n :id="inputId"\n v-bind="$attrs"\n :icon="icon"\n :value="value"\n :name="name"\n :required="required"\n :disabled="disabled"\n :checked="checked"\n @update:checked="handleChange"\n />\n <div class="flex flex-col gap-1.5">\n <slot name="label" :error-message="errorMessage" :checked="checked">\n <UiLabel\n v-if="label"\n :for="inputId"\n class="leading-none"\n :class="[errorMessage && \'text-destructive\']"\n >{{ label }}</UiLabel\n >\n </slot>\n <TransitionSlide tag="div" group>\n <slot name="hint" :error-message="errorMessage" :checked="checked">\n <p\n v-if="hint && !errorMessage"\n key="hint"\n class="text-sm leading-none text-muted-foreground"\n >\n {{ hint }}\n </p>\n </slot>\n <slot name="errorMessage" :error-message="errorMessage" :checked="checked">\n <p v-if="errorMessage" key="errorMessage" class="text-sm leading-none text-destructive">\n {{ errorMessage }}\n </p>\n </slot>\n </TransitionSlide>\n </div>\n </div>\n</template>\n\n<script lang="ts" setup>\n const props = defineProps<{\n label?: string;\n icon?: string;\n hint?: string;\n modelValue?: string;\n name?: string;\n id?: string;\n rules?: any;\n validateOnMount?: boolean;\n type?: string;\n placeholder?: string;\n value?: any;\n required?: boolean;\n disabled?: boolean;\n class?: any;\n }>();\n const styles = tv({\n base: "flex gap-3",\n });\n\n const inputId = props.id || useId();\n\n const { errorMessage, checked, handleChange } = useField(\n () => props.name || inputId,\n props.rules,\n {\n initialValue: props.modelValue,\n label: props.label,\n validateOnMount: props.validateOnMount,\n type: "checkbox",\n checkedValue: props.value || true,\n syncVModel: true,\n }\n );\n</script>\n',
|
|
2239
2260
|
},
|
|
2240
2261
|
],
|
|
2241
2262
|
utils: [],
|
|
@@ -2254,7 +2275,26 @@ export default [
|
|
|
2254
2275
|
fileName: "Vee/CurrencyInput.vue",
|
|
2255
2276
|
dirPath: "components/UI",
|
|
2256
2277
|
fileContent:
|
|
2257
|
-
'<template>\r\n <div class="w-full">\r\n <UiLabel\r\n
|
|
2278
|
+
'<template>\r\n <div class="w-full">\r\n <UiLabel\r\n v-if="label"\r\n :for="inputId"\r\n :hint="labelHint"\r\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\r\n ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\r\n >\r\n <div class="relative">\r\n <slot name="icon">\r\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\r\n <Icon v-if="icon" :name="icon" class="h-4 w-4 text-muted-foreground/70" />\r\n </span>\r\n </slot>\r\n <UiCurrencyInput\r\n :id="inputId"\r\n v-model="value"\r\n type="text"\r\n :required="required"\r\n :name="name"\r\n :disabled="disabled"\r\n v-bind="$attrs"\r\n :class="[hasIcon && \'pl-9\']"\r\n :placeholder="placeholder"\r\n :options="options"\r\n />\r\n </div>\r\n <TransitionSlide group tag="div">\r\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\r\n {{ hint }}\r\n </p>\r\n\r\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\r\n {{ errorMessage }}\r\n </p>\r\n </TransitionSlide>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import type { CurrencyInputOptions } from "vue-currency-input";\r\n\r\n const props = defineProps<{\r\n label?: string;\r\n labelHint?: string;\r\n icon?: string;\r\n hint?: string;\r\n disabled?: boolean;\r\n modelValue?: string;\r\n name?: string;\r\n id?: string;\r\n rules?: any;\r\n validateOnMount?: boolean;\r\n type?: string;\r\n placeholder?: string;\r\n options?: CurrencyInputOptions;\r\n required?: boolean;\r\n }>();\r\n\r\n const inputId = useId();\r\n\r\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\r\n\r\n const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\r\n initialValue: props.modelValue,\r\n label: props.label,\r\n validateOnMount: props.validateOnMount,\r\n syncVModel: true,\r\n });\r\n</script>\r\n',
|
|
2279
|
+
},
|
|
2280
|
+
],
|
|
2281
|
+
utils: [],
|
|
2282
|
+
composables: [],
|
|
2283
|
+
plugins: [],
|
|
2284
|
+
},
|
|
2285
|
+
{
|
|
2286
|
+
name: "VeeDateField",
|
|
2287
|
+
value: "vee-date-field",
|
|
2288
|
+
deps: ["@vee-validate/nuxt", "@morev/vue-transitions", "@internationalized/date"],
|
|
2289
|
+
askValidator: true,
|
|
2290
|
+
nuxtModules: ["@vee-validate/nuxt", "@morev/vue-transitions/nuxt"],
|
|
2291
|
+
components: ["date-field", "label"],
|
|
2292
|
+
files: [
|
|
2293
|
+
{
|
|
2294
|
+
fileName: "Vee/DateField.vue",
|
|
2295
|
+
dirPath: "components/UI",
|
|
2296
|
+
fileContent:
|
|
2297
|
+
'<template>\r\n <div class="w-full">\r\n <UiLabel\r\n v-if="label"\r\n :for="inputId"\r\n :hint="labelHint"\r\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\r\n ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\r\n >\r\n <UiDateField v-bind="{ ...$attrs, ...props }" v-model="value" />\r\n <TransitionSlide group tag="div">\r\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\r\n {{ hint }}\r\n </p>\r\n\r\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\r\n {{ errorMessage }}\r\n </p>\r\n </TransitionSlide>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import type { DateFieldRootProps } from "radix-vue";\r\n\r\n const props = defineProps<\r\n DateFieldRootProps & {\r\n label?: string;\r\n labelHint?: string;\r\n hint?: string;\r\n modelValue?: string;\r\n name?: string;\r\n \r\n rules?: any;\r\n validateOnMount?: boolean;\r\n separator?: string;\r\n separatorIcon?: string;\r\n }\r\n >();\r\n\r\n const inputId = props.id || useId();\r\n\r\n const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\r\n initialValue: props.modelValue,\r\n label: props.label,\r\n validateOnMount: props.validateOnMount,\r\n syncVModel: true,\r\n });\r\n</script>\r\n',
|
|
2258
2298
|
},
|
|
2259
2299
|
],
|
|
2260
2300
|
utils: [],
|
|
@@ -2273,7 +2313,7 @@ export default [
|
|
|
2273
2313
|
fileName: "Vee/Datepicker.vue",
|
|
2274
2314
|
dirPath: "components/UI",
|
|
2275
2315
|
fileContent:
|
|
2276
|
-
'<template>\n <div class="w-full">\n <UiLabel\n
|
|
2316
|
+
'<template>\r\n <div class="w-full">\r\n <UiLabel\r\n v-if="label"\r\n :for="inputId"\r\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\r\n ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\r\n >\r\n <div class="relative">\r\n <slot name="icon">\r\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\r\n <Icon v-if="icon" :name="icon" class="h-4 w-4 text-muted-foreground/70" />\r\n </span>\r\n </slot>\r\n <UiDatepicker v-bind="datePickerProps" v-model="value">\r\n <template #header-title="{ title }">\r\n <div class="inline-flex items-center gap-1">\r\n {{ title }} <Icon name="lucide:chevron-down" class="h-4 w-4" />\r\n </div>\r\n </template>\r\n <template #default="{ inputValue, inputEvents }">\r\n <UiInput\r\n :id="inputId"\r\n :readonly="readonly"\r\n :required="required"\r\n :model-value="inputValue"\r\n :name="name"\r\n :disabled="disabled"\r\n v-bind="$attrs"\r\n :class="[hasIcon && \'pl-9\']"\r\n :placeholder="placeholder"\r\n v-on="inputEvents"\r\n />\r\n </template>\r\n </UiDatepicker>\r\n </div>\r\n <TransitionSlide group tag="div">\r\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\r\n {{ hint }}\r\n </p>\r\n\r\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\r\n {{ errorMessage }}\r\n </p>\r\n </TransitionSlide>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n const props = withDefaults(\r\n defineProps<{\r\n label?: string;\r\n icon?: string;\r\n hint?: string;\r\n disabled?: boolean;\r\n modelValue?: any;\r\n name?: string;\r\n id?: string;\r\n rules?: any;\r\n validateOnMount?: boolean;\r\n placeholder?: string;\r\n readonly?: boolean;\r\n datePickerProps?: any;\r\n required?: boolean;\r\n }>(),\r\n {\r\n icon: "lucide:calendar-days",\r\n }\r\n );\r\n\r\n const inputId = props.id || useId();\r\n\r\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\r\n\r\n const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\r\n initialValue: props.modelValue,\r\n label: props.label,\r\n validateOnMount: props.validateOnMount,\r\n syncVModel: true,\r\n });\r\n</script>\r\n',
|
|
2277
2317
|
},
|
|
2278
2318
|
],
|
|
2279
2319
|
utils: [],
|
|
@@ -2292,7 +2332,7 @@ export default [
|
|
|
2292
2332
|
fileName: "Vee/FileInput.vue",
|
|
2293
2333
|
dirPath: "components/UI",
|
|
2294
2334
|
fileContent:
|
|
2295
|
-
'<template>\n <div class="w-full">\n <UiLabel
|
|
2335
|
+
'<template>\r\n <div class="w-full">\r\n <UiLabel v-if="label" :for="inputId" :class="[errorMessage && \'text-destructive\', \'mb-2\']">\r\n <span>{{ label }} <span v-if="required" class="text-destructive">*</span></span>\r\n </UiLabel>\r\n <div class="relative">\r\n <slot name="icon">\r\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\r\n <Icon v-if="icon" :name="icon" class="h-4 w-4 text-muted-foreground/70" />\r\n </span>\r\n </slot>\r\n <UiInput\r\n :id="inputId"\r\n type="file"\r\n :required="required"\r\n :name="name"\r\n v-bind="$attrs"\r\n :multiple="multiple"\r\n :class="[hasIcon && \'pl-9\']"\r\n :accept="accept"\r\n @change="\r\n handleChange($event);\r\n emits(\'change\', $event.target.files);\r\n "\r\n @blur="\r\n handleBlur($event);\r\n emits(\'blur\', $event);\r\n "\r\n />\r\n </div>\r\n <TransitionSlide group tag="div">\r\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\r\n {{ hint }}\r\n </p>\r\n\r\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\r\n {{ errorMessage }}\r\n </p>\r\n </TransitionSlide>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n const props = defineProps<{\r\n label?: string;\r\n icon?: string;\r\n hint?: string;\r\n name: string;\r\n id?: string;\r\n rules?: any;\r\n validateOnMount?: boolean;\r\n multiple?: boolean;\r\n accept?: string;\r\n required?: boolean;\r\n }>();\r\n\r\n const emits = defineEmits<{\r\n change: [files?: FileList | File | File[] | null];\r\n blur: [event?: FocusEvent];\r\n }>();\r\n\r\n const inputId = props.id || useId();\r\n\r\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\r\n\r\n const { errorMessage, handleChange, handleBlur } = useField(() => props.name, props.rules, {\r\n label: props.label,\r\n validateOnMount: props.validateOnMount,\r\n });\r\n</script>\r\n',
|
|
2296
2336
|
},
|
|
2297
2337
|
],
|
|
2298
2338
|
utils: [],
|
|
@@ -2311,7 +2351,7 @@ export default [
|
|
|
2311
2351
|
fileName: "Vee/Input.vue",
|
|
2312
2352
|
dirPath: "components/UI",
|
|
2313
2353
|
fileContent:
|
|
2314
|
-
'<template>\n <div class="w-full">\n <UiLabel\n
|
|
2354
|
+
'<template>\r\n <div class="w-full">\r\n <UiLabel\r\n v-if="label"\r\n :for="inputId"\r\n :hint="labelHint"\r\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\r\n ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\r\n >\r\n <div class="relative">\r\n <slot name="icon">\r\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\r\n <Icon v-if="icon" :name="icon" class="h-4 w-4 text-muted-foreground/70" />\r\n </span>\r\n </slot>\r\n <UiInput\r\n :id="inputId"\r\n v-model="value"\r\n :type="type"\r\n :required="required"\r\n :name="name"\r\n :disabled="disabled"\r\n v-bind="$attrs"\r\n :class="[hasIcon && \'pl-9\']"\r\n :placeholder="placeholder"\r\n @blur="handleBlur"\r\n />\r\n </div>\r\n <TransitionSlide group tag="div">\r\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\r\n {{ hint }}\r\n </p>\r\n\r\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\r\n {{ errorMessage }}\r\n </p>\r\n </TransitionSlide>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n const props = defineProps<{\r\n label?: string;\r\n labelHint?: string;\r\n icon?: string;\r\n hint?: string;\r\n disabled?: boolean;\r\n modelValue?: string;\r\n name?: string;\r\n id?: string;\r\n rules?: any;\r\n validateOnMount?: boolean;\r\n type?: string;\r\n placeholder?: string;\r\n required?: boolean;\r\n }>();\r\n\r\n const inputId = props.id || useId();\r\n\r\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\r\n\r\n const { errorMessage, value, handleBlur } = useField(() => props.name || inputId, props.rules, {\r\n initialValue: props.modelValue,\r\n label: props.label,\r\n validateOnMount: props.validateOnMount,\r\n syncVModel: true,\r\n });\r\n</script>\r\n',
|
|
2315
2355
|
},
|
|
2316
2356
|
],
|
|
2317
2357
|
utils: [],
|
|
@@ -2330,7 +2370,7 @@ export default [
|
|
|
2330
2370
|
fileName: "Vee/MultiSelect.vue",
|
|
2331
2371
|
dirPath: "components/UI",
|
|
2332
2372
|
fileContent:
|
|
2333
|
-
'<template>\n <div class="w-full">\n <UiLabel\n
|
|
2373
|
+
'<template>\r\n <div class="w-full">\r\n <UiLabel\r\n v-if="formLabel"\r\n :for="inputId"\r\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\r\n ><span>{{ formLabel }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\r\n >\r\n <Multiselect\r\n v-bind="$attrs"\r\n :id="inputId"\r\n ref="multiselect"\r\n v-model="value"\r\n :attrs="{\r\n id: inputId,\r\n }"\r\n :disabled="disabled"\r\n :name="name"\r\n :required="required"\r\n :classes="{\r\n containerActive: \'ring-2 ring-ring ring-offset-2 ring-offset-background transition\',\r\n }"\r\n >\r\n <template v-for="(_, slotName) in $slots" #[slotName]="scope">\r\n <slot :name="slotName" v-bind="scope" />\r\n </template>\r\n <template #clear="{ clear }">\r\n <button class="mr-2 flex items-center justify-center" @click="clear">\r\n <Icon name="heroicons:x-mark" size="16" class="text-muted-foreground" />\r\n </button>\r\n </template>\r\n </Multiselect>\r\n <TransitionSlide group tag="div">\r\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\r\n {{ hint }}\r\n </p>\r\n\r\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\r\n {{ errorMessage }}\r\n </p>\r\n </TransitionSlide>\r\n </div>\r\n</template>\r\n\r\n<script setup lang="ts">\r\n import Multiselect from "@vueform/multiselect";\r\n\r\n import "@vueform/multiselect/themes/default.css";\r\n\r\n const multiselect = shallowRef<InstanceType<typeof Multiselect> | null>(null);\r\n\r\n interface Props\r\n extends /* @vue-ignore */ Partial<Omit<InstanceType<typeof Multiselect>, "$emit">> {}\r\n\r\n const props = defineProps<\r\n {\r\n modelValue?: any;\r\n formLabel?: string;\r\n required?: boolean;\r\n id?: string;\r\n hint?: string;\r\n disabled?: boolean;\r\n rules?: any;\r\n validateOnMount?: boolean;\r\n name?: string;\r\n } & Props\r\n >();\r\n\r\n const emit = defineEmits([\r\n "paste",\r\n "open",\r\n "close",\r\n "select",\r\n "deselect",\r\n "input",\r\n "search-change",\r\n "tag",\r\n "option",\r\n "update:modelValue",\r\n "change",\r\n "clear",\r\n "keydown",\r\n "keyup",\r\n "max",\r\n "create",\r\n "ready",\r\n ]);\r\n\r\n const inputId = props.id || useId();\r\n\r\n const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\r\n initialValue: props.modelValue,\r\n label: props.label,\r\n validateOnMount: props.validateOnMount,\r\n syncVModel: true,\r\n });\r\n\r\n onMounted(() => {\r\n nextTick(() => {\r\n emit("ready", multiselect.value);\r\n });\r\n });\r\n</script>\r\n\r\n<style>\r\n :root {\r\n --ms-font-size: theme("fontSize.sm");\r\n --ms-line-height: 1.5;\r\n --ms-bg: theme("colors.background");\r\n --ms-bg-disabled: transparent;\r\n --ms-border-color: theme("colors.input");\r\n --ms-border-width: 1px;\r\n --ms-border-color-active: theme("colors.input");\r\n --ms-border-width-active: 1px;\r\n --ms-radius: theme("borderRadius.md");\r\n --ms-py: theme("padding.2");\r\n --ms-px: theme("padding.3");\r\n --ms-ring-width: 0px;\r\n --ms-ring-color: theme("colors.ring");\r\n --ms-placeholder-color: theme("colors.muted.foreground");\r\n --ms-max-height: theme("height.52");\r\n\r\n --ms-spinner-color: theme("colors.muted.foreground");\r\n --ms-caret-color: theme("colors.muted.foreground");\r\n --ms-clear-color: theme("colors.muted.foreground");\r\n --ms-clear-color-hover: theme("colors.primary.DEFAULT");\r\n\r\n --ms-tag-font-size: theme("fontSize.sm");\r\n --ms-tag-line-height: 1.25rem;\r\n --ms-tag-font-weight: 500;\r\n --ms-tag-bg: theme("colors.primary.DEFAULT");\r\n --ms-tag-bg-disabled: transparent;\r\n --ms-tag-color: theme("colors.primary.foreground");\r\n --ms-tag-color-disabled: theme("colors.muted.foreground");\r\n --ms-tag-radius: theme("borderRadius.DEFAULT");\r\n --ms-tag-py: theme("padding[0.5]");\r\n\r\n --ms-dropdown-bg: theme("colors.background");\r\n --ms-dropdown-border-color: theme("colors.border");\r\n --ms-dropdown-border-width: 1px;\r\n --ms-dropdown-radius: theme("borderRadius.md");\r\n\r\n --ms-group-label-bg: theme("colors.muted.DEFAULT");\r\n --ms-group-label-color: theme("colors.muted.foreground");\r\n --ms-group-label-bg-pointed: theme("colors.primary.DEFAULT");\r\n --ms-group-label-color-pointed: theme("colors.primary.foreground");\r\n --ms-group-label-bg-disabled: theme("colors.muted.DEFAULT / 50%");\r\n --ms-group-label-color-disabled: theme("colors.muted.foreground / 50%");\r\n --ms-group-label-bg-selected: theme("colors.primary.DEFAULT");\r\n --ms-group-label-color-selected: theme("colors.primary.foreground");\r\n --ms-group-label-bg-selected-pointed: theme("colors.primary.DEFAULT");\r\n --ms-group-label-color-selected-pointed: theme("colors.primary.foreground");\r\n --ms-group-label-bg-selected-disabled: theme("colors.muted.DEFAULT / 50%");\r\n --ms-group-label-color-selected-disabled: theme("colors.muted.foreground / 50%");\r\n\r\n --ms-option-font-size: theme("fontSize.sm");\r\n --ms-option-bg-pointed: theme("colors.primary.DEFAULT");\r\n --ms-option-color-pointed: theme("colors.primary.foreground");\r\n --ms-option-bg-selected: theme("colors.primary.DEFAULT");\r\n --ms-option-color-selected: theme("colors.primary.foreground");\r\n --ms-option-bg-disabled: transparent;\r\n --ms-option-color-disabled: theme("colors.muted.foreground / 50%");\r\n --ms-option-bg-selected-pointed: theme("colors.primary.DEFAULT");\r\n --ms-option-color-selected-pointed: theme("colors.primary.foreground");\r\n --ms-option-bg-selected-disabled: theme("colors.muted.DEFAULT");\r\n --ms-option-color-selected-disabled: theme("colors.muted.foreground");\r\n\r\n --ms-empty-color: theme("colors.muted.foreground");\r\n }\r\n</style>\r\n',
|
|
2334
2374
|
},
|
|
2335
2375
|
],
|
|
2336
2376
|
utils: [],
|
|
@@ -2349,7 +2389,7 @@ export default [
|
|
|
2349
2389
|
fileName: "Vee/PinInput.vue",
|
|
2350
2390
|
dirPath: "components/UI",
|
|
2351
2391
|
fileContent:
|
|
2352
|
-
'<template>\n <div class="w-full">\n <UiLabel\n
|
|
2392
|
+
'<template>\r\n <div class="w-full">\r\n <UiLabel\r\n v-if="label"\r\n :for="inputId"\r\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\r\n ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\r\n >\r\n <div class="relative">\r\n <UiPinInput\r\n :id="inputId"\r\n v-bind="{\r\n ...$attrs,\r\n ...reactiveOmit(props, \'label\', \'hint\', \'id\', \'rules\', \'validateOnMount\', \'modelValue\'),\r\n }"\r\n v-model="value"\r\n @complete="emits(\'complete\', $event)"\r\n />\r\n </div>\r\n <TransitionSlide group tag="div">\r\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\r\n {{ hint }}\r\n </p>\r\n\r\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\r\n {{ errorMessage }}\r\n </p>\r\n </TransitionSlide>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import type { PinInputRootProps } from "radix-vue";\r\n\r\n const props = defineProps<\r\n Omit<PinInputRootProps, "as" | "asChild"> & {\r\n label?: string;\r\n hint?: string;\r\n id?: string;\r\n rules?: any;\r\n validateOnMount?: boolean;\r\n separator?: string;\r\n inputCount?: number;\r\n }\r\n >();\r\n\r\n const emits = defineEmits<{\r\n complete: [value: string[]];\r\n }>();\r\n\r\n const inputId = props.id || useId();\r\n\r\n const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\r\n initialValue: props.modelValue || [],\r\n label: props.label,\r\n validateOnMount: props.validateOnMount,\r\n syncVModel: true,\r\n });\r\n</script>\r\n',
|
|
2353
2393
|
},
|
|
2354
2394
|
],
|
|
2355
2395
|
utils: [],
|
|
@@ -2368,7 +2408,7 @@ export default [
|
|
|
2368
2408
|
fileName: "Vee/RadioGroup.vue",
|
|
2369
2409
|
dirPath: "components/UI",
|
|
2370
2410
|
fileContent:
|
|
2371
|
-
'<template>\n <div :class="styles({ class: props.class })">\n <slot name="label" :
|
|
2411
|
+
'<template>\r\n <div :class="styles({ class: props.class })">\r\n <slot name="label" :error-message="errorMessage" :value="value">\r\n <UiLabel v-if="label" class="mb-5 leading-none" :class="[errorMessage && \'text-destructive\']"\r\n ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\r\n >\r\n </slot>\r\n <UiRadioGroup v-bind="{ ...forwarded, ...$attrs }" v-model="value">\r\n <slot/>\r\n </UiRadioGroup>\r\n <div class="flex flex-col gap-1.5">\r\n <TransitionSlide tag="div" group>\r\n <slot name="hint" :error-message="errorMessage" :value="value">\r\n <p\r\n v-if="hint && !errorMessage"\r\n key="hint"\r\n class="mt-1.5 text-sm leading-none text-muted-foreground"\r\n >\r\n {{ hint }}\r\n </p>\r\n </slot>\r\n <slot name="errorMessage" :error-message="errorMessage" :value="value">\r\n <p\r\n v-if="errorMessage"\r\n key="errorMessage"\r\n class="mt-1.5 text-sm leading-none text-destructive"\r\n >\r\n {{ errorMessage }}\r\n </p>\r\n </slot>\r\n </TransitionSlide>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { useForwardProps } from "radix-vue";\r\n import type { RadioGroupRootProps } from "radix-vue";\r\n\r\n const props = defineProps<\r\n RadioGroupRootProps & {\r\n label?: string;\r\n hint?: string;\r\n id?: string;\r\n rules?: any;\r\n validateOnMount?: boolean;\r\n class?: any;\r\n name: string;\r\n }\r\n >();\r\n\r\n const forwarded = useForwardProps(props);\r\n const styles = tv({\r\n base: "flex flex-col",\r\n });\r\n\r\n defineOptions({ inheritAttrs: false });\r\n\r\n const { errorMessage, value } = useField(() => props.name, props.rules, {\r\n initialValue: props.modelValue,\r\n label: props.label,\r\n validateOnMount: props.validateOnMount,\r\n type: "radio",\r\n syncVModel: true,\r\n });\r\n</script>\r\n',
|
|
2372
2412
|
},
|
|
2373
2413
|
],
|
|
2374
2414
|
utils: [],
|
|
@@ -2387,7 +2427,7 @@ export default [
|
|
|
2387
2427
|
fileName: "Vee/Select.vue",
|
|
2388
2428
|
dirPath: "components/UI",
|
|
2389
2429
|
fileContent:
|
|
2390
|
-
'<template>\n <div class="w-full">\n <UiLabel
|
|
2430
|
+
'<template>\r\n <div class="w-full">\r\n <UiLabel v-if="label" :for="inputId" :class="[errorMessage && \'text-destructive\', \'mb-2\']">\r\n <span>{{ label }} <span v-if="required" class="text-destructive">*</span></span>\r\n </UiLabel>\r\n <div class="relative">\r\n <slot name="icon">\r\n <span v-if="hasIcon" lass="absolute inset-y-0 left-3 flex items-center justify-center">\r\n <Icon v-if="icon" :name="icon" class="h-4 w-4 text-muted-foreground" />\r\n </span>\r\n </slot>\r\n <UiNativeSelect\r\n :id="inputId"\r\n v-model="value"\r\n :required="required"\r\n :trailing-icon="trailingIcon"\r\n :name="name"\r\n v-bind="$attrs"\r\n :class="[hasIcon && \'pl-9\']"\r\n @blur="handleBlur"\r\n >\r\n <slot/>\r\n </UiNativeSelect>\r\n </div>\r\n <TransitionSlide group tag="div">\r\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\r\n {{ hint }}\r\n </p>\r\n\r\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\r\n {{ errorMessage }}\r\n </p>\r\n </TransitionSlide>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n const props = defineProps<{\r\n label?: string;\r\n icon?: string;\r\n hint?: string;\r\n modelValue?: string;\r\n name?: string;\r\n id?: string;\r\n rules?: any;\r\n validateOnMount?: boolean;\r\n type?: string;\r\n trailingIcon?: string;\r\n required?: boolean;\r\n }>();\r\n\r\n const inputId = props.id || useId();\r\n\r\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\r\n\r\n const { errorMessage, value, handleBlur } = useField(() => props.name || inputId, props.rules, {\r\n initialValue: props.modelValue,\r\n label: props.label,\r\n validateOnMount: props.validateOnMount,\r\n syncVModel: true,\r\n });\r\n</script>\r\n',
|
|
2391
2431
|
},
|
|
2392
2432
|
],
|
|
2393
2433
|
utils: [],
|
|
@@ -2406,7 +2446,7 @@ export default [
|
|
|
2406
2446
|
fileName: "Vee/TagsInput.vue",
|
|
2407
2447
|
dirPath: "components/UI",
|
|
2408
2448
|
fileContent:
|
|
2409
|
-
'<template>\n <div class="w-full">\n <UiLabel\n
|
|
2449
|
+
'<template>\r\n <div class="w-full">\r\n <UiLabel\r\n v-if="label"\r\n :for="inputId"\r\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\r\n ><span>{{ label }} <span v-if="required" class="text-destructive">*</span></span></UiLabel\r\n >\r\n <div class="relative">\r\n <slot name="icon">\r\n <span v-if="hasIcon" class="absolute inset-y-0 left-3 flex items-center justify-center">\r\n <Icon v-if="icon" :name="icon" class="h-4 w-4 text-muted-foreground/70" />\r\n </span>\r\n </slot>\r\n <UiTagsInput\r\n v-model="value"\r\n :required="required"\r\n :name="name"\r\n :disabled="disabled"\r\n v-bind="$attrs"\r\n :class="[hasIcon && \'pl-9\']"\r\n >\r\n <UiTagsInputItem v-for="tag in value" :key="tag" :value="tag" />\r\n <UiTagsInputField :id="inputId" :placeholder="placeholder" />\r\n </UiTagsInput>\r\n </div>\r\n <TransitionSlide group tag="div">\r\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\r\n {{ hint }}\r\n </p>\r\n\r\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\r\n {{ errorMessage }}\r\n </p>\r\n </TransitionSlide>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n const props = defineProps<{\r\n label?: string;\r\n icon?: string;\r\n hint?: string;\r\n disabled?: boolean;\r\n modelValue?: string[];\r\n name?: string;\r\n id?: string;\r\n rules?: any;\r\n validateOnMount?: boolean;\r\n type?: string;\r\n placeholder?: string;\r\n required?: boolean;\r\n }>();\r\n\r\n const inputId = props.id || useId();\r\n\r\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\r\n\r\n const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\r\n initialValue: props.modelValue,\r\n label: props.label,\r\n validateOnMount: props.validateOnMount,\r\n syncVModel: true,\r\n });\r\n</script>\r\n',
|
|
2410
2450
|
},
|
|
2411
2451
|
],
|
|
2412
2452
|
utils: [],
|
|
@@ -2425,7 +2465,7 @@ export default [
|
|
|
2425
2465
|
fileName: "Vee/Textarea.vue",
|
|
2426
2466
|
dirPath: "components/UI",
|
|
2427
2467
|
fileContent:
|
|
2428
|
-
'<template>\n <div class="w-full">\n <UiLabel
|
|
2468
|
+
'<template>\r\n <div class="w-full">\r\n <UiLabel v-if="label" :for="inputId" :class="[errorMessage && \'text-destructive\', \'mb-2\']">\r\n <span>{{ label }} <span v-if="required" class="text-destructive">*</span></span>\r\n </UiLabel>\r\n <div class="relative">\r\n <slot name="icon">\r\n <span v-if="hasIcon" class="absolute left-3 top-3 flex items-center justify-center">\r\n <Icon v-if="icon" :name="icon" class="h-4 w-4 text-muted-foreground/70" />\r\n </span>\r\n </slot>\r\n <UiTextarea\r\n :id="inputId"\r\n v-model="value"\r\n :required="required"\r\n :rows="rows"\r\n :name="name"\r\n v-bind="$attrs"\r\n :class="[hasIcon && \'pl-9\']"\r\n :placeholder="placeholder"\r\n @blur="handleBlur"\r\n />\r\n </div>\r\n <TransitionSlide group tag="div">\r\n <p v-if="hint && !errorMessage" key="hint" class="mt-1.5 text-sm text-muted-foreground">\r\n {{ hint }}\r\n </p>\r\n\r\n <p v-if="errorMessage" key="errorMessage" class="mt-1.5 text-sm text-destructive">\r\n {{ errorMessage }}\r\n </p>\r\n </TransitionSlide>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n const props = defineProps<{\r\n label?: string;\r\n icon?: string;\r\n hint?: string;\r\n modelValue?: string;\r\n name?: string;\r\n id?: string;\r\n rules?: any;\r\n validateOnMount?: boolean;\r\n placeholder?: string;\r\n rows?: number;\r\n required?: boolean;\r\n }>();\r\n\r\n const inputId = props.id || useId();\r\n\r\n const hasIcon = computed(() => Boolean(props.icon) || Boolean(useSlots().icon));\r\n\r\n const { errorMessage, value, handleBlur } = useField(() => props.name || inputId, props.rules, {\r\n initialValue: props.modelValue,\r\n label: props.label,\r\n validateOnMount: props.validateOnMount,\r\n syncVModel: true,\r\n });\r\n</script>\r\n',
|
|
2429
2469
|
},
|
|
2430
2470
|
],
|
|
2431
2471
|
utils: [],
|