ui-thing 0.0.16 → 0.0.17
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 +12 -0
- package/dist/index.js +118 -72
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/comps.ts +39 -39
package/package.json
CHANGED
package/src/comps.ts
CHANGED
|
@@ -121,7 +121,7 @@ export default [
|
|
|
121
121
|
fileName: "AlertDialog/Footer.vue",
|
|
122
122
|
dirPath: "components/UI",
|
|
123
123
|
fileContent:
|
|
124
|
-
'<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot></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 }\n );\n const styles = tv({\n base: "flex flex-col-reverse sm:flex-row sm:justify-end
|
|
124
|
+
'<template>\n <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot></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 }\n );\n const styles = tv({\n base: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",\n });\n</script>\n',
|
|
125
125
|
},
|
|
126
126
|
{
|
|
127
127
|
fileName: "AlertDialog/Header.vue",
|
|
@@ -210,7 +210,7 @@ export default [
|
|
|
210
210
|
fileName: "Autocomplete/Content.vue",
|
|
211
211
|
dirPath: "components/UI",
|
|
212
212
|
fileContent:
|
|
213
|
-
'<template>\n <ComboboxContent v-bind="forwarded" :class="styles({ class: props.class })">\n <
|
|
213
|
+
'<template>\n <ComboboxContent v-bind="forwarded" :class="styles({ class: props.class })">\n <UiAutocompleteViewport>\n <slot></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 }\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',
|
|
214
214
|
},
|
|
215
215
|
{
|
|
216
216
|
fileName: "Autocomplete/Empty.vue",
|
|
@@ -234,7 +234,7 @@ export default [
|
|
|
234
234
|
fileName: "Autocomplete/Item.vue",
|
|
235
235
|
dirPath: "components/UI",
|
|
236
236
|
fileContent:
|
|
237
|
-
'<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 <
|
|
237
|
+
'<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></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',
|
|
238
238
|
},
|
|
239
239
|
{
|
|
240
240
|
fileName: "Autocomplete/ItemIndicator.vue",
|
|
@@ -288,19 +288,19 @@ export default [
|
|
|
288
288
|
fileName: "Avatar/Avatar.vue",
|
|
289
289
|
dirPath: "components/UI",
|
|
290
290
|
fileContent:
|
|
291
|
-
'<template>\r\n <AvatarRoot :as="as" :as-child="asChild" :class="styles({ class: props.class })">\r\n <slot>\r\n <slot name="image">\r\n <
|
|
291
|
+
'<template>\r\n <AvatarRoot :as="as" :as-child="asChild" :class="styles({ class: props.class })">\r\n <slot>\r\n <slot name="image">\r\n <UiAvatarImage\r\n @loading-status-change="emits(\'loadingStatusChange\', $event)"\r\n v-if="src"\r\n :src="src"\r\n :alt="alt"\r\n :class="imageClass"\r\n />\r\n </slot>\r\n <slot name="fallback">\r\n <UiAvatarFallback :delay-ms="delayMs" :class="fallbackClass" :fallback="fallback" />\r\n </slot>\r\n </slot>\r\n </AvatarRoot>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { AvatarRoot } from "radix-vue";\r\n import type { AvatarImageEmits, AvatarImageProps, AvatarRootProps } from "radix-vue";\r\n\r\n const props = withDefaults(\r\n defineProps<\r\n AvatarRootProps &\r\n Partial<AvatarImageProps> & {\r\n class?: any;\r\n imageClass?: any;\r\n fallbackClass?: any;\r\n alt?: string;\r\n fallback?: string;\r\n delayMs?: number;\r\n }\r\n >(),\r\n {}\r\n );\r\n\r\n const emits = defineEmits<AvatarImageEmits>();\r\n const styles = tv({\r\n base: "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",\r\n });\r\n</script>\r\n',
|
|
292
292
|
},
|
|
293
293
|
{
|
|
294
294
|
fileName: "Avatar/Fallback.vue",
|
|
295
295
|
dirPath: "components/UI",
|
|
296
296
|
fileContent:
|
|
297
|
-
'<template>\r\n <AvatarFallback\r\n :class="styles({ class: props.class })"\r\n v-bind="reactiveOmit(props, \'class\', \'fallback\')"\r\n >\r\n <slot>\r\n {{ fallback }}\r\n </slot>\r\n </AvatarFallback>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { AvatarFallback } from "radix-vue";\r\n import type { AvatarFallbackProps } from "radix-vue";\r\n\r\n const props = defineProps<\r\n AvatarFallbackProps & {\r\n fallback?: string;\r\n class?: any;\r\n }\r\n >();\r\n const styles = tv({\r\n base: "flex h-full w-full items-center justify-center rounded-full bg-muted font-medium",\r\n });\r\n</script>\r\n',
|
|
297
|
+
'<template>\r\n <AvatarFallback\r\n :class="styles({ class: props.class })"\r\n v-bind="reactiveOmit(props, \'class\', \'fallback\')"\r\n >\r\n <slot>\r\n {{ fallback }}\r\n </slot>\r\n </AvatarFallback>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { AvatarFallback } from "radix-vue";\r\n import type { AvatarFallbackProps } from "radix-vue";\r\n\r\n const props = defineProps<\r\n AvatarFallbackProps & {\r\n /** The text to display inside th eavatar */\r\n fallback?: string;\r\n /** Custom class(es) to add to the element */\r\n class?: any;\r\n }\r\n >();\r\n const styles = tv({\r\n base: "flex h-full w-full items-center justify-center rounded-full bg-muted font-medium",\r\n });\r\n</script>\r\n',
|
|
298
298
|
},
|
|
299
299
|
{
|
|
300
300
|
fileName: "Avatar/Image.vue",
|
|
301
301
|
dirPath: "components/UI",
|
|
302
302
|
fileContent:
|
|
303
|
-
'<template>\r\n <AvatarImage v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })" />\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { AvatarImage } from "radix-vue";\r\n import type { AvatarImageEmits, AvatarImageProps } from "radix-vue";\r\n\r\n const props = defineProps<\r\n AvatarImageProps & {\r\n alt?: string;\r\n class?: any;\r\n }\r\n >();\r\n const emits = defineEmits<AvatarImageEmits>();\r\n\r\n const styles = tv({\r\n base: "aspect-square h-full w-full object-cover",\r\n });\r\n</script>\r\n',
|
|
303
|
+
'<template>\r\n <AvatarImage v-bind="reactiveOmit(props, \'class\')" :class="styles({ class: props.class })" />\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { AvatarImage } from "radix-vue";\r\n import type { AvatarImageEmits, AvatarImageProps } from "radix-vue";\r\n\r\n const props = defineProps<\r\n AvatarImageProps & {\r\n /** The alt text for the image */\r\n alt?: string;\r\n /** Custom class(es) to add to the element */\r\n class?: any;\r\n }\r\n >();\r\n const emits = defineEmits<AvatarImageEmits>();\r\n\r\n const styles = tv({\r\n base: "aspect-square h-full w-full object-cover",\r\n });\r\n</script>\r\n',
|
|
304
304
|
},
|
|
305
305
|
],
|
|
306
306
|
utils: [],
|
|
@@ -398,7 +398,7 @@ export default [
|
|
|
398
398
|
fileName: "Card/Card.vue",
|
|
399
399
|
dirPath: "components/UI",
|
|
400
400
|
fileContent:
|
|
401
|
-
'<template>\r\n <Primitive :as="as" :as-child="asChild" :class="styles({ class: props.class })">\r\n <slot>\r\n <slot name="header">\r\n <
|
|
401
|
+
'<template>\r\n <Primitive :as="as" :as-child="asChild" :class="styles({ class: props.class })">\r\n <slot>\r\n <slot name="header">\r\n <UiCardHeader>\r\n <slot name="title">\r\n <UiCardTitle v-if="title || $slots.title" :title="title" />\r\n </slot>\r\n <slot name="description">\r\n <UiCardDescription\r\n v-if="description || $slots.description"\r\n :description="description"\r\n />\r\n </slot>\r\n </UiCardHeader>\r\n </slot>\r\n <slot name="content" v-if="content || $slots.content">\r\n <UiCardContent>\r\n <div v-html="content"></div>\r\n </UiCardContent>\r\n </slot>\r\n <slot name="footer"></slot>\r\n </slot>\r\n </Primitive>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { Primitive } from "radix-vue";\r\n import type { PrimitiveProps } from "radix-vue";\r\n\r\n const props = withDefaults(\r\n defineProps<\r\n PrimitiveProps & {\r\n /** Title that should be displayed. Passed to the `CardTitle` component */\r\n title?: string;\r\n /** Description that should be displayed. Passed to the `CardDescription` component */\r\n description?: string;\r\n /** Content that should be displayed. Passed to the `CardContent` component */\r\n content?: string;\r\n /** Custom class(es) to add to the element */\r\n class?: any;\r\n }\r\n >(),\r\n {\r\n as: "div",\r\n }\r\n );\r\n\r\n const styles = tv({\r\n base: "rounded-lg border bg-card text-card-foreground shadow-sm",\r\n });\r\n</script>\r\n',
|
|
402
402
|
},
|
|
403
403
|
{
|
|
404
404
|
fileName: "Card/Content.vue",
|
|
@@ -452,7 +452,7 @@ export default [
|
|
|
452
452
|
fileName: "Checkbox/Indicator.vue",
|
|
453
453
|
dirPath: "components/UI",
|
|
454
454
|
fileContent:
|
|
455
|
-
'<template>\r\n <CheckboxIndicator\r\n :class="styles({ class: props.class })"\r\n v-bind="reactiveOmit(props, \'class\', \'icon\')"\r\n >\r\n <slot>\r\n <Icon :name="checked == \'indeterminate\' ? \'lucide:minus\' : icon" class="h-4 w-4" />\r\n </slot>\r\n </CheckboxIndicator>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { CheckboxIndicator } from "radix-vue";\r\n import type { CheckboxIndicatorProps } from "radix-vue";\r\n\r\n const props = withDefaults(\r\n defineProps<\r\n CheckboxIndicatorProps & {\r\n checked?: boolean | "indeterminate";\r\n /** Custom class(es) to add to the element */\r\n class?: any;\r\n /**\r\n * Icon to display when the checkbox is checked\r\n * @default lucide:check\r\n */\r\n icon?: string;\r\n }\r\n >(),\r\n {\r\n icon: "lucide:check",\r\n }\r\n );\r\n\r\n const styles = tv({\r\n base: "flex items-center justify-center text-current",\r\n });\r\n</script>\r\n',
|
|
455
|
+
'<template>\r\n <CheckboxIndicator\r\n :class="styles({ class: props.class })"\r\n v-bind="reactiveOmit(props, \'class\', \'icon\')"\r\n >\r\n <slot>\r\n <Icon :name="checked == \'indeterminate\' ? \'lucide:minus\' : icon" class="h-4 w-4" />\r\n </slot>\r\n </CheckboxIndicator>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { CheckboxIndicator } from "radix-vue";\r\n import type { CheckboxIndicatorProps } from "radix-vue";\r\n\r\n const props = withDefaults(\r\n defineProps<\r\n CheckboxIndicatorProps & {\r\n /** The state of the checkbox */\r\n checked?: boolean | "indeterminate";\r\n /** Custom class(es) to add to the element */\r\n class?: any;\r\n /**\r\n * Icon to display when the checkbox is checked\r\n * @default lucide:check\r\n */\r\n icon?: string;\r\n }\r\n >(),\r\n {\r\n icon: "lucide:check",\r\n }\r\n );\r\n\r\n const styles = tv({\r\n base: "flex items-center justify-center text-current",\r\n });\r\n</script>\r\n',
|
|
456
456
|
},
|
|
457
457
|
],
|
|
458
458
|
utils: [],
|
|
@@ -519,19 +519,19 @@ export default [
|
|
|
519
519
|
fileName: "Command/Empty.vue",
|
|
520
520
|
dirPath: "components/UI",
|
|
521
521
|
fileContent:
|
|
522
|
-
'<template>\n <ComboboxEmpty :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot></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 class?: any;\n }\n >();\n\n const styles = tv({\n base: "py-6 text-center text-sm",\n });\n</script>\n',
|
|
522
|
+
'<template>\n <ComboboxEmpty :class="styles({ class: props.class })" v-bind="reactiveOmit(props, \'class\')">\n <slot></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',
|
|
523
523
|
},
|
|
524
524
|
{
|
|
525
525
|
fileName: "Command/Group.vue",
|
|
526
526
|
dirPath: "components/UI",
|
|
527
527
|
fileContent:
|
|
528
|
-
'<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> </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 heading?: any;\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "overflow-hidden p-1 text-foreground",\n });\n</script>\n',
|
|
528
|
+
'<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> </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',
|
|
529
529
|
},
|
|
530
530
|
{
|
|
531
531
|
fileName: "Command/Input.vue",
|
|
532
532
|
dirPath: "components/UI",
|
|
533
533
|
fileContent:
|
|
534
|
-
'<template>\n <div class="flex items-center border-b px-3" cmdk-input-wrapper="">\n <Icon :name="icon || \'lucide:search\'" class="mr-2 h-4 w-4 shrink-0 opacity-50" />\n <ComboboxInput\n v-bind="$attrs"\n :type="type ?? \'text\'"\n :disabled="disabled"\n auto-focus\n :class="styles({ class: props.class })"\n />\n <UiCommandCancel v-if="showCancel" />\n </div>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxInput } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = defineProps<{\n class?: any;\n icon?: string;\n type?: string;\n disabled?: boolean;\n showCancel?: boolean;\n }>();\n\n const styles = tv({\n base: "flex h-11 w-full rounded-md bg-transparent py-3 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\n });\n</script>\n',
|
|
534
|
+
'<template>\n <div class="flex items-center border-b px-3" cmdk-input-wrapper="">\n <Icon :name="icon || \'lucide:search\'" class="mr-2 h-4 w-4 shrink-0 opacity-50" />\n <ComboboxInput\n v-bind="$attrs"\n :type="type ?? \'text\'"\n :disabled="disabled"\n auto-focus\n :class="styles({ class: props.class })"\n />\n <UiCommandCancel v-if="showCancel" />\n </div>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxInput } from "radix-vue";\n\n defineOptions({ inheritAttrs: false });\n\n const props = defineProps<{\n /**Custom class(es) to add to the input element*/\n class?: any;\n /**The icon to render*/\n icon?: string;\n /**The input type*/\n type?: string;\n /**Whether the input is disabled*/\n disabled?: boolean;\n /**Whether to show the cancel button*/\n showCancel?: boolean;\n }>();\n\n const styles = tv({\n base: "flex h-11 w-full rounded-md bg-transparent py-3 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",\n });\n</script>\n',
|
|
535
535
|
},
|
|
536
536
|
{
|
|
537
537
|
fileName: "Command/Item.vue",
|
|
@@ -549,19 +549,19 @@ export default [
|
|
|
549
549
|
fileName: "Command/List.vue",
|
|
550
550
|
dirPath: "components/UI",
|
|
551
551
|
fileContent:
|
|
552
|
-
'<template>\n <ComboboxContent v-bind="forwarded" :class="styles({ class: props.class })">\n <slot></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 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',
|
|
552
|
+
'<template>\n <ComboboxContent v-bind="forwarded" :class="styles({ class: props.class })">\n <slot></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',
|
|
553
553
|
},
|
|
554
554
|
{
|
|
555
555
|
fileName: "Command/Separator.vue",
|
|
556
556
|
dirPath: "components/UI",
|
|
557
557
|
fileContent:
|
|
558
|
-
'<template>\n <ComboboxSeparator :as-child="asChild" :class="styles({ class: props.class })">\n <slot></slot>\n </ComboboxSeparator>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxSeparator, useForwardProps } from "radix-vue";\n import type { ComboboxSeparatorProps } from "radix-vue";\n\n const props = defineProps<\n ComboboxSeparatorProps & {\n class?: any;\n }\n >();\n const styles = tv({\n base: "-mx-1 h-px bg-border",\n });\n</script>\n',
|
|
558
|
+
'<template>\n <ComboboxSeparator :as-child="asChild" :class="styles({ class: props.class })">\n <slot></slot>\n </ComboboxSeparator>\n</template>\n\n<script lang="ts" setup>\n import { ComboboxSeparator, useForwardProps } 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',
|
|
559
559
|
},
|
|
560
560
|
{
|
|
561
561
|
fileName: "Command/Shortcut.vue",
|
|
562
562
|
dirPath: "components/UI",
|
|
563
563
|
fileContent:
|
|
564
|
-
'<template>\n <Primitive :as="as || \'span\'" :as-child="asChild" :class="styles({ class: props.class })">\n <slot>{{ shortcut }}</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 = defineProps<\n PrimitiveProps & {\n class?: any;\n shortcut?: any;\n }\n >();\n const styles = tv({\n base: "ml-auto text-xs tracking-widest text-muted-foreground",\n });\n</script>\n',
|
|
564
|
+
'<template>\n <Primitive :as="as || \'span\'" :as-child="asChild" :class="styles({ class: props.class })">\n <slot>{{ shortcut }}</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 = defineProps<\n PrimitiveProps & {\n /**Custom class(es) to add to the element */\n class?: any;\n /** The shortcut text to render */\n shortcut?: any;\n }\n >();\n const styles = tv({\n base: "ml-auto text-xs tracking-widest text-muted-foreground",\n });\n</script>\n',
|
|
565
565
|
},
|
|
566
566
|
],
|
|
567
567
|
utils: [],
|
|
@@ -585,13 +585,13 @@ export default [
|
|
|
585
585
|
fileName: "ContextMenu/CheckboxItem.vue",
|
|
586
586
|
dirPath: "components/UI",
|
|
587
587
|
fileContent:
|
|
588
|
-
'<template>\n <ContextMenuCheckboxItem\n v-bind="{ ...reactiveOmit(props, \'class\', \'shortcut\', \'title\'), ...useEmitAsProps(emits) }"\n :class="styles({ class: props.class })"\n >\n <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-primary">\n <UiContextMenuItemIndicator icon="lucide:check" />\n </span>\n <slot>\n <span v-if="title">{{ title }}</span>\n </slot>\n <slot name="shortcut">\n <UiContextMenuShortcut v-if="shortcut">{{ shortcut }}</UiContextMenuShortcut>\n </slot>\n </ContextMenuCheckboxItem>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuCheckboxItem, useEmitAsProps } from "radix-vue";\n import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from "radix-vue";\n\n const props = defineProps<\n ContextMenuCheckboxItemProps & {\n class?: any;\n shortcut?: string;\n title?: string;\n }\n >();\n\n const emits = defineEmits<ContextMenuCheckboxItemEmits>();\n\n const styles = tv({\n base: "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",\n });\n</script>\n',
|
|
588
|
+
'<template>\n <ContextMenuCheckboxItem\n v-bind="{ ...reactiveOmit(props, \'class\', \'shortcut\', \'title\'), ...useEmitAsProps(emits) }"\n :class="styles({ class: props.class })"\n >\n <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-primary">\n <UiContextMenuItemIndicator icon="lucide:check" />\n </span>\n <slot>\n <span v-if="title">{{ title }}</span>\n </slot>\n <slot name="shortcut">\n <UiContextMenuShortcut v-if="shortcut">{{ shortcut }}</UiContextMenuShortcut>\n </slot>\n </ContextMenuCheckboxItem>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuCheckboxItem, useEmitAsProps } from "radix-vue";\n import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from "radix-vue";\n\n const props = defineProps<\n ContextMenuCheckboxItemProps & {\n /**Custom class(es) to add to the element */\n class?: any;\n /**The shortcut for the item */\n shortcut?: string;\n /**The title for the item */\n title?: string;\n }\n >();\n\n const emits = defineEmits<ContextMenuCheckboxItemEmits>();\n\n const styles = tv({\n base: "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",\n });\n</script>\n',
|
|
589
589
|
},
|
|
590
590
|
{
|
|
591
591
|
fileName: "ContextMenu/Content.vue",
|
|
592
592
|
dirPath: "components/UI",
|
|
593
593
|
fileContent:
|
|
594
|
-
'<template>\n <UiContextMenuPortal>\n <ContextMenuContent\n v-bind="{ ...forwarded, ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot></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 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',
|
|
594
|
+
'<template>\n <UiContextMenuPortal>\n <ContextMenuContent\n v-bind="{ ...forwarded, ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot></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',
|
|
595
595
|
},
|
|
596
596
|
{
|
|
597
597
|
fileName: "ContextMenu/ContextMenu.vue",
|
|
@@ -609,19 +609,19 @@ export default [
|
|
|
609
609
|
fileName: "ContextMenu/Item.vue",
|
|
610
610
|
dirPath: "components/UI",
|
|
611
611
|
fileContent:
|
|
612
|
-
'<template>\n <ContextMenuItem\n v-bind="{\n ...reactiveOmit(props, \'class\', \'inset\', \'shortcut\', \'title\'),\n ...useEmitAsProps(emits),\n }"\n :class="styles({ inset, class: props.class })"\n >\n <slot>\n <span v-if="title">{{ title }}</span>\n </slot>\n <slot name="shortcut">\n <UiContextMenuShortcut v-if="shortcut">{{ shortcut }}</UiContextMenuShortcut>\n </slot>\n </ContextMenuItem>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuItem, useEmitAsProps } from "radix-vue";\n import type { ContextMenuItemEmits, ContextMenuItemProps } from "radix-vue";\n\n const props = defineProps<\n ContextMenuItemProps & {\n class?: any;\n inset?: boolean;\n shortcut?: string;\n title?: string;\n }\n >();\n\n const emits = defineEmits<ContextMenuItemEmits>();\n\n const styles = tv({\n base: "relative flex cursor-pointer select-none items-center gap-2.5 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",\n variants: {\n inset: {\n true: "pl-8",\n },\n },\n });\n</script>\n',
|
|
612
|
+
'<template>\n <ContextMenuItem\n v-bind="{\n ...reactiveOmit(props, \'class\', \'inset\', \'shortcut\', \'title\'),\n ...useEmitAsProps(emits),\n }"\n :class="styles({ inset, class: props.class })"\n >\n <slot>\n <span v-if="title">{{ title }}</span>\n </slot>\n <slot name="shortcut">\n <UiContextMenuShortcut v-if="shortcut">{{ shortcut }}</UiContextMenuShortcut>\n </slot>\n </ContextMenuItem>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuItem, useEmitAsProps } from "radix-vue";\n import type { ContextMenuItemEmits, ContextMenuItemProps } from "radix-vue";\n\n const props = defineProps<\n ContextMenuItemProps & {\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 shortcut for the item */\n shortcut?: string;\n /** The title for the item */\n title?: string;\n }\n >();\n\n const emits = defineEmits<ContextMenuItemEmits>();\n\n const styles = tv({\n base: "relative flex cursor-pointer select-none items-center gap-2.5 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",\n variants: {\n inset: {\n true: "pl-8",\n },\n },\n });\n</script>\n',
|
|
613
613
|
},
|
|
614
614
|
{
|
|
615
615
|
fileName: "ContextMenu/ItemIndicator.vue",
|
|
616
616
|
dirPath: "components/UI",
|
|
617
617
|
fileContent:
|
|
618
|
-
'<template>\n <ContextMenuItemIndicator v-bind="reactiveOmit(props, \'icon\')">\n <slot>\n <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n </slot>\n </ContextMenuItemIndicator>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuItemIndicator } from "radix-vue";\n import type { ContextMenuItemIndicatorProps } from "radix-vue";\n\n const props = defineProps<\n ContextMenuItemIndicatorProps & {\n icon?: string;\n }\n >();\n</script>\n',
|
|
618
|
+
'<template>\n <ContextMenuItemIndicator v-bind="reactiveOmit(props, \'icon\')">\n <slot>\n <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n </slot>\n </ContextMenuItemIndicator>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuItemIndicator } from "radix-vue";\n import type { ContextMenuItemIndicatorProps } from "radix-vue";\n\n const props = defineProps<\n ContextMenuItemIndicatorProps & {\n /** The icon to display */\n icon?: string;\n }\n >();\n</script>\n',
|
|
619
619
|
},
|
|
620
620
|
{
|
|
621
621
|
fileName: "ContextMenu/Label.vue",
|
|
622
622
|
dirPath: "components/UI",
|
|
623
623
|
fileContent:
|
|
624
|
-
'<template>\n <ContextMenuLabel\n :class="styles({ inset, class: props.class })"\n v-bind="reactiveOmit(props, \'class\', \'inset\', \'label\')"\n >\n <slot>{{ label }}</slot>\n </ContextMenuLabel>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuLabel } from "radix-vue";\n import type { ContextMenuLabelProps } from "radix-vue";\n\n const props = defineProps<\n ContextMenuLabelProps & {\n class?: any;\n inset?: boolean;\n label?: string;\n }\n >();\n\n const styles = tv({\n base: "inline-block w-full px-2 py-1.5 text-sm font-semibold text-foreground",\n variants: {\n inset: { true: "pl-8" },\n },\n });\n</script>\n',
|
|
624
|
+
'<template>\n <ContextMenuLabel\n :class="styles({ inset, class: props.class })"\n v-bind="reactiveOmit(props, \'class\', \'inset\', \'label\')"\n >\n <slot>{{ label }}</slot>\n </ContextMenuLabel>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuLabel } from "radix-vue";\n import type { ContextMenuLabelProps } from "radix-vue";\n\n const props = defineProps<\n ContextMenuLabelProps & {\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 label for the item */\n label?: string;\n }\n >();\n\n const styles = tv({\n base: "inline-block w-full px-2 py-1.5 text-sm font-semibold text-foreground",\n variants: {\n inset: { true: "pl-8" },\n },\n });\n</script>\n',
|
|
625
625
|
},
|
|
626
626
|
{
|
|
627
627
|
fileName: "ContextMenu/Portal.vue",
|
|
@@ -639,13 +639,13 @@ export default [
|
|
|
639
639
|
fileName: "ContextMenu/RadioItem.vue",
|
|
640
640
|
dirPath: "components/UI",
|
|
641
641
|
fileContent:
|
|
642
|
-
'<template>\n <ContextMenuRadioItem v-bind="forwarded" :class="styles({ class: props.class })">\n <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-primary">\n <UiContextMenuItemIndicator>\n <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n <Icon v-else name="ph:circle-fill" class="h-2 w-2" />\n </UiContextMenuItemIndicator>\n </span>\n <slot>{{ title }}</slot>\n </ContextMenuRadioItem>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuRadioItem, useForwardPropsEmits } from "radix-vue";\n import type { ContextMenuRadioItemEmits, ContextMenuRadioItemProps } from "radix-vue";\n\n const props = defineProps<\n ContextMenuRadioItemProps & {\n class?: any;\n icon?: string;\n title?: string;\n }\n >();\n\n const emits = defineEmits<ContextMenuRadioItemEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "icon", "title"), emits);\n\n const styles = tv({\n base: "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",\n });\n</script>\n',
|
|
642
|
+
'<template>\n <ContextMenuRadioItem v-bind="forwarded" :class="styles({ class: props.class })">\n <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-primary">\n <UiContextMenuItemIndicator>\n <Icon v-if="icon" :name="icon" class="h-4 w-4" />\n <Icon v-else name="ph:circle-fill" class="h-2 w-2" />\n </UiContextMenuItemIndicator>\n </span>\n <slot>{{ title }}</slot>\n </ContextMenuRadioItem>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuRadioItem, useForwardPropsEmits } from "radix-vue";\n import type { ContextMenuRadioItemEmits, ContextMenuRadioItemProps } from "radix-vue";\n\n const props = defineProps<\n ContextMenuRadioItemProps & {\n /**Custom class(es) to add to the element */\n class?: any;\n /**The icon to display */\n icon?: string;\n /**The title for the item */\n title?: string;\n }\n >();\n\n const emits = defineEmits<ContextMenuRadioItemEmits>();\n const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "icon", "title"), emits);\n\n const styles = tv({\n base: "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",\n });\n</script>\n',
|
|
643
643
|
},
|
|
644
644
|
{
|
|
645
645
|
fileName: "ContextMenu/Separator.vue",
|
|
646
646
|
dirPath: "components/UI",
|
|
647
647
|
fileContent:
|
|
648
|
-
'<template>\n <ContextMenuSeparator :class="styles({ class: props.class })" v-bind="props" />\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuSeparator } from "radix-vue";\n import type { ContextMenuSeparatorProps } from "radix-vue";\n\n const props = defineProps<\n ContextMenuSeparatorProps & {\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "-mx-1 my-1 h-px bg-border",\n });\n</script>\n',
|
|
648
|
+
'<template>\n <ContextMenuSeparator :class="styles({ class: props.class })" v-bind="props" />\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuSeparator } from "radix-vue";\n import type { ContextMenuSeparatorProps } from "radix-vue";\n\n const props = defineProps<\n ContextMenuSeparatorProps & {\n /**Custom class(es) to add to the element */\n class?: any;\n }\n >();\n\n const styles = tv({\n base: "-mx-1 my-1 h-px bg-border",\n });\n</script>\n',
|
|
649
649
|
},
|
|
650
650
|
{
|
|
651
651
|
fileName: "ContextMenu/Shortcut.vue",
|
|
@@ -663,13 +663,13 @@ export default [
|
|
|
663
663
|
fileName: "ContextMenu/SubContent.vue",
|
|
664
664
|
dirPath: "components/UI",
|
|
665
665
|
fileContent:
|
|
666
|
-
'<template>\n <UiContextMenuPortal>\n <ContextMenuSubContent\n v-bind="{ ...forwarded, ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot></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 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',
|
|
666
|
+
'<template>\n <UiContextMenuPortal>\n <ContextMenuSubContent\n v-bind="{ ...forwarded, ...$attrs }"\n :class="styles({ class: props.class })"\n >\n <slot></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',
|
|
667
667
|
},
|
|
668
668
|
{
|
|
669
669
|
fileName: "ContextMenu/SubTrigger.vue",
|
|
670
670
|
dirPath: "components/UI",
|
|
671
671
|
fileContent:
|
|
672
|
-
'<template>\n <ContextMenuSubTrigger\n v-bind="reactiveOmit(props, \'class\', \'inset\', \'icon\', \'title\')"\n :class="styles({ inset, class: props.class })"\n >\n <slot>\n <span v-if="title">{{ title }}</span>\n </slot>\n <Icon class="ml-auto h-4 w-4" :name="icon || \'lucide:chevron-right\'" />\n </ContextMenuSubTrigger>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuSubTrigger } from "radix-vue";\n import type { ContextMenuSubTriggerProps } from "radix-vue";\n\n const props = defineProps<\n ContextMenuSubTriggerProps & {\n class?: any;\n inset?: boolean;\n icon?: string;\n title?: string;\n }\n >();\n\n const styles = tv({\n base: "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none 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 variants: {\n inset: {\n true: "pl-8",\n },\n },\n });\n</script>\n',
|
|
672
|
+
'<template>\n <ContextMenuSubTrigger\n v-bind="reactiveOmit(props, \'class\', \'inset\', \'icon\', \'title\')"\n :class="styles({ inset, class: props.class })"\n >\n <slot>\n <span v-if="title">{{ title }}</span>\n </slot>\n <Icon class="ml-auto h-4 w-4" :name="icon || \'lucide:chevron-right\'" />\n </ContextMenuSubTrigger>\n</template>\n\n<script lang="ts" setup>\n import { ContextMenuSubTrigger } from "radix-vue";\n import type { ContextMenuSubTriggerProps } from "radix-vue";\n\n const props = defineProps<\n ContextMenuSubTriggerProps & {\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 }\n >();\n\n const styles = tv({\n base: "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none 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 variants: {\n inset: {\n true: "pl-8",\n },\n },\n });\n</script>\n',
|
|
673
673
|
},
|
|
674
674
|
{
|
|
675
675
|
fileName: "ContextMenu/Trigger.vue",
|
|
@@ -908,7 +908,7 @@ export default [
|
|
|
908
908
|
fileName: "DropdownMenu/SubTrigger.vue",
|
|
909
909
|
dirPath: "components/UI",
|
|
910
910
|
fileContent:
|
|
911
|
-
'<template>\r\n <DropdownMenuSubTrigger\r\n v-bind="reactiveOmit(props, \'class\', \'inset\', \'icon\', \'title\', \'trailingIcon\')"\r\n :class="styles({ inset, class: props.class })"\r\n >\r\n <slot>\r\n <Icon v-if="icon" :name="icon" class="h-4 w-4" />\r\n <span v-if="title">{{ title }}</span>\r\n </slot>\r\n <Icon\r\n class="ml-auto h-4 w-4 text-muted-foreground"\r\n :name="trailingIcon || \'lucide:chevron-right\'"\r\n />\r\n </DropdownMenuSubTrigger>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { DropdownMenuSubTrigger, useForwardProps } from "radix-vue";\r\n import type { DropdownMenuSubTriggerProps } from "radix-vue";\r\n\r\n const props = defineProps<\r\n DropdownMenuSubTriggerProps & {\r\n class?: any;\r\n inset?: boolean;\r\n
|
|
911
|
+
'<template>\r\n <DropdownMenuSubTrigger\r\n v-bind="reactiveOmit(props, \'class\', \'inset\', \'icon\', \'title\', \'trailingIcon\')"\r\n :class="styles({ inset, class: props.class })"\r\n >\r\n <slot>\r\n <Icon v-if="icon" :name="icon" class="h-4 w-4" />\r\n <span v-if="title">{{ title }}</span>\r\n </slot>\r\n <Icon\r\n class="ml-auto h-4 w-4 text-muted-foreground"\r\n :name="trailingIcon || \'lucide:chevron-right\'"\r\n />\r\n </DropdownMenuSubTrigger>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n import { DropdownMenuSubTrigger, useForwardProps } from "radix-vue";\r\n import type { DropdownMenuSubTriggerProps } from "radix-vue";\r\n\r\n const props = defineProps<\r\n DropdownMenuSubTriggerProps & {\r\n /**Custom class(es) to add to the element */\r\n class?: any;\r\n /** Wether an indentation should be added to the item or not */\r\n inset?: boolean;\r\n /** The icon to display */\r\n icon?: string;\r\n /** The title for the item */\r\n title?: string;\r\n /** The trailing icon to display */\r\n trailingIcon?: string;\r\n }\r\n >();\r\n\r\n const styles = tv({\r\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",\r\n variants: {\r\n inset: {\r\n true: "pl-8",\r\n },\r\n },\r\n });\r\n</script>\r\n',
|
|
912
912
|
},
|
|
913
913
|
{
|
|
914
914
|
fileName: "DropdownMenu/Trigger.vue",
|
|
@@ -970,7 +970,7 @@ export default [
|
|
|
970
970
|
fileName: "Form/Item.vue",
|
|
971
971
|
dirPath: "components/UI",
|
|
972
972
|
fileContent:
|
|
973
|
-
'<template>\r\n <div :class="styles({ class: props.class })" v-bind="$attrs">\r\n <slot name="label">\r\n <
|
|
973
|
+
'<template>\r\n <div :class="styles({ class: props.class })" v-bind="$attrs">\r\n <slot name="label">\r\n <UiFormLabel v-if="label || hint" :label="label" :hint="hint" />\r\n </slot>\r\n <UiFormControl>\r\n <slot />\r\n </UiFormControl>\r\n <slot name="description">\r\n <UiFormDescription v-if="description" :description="description" />\r\n </slot>\r\n <slot name="errorMessage">\r\n <TransitionSlide tag="p">\r\n <UiFormMessage v-if="!hideMessage" />\r\n </TransitionSlide>\r\n </slot>\r\n </div>\r\n</template>\r\n\r\n<script lang="ts">\r\n import { type InjectionKey } from "vue";\r\n\r\n export const FORM_ITEM_INJECTION_KEY = Symbol() as InjectionKey<string>;\r\n</script>\r\n\r\n<script lang="ts" setup>\r\n import { useId } from "radix-vue";\r\n\r\n defineOptions({ inheritAttrs: false });\r\n\r\n const id = useId();\r\n provide(FORM_ITEM_INJECTION_KEY, id);\r\n\r\n const props = defineProps<{\r\n class?: any;\r\n label?: string;\r\n description?: string;\r\n hint?: string;\r\n hideMessage?: boolean;\r\n }>();\r\n\r\n const styles = tv({ base: "space-y-1.5" });\r\n</script>\r\n',
|
|
974
974
|
},
|
|
975
975
|
{
|
|
976
976
|
fileName: "Form/Label.vue",
|
|
@@ -1101,7 +1101,7 @@ export default [
|
|
|
1101
1101
|
fileName: "List/Item.vue",
|
|
1102
1102
|
dirPath: "components/UI",
|
|
1103
1103
|
fileContent:
|
|
1104
|
-
'<template>\r\n <component\r\n :is="eltype"\r\n :href="href"\r\n :to="to"\r\n @click="onClick"\r\n :class="\r\n styles({\r\n hover: Boolean(onClick) || Boolean(to) || Boolean(href),\r\n class: props.class,\r\n })\r\n "\r\n >\r\n <slot></slot>\r\n </component>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n const props = defineProps<{\r\n class?: any;\r\n onClick?: () => void;\r\n to?: string;\r\n href?: string;\r\n }>();\r\n\r\n const styles = tv({\r\n base: "flex w-full items-center gap-5 px-4 py-2",\r\n variants: {\r\n hover: {\r\n true: "cursor-pointer outline-none hover:bg-muted focus-visible:ring-4 focus-visible:ring-primary/10",\r\n },\r\n },\r\n });\r\n\r\n const eltype = computed(() => {\r\n if (props.to || props.href) return resolveComponent("NuxtLink");\r\n if (props.onClick) return "button";\r\n return "li";\r\n });\r\n</script>\r\n',
|
|
1104
|
+
'<template>\r\n <component\r\n :is="eltype"\r\n :href="href"\r\n :to="to"\r\n @click="onClick"\r\n :class="\r\n styles({\r\n hover: Boolean(onClick) || Boolean(to) || Boolean(href),\r\n class: props.class,\r\n })\r\n "\r\n >\r\n <slot></slot>\r\n </component>\r\n</template>\r\n\r\n<script lang="ts" setup>\r\n const props = defineProps<{\r\n /**Custom class(es) to add to the element */\r\n class?: any;\r\n /** Function called when the item is clicked */\r\n onClick?: () => void;\r\n /** The location that the item should navigate to when clicked */\r\n to?: string;\r\n /** The href for the `a` tag */\r\n href?: string;\r\n }>();\r\n\r\n const styles = tv({\r\n base: "flex w-full items-center gap-5 px-4 py-2",\r\n variants: {\r\n hover: {\r\n true: "cursor-pointer outline-none hover:bg-muted focus-visible:ring-4 focus-visible:ring-primary/10",\r\n },\r\n },\r\n });\r\n\r\n const eltype = computed(() => {\r\n if (props.to || props.href) return resolveComponent("NuxtLink");\r\n if (props.onClick) return "button";\r\n return "li";\r\n });\r\n</script>\r\n',
|
|
1105
1105
|
},
|
|
1106
1106
|
{
|
|
1107
1107
|
fileName: "List/List.vue",
|
|
@@ -1347,7 +1347,7 @@ export default [
|
|
|
1347
1347
|
fileName: "Pagination/First.vue",
|
|
1348
1348
|
dirPath: "components/UI",
|
|
1349
1349
|
fileContent:
|
|
1350
|
-
'<template>\n <PaginationFirst v-bind="reactiveOmit(props, \'icon\')">\n <slot>\n <
|
|
1350
|
+
'<template>\n <PaginationFirst v-bind="reactiveOmit(props, \'icon\')">\n <slot>\n <UiButton v-if="icon" variant="ghost" size="icon-sm">\n <Icon :name="icon" />\n </UiButton>\n </slot>\n </PaginationFirst>\n</template>\n\n<script lang="ts" setup>\n import { PaginationFirst } from "radix-vue";\n import type { PaginationFirstProps } from "radix-vue";\n\n const props = defineProps<\n PaginationFirstProps & {\n /** Icon to show */\n icon?: string;\n }\n >();\n</script>\n',
|
|
1351
1351
|
},
|
|
1352
1352
|
{
|
|
1353
1353
|
fileName: "Pagination/Item.vue",
|
|
@@ -1383,7 +1383,7 @@ export default [
|
|
|
1383
1383
|
fileName: "Pagination/Prev.vue",
|
|
1384
1384
|
dirPath: "components/UI",
|
|
1385
1385
|
fileContent:
|
|
1386
|
-
'<template>\n <PaginationPrev v-bind="reactiveOmit(props, \'icon\')">\n <slot>\n <
|
|
1386
|
+
'<template>\n <PaginationPrev v-bind="reactiveOmit(props, \'icon\')">\n <slot>\n <UiButton v-if="icon" variant="ghost" size="icon-sm">\n <Icon :name="icon" />\n </UiButton>\n </slot>\n </PaginationPrev>\n</template>\n\n<script lang="ts" setup>\n import { PaginationPrev } from "radix-vue";\n import type { PaginationPrevProps } from "radix-vue";\n\n const props = defineProps<\n PaginationPrevProps & {\n /** Icon to show */\n icon?: string;\n }\n >();\n</script>\n',
|
|
1387
1387
|
},
|
|
1388
1388
|
],
|
|
1389
1389
|
utils: [],
|
|
@@ -2059,7 +2059,7 @@ export default [
|
|
|
2059
2059
|
'import type { ToastProps } from "@/components/UI/Toast/Toast.vue";\n\nconst TOAST_LIMIT = 3;\nconst TOAST_REMOVE_DELAY = 7000;\n\nexport type StringOrVNode = string | VNode | (() => VNode);\n\ntype ToasterToast = ToastProps & {\n id: string;\n title?: string;\n description?: StringOrVNode;\n action?: Component;\n icon?: string;\n};\n\nconst actionTypes = {\n ADD_TOAST: "ADD_TOAST",\n UPDATE_TOAST: "UPDATE_TOAST",\n DISMISS_TOAST: "DISMISS_TOAST",\n REMOVE_TOAST: "REMOVE_TOAST",\n} as const;\n\nlet count = 0;\n\nfunction genId() {\n count = (count + 1) % Number.MAX_VALUE;\n return count.toString();\n}\n\ntype ActionType = typeof actionTypes;\n\ntype Action =\n | {\n type: ActionType["ADD_TOAST"];\n toast: ToasterToast;\n }\n | {\n type: ActionType["UPDATE_TOAST"];\n toast: Partial<ToasterToast>;\n }\n | {\n type: ActionType["DISMISS_TOAST"];\n toastId?: ToasterToast["id"];\n }\n | {\n type: ActionType["REMOVE_TOAST"];\n toastId?: ToasterToast["id"];\n };\n\ninterface State {\n toasts: ToasterToast[];\n}\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n\nfunction addToRemoveQueue(toastId: string) {\n if (toastTimeouts.has(toastId)) return;\n\n const timeout = setTimeout(() => {\n toastTimeouts.delete(toastId);\n dispatch({\n type: actionTypes.REMOVE_TOAST,\n toastId,\n });\n }, TOAST_REMOVE_DELAY);\n\n toastTimeouts.set(toastId, timeout);\n}\n\nconst state = ref<State>({\n toasts: [],\n});\n\nfunction dispatch(action: Action) {\n switch (action.type) {\n case actionTypes.ADD_TOAST:\n state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT);\n break;\n\n case actionTypes.UPDATE_TOAST:\n state.value.toasts = state.value.toasts.map((t) =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t\n );\n break;\n\n case actionTypes.DISMISS_TOAST: {\n const { toastId } = action;\n\n if (toastId) {\n addToRemoveQueue(toastId);\n } else {\n state.value.toasts.forEach((toast) => {\n addToRemoveQueue(toast.id);\n });\n }\n\n state.value.toasts = state.value.toasts.map((t) =>\n t.id === toastId || toastId === undefined\n ? {\n ...t,\n open: false,\n }\n : t\n );\n break;\n }\n\n case actionTypes.REMOVE_TOAST:\n if (action.toastId === undefined) state.value.toasts = [];\n else state.value.toasts = state.value.toasts.filter((t) => t.id !== action.toastId);\n\n break;\n }\n}\n\nfunction useToast() {\n return {\n toasts: computed(() => state.value.toasts),\n toast,\n dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),\n };\n}\n\ntype Toast = Omit<ToasterToast, "id">;\n\nfunction toast(props: Toast) {\n const id = genId();\n\n const update = (props: ToasterToast) =>\n dispatch({\n type: actionTypes.UPDATE_TOAST,\n toast: { ...props, id },\n });\n\n const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id });\n\n dispatch({\n type: actionTypes.ADD_TOAST,\n toast: {\n ...props,\n id,\n open: true,\n onOpenChange: (open: boolean) => {\n if (!open) dismiss();\n },\n },\n });\n\n return {\n id,\n dismiss,\n update,\n };\n}\n\nexport { toast, useToast };\n',
|
|
2060
2060
|
},
|
|
2061
2061
|
],
|
|
2062
|
-
instructions: ["Remeber to add <
|
|
2062
|
+
instructions: ["Remeber to add <UiToastToaster /> to your app.vue/layout file."],
|
|
2063
2063
|
files: [
|
|
2064
2064
|
{
|
|
2065
2065
|
fileName: "Toast/Action.vue",
|
|
@@ -2192,7 +2192,7 @@ export default [
|
|
|
2192
2192
|
fileName: "Vee/Checkbox.vue",
|
|
2193
2193
|
dirPath: "components/UI",
|
|
2194
2194
|
fileContent:
|
|
2195
|
-
'<template>\n <div :class="styles({ class: props.class })">\n <
|
|
2195
|
+
'<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" :errorMessage="errorMessage" :checked="checked">\n <UiLabel\n :for="inputId"\n v-if="label"\n class="leading-none"\n :class="[errorMessage && \'text-destructive\']"\n >{{ label }}</UiLabel\n >\n </slot>\n <TransitionSlide tag="div" group>\n <slot name="hint" :errorMessage="errorMessage" :checked="checked">\n <p\n key="hint"\n class="text-sm leading-none text-muted-foreground"\n v-if="hint && !errorMessage"\n >\n {{ hint }}\n </p>\n </slot>\n <slot name="errorMessage" :errorMessage="errorMessage" :checked="checked">\n <p key="errorMessage" class="text-sm leading-none text-destructive" v-if="errorMessage">\n {{ errorMessage }}\n </p>\n </slot>\n </TransitionSlide>\n </div>\n </div>\n</template>\n\n<script lang="ts" setup>\n import { useId } from "radix-vue";\n\n const props = defineProps<{\n label?: string;\n icon?: string;\n hint?: string;\n 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 defineOptions({ inheritAttrs: false });\n\n const inputId = useId(props.id);\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',
|
|
2196
2196
|
},
|
|
2197
2197
|
],
|
|
2198
2198
|
utils: [],
|
|
@@ -2212,7 +2212,7 @@ export default [
|
|
|
2212
2212
|
fileName: "Vee/Datepicker.vue",
|
|
2213
2213
|
dirPath: "components/UI",
|
|
2214
2214
|
fileContent:
|
|
2215
|
-
'<template>\r\n <div class="w-full">\r\n <
|
|
2215
|
+
'<template>\r\n <div class="w-full">\r\n <UiLabel\r\n :for="inputId"\r\n v-if="label"\r\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\r\n >{{ label }}</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 :name="icon" v-if="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 :readonly="readonly"\r\n :model-value="inputValue"\r\n v-on="inputEvents"\r\n :id="inputId"\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 />\r\n </template>\r\n </UiDatepicker>\r\n </div>\r\n <TransitionSlide group tag="div">\r\n <p key="hint" class="mt-1.5 text-sm text-muted-foreground" v-if="hint && !errorMessage">\r\n {{ hint }}\r\n </p>\r\n\r\n <p key="errorMessage" class="mt-1.5 text-sm text-destructive" v-if="errorMessage">\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 { useId } from "radix-vue";\r\n\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 }>(),\r\n {\r\n icon: "lucide:calendar-days",\r\n }\r\n );\r\n\r\n defineOptions({ inheritAttrs: false });\r\n\r\n const inputId = useId(props.id);\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',
|
|
2216
2216
|
},
|
|
2217
2217
|
],
|
|
2218
2218
|
utils: [],
|
|
@@ -2232,7 +2232,7 @@ export default [
|
|
|
2232
2232
|
fileName: "Vee/FileInput.vue",
|
|
2233
2233
|
dirPath: "components/UI",
|
|
2234
2234
|
fileContent:
|
|
2235
|
-
'<template>\r\n <div class="w-full">\r\n <
|
|
2235
|
+
'<template>\r\n <div class="w-full">\r\n <UiLabel :for="inputId" v-if="label" :class="[errorMessage && \'text-destructive\', \'mb-2\']">{{\r\n label\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 :name="icon" v-if="icon" class="h-4 w-4 text-muted-foreground/70" />\r\n </span>\r\n </slot>\r\n <UiInput\r\n type="file"\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 :id="inputId"\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 />\r\n </div>\r\n <TransitionSlide group tag="div">\r\n <p key="hint" class="mt-1.5 text-sm text-muted-foreground" v-if="hint && !errorMessage">\r\n {{ hint }}\r\n </p>\r\n\r\n <p key="errorMessage" class="mt-1.5 text-sm text-destructive" v-if="errorMessage">\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 { useId } from "radix-vue";\r\n\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 }>();\r\n\r\n defineOptions({ inheritAttrs: false });\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 = useId(props.id);\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',
|
|
2236
2236
|
},
|
|
2237
2237
|
],
|
|
2238
2238
|
utils: [],
|
|
@@ -2252,7 +2252,7 @@ export default [
|
|
|
2252
2252
|
fileName: "Vee/Input.vue",
|
|
2253
2253
|
dirPath: "components/UI",
|
|
2254
2254
|
fileContent:
|
|
2255
|
-
'<template>\r\n <div class="w-full">\r\n <
|
|
2255
|
+
'<template>\r\n <div class="w-full">\r\n <UiLabel\r\n :for="inputId"\r\n v-if="label"\r\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\r\n >{{ label }}</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 :name="icon" v-if="icon" class="h-4 w-4 text-muted-foreground/70" />\r\n </span>\r\n </slot>\r\n <UiInput\r\n :type="type"\r\n v-model="value"\r\n @blur="handleBlur"\r\n :id="inputId"\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 />\r\n </div>\r\n <TransitionSlide group tag="div">\r\n <p key="hint" class="mt-1.5 text-sm text-muted-foreground" v-if="hint && !errorMessage">\r\n {{ hint }}\r\n </p>\r\n\r\n <p key="errorMessage" class="mt-1.5 text-sm text-destructive" v-if="errorMessage">\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 { useId } from "radix-vue";\r\n\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 }>();\r\n\r\n defineOptions({ inheritAttrs: false });\r\n\r\n const inputId = useId(props.id);\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',
|
|
2256
2256
|
},
|
|
2257
2257
|
],
|
|
2258
2258
|
utils: [],
|
|
@@ -2278,7 +2278,7 @@ export default [
|
|
|
2278
2278
|
fileName: "Vee/MultiSelect.vue",
|
|
2279
2279
|
dirPath: "components/UI",
|
|
2280
2280
|
fileContent:
|
|
2281
|
-
'<template>\n <div class="w-full">\n <
|
|
2281
|
+
'<template>\n <div class="w-full">\n <UiLabel\n :for="inputId"\n v-if="formLabel"\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\n >{{ formLabel }}</UiLabel\n >\n <Multiselect\n ref="multiselect"\n :attrs="{\n id: inputId,\n }"\n :disabled="disabled"\n v-bind="$attrs"\n :id="inputId"\n v-model="value"\n :name="name"\n :required="required"\n :classes="{\n containerActive: \'ring-2 ring-ring ring-offset-2 ring-offset-background transition\',\n }"\n >\n <template v-for="(_, name) in $slots" v-slot:[name]="scope">\n <slot :name="name" v-bind="scope"></slot>\n </template>\n <template #clear="{ clear }">\n <button @click="clear" class="mr-2 flex items-center justify-center">\n <Icon name="heroicons:x-mark" size="16" class="text-muted-foreground" />\n </button>\n </template>\n </Multiselect>\n <TransitionSlide group tag="div">\n <p key="hint" class="mt-1.5 text-sm text-muted-foreground" v-if="hint && !errorMessage">\n {{ hint }}\n </p>\n\n <p key="errorMessage" class="mt-1.5 text-sm text-destructive" v-if="errorMessage">\n {{ errorMessage }}\n </p>\n </TransitionSlide>\n </div>\n</template>\n\n<script setup lang="ts">\n import Multiselect from "@vueform/multiselect";\n import { useId } from "radix-vue";\n\n const multiselect = shallowRef<InstanceType<typeof Multiselect> | null>(null);\n\n interface Props\n extends /* @vue-ignore */ Partial<Omit<InstanceType<typeof Multiselect>, "$emit">> {}\n\n const props = defineProps<\n {\n modelValue?: any;\n formLabel?: string;\n required?: boolean;\n id?: string;\n hint?: string;\n disabled?: boolean;\n rules?: any;\n validateOnMount?: boolean;\n name?: string;\n } & Props\n >();\n\n const emit = defineEmits([\n "paste",\n "open",\n "close",\n "select",\n "deselect",\n "input",\n "search-change",\n "tag",\n "option",\n "update:modelValue",\n "change",\n "clear",\n "keydown",\n "keyup",\n "max",\n "create",\n "ready",\n ]);\n\n defineOptions({ inheritAttrs: false });\n\n const inputId = useId(props.id);\n\n const { errorMessage, value } = useField(() => props.name || inputId, props.rules, {\n initialValue: props.modelValue,\n label: props.label,\n validateOnMount: props.validateOnMount,\n syncVModel: true,\n });\n\n onMounted(() => {\n nextTick(() => {\n emit("ready", multiselect.value);\n });\n });\n</script>\n\n<style src="@vueform/multiselect/themes/default.css"></style>\n<style>\n :root {\n --ms-font-size: theme("fontSize.sm");\n --ms-line-height: 1.5;\n --ms-bg: theme("colors.background");\n --ms-bg-disabled: transparent;\n --ms-border-color: theme("colors.input");\n --ms-border-width: 1px;\n --ms-border-color-active: theme("colors.input");\n --ms-border-width-active: 1px;\n --ms-radius: theme("borderRadius.md");\n --ms-py: theme("padding.2");\n --ms-px: theme("padding.3");\n --ms-ring-width: 0px;\n --ms-ring-color: theme("colors.ring");\n --ms-placeholder-color: theme("colors.muted.foreground");\n --ms-max-height: theme("height.52");\n\n --ms-spinner-color: theme("colors.muted.foreground");\n --ms-caret-color: theme("colors.muted.foreground");\n --ms-clear-color: theme("colors.muted.foreground");\n --ms-clear-color-hover: theme("colors.primary.DEFAULT");\n\n --ms-tag-font-size: theme("fontSize.sm");\n --ms-tag-line-height: 1.25rem;\n --ms-tag-font-weight: 500;\n --ms-tag-bg: theme("colors.primary.DEFAULT");\n --ms-tag-bg-disabled: transparent;\n --ms-tag-color: theme("colors.primary.foreground");\n --ms-tag-color-disabled: theme("colors.muted.foreground");\n --ms-tag-radius: theme("borderRadius.DEFAULT");\n --ms-tag-py: theme("padding[0.5]");\n\n --ms-dropdown-bg: theme("colors.background");\n --ms-dropdown-border-color: theme("colors.border");\n --ms-dropdown-border-width: 1px;\n --ms-dropdown-radius: theme("borderRadius.md");\n\n --ms-group-label-bg: theme("colors.muted.DEFAULT");\n --ms-group-label-color: theme("colors.muted.foreground");\n --ms-group-label-bg-pointed: theme("colors.primary.DEFAULT");\n --ms-group-label-color-pointed: theme("colors.primary.foreground");\n --ms-group-label-bg-disabled: theme("colors.muted.DEFAULT / 50%");\n --ms-group-label-color-disabled: theme("colors.muted.foreground / 50%");\n --ms-group-label-bg-selected: theme("colors.primary.DEFAULT");\n --ms-group-label-color-selected: theme("colors.primary.foreground");\n --ms-group-label-bg-selected-pointed: theme("colors.primary.DEFAULT");\n --ms-group-label-color-selected-pointed: theme("colors.primary.foreground");\n --ms-group-label-bg-selected-disabled: theme("colors.muted.DEFAULT / 50%");\n --ms-group-label-color-selected-disabled: theme("colors.muted.foreground / 50%");\n\n --ms-option-font-size: theme("fontSize.sm");\n --ms-option-bg-pointed: theme("colors.primary.DEFAULT");\n --ms-option-color-pointed: theme("colors.primary.foreground");\n --ms-option-bg-selected: theme("colors.primary.DEFAULT");\n --ms-option-color-selected: theme("colors.primary.foreground");\n --ms-option-bg-disabled: transparent;\n --ms-option-color-disabled: theme("colors.muted.foreground / 50%");\n --ms-option-bg-selected-pointed: theme("colors.primary.DEFAULT");\n --ms-option-color-selected-pointed: theme("colors.primary.foreground");\n --ms-option-bg-selected-disabled: theme("colors.muted.DEFAULT");\n --ms-option-color-selected-disabled: theme("colors.muted.foreground");\n\n --ms-empty-color: theme("colors.muted.foreground");\n }\n</style>\n',
|
|
2282
2282
|
},
|
|
2283
2283
|
],
|
|
2284
2284
|
utils: [],
|
|
@@ -2318,7 +2318,7 @@ export default [
|
|
|
2318
2318
|
fileName: "Vee/RadioGroup.vue",
|
|
2319
2319
|
dirPath: "components/UI",
|
|
2320
2320
|
fileContent:
|
|
2321
|
-
'<template>\n <div :class="styles({ class: props.class })">\n <slot name="label" :errorMessage="errorMessage" :value="value">\n <
|
|
2321
|
+
'<template>\n <div :class="styles({ class: props.class })">\n <slot name="label" :errorMessage="errorMessage" :value="value">\n <UiLabel\n v-if="label"\n class="mb-5 leading-none"\n :class="[errorMessage && \'text-destructive\']"\n >{{ label }}</UiLabel\n >\n </slot>\n <UiRadioGroup v-bind="{ ...forwarded, ...$attrs }" v-model="value">\n <slot></slot>\n </UiRadioGroup>\n <div class="flex flex-col gap-1.5">\n <TransitionSlide tag="div" group>\n <slot name="hint" :errorMessage="errorMessage" :value="value">\n <p\n key="hint"\n class="mt-1.5 text-sm leading-none text-muted-foreground"\n v-if="hint && !errorMessage"\n >\n {{ hint }}\n </p>\n </slot>\n <slot name="errorMessage" :errorMessage="errorMessage" :value="value">\n <p\n key="errorMessage"\n class="mt-1.5 text-sm leading-none text-destructive"\n v-if="errorMessage"\n >\n {{ errorMessage }}\n </p>\n </slot>\n </TransitionSlide>\n </div>\n </div>\n</template>\n\n<script lang="ts" setup>\n import { useForwardProps } from "radix-vue";\n import type { RadioGroupRootProps } from "radix-vue";\n\n const props = defineProps<\n RadioGroupRootProps & {\n label?: string;\n hint?: string;\n id?: string;\n rules?: any;\n validateOnMount?: boolean;\n class?: any;\n name: string;\n }\n >();\n\n const forwarded = useForwardProps(props);\n const styles = tv({\n base: "flex flex-col",\n });\n\n defineOptions({ inheritAttrs: false });\n\n const { errorMessage, value } = useField(() => props.name, props.rules, {\n initialValue: props.modelValue,\n label: props.label,\n validateOnMount: props.validateOnMount,\n type: "radio",\n syncVModel: true,\n });\n</script>\n',
|
|
2322
2322
|
},
|
|
2323
2323
|
],
|
|
2324
2324
|
utils: [],
|
|
@@ -2338,7 +2338,7 @@ export default [
|
|
|
2338
2338
|
fileName: "Vee/Select.vue",
|
|
2339
2339
|
dirPath: "components/UI",
|
|
2340
2340
|
fileContent:
|
|
2341
|
-
'<template>\r\n <div class="w-full">\r\n <
|
|
2341
|
+
'<template>\r\n <div class="w-full">\r\n <UiLabel :for="inputId" v-if="label" :class="[errorMessage && \'text-destructive\', \'mb-2\']">{{\r\n label\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 :name="icon" v-if="icon" class="h-4 w-4 text-muted-foreground" />\r\n </span>\r\n </slot>\r\n <UiNativeSelect\r\n :trailingIcon="trailingIcon"\r\n v-model="value"\r\n @blur="handleBlur"\r\n :id="inputId"\r\n :name="name"\r\n v-bind="$attrs"\r\n :class="[hasIcon && \'pl-9\']"\r\n >\r\n <slot></slot>\r\n </UiNativeSelect>\r\n </div>\r\n <TransitionSlide group tag="div">\r\n <p key="hint" class="mt-1.5 text-sm text-muted-foreground" v-if="hint && !errorMessage">\r\n {{ hint }}\r\n </p>\r\n\r\n <p key="errorMessage" class="mt-1.5 text-sm text-destructive" v-if="errorMessage">\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 { useId } from "radix-vue";\r\n\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 }>();\r\n\r\n defineOptions({ inheritAttrs: false });\r\n\r\n const inputId = useId(props.id);\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',
|
|
2342
2342
|
},
|
|
2343
2343
|
],
|
|
2344
2344
|
utils: [],
|
|
@@ -2358,7 +2358,7 @@ export default [
|
|
|
2358
2358
|
fileName: "Vee/TagsInput.vue",
|
|
2359
2359
|
dirPath: "components/UI",
|
|
2360
2360
|
fileContent:
|
|
2361
|
-
'<template>\r\n <div class="w-full">\r\n <
|
|
2361
|
+
'<template>\r\n <div class="w-full">\r\n <UiLabel\r\n :for="inputId"\r\n v-if="label"\r\n :class="[disabled && \'text-muted-foreground\', errorMessage && \'text-destructive\', \'mb-2\']"\r\n >{{ label }}</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 :name="icon" v-if="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 :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 key="hint" class="mt-1.5 text-sm text-muted-foreground" v-if="hint && !errorMessage">\r\n {{ hint }}\r\n </p>\r\n\r\n <p key="errorMessage" class="mt-1.5 text-sm text-destructive" v-if="errorMessage">\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 { useId } from "radix-vue";\r\n\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 }>();\r\n\r\n defineOptions({ inheritAttrs: false });\r\n\r\n const inputId = useId(props.id);\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',
|
|
2362
2362
|
},
|
|
2363
2363
|
],
|
|
2364
2364
|
utils: [],
|
|
@@ -2378,7 +2378,7 @@ export default [
|
|
|
2378
2378
|
fileName: "Vee/Textarea.vue",
|
|
2379
2379
|
dirPath: "components/UI",
|
|
2380
2380
|
fileContent:
|
|
2381
|
-
'<template>\r\n <div class="w-full">\r\n <
|
|
2381
|
+
'<template>\r\n <div class="w-full">\r\n <UiLabel :for="inputId" v-if="label" :class="[errorMessage && \'text-destructive\', \'mb-2\']">{{\r\n label\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 :name="icon" v-if="icon" class="h-4 w-4 text-muted-foreground/70" />\r\n </span>\r\n </slot>\r\n <UiTextarea\r\n :rows="rows"\r\n v-model="value"\r\n @blur="handleBlur"\r\n :id="inputId"\r\n :name="name"\r\n v-bind="$attrs"\r\n :class="[hasIcon && \'pl-9\']"\r\n :placeholder="placeholder"\r\n />\r\n </div>\r\n <TransitionSlide group tag="div">\r\n <p key="hint" class="mt-1.5 text-sm text-muted-foreground" v-if="hint && !errorMessage">\r\n {{ hint }}\r\n </p>\r\n\r\n <p key="errorMessage" class="mt-1.5 text-sm text-destructive" v-if="errorMessage">\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 { useId } from "radix-vue";\r\n\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 }>();\r\n\r\n defineOptions({ inheritAttrs: false });\r\n\r\n const inputId = useId(props.id);\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',
|
|
2382
2382
|
},
|
|
2383
2383
|
],
|
|
2384
2384
|
utils: [],
|
|
@@ -2391,7 +2391,7 @@ export default [
|
|
|
2391
2391
|
deps: ["vue-sonner"],
|
|
2392
2392
|
devDeps: [],
|
|
2393
2393
|
nuxtModules: [],
|
|
2394
|
-
instructions: ["Remember to add the <
|
|
2394
|
+
instructions: ["Remember to add the <UiVueSonner /> tag to your app.vue/layout file."],
|
|
2395
2395
|
files: [
|
|
2396
2396
|
{
|
|
2397
2397
|
fileName: "VueSonner.client.vue",
|